@vaadin/tabs 24.1.0-alpha5 → 24.1.0-alpha7
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 +8 -8
- package/src/vaadin-tab.js +10 -0
- package/src/vaadin-tabs.js +11 -2
- package/theme/lumo/vaadin-tab-styles.js +12 -0
- 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/tabs",
|
|
3
|
-
"version": "24.1.0-
|
|
3
|
+
"version": "24.1.0-alpha7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.1.0-
|
|
40
|
-
"@vaadin/component-base": "24.1.0-
|
|
41
|
-
"@vaadin/item": "24.1.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.1.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.1.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.1.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.1.0-alpha7",
|
|
40
|
+
"@vaadin/component-base": "24.1.0-alpha7",
|
|
41
|
+
"@vaadin/item": "24.1.0-alpha7",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-alpha7",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.1.0-alpha7",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-alpha7"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "6711b6ac7b49e2ddc0990c34de9718b58c2d16b3"
|
|
56
56
|
}
|
package/src/vaadin-tab.js
CHANGED
|
@@ -49,6 +49,16 @@ class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(PolymerEl
|
|
|
49
49
|
:host([hidden]) {
|
|
50
50
|
display: none !important;
|
|
51
51
|
}
|
|
52
|
+
|
|
53
|
+
@media (forced-colors: active) {
|
|
54
|
+
:host([focused]) {
|
|
55
|
+
outline: 1px solid;
|
|
56
|
+
outline-offset: -1px;
|
|
57
|
+
}
|
|
58
|
+
:host([selected]) {
|
|
59
|
+
border-bottom: 2px solid;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
52
62
|
</style>
|
|
53
63
|
<slot></slot>
|
|
54
64
|
<slot name="tooltip"></slot>
|
package/src/vaadin-tabs.js
CHANGED
|
@@ -251,8 +251,17 @@ class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerEleme
|
|
|
251
251
|
: getNormalizedScrollLeft(this._scrollerElement, this.getAttribute('dir'));
|
|
252
252
|
const scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
|
|
253
253
|
|
|
254
|
-
|
|
255
|
-
|
|
254
|
+
// Note that we are not comparing floored scrollPosition to be greater than zero here, which would make a natural
|
|
255
|
+
// sense, but to be greater than one intentionally. There is a known bug in Chromium browsers on Linux/Mac
|
|
256
|
+
// (https://bugs.chromium.org/p/chromium/issues/detail?id=1123301), which returns invalid value of scrollLeft when
|
|
257
|
+
// text direction is RTL. The value is off by one pixel in that case. Comparing scrollPosition to be greater than
|
|
258
|
+
// one on the following line is a workaround for that bug. Comparing scrollPosition to be greater than one means,
|
|
259
|
+
// that the left overflow and left arrow will be displayed "one pixel" later than normal. In other words, if the tab
|
|
260
|
+
// scroller element is scrolled just by 1px, the overflow is not yet showing.
|
|
261
|
+
let overflow = Math.floor(scrollPosition) > 1 ? 'start' : '';
|
|
262
|
+
if (Math.ceil(scrollPosition) < Math.ceil(scrollSize - this._scrollOffset)) {
|
|
263
|
+
overflow += ' end';
|
|
264
|
+
}
|
|
256
265
|
|
|
257
266
|
if (this.__direction === 1) {
|
|
258
267
|
overflow = overflow.replace(/start|end/giu, (matched) => {
|
|
@@ -44,6 +44,18 @@ registerStyles(
|
|
|
44
44
|
min-width: 0;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
@media (forced-colors: active) {
|
|
48
|
+
:host([focused]) {
|
|
49
|
+
outline: 1px solid;
|
|
50
|
+
outline-offset: -1px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([orientation='vertical'][selected]) {
|
|
54
|
+
border-bottom: none;
|
|
55
|
+
border-left: 2px solid;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
47
59
|
:host(:hover),
|
|
48
60
|
:host([focus-ring]) {
|
|
49
61
|
color: var(--lumo-body-text-color);
|
package/web-types.json
CHANGED