@vaadin/password-field 24.8.0-alpha9 → 25.0.0-alpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,29 +24,6 @@ Once installed, import the component in your application:
24
24
  import '@vaadin/password-field';
25
25
  ```
26
26
 
27
- ## Themes
28
-
29
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
30
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/password-field/vaadin-password-field.js) of the package uses Lumo theme.
31
-
32
- To use the Material theme, import the component from the `theme/material` folder:
33
-
34
- ```js
35
- import '@vaadin/password-field/theme/material/vaadin-password-field.js';
36
- ```
37
-
38
- You can also import the Lumo version of the component explicitly:
39
-
40
- ```js
41
- import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
42
- ```
43
-
44
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
45
-
46
- ```js
47
- import '@vaadin/password-field/src/vaadin-password-field.js';
48
- ```
49
-
50
27
  ## Contributing
51
28
 
52
29
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/password-field",
3
- "version": "24.8.0-alpha9",
3
+ "version": "25.0.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,6 +21,8 @@
21
21
  "type": "module",
22
22
  "files": [
23
23
  "src",
24
+ "!src/*-base-styles.d.ts",
25
+ "!src/*-base-styles.js",
24
26
  "theme",
25
27
  "vaadin-*.d.ts",
26
28
  "vaadin-*.js",
@@ -35,20 +37,18 @@
35
37
  ],
36
38
  "dependencies": {
37
39
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@polymer/polymer": "^3.0.0",
39
- "@vaadin/a11y-base": "24.8.0-alpha9",
40
- "@vaadin/button": "24.8.0-alpha9",
41
- "@vaadin/component-base": "24.8.0-alpha9",
42
- "@vaadin/field-base": "24.8.0-alpha9",
43
- "@vaadin/text-field": "24.8.0-alpha9",
44
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
45
- "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
46
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
40
+ "@vaadin/a11y-base": "25.0.0-alpha1",
41
+ "@vaadin/button": "25.0.0-alpha1",
42
+ "@vaadin/component-base": "25.0.0-alpha1",
43
+ "@vaadin/field-base": "25.0.0-alpha1",
44
+ "@vaadin/text-field": "25.0.0-alpha1",
45
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
46
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
47
47
  "lit": "^3.0.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@vaadin/chai-plugins": "24.8.0-alpha9",
51
- "@vaadin/test-runner-commands": "24.8.0-alpha9",
50
+ "@vaadin/chai-plugins": "25.0.0-alpha1",
51
+ "@vaadin/test-runner-commands": "25.0.0-alpha1",
52
52
  "@vaadin/testing-helpers": "^1.1.0",
53
53
  "sinon": "^18.0.0"
54
54
  },
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
59
+ "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
60
60
  }
@@ -3,4 +3,6 @@
3
3
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- export * from './vaadin-password-field.js';
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const passwordFieldStyles: CSSResult;
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { css } from 'lit';
7
+
8
+ export const passwordFieldStyles = css`
9
+ @layer base {
10
+ [part='reveal-button']::before {
11
+ display: none;
12
+ }
13
+
14
+ [part='input-field']:has([part='reveal-button']:focus-within) {
15
+ outline: none;
16
+ --vaadin-input-field-border-color: inherit;
17
+ }
18
+ }
19
+ `;
@@ -0,0 +1,46 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import '@vaadin/component-base/src/style-props.js';
7
+ import { css } from 'lit';
8
+ import { buttonStyles } from '@vaadin/button/src/vaadin-button-base-styles.js';
9
+
10
+ const passwordFieldBase = css`
11
+ @layer base {
12
+ :host {
13
+ --vaadin-button-background: transparent;
14
+ --vaadin-button-border: none;
15
+ --vaadin-button-padding: 0;
16
+ color: inherit;
17
+ display: block;
18
+ cursor: var(--vaadin-clickable-cursor);
19
+ }
20
+
21
+ :host::before {
22
+ background: currentColor;
23
+ content: '';
24
+ display: block;
25
+ height: var(--vaadin-icon-size, 1lh);
26
+ mask-image: var(--_vaadin-icon-eye);
27
+ width: var(--vaadin-icon-size, 1lh);
28
+ }
29
+
30
+ :host([aria-pressed='true'])::before {
31
+ mask-image: var(--_vaadin-icon-eye-slash);
32
+ }
33
+
34
+ @media (forced-colors: active) {
35
+ :host::before {
36
+ background: CanvasText;
37
+ }
38
+
39
+ :host([disabled])::before {
40
+ background: GrayText;
41
+ }
42
+ }
43
+ }
44
+ `;
45
+
46
+ export const passwordFieldButton = [buttonStyles, passwordFieldBase];
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
7
+
8
+ export const passwordFieldButton = [buttonStyles];
@@ -3,14 +3,13 @@
3
3
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
- import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
6
+ import { html, LitElement } from 'lit';
8
7
  import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
9
8
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
10
9
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
11
- import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
-
13
- registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin-password-field-button-styles' });
10
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
11
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
14
13
 
15
14
  /**
16
15
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
@@ -22,12 +21,17 @@ registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin
22
21
  * @mixes ThemableMixin
23
22
  * @private
24
23
  */
25
- class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
24
+ class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
26
25
  static get is() {
27
26
  return 'vaadin-password-field-button';
28
27
  }
29
28
 
30
- static get template() {
29
+ static get styles() {
30
+ return passwordFieldButton;
31
+ }
32
+
33
+ /** @protected */
34
+ render() {
31
35
  return html``;
32
36
  }
33
37
  }
@@ -3,5 +3,6 @@
3
3
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import '@vaadin/vaadin-material-styles/color.js';
7
- import '@vaadin/vaadin-material-styles/font-icons.js';
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const passwordFieldStyles: CSSResult;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { css } from 'lit';
7
+
8
+ // Custom styles are only used in base styles version, but we need a matching export
9
+ export const passwordFieldStyles = css``;
@@ -68,6 +68,12 @@ export const PasswordFieldMixin = (superClass) =>
68
68
  return ['__i18nChanged(i18n)'];
69
69
  }
70
70
 
71
+ /** @override */
72
+ static get delegateAttrs() {
73
+ // Do not delegate autocapitalize as it should be always set to "off"
74
+ return super.delegateAttrs.filter((attr) => attr !== 'autocapitalize');
75
+ }
76
+
71
77
  constructor() {
72
78
  super();
73
79
  this._setType('password');
@@ -4,19 +4,12 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-password-field-button.js';
7
- import { html } from '@polymer/polymer/lib/utils/html-tag.js';
7
+ import { html } from 'lit';
8
8
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
9
  import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
10
+ import { passwordFieldStyles } from './vaadin-password-field-core-styles.js';
10
11
  import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
11
12
 
12
- const ownTemplate = html`
13
- <div part="reveal-button" slot="suffix">
14
- <slot name="reveal"></slot>
15
- </div>
16
- `;
17
-
18
- let memoizedTemplate;
19
-
20
13
  /**
21
14
  * `<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.
22
15
  *
@@ -58,20 +51,21 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
58
51
  return 'vaadin-password-field';
59
52
  }
60
53
 
61
- static get template() {
62
- if (!memoizedTemplate) {
63
- // Clone the superclass template
64
- memoizedTemplate = super.template.cloneNode(true);
65
-
66
- // Retrieve this element's dom-module template
67
- const revealButton = ownTemplate.content.querySelector('[part="reveal-button"]');
68
-
69
- // Append reveal-button and styles to the text-field template
70
- const inputField = memoizedTemplate.content.querySelector('[part="input-field"]');
71
- inputField.appendChild(revealButton);
72
- }
54
+ static get styles() {
55
+ return [...super.styles, passwordFieldStyles];
56
+ }
73
57
 
74
- return memoizedTemplate;
58
+ /**
59
+ * @protected
60
+ * @override
61
+ */
62
+ _renderSuffix() {
63
+ return html`
64
+ ${super._renderSuffix()}
65
+ <div part="reveal-button" slot="suffix">
66
+ <slot name="reveal"></slot>
67
+ </div>
68
+ `;
75
69
  }
76
70
  }
77
71
 
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/password-field",
4
- "version": "24.8.0-alpha9",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-password-field",
11
- "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/24.8.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.",
11
+ "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-alpha1/#/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.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/password-field",
4
- "version": "24.8.0-alpha9",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-password-field",
19
- "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/24.8.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.",
19
+ "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-alpha1/#/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.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -1,39 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { html, LitElement } from 'lit';
7
- import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
8
- import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
9
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
10
- import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
11
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
-
14
- /**
15
- * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
16
- *
17
- * @customElement
18
- * @extends HTMLElement
19
- * @mixes ButtonMixin
20
- * @mixes DirMixin
21
- * @mixes ThemableMixin
22
- * @private
23
- */
24
- class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
25
- static get is() {
26
- return 'vaadin-password-field-button';
27
- }
28
-
29
- static get styles() {
30
- return buttonStyles;
31
- }
32
-
33
- /** @protected */
34
- render() {
35
- return html``;
36
- }
37
- }
38
-
39
- defineCustomElement(PasswordFieldButton);
@@ -1,40 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import './vaadin-lit-password-field-button.js';
7
- import { html } from 'lit';
8
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
- import { TextField } from '@vaadin/text-field/src/vaadin-lit-text-field.js';
10
- import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
11
-
12
- /**
13
- * LitElement based version of `<vaadin-password-field>` web component.
14
- *
15
- * ## Disclaimer
16
- *
17
- * This component is an experiment and not yet a part of Vaadin platform.
18
- * There is no ETA regarding specific Vaadin version where it'll land.
19
- * Feel free to try this code in your apps as per Apache 2.0 license.
20
- */
21
- export class PasswordField extends PasswordFieldMixin(TextField) {
22
- static get is() {
23
- return 'vaadin-password-field';
24
- }
25
-
26
- /**
27
- * @protected
28
- * @override
29
- */
30
- _renderSuffix() {
31
- return html`
32
- ${super._renderSuffix()}
33
- <div part="reveal-button" slot="suffix">
34
- <slot name="reveal"></slot>
35
- </div>
36
- `;
37
- }
38
- }
39
-
40
- defineCustomElement(PasswordField);
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-lit-password-field.js';
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-lit-password-field.js';
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-lit-password-field.js';
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-lit-password-field.js';
@@ -1,37 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
7
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
-
9
- const passwordFieldButton = css`
10
- :host {
11
- position: absolute;
12
- right: 0;
13
- top: 0;
14
- margin: 0;
15
- padding: 0;
16
- width: 100%;
17
- height: 100%;
18
- min-width: auto;
19
- background: transparent;
20
- outline: none;
21
- border-radius: 50%;
22
- overflow: visible;
23
- }
24
-
25
- :host::before {
26
- transform: scale(1.5);
27
- }
28
-
29
- /* Disable ripple */
30
- :host::after {
31
- display: none;
32
- }
33
- `;
34
-
35
- registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
36
- moduleId: 'material-password-field-button',
37
- });
@@ -1,43 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/vaadin-material-styles/color.js';
7
- import '@vaadin/vaadin-material-styles/font-icons.js';
8
- import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
9
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
-
11
- const passwordField = css`
12
- [part='reveal-button']::before {
13
- content: var(--material-icons-eye);
14
- }
15
-
16
- :host([password-visible]) [part='reveal-button']::before {
17
- content: var(--material-icons-eye-disabled);
18
- }
19
-
20
- /* The reveal button works also in readonly mode */
21
- :host([readonly]) [part$='button'] {
22
- color: var(--material-secondary-text-color);
23
- }
24
-
25
- [part='reveal-button'] {
26
- position: relative;
27
- cursor: pointer;
28
- }
29
-
30
- [part='reveal-button']:hover {
31
- color: var(--material-text-color);
32
- }
33
-
34
- [part='reveal-button'][hidden] {
35
- display: none !important;
36
- }
37
-
38
- :host([focused]) ::slotted([slot='reveal'])::before {
39
- background-color: var(--material-primary-text-color);
40
- }
41
- `;
42
-
43
- registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'material-password-field' });
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/material/vaadin-text-field.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-password-field.js';
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/text-field/theme/material/vaadin-text-field.js';
7
- import './vaadin-password-field-button-styles.js';
8
- import './vaadin-password-field-styles.js';
9
- import '../../src/vaadin-password-field.js';
@@ -1 +0,0 @@
1
- export * from './src/vaadin-password-field.js';
@@ -1,3 +0,0 @@
1
- import './theme/lumo/vaadin-lit-password-field.js';
2
-
3
- export * from './src/vaadin-lit-password-field.js';