@vaadin/password-field 25.0.0-alpha9 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,24 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha9",
-    "@vaadin/button": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/field-base": "25.0.0-alpha9",
-    "@vaadin/text-field": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/button": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/field-base": "25.0.0-beta1",
+    "@vaadin/text-field": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -6,11 +6,11 @@
 import { css } from 'lit';
 
 export const passwordFieldStyles = css`
-  [part='reveal-button']::before {
+  [part~='reveal-button']::before {
     display: none;
   }
 
-  [part='input-field']:has([part='reveal-button']:focus-within) {
+  [part='input-field']:has([part~='reveal-button']:focus-within) {
     outline: none;
     --vaadin-input-field-border-color: inherit;
   }

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

@@ -3,17 +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 '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
 
 const passwordFieldBase = css`
   :host {
     --vaadin-button-background: transparent;
-    --vaadin-button-border: none;
     --vaadin-button-padding: 0;
-    color: var(--vaadin-input-field-button-color, inherit);
+    color: var(--vaadin-input-field-button-text-color, inherit);
     display: block;
+    border: none;
     cursor: var(--vaadin-clickable-cursor);
   }
 
@@ -22,7 +22,7 @@ const passwordFieldBase = css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-eye);
+    mask: var(--_vaadin-icon-eye) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 

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

@@ -10,7 +10,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { passwordFieldButton } from './styles/vaadin-password-field-button-core-styles.js';
+import { passwordFieldButton } from './styles/vaadin-password-field-button-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.

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

@@ -35,7 +35,7 @@ export declare class PasswordFieldMixinClass {
    * An object with translated strings used for localization.
    * It has the following structure and default values:
    *
-   * ```
+   * ```js
    * {
    *   // Translation of the reveal icon button accessible label
    *   reveal: 'Show password'

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,
         },
 
@@ -46,7 +44,7 @@ export const PasswordFieldMixin = (superClass) =>
          * An object with translated strings used for localization.
          * It has the following structure and default values:
          *
-         * ```
+         * ```js
          * {
          *   // Translation of the reveal icon button accessible label
          *   reveal: 'Show password'
@@ -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,20 +89,15 @@ export const PasswordFieldMixin = (superClass) =>
       ];
     }
 
-    /** @protected */
-    get _revealNode() {
-      return this._revealButtonController && this._revealButtonController.node;
-    }
-
     /** @protected */
     ready() {
       super.ready();
 
-      this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
+      this._revealPart = this.shadowRoot.querySelector('[part~="reveal-button"]');
 
       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,37 @@ 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
+ * `field-button`       | Set on both clear and reveal buttons
+ * `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

@@ -7,7 +7,7 @@ import './vaadin-password-field-button.js';
 import { html } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
-import { passwordFieldStyles } from './styles/vaadin-password-field-core-styles.js';
+import { passwordFieldStyles } from './styles/vaadin-password-field-base-styles.js';
 import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
 
 /**
@@ -19,20 +19,37 @@ 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
+ * `field-button`       | Set on both clear and reveal buttons
+ * `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.
  *
@@ -62,7 +79,7 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
   _renderSuffix() {
     return html`
       ${super._renderSuffix()}
-      <div part="reveal-button" slot="suffix">
+      <div part="field-button reveal-button" slot="suffix">
         <slot name="reveal"></slot>
       </div>
     `;

package/vaadin-password-field.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-password-field.js';
+import './src/vaadin-password-field.js';
 
 export * from './src/vaadin-password-field.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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-alpha9/#/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`field-button`       | Set on both clear and reveal buttons\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",
@@ -576,7 +576,7 @@
               },
               {
                 "name": "i18n",
-                "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
+                "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```js\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
                 "value": {
                   "type": [
                     "Object",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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-alpha9/#/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`field-button`       | Set on both clear and reveal buttons\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": [
             {
@@ -196,7 +196,7 @@
             },
             {
               "name": ".i18n",
-              "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
+              "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```js\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
               "value": {
                 "kind": "expression"
               }

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
-
-export const passwordFieldButton = [buttonStyles];

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * 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';
-
-export const passwordFieldStyles: CSSResult;

package/src/styles/vaadin-password-field-core-styles.js

@@ -1,9 +0,0 @@
-/**
- * @license
- * 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';
-
-// Custom styles are only used in base styles version, but we need a matching export
-export const passwordFieldStyles = css``;

package/theme/lumo/vaadin-password-field-button-styles.d.ts

@@ -1 +0,0 @@
-export {};

package/theme/lumo/vaadin-password-field-button-styles.js

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const passwordFieldButton = css`
-  :host {
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    min-width: auto;
-    background: transparent;
-    outline: none;
-  }
-`;
-
-registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
-  moduleId: 'lumo-password-field-button',
-});

package/theme/lumo/vaadin-password-field-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-password-field-styles.js

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const passwordField = css`
-  [part='reveal-button']::before {
-    content: var(--lumo-icons-eye);
-  }
-
-  :host([password-visible]) [part='reveal-button']::before {
-    content: var(--lumo-icons-eye-disabled);
-  }
-
-  /* Make it easy to hide the button across the whole app */
-  [part='reveal-button'] {
-    position: relative;
-    display: var(--lumo-password-field-reveal-button-display, block);
-  }
-
-  [part='reveal-button'][hidden] {
-    display: none !important;
-  }
-`;
-
-registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'lumo-password-field' });

package/theme/lumo/vaadin-password-field.d.ts

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import './vaadin-password-field-button-styles.js';
-import './vaadin-password-field-styles.js';
-import '../../src/vaadin-password-field.js';

package/theme/lumo/vaadin-password-field.js

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import './vaadin-password-field-button-styles.js';
-import './vaadin-password-field-styles.js';
-import '../../src/vaadin-password-field.js';