@vaadin/custom-field 24.2.0-alpha1 → 24.2.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-custom-field.d.ts",
+    "!src/vaadin-lit-custom-field.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -34,32 +36,33 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha1",
-    "@vaadin/component-base": "24.2.0-alpha1",
-    "@vaadin/field-base": "24.2.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
+    "@vaadin/a11y-base": "24.2.0-alpha11",
+    "@vaadin/component-base": "24.2.0-alpha11",
+    "@vaadin/field-base": "24.2.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/combo-box": "24.2.0-alpha1",
-    "@vaadin/date-picker": "24.2.0-alpha1",
-    "@vaadin/email-field": "24.2.0-alpha1",
-    "@vaadin/form-layout": "24.2.0-alpha1",
-    "@vaadin/number-field": "24.2.0-alpha1",
-    "@vaadin/password-field": "24.2.0-alpha1",
-    "@vaadin/select": "24.2.0-alpha1",
-    "@vaadin/testing-helpers": "^0.4.2",
-    "@vaadin/text-area": "24.2.0-alpha1",
-    "@vaadin/text-field": "24.2.0-alpha1",
-    "@vaadin/time-picker": "24.2.0-alpha1",
+    "@vaadin/combo-box": "24.2.0-alpha11",
+    "@vaadin/date-picker": "24.2.0-alpha11",
+    "@vaadin/email-field": "24.2.0-alpha11",
+    "@vaadin/form-layout": "24.2.0-alpha11",
+    "@vaadin/number-field": "24.2.0-alpha11",
+    "@vaadin/password-field": "24.2.0-alpha11",
+    "@vaadin/select": "24.2.0-alpha11",
+    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/text-area": "24.2.0-alpha11",
+    "@vaadin/text-field": "24.2.0-alpha11",
+    "@vaadin/time-picker": "24.2.0-alpha11",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
+  "gitHead": "a958207d5f6a09ca0e2dcf9f62194b3f92c8766a"
 }

package/src/vaadin-custom-field-mixin.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 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';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+
+export type CustomFieldParseValueFn = (value: string) => unknown[];
+
+export type CustomFieldFormatValueFn = (inputValues: unknown[]) => string;
+
+/**
+ * A mixin providing common custom field functionality.
+ */
+export declare function CustomFieldMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<CustomFieldMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class CustomFieldMixinClass {
+  /**
+   * Array of available input nodes
+   */
+  readonly inputs: HTMLElement[] | undefined;
+
+  /**
+   * A function to format the values of the individual fields contained by
+   * the custom field into a single component value. The function receives
+   * an array of all values of the individual fields in the order of their
+   * presence in the DOM, and must return a single component value.
+   * This function is called each time a value of an internal field is
+   * changed.
+   *
+   * Example:
+   * ```js
+   * customField.formatValue = (fieldValues) => {
+   *   return fieldValues.join("-");
+   * }
+   * ```
+   */
+  formatValue: CustomFieldFormatValueFn | undefined;
+
+  /**
+   * A function to parse the component value into values for the individual
+   * fields contained by the custom field. The function receives the
+   * component value, and must return an array of values for the individual
+   * fields in the order of their presence in the DOM.
+   * The function is called each time the value of the component changes.
+   *
+   * Example:
+   * ```js
+   * customField.parseValue = (componentValue) => {
+   *   return componentValue.split("-");
+   * }
+   * ```
+   */
+  parseValue: CustomFieldParseValueFn | undefined;
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string | null | undefined;
+
+  /**
+   * The value of the field. When wrapping several inputs, it will contain `\t`
+   * (Tab character) as a delimiter indicating parts intended to be used as the
+   * corresponding inputs values.
+   * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+   * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
+   * properties to customize this behavior.
+   */
+  value: string | null | undefined;
+}

package/src/vaadin-custom-field-mixin.js

