@vaadin/tabs 25.2.0-alpha8 → 25.2.0-beta1

package/custom-elements.json

@@ -41,6 +41,20 @@
           "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.",
           "name": "Tab",
           "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -97,6 +111,18 @@
           "tagName": "vaadin-tab",
           "customElement": true,
           "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "name": "selected",
               "type": {

package/package.json

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

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-tab.js

@@ -49,9 +49,6 @@ import { tabStyles } from './styles/vaadin-tab-base-styles.js';
  *
  * @customElement vaadin-tab
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ItemMixin
- * @mixes ThemableMixin
  */
 class Tab extends ItemMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

package/src/vaadin-tabs-mixin.js

@@ -7,11 +7,6 @@ import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
-/**
- * @polymerMixin
- * @mixes ListMixin
- * @mixes ResizeMixin
- */
 export const TabsMixin = (superClass) =>
   class TabsMixinClass extends ResizeMixin(ListMixin(superClass)) {
     static get properties() {
@@ -75,6 +70,7 @@ export const TabsMixin = (superClass) =>
     ready() {
       super.ready();
 
+      this._updateOverflow();
       this._scrollerElement.addEventListener('scroll', () => this._updateOverflow());
 
       this.setAttribute('role', 'tablist');
@@ -101,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;
-      }
-      // 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);
+        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;
+        }
       }
-      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

@@ -62,9 +62,6 @@ import { TabsMixin } from './vaadin-tabs-mixin.js';
  *
  * @customElement vaadin-tabs
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes TabsMixin
- * @mixes ThemableMixin
  */
 class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
@@ -78,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-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,9 +15,7 @@
               "description": "If true, the user cannot interact with this element.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -26,9 +24,7 @@
               "description": "If true, the item is in selected state.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -51,9 +47,7 @@
                 "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -62,9 +56,7 @@
                 "description": "If true, the item is in selected state.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -73,7 +65,7 @@
                 "description": "Submittable string value. The default value is the trimmed text content of the element.",
                 "value": {
                   "type": [
-                    "?"
+                    "string"
                   ]
                 }
               }
@@ -90,9 +82,7 @@
               "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -101,9 +91,7 @@
               "description": "Set tabs disposition. Possible values are `horizontal|vertical`",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -112,9 +100,7 @@
               "description": "The index of the selected tab.",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -137,9 +123,7 @@
                 "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -148,9 +132,7 @@
                 "description": "Set tabs disposition. Possible values are `horizontal|vertical`",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -159,9 +141,7 @@
                 "description": "The index of the selected tab.",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               }
@@ -173,7 +153,7 @@
               },
               {
                 "name": "selected-changed",
-                "description": "Fired when the selection is changed.\nNot fired when used in `multiple` selection mode."
+                "description": "Fired when the `selected` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -77,7 +77,7 @@
             },
             {
               "name": "@selected-changed",
-              "description": "Fired when the selection is changed.\nNot fired when used in `multiple` selection mode.",
+              "description": "Fired when the `selected` property changes.",
               "value": {
                 "kind": "expression"
               }