@vaadin/tabs 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,12 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/item": "24.0.0-alpha1",
-    "@vaadin/vaadin-list-mixin": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/item": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-tab.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';

package/src/vaadin-tab.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-tabs.d.ts

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export type TabsOrientation = 'horizontal' | 'vertical';

package/src/vaadin-tabs.js

@@ -1,14 +1,15 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-tab.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -178,6 +179,28 @@ class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerEleme
     });
   }
 
+  /**
+   * @return {number}
+   * @protected
+   */
+  get _scrollOffset() {
+    return this._vertical ? this._scrollerElement.offsetHeight : this._scrollerElement.offsetWidth;
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.$.scroll;
+  }
+
+  /** @private */
+  get __direction() {
+    return !this._vertical && this.__isRTL ? 1 : -1;
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -221,39 +244,18 @@ class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerEleme
     this._scroll(this.__direction * this._scrollOffset);
   }
 
-  /**
-   * @return {number}
-   * @protected
-   */
-  get _scrollOffset() {
-    return this._vertical ? this._scrollerElement.offsetHeight : this._scrollerElement.offsetWidth;
-  }
-
-  /**
-   * @return {!HTMLElement}
-   * @protected
-   */
-  get _scrollerElement() {
-    return this.$.scroll;
-  }
-
-  /** @private */
-  get __direction() {
-    return !this._vertical && this.getAttribute('dir') === 'rtl' ? 1 : -1;
-  }
-
   /** @private */
   _updateOverflow() {
     const scrollPosition = this._vertical
       ? this._scrollerElement.scrollTop
-      : this.__getNormalizedScrollLeft(this._scrollerElement);
+      : getNormalizedScrollLeft(this._scrollerElement, this.getAttribute('dir'));
     const scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
 
     let overflow = scrollPosition > 0 ? 'start' : '';
     overflow += scrollPosition + this._scrollOffset < scrollSize ? ' end' : '';
 
     if (this.__direction === 1) {
-      overflow = overflow.replace(/start|end/gi, (matched) => {
+      overflow = overflow.replace(/start|end/giu, (matched) => {
         return matched === 'start' ? 'end' : 'start';
       });
     }

package/theme/lumo/vaadin-tab-styles.js

@@ -134,27 +134,23 @@ registerStyles(
       color: inherit !important;
     }
 
-    :host ::slotted(vaadin-icon),
-    :host ::slotted(iron-icon) {
+    :host ::slotted(vaadin-icon) {
       margin: 0 4px;
       width: var(--lumo-icon-size-m);
       height: var(--lumo-icon-size-m);
     }
 
     /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-    :host ::slotted(vaadin-icon[icon^='vaadin:']),
-    :host ::slotted(iron-icon[icon^='vaadin:']) {
+    :host ::slotted(vaadin-icon[icon^='vaadin:']) {
       padding: 0.25rem;
       box-sizing: border-box !important;
     }
 
-    :host(:not([dir='rtl'])) ::slotted(vaadin-icon:first-child),
-    :host(:not([dir='rtl'])) ::slotted(iron-icon:first-child) {
+    :host(:not([dir='rtl'])) ::slotted(vaadin-icon:first-child) {
       margin-left: 0;
     }
 
-    :host(:not([dir='rtl'])) ::slotted(vaadin-icon:last-child),
-    :host(:not([dir='rtl'])) ::slotted(iron-icon:last-child) {
+    :host(:not([dir='rtl'])) ::slotted(vaadin-icon:last-child) {
       margin-right: 0;
     }
 
@@ -175,8 +171,7 @@ registerStyles(
       padding-top: 0.25rem;
     }
 
-    :host([theme~='icon-on-top']) ::slotted(vaadin-icon),
-    :host([theme~='icon-on-top']) ::slotted(iron-icon) {
+    :host([theme~='icon-on-top']) ::slotted(vaadin-icon) {
       margin: 0;
     }
 
@@ -209,13 +204,11 @@ registerStyles(
       transform: translateX(50%) scale(1);
     }
 
-    :host([dir='rtl']) ::slotted(vaadin-icon:first-child),
-    :host([dir='rtl']) ::slotted(iron-icon:first-child) {
+    :host([dir='rtl']) ::slotted(vaadin-icon:first-child) {
       margin-right: 0;
     }
 
-    :host([dir='rtl']) ::slotted(vaadin-icon:last-child),
-    :host([dir='rtl']) ::slotted(iron-icon:last-child) {
+    :host([dir='rtl']) ::slotted(vaadin-icon:last-child) {
       margin-left: 0;
     }
 

package/theme/material/vaadin-tab-styles.js

@@ -128,8 +128,7 @@ registerStyles(
     }
 
     /* Small space between icon and label */
-    ::slotted(vaadin-icon:not(:only-child)),
-    ::slotted(iron-icon:not(:only-child)) {
+    ::slotted(vaadin-icon:not(:only-child)) {
       margin-bottom: 8px;
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {