From 829f8edd011b4a1a7969f9245b26efc65f11aecb Mon Sep 17 00:00:00 2001
From: Chris Holt <13071055+chrisdholt@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:42:59 -0700
Subject: [PATCH] update to use :popover-open to toggle shown popover

---
 packages/web-components/src/button/button.stories.ts | 2 +-
 packages/web-components/src/button/button.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
index 6294abf3e34dd9..64836ed9efd044 100644
--- a/packages/web-components/src/button/button.stories.ts
+++ b/packages/web-components/src/button/button.stories.ts
@@ -225,5 +225,5 @@ export const Popover: Story<FluentButton> = renderComponent(html<StoryArgs<Fluen
   <fluent-button popovertarget="foo" popovertargetaction="show">Show Popover</fluent-button>
   <fluent-button popovertarget="foo" popovertargetaction="hide">Hide Popover</fluent-button>
   <fluent-button popovertarget="foo" popovertargetaction="toggle">Toggle Popover</fluent-button>
-  <div id="foo" popover open>This is a popover</div>
+  <div id="foo" popover>This is a popover</div>
 `);
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index 962dcbdce483e4..caa2dc98d097a0 100644
--- a/packages/web-components/src/button/button.ts
+++ b/packages/web-components/src/button/button.ts
@@ -307,7 +307,7 @@ export class BaseButton extends FASTElement {
         case 'toggle':
         default:
           // @ts-expect-error - Baseline 2024
-          this.popoverTargetElement?.togglePopover(!this.popoverOpen);
+          this.popoverTargetElement?.togglePopover(this.popoverTargetElement?.matches(':popover-open'));
           break;
       }
     }