@vaadin/badge 25.1.0-alpha8 → 25.1.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.
- package/package.json +11 -10
- package/src/styles/vaadin-badge-base-styles.js +16 -0
- package/src/vaadin-badge.js +15 -4
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/badge",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,18 +34,19 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/
|
|
38
|
-
"@vaadin/
|
|
37
|
+
"@vaadin/a11y-base": "25.1.0-beta1",
|
|
38
|
+
"@vaadin/component-base": "25.1.0-beta1",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
|
|
39
40
|
"lit": "^3.0.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@vaadin/aura": "25.1.0-
|
|
43
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
44
|
-
"@vaadin/icon": "25.1.0-
|
|
45
|
-
"@vaadin/icons": "25.1.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
43
|
+
"@vaadin/aura": "25.1.0-beta1",
|
|
44
|
+
"@vaadin/chai-plugins": "25.1.0-beta1",
|
|
45
|
+
"@vaadin/icon": "25.1.0-beta1",
|
|
46
|
+
"@vaadin/icons": "25.1.0-beta1",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.1.0-beta1",
|
|
47
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
|
|
49
50
|
"sinon": "^21.0.0"
|
|
50
51
|
},
|
|
51
52
|
"customElements": "custom-elements.json",
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"web-types.json",
|
|
54
55
|
"web-types.lit.json"
|
|
55
56
|
],
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
|
|
57
58
|
}
|
|
@@ -13,6 +13,7 @@ export const badgeStyles = css`
|
|
|
13
13
|
justify-content: center;
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
vertical-align: baseline;
|
|
16
|
+
position: relative;
|
|
16
17
|
gap: var(--vaadin-badge-gap, 0.25em);
|
|
17
18
|
padding: var(
|
|
18
19
|
--vaadin-badge-padding,
|
|
@@ -39,12 +40,27 @@ export const badgeStyles = css`
|
|
|
39
40
|
display: none;
|
|
40
41
|
}
|
|
41
42
|
|
|
43
|
+
:host([theme~='icon-only']),
|
|
44
|
+
:host([theme~='number-only']),
|
|
42
45
|
:host([has-icon]:not([has-content], [has-number])),
|
|
43
46
|
:host([has-number]:not([has-content], [has-icon])) {
|
|
44
47
|
padding: var(--vaadin-badge-padding, var(--vaadin-padding-xs));
|
|
45
48
|
border-radius: 50%;
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
:host([theme~='icon-only']),
|
|
52
|
+
:host([theme~='number-only']) {
|
|
53
|
+
gap: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
:host([theme~='dot']) {
|
|
57
|
+
min-width: 0;
|
|
58
|
+
width: 1em;
|
|
59
|
+
height: 1em;
|
|
60
|
+
padding: 0;
|
|
61
|
+
border-radius: 50%;
|
|
62
|
+
}
|
|
63
|
+
|
|
48
64
|
@media (forced-colors: active) {
|
|
49
65
|
:host {
|
|
50
66
|
border: 1px solid;
|
package/src/vaadin-badge.js
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
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 { classMap } from 'lit/directives/class-map.js';
|
|
8
|
+
import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
|
|
7
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
10
|
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
|
|
9
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -73,7 +75,7 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
|
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
static get styles() {
|
|
76
|
-
return badgeStyles;
|
|
78
|
+
return [badgeStyles, screenReaderOnly];
|
|
77
79
|
}
|
|
78
80
|
|
|
79
81
|
static get lumoInjector() {
|
|
@@ -97,10 +99,19 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
|
|
|
97
99
|
|
|
98
100
|
/** @protected */
|
|
99
101
|
render() {
|
|
102
|
+
const theme = (this._theme || '').split(' ');
|
|
103
|
+
const iconOnly = theme.includes('icon-only');
|
|
104
|
+
const numberOnly = theme.includes('number-only');
|
|
105
|
+
const dot = theme.includes('dot');
|
|
106
|
+
|
|
100
107
|
return html`
|
|
101
|
-
<div part="icon"
|
|
102
|
-
|
|
103
|
-
|
|
108
|
+
<div part="icon" class="${classMap({ 'sr-only': numberOnly || dot })}">
|
|
109
|
+
<slot name="icon"></slot>
|
|
110
|
+
</div>
|
|
111
|
+
<div part="number" class="${classMap({ 'sr-only': iconOnly || dot })}">${this.number}</div>
|
|
112
|
+
<div part="content" class="${classMap({ 'sr-only': numberOnly || iconOnly || dot })}">
|
|
113
|
+
<slot></slot>
|
|
114
|
+
</div>
|
|
104
115
|
`;
|
|
105
116
|
}
|
|
106
117
|
|
package/web-types.json
CHANGED