@vaadin/badge 25.1.0-alpha9 → 25.1.0-beta2

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 (7) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +11 -10
  3. package/src/styles/vaadin-badge-base-styles.js +23 -27
  4. package/src/vaadin-badge.d.ts +2 -1
  5. package/src/vaadin-badge.js +18 -6
  6. package/web-types.json +2 -2
  7. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
26
- "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-min-width` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
26
+ "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-color` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-border-width` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
27
27
  "name": "Badge",
28
28
  "members": [
29
29
  {
@@ -69,7 +69,7 @@
69
69
  "name": "LitElement",
70
70
  "package": "lit"
71
71
  },
72
- "tagName": "",
72
+ "tagName": "vaadin-badge",
73
73
  "customElement": true,
74
74
  "events": []
75
75
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/badge",
3
- "version": "25.1.0-alpha9",
3
+ "version": "25.1.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,18 +34,19 @@
34
34
  "web-component"
35
35
  ],
36
36
  "dependencies": {
37
- "@vaadin/component-base": "25.1.0-alpha9",
38
- "@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
37
+ "@vaadin/a11y-base": "25.1.0-beta2",
38
+ "@vaadin/component-base": "25.1.0-beta2",
39
+ "@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
39
40
  "lit": "^3.0.0"
40
41
  },
41
42
  "devDependencies": {
42
- "@vaadin/aura": "25.1.0-alpha9",
43
- "@vaadin/chai-plugins": "25.1.0-alpha9",
44
- "@vaadin/icon": "25.1.0-alpha9",
45
- "@vaadin/icons": "25.1.0-alpha9",
46
- "@vaadin/test-runner-commands": "25.1.0-alpha9",
43
+ "@vaadin/aura": "25.1.0-beta2",
44
+ "@vaadin/chai-plugins": "25.1.0-beta2",
45
+ "@vaadin/icon": "25.1.0-beta2",
46
+ "@vaadin/icons": "25.1.0-beta2",
47
+ "@vaadin/test-runner-commands": "25.1.0-beta2",
47
48
  "@vaadin/testing-helpers": "^2.0.0",
48
- "@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
49
+ "@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
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": "ef432311376ba3dac4233cb23d393a49a425e0a4"
57
+ "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
57
58
  }
package/src/styles/vaadin-badge-base-styles.js CHANGED
@@ -11,22 +11,24 @@ export const badgeStyles = css`
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  justify-content: center;
14
- box-sizing: border-box;
15
14
  vertical-align: baseline;
15
+ box-sizing: border-box;
16
16
  gap: var(--vaadin-badge-gap, 0.25em);
17
- padding: var(
18
- --vaadin-badge-padding,
19
- var(--vaadin-padding-xs) calc(var(--vaadin-padding-s) + var(--vaadin-badge-border-radius, 0.25em) / 4)
20
- );
17
+ padding: var(--vaadin-badge-padding, 0 calc(0.5lh - 0.25em));
21
18
  font-family: var(--vaadin-badge-font-family, inherit);
22
- font-size: var(--vaadin-badge-font-size, 0.875em);
19
+ font-size: var(--vaadin-badge-font-size, 0.875rem);
23
20
  font-weight: var(--vaadin-badge-font-weight, 500);
24
- line-height: var(--vaadin-badge-line-height, 1);
21
+ line-height: var(--vaadin-badge-line-height, round(1em * 1.5, 0.125rem));
25
22
  color: var(--vaadin-badge-text-color, var(--vaadin-text-color));
26
- background: var(--vaadin-badge-background, var(--vaadin-background-container));
27
- border-radius: var(--vaadin-badge-border-radius, var(--vaadin-radius-l));
28
- min-width: var(--vaadin-badge-min-width, calc(1lh + var(--vaadin-badge-padding, var(--vaadin-padding-xs)) * 2));
29
- flex-shrink: 0;
23
+ background: var(--vaadin-badge-background, transparent);
24
+ border: var(--vaadin-badge-border-width, 1px) solid var(--vaadin-badge-border-color, var(--vaadin-border-color));
25
+ border-radius: var(--vaadin-badge-border-radius, 100vh);
26
+ min-width: calc(1lh + var(--vaadin-badge-border-width, 1px) * 2);
27
+ white-space: nowrap;
28
+ --vaadin-icon-size: 1em;
29
+ /* prevent from stretching */
30
+ height: calc(1lh + var(--vaadin-badge-border-width, 1px) * 2);
31
+ flex: none;
30
32
  }
31
33
 
32
34
  :host([hidden]) {
@@ -39,12 +41,14 @@ export const badgeStyles = css`
39
41
  display: none;
40
42
  }
41
43
 
44
+ :host(:is([theme~='filled'], [theme~='dot'])) {
45
+ background: var(--vaadin-text-color);
46
+ color: var(--vaadin-background-color);
47
+ }
48
+
42
49
  :host([theme~='icon-only']),
43
- :host([theme~='number-only']),
44
- :host([has-icon]:not([has-content], [has-number])),
45
- :host([has-number]:not([has-content], [has-icon])) {
46
- padding: var(--vaadin-badge-padding, var(--vaadin-padding-xs));
47
- border-radius: 50%;
50
+ :host([has-icon]:not([has-content], [has-number])) {
51
+ padding: 0;
48
52
  }
49
53
 
50
54
  :host([theme~='icon-only']),
@@ -52,24 +56,16 @@ export const badgeStyles = css`
52
56
  gap: 0;
53
57
  }
54
58
 
55
- :host([theme~='icon-only']) :is([part='content'], [part='number']),
56
- :host([theme~='number-only']) :is([part='content'], [part='icon']),
57
- :host([theme~='dot']) [part] {
58
- width: 0;
59
- overflow: clip;
60
- }
61
-
62
59
  :host([theme~='dot']) {
63
60
  min-width: 0;
64
- width: 1em;
65
- height: 1em;
61
+ width: round(0.5em, 0.125rem);
62
+ height: round(0.5em, 0.125rem);
66
63
  padding: 0;
67
- border-radius: 50%;
68
64
  }
69
65
 
70
66
  @media (forced-colors: active) {
71
67
  :host {
72
- border: 1px solid;
68
+ border: 1px solid !important;
73
69
  }
74
70
  }
75
71
  `;
package/src/vaadin-badge.d.ts CHANGED
@@ -43,13 +43,14 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
43
43
  * Custom CSS property |
44
44
  * :--------------------------------|
45
45
  * `--vaadin-badge-background` |
46
+ * `--vaadin-badge-border-color` |
46
47
  * `--vaadin-badge-border-radius` |
48
+ * `--vaadin-badge-border-width` |
47
49
  * `--vaadin-badge-font-size` |
48
50
  * `--vaadin-badge-font-weight` |
49
51
  * `--vaadin-badge-font-family` |
50
52
  * `--vaadin-badge-gap` |
51
53
  * `--vaadin-badge-line-height` |
52
- * `--vaadin-badge-min-width` |
53
54
  * `--vaadin-badge-padding` |
54
55
  * `--vaadin-badge-text-color` |
55
56
  *
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';
@@ -50,19 +52,20 @@ import { badgeStyles } from './styles/vaadin-badge-base-styles.js';
50
52
  * Custom CSS property |
51
53
  * :--------------------------------|
52
54
  * `--vaadin-badge-background` |
55
+ * `--vaadin-badge-border-color` |
53
56
  * `--vaadin-badge-border-radius` |
57
+ * `--vaadin-badge-border-width` |
54
58
  * `--vaadin-badge-font-size` |
55
59
  * `--vaadin-badge-font-weight` |
56
60
  * `--vaadin-badge-font-family` |
57
61
  * `--vaadin-badge-gap` |
58
62
  * `--vaadin-badge-line-height` |
59
- * `--vaadin-badge-min-width` |
60
63
  * `--vaadin-badge-padding` |
61
64
  * `--vaadin-badge-text-color` |
62
65
  *
63
66
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
64
67
  *
65
- * @customElement
68
+ * @customElement vaadin-badge
66
69
  * @extends HTMLElement
67
70
  * @mixes ElementMixin
68
71
  * @mixes ThemableMixin
@@ -73,7 +76,7 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
73
76
  }
74
77
 
75
78
  static get styles() {
76
- return badgeStyles;
79
+ return [badgeStyles, screenReaderOnly];
77
80
  }
78
81
 
79
82
  static get lumoInjector() {
@@ -97,10 +100,19 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
97
100
 
98
101
  /** @protected */
99
102
  render() {
103
+ const theme = (this._theme || '').split(' ');
104
+ const iconOnly = theme.includes('icon-only');
105
+ const numberOnly = theme.includes('number-only');
106
+ const dot = theme.includes('dot');
107
+
100
108
  return html`
101
- <div part="icon"><slot name="icon"></slot></div>
102
- <div part="number">${this.number}</div>
103
- <div part="content"><slot></slot></div>
109
+ <div part="icon" class="${classMap({ 'sr-only': numberOnly || dot })}">
110
+ <slot name="icon"></slot>
111
+ </div>
112
+ <div part="number" class="${classMap({ 'sr-only': iconOnly || dot })}">${this.number}</div>
113
+ <div part="content" class="${classMap({ 'sr-only': numberOnly || iconOnly || dot })}">
114
+ <slot></slot>
115
+ </div>
104
116
  `;
105
117
  }
106
118
 
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/badge",
4
- "version": "25.1.0-alpha9",
4
+ "version": "25.1.0-beta2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-badge",
11
- "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-min-width` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-color` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-border-width` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "number",
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/badge",
4
- "version": "25.1.0-alpha9",
4
+ "version": "25.1.0-beta2",
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-badge",
19
- "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-min-width` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-badge>` is a Web Component for displaying badges.\n\n```html\n<vaadin-badge>New</vaadin-badge>\n```\n\n### Slots\n\nName | Description\n---------|-------------\n(none) | Default slot for the badge text content\n`icon` | Slot for an icon to place before the text\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------|-------------\n`icon` | The container for the icon slot\n`number` | The container for the number value\n`content` | The container for the default slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-icon` | Set when the badge has content in the icon slot\n`has-content` | Set when the badge has content in the default slot\n`has-number` | Set when the badge has a number value\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------|\n`--vaadin-badge-background` |\n`--vaadin-badge-border-color` |\n`--vaadin-badge-border-radius` |\n`--vaadin-badge-border-width` |\n`--vaadin-badge-font-size` |\n`--vaadin-badge-font-weight` |\n`--vaadin-badge-font-family` |\n`--vaadin-badge-gap` |\n`--vaadin-badge-line-height` |\n`--vaadin-badge-padding` |\n`--vaadin-badge-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {