@vaadin/button 24.6.5 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/button",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.6.5",
-    "@vaadin/component-base": "~24.6.5",
-    "@vaadin/vaadin-lumo-styles": "~24.6.5",
-    "@vaadin/vaadin-material-styles": "~24.6.5",
-    "@vaadin/vaadin-themable-mixin": "~24.6.5",
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.5",
-    "@vaadin/icon": "~24.6.5",
-    "@vaadin/test-runner-commands": "~24.6.5",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/icon": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fc109a4234a1f60e89717ab1c0dc8fb4451aa418"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/vaadin-button-base.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult, TemplateResult } from 'lit';

package/src/vaadin-button-base.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
@@ -12,7 +12,6 @@ export const buttonStyles = css`
     outline: none;
     white-space: nowrap;
     -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
   }
 
@@ -20,6 +19,11 @@ export const buttonStyles = css`
     display: none !important;
   }
 
+  :host([disabled]) {
+    pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
+    cursor: not-allowed;
+  }
+
   /* Aligns the button with form fields when placed on the same line.
   Note, to make it work, the form fields should have the same "::before" pseudo-element. */
   .vaadin-button-container::before {

package/src/vaadin-button-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-button-mixin.js

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
 
+const INTERACTION_EVENTS = ['mousedown', 'mouseup', 'click', 'dblclick', 'keypress', 'keydown', 'keyup'];
+
 /**
  * A mixin providing common button functionality.
  *
@@ -17,20 +19,17 @@ import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
  */
 export const ButtonMixin = (superClass) =>
   class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
-      };
+    constructor() {
+      super();
+
+      this.__onInteractionEvent = this.__onInteractionEvent.bind(this);
+
+      INTERACTION_EVENTS.forEach((eventType) => {
+        this.addEventListener(eventType, this.__onInteractionEvent, true);
+      });
+
+      // Set tabindex to 0 by default
+      this.tabindex = 0;
     }
 
     /**
@@ -54,6 +53,10 @@ export const ButtonMixin = (superClass) =>
       if (!this.hasAttribute('role')) {
         this.setAttribute('role', 'button');
       }
+
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        this.style.setProperty('--_vaadin-button-disabled-pointer-events', 'auto');
+      }
     }
 
     /**
@@ -86,4 +89,21 @@ export const ButtonMixin = (superClass) =>
         this.click();
       }
     }
+
+    /** @private */
+    __onInteractionEvent(event) {
+      if (this.__shouldSuppressInteractionEvent(event)) {
+        event.stopImmediatePropagation();
+      }
+    }
+
+    /**
+     * Returns whether to suppress interaction events like `click`, `keydown`, etc.
+     * By default suppresses all interaction events when the button is disabled.
+     *
+     * @private
+     */
+    __shouldSuppressInteractionEvent(_event) {
+      return this.disabled;
+    }
   };

package/src/vaadin-button.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -36,7 +36,26 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
+  /**
+   * When disabled, the button is rendered as "dimmed" and prevents all
+   * user interactions (mouse and keyboard).
+   *
+   * Since disabled buttons are not focusable and cannot react to hover
+   * events by default, it can cause accessibility issues by making them
+   * entirely invisible to assistive technologies, and prevents the use
+   * of Tooltips to explain why the action is not available. This can be
+   * addressed by enabling the feature flag `accessibleDisabledButtons`,
+   * which makes disabled buttons focusable and hoverable, while still
+   * preventing them from being triggered:
+   *
+   * ```
+   * // Set before any button is attached to the DOM.
+   * window.Vaadin.featureFlags.accessibleDisabledButtons = true
+   * ```
+   */
+  disabled: boolean;
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-button.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -50,6 +50,32 @@ registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles'
  * @mixes ThemableMixin
  */
 class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
+  static get properties() {
+    return {
+      /**
+       * When disabled, the button is rendered as "dimmed" and prevents all
+       * user interactions (mouse and keyboard).
+       *
+       * Since disabled buttons are not focusable and cannot react to hover
+       * events by default, it can cause accessibility issues by making them
+       * entirely invisible to assistive technologies, and prevents the use
+       * of Tooltips to explain why the action is not available. This can be
+       * addressed by enabling the feature flag `accessibleDisabledButtons`,
+       * which makes disabled buttons focusable and hoverable, while still
+       * preventing them from being triggered:
+       *
+       * ```
+       * // Set before any button is attached to the DOM.
+       * window.Vaadin.featureFlags.accessibleDisabledButtons = true
+       * ```
+       */
+      disabled: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
   static get is() {
     return 'vaadin-button';
   }
@@ -65,6 +91,11 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
+
+  /** @override */
+  __shouldAllowFocusWhenDisabled() {
+    return window.Vaadin.featureFlags.accessibleDisabledButtons;
+  }
 }
 
 defineCustomElement(Button);

package/src/vaadin-lit-button.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export * from './vaadin-button.js';

package/src/vaadin-lit-button.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
@@ -42,6 +42,11 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
+
+  /** @override */
+  __shouldAllowFocusWhenDisabled() {
+    return window.Vaadin.featureFlags.accessibleDisabledButtons;
+  }
 }
 
 defineCustomElement(Button);

package/theme/lumo/vaadin-button-styles.js

@@ -75,7 +75,7 @@ const button = css`
   /* Hover */
 
   @media (any-hover: hover) {
-    :host(:hover)::before {
+    :host(:not([disabled]):hover)::before {
       opacity: 0.02;
     }
   }
@@ -159,7 +159,7 @@ const button = css`
   }
 
   @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
+    :host([theme~='primary']:not([disabled]):hover)::before {
       opacity: 0.05;
     }
   }
@@ -213,7 +213,6 @@ const button = css`
   /* Disabled state. Keep selectors after other color variants. */
 
   :host([disabled]) {
-    pointer-events: none;
     color: var(--lumo-disabled-text-color);
   }
 

package/theme/material/vaadin-button-styles.js

@@ -60,7 +60,7 @@ const button = css`
     vertical-align: middle;
   }
 
-  :host(:hover)::before,
+  :host(:hover:not([disabled]))::before,
   :host([focus-ring])::before {
     opacity: 0.08;
     transition-duration: 0.2s;
@@ -77,13 +77,12 @@ const button = css`
     transition: 0s;
   }
 
-  :host(:hover:not([active]))::after {
+  :host(:hover:not([active]):not([disabled]))::after {
     transform: translate(-50%, -50%) scale(1);
     opacity: 0;
   }
 
   :host([disabled]) {
-    pointer-events: none;
     color: var(--material-disabled-text-color);
   }
 
@@ -107,7 +106,7 @@ const button = css`
     background-color: var(--material-secondary-background-color);
   }
 
-  :host([theme~='contained']:hover) {
+  :host([theme~='contained']:not([disabled]):hover) {
     box-shadow: var(--material-shadow-elevation-4dp);
   }
 
@@ -150,7 +149,7 @@ const button = css`
     transform: translate(50%, -50%) scale(0.0000001);
   }
 
-  :host(:hover:not([active])[dir='rtl'])::after {
+  :host(:hover:not([active]):not([disabled])[dir='rtl'])::after {
     transform: translate(50%, -50%) scale(1);
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12,7 +12,7 @@
           "attributes": [
             {
               "name": "disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
               "value": {
                 "type": [
                   "boolean",
@@ -37,7 +37,7 @@
             "properties": [
               {
                 "name": "disabled",
-                "description": "If true, the user cannot interact with this element.",
+                "description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
                 "value": {
                   "type": [
                     "boolean",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -21,7 +21,7 @@
           "attributes": [
             {
               "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
               "value": {
                 "kind": "expression"
               }