@vaadin/button - npm Package Compare versions

Comparing version 25.0.0-alpha7 to 25.0.0-alpha8

package.json

 {
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
@@ -40,13 +40,13 @@ "access": "public"
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/icon": "25.0.0-alpha7",
-    "@vaadin/icons": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/icon": "25.0.0-alpha8",
+    "@vaadin/icons": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
@@ -59,3 +59,3 @@ "sinon": "^18.0.0"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

src/styles/vaadin-button-base-styles.js

@@ -10,100 +10,98 @@ /**
 export const buttonStyles = css`
-  @layer base {
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-container-inline));
-      white-space: nowrap;
-      -webkit-tap-highlight-color: transparent;
-      -webkit-user-select: none;
-      user-select: none;
-      cursor: var(--vaadin-clickable-cursor);
-      box-sizing: border-box;
-      vertical-align: middle;
-      flex-shrink: 0;
-      height: var(--vaadin-button-height, auto);
-      margin: var(--vaadin-button-margin, 0);
-      padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
-      font-family: var(--vaadin-button-font-family, inherit);
-      font-size: var(--vaadin-button-font-size, inherit);
-      line-height: var(--vaadin-button-line-height, inherit);
-      font-weight: var(--vaadin-button-font-weight, 500);
-      color: var(--vaadin-button-text-color, var(--vaadin-color));
-      background: var(--vaadin-button-background, var(--vaadin-background-container));
-      background-origin: border-box;
-      border: var(
-        --vaadin-button-border,
-        var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--vaadin-border-color))
-      );
-      border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
-      touch-action: manipulation;
-    }
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-container-inline));
+    white-space: nowrap;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: var(--vaadin-clickable-cursor);
+    box-sizing: border-box;
+    vertical-align: middle;
+    flex-shrink: 0;
+    height: var(--vaadin-button-height, auto);
+    margin: var(--vaadin-button-margin, 0);
+    padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
+    font-family: var(--vaadin-button-font-family, inherit);
+    font-size: var(--vaadin-button-font-size, inherit);
+    line-height: var(--vaadin-button-line-height, inherit);
+    font-weight: var(--vaadin-button-font-weight, 500);
+    color: var(--vaadin-button-text-color, var(--vaadin-color));
+    background: var(--vaadin-button-background, var(--vaadin-background-container));
+    background-origin: border-box;
+    border: var(
+      --vaadin-button-border,
+      var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--vaadin-border-color))
+    );
+    border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
+    touch-action: manipulation;
+  }
 
-    :host([hidden]) {
-      display: none !important;
-    }
+  :host([hidden]) {
+    display: none !important;
+  }
 
-    .vaadin-button-container,
-    [part='prefix'],
-    [part='suffix'],
-    [part='label'] {
-      display: contents;
-    }
+  .vaadin-button-container,
+  [part='prefix'],
+  [part='suffix'],
+  [part='label'] {
+    display: contents;
+  }
 
-    :host(:is([focus-ring], :focus-visible)) {
-      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-      outline-offset: 1px;
+  :host(:is([focus-ring], :focus-visible)) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: 1px;
+  }
+
+  :host([theme~='primary']) {
+    --vaadin-button-background: var(--vaadin-color);
+    --vaadin-button-text-color: var(--vaadin-background-color);
+    --vaadin-button-border-color: transparent;
+  }
+
+  :host([theme~='tertiary']) {
+    --vaadin-button-text-color: var(--_vaadin-button-text-color);
+    --vaadin-button-background: transparent;
+    --vaadin-button-border-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
+    cursor: var(--vaadin-disabled-cursor);
+    opacity: 0.5;
+  }
+
+  :host([disabled][theme~='primary']) {
+    --vaadin-button-text-color: var(--vaadin-background-container-strong);
+    --vaadin-button-background: var(--vaadin-color-disabled);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --vaadin-button-border-width: 1px;
+      --vaadin-button-background: ButtonFace;
+      --vaadin-button-text-color: ButtonText;
     }
 
     :host([theme~='primary']) {
-      --vaadin-button-background: var(--vaadin-color);
-      --vaadin-button-text-color: var(--vaadin-background-color);
-      --vaadin-button-border-color: transparent;
+      forced-color-adjust: none;
+      --vaadin-button-background: CanvasText;
+      --vaadin-button-text-color: Canvas;
+      --vaadin-icon-color: Canvas;
     }
 
-    :host([theme~='tertiary']) {
-      --vaadin-button-text-color: var(--_vaadin-button-text-color);
-      --vaadin-button-background: transparent;
-      --vaadin-button-border-color: transparent;
+    ::slotted(*) {
+      forced-color-adjust: auto;
     }
 
     :host([disabled]) {
-      pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
-      cursor: var(--vaadin-disabled-cursor);
-      opacity: 0.5;
+      --vaadin-button-background: transparent !important;
+      --vaadin-button-border-color: GrayText !important;
+      --vaadin-button-text-color: GrayText !important;
+      opacity: 1;
     }
-
-    :host([disabled][theme~='primary']) {
-      --vaadin-button-text-color: var(--vaadin-background-container-strong);
-      --vaadin-button-background: var(--vaadin-color-disabled);
-    }
-
-    @media (forced-colors: active) {
-      :host {
-        --vaadin-button-border-width: 1px;
-        --vaadin-button-background: ButtonFace;
-        --vaadin-button-text-color: ButtonText;
-      }
-
-      :host([theme~='primary']) {
-        forced-color-adjust: none;
-        --vaadin-button-background: CanvasText;
-        --vaadin-button-text-color: Canvas;
-        --vaadin-icon-color: Canvas;
-      }
-
-      ::slotted(*) {
-        forced-color-adjust: auto;
-      }
-
-      :host([disabled]) {
-        --vaadin-button-background: transparent !important;
-        --vaadin-button-border-color: GrayText !important;
-        --vaadin-button-text-color: GrayText !important;
-        opacity: 1;
-      }
-    }
   }
 `;

src/vaadin-button.js

@@ -50,3 +50,3 @@ /**
  */
-class Button extends ButtonMixin(ElementMixin(LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
@@ -53,0 +53,0 @@ return 'vaadin-button';

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "contributions": {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "framework": "lit",

No alert changes

Worsened metrics

Total package byte prevSize

43766

-0.43%

Lines of code

809

-0.25%

Dependency changes

• + Added

  @vaadin/a11y-base@25.0.0-alpha8
  (transitive)

• + Added

  @vaadin/component-base@25.0.0-alpha8
  (transitive)

• + Added

  @vaadin/icon@25.0.0-alpha8
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@25.0.0-alpha8
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@25.0.0-alpha8
  (transitive)

• - Removed

  @vaadin/a11y-base@25.0.0-alpha7
  (transitive)

• - Removed

  @vaadin/component-base@25.0.0-alpha7
  (transitive)

• - Removed

  @vaadin/icon@25.0.0-alpha7
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@25.0.0-alpha7
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@25.0.0-alpha7
  (transitive)

• Updated

  @vaadin/a11y-base@25.0.0-alpha8

• Updated

  @vaadin/component-base@25.0.0-alpha8

• Updated

  @vaadin/vaadin-lumo-styles@25.0.0-alpha8

• Updated

  @vaadin/vaadin-themable-mixin@25.0.0-alpha8