refactor!: update password-field button to not extend button (#7004)

packages/password-field/src/vaadin-password-field-button.js

@@ -3,35 +3,32 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html } from '@polymer/polymer/polymer-element.js';
-import { Button } from '@vaadin/button/src/vaadin-button.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin-password-field-button-styles' });
 
 /**
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
  *
  * @customElement
- * @extends Button
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
  * @private
  */
-class PasswordFieldButton extends Button {
+class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-password-field-button';
   }
 
   static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <slot name="tooltip"></slot>
-    `;
+    return html``;
   }
 }