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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/checked-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/checked-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/clear-button-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
@@ -89,7 +89,7 @@ export const ClearButtonMixin = (superclass) =>
     _onEscape(event) {
       super._onEscape(event);
 
-      if (this.clearButtonVisible && !!this.value) {
+      if (this.clearButtonVisible && !!this.value && !this.readonly) {
         event.stopPropagation();
         this._onClearAction();
       }

package/src/error-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';

package/src/error-controller.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
@@ -108,12 +109,10 @@ export class ErrorController extends SlotChildObserveController {
       errorNode.textContent = hasError ? errorMessage : '';
       errorNode.hidden = !hasError;
 
-      // Role alert will make the error message announce immediately
-      // as the field becomes invalid
       if (hasError) {
-        errorNode.setAttribute('role', 'alert');
-      } else {
-        errorNode.removeAttribute('role');
+        // Assertive mode ensures VoiceOver reads
+        // the error message on commit with Enter.
+        announce(errorMessage, { mode: 'assertive' });
       }
     }
 

package/src/field-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * 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';

package/src/helper-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';

package/src/helper-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/input-constraints-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/input-control-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';

package/src/input-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/input-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/input-field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { InputControlMixin } from './input-control-mixin.js';
@@ -33,6 +33,7 @@ export const InputFieldMixin = (superclass) =>
          */
         autocorrect: {
           type: String,
+          reflectToAttribute: true,
         },
 
         /**

package/src/input-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -68,6 +68,4 @@ export declare class InputMixinClass {
   protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
-
-  protected _setHasInputValue(event: InputEvent): void;
 }

package/src/input-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * 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';
@@ -32,6 +32,7 @@ export const InputMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_inputElementChanged',
+            sync: true,
           },
 
           /**
@@ -53,24 +54,13 @@ export const InputMixin = dedupingMixin(
             notify: true,
             sync: true,
           },
-
-          /**
-           * Whether the input element has a non-empty value.
-           *
-           * @protected
-           */
-          _hasInputValue: {
-            type: Boolean,
-            value: false,
-            observer: '_hasInputValueChanged',
-          },
         };
       }
 
       constructor() {
         super();
 
-        this._boundOnInput = this.__onInput.bind(this);
+        this._boundOnInput = this._onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
       }
 
@@ -115,16 +105,12 @@ export const InputMixin = dedupingMixin(
         if (this.inputElement) {
           this.inputElement[this._inputElementValueProperty] = value;
         }
-
-        this._hasInputValue = value && value.length > 0;
       }
 
       /**
        * Clear the value of the field.
        */
       clear() {
-        this._hasInputValue = false;
-
         this.value = '';
 
         // Clear the input immediately without waiting for the observer.
@@ -185,29 +171,6 @@ export const InputMixin = dedupingMixin(
         }
       }
 
-      /**
-       * Observer to notify about the change of private property.
-       *
-       * @private
-       */
-      _hasInputValueChanged(hasValue, oldHasValue) {
-        if (hasValue || oldHasValue) {
-          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
-        }
-      }
-
-      /**
-       * An input event listener used to update `_hasInputValue` property.
-       * Do not override this method.
-       *
-       * @param {Event} event
-       * @private
-       */
-      __onInput(event) {
-        this._setHasInputValue(event);
-        this._onInput(event);
-      }
-
       /**
        * An input event listener used to update the field value.
        *
@@ -265,19 +228,5 @@ export const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
-
-      /**
-       * Sets the `_hasInputValue` property based on the `input` event.
-       *
-       * @param {InputEvent} event
-       * @protected
-       */
-      _setHasInputValue(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        this._hasInputValue = target.value.length > 0;
-      }
     },
 );

package/src/label-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';

package/src/label-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';

package/src/label-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/label-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * 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';

package/src/labelled-input-controller.d.ts

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

package/src/labelled-input-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/pattern-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/pattern-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { InputConstraintsMixin } from './input-constraints-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

package/src/styles/input-field-container-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

package/src/styles/input-field-shared-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * 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';

package/src/text-area-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/text-area-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/validate-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/validate-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * 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';
@@ -23,6 +23,7 @@ export const ValidateMixin = dedupingMixin(
             reflectToAttribute: true,
             notify: true,
             value: false,
+            sync: true,
           },
 
           /**
@@ -47,6 +48,7 @@ export const ValidateMixin = dedupingMixin(
           required: {
             type: Boolean,
             reflectToAttribute: true,
+            sync: true,
           },
         };
       }

package/src/virtual-keyboard-controller.d.ts

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

package/src/virtual-keyboard-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */