diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
index 7955f342fd..2fdad8414d 100644
--- a/packages/color-slider/src/ColorSlider.ts
+++ b/packages/color-slider/src/ColorSlider.ts
@@ -189,11 +189,11 @@ export class ColorSlider extends Focusable {
         this.input.focus();
     }
 
-    private handleFocusin(): void {
+    private handleFocus(): void {
         this.focused = true;
     }
 
-    private handleFocusout(): void {
+    private handleBlur(): void {
         if (this._pointerDown) {
             return;
         }
@@ -344,7 +344,7 @@ export class ColorSlider extends Focusable {
     protected override firstUpdated(changed: PropertyValues): void {
         super.firstUpdated(changed);
         this.boundingClientRect = this.getBoundingClientRect();
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
+        this.addEventListener('focus', this.handleFocus);
+        this.addEventListener('blur', this.handleBlur);
     }
 }
diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
index 3b493b4589..06144f985b 100644
--- a/packages/color-slider/test/color-slider.test.ts
+++ b/packages/color-slider/test/color-slider.test.ts
@@ -119,12 +119,24 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        el.dispatchEvent(new FocusEvent('focusin'));
+        expect(el.focused).to.be.false;
+
+        await sendKeys({ press: 'Tab' });
+        await elementUpdated(el);
+
+        expect(el.focused).to.be.true;
+
+        el.blur();
+        await elementUpdated(el);
+
+        expect(el.focused).to.be.false;
+
+        el.dispatchEvent(new FocusEvent('focus'));
         await elementUpdated(el);
 
         expect(el.focused).to.be.true;
 
-        el.dispatchEvent(new FocusEvent('focusout'));
+        el.dispatchEvent(new FocusEvent('blur'));
         await elementUpdated(el);
 
         expect(el.focused).to.be.false;
diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
index 0652407328..7c2733b6ca 100644
--- a/packages/color-wheel/src/ColorWheel.ts
+++ b/packages/color-wheel/src/ColorWheel.ts
@@ -180,11 +180,11 @@ export class ColorWheel extends Focusable {
         this.input.focus();
     }
 
-    private handleFocusin(): void {
+    private handleFocus(): void {
         this.focused = true;
     }
 
-    private handleFocusout(): void {
+    private handleBlur(): void {
         if (this._pointerDown) {
             return;
         }
@@ -384,8 +384,8 @@ export class ColorWheel extends Focusable {
     protected override firstUpdated(changed: PropertyValues): void {
         super.firstUpdated(changed);
         this.boundingClientRect = this.getBoundingClientRect();
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
+        this.addEventListener('focus', this.handleFocus);
+        this.addEventListener('blur', this.handleBlur);
     }
 
     private observer?: WithSWCResizeObserver['ResizeObserver'];
diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts
index eecc5eabd5..5a8d1fe31e 100644
--- a/packages/color-wheel/test/color-wheel.test.ts
+++ b/packages/color-wheel/test/color-wheel.test.ts
@@ -121,12 +121,24 @@ describe('ColorWheel', () => {
 
         await elementUpdated(el);
 
-        el.dispatchEvent(new FocusEvent('focusin'));
+        expect(el.focused).to.be.false;
+
+        await sendKeys({ press: 'Tab' });
+        await elementUpdated(el);
+
+        expect(el.focused).to.be.true;
+
+        el.blur();
+        await elementUpdated(el);
+
+        expect(el.focused).to.be.false;
+
+        el.dispatchEvent(new FocusEvent('focus'));
         await elementUpdated(el);
 
         expect(el.focused).to.be.true;
 
-        el.dispatchEvent(new FocusEvent('focusout'));
+        el.dispatchEvent(new FocusEvent('blur'));
         await elementUpdated(el);
 
         expect(el.focused).to.be.false;