@vaadin/tabs 25.2.0-alpha12 → 25.2.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "25.2.0-alpha12",
+  "version": "25.2.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha12",
-    "@vaadin/component-base": "25.2.0-alpha12",
-    "@vaadin/item": "25.2.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
+    "@vaadin/a11y-base": "25.2.0-alpha13",
+    "@vaadin/component-base": "25.2.0-alpha13",
+    "@vaadin/item": "25.2.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha12",
-    "@vaadin/chai-plugins": "25.2.0-alpha12",
-    "@vaadin/test-runner-commands": "25.2.0-alpha12",
+    "@vaadin/aura": "25.2.0-alpha13",
+    "@vaadin/chai-plugins": "25.2.0-alpha13",
+    "@vaadin/test-runner-commands": "25.2.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha13",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
+  "gitHead": "a1052aee053529ffcef1a1e9be2c855ed3e98cb2"
 }

package/src/styles/vaadin-tabs-base-styles.js

@@ -35,6 +35,13 @@ export const tabsStyles = css`
     display: flex;
     flex-direction: column;
     gap: var(--vaadin-tabs-gap, var(--vaadin-gap-s));
+    animation: enable-smooth-scroll-after-first-render 1s both;
+  }
+
+  @keyframes enable-smooth-scroll-after-first-render {
+    100% {
+      scroll-behavior: smooth;
+    }
   }
 
   :host([orientation='horizontal']) [part='tabs'] {
@@ -61,6 +68,8 @@ export const tabsStyles = css`
     align-items: center;
     justify-content: center;
     -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
     touch-action: manipulation;
   }
 

package/src/vaadin-tabs-mixin.js

@@ -70,6 +70,7 @@ export const TabsMixin = (superClass) =>
     ready() {
       super.ready();
 
+      this._updateOverflow();
       this._scrollerElement.addEventListener('scroll', () => this._updateOverflow());
 
       this.setAttribute('role', 'tablist');
@@ -96,92 +97,77 @@ export const TabsMixin = (superClass) =>
       this._updateOverflow();
     }
 
-    /** @protected */
-    _scrollForward() {
-      // Calculations here are performed in order to optimize the loop that checks item visibility.
-      const forwardButtonVisibleWidth = this._getNavigationButtonVisibleWidth('forward-button');
-      const backButtonVisibleWidth = this._getNavigationButtonVisibleWidth('back-button');
+    _scrollToItem(idx) {
+      const item = this.items[idx];
+      const itemRect = item.getBoundingClientRect();
       const scrollerRect = this._scrollerElement.getBoundingClientRect();
-      const itemToScrollTo = [...this.items]
-        .reverse()
-        .find((item) => this._isItemVisible(item, forwardButtonVisibleWidth, backButtonVisibleWidth, scrollerRect));
-      const itemRect = itemToScrollTo.getBoundingClientRect();
+
       // This hard-coded number accounts for the width of the mask that covers a part of the visible items.
       // A CSS variable can be introduced to get rid of this value.
-      const overflowIndicatorCompensation = 20;
-      const totalCompensation =
-        overflowIndicatorCompensation + this.shadowRoot.querySelector('[part="back-button"]').clientWidth;
-      let scrollOffset;
-      if (this.__isRTL) {
-        const scrollerRightEdge = scrollerRect.right - totalCompensation;
-        scrollOffset = itemRect.right - scrollerRightEdge;
+      const overflowIndicatorCompensation = this._vertical ? 10 : 20;
+
+      if (this._vertical) {
+        if (itemRect.bottom > scrollerRect.bottom - overflowIndicatorCompensation) {
+          this._scrollerElement.scrollTop =
+            item.offsetTop - (scrollerRect.height - itemRect.height) + overflowIndicatorCompensation;
+        }
+        if (itemRect.top < scrollerRect.top + overflowIndicatorCompensation) {
+          this._scrollerElement.scrollTop = item.offsetTop - overflowIndicatorCompensation;
+        }
       } else {
-        const scrollerLeftEdge = scrollerRect.left + totalCompensation;
-        scrollOffset = itemRect.left - scrollerLeftEdge;
+        const backButtonWidth = this.shadowRoot.querySelector(`[part="back-button"]`).offsetWidth;
+        const forwardButtonWidth = this.shadowRoot.querySelector(`[part="forward-button"]`).offsetWidth;
+
+        if (itemRect.right > scrollerRect.right - forwardButtonWidth - overflowIndicatorCompensation) {
+          this._scrollerElement.scrollLeft =
+            item.offsetLeft -
+            (scrollerRect.width - itemRect.width) +
+            forwardButtonWidth +
+            overflowIndicatorCompensation;
+        }
+        if (itemRect.left < scrollerRect.left + backButtonWidth + overflowIndicatorCompensation) {
+          this._scrollerElement.scrollLeft = item.offsetLeft - backButtonWidth - overflowIndicatorCompensation;
+        }
       }
-      // It is possible that a scroll offset is calculated to be between 0 and 1. In this case, this offset
-      // can be rounded down to zero, rendering the button useless. It is also possible that the offset is
-      // calculated such that it results in scrolling backwards for a wide tab or edge cases. This is a
-      // workaround for such cases.
-      if (-this.__direction * scrollOffset < 1) {
-        scrollOffset = -this.__direction * (this._scrollOffset - totalCompensation);
-      }
-      this._scroll(scrollOffset);
     }
 
     /** @protected */
-    _scrollBack() {
-      // Calculations here are performed in order to optimize the loop that checks item visibility.
-      const forwardButtonVisibleWidth = this._getNavigationButtonVisibleWidth('forward-button');
-      const backButtonVisibleWidth = this._getNavigationButtonVisibleWidth('back-button');
-      const scrollerRect = this._scrollerElement.getBoundingClientRect();
-      const itemToScrollTo = this.items.find((item) =>
-        this._isItemVisible(item, forwardButtonVisibleWidth, backButtonVisibleWidth, scrollerRect),
-      );
-      const itemRect = itemToScrollTo.getBoundingClientRect();
-      // This hard-coded number accounts for the width of the mask that covers a part of the visible items.
-      // A CSS variable can be introduced to get rid of this value.
-      const overflowIndicatorCompensation = 20;
-      const totalCompensation =
-        overflowIndicatorCompensation + this.shadowRoot.querySelector('[part="forward-button"]').clientWidth;
-      let scrollOffset;
-      if (this.__isRTL) {
-        const scrollerLeftEdge = scrollerRect.left + totalCompensation;
-        scrollOffset = itemRect.left - scrollerLeftEdge;
-      } else {
-        const scrollerRightEdge = scrollerRect.right - totalCompensation;
-        scrollOffset = itemRect.right - scrollerRightEdge;
+    _scrollForward(e) {
+      // Allow setInterval loop to trigger scroll (e is undefine in that case)
+      // Allow programmatic click events to trigger scroll (__scrollTimer is undefine in that case)
+      if (e === undefined || this.__scrollTimer === undefined) {
+        this._scroll(this.__direction * (this._scrollOffset / 2) * -1);
       }
-      // It is possible that a scroll offset is calculated to be between 0 and 1. In this case, this offset
-      // can be rounded down to zero, rendering the button useless. It is also possible that the offset is
-      // calculated such that it results in scrolling forward for a wide tab or edge cases. This is a
-      // workaround for such cases.
-      if (this.__direction * scrollOffset < 1) {
-        scrollOffset = this.__direction * (this._scrollOffset - totalCompensation);
+    }
+
+    /** @protected */
+    _scrollBack(e) {
+      // Allow setInterval loop to trigger scroll (e is undefine in that case)
+      // Allow programmatic click events to trigger scroll (__scrollTimer is undefine in that case)
+      if (e === undefined || this.__scrollTimer === undefined) {
+        this._scroll(this.__direction * (this._scrollOffset / 2));
       }
-      this._scroll(scrollOffset);
     }
 
-    /** @private */
-    _isItemVisible(item, forwardButtonVisibleWidth, backButtonVisibleWidth, scrollerRect) {
-      if (this._vertical) {
-        throw new Error('Visibility check is only supported for horizontal tabs.');
+    /** @protected */
+    _startScrollForward(e) {
+      if (e.button === 0) {
+        this._scrollForward();
+        this.__scrollTimer = setInterval(this._scrollForward.bind(this), 300);
       }
-      const buttonOnTheRightWidth = this.__isRTL ? backButtonVisibleWidth : forwardButtonVisibleWidth;
-      const buttonOnTheLeftWidth = this.__isRTL ? forwardButtonVisibleWidth : backButtonVisibleWidth;
-      const scrollerRightEdge = scrollerRect.right - buttonOnTheRightWidth;
-      const scrollerLeftEdge = scrollerRect.left + buttonOnTheLeftWidth;
-      const itemRect = item.getBoundingClientRect();
-      return scrollerRightEdge > Math.floor(itemRect.left) && scrollerLeftEdge < Math.ceil(itemRect.right);
     }
 
-    /** @private */
-    _getNavigationButtonVisibleWidth(buttonPartName) {
-      const navigationButton = this.shadowRoot.querySelector(`[part="${buttonPartName}"]`);
-      if (window.getComputedStyle(navigationButton).opacity === '0') {
-        return 0;
+    /** @protected */
+    _startScrollBack(e) {
+      if (e.button === 0) {
+        this._scrollBack();
+        this.__scrollTimer = setInterval(this._scrollBack.bind(this), 300);
       }
-      return navigationButton.clientWidth;
+    }
+
+    /** @protected */
+    _stopScroll() {
+      clearTimeout(this.__scrollTimer);
     }
 
     /** @private */

package/src/vaadin-tabs.js

@@ -75,13 +75,29 @@ class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   /** @protected */
   render() {
     return html`
-      <div @click="${this._scrollBack}" part="back-button" aria-hidden="true"></div>
+      <div
+        @pointerdown="${this._startScrollBack}"
+        @pointerup="${this._stopScroll}"
+        @pointerleave="${this._stopScroll}"
+        @pointercancel="${this._stopScroll}"
+        @click="${this._scrollBack}"
+        part="back-button"
+        aria-hidden="true"
+      ></div>
 
-      <div id="scroll" part="tabs">
+      <div id="scroll" part="tabs" tabindex="-1">
         <slot></slot>
       </div>
 
-      <div @click="${this._scrollForward}" part="forward-button" aria-hidden="true"></div>
+      <div
+        @pointerdown="${this._startScrollForward}"
+        @pointerup="${this._stopScroll}"
+        @pointerleave="${this._stopScroll}"
+        @pointercancel="${this._stopScroll}"
+        @click="${this._scrollForward}"
+        part="forward-button"
+        aria-hidden="true"
+      ></div>
     `;
   }
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "25.2.0-alpha12",
+  "version": "25.2.0-alpha13",
   "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": "25.2.0-alpha12",
+  "version": "25.2.0-alpha13",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {