@everymatrix/general-input 1.28.7 → 1.28.8

package/dist/components/password-input2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 import { i as inputFieldShared, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { r as registerStyles, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, g as ThemableMixin, E as ElementMixin, P as PolymerElement, i, G as SlotController } from './field-mixin.js';
+import { r as registerStyles, h as html, e as InputController, f as LabelledInputController, g as TooltipController, T as ThemableMixin, E as ElementMixin, P as PolymerElement, i, S as SlotController } from './field-mixin.js';
+import { P as PatternMixin } from './pattern-mixin.js';
 import { b as button, B as Button } from './vaadin-button.js';
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -16,7 +17,7 @@ registerStyles('vaadin-text-field', inputFieldShared, {
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -70,15 +71,6 @@ const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    // Workaround for https://github.com/Polymer/polymer/issues/5259
-    get __data() {
-      return this.__dataValue || {};
-    }
-
-    set __data(value) {
-      this.__dataValue = value;
-    }
-
     /**
      * @param {HTMLElement} input
      * @protected
@@ -100,6 +92,15 @@ const InputFieldMixin = (superclass) =>
       }
     }
 
+    // Workaround for https://github.com/Polymer/polymer/issues/5259
+    get __data() {
+      return this.__dataValue || {};
+    }
+
+    set __data(value) {
+      this.__dataValue = value;
+    }
+
     /**
      * Override an event listener from `FocusMixin`.
      * @param {boolean} focused
@@ -109,9 +110,7 @@ const InputFieldMixin = (superclass) =>
     _setFocused(focused) {
       super._setFocused(focused);
 
-      // Do not validate when focusout is caused by document
-      // losing focus, which happens on browser tab switch.
-      if (!focused && document.hasFocus()) {
+      if (!focused) {
         this.validate();
       }
     }
@@ -155,81 +154,7 @@ const InputFieldMixin = (superclass) =>
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin providing common text field functionality.
- *
- * @polymerMixin
- * @mixes InputFieldMixin
- */
-const TextFieldMixin = (superClass) =>
-  class TextFieldMixinClass extends InputFieldMixin(superClass) {
-    static get properties() {
-      return {
-        /**
-         * Maximum number of characters (in Unicode code points) that the user can enter.
-         */
-        maxlength: {
-          type: Number,
-        },
-
-        /**
-         * Minimum number of characters (in Unicode code points) that the user can enter.
-         */
-        minlength: {
-          type: Number,
-        },
-
-        /**
-         * A regular expression that the value is checked against.
-         * The pattern must match the entire value, not just some subset.
-         */
-        pattern: {
-          type: String,
-        },
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];
-    }
-
-    static get constraints() {
-      return [...super.constraints, 'maxlength', 'minlength', 'pattern'];
-    }
-
-    constructor() {
-      super();
-      this._setType('text');
-    }
-
-    /** @protected */
-    get clearElement() {
-      return this.$.clearButton;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addController(
-        new InputController(this, (input) => {
-          this._setInputElement(input);
-          this._setFocusElement(input);
-          this.stateTarget = input;
-          this.ariaTarget = input;
-        }),
-      );
-      this.addController(new LabelledInputController(this.inputElement, this._labelController));
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -290,7 +215,7 @@ registerStyles('vaadin-text-field', inputFieldShared$1, { moduleId: 'vaadin-text
  * `focus-ring`        | Set when the element is keyboard focused | :host
  * `readonly`          | Set to a readonly text field | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
@@ -298,13 +223,13 @@ registerStyles('vaadin-text-field', inputFieldShared$1, { moduleId: 'vaadin-text
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
- * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes TextFieldMixin
+ * @mixes PatternMixin
+ * @mixes InputFieldMixin
  */
-class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-text-field';
   }
@@ -366,22 +291,49 @@ class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement
     };
   }
 
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'maxlength', 'minlength'];
+  }
+
+  static get constraints() {
+    return [...super.constraints, 'maxlength', 'minlength'];
+  }
+
+  constructor() {
+    super();
+    this._setType('text');
+  }
+
+  /** @protected */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
   /** @protected */
   ready() {
     super.ready();
 
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
     this._tooltipController = new TooltipController(this);
     this._tooltipController.setPosition('top');
-    this._tooltipController.setAriaTarget(this.inputElement);
     this.addController(this._tooltipController);
   }
 }
 
-defineCustomElement$1(TextField);
+customElements.define(TextField.is, TextField);
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -406,7 +358,7 @@ registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -434,14 +386,13 @@ registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { mod
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
  *
- * @customElement
  * @extends Button
  * @private
  */
@@ -466,11 +417,11 @@ class PasswordFieldButton extends Button {
   }
 }
 
-defineCustomElement$1(PasswordFieldButton);
+customElements.define(PasswordFieldButton.is, PasswordFieldButton);
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -506,7 +457,7 @@ let memoizedTemplate;
  * -------------------|---------------------------------
  * `password-visible` | Set when the password is visible
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
@@ -514,7 +465,6 @@ let memoizedTemplate;
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
- * @customElement
  * @extends TextField
  */
 class PasswordField extends TextField {
@@ -588,14 +538,6 @@ class PasswordField extends TextField {
     return ['__i18nChanged(i18n.*)'];
   }
 
-  constructor() {
-    super();
-    this._setType('password');
-    this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
-    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
-    this.__lastChange = '';
-  }
-
   /** @protected */
   get slotStyles() {
     const tag = this.localName;
@@ -614,20 +556,31 @@ class PasswordField extends TextField {
     return this._revealButtonController && this._revealButtonController.node;
   }
 
+  constructor() {
+    super();
+    this._setType('password');
+    this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
+    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
+    this.__lastChange = '';
+  }
+
   /** @protected */
   ready() {
     super.ready();
 
     this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
 
-    this._revealButtonController = new SlotController(this, 'reveal', 'vaadin-password-field-button', {
-      initializer: (btn) => {
-        btn.disabled = this.disabled;
+    this._revealButtonController = new SlotController(
+      this,
+      'reveal',
+      () => document.createElement('vaadin-password-field-button'),
+      (host, btn) => {
+        btn.disabled = host.disabled;
 
-        btn.addEventListener('click', this.__boundRevealButtonClick);
-        btn.addEventListener('mousedown', this.__boundRevealButtonMouseDown);
+        btn.addEventListener('click', host.__boundRevealButtonClick);
+        btn.addEventListener('mousedown', host.__boundRevealButtonMouseDown);
       },
-    });
+    );
     this.addController(this._revealButtonController);
 
     this.__updateAriaLabel(this.i18n);
@@ -784,7 +737,7 @@ class PasswordField extends TextField {
   }
 }
 
-defineCustomElement$1(PasswordField);
+customElements.define(PasswordField.is, PasswordField);
 
 const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.password__wrapper--autofilled{pointer-events:none}.password__wrapper--autofilled .password__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__wrapper--autofilled .password__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.password__input{width:inherit;border:none}.password__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.password__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.password__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);background-color:var(--emfe-w-color-white, #FFFFFF);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;position:relative;margin-bottom:unset;height:44px;padding:0;width:100%}.password__input::part(reveal-button){position:relative;right:10px}.password__input::part(reveal-button)::before{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__input>input{padding:5px 15px}.password__input>input:placeholder-shown{color:var(--emfe-w-color-gray-150, #828282)}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:var(--emfe-w-color-white, #FFFFFF);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:150px;border:1px solid #B0B0B0;}.password__complexity meter{border-color:transparent;}.password__complexity meter[value=\"1\"]::-moz-meter-bar{background-color:var(--emfe-w-color-valid, #48952a)}.password__complexity meter[value=\"1\"]::-webkit-meter-optimum-value{background-color:var(--emfe-w-color-valid, #48952a)}.password__complexity meter:not([value=\"1\"])::-moz-meter-bar{background-color:var(--emfe-w-color-error, #FD2839)}.password__complexity meter:not([value=\"1\"])::-webkit-meter-optimum-value{background-color:var(--emfe-w-color-error, #FD2839)}.password__complexity--strength{display:flex;justify-content:space-evenly;align-items:center}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--hidden{display:none}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid var(--emfe-w-color-gray-150, #828282);border-right:0 solid var(--emfe-w-color-gray-150, #828282);border-left:1px solid var(--emfe-w-color-gray-150, #828282);border-bottom:0 solid var(--emfe-w-color-gray-150, #828282);bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:var(--emfe-w-color-white, #FFFFFF)}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-150, #828282);color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
 

package/dist/components/pattern-mixin.js

@@ -0,0 +1,85 @@
+import { y as Debouncer, z as timeOut } from './field-mixin.js';
+import { I as InputConstraintsMixin } from './input-field-shared-styles.js';
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ *
+ * @polymerMixin
+ * @mixes InputConstraintsMixin
+ */
+const PatternMixin = (superclass) =>
+  class PatternMixinClass extends InputConstraintsMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+
+        /**
+         * When set to true, user is prevented from typing a value that
+         * conflicts with the given `pattern`.
+         * @attr {boolean} prevent-invalid-input
+         * @deprecated Please use `allowedCharPattern` instead.
+         */
+        preventInvalidInput: {
+          type: Boolean,
+          observer: '_preventInvalidInputChanged',
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'pattern'];
+    }
+
+    /** @private */
+    _checkInputValue() {
+      if (this.preventInvalidInput) {
+        const input = this.inputElement;
+        if (input && input.value.length > 0 && !this.checkValidity()) {
+          input.value = this.value || '';
+          // Add input-prevented attribute for 200ms
+          this.setAttribute('input-prevented', '');
+          this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
+            this.removeAttribute('input-prevented');
+          });
+        }
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      this._checkInputValue();
+
+      super._onInput(event);
+    }
+
+    /** @private */
+    _preventInvalidInputChanged(preventInvalidInput) {
+      if (preventInvalidInput) {
+        console.warn(
+          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
+        );
+      }
+    }
+  };
+
+export { PatternMixin as P };

package/dist/components/vaadin-button.js

@@ -1,4 +1,4 @@
-import { i, r as registerStyles, Q as TabindexMixin, l as FocusMixin, E as ElementMixin, g as ThemableMixin, H as ControllerMixin, P as PolymerElement, T as TooltipController, f as defineCustomElement, h as html } from './field-mixin.js';
+import { i, r as registerStyles, N as TabindexMixin, l as FocusMixin, E as ElementMixin, T as ThemableMixin, C as ControllerMixin, P as PolymerElement, h as html, g as TooltipController } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
 const button = i`
@@ -21,7 +21,6 @@ const button = i`
     -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
   }
 
   /* Set only for the internal parts so we don't affect the host vertical alignment */
@@ -52,7 +51,10 @@ const button = i`
     /* We rely on the host always being relative */
     position: absolute;
     z-index: 1;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-color: currentColor;
     border-radius: inherit;
     opacity: 0;
@@ -197,14 +199,16 @@ const button = i`
 
   /* Icons */
 
-  [part] ::slotted(vaadin-icon) {
+  [part] ::slotted(vaadin-icon),
+  [part] ::slotted(iron-icon) {
     display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }
 
   /* 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(vaadin-icon[icon^='vaadin:']),
+  [part] ::slotted(iron-icon[icon^='vaadin:']) {
     padding: 0.25em;
     box-sizing: border-box !important;
   }
@@ -256,90 +260,7 @@ registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const buttonStyles = i`
-  :host {
-    display: inline-block;
-    position: relative;
-    outline: none;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  /* 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 {
-    content: '\\2003';
-    display: inline-block;
-    width: 0;
-    max-height: 100%;
-  }
-
-  .vaadin-button-container {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    min-height: inherit;
-    text-shadow: inherit;
-  }
-
-  [part='prefix'],
-  [part='suffix'] {
-    flex: none;
-  }
-
-  [part='label'] {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([focused]) {
-      outline-width: 2px;
-    }
-
-    :host([disabled]) {
-      outline-color: GrayText;
-    }
-  }
-`;
-
-const buttonTemplate = (html) => html`
-  <div class="vaadin-button-container">
-    <span part="prefix" aria-hidden="true">
-      <slot name="prefix"></slot>
-    </span>
-    <span part="label">
-      <slot></slot>
-    </span>
-    <span part="suffix" aria-hidden="true">
-      <slot name="suffix"></slot>
-    </span>
-  </div>
-  <slot name="tooltip"></slot>
-`;
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -362,9 +283,7 @@ const ButtonMixin = (superClass) =>
          * @protected
          */
         tabindex: {
-          type: Number,
           value: 0,
-          reflectToAttribute: true,
         },
       };
     }
@@ -410,10 +329,6 @@ const ButtonMixin = (superClass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
-      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-        return;
-      }
-
       if (this._activeKeys.includes(event.key)) {
         event.preventDefault();
 
@@ -426,12 +341,10 @@ const ButtonMixin = (superClass) =>
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles' });
-
 /**
  * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
  *
@@ -458,9 +371,8 @@ registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles'
  * `focus-ring` | Set when the button is focused using the keyboard.
  * `focused`    | Set when the button is focused.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * @customElement
  * @extends HTMLElement
  * @mixes ButtonMixin
  * @mixes ControllerMixin
@@ -473,7 +385,66 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   }
 
   static get template() {
-    return buttonTemplate(html);
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+          position: relative;
+          outline: none;
+          white-space: nowrap;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        /* 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 {
+          content: '\\2003';
+          display: inline-block;
+          width: 0;
+          max-height: 100%;
+        }
+
+        .vaadin-button-container {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: 100%;
+          height: 100%;
+          min-height: inherit;
+          text-shadow: inherit;
+        }
+
+        [part='prefix'],
+        [part='suffix'] {
+          flex: none;
+        }
+
+        [part='label'] {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      </style>
+      <div class="vaadin-button-container">
+        <span part="prefix" aria-hidden="true">
+          <slot name="prefix"></slot>
+        </span>
+        <span part="label">
+          <slot></slot>
+        </span>
+        <span part="suffix" aria-hidden="true">
+          <slot name="suffix"></slot>
+        </span>
+      </div>
+      <slot name="tooltip"></slot>
+    `;
   }
 
   /** @protected */
@@ -485,6 +456,6 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   }
 }
 
-defineCustomElement(Button);
+customElements.define(Button.is, Button);
 
 export { Button as B, button as b };