@vaadin/field-base 25.0.0-beta3 → 25.0.0-beta5

package/package.json

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

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

@@ -14,6 +14,9 @@ export const button = css`
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     user-select: none;
+    /* Ensure minimum click target (WCAG) */
+    padding: max(0px, (24px - 1lh) / 2);
+    margin: min(0px, (24px - 1lh) / -2);
   }
 
   /* Icon */

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

@@ -9,9 +9,8 @@ import { css, unsafeCSS } from 'lit';
 // postcss-lit-disable-next-line
 export const checkable = (part, propName = part) => css`
   :host {
-    align-items: center;
-    display: inline-grid;
-    gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
+    align-items: baseline;
+    column-gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     /*
       Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox
@@ -20,20 +19,17 @@ export const checkable = (part, propName = part) => css`
     */
     grid-template-rows: minmax(auto, max-content);
     -webkit-tap-highlight-color: transparent;
+    --_cursor: var(--vaadin-clickable-cursor);
   }
 
   :host([disabled]) {
-    cursor: var(--vaadin-disabled-cursor);
+    --_cursor: var(--vaadin-disabled-cursor);
   }
 
   :host(:not([has-label])) {
     column-gap: 0;
   }
 
-  .vaadin-${unsafeCSS(propName)}-container {
-    display: contents;
-  }
-
   [part='${unsafeCSS(part)}'],
   ::slotted(input),
   [part='label'],
@@ -48,6 +44,8 @@ export const checkable = (part, propName = part) => css`
     font-weight: var(--vaadin-${unsafeCSS(propName)}-font-weight, var(--vaadin-input-field-label-font-weight, 500));
     color: var(--vaadin-${unsafeCSS(propName)}-label-color, var(--vaadin-input-field-label-color, var(--vaadin-text-color)));
     word-break: break-word;
+    cursor: var(--_cursor);
+    /* TODO clicking the label part doesn't toggle the checked state, even though it triggers the active state */
   }
 
   [part='${unsafeCSS(part)}'],
@@ -55,17 +53,26 @@ export const checkable = (part, propName = part) => css`
     grid-column: 1;
   }
 
+  [part='label'],
   [part='helper-text'],
   [part='error-message'] {
+    margin-bottom: 0;
     grid-column: 2;
+    width: auto;
+    min-width: auto;
+  }
+
+  [part='helper-text'],
+  [part='error-message'] {
+    margin-top: var(--_gap-s);
   }
 
   /* Baseline vertical alignment */
   :host::before {
-    content: '\\2003';
-    grid-column: 1;
     grid-row: 1;
-    width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
   }
 
   /* visually hidden */
@@ -74,8 +81,12 @@ export const checkable = (part, propName = part) => css`
     margin: 0;
     align-self: stretch;
     appearance: none;
-    width: 100%;
-    height: 100%;
+    cursor: var(--_cursor);
+    /* Ensure minimum click target (WCAG) */
+    width: 2px;
+    height: 2px;
+    scale: 12;
+    margin: auto;
   }
 
   /* Control container (checkbox, radio button) */
@@ -87,16 +98,20 @@ export const checkable = (part, propName = part) => css`
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
     border-width: var(--_border-width);
     box-sizing: border-box;
-    color: var(--vaadin-${unsafeCSS(propName)}-marker-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)));
+    --_color: var(--vaadin-${unsafeCSS(propName)}-marker-color, var(--vaadin-${unsafeCSS(propName)}-background, var(--vaadin-background-color)));
+    color: var(--_color);
     height: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     width: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     position: relative;
