@@ -209,8 +209,7 @@ import SlideshowSnippet from './SlideshowSnippet.astro';
     transition: opacity 180ms ease, background-color 180ms ease;
   }
   .slideshow-controls:hover,
-  .slideshow-controls:has(:focus-visible),
-  .slideshow-controls:has([data-drawing-toggle][aria-expanded='true']) {
+  .slideshow-controls:focus-within {
     opacity: 1;
     background: var(--aw-color-bg);
   }
 
@@ -14,6 +14,24 @@ test.beforeEach(async ({ page }) => {
   await page.goto("/gh-aw/");
 });
 
+test("dims the toolbar only when neither hovered nor focused", async ({ page }) => {
+  await startSlideshow(page);
+  const controls = presentation(page).getByRole("group", { name: "Slide navigation" });
+  await page.mouse.move(0, 0);
+  await page.evaluate(() => (document.activeElement as HTMLElement)?.blur());
+  await expect(controls).toHaveCSS("opacity", "0.1");
+
+  await controls.hover();
+  await expect(controls).toHaveCSS("opacity", "1");
+  await page.mouse.move(0, 0);
+  await expect(controls).toHaveCSS("opacity", "0.1");
+
+  await controls.getByRole("button", { name: "Exit slideshow" }).focus();
+  await expect(controls).toHaveCSS("opacity", "1");
+  await page.evaluate(() => (document.activeElement as HTMLElement)?.blur());
+  await expect(controls).toHaveCSS("opacity", "0.1");
+});
+
 test("loads the complete slideshow runtime only on first use", async ({ page }) => {
   const initialAssets = await page.evaluate(pattern => {
     const matcher = new RegExp(pattern);
Original file line number	Diff line number	Diff line change
`@@ -209,8 +209,7 @@ import SlideshowSnippet from './SlideshowSnippet.astro';`
`209`	`209`	`transition: opacity 180ms ease, background-color 180ms ease;`
`210`	`210`	`}`
`211`	`211`	`.slideshow-controls:hover,`
`212`		`- .slideshow-controls:has(:focus-visible),`
`213`		`- .slideshow-controls:has([data-drawing-toggle][aria-expanded='true']) {`
	`212`	`+ .slideshow-controls:focus-within {`
`214`	`213`	`opacity: 1;`
`215`	`214`	`background: var(--aw-color-bg);`
`216`	`215`	`}`