Make sure the button's shadowdom is ready before starting any animations.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-button",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "description": "",
   "main": "tp-button.js",
   "scripts": {

tp-button.js

@@ -1,6 +1,6 @@
 /**
 @license
-Copyright (c) 2022 trading_peter
+Copyright (c) 2025 trading_peter
 This program is available under Apache License Version 2.0
 */
 
@@ -123,8 +123,8 @@ class TpButton extends EventHelpers(LitElement) {
 
   render() {
     return html`
-      <div class="wrap">
+      <div class="wrap" part="wrap">
-        <div class="label">
+        <div class="label" part="label">
           <slot></slot>
         </div>
         ${this.extended ? html`
@@ -200,6 +200,10 @@ class TpButton extends EventHelpers(LitElement) {
     this.unlisten(this, 'keypress', '_keyPressed');
   }
 
+  firstUpdated() {
+    this.listen(this, 'keypress', '_keyPressed');
+  }
+
   shouldUpdate(changes) {
     if (changes.has('submit') && this.submit) {
       this.extended = true;
@@ -230,6 +234,8 @@ class TpButton extends EventHelpers(LitElement) {
       return;
     }
 
+    await this.updateComplete;
+
     if (this._isAnimating) {
       this._queue.push('showSuccess');
       return;
@@ -249,6 +255,8 @@ class TpButton extends EventHelpers(LitElement) {
       return;
     }
 
+    await this.updateComplete;
+
     if (this._isAnimating) {
       this._queue.push('showError');
       return;
@@ -262,12 +270,14 @@ class TpButton extends EventHelpers(LitElement) {
     this.locked = false;
   }
 
-  showSpinner() {
+  async showSpinner() {
     if (!this.extended) {
       console.warn(this.tagName + ': Is not in extended mode!');
       return;
     }
 
+    await this.updateComplete;
+
     if (this._isAnimating) {
       this._queue.push('showSpinner');
       return;