@vaadin/password-field 25.0.0-alpha16 → 25.0.0-alpha18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "publishConfig": {
     "access": "public"
   },
@@ -34,24 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha16",
-    "@vaadin/button": "25.0.0-alpha16",
-    "@vaadin/component-base": "25.0.0-alpha16",
-    "@vaadin/field-base": "25.0.0-alpha16",
-    "@vaadin/text-field": "25.0.0-alpha16",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha16",
+    "@vaadin/a11y-base": "25.0.0-alpha18",
+    "@vaadin/button": "25.0.0-alpha18",
+    "@vaadin/component-base": "25.0.0-alpha18",
+    "@vaadin/field-base": "25.0.0-alpha18",
+    "@vaadin/text-field": "25.0.0-alpha18",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha18",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha16",
-    "@vaadin/test-runner-commands": "25.0.0-alpha16",
+    "@vaadin/chai-plugins": "25.0.0-alpha18",
+    "@vaadin/test-runner-commands": "25.0.0-alpha18",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha16",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha18",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
+  "gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
 }

package/src/styles/vaadin-password-field-button-base-styles.js

@@ -10,10 +10,10 @@ import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-style
 const passwordFieldBase = css`
   :host {
     --vaadin-button-background: transparent;
-    --vaadin-button-border: none;
     --vaadin-button-padding: 0;
     color: var(--vaadin-input-field-button-color, inherit);
     display: block;
+    border: none;
     cursor: var(--vaadin-clickable-cursor);
   }
 

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

@@ -26,7 +26,6 @@ export const PasswordFieldMixin = (superClass) =>
          */
         revealButtonHidden: {
           type: Boolean,
-          observer: '_revealButtonHiddenChanged',
           value: false,
         },
 
@@ -38,7 +37,6 @@ export const PasswordFieldMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-          observer: '_passwordVisibleChanged',
           readOnly: true,
         },
 
@@ -64,10 +62,6 @@ export const PasswordFieldMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return ['__i18nChanged(i18n)'];
-    }
-
     /** @override */
     static get delegateAttrs() {
       // Do not delegate autocapitalize as it should be always set to "off"
@@ -95,11 +89,6 @@ export const PasswordFieldMixin = (superClass) =>
       ];
     }
 
-    /** @protected */
-    get _revealNode() {
-      return this._revealButtonController && this._revealButtonController.node;
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -108,7 +97,7 @@ export const PasswordFieldMixin = (superClass) =>
 
       this._revealButtonController = new SlotController(this, 'reveal', 'vaadin-password-field-button', {
         initializer: (btn) => {
-          btn.disabled = this.disabled;
+          this._revealNode = btn;
 
           btn.addEventListener('click', this.__boundRevealButtonClick);
           btn.addEventListener('mousedown', this.__boundRevealButtonMouseDown);
@@ -116,16 +105,33 @@ export const PasswordFieldMixin = (superClass) =>
       });
       this.addController(this._revealButtonController);
 
-      this.__updateAriaLabel(this.i18n);
-
-      this._updateToggleState(false);
-      this._toggleRevealHidden(this.revealButtonHidden);
-
       if (this.inputElement) {
         this.inputElement.autocapitalize = 'off';
       }
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('disabled')) {
+        this._revealNode.disabled = this.disabled;
+      }
+
+      if (props.has('revealButtonHidden')) {
+        this._toggleRevealHidden(this.revealButtonHidden);
+      }
+
+      if (props.has('passwordVisible')) {
+        this._setType(this.passwordVisible ? 'text' : 'password');
+        this._revealNode.setAttribute('aria-pressed', this.passwordVisible ? 'true' : 'false');
+      }
+
+      if (props.has('i18n') && this.i18n && this.i18n.reveal) {
+        this._revealNode.setAttribute('aria-label', this.i18n.reveal);
+      }
+    }
+
     /**
      * Override an event listener inherited from `InputControlMixin`
      * to store the value at the moment of the native `change` event.
@@ -188,31 +194,9 @@ export const PasswordFieldMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateAriaLabel(i18n) {
-      if (i18n && i18n.reveal && this._revealNode) {
-        this._revealNode.setAttribute('aria-label', i18n.reveal);
-      }
-    }
-
-    /** @private */
-    __i18nChanged(i18n) {
-      this.__updateAriaLabel(i18n);
-    }
-
-    /** @private */
-    _revealButtonHiddenChanged(hidden) {
-      this._toggleRevealHidden(hidden);
-    }
-
-    /** @private */
-    _togglePasswordVisibility() {
-      this._setPasswordVisible(!this.passwordVisible);
-    }
-
     /** @private */
     _onRevealButtonClick() {
-      this._togglePasswordVisibility();
+      this._setPasswordVisible(!this.passwordVisible);
     }
 
     /** @private */
@@ -239,33 +223,4 @@ export const PasswordFieldMixin = (superClass) =>
         }
       }
     }
-
-    /** @private */
-    _updateToggleState(passwordVisible) {
-      if (this._revealNode) {
-        this._revealNode.setAttribute('aria-pressed', passwordVisible ? 'true' : 'false');
-      }
-    }
-
-    /** @private */
-    _passwordVisibleChanged(passwordVisible) {
-      this._setType(passwordVisible ? 'text' : 'password');
-
-      this._updateToggleState(passwordVisible);
-    }
-
-    /**
-     * Override method inherited from `DisabledMixin` to synchronize the reveal button
-     * disabled state with the password field disabled state.
-     * @param {boolean} disabled
-     * @param {boolean} oldDisabled
-     * @protected
-     */
-    _disabledChanged(disabled, oldDisabled) {
-      super._disabledChanged(disabled, oldDisabled);
-
-      if (this._revealNode) {
-        this._revealNode.disabled = disabled;
-      }
-    }
   };

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

@@ -49,20 +49,36 @@ export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFiel
  *
  * ### Styling
  *
- * `<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and suffix
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `reveal-button`      | The eye icon which toggles the password visibility
  *
- * Part name       | Description
- * ----------------|----------------------------------------------------
- * `reveal-button` | The eye icon which toggles the password visibility
+ * The following state attributes are available for styling:
  *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `input-prevented`    | Temporarily set when invalid input is prevented
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `password-visible`   | Set when the password is visible
  *
- * Attribute          | Description
- * -------------------|---------------------------------
- * `password-visible` | Set when the password is visible
+ * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-password-field.js

@@ -19,20 +19,36 @@ import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
  *
  * ### Styling
  *
- * `<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and suffix
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `reveal-button`      | The eye icon which toggles the password visibility
  *
- * Part name       | Description
- * ----------------|----------------------------------------------------
- * `reveal-button` | The eye icon which toggles the password visibility
+ * The following state attributes are available for styling:
  *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `input-prevented`    | Temporarily set when invalid input is prevented
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `password-visible`   | Set when the password is visible
  *
- * Attribute          | Description
- * -------------------|---------------------------------
- * `password-visible` | Set when the password is visible
+ * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-password-field",
-          "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha16/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------------------------------------------\n`reveal-button` | The eye icon which toggles the password visibility\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute          | Description\n-------------------|---------------------------------\n`password-visible` | Set when the password is visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and suffix\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button`      | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`input-prevented`    | Temporarily set when invalid input is prevented\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`password-visible`   | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-password-field",
-          "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha16/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------------------------------------------\n`reveal-button` | The eye icon which toggles the password visibility\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute          | Description\n-------------------|---------------------------------\n`password-visible` | Set when the password is visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and suffix\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button`      | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`input-prevented`    | Temporarily set when invalid input is prevented\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`password-visible`   | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {