@vaadin/tabs 24.3.0-alpha1 → 24.3.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabs",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,22 +35,23 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/item": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
+    "@vaadin/a11y-base": "24.3.0-alpha11",
+    "@vaadin/component-base": "24.3.0-alpha11",
+    "@vaadin/item": "24.3.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "123cf569a1b6ef6f4ef5fe8e60cb8d988699b98c"
 }

package/src/vaadin-tab-mixin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ActiveMixinClass } from '@vaadin/a11y-base/src/active-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { ItemMixinClass } from '@vaadin/item/src/vaadin-item-mixin.js';
+
+export declare function TabMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ActiveMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<ItemMixinClass> &
+  T;

package/src/vaadin-tab-mixin.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes ItemMixin
+ */
+export const TabMixin = (superClass) =>
+  class TabMixinClass extends ItemMixin(superClass) {
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.setAttribute('role', 'tab');
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * to handle clicking anchors inside the tabs.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyUp(event) {
+      const willClick = this.hasAttribute('active');
+
+      super._onKeyUp(event);
+
+      if (willClick) {
+        const anchor = this.querySelector('a');
+        if (anchor) {
+          anchor.click();
+        }
+      }
+    }
+  };

package/src/vaadin-tab-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const tabStyles: CSSResult;

package/src/vaadin-tab-styles.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const tabStyles = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  @media (forced-colors: active) {
+    :host([focused]) {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([selected]) {
+      border-bottom: 2px solid;
+    }
+  }
+`;

package/src/vaadin-tab.js

@@ -8,8 +8,11 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TabMixin } from './vaadin-tab-mixin.js';
+import { tabStyles } from './vaadin-tab-styles.js';
+
+registerStyles('vaadin-tab', tabStyles, { moduleId: 'vaadin-tab-styles' });
 
 /**
  * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
@@ -38,30 +41,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes ItemMixin
+ * @mixes TabMixin
  */
-class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(PolymerElement)))) {
+class Tab extends ElementMixin(ThemableMixin(TabMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        @media (forced-colors: active) {
-          :host([focused]) {
-            outline: 1px solid;
-            outline-offset: -1px;
-          }
-          :host([selected]) {
-            border-bottom: 2px solid;
-          }
-        }
-      </style>
       <slot></slot>
       <slot name="tooltip"></slot>
     `;
@@ -74,31 +58,10 @@ class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(PolymerEl
   /** @protected */
   ready() {
     super.ready();
-    this.setAttribute('role', 'tab');
 
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
-
-  /**
-   * Override an event listener from `KeyboardMixin`
-   * to handle clicking anchors inside the tabs.
-   * @param {!KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyUp(event) {
-    const willClick = this.hasAttribute('active');
-
-    super._onKeyUp(event);
-
-    if (willClick) {
-      const anchor = this.querySelector('a');
-      if (anchor) {
-        anchor.click();
-      }
-    }
-  }
 }
 
 defineCustomElement(Tab);

package/src/vaadin-tabs-mixin.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { ListMixinClass } from '@vaadin/a11y-base/src/list-mixin.js';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+
+export declare function TabsMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<ListMixinClass> &
+  Constructor<ResizeMixinClass> &
+  Constructor<TabsMixinClass> &
+  T;
+
+export declare class TabsMixinClass {
+  /**
+   * The index of the selected tab.
+   */
+  selected: number | null | undefined;
+
+  /**
+   * Set tabs disposition. Possible values are `horizontal|vertical`
+   */
+  orientation: TabsOrientation;
+}

package/src/vaadin-tabs-mixin.js

@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+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() {
+      return {
+        /**
+         * Set tabs disposition. Possible values are `horizontal|vertical`
+         * @type {!TabsOrientation}
+         */
+        orientation: {
+          value: 'horizontal',
+          type: String,
+        },
+
+        /**
+         * The index of the selected tab.
+         */
+        selected: {
+          value: 0,
+          type: Number,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__tabsItemsChanged(items)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__itemsResizeObserver = new ResizeObserver(() => {
+        setTimeout(() => this._updateOverflow());
+      });
+    }
+
+    /**
+     * @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();
+
+      this._scrollerElement.addEventListener('scroll', () => this._updateOverflow());
+
+      this.setAttribute('role', 'tablist');
+
+      // Wait for the vaadin-tab elements to upgrade and get styled
+      afterNextRender(this, () => {
+        this._updateOverflow();
+      });
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _onResize() {
+      this._updateOverflow();
+    }
+
+    /** @private */
+    __tabsItemsChanged(items) {
+      // Disconnected to unobserve any removed items
+      this.__itemsResizeObserver.disconnect();
+
+      // Observe current items
+      (items || []).forEach((item) => {
+        this.__itemsResizeObserver.observe(item);
+      });
+
+      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');
+      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);
+    }
+
+    /** @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;
+      }
+      // 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 */
+    _updateOverflow() {
+      const scrollPosition = this._vertical
+        ? this._scrollerElement.scrollTop
+        : getNormalizedScrollLeft(this._scrollerElement, this.getAttribute('dir'));
+      const scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
+
+      // Note that we are not comparing floored scrollPosition to be greater than zero here, which would make a natural
+      // sense, but to be greater than one intentionally. There is a known bug in Chromium browsers on Linux/Mac
+      // (https://bugs.chromium.org/p/chromium/issues/detail?id=1123301), which returns invalid value of scrollLeft when
+      // text direction is RTL. The value is off by one pixel in that case. Comparing scrollPosition to be greater than
+      // one on the following line is a workaround for that bug. Comparing scrollPosition to be greater than one means,
+      // that the left overflow and left arrow will be displayed "one pixel" later than normal. In other words, if the tab
+      // scroller element is scrolled just by 1px, the overflow is not yet showing.
+      let overflow = Math.floor(scrollPosition) > 1 ? 'start' : '';
+      if (Math.ceil(scrollPosition) < Math.ceil(scrollSize - this._scrollOffset)) {
+        overflow += ' end';
+      }
+
+      if (this.__direction === 1) {
+        overflow = overflow.replace(/start|end/giu, (matched) => {
+          return matched === 'start' ? 'end' : 'start';
+        });
+      }
+
+      if (overflow) {
+        this.setAttribute('overflow', overflow.trim());
+      } else {
+        this.removeAttribute('overflow');
+      }
+    }
+  };

package/src/vaadin-tabs-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const tabsStyles: CSSResult;

package/src/vaadin-tabs-styles.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const tabsStyles = css`
+  :host {
+    display: flex;
+    align-items: center;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    display: block;
+  }
+
+  :host([orientation='horizontal']) [part='tabs'] {
+    flex-grow: 1;
+    display: flex;
+    align-self: stretch;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
+         and is no longer guaranteed to work:
+         https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
+  @-moz-document url-prefix() {
+    :host([orientation='horizontal']) [part='tabs'] {
+      overflow: hidden;
+    }
+  }
+
+  :host([orientation='horizontal']) [part='tabs']::-webkit-scrollbar {
+    display: none;
+  }
+
+  :host([orientation='vertical']) [part='tabs'] {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [part='back-button'],
+  [part='forward-button'] {
+    pointer-events: none;
+    opacity: 0;
+    cursor: default;
+  }
+
+  :host([overflow~='start']) [part='back-button'],
+  :host([overflow~='end']) [part='forward-button'] {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
+  [part='back-button']::after {
+    content: '\\25C0';
+  }
+
+  [part='forward-button']::after {
+    content: '\\25B6';
+  }
+
+  :host([orientation='vertical']) [part='back-button'],
+  :host([orientation='vertical']) [part='forward-button'] {
+    display: none;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='back-button']::after {
+    content: '\\25B6';
+  }
+
+  :host([dir='rtl']) [part='forward-button']::after {
+    content: '\\25C0';
+  }
+`;

package/src/vaadin-tabs.d.ts

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TabsMixin, TabsOrientation } from './vaadin-tabs-mixin.js';
 
-export type TabsOrientation = 'horizontal' | 'vertical';
+export { TabsOrientation };
 
 /**
  * Fired when the `items` property changes.
@@ -62,17 +61,7 @@ export interface TabsEventMap extends HTMLElementEventMap, TabsCustomEventMap {}
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
  */
-declare class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * The index of the selected tab.
-   */
-  selected: number | null | undefined;
-
-  /**
-   * Set tabs disposition. Possible values are `horizontal|vertical`
-   */
-  orientation: TabsOrientation;
-
+declare class Tabs extends TabsMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof TabsEventMap>(
     type: K,
     listener: (this: Tabs, ev: TabsEventMap[K]) => void,

package/src/vaadin-tabs.js

@@ -4,14 +4,14 @@
  * 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 { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TabsMixin } from './vaadin-tabs-mixin.js';
+import { tabsStyles } from './vaadin-tabs-styles.js';
+
+registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'vaadin-tabs-styles' });
 
 /**
  * `<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.
@@ -50,90 +50,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes ListMixin
+ * @mixes TabsMixin
  * @mixes ThemableMixin
- * @mixes ResizeMixin
  */
-class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerElement)))) {
+class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([orientation='vertical']) {
-          display: block;
-        }
-
-        :host([orientation='horizontal']) [part='tabs'] {
-          flex-grow: 1;
-          display: flex;
-          align-self: stretch;
-          overflow-x: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
-         and is no longer guaranteed to work:
-         https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
-        @-moz-document url-prefix() {
-          :host([orientation='horizontal']) [part='tabs'] {
-            overflow: hidden;
-          }
-        }
-
-        :host([orientation='horizontal']) [part='tabs']::-webkit-scrollbar {
-          display: none;
-        }
-
-        :host([orientation='vertical']) [part='tabs'] {
-          height: 100%;
-          overflow-y: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [part='back-button'],
-        [part='forward-button'] {
-          pointer-events: none;
-          opacity: 0;
-          cursor: default;
-        }
-
-        :host([overflow~='start']) [part='back-button'],
-        :host([overflow~='end']) [part='forward-button'] {
-          pointer-events: auto;
-          opacity: 1;
-        }
-
-        [part='back-button']::after {
-          content: '\\25C0';
-        }
-
-        [part='forward-button']::after {
-          content: '\\25B6';
-        }
-
-        :host([orientation='vertical']) [part='back-button'],
-        :host([orientation='vertical']) [part='forward-button'] {
-          display: none;
-        }
-
-        /* RTL specific styles */
-
-        :host([dir='rtl']) [part='back-button']::after {
-          content: '\\25B6';
-        }
-
-        :host([dir='rtl']) [part='forward-button']::after {
-          content: '\\25C0';
-        }
-      </style>
       <div on-click="_scrollBack" part="back-button" aria-hidden="true"></div>
 
       <div id="scroll" part="tabs">
@@ -147,214 +69,6 @@ class Tabs extends ResizeMixin(ElementMixin(ListMixin(ThemableMixin(PolymerEleme
   static get is() {
     return 'vaadin-tabs';
   }
-
-  static get properties() {
-    return {
-      /**
-       * Set tabs disposition. Possible values are `horizontal|vertical`
-       * @type {!TabsOrientation}
-       */
-      orientation: {
-        value: 'horizontal',
-        type: String,
-      },
-
-      /**
-       * The index of the selected tab.
-       */
-      selected: {
-        value: 0,
-        type: Number,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__tabsItemsChanged(items, items.*)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__itemsResizeObserver = new ResizeObserver(() => {
-      setTimeout(() => this._updateOverflow());
-    });
-  }
-
-  /**
-   * @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();
-    this._scrollerElement.addEventListener('scroll', () => this._updateOverflow());
-    this.setAttribute('role', 'tablist');
-
-    // Wait for the vaadin-tab elements to upgrade and get styled
-    afterNextRender(this, () => {
-      this._updateOverflow();
-    });
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _onResize() {
-    this._updateOverflow();
-  }
-
-  /** @private */
-  __tabsItemsChanged(items) {
-    // Disconnected to unobserve any removed items
-    this.__itemsResizeObserver.disconnect();
-
-    // Observe current items
-    (items || []).forEach((item) => {
-      this.__itemsResizeObserver.observe(item);
-    });
-
-    this._updateOverflow();
-  }
-
-  /** @private */
-  _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');
-    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() {
-    // 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 */
-  _updateOverflow() {
-    const scrollPosition = this._vertical
-      ? this._scrollerElement.scrollTop
-      : getNormalizedScrollLeft(this._scrollerElement, this.getAttribute('dir'));
-    const scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
-
-    // Note that we are not comparing floored scrollPosition to be greater than zero here, which would make a natural
-    // sense, but to be greater than one intentionally. There is a known bug in Chromium browsers on Linux/Mac
-    // (https://bugs.chromium.org/p/chromium/issues/detail?id=1123301), which returns invalid value of scrollLeft when
-    // text direction is RTL. The value is off by one pixel in that case. Comparing scrollPosition to be greater than
-    // one on the following line is a workaround for that bug. Comparing scrollPosition to be greater than one means,
-    // that the left overflow and left arrow will be displayed "one pixel" later than normal. In other words, if the tab
-    // scroller element is scrolled just by 1px, the overflow is not yet showing.
-    let overflow = Math.floor(scrollPosition) > 1 ? 'start' : '';
-    if (Math.ceil(scrollPosition) < Math.ceil(scrollSize - this._scrollOffset)) {
-      overflow += ' end';
-    }
-
-    if (this.__direction === 1) {
-      overflow = overflow.replace(/start|end/giu, (matched) => {
-        return matched === 'start' ? 'end' : 'start';
-      });
-    }
-
-    if (overflow) {
-      this.setAttribute('overflow', overflow.trim());
-    } else {
-      this.removeAttribute('overflow');
-    }
-  }
 }
 
 defineCustomElement(Tabs);

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

@@ -31,6 +31,10 @@ registerStyles(
       -webkit-user-select: none;
       -moz-user-select: none;
       user-select: none;
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+      --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     }
 
     :host(:not([orientation='vertical'])) {
@@ -62,12 +66,12 @@ registerStyles(
     }
 
     :host([selected]) {
-      color: var(--lumo-primary-text-color);
+      color: var(--_selection-color-text);
       transition: 0.6s color;
     }
 
     :host([active]:not([selected])) {
-      color: var(--lumo-primary-text-color);
+      color: var(--_selection-color-text);
       transition-duration: 0.1s;
     }
 
@@ -90,7 +94,7 @@ registerStyles(
 
     :host([selected])::before,
     :host([selected])::after {
-      background-color: var(--lumo-primary-color);
+      background-color: var(--_selection-color);
     }
 
     :host([orientation='vertical'])::before,
@@ -105,7 +109,7 @@ registerStyles(
     }
 
     :host::after {
-      box-shadow: 0 0 0 4px var(--lumo-primary-color);
+      box-shadow: 0 0 0 4px var(--_selection-color);
       opacity: 0.15;
       transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
     }
@@ -198,7 +202,7 @@ registerStyles(
     /* Focus-ring */
 
     :host([focus-ring]) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
       border-radius: var(--lumo-border-radius-m);
     }
 

package/web-types.json

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