@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Button.d.ts

@@ -1,61 +1,56 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import type { AccessibilityAttributes, PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
+import type { IFormElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
+import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import IconMode from "./types/IconMode.js";
+/**
+ * Interface for components that may be used as a button inside numerous higher-order components
+ * @public
+ */
+interface IButton extends HTMLElement, ITabbable {
+    nonInteractive: boolean;
+}
+type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "hasPopup" | "controls">;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-button</code> component represents a simple push button.
- * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing
+ * The `ui5-button` component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing
  * certain keyboard keys, such as Enter.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify
+ * For the `ui5-button` UI, you can define text, icon, or both. You can also specify
  * whether the text or the icon is displayed first.
- * <br><br>
+ *
  * You can choose from a set of predefined types that offer different
  * styling to correspond to the triggered action.
- * <br><br>
- * You can set the <code>ui5-button</code> as enabled or disabled. An enabled
- * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes
- * its style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
- *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-button</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>button - Used to style the native button element</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
+ * You can set the `ui5-button` as enabled or disabled. An enabled
+ * `ui5-button` can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.
  *
- * <code>import "@ui5/webcomponents/dist/Button";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Button.js";`
+ * @csspart button - Used to style the native button element
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Button
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-button
- * @implements sap.ui.webc.main.IButton
+ * @extends UI5Element
+ * @implements { IButton }
  * @public
  */
-declare class Button extends UI5Element implements IFormElement {
+declare class Button extends UI5Element implements IButton, IFormElement {
     /**
      * Defines the component design.
-     *
-     * @type {sap.ui.webc.main.types.ButtonDesign}
-     * @name sap.ui.webc.main.Button.prototype.design
-     * @defaultvalue "Default"
+     * @default "Default"
      * @public
      */
     design: `${ButtonDesign}`;
@@ -63,129 +58,104 @@ declare class Button extends UI5Element implements IFormElement {
      * Defines whether the component is disabled.
      * A disabled component can't be pressed or
      * focused, and it is not in the tab chain.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Button.prototype.disabled
-     * @defaultvalue false
+     * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the icon, displayed as graphical element within the component.
      * The SAP-icons font provides numerous options.
-     * <br><br>
-     * Example:
-     *
-     * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Button.prototype.icon
-     * @defaultvalue ""
+     * Example:
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default ""
      * @public
      */
     icon: string;
     /**
-     * Defines whether the icon should be displayed after the component text.
+     * Defines the icon, displayed as graphical element within the component after the button text.
+     *
+     * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
+     * Usage of `endIcon` only should be avoided.
+     *
+     * The SAP-icons font provides numerous options.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Button.prototype.iconEnd
-     * @defaultvalue false
+     * Example:
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default ""
      * @public
      */
-    iconEnd: boolean;
+    endIcon: string;
     /**
-     * When set to <code>true</code>, the component will
-     * automatically submit the nearest HTML form element on <code>press</code>.
-     * <br><br>
-     * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+     * When set to `true`, the component will
+     * automatically submit the nearest HTML form element on `press`.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Button.prototype.submits
-     * @defaultvalue false
+     * **Note:** This property is only applicable within the context of an HTML Form element.`
+     * @default false
      * @public
      * @deprecated Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button".
      */
     submits: boolean;
     /**
      * Defines the tooltip of the component.
-     * <br>
-     * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
-     * @type {string}
-     * @name sap.ui.webc.main.Button.prototype.tooltip
-     * @defaultvalue ""
+     *
+     * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+     * @default ""
      * @public
      * @since 1.2.0
      */
     tooltip: string;
     /**
      * Defines the accessible ARIA name of the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Button.prototype.accessibleName
-     * @defaultvalue undefined
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Button.prototype.accessibleNameRef
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.1.0
      */
     accessibleNameRef: string;
     /**
-     * An object of strings that defines several additional accessibility attribute values
-     * for customization depending on the use case.
+     * Defines the additional accessibility attributes that will be applied to the component.
+     * The following fields are supported:
+     *
+     * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+     * Accepts the following string values: `true` or `false`
      *
-     * It supports the following fields:
+     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+     *
+     * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
+     * Accepts a lowercase string value.
      *
-     * <ul>
-     * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
-     *			<ul>
-     *				<li><code>true</code></li>
-     *				<li><code>false</code></li>
-     *			</ul>
-     * 		</li>
-     * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
-     * 			<ul>
-     *				<li><code>Dialog</code></li>
-     *				<li><code>Grid</code></li>
-     *				<li><code>ListBox</code></li>
-     *				<li><code>Menu</code></li>
-     *				<li><code>Tree</code></li>
-     * 			</ul>
-     * 		</li>
-     * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
-     * </ul>
-     * @type {object}
-     * @name sap.ui.webc.main.Button.prototype.accessibilityAttributes
      * @public
      * @since 1.2.0
+     * @default {}
      */
-    accessibilityAttributes: {
-        expanded: "true" | "false";
-        hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree";
-        controls: string;
-    };
+    accessibilityAttributes: ButtonAccessibilityAttributes;
     /**
      * Defines whether the button has special form-related functionality.
      *
-     * <br><br>
-     * <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-     *
-     * @type {sap.ui.webc.main.types.ButtonType}
-     * @name sap.ui.webc.main.Button.prototype.type
-     * @defaultvalue "Button"
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default "Button"
      * @public
      * @since 1.15.0
      */
     type: `${ButtonType}`;
+    /**
+     * Describes the accessibility role of the button.
+     *
+     * **Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
+     *
+     * @default "Button"
+     * @public
+     * @since 1.23
+     */
+    accessibleRole: `${ButtonAccessibleRole}`;
     /**
      * Used to switch the active state (pressed or not) of the component.
      * @private
@@ -197,17 +167,17 @@ declare class Button extends UI5Element implements IFormElement {
      */
     iconOnly: boolean;
     /**
-     * Indicates if the elements is on focus
+     * Indicates if the elements has a slotted icon
      * @private
      */
-    focused: boolean;
+    hasIcon: boolean;
     /**
-     * Indicates if the elements has a slotted icon
+     * Indicates if the elements has a slotted end icon
      * @private
      */
-    hasIcon: boolean;
+    hasEndIcon: boolean;
     /**
-     * Indicates if the element if focusable
+     * Indicates if the element is focusable
      * @private
      */
     nonInteractive: boolean;
@@ -216,25 +186,25 @@ declare class Button extends UI5Element implements IFormElement {
      * @private
      */
     buttonTitle?: string;
+    /**
+     * @private
+     */
     _iconSettings: object;
     /**
      * Defines the tabIndex of the component.
      * @private
      */
-    _tabIndex: string;
+    forcedTabIndex: string;
     /**
      * @since 1.0.0-rc.13
      * @private
      */
     _isTouch: boolean;
+    _cancelAction: boolean;
     /**
      * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.Button.prototype.default
-     * @slot
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      * @public
      */
     text: Array<Node>;
@@ -253,12 +223,15 @@ declare class Button extends UI5Element implements IFormElement {
     _onfocusout(): void;
     _onfocusin(e: FocusEvent): void;
     _setActiveState(active: boolean): void;
+    get _hasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
     get hasButtonType(): boolean;
-    get iconRole(): "" | "presentation";
+    get iconMode(): "" | IconMode.Decorative;
+    get endIconMode(): "" | IconMode.Decorative;
     get isIconOnly(): boolean;
     static typeTextMappings(): Record<string, I18nText>;
     get buttonTypeText(): string;
-    get tabIndexValue(): string;
+    get effectiveAccRole(): string;
+    get tabIndexValue(): string | undefined;
     get showIconTooltip(): boolean;
     get ariaLabelText(): string | undefined;
     get _isSubmit(): boolean;
@@ -266,3 +239,4 @@ declare class Button extends UI5Element implements IFormElement {
     static onDefine(): Promise<void>;
 }
 export default Button;
+export type { ButtonAccessibilityAttributes, IButton, };

package/dist/Button.js

@@ -11,18 +11,20 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isEscape, isShift, } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { markEvent } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import { getIconAccessibleName } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
-import { isPhone, isTablet, isCombi, isDesktop, isSafari, } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isSafari, } from "@ui5/webcomponents-base/dist/Device.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import { submitForm, resetForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
+import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
+import IconMode from "./types/IconMode.js";
 import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
@@ -31,45 +33,32 @@ let activeButton = null;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-button</code> component represents a simple push button.
- * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing
+ * The `ui5-button` component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing
  * certain keyboard keys, such as Enter.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify
+ * For the `ui5-button` UI, you can define text, icon, or both. You can also specify
  * whether the text or the icon is displayed first.
- * <br><br>
+ *
  * You can choose from a set of predefined types that offer different
  * styling to correspond to the triggered action.
- * <br><br>
- * You can set the <code>ui5-button</code> as enabled or disabled. An enabled
- * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes
- * its style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
- *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-button</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>button - Used to style the native button element</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
+ * You can set the `ui5-button` as enabled or disabled. An enabled
+ * `ui5-button` can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.
  *
- * <code>import "@ui5/webcomponents/dist/Button";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Button.js";`
+ * @csspart button - Used to style the native button element
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Button
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-button
- * @implements sap.ui.webc.main.IButton
+ * @extends UI5Element
+ * @implements { IButton }
  * @public
  */
 let Button = Button_1 = class Button extends UI5Element {
@@ -97,18 +86,14 @@ let Button = Button_1 = class Button extends UI5Element {
         };
     }
     onEnterDOM() {
-        this._isTouch = (isPhone() || isTablet()) && !isCombi();
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     async onBeforeRendering() {
-        const formSupport = getFeature("FormSupport");
-        if (this.type !== ButtonType.Button && !formSupport) {
-            console.warn(`In order for the "type" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
-        if (this.submits && !formSupport) {
-            console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
-        this.iconOnly = this.isIconOnly;
         this.hasIcon = !!this.icon;
+        this.hasEndIcon = !!this.endIcon;
+        this.iconOnly = this.isIconOnly;
         this.buttonTitle = this.tooltip || await getIconAccessibleName(this.icon);
     }
     _onclick(e) {
@@ -116,19 +101,18 @@ let Button = Button_1 = class Button extends UI5Element {
             return;
         }
         markEvent(e, "button");
-        const formSupport = getFeature("FormSupport");
-        if (formSupport && this._isSubmit) {
-            formSupport.triggerFormSubmit(this);
+        if (this._isSubmit) {
+            submitForm(this);
         }
-        if (formSupport && this._isReset) {
-            formSupport.triggerFormReset(this);
+        if (this._isReset) {
+            resetForm(this);
         }
         if (isSafari()) {
             this.getDomRef()?.focus();
         }
     }
     _onmousedown(e) {
-        if (this.nonInteractive || this._isTouch) {
+        if (this.nonInteractive) {
             return;
         }
         markEvent(e, "button");
@@ -151,12 +135,19 @@ let Button = Button_1 = class Button extends UI5Element {
         markEvent(e, "button");
     }
     _onkeydown(e) {
+        this._cancelAction = isShift(e) || isEscape(e);
         markEvent(e, "button");
         if (isSpace(e) || isEnter(e)) {
             this._setActiveState(true);
         }
+        else if (this._cancelAction) {
+            this._setActiveState(false);
+        }
     }
     _onkeyup(e) {
+        if (this._cancelAction) {
+            e.preventDefault();
+        }
         if (isSpace(e) || isEnter(e)) {
             if (this.active) {
                 this._setActiveState(false);
@@ -170,18 +161,12 @@ let Button = Button_1 = class Button extends UI5Element {
         if (this.active) {
             this._setActiveState(false);
         }
-        if (isDesktop()) {
-            this.focused = false;
-        }
     }
     _onfocusin(e) {
         if (this.nonInteractive) {
             return;
         }
         markEvent(e, "button");
-        if (isDesktop()) {
-            this.focused = true;
-        }
     }
     _setActiveState(active) {
         const eventPrevented = !this.fireEvent("_active-state-change", null, true);
@@ -190,14 +175,23 @@ let Button = Button_1 = class Button extends UI5Element {
         }
         this.active = active;
     }
+    get _hasPopup() {
+        return this.accessibilityAttributes.hasPopup;
+    }
     get hasButtonType() {
         return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
     }
-    get iconRole() {
+    get iconMode() {
         if (!this.icon) {
             return "";
         }
-        return "presentation";
+        return IconMode.Decorative;
+    }
+    get endIconMode() {
+        if (!this.endIcon) {
+            return "";
+        }
+        return IconMode.Decorative;
     }
     get isIconOnly() {
         return !willShowContent(this.text);
@@ -212,12 +206,18 @@ let Button = Button_1 = class Button extends UI5Element {
     get buttonTypeText() {
         return Button_1.i18nBundle.getText(Button_1.typeTextMappings()[this.design]);
     }
+    get effectiveAccRole() {
+        return this.accessibleRole.toLowerCase();
+    }
     get tabIndexValue() {
+        if (this.disabled) {
+            return;
+        }
         const tabindex = this.getAttribute("tabindex");
         if (tabindex) {
             return tabindex;
         }
-        return this.nonInteractive ? "-1" : this._tabIndex;
+        return this.nonInteractive ? "-1" : this.forcedTabIndex;
     }
     get showIconTooltip() {
         return this.iconOnly && !this.tooltip;
@@ -245,8 +245,8 @@ __decorate([
     property()
 ], Button.prototype, "icon", void 0);
 __decorate([
-    property({ type: Boolean })
-], Button.prototype, "iconEnd", void 0);
+    property()
+], Button.prototype, "endIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "submits", void 0);
@@ -265,6 +265,9 @@ __decorate([
 __decorate([
     property({ type: ButtonType, defaultValue: ButtonType.Button })
 ], Button.prototype, "type", void 0);
+__decorate([
+    property({ type: ButtonAccessibleRole, defaultValue: ButtonAccessibleRole.Button })
+], Button.prototype, "accessibleRole", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "active", void 0);
@@ -273,10 +276,10 @@ __decorate([
 ], Button.prototype, "iconOnly", void 0);
 __decorate([
     property({ type: Boolean })
-], Button.prototype, "focused", void 0);
+], Button.prototype, "hasIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Button.prototype, "hasIcon", void 0);
+], Button.prototype, "hasEndIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "nonInteractive", void 0);
@@ -288,30 +291,33 @@ __decorate([
 ], Button.prototype, "_iconSettings", void 0);
 __decorate([
     property({ defaultValue: "0", noAttribute: true })
-], Button.prototype, "_tabIndex", void 0);
+], Button.prototype, "forcedTabIndex", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "_isTouch", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Button.prototype, "_cancelAction", void 0);
 __decorate([
     slot({ type: Node, "default": true })
 ], Button.prototype, "text", void 0);
 Button = Button_1 = __decorate([
     customElement({
         tag: "ui5-button",
+        formAssociated: true,
         languageAware: true,
         renderer: litRender,
         template: ButtonTemplate,
         styles: buttonCss,
         dependencies: [Icon],
+        shadowRootOptions: { delegatesFocus: true },
     })
     /**
      * Fired when the component is activated either with a
      * mouse/tap or by using the Enter or Space key.
-     * <br><br>
-     * <b>Note:</b> The event will not be fired if the <code>disabled</code>
-     * property is set to <code>true</code>.
      *
-     * @event sap.ui.webc.main.Button#click
+     * **Note:** The event will not be fired if the `disabled`
+     * property is set to `true`.
      * @public
      * @native
      */