@vaadin/field-base 25.0.0-alpha1 → 25.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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);
+            background-clip: text;
+          }
+
+          ${tag}:has(> input[slot='input']:autofill) {
+            --vaadin-input-field-background: var(--vaadin-input-field-autofill-background, lightyellow);
+            --vaadin-input-field-value-color: var(--vaadin-input-field-autofill-color, black);
+            --vaadin-input-field-button-color: var(--vaadin-input-field-autofill-color, black);
+          }
         `,
       ];
     }

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/checkable-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 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-core-styles.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, unsafeCSS } from 'lit';
+
+export const checkable = (part, propName = part) => css`
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-${unsafeCSS(propName)}-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [part='${unsafeCSS(part)}'],
+  ::slotted(input),
+  [part='label'],
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='${unsafeCSS(part)}'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  /* Control container (checkbox, radio button) */
+  [part='${unsafeCSS(part)}'] {
+    width: var(--vaadin-${unsafeCSS(propName)}-size, 1em);
+    height: var(--vaadin-${unsafeCSS(propName)}-size, 1em);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0);
+    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  [part='${unsafeCSS(part)}']::before {
+    display: block;
+    content: '\\202F';
+    line-height: var(--vaadin-${unsafeCSS(propName)}-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    appearance: none;
+    width: initial;
+    height: initial;
+  }
+`;

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

@@ -32,9 +32,11 @@ export const field = css`
       outline: 1px solid;
       outline-offset: -1px;
     }
+
     :host([focused]) [part='input-field'] {
       outline-width: 2px;
     }
+
     :host([disabled]) [part='input-field'] {
       outline-color: GrayText;
     }

package/src/styles/group-core-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 group: (name?: string) => CSSResult;

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 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 group = () => css`
+  :host {
+    display: inline-flex;
+  }
+
+  :host::before {
+    content: '\\2003';
+    width: 0;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-group-field-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [part='group-field'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+`;