@@ -0,0 +1,301 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import { getFlattenedElements } from '@vaadin/component-base/src/dom-utils.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
+
+/**
+ * Default implementation of the parse function that creates individual field
+ * values from the single component value.
+ * @param value
+ * @returns {*}
+ */
+const defaultParseValue = (value) => {
+  return value.split('\t');
+};
+
+/**
+ * Default implementation of the format function that creates a single component
+ * value from individual field values.
+ * @param inputValues
+ * @returns {*}
+ */
+const defaultFormatValue = (inputValues) => {
+  return inputValues.join('\t');
+};
+
+/**
+ * @polymerMixin
+ * @mixes FieldMixin
+ * @mixes FocusMixin
+ * @mixes KeyboardMixin
+ */
+export const CustomFieldMixin = (superClass) =>
+  class CustomFieldMixin extends FieldMixin(FocusMixin(KeyboardMixin(superClass))) {
+    static get properties() {
+      return {
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        name: String,
+
+        /**
+         * The value of the field. When wrapping several inputs, it will contain `\t`
+         * (Tab character) as a delimiter indicating parts intended to be used as the
+         * corresponding inputs values.
+         * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+         * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
+         * properties to customize this behavior.
+         */
+        value: {
+          type: String,
+          observer: '__valueChanged',
+          notify: true,
+        },
+
+        /**
+         * Array of available input nodes
+         * @type {!Array<!HTMLElement> | undefined}
+         */
+        inputs: {
+          type: Array,
+          readOnly: true,
+        },
+
+        /**
+         * A function to format the values of the individual fields contained by
+         * the custom field into a single component value. The function receives
+         * an array of all values of the individual fields in the order of their
+         * presence in the DOM, and must return a single component value.
+         * This function is called each time a value of an internal field is
+         * changed.
+         *
+         * Example:
+         * ```js
+         * customField.formatValue = (fieldValues) => {
+         *   return fieldValues.join("-");
+         * }
+         * ```
+         * @type {!CustomFieldFormatValueFn | undefined}
+         */
+        formatValue: {
+          type: Function,
+        },
+
+        /**
+         * A function to parse the component value into values for the individual
+         * fields contained by the custom field. The function receives the
+         * component value, and must return an array of values for the individual
+         * fields in the order of their presence in the DOM.
+         * The function is called each time the value of the component changes.
+         *
+         * Example:
+         * ```js
+         * customField.parseValue = (componentValue) => {
+         *   return componentValue.split("-");
+         * }
+         * ```
+         * @type {!CustomFieldParseValueFn | undefined}
+         */
+        parseValue: {
+          type: Function,
+        },
+
+        /**
+         * Whether the field is dirty.
+         *
+         * The field is automatically marked as dirty once the user triggers
+         * an `input` or `change` event. Additionally, the field can be manually
+         * marked as dirty by setting the property to `true`.
+         */
+        dirty: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // See https://github.com/vaadin/vaadin-web-components/issues/94
+      this.setAttribute('role', 'group');
+
+      this.ariaTarget = this;
+
+      this.__childrenObserver = new MutationObserver(() => {
+        this.__setInputsFromSlot();
+      });
+
+      this.__setInputsFromSlot();
+      this.$.slot.addEventListener('slotchange', () => {
+        this.__setInputsFromSlot();
+
+        // Observe changes to any children except inputs
+        // to allow wrapping `<input>` with `<div>` etc.
+        getFlattenedElements(this.$.slot)
+          .filter((el) => !this.__isInput(el))
+          .forEach((el) => {
+            this.__childrenObserver.observe(el, { childList: true });
+          });
+      });
+
+      this._tooltipController = new TooltipController(this);
+      this.addController(this._tooltipController);
+      this._tooltipController.setShouldShow((target) => {
+        const inputs = target.inputs || [];
+        return !inputs.some((el) => el.opened);
+      });
+    }
+
+    /** @protected */
+    focus() {
+      if (this.inputs && this.inputs[0]) {
+        this.inputs[0].focus();
+      }
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to validate on blur.
+     * @param {boolean} focused
+     * @protected
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      if (!focused) {
+        this.validate();
+      }
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to not remove focused
+     * state when focus moves to another input in the custom field.
+     * @param {FocusEvent} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldRemoveFocus(event) {
+      const { relatedTarget } = event;
+      return !this.inputs.some((el) => relatedTarget === (el.focusElement || el));
+    }
+
+    /**
+     * Returns true if the current inputs values satisfy all constraints (if any).
+     *
+     * @return {boolean}
+     */
+    checkValidity() {
+      const invalidFields = this.inputs.filter((input) => !(input.validate || input.checkValidity).call(input));
+
+      if (invalidFields.length || (this.required && !this.value.trim())) {
+        // Either 1. one of the input fields is invalid or
+        // 2. the custom field itself is required but doesn't have a value
+        return false;
+      }
+      return true;
+    }
+
+    /**
+     * @param {KeyboardEvent} e
+     * @protected
+     * @override
+     */
+    _onKeyDown(e) {
+      if (e.key === 'Tab') {
+        if (
+          (this.inputs.indexOf(e.target) < this.inputs.length - 1 && !e.shiftKey) ||
+          (this.inputs.indexOf(e.target) > 0 && e.shiftKey)
+        ) {
+          this.dispatchEvent(new CustomEvent('internal-tab'));
+        } else {
+          // FIXME(yuriy): remove this workaround when value should not be updated before focusout
+          this.__setValue();
+        }
+      }
+    }
+
+    /** @protected */
+    _onInput() {
+      this.dirty = true;
+    }
+
+    /** @protected */
+    _onChange(event) {
+      // Stop native change events
+      event.stopPropagation();
+      this.dirty = true;
+
+      this.__setValue();
+      this.validate();
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          cancelable: false,
+          detail: {
+            value: this.value,
+          },
+        }),
+      );
+    }
+
+    /** @private */
+    __setValue() {
+      this.__settingValue = true;
+      const formatFn = this.formatValue || defaultFormatValue;
+      this.value = formatFn.apply(this, [this.inputs.map((input) => input.value)]);
+      this.__settingValue = false;
+    }
+
+    /** @private */
+    __isInput(node) {
+      const isSlottedInput = node.getAttribute('slot') === 'input' || node.getAttribute('slot') === 'textarea';
+      return !isSlottedInput && (node.validate || node.checkValidity);
+    }
+
+    /** @private */
+    __getInputsFromSlot() {
+      return getFlattenedElements(this.$.slot).filter((node) => this.__isInput(node));
+    }
+
+    /** @private */
+    __setInputsFromSlot() {
+      this._setInputs(this.__getInputsFromSlot());
+      this.__setValue();
+    }
+
+    /** @private */
+    __toggleHasValue(value) {
+      this.toggleAttribute('has-value', value !== null && value.trim() !== '');
+    }
+
+    /** @private */
+    __valueChanged(value, oldValue) {
+      if (this.__settingValue || !this.inputs) {
+        return;
+      }
+
+      this.__toggleHasValue(value);
+
+      const parseFn = this.parseValue || defaultParseValue;
+      const valuesArray = parseFn.apply(this, [value]);
+      if (!valuesArray || valuesArray.length === 0) {
+        console.warn('Value parser has not provided values array');
+        return;
+      }
+
+      this.inputs.forEach((input, id) => {
+        input.value = valuesArray[id];
+      });
+      if (oldValue !== undefined) {
+        this.validate();
+      }
+    }
+  };

package/src/vaadin-custom-field-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 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 customFieldStyles: CSSResult;

package/src/vaadin-custom-field-styles.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const customFieldStyles = css`
+  :host {
+    display: inline-flex;
+  }
+
+  :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;
+  }
+
+  .vaadin-custom-field-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inputs-wrapper {
+    flex: none;
+  }
+`;

package/src/vaadin-custom-field.d.ts

@@ -3,15 +3,11 @@
  * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
 
-export type CustomFieldParseValueFn = (value: string) => unknown[];
-
-export type CustomFieldFormatValueFn = (inputValues: unknown[]) => string;
+export { CustomFieldFormatValueFn, CustomFieldParseValueFn } from './vaadin-custom-field-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -20,6 +16,11 @@ export type CustomFieldChangeEvent = Event & {
   target: CustomField;
 };
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type CustomFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `invalid` property changes.
  */
@@ -43,6 +44,8 @@ export type CustomFieldInternalTabEvent = Event & {
 };
 
 export interface CustomFieldCustomEventMap {
+  'dirty-changed': CustomFieldDirtyChangedEvent;
+
   'invalid-changed': CustomFieldInvalidChangedEvent;
 
   'value-changed': CustomFieldValueChangedEvent;
@@ -95,64 +98,12 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
  *
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
-  /**
-   * Array of available input nodes
-   */
-  readonly inputs: HTMLElement[] | undefined;
-
-  /**
-   * A function to format the values of the individual fields contained by
-   * the custom field into a single component value. The function receives
-   * an array of all values of the individual fields in the order of their
-   * presence in the DOM, and must return a single component value.
-   * This function is called each time a value of an internal field is
-   * changed.
-   *
-   * Example:
-   * ```js
-   * customField.formatValue = (fieldValues) => {
-   *   return fieldValues.join("-");
-   * }
-   * ```
-   */
-  formatValue: CustomFieldFormatValueFn | undefined;
-
-  /**
-   * A function to parse the component value into values for the individual
-   * fields contained by the custom field. The function receives the
-   * component value, and must return an array of values for the individual
-   * fields in the order of their presence in the DOM.
-   * The function is called each time the value of the component changes.
-   *
-   * Example:
-   * ```js
-   * customField.parseValue = (componentValue) => {
-   *   return componentValue.split("-");
-   * }
-   * ```
-   */
-  parseValue: CustomFieldParseValueFn | undefined;
-
-  /**
-   * The name of the control, which is submitted with the form data.
-   */
-  name: string | null | undefined;
-
-  /**
-   * The value of the field. When wrapping several inputs, it will contain `\t`
-   * (Tab character) as a delimiter indicating parts intended to be used as the
-   * corresponding inputs values.
-   * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
-   * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
-   * properties to customize this behavior.
-   */
-  value: string | null | undefined;
-
+declare class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof CustomFieldEventMap>(
     type: K,
     listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,

package/src/vaadin-custom-field.js

@@ -3,34 +3,13 @@
  * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
+import { customFieldStyles } from './vaadin-custom-field-styles.js';
 
-/**
- * Default implementation of the parse function that creates individual field
- * values from the single component value.
- * @param value
- * @returns {*}
- */
-const defaultParseValue = (value) => {
-  return value.split('\t');
-};
-
-/**
- * Default implementation of the format function that creates a single component
- * value from individual field values.
- * @param inputValues
- * @returns {*}
- */
-const defaultFormatValue = (inputValues) => {
-  return inputValues.join('\t');
-};
+registerStyles('vaadin-custom-field', customFieldStyles, { moduleId: 'vaadin-custom-field-styles' });
 
 /**
  * `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
@@ -71,59 +50,30 @@ const defaultFormatValue = (inputValues) => {
  *
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
- * @mixes FieldMixin
- * @mixes FocusMixin
+ * @mixes CustomFieldMixin
  * @mixes ElementMixin
- * @mixes KeyboardMixin
  * @mixes ThemableMixin
  */
-class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
+class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-custom-field';
   }
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-        }
-
-        :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;
-        }
-
-        .vaadin-custom-field-container {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-        }
-
-        .inputs-wrapper {
-          flex: none;
-        }
-      </style>
-
       <div class="vaadin-custom-field-container">
         <div part="label" on-click="focus">
           <slot name="label"></slot>
           <span part="required-indicator" aria-hidden="true"></span>
         </div>
 
-        <div class="inputs-wrapper" on-change="__onInputChange">
+        <div class="inputs-wrapper" on-change="_onChange" on-input="_onInput">
           <slot id="slot"></slot>
         </div>
 
@@ -140,272 +90,6 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
     `;
   }
 
-  static get properties() {
-    return {
-      /**
-       * The name of the control, which is submitted with the form data.
-       */
-      name: String,
-
-      /**
-       * The value of the field. When wrapping several inputs, it will contain `\t`
-       * (Tab character) as a delimiter indicating parts intended to be used as the
-       * corresponding inputs values.
-       * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
-       * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
-       * properties to customize this behavior.
-       */
-      value: {
-        type: String,
-        observer: '__valueChanged',
-        notify: true,
-      },
-
-      /**
-       * Array of available input nodes
-       * @type {!Array<!HTMLElement> | undefined}
-       */
-      inputs: {
-        type: Array,
-        readOnly: true,
-      },
-
-      /**
-       * A function to format the values of the individual fields contained by
-       * the custom field into a single component value. The function receives
-       * an array of all values of the individual fields in the order of their
-       * presence in the DOM, and must return a single component value.
-       * This function is called each time a value of an internal field is
-       * changed.
-       *
-       * Example:
-       * ```js
-       * customField.formatValue = (fieldValues) => {
-       *   return fieldValues.join("-");
-       * }
-       * ```
-       * @type {!CustomFieldFormatValueFn | undefined}
-       */
-      formatValue: {
-        type: Function,
-      },
-
-      /**
-       * A function to parse the component value into values for the individual
-       * fields contained by the custom field. The function receives the
-       * component value, and must return an array of values for the individual
-       * fields in the order of their presence in the DOM.
-       * The function is called each time the value of the component changes.
-       *
-       * Example:
-       * ```js
-       * customField.parseValue = (componentValue) => {
-       *   return componentValue.split("-");
-       * }
-       * ```
-       * @type {!CustomFieldParseValueFn | undefined}
-       */
-      parseValue: {
-        type: Function,
-      },
-    };
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (this.__observer) {
-      this.__observer.connect();
-    }
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    if (this.__observer) {
-      this.__observer.disconnect();
-    }
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // See https://github.com/vaadin/vaadin-web-components/issues/94
-    this.setAttribute('role', 'group');
-
-    this.ariaTarget = this;
-
-    this.__setInputsFromSlot();
-    this.__observer = new FlattenedNodesObserver(this.$.slot, () => {
-      this.__setInputsFromSlot();
-    });
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-    this._tooltipController.setShouldShow((target) => {
-      const inputs = target.inputs || [];
-      return !inputs.some((el) => el.opened);
-    });
-  }
-
-  /** @protected */
-  focus() {
-    if (this.inputs && this.inputs[0]) {
-      this.inputs[0].focus();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin` to validate on blur.
-   * @param {boolean} focused
-   * @protected
-   */
-  _setFocused(focused) {
-    super._setFocused(focused);
-
-    if (!focused) {
-      this.validate();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin` to not remove focused
-   * state when focus moves to another input in the custom field.
-   * @param {FocusEvent} event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldRemoveFocus(event) {
-    const { relatedTarget } = event;
-    return !this.inputs.some((el) => relatedTarget === (el.focusElement || el));
-  }
-
-  /**
-   * Returns true if the current inputs values satisfy all constraints (if any).
-   *
-   * @return {boolean}
-   */
-  checkValidity() {
-    const invalidFields = this.inputs.filter((input) => !(input.validate || input.checkValidity).call(input));
-
-    if (invalidFields.length || (this.required && !this.value.trim())) {
-      // Either 1. one of the input fields is invalid or
-      // 2. the custom field itself is required but doesn't have a value
-      return false;
-    }
-    return true;
-  }
-
-  /**
-   * @param {KeyboardEvent} e
-   * @protected
-   * @override
-   */
-  _onKeyDown(e) {
-    if (e.key === 'Tab') {
-      if (
-        (this.inputs.indexOf(e.target) < this.inputs.length - 1 && !e.shiftKey) ||
-        (this.inputs.indexOf(e.target) > 0 && e.shiftKey)
-      ) {
-        this.dispatchEvent(new CustomEvent('internal-tab'));
-      } else {
-        // FIXME(yuriy): remove this workaround when value should not be updated before focusout
-        this.__setValue();
-      }
-    }
-  }
-
-  /** @private */
-  __onInputChange(event) {
-    // Stop native change events
-    event.stopPropagation();
-
-    this.__setValue();
-    this.validate();
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        cancelable: false,
-        detail: {
-          value: this.value,
-        },
-      }),
-    );
-  }
-
-  /** @private */
-  __setValue() {
-    this.__settingValue = true;
-    const formatFn = this.formatValue || defaultFormatValue;
-    this.value = formatFn.apply(this, [this.inputs.map((input) => input.value)]);
-    this.__settingValue = false;
-  }
-
-  /**
-   * Like querySelectorAll('*') but also gets all elements through any nested slots recursively
-   * @private
-   */
-  __queryAllAssignedElements(elem) {
-    const result = [];
-    let elements;
-    if (elem.tagName === 'SLOT') {
-      elements = elem.assignedElements({ flatten: true });
-    } else {
-      result.push(elem);
-      elements = Array.from(elem.children);
-    }
-    elements.forEach((elem) => result.push(...this.__queryAllAssignedElements(elem)));
-    return result;
-  }
-
-  /** @private */
-  __isInput(node) {
-    const isSlottedInput = node.getAttribute('slot') === 'input' || node.getAttribute('slot') === 'textarea';
-    return !isSlottedInput && (node.validate || node.checkValidity);
-  }
-
-  /** @private */
-  __getInputsFromSlot() {
-    return this.__queryAllAssignedElements(this.$.slot).filter((node) => this.__isInput(node));
-  }
-
-  /** @private */
-  __setInputsFromSlot() {
-    this._setInputs(this.__getInputsFromSlot());
-    this.__setValue();
-  }
-
-  /** @private */
-  __toggleHasValue(value) {
-    this.toggleAttribute('has-value', value !== null && value.trim() !== '');
-  }
-
-  /** @private */
-  __valueChanged(value, oldValue) {
-    if (this.__settingValue || !this.inputs) {
-      return;
-    }
-
-    this.__toggleHasValue(value);
-
-    const parseFn = this.parseValue || defaultParseValue;
-    const valuesArray = parseFn.apply(this, [value]);
-    if (!valuesArray || valuesArray.length === 0) {
-      console.warn('Value parser has not provided values array');
-      return;
-    }
-
-    this.inputs.forEach((input, id) => {
-      input.value = valuesArray[id];
-    });
-    if (oldValue !== undefined) {
-      this.validate();
-    }
-  }
-
   /**
    * Fired when the user commits a value change for any of the internal inputs.
    *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -100,7 +100,7 @@
             },
             {
               "name": "value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "type": [
                   "string",
@@ -109,6 +109,17 @@
                 ]
               }
             },
+            {
+              "name": "dirty",
+              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -213,7 +224,7 @@
               },
               {
                 "name": "value",
-                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
                 "value": {
                   "type": [
                     "string",
@@ -241,6 +252,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "dirty",
+                "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [
@@ -252,13 +274,17 @@
                 "name": "change",
                 "description": "Fired when the user commits a value change for any of the internal inputs."
               },
+              {
+                "name": "invalid-changed",
+                "description": "Fired when the `invalid` property changes."
+              },
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."
               },
               {
-                "name": "invalid-changed",
-                "description": "Fired when the `invalid` property changes."
+                "name": "dirty-changed",
+                "description": "Fired when the `dirty` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?dirty",
+              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -77,7 +84,7 @@
             },
             {
               "name": ".value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "kind": "expression"
               }
@@ -110,6 +117,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@value-changed",
               "description": "Fired when the `value` property changes.",
@@ -118,8 +132,8 @@
               }
             },
             {
-              "name": "@invalid-changed",
-              "description": "Fired when the `invalid` property changes.",
+              "name": "@dirty-changed",
+              "description": "Fired when the `dirty` property changes.",
               "value": {
                 "kind": "expression"
               }