@vaadin/badge 25.1.0-beta1 → 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 -11
  3. package/src/styles/vaadin-badge-base-styles.js +23 -21
  4. package/src/vaadin-badge.d.ts +2 -1
  5. package/src/vaadin-badge.js +3 -2
  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-beta1",
3
+ "version": "25.1.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,19 +34,19 @@
34
34
  "web-component"
35
35
  ],
36
36
  "dependencies": {
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",
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",
40
40
  "lit": "^3.0.0"
41
41
  },
42
42
  "devDependencies": {
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",
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",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
49
+ "@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
50
50
  "sinon": "^21.0.0"
51
51
  },
52
52
  "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
57
+ "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
58
58
  }
package/src/styles/vaadin-badge-base-styles.js CHANGED
@@ -11,23 +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;
16
- position: relative;
15
+ box-sizing: border-box;
17
16
  gap: var(--vaadin-badge-gap, 0.25em);
18
- padding: var(
19
- --vaadin-badge-padding,
20
- var(--vaadin-padding-xs) calc(var(--vaadin-padding-s) + var(--vaadin-badge-border-radius, 0.25em) / 4)
21
- );
17
+ padding: var(--vaadin-badge-padding, 0 calc(0.5lh - 0.25em));
22
18
  font-family: var(--vaadin-badge-font-family, inherit);
23
- font-size: var(--vaadin-badge-font-size, 0.875em);
19
+ font-size: var(--vaadin-badge-font-size, 0.875rem);
24
20
  font-weight: var(--vaadin-badge-font-weight, 500);
25
- line-height: var(--vaadin-badge-line-height, 1);
21
+ line-height: var(--vaadin-badge-line-height, round(1em * 1.5, 0.125rem));
26
22
  color: var(--vaadin-badge-text-color, var(--vaadin-text-color));
27
- background: var(--vaadin-badge-background, var(--vaadin-background-container));
28
- border-radius: var(--vaadin-badge-border-radius, var(--vaadin-radius-l));
29
- min-width: var(--vaadin-badge-min-width, calc(1lh + var(--vaadin-badge-padding, var(--vaadin-padding-xs)) * 2));
30
- 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;
31
32
  }
32
33
 
33
34
  :host([hidden]) {
@@ -40,12 +41,14 @@ export const badgeStyles = css`
40
41
  display: none;
41
42
  }
42
43
 
44
+ :host(:is([theme~='filled'], [theme~='dot'])) {
45
+ background: var(--vaadin-text-color);
46
+ color: var(--vaadin-background-color);
47
+ }
48
+
43
49
  :host([theme~='icon-only']),
44
- :host([theme~='number-only']),
45
- :host([has-icon]:not([has-content], [has-number])),
46
- :host([has-number]:not([has-content], [has-icon])) {
47
- padding: var(--vaadin-badge-padding, var(--vaadin-padding-xs));
48
- border-radius: 50%;
50
+ :host([has-icon]:not([has-content], [has-number])) {
51
+ padding: 0;
49
52
  }
50
53
 
51
54
  :host([theme~='icon-only']),
@@ -55,15 +58,14 @@ export const badgeStyles = css`
55
58
 
56
59
  :host([theme~='dot']) {
57
60
  min-width: 0;
58
- width: 1em;
59
- height: 1em;
61
+ width: round(0.5em, 0.125rem);
62
+ height: round(0.5em, 0.125rem);
60
63
  padding: 0;
61
- border-radius: 50%;
62
64
  }
63
65
 
64
66
  @media (forced-colors: active) {
65
67
  :host {
66
- border: 1px solid;
68
+ border: 1px solid !important;
67
69
  }
68
70
  }
69
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
@@ -52,19 +52,20 @@ import { badgeStyles } from './styles/vaadin-badge-base-styles.js';
52
52
  * Custom CSS property |
53
53
  * :--------------------------------|
54
54
  * `--vaadin-badge-background` |
55
+ * `--vaadin-badge-border-color` |
55
56
  * `--vaadin-badge-border-radius` |
57
+ * `--vaadin-badge-border-width` |
56
58
  * `--vaadin-badge-font-size` |
57
59
  * `--vaadin-badge-font-weight` |
58
60
  * `--vaadin-badge-font-family` |
59
61
  * `--vaadin-badge-gap` |
60
62
  * `--vaadin-badge-line-height` |
61
- * `--vaadin-badge-min-width` |
62
63
  * `--vaadin-badge-padding` |
63
64
  * `--vaadin-badge-text-color` |
64
65
  *
65
66
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
66
67
  *
67
- * @customElement
68
+ * @customElement vaadin-badge
68
69
  * @extends HTMLElement
69
70
  * @mixes ElementMixin
70
71
  * @mixes ThemableMixin
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-beta1",
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-beta1",
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
  {