@vaadin/button - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/button",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-button",
@@ -28,8 +28,8 @@ "main": "vaadin-button.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha4",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/field-base": "^22.0.0-alpha5",
+    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
   },
@@ -44,3 +44,3 @@ "devDependencies": {
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

src/vaadin-button.js

@@ -118,2 +118,14 @@ /**
 
+  /**
+   * By default, `Space` is the only possible activation key for a focusable HTML element.
+   * Nonetheless, the button is an exception as it can be also activated by pressing `Enter`.
+   * See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
+   *
+   * @protected
+   * @override
+   */
+  get _activeKeys() {
+    return ['Enter', ' '];
+  }
+
   /** @protected */
@@ -129,2 +141,27 @@ ready() {
   }
+
+  /**
+   * Since the button component is designed on the base of the `[role=button]` attribute,
+   * and doesn't have a native <button> inside, in order to be fully accessible from the keyboard,
+   * it should manually fire the `click` event once an activation key is pressed,
+   * as it follows from the WAI-ARIA specifications:
+   * https://www.w3.org/TR/wai-aria-practices-1.1/#button
+   *
+   * According to the UI Events specifications,
+   * the `click` event should be fired exactly on `keydown`:
+   * https://www.w3.org/TR/uievents/#event-type-keydown
+   *
+   * @param {KeyboardEvent} event
+   * @protected
+   * @override
+   */
+  _onKeyDown(event) {
+    super._onKeyDown(event);
+
+    if (this._activeKeys.includes(event.key)) {
+      // `DisabledMixin` overrides the standard `click()` method
+      // so that it doesn't fire the `click` event when the element is disabled.
+      this.click();
+    }
+  }
 }
@@ -131,0 +168,0 @@

theme/lumo/vaadin-button-styles.js

@@ -8,287 +8,287 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-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-m) / 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-m);
-      cursor: var(--lumo-clickable-cursor);
-      -webkit-tap-highlight-color: transparent;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
+const 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-m) / 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-m);
+    cursor: var(--lumo-clickable-cursor);
+    -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;
+  /* 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 */
+
+  :host(:hover)::before {
+    opacity: 0.05;
+  }
+
+  /* Disable hover for touch devices */
+  @media (pointer: coarse) {
+    :host(:not([active]):hover)::before {
       opacity: 0;
-      transition: opacity 0.2s;
-      pointer-events: none;
     }
+  }
 
-    /* Hover */
+  /* Active */
 
-    :host(:hover)::before {
-      opacity: 0.05;
-    }
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
+  }
 
-    /* Disable hover for touch devices */
-    @media (pointer: coarse) {
-      :host(:not([active]):hover)::before {
-        opacity: 0;
-      }
-    }
+  :host([active])::before {
+    opacity: 0.1;
+    transition-duration: 0s;
+  }
 
-    /* Active */
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
 
-    :host::after {
-      transition: opacity 1.4s, transform 0.1s;
-      filter: blur(8px);
-    }
+  /* Keyboard focus */
 
-    :host([active])::before {
-      opacity: 0.1;
-      transition-duration: 0s;
-    }
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
 
-    :host([active])::after {
-      opacity: 0.1;
-      transition-duration: 0s, 0s;
-      transform: scale(0);
-    }
+  /* Types (primary, tertiary, tertiary-inline */
 
-    /* Keyboard focus */
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    background-color: transparent !important;
+    transition: opacity 0.2s;
+    min-width: 0;
+  }
 
-    :host([focus-ring]) {
-      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-    }
+  :host([theme~='tertiary'])::before,
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
+  }
 
-    /* Types (primary, tertiary, tertiary-inline */
+  :host([theme~='tertiary']) {
+    padding: 0 calc(var(--lumo-button-size) / 6);
+  }
 
-    :host([theme~='tertiary']),
-    :host([theme~='tertiary-inline']) {
-      background-color: transparent !important;
-      transition: opacity 0.2s;
-      min-width: 0;
+  @media (hover: hover) {
+    :host([theme*='tertiary']:not([active]):hover) {
+      opacity: 0.8;
     }
+  }
 
-    :host([theme~='tertiary'])::before,
-    :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']) {
-      padding: 0 calc(var(--lumo-button-size) / 6);
-    }
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
+  }
 
-    @media (hover: hover) {
-      :host([theme*='tertiary']:not([active]):hover) {
-        opacity: 0.8;
-      }
-    }
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+  }
 
-    :host([theme~='tertiary'][active]),
-    :host([theme~='tertiary-inline'][active]) {
-      opacity: 0.5;
-      transition-duration: 0s;
-    }
+  :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~='tertiary-inline']) {
-      margin: 0;
-      height: auto;
-      padding: 0;
-      line-height: inherit;
-      font-size: inherit;
-    }
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-primary-color-50pct);
+    color: var(--lumo-primary-contrast-color);
+  }
 
-    :host([theme~='tertiary-inline']) [part='label'] {
-      padding: 0;
-      overflow: visible;
-      line-height: inherit;
-    }
+  :host([theme~='primary']:hover)::before {
+    opacity: 0.1;
+  }
 
-    :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'][active])::before {
+    background-color: var(--lumo-shade-20pct);
+  }
 
-    :host([theme~='primary'][disabled]) {
-      background-color: var(--lumo-primary-color-50pct);
-      color: var(--lumo-primary-contrast-color);
+  @media (pointer: coarse) {
+    :host([theme~='primary'][active])::before {
+      background-color: var(--lumo-shade-60pct);
     }
 
-    :host([theme~='primary']:hover)::before {
-      opacity: 0.1;
+    :host([theme~='primary']:not([active]):hover)::before {
+      opacity: 0;
     }
+  }
 
-    :host([theme~='primary'][active])::before {
-      background-color: var(--lumo-shade-20pct);
-    }
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
 
-    @media (pointer: coarse) {
-      :host([theme~='primary'][active])::before {
-        background-color: var(--lumo-shade-60pct);
-      }
+  /* Colors (success, error, contrast) */
 
-      :host([theme~='primary']:not([active]):hover)::before {
-        opacity: 0;
-      }
-    }
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
 
-    :host([theme~='primary'][active])::after {
-      opacity: 0.2;
-    }
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+  }
 
-    /* Colors (success, error, contrast) */
+  :host([theme~='success'][theme~='primary'][disabled]) {
+    background-color: var(--lumo-success-color-50pct);
+  }
 
-    :host([theme~='success']) {
-      color: var(--lumo-success-text-color);
-    }
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
 
-    :host([theme~='success'][theme~='primary']) {
-      background-color: var(--lumo-success-color);
-      color: var(--lumo-success-contrast-color);
-    }
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
 
-    :host([theme~='success'][theme~='primary'][disabled]) {
-      background-color: var(--lumo-success-color-50pct);
-    }
+  :host([theme~='error'][theme~='primary'][disabled]) {
+    background-color: var(--lumo-error-color-50pct);
+  }
 
-    :host([theme~='error']) {
-      color: var(--lumo-error-text-color);
-    }
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
+  }
 
-    :host([theme~='error'][theme~='primary']) {
-      background-color: var(--lumo-error-color);
-      color: var(--lumo-error-contrast-color);
-    }
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
 
-    :host([theme~='error'][theme~='primary'][disabled]) {
-      background-color: var(--lumo-error-color-50pct);
-    }
+  :host([theme~='contrast'][theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-50pct);
+  }
 
-    :host([theme~='contrast']) {
-      color: var(--lumo-contrast);
-    }
+  /* Icons */
 
-    :host([theme~='contrast'][theme~='primary']) {
-      background-color: var(--lumo-contrast);
-      color: var(--lumo-base-color);
-    }
+  [part] ::slotted(vaadin-icon),
+  [part] ::slotted(iron-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
 
-    :host([theme~='contrast'][theme~='primary'][disabled]) {
-      background-color: var(--lumo-contrast-50pct);
-    }
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']),
+  [part] ::slotted(iron-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
 
-    /* Icons */
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
 
-    [part] ::slotted(vaadin-icon),
-    [part] ::slotted(iron-icon) {
-      display: inline-block;
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
+  [part='suffix'] {
+    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(vaadin-icon[icon^='vaadin:']),
-    [part] ::slotted(iron-icon[icon^='vaadin:']) {
-      padding: 0.25em;
-      box-sizing: border-box !important;
-    }
+  /* Icon-only */
 
-    [part='prefix'] {
-      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);
+  }
 
-    [part='suffix'] {
-      margin-left: 0.25em;
-      margin-right: -0.25em;
-    }
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
 
-    /* Icon-only */
+  /* RTL specific styles */
 
-    :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);
-    }
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
 
-    :host([theme~='icon']) [part='prefix'],
-    :host([theme~='icon']) [part='suffix'] {
-      margin-left: 0;
-      margin-right: 0;
-    }
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
 
-    /* RTL specific styles */
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;
 
-    :host([dir='rtl']) [part='prefix'] {
-      margin-left: 0.25em;
-      margin-right: -0.25em;
-    }
+registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
 
-    :host([dir='rtl']) [part='suffix'] {
-      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;
-    }
-  `,
-  { moduleId: 'lumo-button' }
-);
+export { button };

theme/material/vaadin-button-styles.js

@@ -6,176 +6,176 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-registerStyles(
-  'vaadin-button',
-  css`
+const 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(vaadin-icon),
+  [part] ::slotted(iron-icon) {
+    display: block;
+    width: 18px;
+    height: 18px;
+  }
 
-    [part] ::slotted(vaadin-icon),
-    [part] ::slotted(iron-icon) {
-      display: block;
-      width: 18px;
-      height: 18px;
-    }
+  [part='prefix'] ::slotted(vaadin-icon),
+  [part='prefix'] ::slotted(iron-icon) {
+    margin-right: 8px;
+    margin-left: -4px;
+  }
 
-    [part='prefix'] ::slotted(vaadin-icon),
-    [part='prefix'] ::slotted(iron-icon) {
-      margin-right: 8px;
-      margin-left: -4px;
-    }
+  [part='suffix'] ::slotted(vaadin-icon),
+  [part='suffix'] ::slotted(iron-icon) {
+    margin-left: 8px;
+    margin-right: -4px;
+  }
 
-    [part='suffix'] ::slotted(vaadin-icon),
-    [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(vaadin-icon),
+  :host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
+    margin-right: -4px;
+    margin-left: 8px;
+  }
 
-    :host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon),
-    :host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
-      margin-right: -4px;
-      margin-left: 8px;
-    }
+  :host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
+  :host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
+    margin-left: -4px;
+    margin-right: 8px;
+  }
+`;
 
-    :host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
-    :host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
-      margin-left: -4px;
-      margin-right: 8px;
-    }
-  `,
-  { moduleId: 'material-button' }
-);
+registerStyles('vaadin-button', button, { moduleId: 'material-button' });
+
+export { button };

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31664

increased by2.06%

Lines of code

594

increased by5.32%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@vaadin/field-base@^22.0.0-alpha5

• Updated@vaadin/vaadin-control-state-mixin@^22.0.0-alpha5

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha5

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha5