@vaadin/vaadin-tabs 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-tabs",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-tabs",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-tabs"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-tabs/issues"
+  },
   "main": "vaadin-tabs.js",
   "module": "vaadin-tabs.js",
-  "repository": "vaadin/vaadin-tabs",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-tabs",
@@ -12,35 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-tabs/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-item": "^22.0.0-alpha6",
-    "@vaadin/vaadin-list-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/tabs": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-tab.d.ts

@@ -1,39 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ItemMixin } from '@vaadin/vaadin-item/src/vaadin-item-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Tab } from '@vaadin/tabs/src/vaadin-tab.js';
 
 /**
- * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
- *
- * ```
- *   <vaadin-tab>
- *     Tab 1
- *   </vaadin-tab>
- * ```
- *
- * The following state attributes are available for styling:
- *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `disabled` | Set to a disabled tab | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `selected` | Set when the tab is selected | :host
- * `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/ds/customization/styling-components) documentation.
+ * @deprecated Import `Tab` from `@vaadin/tabs/vaadin-tab` instead.
  */
-declare class TabElement extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) {
-  _onKeyup(event: KeyboardEvent): void;
-}
+export type TabElement = Tab;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-tab': TabElement;
-  }
-}
+/**
+ * @deprecated Import `Tab` from `@vaadin/tabs/vaadin-tab` instead.
+ */
+export const TabElement: typeof Tab;
 
-export { TabElement };
+export * from '@vaadin/tabs/src/vaadin-tab.js';

package/src/vaadin-tab.js

@@ -3,71 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ItemMixin } from '@vaadin/vaadin-item/src/vaadin-item-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { Tab } from '@vaadin/tabs/src/vaadin-tab.js';
 
 /**
- * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
- *
- * ```
- *   <vaadin-tab>
- *     Tab 1
- *   </vaadin-tab>
- * ```
- *
- * The following state attributes are available for styling:
- *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `disabled` | Set to a disabled tab | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `selected` | Set when the tab is selected | :host
- * `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/ds/customization/styling-components) documentation.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes ItemMixin
+ * @deprecated Import `Tab` from `@vaadin/tabs/vaadin-tab` instead.
  */
-class TabElement extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) {
-  static get template() {
-    return html`<slot></slot>`;
-  }
+export const TabElement = Tab;
 
-  static get is() {
-    return 'vaadin-tab';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.setAttribute('role', 'tab');
-  }
-
-  /**
-   * @param {!KeyboardEvent} event
-   * @protected
-   */
-  _onKeyup(event) {
-    const willClick = this.hasAttribute('active');
-
-    super._onKeyup(event);
-
-    if (willClick) {
-      const anchor = this.querySelector('a');
-      if (anchor) {
-        anchor.click();
-      }
-    }
-  }
-}
-
-customElements.define(TabElement.is, TabElement);
-
-export { TabElement };
+export * from '@vaadin/tabs/src/vaadin-tab.js';

package/src/vaadin-tabs.d.ts

@@ -1,95 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { ListOrientation } from '@vaadin/vaadin-list-mixin/interfaces';
-
 /**
- * Fired when the `items` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export type TabsItemsChangedEvent = CustomEvent<{ value: Array<Element> }>;
+import { Tabs } from '@vaadin/tabs/src/vaadin-tabs.js';
 
 /**
- * Fired when the `selected` property changes.
+ * @deprecated Import `Tabs` from `@vaadin/tabs` instead.
  */
-export type TabsSelectedChangedEvent = CustomEvent<{ value: number }>;
-
-export interface TabsElementEventMap {
-  'items-changed': TabsItemsChangedEvent;
-
-  'selected-changed': TabsSelectedChangedEvent;
-}
-
-export interface TabsEventMap extends HTMLElementEventMap, TabsElementEventMap {}
+export type TabsElement = Tabs;
 
 /**
- * `<vaadin-tabs>` is a Web Component for easy switching between different views.
- *
- * ```
- *   <vaadin-tabs selected="4">
- *     <vaadin-tab>Page 1</vaadin-tab>
- *     <vaadin-tab>Page 2</vaadin-tab>
- *     <vaadin-tab>Page 3</vaadin-tab>
- *     <vaadin-tab>Page 4</vaadin-tab>
- *   </vaadin-tabs>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name         | Description
- * ------------------|--------------------------------------
- * `back-button`     | Button for moving the scroll back
- * `tabs`            | The tabs container
- * `forward-button`  | Button for moving the scroll forward
- *
- * The following state attributes are available for styling:
- *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `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/ds/customization/styling-components) documentation.
- *
- * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
- * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
+ * @deprecated Import `Tabs` from `@vaadin/tabs` instead.
  */
-declare class TabsElement extends ElementMixin(ListMixin(ThemableMixin(HTMLElement))) {
-  readonly _scrollerElement: HTMLElement;
-
-  /**
-   * The index of the selected tab.
-   */
-  selected: number | null | undefined;
-
-  /**
-   * Set tabs disposition. Possible values are `horizontal|vertical`
-   */
-  orientation: ListOrientation;
-
-  readonly _scrollOffset: number;
-
-  addEventListener<K extends keyof TabsEventMap>(
-    type: K,
-    listener: (this: TabsElement, ev: TabsEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof TabsEventMap>(
-    type: K,
-    listener: (this: TabsElement, ev: TabsEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-tabs': TabsElement;
-  }
-}
+export const TabsElement: typeof Tabs;
 
-export { TabsElement };
+export * from '@vaadin/tabs/src/vaadin-tabs.js';

package/src/vaadin-tabs.js

@@ -3,238 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import './vaadin-tab.js';
+import { Tabs } from '@vaadin/tabs/src/vaadin-tabs.js';
 
 /**
- * `<vaadin-tabs>` is a Web Component for easy switching between different views.
- *
- * ```
- *   <vaadin-tabs selected="4">
- *     <vaadin-tab>Page 1</vaadin-tab>
- *     <vaadin-tab>Page 2</vaadin-tab>
- *     <vaadin-tab>Page 3</vaadin-tab>
- *     <vaadin-tab>Page 4</vaadin-tab>
- *   </vaadin-tabs>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name         | Description
- * ------------------|--------------------------------------
- * `back-button`     | Button for moving the scroll back
- * `tabs`            | The tabs container
- * `forward-button`  | Button for moving the scroll forward
- *
- * The following state attributes are available for styling:
- *
- * Attribute  | Description | Part name
- * -----------|-------------|------------
- * `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/ds/customization/styling-components) documentation.
- *
- * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
- * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ListMixin
- * @mixes ThemableMixin
+ * @deprecated Import `Tabs` from `@vaadin/tabs` instead.
  */
-class TabsElement extends ElementMixin(
-  ListMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))
-) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
+export const TabsElement = Tabs;
 
-        :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: '◀';
-        }
-
-        [part='forward-button']::after {
-          content: '▶';
-        }
-
-        :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: '▶';
-        }
-
-        :host([dir='rtl']) [part='forward-button']::after {
-          content: '◀';
-        }
-      </style>
-      <div on-click="_scrollBack" part="back-button"></div>
-
-      <div id="scroll" part="tabs">
-        <slot></slot>
-      </div>
-
-      <div on-click="_scrollForward" part="forward-button"></div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-tabs';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Set tabs disposition. Possible values are `horizontal|vertical`
-       * @type {!ListOrientation}
-       */
-      orientation: {
-        value: 'horizontal',
-        type: String
-      },
-
-      /**
-       * The index of the selected tab.
-       */
-      selected: {
-        value: 0,
-        type: Number
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_updateOverflow(items.*)'];
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener('iron-resize', () => this._updateOverflow());
-    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();
-    });
-  }
-
-  /** @private */
-  _scrollForward() {
-    this._scroll(-this.__direction * this._scrollOffset);
-  }
-
-  /** @private */
-  _scrollBack() {
-    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);
-    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) => {
-        return matched === 'start' ? 'end' : 'start';
-      });
-    }
-
-    overflow ? this.setAttribute('overflow', overflow.trim()) : this.removeAttribute('overflow');
-  }
-}
-
-customElements.define(TabsElement.is, TabsElement);
-
-export { TabsElement };
+export * from '@vaadin/tabs/src/vaadin-tabs.js';

package/theme/lumo/vaadin-tab.js

@@ -1,2 +1 @@
-import './vaadin-tab-styles.js';
-import '../../src/vaadin-tab.js';
+import '@vaadin/tabs/theme/lumo/vaadin-tab.js';

package/theme/lumo/vaadin-tabs.js

@@ -1,3 +1 @@
-import './vaadin-tab.js';
-import './vaadin-tabs-styles.js';
-import '../../src/vaadin-tabs.js';
+import '@vaadin/tabs/theme/lumo/vaadin-tabs.js';

package/theme/material/vaadin-tab.js

@@ -1,2 +1 @@
-import './vaadin-tab-styles.js';
-import '../../src/vaadin-tab.js';
+import '@vaadin/tabs/theme/material/vaadin-tab.js';

package/theme/material/vaadin-tabs.js

@@ -1,3 +1 @@
-import './vaadin-tab.js';
-import './vaadin-tabs-styles.js';
-import '../../src/vaadin-tabs.js';
+import '@vaadin/tabs/theme/material/vaadin-tabs.js';

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

@@ -1,235 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-
-registerStyles(
-  'vaadin-tab',
-  css`
-    :host {
-      box-sizing: border-box;
-      padding: 0.5rem 0.75rem;
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-m);
-      line-height: var(--lumo-line-height-xs);
-      font-weight: 500;
-      opacity: 1;
-      color: var(--lumo-contrast-60pct);
-      transition: 0.15s color, 0.2s transform;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      position: relative;
-      cursor: var(--lumo-clickable-cursor);
-      transform-origin: 50% 100%;
-      outline: none;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      overflow: hidden;
-      min-width: var(--lumo-size-m);
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      user-select: none;
-    }
-
-    :host(:not([orientation='vertical'])) {
-      text-align: center;
-    }
-
-    :host([orientation='vertical']) {
-      transform-origin: 0% 50%;
-      padding: 0.25rem 1rem;
-      min-height: var(--lumo-size-m);
-      min-width: 0;
-    }
-
-    :host(:hover),
-    :host([focus-ring]) {
-      color: var(--lumo-body-text-color);
-    }
-
-    :host([selected]) {
-      color: var(--lumo-primary-text-color);
-      transition: 0.6s color;
-    }
-
-    :host([active]:not([selected])) {
-      color: var(--lumo-primary-text-color);
-      transition-duration: 0.1s;
-    }
-
-    :host::before,
-    :host::after {
-      content: '';
-      position: absolute;
-      display: var(--_lumo-tab-marker-display, block);
-      bottom: 0;
-      left: 50%;
-      width: var(--lumo-size-s);
-      height: 2px;
-      background-color: var(--lumo-contrast-60pct);
-      border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
-      transform: translateX(-50%) scale(0);
-      transform-origin: 50% 100%;
-      transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
-      will-change: transform;
-    }
-
-    :host([selected])::before,
-    :host([selected])::after {
-      background-color: var(--lumo-primary-color);
-    }
-
-    :host([orientation='vertical'])::before,
-    :host([orientation='vertical'])::after {
-      left: 0;
-      bottom: 50%;
-      transform: translateY(50%) scale(0);
-      width: 2px;
-      height: var(--lumo-size-xs);
-      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
-      transform-origin: 100% 50%;
-    }
-
-    :host::after {
-      box-shadow: 0 0 0 4px var(--lumo-primary-color);
-      opacity: 0.15;
-      transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
-    }
-
-    :host([selected])::before,
-    :host([selected])::after {
-      transform: translateX(-50%) scale(1);
-      transition-timing-function: cubic-bezier(0.12, 0.32, 0.54, 1.5);
-    }
-
-    :host([orientation='vertical'][selected])::before,
-    :host([orientation='vertical'][selected])::after {
-      transform: translateY(50%) scale(1);
-    }
-
-    :host([selected]:not([active]))::after {
-      opacity: 0;
-    }
-
-    :host(:not([orientation='vertical'])) ::slotted(a[href]) {
-      justify-content: center;
-    }
-
-    :host ::slotted(a) {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      height: 100%;
-      margin: -0.5rem -0.75rem;
-      padding: 0.5rem 0.75rem;
-      outline: none;
-
-      /*
-          Override the CSS inherited from \`lumo-color\` and \`lumo-typography\`.
-          Note: \`!important\` is needed because of the \`:slotted\` specificity.
-        */
-      text-decoration: none !important;
-      color: inherit !important;
-    }
-
-    :host ::slotted(vaadin-icon),
-    :host ::slotted(iron-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:']) {
-      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) {
-      margin-left: 0;
-    }
-
-    :host(:not([dir='rtl'])) ::slotted(vaadin-icon:last-child),
-    :host(:not([dir='rtl'])) ::slotted(iron-icon:last-child) {
-      margin-right: 0;
-    }
-
-    :host([theme~='icon-on-top']) {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-around;
-      text-align: center;
-      padding-bottom: 0.5rem;
-      padding-top: 0.25rem;
-    }
-
-    :host([theme~='icon-on-top']) ::slotted(a) {
-      flex-direction: column;
-      align-items: center;
-      margin-top: -0.25rem;
-      padding-top: 0.25rem;
-    }
-
-    :host([theme~='icon-on-top']) ::slotted(vaadin-icon),
-    :host([theme~='icon-on-top']) ::slotted(iron-icon) {
-      margin: 0;
-    }
-
-    /* Disabled */
-
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 1;
-      color: var(--lumo-disabled-text-color);
-    }
-
-    /* Focus-ring */
-
-    :host([focus-ring]) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-      border-radius: var(--lumo-border-radius-m);
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl'])::before,
-    :host([dir='rtl'])::after {
-      left: auto;
-      right: 50%;
-      transform: translateX(50%) scale(0);
-    }
-
-    :host([dir='rtl'][selected]:not([orientation='vertical']))::before,
-    :host([dir='rtl'][selected]:not([orientation='vertical']))::after {
-      transform: translateX(50%) scale(1);
-    }
-
-    :host([dir='rtl']) ::slotted(vaadin-icon:first-child),
-    :host([dir='rtl']) ::slotted(iron-icon:first-child) {
-      margin-right: 0;
-    }
-
-    :host([dir='rtl']) ::slotted(vaadin-icon:last-child),
-    :host([dir='rtl']) ::slotted(iron-icon:last-child) {
-      margin-left: 0;
-    }
-
-    :host([orientation='vertical'][dir='rtl']) {
-      transform-origin: 100% 50%;
-    }
-
-    :host([dir='rtl'][orientation='vertical'])::before,
-    :host([dir='rtl'][orientation='vertical'])::after {
-      left: auto;
-      right: 0;
-      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
-      transform-origin: 0% 50%;
-    }
-  `,
-  { moduleId: 'lumo-tab' }
-);

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

@@ -1,247 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-
-registerStyles(
-  'vaadin-tabs',
-  css`
-    :host {
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    :host(:not([orientation='vertical'])) {
-      box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
-      position: relative;
-      min-height: var(--lumo-size-l);
-    }
-
-    :host([orientation='horizontal']) [part='tabs'] ::slotted(vaadin-tab:not([theme~='icon-on-top'])) {
-      justify-content: center;
-    }
-
-    :host([orientation='vertical']) {
-      box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
-    }
-
-    :host([orientation='horizontal']) [part='tabs'] {
-      margin: 0 0.75rem;
-    }
-
-    :host([orientation='vertical']) [part='tabs'] {
-      width: 100%;
-      margin: 0.5rem 0;
-    }
-
-    [part='forward-button'],
-    [part='back-button'] {
-      position: absolute;
-      z-index: 1;
-      font-family: lumo-icons;
-      color: var(--lumo-tertiary-text-color);
-      font-size: var(--lumo-icon-size-m);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.5em;
-      height: 100%;
-      transition: 0.2s opacity;
-      top: 0;
-    }
-
-    [part='forward-button']:hover,
-    [part='back-button']:hover {
-      color: inherit;
-    }
-
-    :host(:not([dir='rtl'])) [part='forward-button'] {
-      right: 0;
-    }
-
-    [part='forward-button']::after {
-      content: var(--lumo-icons-angle-right);
-    }
-
-    [part='back-button']::after {
-      content: var(--lumo-icons-angle-left);
-    }
-
-    /* Tabs overflow */
-
-    [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: none;
-      -webkit-mask-image: var(--_lumo-tabs-overflow-mask-image);
-      mask-image: var(--_lumo-tabs-overflow-mask-image);
-    }
-
-    /* Horizontal tabs overflow */
-
-    /* Both ends overflowing */
-    :host([overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(
-        90deg,
-        transparent 2em,
-        #000 4em,
-        #000 calc(100% - 4em),
-        transparent calc(100% - 2em)
-      );
-    }
-
-    /* End overflowing */
-    :host([overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
-    }
-
-    /* Start overflowing */
-    :host([overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
-    }
-
-    /* Vertical tabs overflow */
-
-    /* Both ends overflowing */
-    :host([overflow~='start'][overflow~='end'][orientation='vertical']) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
-    }
-
-    /* End overflowing */
-    :host([overflow~='end'][orientation='vertical']) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
-    }
-
-    /* Start overflowing */
-    :host([overflow~='start'][orientation='vertical']) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
-    }
-
-    :host [part='tabs'] ::slotted(:not(vaadin-tab)) {
-      margin-left: var(--lumo-space-m);
-    }
-
-    /* Centered */
-
-    :host([theme~='centered'][orientation='horizontal']) [part='tabs'] {
-      justify-content: center;
-    }
-
-    /* Small */
-
-    :host([theme~='small']),
-    :host([theme~='small']) [part='tabs'] {
-      min-height: var(--lumo-size-m);
-    }
-
-    :host([theme~='small']) [part='tabs'] ::slotted(vaadin-tab) {
-      font-size: var(--lumo-font-size-s);
-    }
-
-    /* Minimal */
-
-    :host([theme~='minimal']) {
-      box-shadow: none;
-      --_lumo-tab-marker-display: none;
-    }
-
-    /* Hide-scroll-buttons */
-
-    :host([theme~='hide-scroll-buttons']) [part='back-button'],
-    :host([theme~='hide-scroll-buttons']) [part='forward-button'] {
-      display: none;
-    }
-
-    /* prettier-ignore */
-    :host([theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(
-        90deg,
-        transparent,
-        #000 2em,
-        #000 calc(100% - 2em),
-        transparent 100%
-      );
-    }
-
-    :host([theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
-    }
-
-    :host([theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
-    }
-
-    /* Equal-width tabs */
-    :host([theme~='equal-width-tabs']) {
-      flex: auto;
-    }
-
-    :host([theme~='equal-width-tabs']) [part='tabs'] ::slotted(vaadin-tab) {
-      flex: 1 0 0%;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part='forward-button']::after {
-      content: var(--lumo-icons-angle-left);
-    }
-
-    :host([dir='rtl']) [part='back-button']::after {
-      content: var(--lumo-icons-angle-right);
-    }
-
-    :host([orientation='vertical'][dir='rtl']) {
-      box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
-    }
-
-    :host([dir='rtl']) [part='forward-button'] {
-      left: 0;
-    }
-
-    :host([dir='rtl']) [part='tabs'] ::slotted(:not(vaadin-tab)) {
-      margin-left: 0;
-      margin-right: var(--lumo-space-m);
-    }
-
-    /* Both ends overflowing */
-    :host([dir='rtl'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(
-        -90deg,
-        transparent 2em,
-        #000 4em,
-        #000 calc(100% - 4em),
-        transparent calc(100% - 2em)
-      );
-    }
-
-    /* End overflowing */
-    :host([dir='rtl'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
-    }
-
-    /* Start overflowing */
-    :host([dir='rtl'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
-    }
-
-    :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
-      [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(
-        -90deg,
-        transparent,
-        #000 2em,
-        #000 calc(100% - 2em),
-        transparent 100%
-      );
-    }
-
-    :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
-    }
-
-    :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
-      --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
-    }
-  `,
-  { moduleId: 'lumo-tabs' }
-);

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

@@ -1,143 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-
-registerStyles(
-  'vaadin-tab',
-  css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 0;
-      flex-grow: 1;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      min-width: 90px;
-      padding: 12px 16px;
-      box-sizing: border-box;
-      font-family: var(--material-font-family);
-      font-size: var(--material-button-font-size);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      white-space: nowrap;
-      min-height: 48px;
-      line-height: 1.2;
-      font-weight: 500;
-      color: var(--material-secondary-text-color);
-      overflow: hidden;
-      position: relative;
-      cursor: pointer;
-      outline: none;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      transition: box-shadow 0.3s;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    /* do not prevent click on slotted links */
-    :host::before,
-    :host::after {
-      pointer-events: none;
-    }
-
-    :host::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: var(--material-primary-color);
-      opacity: 0;
-      transition: opacity 0.1s linear;
-    }
-
-    :host(:hover)::before {
-      opacity: 0.04;
-    }
-
-    :host([focus-ring])::before {
-      opacity: 0.1;
-    }
-
-    :host([selected]) {
-      color: var(--material-primary-text-color);
-      box-shadow: inset 0 -2px 0 0 var(--material-primary-color);
-    }
-
-    :host([orientation='vertical'][selected]) {
-      box-shadow: inset 2px 0 0 0 var(--material-primary-color);
-    }
-
-    /* Ripple */
-
-    :host::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      background-color: var(--material-primary-color);
-      opacity: 0;
-      transition: transform 0s cubic-bezier(0.05, 0.8, 0.5, 1), opacity 0s linear;
-    }
-
-    :host([focused]:not([focus-ring]))::after,
-    :host([focused][active])::after,
-    :host([focus-ring][selected])::after {
-      transform: translate(-50%, -50%) scale(3);
-      opacity: 0;
-      transition-duration: 2s, 0.6s;
-    }
-
-    :host([active]:not([selected]))::after {
-      opacity: 0.2;
-      transition-duration: 2s, 0s;
-    }
-
-    /* Disabled */
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 1;
-      color: var(--material-disabled-text-color);
-    }
-
-    :host ::slotted(a) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      margin: -12px -16px;
-      padding: 12px 16px;
-      text-decoration: none;
-      color: inherit;
-      outline: none;
-    }
-
-    /* Touch device adjustments */
-    @media (pointer: coarse) {
-      :host(:hover)::before {
-        display: none;
-      }
-    }
-
-    /* Small space between icon and label */
-    ::slotted(vaadin-icon:not(:only-child)),
-    ::slotted(iron-icon:not(:only-child)) {
-      margin-bottom: 8px;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl'][orientation='vertical'][selected]) {
-      box-shadow: inset -2px 0 0 0 var(--material-primary-color);
-    }
-  `,
-  { moduleId: 'material-tab' }
-);

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

@@ -1,91 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/color.js';
-
-registerStyles(
-  'vaadin-tabs',
-  css`
-    :host {
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    :host {
-      display: flex;
-      flex-shrink: 0;
-    }
-
-    /* Hide scroll buttons when no needed, and on touch devices */
-
-    :host(:not([overflow])) [part='forward-button'],
-    :host(:not([overflow])) [part='back-button'] {
-      display: none;
-    }
-
-    @media (pointer: coarse) {
-      [part='back-button'],
-      [part='forward-button'] {
-        display: none !important;
-      }
-    }
-
-    [part='forward-button'],
-    [part='back-button'] {
-      font-family: material-icons;
-      color: var(--material-secondary-text-color);
-      font-size: 24px;
-      display: flex;
-      flex-shrink: 0;
-      flex-grow: 0;
-      align-items: center;
-      justify-content: center;
-      width: 48px;
-      height: 100%;
-      transition: 0.2s opacity;
-      top: 0;
-    }
-
-    [part='forward-button']:hover,
-    [part='back-button']:hover {
-      color: inherit;
-    }
-
-    :host(:not([dir='rtl'])) [part='forward-button'] {
-      right: 0;
-    }
-
-    [part='forward-button']::after {
-      content: var(--material-icons-chevron-right);
-    }
-
-    [part='back-button']::after {
-      content: var(--material-icons-chevron-left);
-    }
-
-    :host([overflow]) [part='tabs']::after {
-      content: '';
-      display: flex;
-      flex-shrink: 0;
-      width: 32px;
-    }
-
-    /* Fixed width tabs */
-    :host([theme~='fixed']) [part='tabs'] ::slotted(vaadin-tab) {
-      flex-basis: 0.0001px;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part='forward-button'] {
-      left: 0;
-    }
-
-    :host([dir='rtl']) [part='forward-button']::after {
-      content: var(--material-icons-chevron-left);
-    }
-
-    :host([dir='rtl']) [part='back-button']::after {
-      content: var(--material-icons-chevron-right);
-    }
-  `,
-  { moduleId: 'material-tabs' }
-);