New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-tabs

Package Overview
Dependencies
Maintainers
16
Versions
257
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-tabs - npm Package Compare versions

Comparing version 4.0.0-alpha3 to 4.0.0-alpha4

110

package.json
{
"name": "@vaadin/vaadin-tabs",
"version": "4.0.0-alpha3",
"version": "4.0.0-alpha4",
"description": "vaadin-tabs",

@@ -13,3 +13,3 @@ "main": "vaadin-tabs.js",

"web-component",
"lit-element"
"polymer"
],

@@ -23,10 +23,25 @@ "author": "Vaadin Ltd",

"files": [
"/vaadin-*.ts",
"/vaadin-*.d.ts",
"/vaadin-*.d.ts.map",
"/vaadin-*.js",
"/vaadin-*.js.map",
"/src/",
"/theme/"
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {

@@ -38,3 +53,3 @@ "hooks": {

"lint-staged": {
"*.ts": [
"*.js": [
"eslint --fix",

@@ -44,48 +59,41 @@ "prettier --write"

},
"scripts": {
"analyze": "wca analyze src/vaadin-tabs.ts --format json --outFile custom-elements.json",
"build": "tsc && replace-in-file \"/(import|from)( '[.]+/)(.*)(?<!.js)(';)/g\" \"\\$1\\$2\\$3.js\\$4\" vaadin-*.{js,d.ts},src/*.{js,d.ts},theme/**/*.{js,d.ts} --isRegex --verbose",
"dist": "rimraf dist && npm run analyze && npm run build && rollup -c rollup.config.js && cp custom-elements.json dist",
"check:version": "magi check-version",
"gemini": "gemini update test/visual",
"lint": "npm-run-all --parallel lint:*",
"lint:css": "stylelint src/*.ts theme/**/*.ts test/*.ts",
"lint:js": "eslint src theme test --ext .ts --ignore-path .gitignore",
"lint:lit": "lit-analyzer src --strict",
"prepublishOnly": "npm run build",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"serve:dist": "es-dev-server --app-index dist/index.html --open",
"start": "es-dev-server --file-extensions .ts --node-resolve --babel --watch --port 3000 --open",
"test": "karma start",
"test:debug": "karma start --single-run false --browsers Firefox",
"test:sauce": "cross-env TEST_PLATFORM=sauce karma start",
"test:visual": "npm run build && gemini test test/visual"
},
"dependencies": {
"@vaadin/element-base": "^0.3.0",
"@vaadin/active-state-mixin": "^0.1.6",
"@vaadin/direction-mixin": "0.1.1",
"@vaadin/disabled-state-mixin": "^0.1.1",
"@vaadin/focus-visible-mixin": "^0.1.4",
"@vaadin/keyboard-direction-mixin": "^0.1.6",
"@vaadin/mixin-utils": "^0.1.0",
"@vaadin/orientation-mixin": "^0.1.2",
"@vaadin/resizable-mixin": "^0.1.1",
"@vaadin/roving-tabindex-mixin": "^0.1.7",
"@vaadin/selected-state-mixin": "^0.1.2",
"@vaadin/selection-in-view-mixin": "^0.1.9",
"@vaadin/single-selection-mixin": "^0.1.6",
"@vaadin/slotted-items-mixin": "^0.1.5",
"@vaadin/themable-element": "^0.2.0",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@polymer/polymer": "^3.0.0",
"@polymer/iron-resizable-behavior": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"@vaadin/vaadin-list-mixin": "^2.5.0",
"@vaadin/vaadin-item": "^3.0.0-alpha1",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-themable-mixin": "^1.5.2",
"lit-element": "^2.3.0",
"lit-html": "^1.0.0",
"tslib": "^1.10.0"
"@vaadin/vaadin-element-mixin": "^2.4.2"
},
"devDependencies": {
"@vaadin/vaadin-component-dev-dependencies": "^4.9.0"
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@web/dev-server": "~0.0.25",
"@web/test-runner": "^0.10.0",
"@web/test-runner-saucelabs": "^0.1.3",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.29.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.7",
"typescript": "^4.1.2"
}
}

37

README.md
# &lt;vaadin-tabs&gt;
[&lt;vaadin-tabs&gt;](https://vaadin.com/components/vaadin-tabs) is a Web Component providing item navigation part of the [Vaadin components](https://vaadin.com/components). It is designed for menu and tab components.
[Live Demo ↗](https://vaadin.com/components/vaadin-tabs/html-examples)

@@ -9,15 +7,11 @@ |

[&lt;vaadin-tabs&gt;](https://vaadin.com/components/vaadin-tabs) is a Web Component providing item navigation part of the [Vaadin components](https://vaadin.com/components). It is designed for menu and tab components.
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-tabs)](https://www.npmjs.com/package/@vaadin/vaadin-tabs)
[![Build Status](https://travis-ci.org/vaadin/vaadin-tabs.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-tabs)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/vaadin/vaadin-tabs)
[![Build Status](https://travis-ci.org/vaadin/vaadin-tabs.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-tabs)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-tabs)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/stars/vaadinvaadin-tabs.svg)](https://vaadin.com/directory/component/vaadinvaadin-tabs)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-tabs)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-tabs.svg)](https://vaadin.com/directory/component/vaadinvaadin-tabs)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
> ⚠️ This is a pre-release version built with [`LitElement`](https://github.com/Polymer/lit-element), part of the [next generation of Vaadin web components](https://vaadin.com/blog/next-generation-vaadin-components).
>
> Looking for Vaadin 14 compatible version? Please see the following branches:
> - [3.0 branch](https://github.com/vaadin/vaadin-tabs/tree/3.0) (latest stable)
> - [3.1 branch](https://github.com/vaadin/vaadin-tabs/tree/3.1) (next minor version with incremental improvements)
```html

@@ -73,6 +67,8 @@ <vaadin-tabs selected="3">

## Running demos and API docs in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-tabs` repository and clone it locally.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. Make sure you have [npm](https://www.npmjs.com/) installed.

@@ -84,14 +80,21 @@

1. You can also open visual tests, for example:
- http://127.0.0.1:3000/test/visual/horizontal-tabs.html
## Running tests from the command line
- When in the `vaadin-tabs` directory, run `npm test`
1. When in the `vaadin-tabs` directory, run `npm test`
- To debug tests in the browser, run `npm run test:debug`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting TypeScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.ts` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
## Big Thanks

@@ -104,3 +107,3 @@

To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.

@@ -107,0 +110,0 @@

43

src/vaadin-tab.d.ts

@@ -1,16 +0,39 @@

import { TabBase } from './vaadin-tab-base.js';
declare const VaadinTab_base: typeof TabBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-tab-mixin").Tab>;
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';
/**
* `<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 [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*/
export declare class VaadinTab extends VaadinTab_base {
static is: string;
static get version(): string;
declare class TabElement extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) {
_onKeyup(event: KeyboardEvent): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-tab': VaadinTab;
}
interface HTMLElementTagNameMap {
'vaadin-tab': TabElement;
}
}
export {};
//# sourceMappingURL=vaadin-tab.d.ts.map
export { TabElement };

86

src/vaadin-tab.js

@@ -1,18 +0,76 @@

import { __decorate } from "tslib";
import { customElement } from 'lit-element';
import { TabBase } from './vaadin-tab-base.js';
import { TabMixin } from './vaadin-tab-mixin.js';
/**
* @license
* Copyright (c) 2020 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';
/**
* `<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 [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @mixes ItemMixin
*/
let VaadinTab = class VaadinTab extends TabMixin(TabBase) {
static get version() {
return '4.0.0-alpha3';
class TabElement extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) {
static get template() {
return html`<slot></slot>`;
}
static get is() {
return 'vaadin-tab';
}
static get version() {
return '4.0.0-alpha4';
}
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();
}
}
};
VaadinTab.is = 'vaadin-tab';
VaadinTab = __decorate([
customElement('vaadin-tab')
], VaadinTab);
export { VaadinTab };
//# sourceMappingURL=vaadin-tab.js.map
}
}
customElements.define(TabElement.is, TabElement);
export { TabElement };

100

src/vaadin-tabs.d.ts

@@ -1,26 +0,92 @@

import { TabsBase } from './vaadin-tabs-base.js';
declare const VaadinTabs_base: typeof TabsBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-tabs-mixin").Tabs>;
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.
*/
export type TabsItemsChanged = CustomEvent<{ value: Array<Element> }>;
/**
* Fired when the `selected` property changes.
*/
export type TabsSelectedChanged = CustomEvent<{ value: number }>;
export interface TabsElementEventMap {
'items-changed': TabsItemsChanged;
'selected-changed': TabsSelectedChanged;
}
export interface TabsEventMap extends HTMLElementEventMap, TabsElementEventMap {}
/**
* `<vaadin-tabs>` is a Web Component for easy switching between different views.
*
* @attr {start | none | both} overflow - Attribute set depending on whether the items fit into viewport.
* ```
* <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>
* ```
*
* @csspart back-button - Button for moving the scroll back
* @csspart forward-button - Button for moving the scroll forward
* @csspart tabs - The tabs container
* ### Styling
*
* @event selected-changed - Fired when the `selected` property changes.
* @event resize - Fired when the element is resized. Non-bubbling.
* 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 [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*/
export declare class VaadinTabs extends VaadinTabs_base {
static is: string;
static get version(): string;
protected _filterItems(): Element[];
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': VaadinTabs;
}
interface HTMLElementTagNameMap {
'vaadin-tabs': TabsElement;
}
}
export {};
//# sourceMappingURL=vaadin-tabs.d.ts.map
export { TabsElement };

259

src/vaadin-tabs.js

@@ -1,31 +0,242 @@

import { __decorate } from "tslib";
import { customElement } from 'lit-element';
import { TabsBase } from './vaadin-tabs-base.js';
import { TabsMixin } from './vaadin-tabs-mixin.js';
import { VaadinTab } from './vaadin-tab.js';
/**
* @license
* Copyright (c) 2020 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';
/**
* `<vaadin-tabs>` is a Web Component for easy switching between different views.
*
* @attr {start | none | both} overflow - Attribute set depending on whether the items fit into viewport.
* ```
* <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>
* ```
*
* @csspart back-button - Button for moving the scroll back
* @csspart forward-button - Button for moving the scroll forward
* @csspart tabs - The tabs container
* ### Styling
*
* @event selected-changed - Fired when the `selected` property changes.
* @event resize - Fired when the element is resized. Non-bubbling.
* 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 [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ListMixin
* @mixes ThemableMixin
*/
let VaadinTabs = class VaadinTabs extends TabsMixin(TabsBase) {
static get version() {
return '4.0.0-alpha3';
class TabsElement extends ElementMixin(
ListMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], 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;
-ms-overflow-style: none;
}
/* 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 version() {
return '4.0.0-alpha4';
}
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';
});
}
_filterItems() {
return Array.from(this.querySelectorAll(VaadinTab.is));
}
};
VaadinTabs.is = 'vaadin-tabs';
VaadinTabs = __decorate([
customElement('vaadin-tabs')
], VaadinTabs);
export { VaadinTabs };
//# sourceMappingURL=vaadin-tabs.js.map
overflow ? this.setAttribute('overflow', overflow.trim()) : this.removeAttribute('overflow');
}
}
customElements.define(TabsElement.is, TabsElement);
export { TabsElement };

233

theme/lumo/vaadin-tab-styles.js

@@ -1,4 +0,229 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { tabStyles } from './vaadin-tab-css.js';
registerStyles('vaadin-tab', tabStyles, { moduleId: 'lumo-tab' });
//# sourceMappingURL=vaadin-tab-styles.js.map
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: pointer;
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;
-ms-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) var(--lumo-border-radius) 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) var(--lumo-border-radius) 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(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(iron-icon[icon^='vaadin:']) {
padding: 0.25rem;
box-sizing: border-box !important;
}
:host(:not([dir='rtl'])) ::slotted(iron-icon:first-child) {
margin-left: 0;
}
: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(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);
}
/* 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(iron-icon:first-child) {
margin-right: 0;
}
: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) 0 0 var(--lumo-border-radius);
transform-origin: 0% 50%;
}
`,
{ moduleId: 'lumo-tab' }
);

1

theme/lumo/vaadin-tab.js
import './vaadin-tab-styles.js';
import '../../src/vaadin-tab.js';
//# sourceMappingURL=vaadin-tab.js.map

251

theme/lumo/vaadin-tabs-styles.js

@@ -1,4 +0,247 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { tabsStyles } from './vaadin-tabs-css.js';
registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'lumo-tabs' });
//# sourceMappingURL=vaadin-tabs-styles.js.map
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' }
);

1

theme/lumo/vaadin-tabs.js
import './vaadin-tab.js';
import './vaadin-tabs-styles.js';
import '../../src/vaadin-tabs.js';
//# sourceMappingURL=vaadin-tabs.js.map

146

theme/material/vaadin-tab-styles.js

@@ -1,4 +0,142 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { tabStyles } from './vaadin-tab-css.js';
registerStyles('vaadin-tab', tabStyles, { moduleId: 'material-tab' });
//# sourceMappingURL=vaadin-tab-styles.js.map
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(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' }
);

1

theme/material/vaadin-tab.js
import './vaadin-tab-styles.js';
import '../../src/vaadin-tab.js';
//# sourceMappingURL=vaadin-tab.js.map

95

theme/material/vaadin-tabs-styles.js

@@ -1,4 +0,91 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { tabsStyles } from './vaadin-tabs-css.js';
registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'material-tabs' });
//# sourceMappingURL=vaadin-tabs-styles.js.map
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' }
);

1

theme/material/vaadin-tabs.js
import './vaadin-tab.js';
import './vaadin-tabs-styles.js';
import '../../src/vaadin-tabs.js';
//# sourceMappingURL=vaadin-tabs.js.map

4

vaadin-tab.d.ts

@@ -1,3 +0,1 @@

import './theme/lumo/vaadin-tab.js';
export { VaadinTab } from './src/vaadin-tab.js';
//# sourceMappingURL=vaadin-tab.d.ts.map
export * from './src/vaadin-tab.js';

3

vaadin-tab.js
import './theme/lumo/vaadin-tab.js';
export { VaadinTab } from './src/vaadin-tab.js';
//# sourceMappingURL=vaadin-tab.js.map
export * from './src/vaadin-tab.js';

4

vaadin-tabs.d.ts

@@ -1,3 +0,1 @@

import './theme/lumo/vaadin-tabs.js';
export { VaadinTabs } from './src/vaadin-tabs.js';
//# sourceMappingURL=vaadin-tabs.d.ts.map
export * from './src/vaadin-tabs.js';

3

vaadin-tabs.js
import './theme/lumo/vaadin-tabs.js';
export { VaadinTabs } from './src/vaadin-tabs.js';
//# sourceMappingURL=vaadin-tabs.js.map
export * from './src/vaadin-tabs.js';
src/vaadin-tab-base.d.ts
src/vaadin-tab-base.d.ts.map
src/vaadin-tab-base.js
src/vaadin-tab-base.js.map
src/vaadin-tab-base.ts
src/vaadin-tab-mixin.d.ts
src/vaadin-tab-mixin.d.ts.map
src/vaadin-tab-mixin.js
src/vaadin-tab-mixin.js.map
src/vaadin-tab-mixin.ts
src/vaadin-tab.d.ts.map
src/vaadin-tab.js.map
src/vaadin-tab.ts
src/vaadin-tabs-base.d.ts
src/vaadin-tabs-base.d.ts.map
src/vaadin-tabs-base.js
src/vaadin-tabs-base.js.map
src/vaadin-tabs-base.ts
src/vaadin-tabs-css.d.ts
src/vaadin-tabs-css.d.ts.map
src/vaadin-tabs-css.js
src/vaadin-tabs-css.js.map
src/vaadin-tabs-css.ts
src/vaadin-tabs-mixin.d.ts
src/vaadin-tabs-mixin.d.ts.map
src/vaadin-tabs-mixin.js
src/vaadin-tabs-mixin.js.map
src/vaadin-tabs-mixin.ts
src/vaadin-tabs.d.ts.map
src/vaadin-tabs.js.map
src/vaadin-tabs.ts
theme/lumo/vaadin-tab-css.d.ts
theme/lumo/vaadin-tab-css.d.ts.map
theme/lumo/vaadin-tab-css.js
theme/lumo/vaadin-tab-css.js.map
theme/lumo/vaadin-tab-css.ts
theme/lumo/vaadin-tab-styles.d.ts
theme/lumo/vaadin-tab-styles.d.ts.map
theme/lumo/vaadin-tab-styles.js.map
theme/lumo/vaadin-tab-styles.ts
theme/lumo/vaadin-tab.d.ts
theme/lumo/vaadin-tab.d.ts.map
theme/lumo/vaadin-tab.js.map
theme/lumo/vaadin-tab.ts
theme/lumo/vaadin-tabs-css.d.ts
theme/lumo/vaadin-tabs-css.d.ts.map
theme/lumo/vaadin-tabs-css.js
theme/lumo/vaadin-tabs-css.js.map
theme/lumo/vaadin-tabs-css.ts
theme/lumo/vaadin-tabs-styles.d.ts
theme/lumo/vaadin-tabs-styles.d.ts.map
theme/lumo/vaadin-tabs-styles.js.map
theme/lumo/vaadin-tabs-styles.ts
theme/lumo/vaadin-tabs.d.ts
theme/lumo/vaadin-tabs.d.ts.map
theme/lumo/vaadin-tabs.js.map
theme/lumo/vaadin-tabs.ts
theme/material/vaadin-tab-css.d.ts
theme/material/vaadin-tab-css.d.ts.map
theme/material/vaadin-tab-css.js
theme/material/vaadin-tab-css.js.map
theme/material/vaadin-tab-css.ts
theme/material/vaadin-tab-styles.d.ts
theme/material/vaadin-tab-styles.d.ts.map
theme/material/vaadin-tab-styles.js.map
theme/material/vaadin-tab-styles.ts
theme/material/vaadin-tab.d.ts
theme/material/vaadin-tab.d.ts.map
theme/material/vaadin-tab.js.map
theme/material/vaadin-tab.ts
theme/material/vaadin-tabs-css.d.ts
theme/material/vaadin-tabs-css.d.ts.map
theme/material/vaadin-tabs-css.js
theme/material/vaadin-tabs-css.js.map
theme/material/vaadin-tabs-css.ts
theme/material/vaadin-tabs-styles.d.ts
theme/material/vaadin-tabs-styles.d.ts.map
theme/material/vaadin-tabs-styles.js.map
theme/material/vaadin-tabs-styles.ts
theme/material/vaadin-tabs.d.ts
theme/material/vaadin-tabs.d.ts.map
theme/material/vaadin-tabs.js.map
theme/material/vaadin-tabs.ts
vaadin-tab.d.ts.map
vaadin-tab.js.map
vaadin-tab.ts
vaadin-tabs.d.ts.map
vaadin-tabs.js.map
vaadin-tabs.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc