@vaadin/field-base 25.0.0-alpha12 → 25.0.0-alpha13

package/package.json

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

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-container-inline));
+    gap: var(--vaadin-${unsafeCSS(propName)}-gap, 0.25lh var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     /*
       Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox
@@ -82,7 +82,7 @@ export const checkable = (part, propName = part) => css`
   /* Control container (checkbox, radio button) */
   [part='${unsafeCSS(part)}'] {
     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-strong)));
+    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-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));

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-container-block));
+    gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-s));
     min-width: 100%;
     max-width: 100%;
     width: var(--vaadin-field-default-width, 12em);

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

@@ -38,6 +38,7 @@ export const field = css`
     color: var(--vaadin-input-field-label-color, var(--vaadin-color));
     order: var(--vaadin-input-field-helper-order);
     word-break: break-word;
+    position: relative;
   }
 
   ::slotted(label) {
@@ -99,7 +100,7 @@ export const field = css`
     font-weight: var(--vaadin-input-field-error-font-weight, 400);
     color: var(--vaadin-input-field-error-color, var(--vaadin-color));
     display: flex;
-    gap: var(--vaadin-gap-container-inline);
+    gap: var(--vaadin-gap-s);
   }
 
   [part='error-message']::before {

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

@@ -19,7 +19,7 @@ export const group = (name = 'checkbox') => css`
   [part='group-field'] {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-container-block));
+    gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-s));
   }
 
   [part='group-field'] {