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

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.
Files changed (13) hide show
  1. package/package.json +14 -12
  2. package/src/vaadin-lit-password-field-button.js +2 -2
  3. package/src/vaadin-lit-password-field.js +5 -0
  4. package/src/{vaadin-lit-password-field.d.ts → vaadin-password-field-base-styles.d.ts} +3 -1
  5. package/src/vaadin-password-field-base-styles.js +17 -0
  6. package/src/vaadin-password-field-button-base-styles.js +44 -0
  7. package/src/vaadin-password-field-button-core-styles.js +8 -0
  8. package/src/vaadin-password-field-button.js +4 -2
  9. package/src/vaadin-password-field-core-styles.d.ts +8 -0
  10. package/src/vaadin-password-field-core-styles.js +9 -0
  11. package/src/vaadin-password-field.js +4 -0
  12. package/web-types.json +2 -2
  13. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/password-field",
3
- "version": "24.8.0-alpha9",
3
+ "version": "24.8.0-beta1",
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",
@@ -36,19 +38,19 @@
36
38
  "dependencies": {
37
39
  "@open-wc/dedupe-mixin": "^1.3.0",
38
40
  "@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",
41
+ "@vaadin/a11y-base": "24.8.0-beta1",
42
+ "@vaadin/button": "24.8.0-beta1",
43
+ "@vaadin/component-base": "24.8.0-beta1",
44
+ "@vaadin/field-base": "24.8.0-beta1",
45
+ "@vaadin/text-field": "24.8.0-beta1",
46
+ "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
47
+ "@vaadin/vaadin-material-styles": "24.8.0-beta1",
48
+ "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
47
49
  "lit": "^3.0.0"
48
50
  },
49
51
  "devDependencies": {
50
- "@vaadin/chai-plugins": "24.8.0-alpha9",
51
- "@vaadin/test-runner-commands": "24.8.0-alpha9",
52
+ "@vaadin/chai-plugins": "24.8.0-beta1",
53
+ "@vaadin/test-runner-commands": "24.8.0-beta1",
52
54
  "@vaadin/testing-helpers": "^1.1.0",
53
55
  "sinon": "^18.0.0"
54
56
  },
@@ -56,5 +58,5 @@
56
58
  "web-types.json",
57
59
  "web-types.lit.json"
58
60
  ],
59
- "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
61
+ "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
60
62
  }
package/src/vaadin-lit-password-field-button.js CHANGED
@@ -4,12 +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 { html, LitElement } from 'lit';
7
- import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
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
10
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
11
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
13
13
 
14
14
  /**
15
15
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
@@ -27,7 +27,7 @@ class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixi
27
27
  }
28
28
 
29
29
  static get styles() {
30
- return buttonStyles;
30
+ return passwordFieldButton;
31
31
  }
32
32
 
33
33
  /** @protected */
package/src/vaadin-lit-password-field.js CHANGED
@@ -7,6 +7,7 @@ import './vaadin-lit-password-field-button.js';
7
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-lit-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
13
  /**
@@ -23,6 +24,10 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
23
24
  return 'vaadin-password-field';
24
25
  }
25
26
 
27
+ static get styles() {
28
+ return [...super.styles, passwordFieldStyles];
29
+ }
30
+
26
31
  /**
27
32
  * @protected
28
33
  * @override
package/src/{vaadin-lit-password-field.d.ts → vaadin-password-field-base-styles.d.ts} RENAMED
@@ -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;
package/src/vaadin-password-field-base-styles.js ADDED
@@ -0,0 +1,17 @@
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
+ [part='reveal-button']::before {
10
+ display: none;
11
+ }
12
+
13
+ [part='input-field']:has([part='reveal-button']:focus-within) {
14
+ outline: none;
15
+ --vaadin-input-field-border-color: inherit;
16
+ }
17
+ `;
package/src/vaadin-password-field-button-base-styles.js ADDED
@@ -0,0 +1,44 @@
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
+ :host {
12
+ --vaadin-button-background: transparent;
13
+ --vaadin-button-border: none;
14
+ --vaadin-button-padding: 0;
15
+ color: inherit;
16
+ display: block;
17
+ cursor: var(--vaadin-clickable-cursor);
18
+ }
19
+
20
+ :host::before {
21
+ background: currentColor;
22
+ content: '';
23
+ display: block;
24
+ height: var(--vaadin-icon-size, 1lh);
25
+ mask-image: var(--_vaadin-icon-eye);
26
+ width: var(--vaadin-icon-size, 1lh);
27
+ }
28
+
29
+ :host([aria-pressed='true'])::before {
30
+ mask-image: var(--_vaadin-icon-eye-slash);
31
+ }
32
+
33
+ @media (forced-colors: active) {
34
+ :host::before {
35
+ background: CanvasText;
36
+ }
37
+
38
+ :host([disabled])::before {
39
+ background: GrayText;
40
+ }
41
+ }
42
+ `;
43
+
44
+ export const passwordFieldButton = [buttonStyles, passwordFieldBase];
package/src/vaadin-password-field-button-core-styles.js ADDED
@@ -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];
package/src/vaadin-password-field-button.js CHANGED
@@ -4,13 +4,15 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
- import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
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
10
  import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
+ import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
12
12
 
13
- registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin-password-field-button-styles' });
13
+ registerStyles('vaadin-password-field-button', passwordFieldButton, {
14
+ moduleId: 'vaadin-password-field-button-styles',
15
+ });
14
16
 
15
17
  /**
16
18
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
package/src/vaadin-password-field-core-styles.d.ts ADDED
@@ -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 type { CSSResult } from 'lit';
7
+
8
+ export const passwordFieldStyles: CSSResult;
package/src/vaadin-password-field-core-styles.js ADDED
@@ -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``;
package/src/vaadin-password-field.js CHANGED
@@ -7,8 +7,12 @@ import './vaadin-password-field-button.js';
7
7
  import { html } from '@polymer/polymer/lib/utils/html-tag.js';
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 { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
+ import { passwordFieldStyles } from './vaadin-password-field-core-styles.js';
10
12
  import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
11
13
 
14
+ registerStyles('vaadin-password-field', passwordFieldStyles, { moduleId: 'vaadin-password-field-styles' });
15
+
12
16
  const ownTemplate = html`
13
17
  <div part="reveal-button" slot="suffix">
14
18
  <slot name="reveal"></slot>
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": "24.8.0-beta1",
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/24.8.0-beta1/#/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",
package/web-types.lit.json CHANGED
@@ -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": "24.8.0-beta1",
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/24.8.0-beta1/#/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
  {