@vaadin/input-container 25.0.0-alpha5 → 25.0.0-alpha6

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 (5) hide show
  1. package/package.json +9 -9
  2. package/src/styles/vaadin-input-container-base-styles.js +14 -10
  3. package/src/styles/vaadin-input-container-core-styles.js +1 -2
  4. package/src/vaadin-input-container.js +2 -2
  5. package/theme/lumo/vaadin-input-container-styles.js +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/input-container",
3
- "version": "25.0.0-alpha5",
3
+ "version": "25.0.0-alpha6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -33,18 +33,18 @@
33
33
  "web-component"
34
34
  ],
35
35
  "dependencies": {
36
- "@vaadin/component-base": "25.0.0-alpha5",
37
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
38
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
36
+ "@vaadin/component-base": "25.0.0-alpha6",
37
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
38
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
39
39
  "lit": "^3.0.0"
40
40
  },
41
41
  "devDependencies": {
42
- "@vaadin/chai-plugins": "25.0.0-alpha5",
43
- "@vaadin/icon": "25.0.0-alpha5",
44
- "@vaadin/icons": "25.0.0-alpha5",
45
- "@vaadin/test-runner-commands": "25.0.0-alpha5",
42
+ "@vaadin/chai-plugins": "25.0.0-alpha6",
43
+ "@vaadin/icon": "25.0.0-alpha6",
44
+ "@vaadin/icons": "25.0.0-alpha6",
45
+ "@vaadin/test-runner-commands": "25.0.0-alpha6",
46
46
  "@vaadin/testing-helpers": "^2.0.0",
47
47
  "sinon": "^18.0.0"
48
48
  },
49
- "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
49
+ "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
50
50
  }
package/src/styles/vaadin-input-container-base-styles.js CHANGED
@@ -11,7 +11,7 @@ export const inputContainerStyles = css`
11
11
  :host {
12
12
  display: flex;
13
13
  align-items: center;
14
- --_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
14
+ --_radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
15
15
  border-radius:
16
16
  /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
17
17
  var(--vaadin-input-field-top-start-radius, var(--_radius))
@@ -19,20 +19,20 @@ export const inputContainerStyles = css`
19
19
  var(--vaadin-input-field-bottom-end-radius, var(--_radius))
20
20
  var(--vaadin-input-field-bottom-start-radius, var(--_radius));
21
21
  border: var(--vaadin-input-field-border-width, 1px) solid
22
- var(--vaadin-input-field-border-color, var(--_vaadin-border-color-strong));
22
+ var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
23
23
  box-sizing: border-box;
24
24
  cursor: text;
25
- padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
26
- gap: var(--vaadin-input-field-gap, var(--_vaadin-gap-container-inline));
27
- background: var(--vaadin-input-field-background, var(--_vaadin-background));
28
- color: var(--vaadin-input-field-value-color, var(--_vaadin-color-strong));
25
+ padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
26
+ gap: var(--vaadin-input-field-gap, var(--vaadin-gap-container-inline));
27
+ background: var(--vaadin-input-field-background, var(--vaadin-background-color));
28
+ color: var(--vaadin-input-field-value-color, var(--vaadin-color));
29
29
  font-size: var(--vaadin-input-field-value-font-size, inherit);
30
30
  line-height: var(--vaadin-input-field-value-line-height, inherit);
31
31
  font-weight: var(--vaadin-input-field-value-font-weight, 400);
32
32
  }
33
33
 
34
34
  :host([dir='rtl']) {
35
- --_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
35
+ --_radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
36
36
  border-radius:
37
37
  /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
38
38
  var(--vaadin-input-field-top-end-radius, var(--_radius))
@@ -85,7 +85,7 @@ export const inputContainerStyles = css`
85
85
  }
86
86
 
87
87
  ::slotted(:is(input, textarea):placeholder-shown) {
88
- color: var(--vaadin-input-field-placeholder-color, var(--_vaadin-color));
88
+ color: var(--vaadin-input-field-placeholder-color, var(--vaadin-color-subtle));
89
89
  }
90
90
 
91
91
  :host(:focus-within) {
@@ -93,6 +93,10 @@ export const inputContainerStyles = css`
93
93
  outline-offset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
94
94
  }
95
95
 
96
+ :host([invalid]) {
97
+ --vaadin-input-field-border-color: var(--vaadin-input-field-error-color, var(--vaadin-color));
98
+ }
99
+
96
100
  :host([readonly]) {
97
101
  border-style: dashed;
98
102
  }
@@ -103,10 +107,10 @@ export const inputContainerStyles = css`
103
107
  }
104
108
 
105
109
  :host([disabled]) {
106
- --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--_vaadin-color-subtle));
110
+ --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--vaadin-color-disabled));
107
111
  --vaadin-input-field-background: var(
108
112
  --vaadin-input-field-disabled-background,
109
- var(--_vaadin-background-container-strong)
113
+ var(--vaadin-background-container-strong)
110
114
  );
111
115
  --vaadin-input-field-border-color: transparent;
112
116
  }
package/src/styles/vaadin-input-container-core-styles.js CHANGED
@@ -38,8 +38,7 @@ export const inputContainerStyles = css`
38
38
 
39
39
  /* Reset the native input styles */
40
40
  ::slotted(input) {
41
- -webkit-appearance: none;
42
- -moz-appearance: none;
41
+ appearance: none;
43
42
  flex: auto;
44
43
  white-space: nowrap;
45
44
  overflow: hidden;
package/src/vaadin-input-container.js CHANGED
@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
7
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
8
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
9
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
- import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
10
+ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
11
11
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
12
  import { inputContainerStyles } from './styles/vaadin-input-container-core-styles.js';
13
13
 
@@ -17,7 +17,7 @@ import { inputContainerStyles } from './styles/vaadin-input-container-core-style
17
17
  * @mixes ThemableMixin
18
18
  * @mixes DirMixin
19
19
  */
20
- export class InputContainer extends CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
20
+ export class InputContainer extends LumoInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
21
21
  static get is() {
22
22
  return 'vaadin-input-container';
23
23
  }
package/theme/lumo/vaadin-input-container-styles.js CHANGED
@@ -65,7 +65,6 @@ registerStyles(
65
65
  min-height: var(--vaadin-input-field-height, var(--_input-height));
66
66
  padding: 0 0.25em;
67
67
  --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
68
- -webkit-mask-image: var(--_lumo-text-field-overflow-mask-image);
69
68
  mask-image: var(--_lumo-text-field-overflow-mask-image);
70
69
  }
71
70