@vaadin/tabs 24.1.1 → 24.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "24.1.1",
+  "version": "24.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,12 +36,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.1",
-    "@vaadin/component-base": "~24.1.1",
-    "@vaadin/item": "~24.1.1",
-    "@vaadin/vaadin-lumo-styles": "~24.1.1",
-    "@vaadin/vaadin-material-styles": "~24.1.1",
-    "@vaadin/vaadin-themable-mixin": "~24.1.1"
+    "@vaadin/a11y-base": "24.2.0-alpha1",
+    "@vaadin/component-base": "24.2.0-alpha1",
+    "@vaadin/item": "24.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c3a3d904885bd37ebb07a84b09617a340b4fab7e"
+  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
 }

package/src/vaadin-tab.d.ts

@@ -28,7 +28,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `active` | Set when mousedown or enter/spacebar pressed | :host
  * `orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(HTMLElement)))) {}
 

package/src/vaadin-tab.js

@@ -30,7 +30,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `active` | Set when mousedown or enter/spacebar pressed | :host
  * `orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @extends HTMLElement
  * @mixes ControllerMixin

package/src/vaadin-tabs.d.ts

@@ -57,7 +57,7 @@ export interface TabsEventMap extends HTMLElementEventMap, TabsCustomEventMap {}
  * `orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host
  * `overflow` | It's set to `start`, `end`, none or both. | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.

package/src/vaadin-tabs.js

@@ -41,7 +41,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host
  * `overflow` | It's set to `start`, `end`, none or both. | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
@@ -236,12 +236,90 @@ class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerEleme
 
   /** @private */
   _scrollForward() {
-    this._scroll(-this.__direction * this._scrollOffset);
+    // 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]
+      .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;
+    } 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);
+    }
+    this._scroll(scrollOffset);
   }
 
   /** @private */
   _scrollBack() {
-    this._scroll(this.__direction * this._scrollOffset);
+    // 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;
+    }
+    // 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);
+    }
+    this._scroll(scrollOffset);
+  }
+
+  /** @private */
+  _isItemVisible(item, forwardButtonVisibleWidth, backButtonVisibleWidth, scrollerRect) {
+    if (this._vertical) {
+      throw new Error('Visibility check is only supported for horizontal tabs.');
+    }
+    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;
+    }
+    return navigationButton.clientWidth;
   }
 
   /** @private */

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

@@ -45,10 +45,7 @@ registerStyles(
     :host::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       background-color: var(--material-primary-color);
       opacity: 0;
       transition: opacity 0.1s linear;

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "24.1.1",
+  "version": "24.2.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tab",
-          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "selected",
@@ -57,7 +57,7 @@
         },
         {
           "name": "vaadin-tabs",
-          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tabs",
-  "version": "24.1.1",
+  "version": "24.2.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tab",
-          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.\n\n```\n  <vaadin-tab>\n    Tab 1\n  </vaadin-tab>\n```\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -37,7 +37,7 @@
         },
         {
           "name": "vaadin-tabs",
-          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n  <vaadin-tabs selected=\"4\">\n    <vaadin-tab>Page 1</vaadin-tab>\n    <vaadin-tab>Page 2</vaadin-tab>\n    <vaadin-tab>Page 3</vaadin-tab>\n    <vaadin-tab>Page 4</vaadin-tab>\n  </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|--------------------------------------\n`back-button`     | Button for moving the scroll back\n`tabs`            | The tabs container\n`forward-button`  | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute  | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {