@vaadin/tabs 25.3.0-dev.3a3c2d7d2a → 25.3.0

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 (8) hide show
  1. package/custom-elements.json +70 -56
  2. package/package.json +10 -10
  3. package/src/vaadin-tab.d.ts +2 -0
  4. package/src/vaadin-tab.js +3 -0
  5. package/src/vaadin-tabs-mixin.js +2 -5
  6. package/src/vaadin-tabs.js +1 -0
  7. package/web-types.json +4 -8
  8. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -38,7 +38,7 @@
38
38
  "declarations": [
39
39
  {
40
40
  "kind": "class",
41
- "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
41
+ "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-radius` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-line-height` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
42
42
  "name": "Tab",
43
43
  "members": [
44
44
  {
@@ -82,6 +82,39 @@
82
82
  }
83
83
  }
84
84
  ],
85
+ "attributes": [
86
+ {
87
+ "name": "disabled",
88
+ "type": {
89
+ "text": "boolean"
90
+ },
91
+ "description": "If true, the user cannot interact with this element.",
92
+ "fieldName": "disabled",
93
+ "inheritedFrom": {
94
+ "name": "DisabledMixin",
95
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
96
+ }
97
+ },
98
+ {
99
+ "name": "selected",
100
+ "type": {
101
+ "text": "boolean"
102
+ },
103
+ "description": "If true, the item is in selected state.",
104
+ "fieldName": "selected",
105
+ "inheritedFrom": {
106
+ "name": "ItemMixin",
107
+ "package": "@vaadin/item/src/vaadin-item-mixin.js"
108
+ }
109
+ },
110
+ {
111
+ "type": {
112
+ "text": "string"
113
+ },
114
+ "description": "The theme variants to apply to the component.",
115
+ "name": "theme"
116
+ }
117
+ ],
85
118
  "mixins": [
86
119
  {
87
120
  "name": "ItemMixin",
@@ -110,32 +143,6 @@
110
143
  },
111
144
  "tagName": "vaadin-tab",
112
145
  "customElement": true,
113
- "attributes": [
114
- {
115
- "name": "disabled",
116
- "type": {
117
- "text": "boolean"
118
- },
119
- "description": "If true, the user cannot interact with this element.",
120
- "fieldName": "disabled",
121
- "inheritedFrom": {
122
- "name": "DisabledMixin",
123
- "package": "@vaadin/a11y-base/src/disabled-mixin.js"
124
- }
125
- },
126
- {
127
- "name": "selected",
128
- "type": {
129
- "text": "boolean"
130
- },
131
- "description": "If true, the item is in selected state.",
132
- "fieldName": "selected",
133
- "inheritedFrom": {
134
- "name": "ItemMixin",
135
- "package": "@vaadin/item/src/vaadin-item-mixin.js"
136
- }
137
- }
138
- ],
139
146
  "events": []
140
147
  }
141
148
  ],
@@ -366,34 +373,6 @@
366
373
  "name": "selected-changed"
367
374
  }
368
375
  ],
369
- "mixins": [
370
- {
371
- "name": "TabsMixin",
372
- "module": "src/vaadin-tabs-mixin.js"
373
- },
374
- {
375
- "name": "ElementMixin",
376
- "package": "@vaadin/component-base/src/element-mixin.js"
377
- },
378
- {
379
- "name": "ThemableMixin",
380
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
381
- },
382
- {
383
- "name": "PolylitMixin",
384
- "package": "@vaadin/component-base/src/polylit-mixin.js"
385
- },
386
- {
387
- "name": "LumoInjectionMixin",
388
- "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
389
- }
390
- ],
391
- "superclass": {
392
- "name": "LitElement",
393
- "package": "lit"
394
- },
395
- "tagName": "vaadin-tabs",
396
- "customElement": true,
397
376
  "attributes": [
398
377
  {
399
378
  "name": "disabled",
@@ -430,8 +409,43 @@
430
409
  "name": "ListMixin",
431
410
  "package": "@vaadin/a11y-base/src/list-mixin.js"
432
411
  }
412
+ },
413
+ {
414
+ "type": {
415
+ "text": "string"
416
+ },
417
+ "description": "The theme variants to apply to the component.",
418
+ "name": "theme"
433
419
  }
434
- ]
420
+ ],
421
+ "mixins": [
422
+ {
423
+ "name": "TabsMixin",
424
+ "module": "src/vaadin-tabs-mixin.js"
425
+ },
426
+ {
427
+ "name": "ElementMixin",
428
+ "package": "@vaadin/component-base/src/element-mixin.js"
429
+ },
430
+ {
431
+ "name": "ThemableMixin",
432
+ "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
433
+ },
434
+ {
435
+ "name": "PolylitMixin",
436
+ "package": "@vaadin/component-base/src/polylit-mixin.js"
437
+ },
438
+ {
439
+ "name": "LumoInjectionMixin",
440
+ "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
441
+ }
442
+ ],
443
+ "superclass": {
444
+ "name": "LitElement",
445
+ "package": "lit"
446
+ },
447
+ "tagName": "vaadin-tabs",
448
+ "customElement": true
435
449
  }
436
450
  ],
437
451
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/tabs",
3
- "version": "25.3.0-dev.3a3c2d7d2a",
3
+ "version": "25.3.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,18 +35,18 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
39
- "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
40
- "@vaadin/item": "25.3.0-dev.3a3c2d7d2a",
41
- "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
38
+ "@vaadin/a11y-base": "~25.3.0",
39
+ "@vaadin/component-base": "~25.3.0",
40
+ "@vaadin/item": "~25.3.0",
41
+ "@vaadin/vaadin-themable-mixin": "~25.3.0",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
46
- "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
47
- "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
45
+ "@vaadin/aura": "~25.3.0",
46
+ "@vaadin/chai-plugins": "~25.3.0",
47
+ "@vaadin/test-runner-commands": "~25.3.0",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
49
+ "@vaadin/vaadin-lumo-styles": "~25.3.0",
50
50
  "sinon": "^22.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": "ac506ca7800c23e05da55863c56bcedf12812d37"
57
+ "gitHead": "4133747243c03bf544f6e82cc2ec9f295aaccd65"
58
58
  }
package/src/vaadin-tab.d.ts CHANGED
@@ -32,10 +32,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
32
32
  * :------------------------------|
33
33
  * | `--vaadin-tab-background` |
34
34
  * | `--vaadin-tab-border-color` |
35
+ * | `--vaadin-tab-border-radius` |
35
36
  * | `--vaadin-tab-border-width` |
36
37
  * | `--vaadin-tab-font-size` |
37
38
  * | `--vaadin-tab-font-weight` |
38
39
  * | `--vaadin-tab-gap` |
40
+ * | `--vaadin-tab-line-height` |
39
41
  * | `--vaadin-tab-padding` |
40
42
  * | `--vaadin-tab-text-color` |
41
43
  *
package/src/vaadin-tab.js CHANGED
@@ -38,15 +38,18 @@ import { tabStyles } from './styles/vaadin-tab-base-styles.js';
38
38
  * :------------------------------|
39
39
  * | `--vaadin-tab-background` |
40
40
  * | `--vaadin-tab-border-color` |
41
+ * | `--vaadin-tab-border-radius` |
41
42
  * | `--vaadin-tab-border-width` |
42
43
  * | `--vaadin-tab-font-size` |
43
44
  * | `--vaadin-tab-font-weight` |
44
45
  * | `--vaadin-tab-gap` |
46
+ * | `--vaadin-tab-line-height` |
45
47
  * | `--vaadin-tab-padding` |
46
48
  * | `--vaadin-tab-text-color` |
47
49
  *
48
50
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
49
51
  *
52
+ * @attr {string} theme - The theme variants to apply to the component.
50
53
  * @customElement vaadin-tab
51
54
  * @extends HTMLElement
52
55
  */
package/src/vaadin-tabs-mixin.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
7
7
  import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
8
+ import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
8
9
  import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
9
10
 
10
11
  export const TabsMixin = (superClass) =>
@@ -195,10 +196,6 @@ export const TabsMixin = (superClass) =>
195
196
  });
196
197
  }
197
198
 
198
- if (overflow) {
199
- this.setAttribute('overflow', overflow.trim());
200
- } else {
201
- this.removeAttribute('overflow');
202
- }
199
+ setOrRemoveAttribute(this, 'overflow', overflow.trim());
203
200
  }
204
201
  };
package/src/vaadin-tabs.js CHANGED
@@ -60,6 +60,7 @@ import { TabsMixin } from './vaadin-tabs-mixin.js';
60
60
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
61
61
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
62
62
  *
63
+ * @attr {string} theme - The theme variants to apply to the component.
63
64
  * @customElement vaadin-tabs
64
65
  * @extends HTMLElement
65
66
  */
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tabs",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-tab",
11
- "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-radius` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-line-height` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
@@ -33,9 +33,7 @@
33
33
  "description": "The theme variants to apply to the component.",
34
34
  "value": {
35
35
  "type": [
36
- "string",
37
- "null",
38
- "undefined"
36
+ "string"
39
37
  ]
40
38
  }
41
39
  }
@@ -109,9 +107,7 @@
109
107
  "description": "The theme variants to apply to the component.",
110
108
  "value": {
111
109
  "type": [
112
- "string",
113
- "null",
114
- "undefined"
110
+ "string"
115
111
  ]
116
112
  }
117
113
  }
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/tabs",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0",
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-tab",
19
- "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```html\n<vaadin-tab>Tab 1</vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`selected` | Set when the tab is selected\n`active` | Set when mousedown or enter/spacebar pressed\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items\n`has-tooltip` | Set when the tab has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------|\n| `--vaadin-tab-background` |\n| `--vaadin-tab-border-color` |\n| `--vaadin-tab-border-radius` |\n| `--vaadin-tab-border-width` |\n| `--vaadin-tab-font-size` |\n| `--vaadin-tab-font-weight` |\n| `--vaadin-tab-gap` |\n| `--vaadin-tab-line-height` |\n| `--vaadin-tab-padding` |\n| `--vaadin-tab-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {