diff --git a/spine-ts/spine-webgl/example/webcomponent-gui.html b/spine-ts/spine-webgl/example/webcomponent-gui.html
index 305857531..d62a0c2cb 100644
--- a/spine-ts/spine-webgl/example/webcomponent-gui.html
+++ b/spine-ts/spine-webgl/example/webcomponent-gui.html
@@ -45,7 +45,7 @@
                 identifier="boi"
                 atlas="assets/spineboy-pma.atlas"
                 skeleton="assets/spineboy-pro.skel"
-                auto-recalculate-bounds
+                auto-calculate-bounds
                 debug
             ></spine-widget>
         </div>
@@ -98,7 +98,7 @@
                 padBottom: 0,
                 padTop: 0,
                 customBounds: false,
-                autoRecalculateBounds: true,
+                autoCalculateBounds: true,
                 fit: "contain",
                 mode: "inside",
                 scaleX: 1,
@@ -296,10 +296,10 @@
 
             const boundsFolder = gui.addFolder( 'Bounds' );
             boundsFolder
-                .add(myObject, 'autoRecalculateBounds')
-                .name( 'auto-recalculate-bounds' )
+                .add(myObject, 'autoCalculateBounds')
+                .name( 'auto-calculate-bounds' )
                 .onChange(value => {
-                    boi.setAttribute("auto-recalculate-bounds", value)
+                    boi.setAttribute("auto-calculate-bounds", value)
                 });
 
             boundsFolder
diff --git a/spine-ts/spine-webgl/example/webcomponent-tutorial.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
index cd9f251b7..aa892c733 100644
--- a/spine-ts/spine-webgl/example/webcomponent-tutorial.html
+++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
@@ -589,7 +589,7 @@
                 setInterval(() => {
                     const newAnimation = isRoaring ? "walk" : "roar";
                     state.setAnimation(0, newAnimation, true);
-                    widget.recalculateBounds(); // scale the skeleton based on the new animation
+                    widget.calculateBounds(); // scale the skeleton based on the new animation
                     isRoaring = !isRoaring;
                 }, 4000);
             })();
@@ -616,7 +616,7 @@
     setInterval(() => {
         const newAnimation = isRoaring ? "walk" : "roar";
         state.setAnimation(0, newAnimation, true);
-        widget.recalculateBounds(); // scale the skeleton based on the new animation
+        widget.calculateBounds(); // scale the skeleton based on the new animation
         isRoaring = !isRoaring;
     }, 4000);
 })();
@@ -644,7 +644,7 @@
         <div class="split-top split">
             <div class="split-left">
                 <p>To change animation, we could also just change the animation attribute. The widget will reinitiate itself and change animation.</p>
-                <p>In this case you would use <code>auto-recalculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
+                <p>In this case you would use <code>auto-calculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
                 <p>If want to keep the scale consistent, but fit multiple animations in the container, you can use the <code>animation-bounds</code> attribute to define a bounds containing a list of animations, as in the bottom example.</p>
 
             </div>
@@ -655,7 +655,7 @@
                     atlas="assets/spineboy-pma.atlas"
                     skeleton="assets/spineboy-pro.skel"
                     animation="jump"
-                    auto-recalculate-bounds
+                    auto-calculate-bounds
                 ></spine-widget>
                 <spine-widget
                     style="width: 100%; flex: 1; border: 1px solid black; box-sizing: border-box;"
@@ -703,7 +703,7 @@
     atlas="assets/spineboy-pma.atlas"
     skeleton="assets/spineboy-pro.skel"
     animation="jump"
-    auto-recalculate-bounds
+    auto-calculate-bounds
 ></spine-widget>
 <spine-widget
     style="width: 100%; height: 150px; border: 1px solid black;"
@@ -914,7 +914,7 @@
     setInterval(() => {
         const newAnimation = isRoaring ? "walk" : "roar";
         state.setAnimation(0, newAnimation, true);
-        widget.recalculateBounds(); // scale the skeleton based on the new animation
+        widget.calculateBounds(); // scale the skeleton based on the new animation
         isRoaring = !isRoaring;
     }, 4000);
 })();
diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index 5569fb3c7..8f49ee086 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -189,7 +189,7 @@ interface WidgetAttributes {
 	boundsY: number
 	boundsWidth: number
 	boundsHeight: number
-	autoRecalculateBounds: boolean
+	autoCalculateBounds: boolean
 	width: number
 	height: number
 	isDraggable: boolean
@@ -409,7 +409,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 	 * If no skin is provided, it is used the default skin.
 	 * If no animation is provided, it is used the setup pose.
 	 * Bounds are not automatically recalculated.when the animation or skin change.
-	 * Invoke {@link recalculateBounds} to recalculate them, or set {@link autoRecalculateBounds} to true.
+	 * Invoke {@link calculateBounds} to recalculate them, or set {@link autoCalculateBounds} to true.
 	 * Use `setBounds` to set you desired bounds. Bounding Box might be useful to determine the bounds to be used.
 	 * If the skeleton overflow the element container consider setting {@link clip} to `true`.
 	 */
@@ -469,9 +469,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 
 	/**
 	 * Whether or not the bounds are recalculated when an animation or a skin is changed. `false` by default.
-	 * Connected to `auto-recalculate-bounds` attribute.
+	 * Connected to `auto-calculate-bounds` attribute.
 	 */
-	public autoRecalculateBounds = false;
+	public autoCalculateBounds = false;
 
 	/**
 	 * Specify a fixed width for the widget. If at least one of `width` and `height` is > 0,
@@ -811,7 +811,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 		"bounds-y": { propertyName: "boundsY", type: "number" },
 		"bounds-width": { propertyName: "boundsWidth", type: "number", defaultValue: -1 },
 		"bounds-height": { propertyName: "boundsHeight", type: "number", defaultValue: -1 },
-		"auto-recalculate-bounds": { propertyName: "autoRecalculateBounds", type: "boolean" },
+		"auto-calculate-bounds": { propertyName: "autoCalculateBounds", type: "boolean" },
 		identifier: { propertyName: "identifier", type: "string" },
 		debug: { propertyName: "debug", type: "boolean" },
 		"manual-start": { propertyName: "manualStart", type: "boolean" },
@@ -962,11 +962,11 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 	}
 
 	/**
-	 * Recalculates and sets the bounds of the current animation on track 0.
+	 * Calculates and sets the bounds of the current animation on track 0.
 	 * Useful when animations or skins are set programmatically.
 	 * @returns void
 	 */
-	public recalculateBounds (forcedRecalculate = false): void {
+	public calculateBounds (forcedRecalculate = false): void {
 		const { skeleton, state } = this;
 		if (!skeleton || !state) return;
 
@@ -1116,7 +1116,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 			}
 		}
 
-		if (forceRecalculate || this.autoRecalculateBounds) this.recalculateBounds(forceRecalculate);
+		if (forceRecalculate || this.autoCalculateBounds) this.calculateBounds(forceRecalculate);
 	}
 
 	private render (): void {