New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/vaadin-button
Advanced tools
@vaadin/vaadin-button - npm Package Compare versions
Comparing version 2.4.0 to 3.0.0-alpha1
| { | ||
| "name": "@vaadin/vaadin-button", | ||
| "version": "3.0.0-alpha1", | ||
| "description": "vaadin-button", | ||
| "main": "vaadin-button.js", | ||
| "module": "vaadin-button.js", | ||
| "repository": "vaadin/vaadin-button", | ||
| "keywords": [ | ||
@@ -10,7 +15,2 @@ "Vaadin", | ||
| ], | ||
| "repository": "vaadin/vaadin-button", | ||
| "homepage": "https://vaadin.com/components", | ||
| "name": "@vaadin/vaadin-button", | ||
| "version": "2.4.0", | ||
| "main": "vaadin-button.js", | ||
| "author": "Vaadin Ltd", | ||
@@ -21,2 +21,3 @@ "license": "Apache-2.0", | ||
| }, | ||
| "homepage": "https://vaadin.com/components", | ||
| "files": [ | ||
@@ -28,27 +29,65 @@ "vaadin-*.d.ts", | ||
| ], | ||
| "resolutions": { | ||
| "inherits": "2.0.3", | ||
| "samsam": "1.1.3", | ||
| "supports-color": "3.1.2", | ||
| "type-detect": "1.0.0" | ||
| "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", | ||
| "lint:css": "stylelint src/*.js theme/**/*-styles.js", | ||
| "lint:js": "eslint src theme test", | ||
| "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": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "eslint --fix", | ||
| "prettier --write" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/vaadin-control-state-mixin": "^2.2.1", | ||
| "@vaadin/vaadin-themable-mixin": "^1.6.1", | ||
| "@vaadin/vaadin-lumo-styles": "^1.3.3", | ||
| "@vaadin/vaadin-material-styles": "^1.2.0", | ||
| "@vaadin/vaadin-element-mixin": "^2.4.1" | ||
| "@vaadin/vaadin-element-mixin": "^2.4.1", | ||
| "@vaadin/vaadin-lumo-styles": "^1.6.1", | ||
| "@vaadin/vaadin-material-styles": "^1.3.2", | ||
| "@vaadin/vaadin-themable-mixin": "^1.6.1" | ||
| }, | ||
| "scripts": { | ||
| "generate-typings": "gen-typescript-declarations --outDir . --verify" | ||
| }, | ||
| "devDependencies": { | ||
| "@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-icon": "^3.0.0", | ||
| "@polymer/iron-test-helpers": "^3.0.0", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1", | ||
| "@vaadin/vaadin-demo-helpers": "^3.0.0" | ||
| "@web/dev-server": "^0.1.5", | ||
| "@web/test-runner": "^0.12.6", | ||
| "@web/test-runner-saucelabs": "^0.4.0", | ||
| "eslint": "^7.18.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.28.0", | ||
| "prettier": "^2.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.34.1", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "stylelint": "^13.8.0", | ||
| "stylelint-config-prettier": "^8.0.2", | ||
| "stylelint-config-vaadin": "^0.2.10" | ||
| } | ||
| } |
@@ -1,11 +0,1 @@ | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-button) | ||
| [](https://github.com/vaadin/vaadin-button/releases) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-button) | ||
| [](https://travis-ci.org/vaadin/vaadin-button) | ||
| [](https://coveralls.io/github/vaadin/vaadin-button?branch=master) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-button) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-button) | ||
| # <vaadin-button> | ||
@@ -19,13 +9,9 @@ | ||
| <!-- | ||
| ``` | ||
| <custom-element-demo> | ||
| <template> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="vaadin-button.html"> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-button) | ||
| [](https://travis-ci.org/vaadin/vaadin-button) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-button) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-button) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-button) | ||
| [](https://discord.gg/PHmkCKC) | ||
| ```html | ||
@@ -41,27 +27,5 @@ <vaadin-button theme="primary">Primary</vaadin-button> | ||
| The Vaadin components are distributed as Bower and npm packages. | ||
| Please note that the version range is the same, as the API has not changed. | ||
| You should not mix Bower and npm versions in the same application, though. | ||
| Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components | ||
| are only published on npm, not pushed to GitHub repositories. | ||
| ### Polymer 2 and HTML Imports compatible version | ||
| Install `vaadin-button`: | ||
| ```sh | ||
| bower i vaadin/vaadin-button --save | ||
| ``` | ||
| Once installed, import it in your application: | ||
| ```html | ||
| <link rel="import" href="bower_components/vaadin-button/vaadin-button.html"> | ||
| ``` | ||
| ### Polymer 3 and ES Modules compatible version | ||
| Install `vaadin-button`: | ||
| ```sh | ||
| npm i @vaadin/vaadin-button --save | ||
@@ -86,27 +50,27 @@ ``` | ||
| `theme/lumo/vaadin-button.html` | ||
| `theme/lumo/vaadin-button.js` | ||
| - The component with the Material theme: | ||
| `theme/material/vaadin-button.html` | ||
| `theme/material/vaadin-button.js` | ||
| - Alias for `theme/lumo/vaadin-button.html`: | ||
| - Alias for `theme/lumo/vaadin-button.js`: | ||
| `vaadin-button.html` | ||
| `vaadin-button.js` | ||
| ## Running API docs and tests in a browser | ||
| ## Running demos and tests in a browser | ||
| 1. Fork the `vaadin-button` repository and clone it locally. | ||
| 1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed. | ||
| 1. Make sure you have [node.js](https://nodejs.org/) 12.x installed. | ||
| 1. When in the `vaadin-button` directory, run `npm install` and then `bower install` to install dependencies. | ||
| 1. Make sure you have [npm](https://www.npmjs.com/) installed. | ||
| 1. When in the `vaadin-button` directory, run `npm install` to install dependencies. | ||
| 1. Run `npm start`, browser will automatically open the component API documentation. | ||
| 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example: | ||
| 1. You can also open visual tests, for example: | ||
| - http://127.0.0.1:3000/components/vaadin-button/demo | ||
| - http://127.0.0.1:3000/components/vaadin-button/test | ||
| - http://127.0.0.1:3000/test/visual/default.html | ||
@@ -116,8 +80,12 @@ | ||
| 1. When in the `vaadin-button` directory, run `polymer test` | ||
| 1. When in the `vaadin-button` directory, run `npm test` | ||
| ## 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 JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` 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. | ||
@@ -124,0 +92,0 @@ |
@@ -1,28 +0,9 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * src/vaadin-button.js | ||
| */ | ||
| import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; | ||
| import {PolymerElement} from '@polymer/polymer/polymer-element.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; | ||
| import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; | ||
| import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import {addListener} from '@polymer/polymer/lib/utils/gestures.js'; | ||
| /** | ||
@@ -62,20 +43,12 @@ * `<vaadin-button>` is a Web Component providing an accessible and customizable button. | ||
| */ | ||
| declare class ButtonElement extends | ||
| ElementMixin( | ||
| ControlStateMixin( | ||
| ThemableMixin( | ||
| GestureEventListeners( | ||
| PolymerElement)))) { | ||
| readonly focusElement: Element|null; | ||
| ready(): void; | ||
| disconnectedCallback(): void; | ||
| declare class ButtonElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))) { | ||
| readonly focusElement: Element | null; | ||
| } | ||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| "vaadin-button": ButtonElement; | ||
| 'vaadin-button': ButtonElement; | ||
| } | ||
| } | ||
| export {ButtonElement}; | ||
| export { ButtonElement }; |
| /** | ||
| @license | ||
| Copyright (c) 2017 Vaadin Ltd. | ||
| This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| import { PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| * @license | ||
| * 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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; | ||
| import { addListener } from '@polymer/polymer/lib/utils/gestures.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { addListener } from '@polymer/polymer/lib/utils/gestures.js'; | ||
| /** | ||
@@ -48,3 +47,3 @@ * `<vaadin-button>` is a Web Component providing an accessible and customizable button. | ||
| * | ||
| * @extends PolymerElement | ||
| * @extends HTMLElement | ||
| * @mixes ElementMixin | ||
@@ -54,79 +53,74 @@ * @mixes ControlStateMixin | ||
| * @mixes GestureEventListeners | ||
| * @demo demo/index.html | ||
| */ | ||
| class ButtonElement extends | ||
| ElementMixin( | ||
| ControlStateMixin( | ||
| ThemableMixin( | ||
| GestureEventListeners(PolymerElement)))) { | ||
| class ButtonElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(PolymerElement)))) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: inline-block; | ||
| position: relative; | ||
| outline: none; | ||
| white-space: nowrap; | ||
| } | ||
| <style> | ||
| :host { | ||
| display: inline-block; | ||
| position: relative; | ||
| outline: none; | ||
| white-space: nowrap; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| /* Ensure the button is always aligned on the baseline */ | ||
| .vaadin-button-container::before { | ||
| content: "\\2003"; | ||
| display: inline-block; | ||
| width: 0; | ||
| } | ||
| /* Ensure the button is always aligned on the baseline */ | ||
| .vaadin-button-container::before { | ||
| content: '\\2003'; | ||
| display: inline-block; | ||
| width: 0; | ||
| } | ||
| .vaadin-button-container { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| min-height: inherit; | ||
| text-shadow: inherit; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| user-select: none; | ||
| } | ||
| .vaadin-button-container { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| min-height: inherit; | ||
| text-shadow: inherit; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| user-select: none; | ||
| } | ||
| [part="prefix"], | ||
| [part="suffix"] { | ||
| flex: none; | ||
| } | ||
| [part='prefix'], | ||
| [part='suffix'] { | ||
| flex: none; | ||
| } | ||
| [part="label"] { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| [part='label'] { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| #button { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| cursor: inherit; | ||
| } | ||
| </style> | ||
| <div class="vaadin-button-container"> | ||
| <div part="prefix"> | ||
| <slot name="prefix"></slot> | ||
| #button { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| cursor: inherit; | ||
| } | ||
| </style> | ||
| <div class="vaadin-button-container"> | ||
| <div part="prefix"> | ||
| <slot name="prefix"></slot> | ||
| </div> | ||
| <div part="label"> | ||
| <slot></slot> | ||
| </div> | ||
| <div part="suffix"> | ||
| <slot name="suffix"></slot> | ||
| </div> | ||
| </div> | ||
| <div part="label"> | ||
| <slot></slot> | ||
| </div> | ||
| <div part="suffix"> | ||
| <slot name="suffix"></slot> | ||
| </div> | ||
| </div> | ||
| <button id="button" type="button"></button> | ||
| `; | ||
| <button id="button" type="button"></button> | ||
| `; | ||
| } | ||
@@ -139,3 +133,3 @@ | ||
| static get version() { | ||
| return '2.4.0'; | ||
| return '3.0.0-alpha1'; | ||
| } | ||
@@ -154,5 +148,2 @@ | ||
| this._addActiveListeners(); | ||
| // Fix for https://github.com/vaadin/vaadin-button-flow/issues/120 | ||
| window.ShadyDOM && window.ShadyDOM.flush(); | ||
| } | ||
@@ -168,5 +159,3 @@ | ||
| // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click. | ||
| if (this.hasAttribute('active')) { | ||
| this.removeAttribute('active'); | ||
| } | ||
| this.toggleAttribute('active', false); | ||
| } | ||
@@ -178,3 +167,6 @@ | ||
| addListener(this, 'up', () => this.removeAttribute('active')); | ||
| this.addEventListener('keydown', e => !this.disabled && [13, 32].indexOf(e.keyCode) >= 0 && this.setAttribute('active', '')); | ||
| this.addEventListener( | ||
| 'keydown', | ||
| (e) => !this.disabled && [13, 32].indexOf(e.keyCode) >= 0 && this.setAttribute('active', '') | ||
| ); | ||
| this.addEventListener('keyup', () => this.removeAttribute('active')); | ||
@@ -181,0 +173,0 @@ this.addEventListener('blur', () => this.removeAttribute('active')); |
@@ -0,1 +1,2 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
@@ -6,289 +7,286 @@ import '@vaadin/vaadin-lumo-styles/sizing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/typography.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-button" theme-for="vaadin-button"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| /* Sizing */ | ||
| --lumo-button-size: var(--lumo-size-m); | ||
| min-width: calc(var(--lumo-button-size) * 2); | ||
| height: var(--lumo-button-size); | ||
| padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius) / 2); | ||
| margin: var(--lumo-space-xs) 0; | ||
| box-sizing: border-box; | ||
| /* Style */ | ||
| font-family: var(--lumo-font-family); | ||
| font-size: var(--lumo-font-size-m); | ||
| font-weight: 500; | ||
| color: var(--_lumo-button-color, var(--lumo-primary-text-color)); | ||
| background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct)); | ||
| border-radius: var(--lumo-border-radius); | ||
| cursor: default; | ||
| -webkit-tap-highlight-color: transparent; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| registerStyles( | ||
| 'vaadin-button', | ||
| css` | ||
| :host { | ||
| /* Sizing */ | ||
| --lumo-button-size: var(--lumo-size-m); | ||
| min-width: calc(var(--lumo-button-size) * 2); | ||
| height: var(--lumo-button-size); | ||
| padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius) / 2); | ||
| margin: var(--lumo-space-xs) 0; | ||
| box-sizing: border-box; | ||
| /* Style */ | ||
| font-family: var(--lumo-font-family); | ||
| font-size: var(--lumo-font-size-m); | ||
| font-weight: 500; | ||
| color: var(--_lumo-button-color, var(--lumo-primary-text-color)); | ||
| background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct)); | ||
| border-radius: var(--lumo-border-radius); | ||
| cursor: default; | ||
| -webkit-tap-highlight-color: transparent; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| /* Set only for the internal parts so we don’t affect the host vertical alignment */ | ||
| [part="label"], | ||
| [part="prefix"], | ||
| [part="suffix"] { | ||
| line-height: var(--lumo-line-height-xs); | ||
| } | ||
| /* Set only for the internal parts so we don’t affect the host vertical alignment */ | ||
| [part='label'], | ||
| [part='prefix'], | ||
| [part='suffix'] { | ||
| line-height: var(--lumo-line-height-xs); | ||
| } | ||
| [part="label"] { | ||
| padding: calc(var(--lumo-button-size) / 6) 0; | ||
| } | ||
| [part='label'] { | ||
| padding: calc(var(--lumo-button-size) / 6) 0; | ||
| } | ||
| :host([theme~="small"]) { | ||
| font-size: var(--lumo-font-size-s); | ||
| --lumo-button-size: var(--lumo-size-s); | ||
| } | ||
| :host([theme~='small']) { | ||
| font-size: var(--lumo-font-size-s); | ||
| --lumo-button-size: var(--lumo-size-s); | ||
| } | ||
| :host([theme~="large"]) { | ||
| font-size: var(--lumo-font-size-l); | ||
| --lumo-button-size: var(--lumo-size-l); | ||
| } | ||
| :host([theme~='large']) { | ||
| font-size: var(--lumo-font-size-l); | ||
| --lumo-button-size: var(--lumo-size-l); | ||
| } | ||
| /* This needs to be the last selector for it to take priority */ | ||
| :host([disabled][disabled]) { | ||
| pointer-events: none; | ||
| color: var(--lumo-disabled-text-color); | ||
| background-color: var(--lumo-contrast-5pct); | ||
| } | ||
| /* This needs to be the last selector for it to take priority */ | ||
| :host([disabled][disabled]) { | ||
| pointer-events: none; | ||
| color: var(--lumo-disabled-text-color); | ||
| background-color: var(--lumo-contrast-5pct); | ||
| } | ||
| /* For interaction states */ | ||
| :host::before, | ||
| :host::after { | ||
| content: ""; | ||
| /* We rely on the host always being relative */ | ||
| position: absolute; | ||
| z-index: 1; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| background-color: currentColor; | ||
| border-radius: inherit; | ||
| opacity: 0; | ||
| transition: opacity 0.2s; | ||
| pointer-events: none; | ||
| } | ||
| /* For interaction states */ | ||
| :host::before, | ||
| :host::after { | ||
| content: ''; | ||
| /* We rely on the host always being relative */ | ||
| position: absolute; | ||
| z-index: 1; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| background-color: currentColor; | ||
| border-radius: inherit; | ||
| opacity: 0; | ||
| transition: opacity 0.2s; | ||
| pointer-events: none; | ||
| } | ||
| /* Hover */ | ||
| /* Hover */ | ||
| :host(:hover)::before { | ||
| opacity: 0.05; | ||
| } | ||
| :host(:hover)::before { | ||
| opacity: 0.05; | ||
| } | ||
| /* Disable hover for touch devices */ | ||
| @media (pointer: coarse) { | ||
| :host(:not([active]):hover)::before { | ||
| opacity: 0; | ||
| } | ||
| /* Disable hover for touch devices */ | ||
| @media (pointer: coarse) { | ||
| :host(:not([active]):hover)::before { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| /* Active */ | ||
| /* Active */ | ||
| :host::after { | ||
| transition: opacity 1.4s, transform 0.1s; | ||
| filter: blur(8px); | ||
| } | ||
| :host::after { | ||
| transition: opacity 1.4s, transform 0.1s; | ||
| filter: blur(8px); | ||
| } | ||
| :host([active])::before { | ||
| opacity: 0.1; | ||
| transition-duration: 0s; | ||
| } | ||
| :host([active])::before { | ||
| opacity: 0.1; | ||
| transition-duration: 0s; | ||
| } | ||
| :host([active])::after { | ||
| opacity: 0.1; | ||
| transition-duration: 0s, 0s; | ||
| transform: scale(0); | ||
| } | ||
| :host([active])::after { | ||
| opacity: 0.1; | ||
| transition-duration: 0s, 0s; | ||
| transform: scale(0); | ||
| } | ||
| /* Keyboard focus */ | ||
| /* Keyboard focus */ | ||
| :host([focus-ring]) { | ||
| box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); | ||
| } | ||
| :host([focus-ring]) { | ||
| box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); | ||
| } | ||
| /* Types (primary, tertiary, tertiary-inline */ | ||
| /* Types (primary, tertiary, tertiary-inline */ | ||
| :host([theme~="tertiary"]), | ||
| :host([theme~="tertiary-inline"]) { | ||
| background-color: transparent !important; | ||
| transition: opacity 0.2s; | ||
| min-width: 0; | ||
| } | ||
| :host([theme~='tertiary']), | ||
| :host([theme~='tertiary-inline']) { | ||
| background-color: transparent !important; | ||
| transition: opacity 0.2s; | ||
| min-width: 0; | ||
| } | ||
| :host([theme~="tertiary"])::before, | ||
| :host([theme~="tertiary-inline"])::before { | ||
| display: none; | ||
| } | ||
| :host([theme~='tertiary'])::before, | ||
| :host([theme~='tertiary-inline'])::before { | ||
| display: none; | ||
| } | ||
| :host([theme~="tertiary"]) { | ||
| padding: 0 calc(var(--lumo-button-size) / 6); | ||
| } | ||
| :host([theme~='tertiary']) { | ||
| padding: 0 calc(var(--lumo-button-size) / 6); | ||
| } | ||
| @media (hover: hover) { | ||
| :host([theme*="tertiary"]:not([active]):hover) { | ||
| opacity: 0.8; | ||
| } | ||
| @media (hover: hover) { | ||
| :host([theme*='tertiary']:not([active]):hover) { | ||
| opacity: 0.8; | ||
| } | ||
| } | ||
| :host([theme~="tertiary"][active]), | ||
| :host([theme~="tertiary-inline"][active]) { | ||
| opacity: 0.5; | ||
| transition-duration: 0s; | ||
| } | ||
| :host([theme~='tertiary'][active]), | ||
| :host([theme~='tertiary-inline'][active]) { | ||
| opacity: 0.5; | ||
| transition-duration: 0s; | ||
| } | ||
| :host([theme~="tertiary-inline"]) { | ||
| margin: 0; | ||
| height: auto; | ||
| padding: 0; | ||
| line-height: inherit; | ||
| font-size: inherit; | ||
| } | ||
| :host([theme~='tertiary-inline']) { | ||
| margin: 0; | ||
| height: auto; | ||
| padding: 0; | ||
| line-height: inherit; | ||
| font-size: inherit; | ||
| } | ||
| :host([theme~="tertiary-inline"]) [part="label"] { | ||
| padding: 0; | ||
| overflow: visible; | ||
| line-height: inherit; | ||
| } | ||
| :host([theme~='tertiary-inline']) [part='label'] { | ||
| padding: 0; | ||
| overflow: visible; | ||
| line-height: inherit; | ||
| } | ||
| :host([theme~="primary"]) { | ||
| background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color)); | ||
| color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color)); | ||
| font-weight: 600; | ||
| min-width: calc(var(--lumo-button-size) * 2.5); | ||
| } | ||
| :host([theme~='primary']) { | ||
| background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color)); | ||
| color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color)); | ||
| font-weight: 600; | ||
| min-width: calc(var(--lumo-button-size) * 2.5); | ||
| } | ||
| :host([theme~="primary"][disabled]) { | ||
| background-color: var(--lumo-primary-color-50pct); | ||
| color: var(--lumo-primary-contrast-color); | ||
| } | ||
| :host([theme~='primary'][disabled]) { | ||
| background-color: var(--lumo-primary-color-50pct); | ||
| color: var(--lumo-primary-contrast-color); | ||
| } | ||
| :host([theme~="primary"]:hover)::before { | ||
| opacity: 0.1; | ||
| } | ||
| :host([theme~='primary']:hover)::before { | ||
| opacity: 0.1; | ||
| } | ||
| :host([theme~="primary"][active])::before { | ||
| background-color: var(--lumo-shade-20pct); | ||
| } | ||
| :host([theme~='primary'][active])::before { | ||
| background-color: var(--lumo-shade-20pct); | ||
| } | ||
| @media (pointer: coarse) { | ||
| :host([theme~="primary"][active])::before { | ||
| background-color: var(--lumo-shade-60pct); | ||
| } | ||
| :host([theme~="primary"]:not([active]):hover)::before { | ||
| opacity: 0; | ||
| } | ||
| @media (pointer: coarse) { | ||
| :host([theme~='primary'][active])::before { | ||
| background-color: var(--lumo-shade-60pct); | ||
| } | ||
| :host([theme~="primary"][active])::after { | ||
| opacity: 0.2; | ||
| :host([theme~='primary']:not([active]):hover)::before { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| /* Colors (success, error, contrast) */ | ||
| :host([theme~='primary'][active])::after { | ||
| opacity: 0.2; | ||
| } | ||
| :host([theme~="success"]) { | ||
| color: var(--lumo-success-text-color); | ||
| } | ||
| /* Colors (success, error, contrast) */ | ||
| :host([theme~="success"][theme~="primary"]) { | ||
| background-color: var(--lumo-success-color); | ||
| color: var(--lumo-success-contrast-color); | ||
| } | ||
| :host([theme~='success']) { | ||
| color: var(--lumo-success-text-color); | ||
| } | ||
| :host([theme~="success"][theme~="primary"][disabled]) { | ||
| background-color: var(--lumo-success-color-50pct); | ||
| } | ||
| :host([theme~='success'][theme~='primary']) { | ||
| background-color: var(--lumo-success-color); | ||
| color: var(--lumo-success-contrast-color); | ||
| } | ||
| :host([theme~="error"]) { | ||
| color: var(--lumo-error-text-color); | ||
| } | ||
| :host([theme~='success'][theme~='primary'][disabled]) { | ||
| background-color: var(--lumo-success-color-50pct); | ||
| } | ||
| :host([theme~="error"][theme~="primary"]) { | ||
| background-color: var(--lumo-error-color); | ||
| color: var(--lumo-error-contrast-color); | ||
| } | ||
| :host([theme~='error']) { | ||
| color: var(--lumo-error-text-color); | ||
| } | ||
| :host([theme~="error"][theme~="primary"][disabled]) { | ||
| background-color: var(--lumo-error-color-50pct); | ||
| } | ||
| :host([theme~='error'][theme~='primary']) { | ||
| background-color: var(--lumo-error-color); | ||
| color: var(--lumo-error-contrast-color); | ||
| } | ||
| :host([theme~="contrast"]) { | ||
| color: var(--lumo-contrast); | ||
| } | ||
| :host([theme~='error'][theme~='primary'][disabled]) { | ||
| background-color: var(--lumo-error-color-50pct); | ||
| } | ||
| :host([theme~="contrast"][theme~="primary"]) { | ||
| background-color: var(--lumo-contrast); | ||
| color: var(--lumo-base-color); | ||
| } | ||
| :host([theme~='contrast']) { | ||
| color: var(--lumo-contrast); | ||
| } | ||
| :host([theme~="contrast"][theme~="primary"][disabled]) { | ||
| background-color: var(--lumo-contrast-50pct); | ||
| } | ||
| :host([theme~='contrast'][theme~='primary']) { | ||
| background-color: var(--lumo-contrast); | ||
| color: var(--lumo-base-color); | ||
| } | ||
| /* Icons */ | ||
| :host([theme~='contrast'][theme~='primary'][disabled]) { | ||
| background-color: var(--lumo-contrast-50pct); | ||
| } | ||
| [part] ::slotted(iron-icon) { | ||
| display: inline-block; | ||
| width: var(--lumo-icon-size-m); | ||
| height: var(--lumo-icon-size-m); | ||
| } | ||
| /* Icons */ | ||
| /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */ | ||
| [part] ::slotted(iron-icon[icon^="vaadin:"]) { | ||
| padding: 0.25em; | ||
| box-sizing: border-box !important; | ||
| } | ||
| [part] ::slotted(iron-icon) { | ||
| display: inline-block; | ||
| width: var(--lumo-icon-size-m); | ||
| height: var(--lumo-icon-size-m); | ||
| } | ||
| [part="prefix"] { | ||
| margin-left: -0.25em; | ||
| margin-right: 0.25em; | ||
| } | ||
| /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */ | ||
| [part] ::slotted(iron-icon[icon^='vaadin:']) { | ||
| padding: 0.25em; | ||
| box-sizing: border-box !important; | ||
| } | ||
| [part="suffix"] { | ||
| margin-left: 0.25em; | ||
| margin-right: -0.25em; | ||
| } | ||
| [part='prefix'] { | ||
| margin-left: -0.25em; | ||
| margin-right: 0.25em; | ||
| } | ||
| /* Icon-only */ | ||
| [part='suffix'] { | ||
| margin-left: 0.25em; | ||
| margin-right: -0.25em; | ||
| } | ||
| :host([theme~="icon"]:not([theme~="tertiary-inline"])) { | ||
| min-width: var(--lumo-button-size); | ||
| padding-left: calc(var(--lumo-button-size) / 4); | ||
| padding-right: calc(var(--lumo-button-size) / 4); | ||
| } | ||
| /* Icon-only */ | ||
| :host([theme~="icon"]) [part="prefix"], | ||
| :host([theme~="icon"]) [part="suffix"] { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| :host([theme~='icon']:not([theme~='tertiary-inline'])) { | ||
| min-width: var(--lumo-button-size); | ||
| padding-left: calc(var(--lumo-button-size) / 4); | ||
| padding-right: calc(var(--lumo-button-size) / 4); | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([theme~='icon']) [part='prefix'], | ||
| :host([theme~='icon']) [part='suffix'] { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| :host([dir="rtl"]) [part="prefix"] { | ||
| margin-left: 0.25em; | ||
| margin-right: -0.25em; | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([dir="rtl"]) [part="suffix"] { | ||
| margin-left: -0.25em; | ||
| margin-right: 0.25em; | ||
| } | ||
| :host([dir='rtl']) [part='prefix'] { | ||
| margin-left: 0.25em; | ||
| margin-right: -0.25em; | ||
| } | ||
| :host([dir="rtl"][theme~="icon"]) [part="prefix"], | ||
| :host([dir="rtl"][theme~="icon"]) [part="suffix"] { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| :host([dir='rtl']) [part='suffix'] { | ||
| margin-left: -0.25em; | ||
| margin-right: 0.25em; | ||
| } | ||
| document.head.appendChild($_documentContainer.content); | ||
| :host([dir='rtl'][theme~='icon']) [part='prefix'], | ||
| :host([dir='rtl'][theme~='icon']) [part='suffix'] { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| `, | ||
| { moduleId: 'lumo-button' } | ||
| ); |
@@ -0,177 +1,175 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
| import '@vaadin/vaadin-material-styles/shadow.js'; | ||
| import '@vaadin/vaadin-material-styles/typography.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-button" theme-for="vaadin-button"> | ||
| <template> | ||
| <style> | ||
| registerStyles( | ||
| 'vaadin-button', | ||
| css` | ||
| :host { | ||
| padding: 8px; | ||
| min-width: 64px; | ||
| box-sizing: border-box; | ||
| display: inline-flex; | ||
| align-items: baseline; | ||
| justify-content: center; | ||
| border-radius: 4px; | ||
| color: var(--material-primary-text-color); | ||
| font-family: var(--material-font-family); | ||
| text-transform: uppercase; | ||
| font-size: var(--material-button-font-size); | ||
| line-height: 20px; | ||
| font-weight: 500; | ||
| letter-spacing: 0.05em; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| transition: box-shadow 0.2s; | ||
| -webkit-tap-highlight-color: transparent; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| @-moz-document url-prefix() { | ||
| :host { | ||
| padding: 8px; | ||
| min-width: 64px; | ||
| box-sizing: border-box; | ||
| display: inline-flex; | ||
| align-items: baseline; | ||
| justify-content: center; | ||
| border-radius: 4px; | ||
| color: var(--material-primary-text-color); | ||
| font-family: var(--material-font-family); | ||
| text-transform: uppercase; | ||
| font-size: var(--material-button-font-size); | ||
| line-height: 20px; | ||
| font-weight: 500; | ||
| letter-spacing: 0.05em; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| transition: box-shadow 0.2s; | ||
| -webkit-tap-highlight-color: transparent; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| vertical-align: -13px; | ||
| } | ||
| } | ||
| @-moz-document url-prefix() { | ||
| :host { | ||
| vertical-align: -13px; | ||
| } | ||
| } | ||
| :host::before, | ||
| :host::after { | ||
| content: ''; | ||
| pointer-events: none; | ||
| position: absolute; | ||
| border-radius: inherit; | ||
| opacity: 0; | ||
| background-color: currentColor; | ||
| } | ||
| :host::before, | ||
| :host::after { | ||
| content: ""; | ||
| pointer-events: none; | ||
| position: absolute; | ||
| border-radius: inherit; | ||
| opacity: 0; | ||
| background-color: currentColor; | ||
| } | ||
| :host::before { | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| transition: opacity 0.5s; | ||
| } | ||
| :host::before { | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| transition: opacity 0.5s; | ||
| } | ||
| :host::after { | ||
| border-radius: 50%; | ||
| width: 320px; | ||
| height: 320px; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| transition: all 0.9s; | ||
| } | ||
| :host::after { | ||
| border-radius: 50%; | ||
| width: 320px; | ||
| height: 320px; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| transition: all 0.9s; | ||
| } | ||
| [part='label'] ::slotted(*) { | ||
| vertical-align: middle; | ||
| } | ||
| [part="label"] ::slotted(*) { | ||
| vertical-align: middle; | ||
| } | ||
| :host(:hover)::before, | ||
| :host([focus-ring])::before { | ||
| opacity: 0.08; | ||
| transition-duration: 0.2s; | ||
| } | ||
| :host(:hover)::before, | ||
| :host([focus-ring])::before { | ||
| opacity: 0.08; | ||
| transition-duration: 0.2s; | ||
| } | ||
| :host([active])::before { | ||
| opacity: 0.16; | ||
| transition: opacity 0.4s; | ||
| } | ||
| :host([active])::before { | ||
| opacity: 0.16; | ||
| transition: opacity 0.4s; | ||
| } | ||
| :host([active])::after { | ||
| transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */ | ||
| opacity: 0.1; | ||
| transition: 0s; | ||
| } | ||
| :host([active])::after { | ||
| transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */ | ||
| opacity: 0.1; | ||
| transition: 0s; | ||
| } | ||
| :host(:hover:not([active]))::after { | ||
| transform: translate(-50%, -50%) scale(1); | ||
| opacity: 0; | ||
| } | ||
| :host(:hover:not([active]))::after { | ||
| transform: translate(-50%, -50%) scale(1); | ||
| opacity: 0; | ||
| } | ||
| :host([disabled]) { | ||
| pointer-events: none; | ||
| color: var(--material-disabled-text-color); | ||
| } | ||
| :host([disabled]) { | ||
| pointer-events: none; | ||
| color: var(--material-disabled-text-color); | ||
| } | ||
| /* Contained and outline variants */ | ||
| :host([theme~='contained']), | ||
| :host([theme~='outlined']) { | ||
| padding: 8px 16px; | ||
| } | ||
| /* Contained and outline variants */ | ||
| :host([theme~="contained"]), | ||
| :host([theme~="outlined"]) { | ||
| padding: 8px 16px; | ||
| } | ||
| :host([theme~='outlined']) { | ||
| box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2)); | ||
| } | ||
| :host([theme~="outlined"]) { | ||
| box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2)); | ||
| } | ||
| :host([theme~='contained']:not([disabled])) { | ||
| background-color: var(--material-primary-color); | ||
| color: var(--material-primary-contrast-color); | ||
| box-shadow: var(--material-shadow-elevation-2dp); | ||
| } | ||
| :host([theme~="contained"]:not([disabled])) { | ||
| background-color: var(--material-primary-color); | ||
| color: var(--material-primary-contrast-color); | ||
| box-shadow: var(--material-shadow-elevation-2dp); | ||
| } | ||
| :host([theme~='contained'][disabled]) { | ||
| background-color: var(--material-secondary-background-color); | ||
| } | ||
| :host([theme~="contained"][disabled]) { | ||
| background-color: var(--material-secondary-background-color); | ||
| } | ||
| :host([theme~='contained']:hover) { | ||
| box-shadow: var(--material-shadow-elevation-4dp); | ||
| } | ||
| :host([theme~="contained"]:hover) { | ||
| box-shadow: var(--material-shadow-elevation-4dp); | ||
| } | ||
| :host([theme~='contained'][active]) { | ||
| box-shadow: var(--material-shadow-elevation-8dp); | ||
| } | ||
| :host([theme~="contained"][active]) { | ||
| box-shadow: var(--material-shadow-elevation-8dp); | ||
| } | ||
| /* Icon alignment */ | ||
| /* Icon alignment */ | ||
| [part] ::slotted(iron-icon) { | ||
| display: block; | ||
| width: 18px; | ||
| height: 18px; | ||
| } | ||
| [part] ::slotted(iron-icon) { | ||
| display: block; | ||
| width: 18px; | ||
| height: 18px; | ||
| } | ||
| [part='prefix'] ::slotted(iron-icon) { | ||
| margin-right: 8px; | ||
| margin-left: -4px; | ||
| } | ||
| [part="prefix"] ::slotted(iron-icon) { | ||
| margin-right: 8px; | ||
| margin-left: -4px; | ||
| } | ||
| [part='suffix'] ::slotted(iron-icon) { | ||
| margin-left: 8px; | ||
| margin-right: -4px; | ||
| } | ||
| [part="suffix"] ::slotted(iron-icon) { | ||
| margin-left: 8px; | ||
| margin-right: -4px; | ||
| } | ||
| /* RTL specific styles */ | ||
| /* RTL specific styles */ | ||
| :host([dir='rtl'])::before { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
| :host([dir="rtl"])::before { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
| :host([dir='rtl'])::after { | ||
| left: auto; | ||
| right: 50%; | ||
| transform: translate(50%, -50%); | ||
| } | ||
| :host([dir="rtl"])::after { | ||
| left: auto; | ||
| right: 50%; | ||
| transform: translate(50%, -50%); | ||
| } | ||
| :host([active][dir='rtl'])::after { | ||
| transform: translate(50%, -50%) scale(0.0000001); | ||
| } | ||
| :host([active][dir="rtl"])::after { | ||
| transform: translate(50%, -50%) scale(0.0000001); | ||
| } | ||
| :host(:hover:not([active])[dir='rtl'])::after { | ||
| transform: translate(50%, -50%) scale(1); | ||
| } | ||
| :host(:hover:not([active])[dir="rtl"])::after { | ||
| transform: translate(50%, -50%) scale(1); | ||
| } | ||
| :host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) { | ||
| margin-right: -4px; | ||
| margin-left: 8px; | ||
| } | ||
| :host([dir="rtl"]) [part="prefix"] ::slotted(iron-icon) { | ||
| margin-right: -4px; | ||
| margin-left: 8px; | ||
| } | ||
| :host([dir="rtl"]) [part="suffix"] ::slotted(iron-icon) { | ||
| margin-left: -4px; | ||
| margin-right: 8px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| :host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) { | ||
| margin-left: -4px; | ||
| margin-right: 8px; | ||
| } | ||
| `, | ||
| { moduleId: 'material-button' } | ||
| ); |
@@ -1,14 +0,1 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * vaadin-button.js | ||
| */ | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| export * from './src/vaadin-button.js'; |
New alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-4.8%
36000
- Dev dependency count
- increased by316.67%
25
- Lines of code
- decreased by-6.08%
602
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-23.53%
104