@vaadin/field-base 25.4.0-alpha1 → 25.4.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.4.0-alpha1",
+  "version": "25.4.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.4.0-alpha1",
-    "@vaadin/component-base": "25.4.0-alpha1",
+    "@vaadin/a11y-base": "25.4.0-alpha2",
+    "@vaadin/component-base": "25.4.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.4.0-alpha1",
-    "@vaadin/input-container": "25.4.0-alpha1",
-    "@vaadin/test-runner-commands": "25.4.0-alpha1",
+    "@vaadin/chai-plugins": "25.4.0-alpha2",
+    "@vaadin/input-container": "25.4.0-alpha2",
+    "@vaadin/test-runner-commands": "25.4.0-alpha2",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "be38ec1866e96508f3f4591f95c949ef55903a34"
+  "gitHead": "213f8b55112558d2f976d8730fe44370ca868333"
 }

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

@@ -72,6 +72,7 @@ export const checkable = (part, propName = part) => css`
     margin: 0;
     padding: 0;
     border: 0;
+    height: auto;
   }
 
   /* visually hidden */
@@ -80,6 +81,9 @@ export const checkable = (part, propName = part) => css`
     align-self: stretch;
     appearance: none;
     cursor: var(--_cursor);
+    /* Override 16px from iOS UA stylesheet and CSS resets */
+    width: auto !important;
+    height: auto !important;
     /* Ensure minimum click target (WCAG) */
     margin: min(0px, (24px - 100%) / -2) !important;
     /* Extend the input to cover the gap between the checkbox/radio and label */

package/src/styles/field-base-styles.d.ts

@@ -8,3 +8,5 @@ import type { CSSResult } from 'lit';
 export const field: CSSResult;
 
 export const fieldLabelAside: CSSResult;
+
+export const fieldInputHeight: CSSResult;

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

@@ -17,6 +17,12 @@ export const field = css`
     --_rows-after-input: ;
     --_gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
     --_gap-s: round(var(--_gap) / 3, 2px);
+    /* Single-line input-field height, 1lh resolves on ::before */
+    --_field-input-default-height: calc(
+      1lh + var(--vaadin-padding-block-container) * 2 + var(--vaadin-input-field-border-width, 1px) * 2
+    );
+    /* Input-field height mirrored by the baseline guide */
+    --_field-input-height: var(--_field-input-default-height);
     display: inline-grid;
     grid-template:
       '                           label' auto
@@ -55,10 +61,16 @@ export const field = css`
 
   /* Baseline alignment guide */
   :host::before {
+    --_baseline-height: var(--vaadin-field-baseline-input-height, var(--_field-input-height));
     content: '\\2003' / '';
     grid-column: baseline;
     grid-row: 1 / baseline;
     align-self: end;
+    /* Center text like the input container */
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: var(--_baseline-height);
     font-size: var(--vaadin-input-field-value-font-size, inherit);
     line-height: var(--vaadin-input-field-value-line-height, inherit);
     padding: var(
@@ -67,13 +79,7 @@ export const field = css`
     );
     border: var(--vaadin-input-field-border-width, 1px) solid transparent;
     pointer-events: none;
-    margin-bottom: calc(
-      var(
-          --vaadin-field-baseline-input-height,
-          (1lh + var(--vaadin-padding-block-container) * 2 + var(--vaadin-input-field-border-width, 1px) * 2)
-        ) *
-        -1
-    );
+    margin-bottom: calc(var(--_baseline-height) * -1);
   }
 
   [class$='container'] {
@@ -235,3 +241,9 @@ export const fieldLabelAside = css`
     align-self: baseline;
   }
 `;
+
+export const fieldInputHeight = css`
+  :host {
+    --_field-input-height: max(var(--vaadin-input-field-height, 0px), var(--_field-input-default-height));
+  }
+`;

package/src/styles/input-field-shared-styles.js

@@ -4,6 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { button } from './button-base-styles.js';
-import { field, fieldLabelAside } from './field-base-styles.js';
+import { field, fieldInputHeight, fieldLabelAside } from './field-base-styles.js';
 
-export const inputFieldShared = [field, fieldLabelAside, button];
+export const inputFieldShared = [field, fieldLabelAside, fieldInputHeight, button];