@vaadin/button - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

package.json

 {
   "name": "@vaadin/button",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-button",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/button"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-button/issues"
+  },
   "main": "vaadin-button.js",
   "module": "vaadin-button.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
@@ -14,21 +33,8 @@ "Vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-button/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-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"
+    "@vaadin/component-base": "22.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
   },
@@ -40,6 +46,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

src/vaadin-button.d.ts

@@ -6,7 +6,7 @@ /**
  */
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -13,0 +13,0 @@ /**

src/vaadin-button.js

@@ -7,7 +7,7 @@ /**
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -14,0 +14,0 @@ /**

theme/lumo/vaadin-button-styles.js

@@ -51,9 +51,2 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-  /* 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 */
@@ -79,10 +72,5 @@ :host::before,
 
-  :host(:hover)::before {
-    opacity: 0.05;
-  }
-
-  /* Disable hover for touch devices */
-  @media (pointer: coarse) {
-    :host(:not([active]):hover)::before {
-      opacity: 0;
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
     }
@@ -99,3 +87,3 @@ }
   :host([active])::before {
-    opacity: 0.1;
+    opacity: 0.05;
     transition-duration: 0s;
@@ -116,2 +104,6 @@ }
 
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
+
   /* Types (primary, tertiary, tertiary-inline */
@@ -122,11 +114,5 @@
     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']) {
@@ -136,14 +122,6 @@ padding: 0 calc(var(--lumo-button-size) / 6);
 
-  @media (hover: hover) {
-    :host([theme*='tertiary']:not([active]):hover) {
-      opacity: 0.8;
-    }
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
   }
 
-  :host([theme~='tertiary'][active]),
-  :host([theme~='tertiary-inline'][active]) {
-    opacity: 0.5;
-    transition-duration: 0s;
-  }
-
   :host([theme~='tertiary-inline']) {
@@ -170,25 +148,16 @@ margin: 0;
 
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-primary-color-50pct);
-    color: var(--lumo-primary-contrast-color);
+  :host([theme~='primary'])::before {
+    background-color: black;
   }
 
-  :host([theme~='primary']:hover)::before {
-    opacity: 0.1;
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
+    }
   }
 
   :host([theme~='primary'][active])::before {
-    background-color: var(--lumo-shade-20pct);
+    opacity: 0.1;
   }
 
-  @media (pointer: coarse) {
-    :host([theme~='primary'][active])::before {
-      background-color: var(--lumo-shade-60pct);
-    }
-
-    :host([theme~='primary']:not([active]):hover)::before {
-      opacity: 0;
-    }
-  }
-
   :host([theme~='primary'][active])::after {
@@ -209,6 +178,2 @@ opacity: 0.2;
 
-  :host([theme~='success'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-success-color-50pct);
-  }
-
   :host([theme~='error']) {
@@ -223,6 +188,2 @@ color: var(--lumo-error-text-color);
 
-  :host([theme~='error'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-error-color-50pct);
-  }
-
   :host([theme~='contrast']) {
@@ -237,6 +198,18 @@ color: var(--lumo-contrast);
 
-  :host([theme~='contrast'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-50pct);
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
   }
 
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
+
   /* Icons */
@@ -243,0 +216,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-16.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

30968

decreased by-2.34%

Lines of code

573

decreased by-3.86%

Dependency changes

• + Added@vaadin/component-base@22.0.0-alpha7(transitive)

• + Added@vaadin/icon@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-alpha7(transitive)

• - Removed@vaadin/vaadin-element-mixin@^22.0.0-alpha6

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/component-base@22.1.0(transitive)

• - Removed@vaadin/icon@22.1.0(transitive)

• - Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-material-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)

• Updated@vaadin/component-base@22.0.0-alpha7

• Updated@vaadin/vaadin-lumo-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-material-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha7