@vaadin/field-base 24.1.5 → 24.2.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.1.5",
+  "version": "24.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.5",
-    "@vaadin/component-base": "~24.1.5",
+    "@vaadin/a11y-base": "24.2.0-alpha10",
+    "@vaadin/component-base": "24.2.0-alpha10",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "2150f0696b9205ed3651033301927516b87cf88f"
+  "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
 }

package/src/checked-mixin.js

@@ -47,6 +47,8 @@ export const CheckedMixin = dedupingMixin(
       _onChange(event) {
         const input = event.target;
 
+        this.dirty = true;
+
         this._toggleChecked(input.checked);
 
         // Clicking the checkbox or radio-button in Safari

package/src/input-mixin.d.ts

@@ -28,6 +28,15 @@ export declare class InputMixinClass {
    */
   value: string;
 
+  /**
+   * 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: boolean;
+
   /**
    * Indicates whether the value is different from the default one.
    * Override if the `value` property has a type other than `string`.

package/src/input-mixin.js

@@ -53,6 +53,19 @@ export const InputMixin = dedupingMixin(
             notify: true,
           },
 
+          /**
+           * 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,
+          },
+
           /**
            * Whether the input element has a non-empty value.
            *
@@ -194,7 +207,7 @@ export const InputMixin = dedupingMixin(
       }
 
       /**
-       * An input event listener used to update `_hasInputValue` property.
+       * An input event listener used to update `_hasInputValue` and `dirty` properties.
        * Do not override this method.
        *
        * @param {Event} event
@@ -202,6 +215,7 @@ export const InputMixin = dedupingMixin(
        */
       __onInput(event) {
         this._setHasInputValue(event);
+        this.dirty = true;
         this._onInput(event);
       }
 

package/src/styles/sr-only-styles.d.ts

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

package/src/styles/sr-only-styles.js

@@ -1,28 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @note Taken from Gaël Poupard gist
- * @author Gaël Poupard
- * @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
- */
-import { css } from 'lit';
-
-export const screenReaderOnly = css`
-  .sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-  }
-`;