@vaadin/field-base 24.8.0-alpha8 → 25.0.0-alpha1

package/package.json

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

package/src/checked-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
@@ -16,7 +16,7 @@ import { InputMixin } from './input-mixin.js';
  * @mixes DisabledMixin
  * @mixes InputMixin
  */
-export const CheckedMixin = dedupingMixin(
+export const CheckedMixin = dedupeMixin(
   (superclass) =>
     class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
       static get properties() {

package/src/clear-button-mixin.d.ts

@@ -5,7 +5,6 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 
 /**
@@ -13,11 +12,7 @@ import type { InputMixinClass } from './input-mixin.js';
  */
 export declare function ClearButtonMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ClearButtonMixinClass> &
-  Constructor<ControllerMixinClass> &
-  Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass> &
-  T;
+): Constructor<ClearButtonMixinClass> & Constructor<InputMixinClass> & Constructor<KeyboardMixinClass> & T;
 
 export declare class ClearButtonMixinClass {
   /**

package/src/field-mixin.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { LabelMixinClass } from './label-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -13,11 +12,7 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): Constructor<ControllerMixinClass> &
-  Constructor<FieldMixinClass> &
-  Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass> &
-  T;
+): Constructor<FieldMixinClass> & Constructor<LabelMixinClass> & Constructor<ValidateMixinClass> & T;
 
 export declare class FieldMixinClass {
   /**

package/src/field-mixin.js

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FieldAriaController } from '@vaadin/a11y-base/src/field-aria-controller.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ErrorController } from './error-controller.js';
 import { HelperController } from './helper-controller.js';
 import { LabelMixin } from './label-mixin.js';
@@ -14,12 +13,11 @@ import { ValidateMixin } from './validate-mixin.js';
  * A mixin to provide common field logic: label, error message and helper text.
  *
  * @polymerMixin
- * @mixes ControllerMixin
  * @mixes LabelMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(superclass)) {
     static get properties() {
       return {
         /**

package/src/input-constraints-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
@@ -16,7 +16,7 @@ import { ValidateMixin } from './validate-mixin.js';
  * @mixes InputMixin
  * @mixes ValidateMixin
  */
-export const InputConstraintsMixin = dedupingMixin(
+export const InputConstraintsMixin = dedupeMixin(
   (superclass) =>
     class InputConstraintsMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
       /**

package/src/input-control-mixin.d.ts

@@ -8,7 +8,6 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
@@ -24,7 +23,6 @@ import type { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
-  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/input-field-mixin.d.ts

@@ -8,7 +8,6 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
@@ -25,7 +24,6 @@ import type { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
-  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/input-field-mixin.js

@@ -56,15 +56,6 @@ export const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    // Workaround for https://github.com/Polymer/polymer/issues/5259
-    get __data() {
-      return this.__dataValue || {};
-    }
-
-    set __data(value) {
-      this.__dataValue = value;
-    }
-
     /**
      * @param {HTMLElement} input
      * @protected

package/src/input-mixin.d.ts

@@ -15,11 +15,8 @@ export declare class InputMixinClass {
   /**
    * A reference to the input element controlled by the mixin.
    * Any component implementing this mixin is expected to provide it
-   * by using `this._setInputElement(input)` Polymer API.
-   *
-   * A typical case is using `InputController` that does this automatically.
-   * However, the input element does not have to always be native <input>:
-   * as an example, <vaadin-combo-box-light> accepts other components.
+   * by using `this._setInputElement(input)` API. A typical case is
+   * using `InputController` that does this automatically.
    */
   readonly inputElement: HTMLElement;
 

package/src/input-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to store the reference to an input element
@@ -11,7 +11,7 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
  *
  * @polymerMixin
  */
-export const InputMixin = dedupingMixin(
+export const InputMixin = dedupeMixin(
   (superclass) =>
     class InputMixinClass extends superclass {
       static get properties() {
@@ -19,11 +19,8 @@ export const InputMixin = dedupingMixin(
           /**
            * A reference to the input element controlled by the mixin.
            * Any component implementing this mixin is expected to provide it
-           * by using `this._setInputElement(input)` Polymer API.
-           *
-           * A typical case is using `InputController` that does this automatically.
-           * However, the input element does not have to always be native <input>:
-           * as an example, <vaadin-combo-box-light> accepts other components.
+           * by using `this._setInputElement(input)` API. A typical case is
+           * using `InputController` that does this automatically.
            *
            * @protected
            * @type {!HTMLElement}

package/src/label-mixin.js

@@ -3,19 +3,17 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { LabelController } from './label-controller.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
  *
  * @polymerMixin
- * @mixes ControllerMixin
  */
-export const LabelMixin = dedupingMixin(
+export const LabelMixin = dedupeMixin(
   (superclass) =>
-    class LabelMixinClass extends ControllerMixin(superclass) {
+    class LabelMixinClass extends superclass {
       static get properties() {
         return {
           /**

package/src/styles/{clear-button-styles.d.ts → button-core-styles.d.ts}

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const clearButton: CSSResult;
+export const button: CSSResult;

package/src/styles/{clear-button-styles.js → button-core-styles.js}

@@ -5,7 +5,7 @@
  */
 import { css } from 'lit';
 
-export const clearButton = css`
+export const button = css`
   [part='clear-button'] {
     display: none;
     cursor: default;

package/src/styles/{field-shared-styles.d.ts → container-core-styles.d.ts}

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const fieldShared: CSSResult;
+export const container: CSSResult;

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

@@ -5,7 +5,7 @@
  */
 import { css } from 'lit';
 
-export const inputFieldContainer = css`
+export const container = css`
   [class$='container'] {
     display: flex;
     flex-direction: column;

package/src/styles/{input-field-container-styles.d.ts → field-core-styles.d.ts}

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const inputFieldContainer: CSSResult;
+export const field: CSSResult;

package/src/styles/{field-shared-styles.js → field-core-styles.js}

@@ -5,7 +5,7 @@
  */
 import { css } from 'lit';
 
-export const fieldShared = css`
+export const field = css`
   :host {
     display: inline-flex;
     outline: none;

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 { clearButton } from './clear-button-styles.js';
-import { fieldShared } from './field-shared-styles.js';
-import { inputFieldContainer } from './input-field-container-styles.js';
+import { button } from './button-core-styles.js';
+import { container } from './container-core-styles.js';
+import { field } from './field-core-styles.js';
 
-export const inputFieldShared = [fieldShared, inputFieldContainer, clearButton];
+export const inputFieldShared = [field, container, button];

package/src/validate-mixin.js

@@ -3,14 +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 { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide required state and validation logic.
  *
  * @polymerMixin
  */
-export const ValidateMixin = dedupingMixin(
+export const ValidateMixin = dedupeMixin(
   (superclass) =>
     class ValidateMixinClass extends superclass {
       static get properties() {