@vaadin/field-base 25.0.0-alpha2 → 25.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,7 @@
   "files": [
     "index.d.ts",
     "index.js",
-    "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js"
+    "src"
   ],
   "keywords": [
     "Vaadin",
@@ -33,15 +31,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

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/input-control-mixin.js

@@ -103,13 +103,27 @@ export const InputControlMixin = (superclass) =>
 
     /** @protected */
     get slotStyles() {
-      // Needed for Safari, where ::slotted(...)::placeholder does not work
+      const tag = this.localName;
+
       return [
         `
-          :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
+          /* Needed for Safari, where ::slotted(...)::placeholder does not work */
+          ${tag} > :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
             font: inherit;
             color: inherit;
           }
+
+          /* Override built-in autofill styles */
+          ${tag} > input[slot='input']:autofill {
+            -webkit-text-fill-color: var(--vaadin-input-field-autofill-color, black) !important;
+            background-clip: text !important;
+          }
+
+          ${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/input-field-mixin.d.ts

@@ -47,15 +47,6 @@ export declare class InputFieldMixinClass {
    */
   autocomplete: string | undefined;
 
-  /**
-   * This is a property supported by Safari that is used to control whether
-   * autocorrection should be enabled when the user is entering/editing the text.
-   * Possible values are:
-   * on: Enable autocorrection.
-   * off: Disable autocorrection.
-   */
-  autocorrect: 'off' | 'on' | undefined;
-
   /**
    * This is a property supported by Safari and Chrome that is used to control whether
    * autocapitalization should be enabled when the user is entering/editing the text.

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

@@ -0,0 +1,54 @@
+/**
+ * @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 button = css`
+  [part$='button'] {
+    color: var(--vaadin-input-field-button-color, var(--vaadin-text-color-secondary));
+    cursor: var(--vaadin-clickable-cursor);
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Icon */
+  [part$='button']::before {
+    background: currentColor;
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  :host(:is(:not([clear-button-visible][has-value]), [disabled], [readonly])) [part~='clear-button'] {
+    display: none;
+  }
+
+  [part~='clear-button']::before {
+    mask-image: var(--_vaadin-icon-cross);
+  }
+
+  :host(:is([readonly], [disabled])) [part$='button'] {
+    color: var(--vaadin-text-color-disabled);
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
+  @media (forced-colors: active) {
+    [part$='button']::before {
+      background: CanvasText;
+    }
+
+    :host([disabled]) [part$='button'] {
+      color: GrayText;
+    }
+
+    :host([disabled]) [part$='button']::before {
+      background: GrayText;
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @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 checkable: (part: string, propName?: string) => CSSResult;

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

@@ -0,0 +1,161 @@
+/**
+ * @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, 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));
+    grid-template-columns: auto 1fr;
+    /*
+      Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox
+      inside a flex container with flex-direction: column causes the container to unexpectedly
+      grow to the max available height.
+    */
+    grid-template-rows: minmax(auto, max-content);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    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'],
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='label'],
+  ::slotted(label) {
+    font-size: var(--vaadin-${unsafeCSS(propName)}-label-font-size, var(--vaadin-input-field-label-font-size, inherit));
+    line-height: var(--vaadin-${unsafeCSS(propName)}-label-line-height, var(--vaadin-input-field-label-line-height, inherit));
+    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;
+  }
+
+  [part='${unsafeCSS(part)}'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  [part='helper-text'],
+  [part='error-message'] {
+    grid-column: 2;
+  }
+
+  /* Baseline vertical alignment */
+  :host::before {
+    content: '\\2003';
+    grid-column: 1;
+    grid-row: 1;
+    width: 0;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    appearance: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* 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)));
+    border-radius: var(--vaadin-${unsafeCSS(propName)}-border-radius, var(--vaadin-radius-s));
+    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;
+    color: var(--vaadin-${unsafeCSS(propName)}-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)));
+    height: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
+    width: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
+    position: relative;
+  }
+
+  :host(:is([checked], [indeterminate])) {
+    --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-text-color);
+    --vaadin-${unsafeCSS(propName)}-border-color: transparent;
+    --vaadin-${unsafeCSS(propName)}-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
+  }
+
+  :host([disabled]) {
+    --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-input-field-disabled-background, var(--vaadin-background-container-strong));
+    --vaadin-${unsafeCSS(propName)}-border-color: transparent;
+    --vaadin-${unsafeCSS(propName)}-color: var(--vaadin-text-color-disabled);
+  }
+
+  /* Focus ring */
+  :host([focus-ring]) [part='${unsafeCSS(part)}'] {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--_border-width) * -1);
+  }
+
+  :host([focus-ring]:is([checked], [indeterminate])) [part='${unsafeCSS(part)}'] {
+    outline-offset: 1px;
+  }
+
+  :host([readonly][focus-ring]) [part='${unsafeCSS(part)}'] {
+    --vaadin-${unsafeCSS(propName)}-border-color: transparent;
+    outline-offset: calc(var(--_border-width) * -1);
+    outline-style: dashed;
+  }
+
+  /* Checked indicator (checkmark, dot) */
+  [part='${unsafeCSS(part)}']::after {
+    content: '';
+    position: absolute;
+    background: currentColor;
+    border-radius: inherit;
+  }
+
+  :host(:not([checked], [indeterminate])) [part='${unsafeCSS(part)}']::after {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :host(:is([checked], [indeterminate])) {
+      --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 !important;
+    }
+
+    :host([disabled]) {
+      --vaadin-${unsafeCSS(propName)}-border-color: GrayText !important;
+    }
+
+    :host([disabled]) [part='${unsafeCSS(part)}']::after {
+      background: GrayText !important;
+    }
+  }
+`;

package/src/styles/{container-core-styles.js → container-base-styles.js}

@@ -3,12 +3,14 @@
  * 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);

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

@@ -0,0 +1,125 @@
+/**
+ * @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 field = css`
+  :host {
+    display: inline-flex;
+    outline: none;
+    cursor: default;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* The label, helper text and the error message should neither grow nor shrink. */
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    flex: none;
+  }
+
+  :host(:not([has-label])) [part='label'],
+  :host(:not([has-helper])) [part='helper-text'],
+  :host(:not([has-error-message])) [part='error-message'] {
+    display: none;
+  }
+
+  [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;
+  }
+
+  ::slotted(label) {
+    cursor: inherit;
+  }
+
+  :host([disabled]) [part='label'],
+  :host([disabled]) ::slotted(label) {
+    opacity: 0.5;
+  }
+
+  :host([disabled]) [part='label'] ::slotted(label) {
+    opacity: 1;
+  }
+
+  :host([required]) [part='label'] {
+    padding-inline-end: 1em;
+  }
+
+  [part='required-indicator'] {
+    display: inline-block;
+    position: absolute;
+    width: 1em;
+    text-align: center;
+    color: var(--vaadin-input-field-required-indicator-color, var(--vaadin-text-color-secondary));
+  }
+
+  [part='required-indicator']::after {
+    content: var(--vaadin-input-field-required-indicator, '*');
+  }
+
+  :host(:not([required])) [part='required-indicator'] {
+    display: none;
+  }
+
+  [part='input-field'] {
+    flex: auto;
+  }
+
+  :host([readonly]) [part='input-field'] {
+    cursor: default;
+  }
+
+  :host([disabled]) [part='input-field'] {
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
+  [part='helper-text'] {
+    font-size: var(--vaadin-input-field-helper-font-size, inherit);
+    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);
+  }
+
+  [part='error-message'] {
+    font-size: var(--vaadin-input-field-error-font-size, inherit);
+    line-height: var(--vaadin-input-field-error-line-height, inherit);
+    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);
+  }
+
+  [part='error-message']::before {
+    content: '';
+    display: inline-block;
+    flex: none;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-warn);
+    background: currentColor;
+  }
+
+  :host([theme~='helper-above-field']) {
+    --vaadin-input-field-helper-order: -1;
+  }
+
+  @media (forced-colors: active) {
+    [part='error-message']::before {
+      background: CanvasText;
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 group: (name?: string) => CSSResult;

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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, 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 {
+    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;
+  }
+`;

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { button } from './button-core-styles.js';
-import { container } from './container-core-styles.js';
-import { field } from './field-core-styles.js';
+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];

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

@@ -1,21 +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 { css } from 'lit';
-
-export const button = css`
-  [part='clear-button'] {
-    display: none;
-    cursor: default;
-  }
-
-  [part='clear-button']::before {
-    content: '\\2715';
-  }
-
-  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
-    display: block;
-  }
-`;

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

@@ -1,44 +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 { css } from 'lit';
-
-export const field = css`
-  :host {
-    display: inline-flex;
-    outline: none;
-  }
-
-  :host::before {
-    content: '\\2003';
-    width: 0;
-    display: inline-block;
-    /* Size and position this element on the same vertical position as the input-field element
-          to make vertical align for the host element work as expected */
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([has-label])) [part='label'] {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    :host(:not([readonly])) [part='input-field'] {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([focused]) [part='input-field'] {
-      outline-width: 2px;
-    }
-
-    :host([disabled]) [part='input-field'] {
-      outline-color: GrayText;
-    }
-  }
-`;