@vaadin/input-container 25.0.0-alpha4 → 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 +15 -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-alpha4",
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-alpha4",
37
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
38
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
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-alpha4",
43
- "@vaadin/icon": "25.0.0-alpha4",
44
- "@vaadin/icons": "25.0.0-alpha4",
45
- "@vaadin/test-runner-commands": "25.0.0-alpha4",
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": "ce4421f0daf26027b863b91787a474e4cc264344"
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))
@@ -66,6 +66,7 @@ export const inputContainerStyles = css`
66
66
  color: inherit;
67
67
  background: transparent;
68
68
  cursor: inherit;
69
+ caret-color: var(--vaadin-input-field-value-color);
69
70
  }
70
71
 
71
72
  ::slotted(*) {
@@ -84,7 +85,7 @@ export const inputContainerStyles = css`
84
85
  }
85
86
 
86
87
  ::slotted(:is(input, textarea):placeholder-shown) {
87
- color: var(--vaadin-input-field-placeholder-color, var(--_vaadin-color));
88
+ color: var(--vaadin-input-field-placeholder-color, var(--vaadin-color-subtle));
88
89
  }
89
90
 
90
91
  :host(:focus-within) {
@@ -92,6 +93,10 @@ export const inputContainerStyles = css`
92
93
  outline-offset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
93
94
  }
94
95
 
96
+ :host([invalid]) {
97
+ --vaadin-input-field-border-color: var(--vaadin-input-field-error-color, var(--vaadin-color));
98
+ }
99
+
95
100
  :host([readonly]) {
96
101
  border-style: dashed;
97
102
  }
@@ -102,10 +107,10 @@ export const inputContainerStyles = css`
102
107
  }
103
108
 
104
109
  :host([disabled]) {
105
- --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));
106
111
  --vaadin-input-field-background: var(
107
112
  --vaadin-input-field-disabled-background,
108
- var(--_vaadin-background-container-strong)
113
+ var(--vaadin-background-container-strong)
109
114
  );
110
115
  --vaadin-input-field-border-color: transparent;
111
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