@vaadin/checkbox 24.3.0-alpha1 → 24.3.0-alpha10
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/package.json +13 -13
- package/src/vaadin-checkbox-styles.js +2 -0
- package/src/vaadin-checkbox.d.ts +0 -8
- package/theme/lumo/vaadin-checkbox-styles.js +19 -14
- package/web-types.json +1 -27
- package/web-types.lit.json +1 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/checkbox",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/vaadin-lit-checkbox.d.ts",
|
|
25
|
-
"!src/vaadin-lit-checkbox.js",
|
|
26
24
|
"theme",
|
|
27
25
|
"vaadin-*.d.ts",
|
|
28
26
|
"vaadin-*.js",
|
|
29
27
|
"web-types.json",
|
|
30
|
-
"web-types.lit.json"
|
|
28
|
+
"web-types.lit.json",
|
|
29
|
+
"!vaadin-lit-*.d.ts",
|
|
30
|
+
"!vaadin-lit-*.js"
|
|
31
31
|
],
|
|
32
32
|
"keywords": [
|
|
33
33
|
"Vaadin",
|
|
@@ -39,22 +39,22 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
41
41
|
"@polymer/polymer": "^3.0.0",
|
|
42
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
43
|
-
"@vaadin/component-base": "24.3.0-
|
|
44
|
-
"@vaadin/field-base": "24.3.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
48
|
-
"lit": "^
|
|
42
|
+
"@vaadin/a11y-base": "24.3.0-alpha10",
|
|
43
|
+
"@vaadin/component-base": "24.3.0-alpha10",
|
|
44
|
+
"@vaadin/field-base": "24.3.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha10",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha10",
|
|
48
|
+
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@esm-bundle/chai": "^4.3.4",
|
|
52
|
-
"@vaadin/testing-helpers": "^0.
|
|
52
|
+
"@vaadin/testing-helpers": "^0.6.0",
|
|
53
53
|
"sinon": "^13.0.2"
|
|
54
54
|
},
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
|
|
60
60
|
}
|
package/src/vaadin-checkbox.d.ts
CHANGED
|
@@ -11,11 +11,6 @@ import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
|
|
|
11
11
|
import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
|
|
12
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* Fired when the `dirty` property changes.
|
|
16
|
-
*/
|
|
17
|
-
export type CheckboxDirtyChangedEvent = CustomEvent<{ value: boolean }>;
|
|
18
|
-
|
|
19
14
|
/**
|
|
20
15
|
* Fired when the `checked` property changes.
|
|
21
16
|
*/
|
|
@@ -27,8 +22,6 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
27
22
|
export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>;
|
|
28
23
|
|
|
29
24
|
export interface CheckboxCustomEventMap {
|
|
30
|
-
'dirty-changed': CheckboxDirtyChangedEvent;
|
|
31
|
-
|
|
32
25
|
'checked-changed': CheckboxCheckedChangedEvent;
|
|
33
26
|
|
|
34
27
|
'indeterminate-changed': CheckboxIndeterminateChangedEvent;
|
|
@@ -65,7 +58,6 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
|
|
|
65
58
|
*
|
|
66
59
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
67
60
|
*
|
|
68
|
-
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
69
61
|
* @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
|
|
70
62
|
* @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
|
|
71
63
|
*/
|
|
@@ -10,8 +10,8 @@ registerStyles(
|
|
|
10
10
|
'vaadin-checkbox',
|
|
11
11
|
css`
|
|
12
12
|
:host {
|
|
13
|
-
color: var(--lumo-body-text-color);
|
|
14
|
-
font-size: var(--lumo-font-size-m);
|
|
13
|
+
color: var(--vaadin-checkbox-label-color, var(--lumo-body-text-color));
|
|
14
|
+
font-size: var(--vaadin-checkbox-label-font-size, var(--lumo-font-size-m));
|
|
15
15
|
font-family: var(--lumo-font-family);
|
|
16
16
|
line-height: var(--lumo-line-height-s);
|
|
17
17
|
-webkit-font-smoothing: antialiased;
|
|
@@ -23,11 +23,16 @@ registerStyles(
|
|
|
23
23
|
cursor: default;
|
|
24
24
|
outline: none;
|
|
25
25
|
--_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2));
|
|
26
|
+
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
27
|
+
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
28
|
+
--_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
:host([has-label]) ::slotted(label) {
|
|
29
|
-
padding
|
|
30
|
-
|
|
32
|
+
padding: var(
|
|
33
|
+
--vaadin-checkbox-label-padding,
|
|
34
|
+
var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
|
|
35
|
+
);
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
[part='checkbox'] {
|
|
@@ -35,8 +40,8 @@ registerStyles(
|
|
|
35
40
|
height: var(--_checkbox-size);
|
|
36
41
|
margin: var(--lumo-space-xs);
|
|
37
42
|
position: relative;
|
|
38
|
-
border-radius: var(--lumo-border-radius-s);
|
|
39
|
-
background
|
|
43
|
+
border-radius: var(--vaadin-checkbox-border-radius, var(--lumo-border-radius-s));
|
|
44
|
+
background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
|
|
40
45
|
transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
|
|
41
46
|
cursor: var(--lumo-clickable-cursor);
|
|
42
47
|
/* Default field border color */
|
|
@@ -50,16 +55,16 @@ registerStyles(
|
|
|
50
55
|
|
|
51
56
|
:host([indeterminate]) [part='checkbox'],
|
|
52
57
|
:host([checked]) [part='checkbox'] {
|
|
53
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--_selection-color);
|
|
54
59
|
}
|
|
55
60
|
|
|
56
61
|
/* Checkmark */
|
|
57
62
|
[part='checkbox']::after {
|
|
58
63
|
pointer-events: none;
|
|
59
64
|
font-family: 'lumo-icons';
|
|
60
|
-
content: var(--lumo-icons-checkmark);
|
|
61
|
-
color: var(--lumo-primary-contrast-color);
|
|
62
|
-
font-size: calc(var(--_checkbox-size) + 2px);
|
|
65
|
+
content: var(--vaadin-checkbox-checkmark-char, var(--lumo-icons-checkmark));
|
|
66
|
+
color: var(--vaadin-checkbox-checkmark-color, var(--lumo-primary-contrast-color));
|
|
67
|
+
font-size: var(--vaadin-checkbox-checkmark-size, calc(var(--_checkbox-size) + 2px));
|
|
63
68
|
line-height: 1;
|
|
64
69
|
position: absolute;
|
|
65
70
|
top: -1px;
|
|
@@ -74,7 +79,7 @@ registerStyles(
|
|
|
74
79
|
|
|
75
80
|
/* Indeterminate checkmark */
|
|
76
81
|
:host([indeterminate]) [part='checkbox']::after {
|
|
77
|
-
content: '';
|
|
82
|
+
content: var(--vaadin-checkbox-checkmark-char-indeterminate, '');
|
|
78
83
|
opacity: 1;
|
|
79
84
|
top: 45%;
|
|
80
85
|
height: 10%;
|
|
@@ -87,7 +92,7 @@ registerStyles(
|
|
|
87
92
|
|
|
88
93
|
/* Focus ring */
|
|
89
94
|
:host([focus-ring]) [part='checkbox'] {
|
|
90
|
-
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0
|
|
95
|
+
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
|
|
91
96
|
inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
|
|
92
97
|
}
|
|
93
98
|
|
|
@@ -135,13 +140,13 @@ registerStyles(
|
|
|
135
140
|
|
|
136
141
|
/* Hover */
|
|
137
142
|
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
|
|
138
|
-
background
|
|
143
|
+
background: var(--vaadin-checkbox-background-hover, var(--lumo-contrast-30pct));
|
|
139
144
|
}
|
|
140
145
|
|
|
141
146
|
/* Disable hover for touch devices */
|
|
142
147
|
@media (pointer: coarse) {
|
|
143
148
|
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
|
|
144
|
-
background
|
|
149
|
+
background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
|
|
145
150
|
}
|
|
146
151
|
}
|
|
147
152
|
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/checkbox",
|
|
4
|
-
"version": "24.3.0-
|
|
4
|
+
"version": "24.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -32,17 +32,6 @@
|
|
|
32
32
|
]
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
|
-
{
|
|
36
|
-
"name": "dirty",
|
|
37
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
38
|
-
"value": {
|
|
39
|
-
"type": [
|
|
40
|
-
"boolean",
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
43
|
-
]
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
35
|
{
|
|
47
36
|
"name": "checked",
|
|
48
37
|
"description": "True if the element is checked.",
|
|
@@ -128,17 +117,6 @@
|
|
|
128
117
|
]
|
|
129
118
|
}
|
|
130
119
|
},
|
|
131
|
-
{
|
|
132
|
-
"name": "dirty",
|
|
133
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
134
|
-
"value": {
|
|
135
|
-
"type": [
|
|
136
|
-
"boolean",
|
|
137
|
-
"null",
|
|
138
|
-
"undefined"
|
|
139
|
-
]
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
120
|
{
|
|
143
121
|
"name": "checked",
|
|
144
122
|
"description": "True if the element is checked.",
|
|
@@ -194,10 +172,6 @@
|
|
|
194
172
|
"name": "value-changed",
|
|
195
173
|
"description": "Fired when the `value` property changes."
|
|
196
174
|
},
|
|
197
|
-
{
|
|
198
|
-
"name": "dirty-changed",
|
|
199
|
-
"description": "Fired when the `dirty` property changes."
|
|
200
|
-
},
|
|
201
175
|
{
|
|
202
176
|
"name": "checked-changed",
|
|
203
177
|
"description": "Fired when the `checked` property changes."
|
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/checkbox",
|
|
4
|
-
"version": "24.3.0-
|
|
4
|
+
"version": "24.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -26,13 +26,6 @@
|
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
-
{
|
|
30
|
-
"name": "?dirty",
|
|
31
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
29
|
{
|
|
37
30
|
"name": "?checked",
|
|
38
31
|
"description": "True if the element is checked.",
|
|
@@ -82,13 +75,6 @@
|
|
|
82
75
|
"kind": "expression"
|
|
83
76
|
}
|
|
84
77
|
},
|
|
85
|
-
{
|
|
86
|
-
"name": "@dirty-changed",
|
|
87
|
-
"description": "Fired when the `dirty` property changes.",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
78
|
{
|
|
93
79
|
"name": "@checked-changed",
|
|
94
80
|
"description": "Fired when the `checked` property changes.",
|