+    cursor: var(--_cursor);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   :host(:is([checked], [indeterminate])) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-text-color);
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-marker-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
   }
 
   :host([disabled]) {
@@ -123,14 +138,17 @@ export const checkable = (part, propName = part) => css`
 
   /* Checked indicator (checkmark, dot) */
   [part='${unsafeCSS(part)}']::after {
-    content: '';
-    position: absolute;
+    content: '\\2003' / '';
     background: currentColor;
     border-radius: inherit;
+    display: flex;
+    align-items: center;
+    --_filter: var(--vaadin-${unsafeCSS(propName)}-marker-color, saturate(0) invert(1) hue-rotate(180deg) contrast(100) brightness(100));
+    filter: var(--_filter);
   }
 
   :host(:not([checked], [indeterminate])) [part='${unsafeCSS(part)}']::after {
-    display: none;
+    opacity: 0;
   }
 
   @media (forced-colors: active) {

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

@@ -8,21 +8,45 @@ import { css } from 'lit';
 
 export const field = css`
   :host {
-    display: inline-flex;
+    --_helper-below-field: initial;
+    --_helper-above-field: ;
+    --_no-label: initial;
+    --_has-label: ;
+    --_no-helper: initial;
+    --_has-helper: ;
+    --_no-error: initial;
+    --_has-error: ;
+    --_gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
+    --_gap-s: round(var(--_gap) / 3, 2px);
+    display: inline-grid;
+    grid-template:
+      'label' auto var(--_helper-above-field, 'helper' auto) 'baseline' 0 'input' 1fr var(
+        --_helper-below-field,
+        'helper' auto
+      )
+      'error' auto / 100%;
     outline: none;
     cursor: default;
     -webkit-tap-highlight-color: transparent;
   }
 
-  :host([hidden]) {
-    display: none !important;
+  :host([has-label]) {
+    --_has-label: initial;
+    --_no-label: ;
   }
 
-  /* The label, helper text and the error message should neither grow nor shrink. */
-  [part='label'],
-  [part='helper-text'],
-  [part='error-message'] {
-    flex: none;
+  :host([has-helper]) {
+    --_has-helper: initial;
+    --_no-helper: ;
+  }
+
+  :host([has-error-message]) {
+    --_has-error: initial;
+    --_no-error: ;
+  }
+
+  :host([hidden]) {
+    display: none !important;
   }
 
   :host(:not([has-label])) [part='label'],
@@ -31,14 +55,50 @@ export const field = css`
     display: none;
   }
 
+  /* Baseline alignment guide */
+  :host::before {
+    content: '\\2003' / '';
+    grid-column: 1;
+    grid-row: var(--_has-label, label / baseline) var(--_no-label, label / input);
+    align-self: var(--_has-label, end) var(--_no-label, start);
+    font-size: var(--vaadin-input-field-value-font-size, inherit);
+    line-height: var(--vaadin-input-field-value-line-height, inherit);
+    padding: var(
+      --vaadin-input-field-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
+    border: var(--vaadin-input-field-border-width, 1px) solid transparent;
+    pointer-events: none;
+    margin-bottom: var(--_no-label, 0)
+      var(
+        --_has-label,
+        calc(
+          var(
+              --vaadin-field-baseline-input-height,
+              (1lh + var(--vaadin-padding-xs) * 2 + var(--vaadin-input-field-border-width, 1px) * 2)
+            ) *
+            -1
+        )
+      );
+  }
+
+  [class$='container'] {
+    display: contents;
+  }
+
+  [part] {
+    grid-column: 1;
+  }
+
   [part='label'] {
     font-size: var(--vaadin-input-field-label-font-size, inherit);
     line-height: var(--vaadin-input-field-label-line-height, inherit);
     font-weight: var(--vaadin-input-field-label-font-weight, 500);
     color: var(--vaadin-input-field-label-color, var(--vaadin-text-color));
-    order: var(--vaadin-input-field-helper-order);
     word-break: break-word;
     position: relative;
+    grid-area: label;
+    margin-bottom: var(--_helper-below-field, var(--_gap)) var(--_helper-above-field, var(--_no-helper, var(--_gap)));
   }
 
   ::slotted(label) {
@@ -74,8 +134,23 @@ export const field = css`
     display: none;
   }
 
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    width: min-content;
+    min-width: 100%;
+  }
+
+  [part='input-field'],
+  [part='group-field'],
+  [part='input-fields'] {
+    grid-area: input;
+  }
+
   [part='input-field'] {
-    flex: auto;
+    width: var(--vaadin-field-default-width, 12em);
+    max-width: 100%;
+    min-width: 100%;
   }
 
   :host([readonly]) [part='input-field'] {
@@ -91,7 +166,9 @@ export const field = css`
     line-height: var(--vaadin-input-field-helper-line-height, inherit);
     font-weight: var(--vaadin-input-field-helper-font-weight, 400);
     color: var(--vaadin-input-field-helper-color, var(--vaadin-text-color-secondary));
-    order: var(--vaadin-input-field-helper-order);
+    grid-area: helper;
+    margin-top: var(--_helper-above-field, var(--_gap-s)) var(--_helper-below-field, var(--_gap));
+    margin-bottom: var(--_helper-above-field, var(--_gap));
   }
 
   [part='error-message'] {
@@ -100,7 +177,10 @@ export const field = css`
     font-weight: var(--vaadin-input-field-error-font-weight, 400);
     color: var(--vaadin-input-field-error-color, var(--vaadin-text-color));
     display: flex;
-    gap: var(--vaadin-gap-s);
+    gap: var(--vaadin-gap-xs);
+    grid-area: error;
+    margin-top: var(--_has-helper, var(--_helper-below-field, var(--_gap-s)) var(--_helper-above-field, var(--_gap)))
+      var(--_no-helper, var(--_gap));
   }
 
   [part='error-message']::before {
@@ -114,7 +194,8 @@ export const field = css`
   }
 
   :host([theme~='helper-above-field']) {
-    --vaadin-input-field-helper-order: -1;
+    --_helper-above-field: initial;
+    --_helper-below-field: ;
   }
 
   @media (forced-colors: active) {

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

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const group: (name?: string) => CSSResult;
+export const group: CSSResult;

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

@@ -4,29 +4,30 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';
-import { css, unsafeCSS } from 'lit';
+import { css } from 'lit';
 
-export const group = (name = 'checkbox') => css`
-  :host {
-    width: fit-content;
-    gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-xs));
+export const group = css`
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    width: auto;
+    min-width: auto;
   }
 
-  .vaadin-group-field-container {
-    display: contents;
-  }
-
-  :host,
   [part='group-field'] {
     display: flex;
     flex-direction: column;
-  }
-
-  [part='group-field'] {
     gap: var(--vaadin-gap-xs) var(--vaadin-gap-xl);
   }
 
   :host([theme~='horizontal']) [part='group-field'] {
     flex-flow: row wrap;
+    align-items: center;
+  }
+
+  :host([has-label][theme~='horizontal']) [part='group-field'] {
+    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
+    padding-inline: 0;
+    border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;
   }
 `;

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

@@ -4,7 +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 { container } from './container-base-styles.js';
 import { field } from './field-base-styles.js';
 
-export const inputFieldShared = [field, container, button];
+export const inputFieldShared = [field, button];

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const container: CSSResult;

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

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/component-base/src/styles/style-props.js';
-import { css } from 'lit';
-
-export const container = css`
-  [class$='container'] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
-    min-width: 100%;
-    max-width: 100%;
-    width: var(--vaadin-field-default-width, 12em);
-  }
-`;