From b08b234b1d34504a520a273643cbeb74ca623cb1 Mon Sep 17 00:00:00 2001
From: chris-doucette-stack <cdoucette@stackoverflow.com>
Date: Fri, 21 Nov 2025 13:11:21 -0500
Subject: [PATCH 1/2] Adding innerContentClassOverride prop to PopoverContent

---
 .../src/components/Popover/Popover.test.ts    | 45 +++++++++++++++++++
 .../components/Popover/PopoverContent.svelte  | 23 +++++++++-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
index 8d81b8934b..e74c38b1b2 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts
+++ b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
@@ -195,6 +195,51 @@ describe("Popover", () => {
         );
     });
 
+    it("override classes to the popover content inner div when the innerContentClassOverride prop is provided", async () => {
+        const {container} = render(Popover, {
+            props: {
+                ...defaultProps,
+                autoshow: true,
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            innerContentClassOverride: "custom-class",
+                            children: createRawSnippet(() => ({
+                                render: () => "<span>Popover Content</span>",
+                            })),
+                        },
+                    },
+                ]),
+            },
+        });
+
+        const innerContentElement = container.querySelector(".s-popover--content");
+        expect(innerContentElement).to.exist;
+        expect(innerContentElement).to.have.class("custom-class");
+        expect(innerContentElement).not.to.have.class("p12");
+        expect(innerContentElement).not.to.have.class("mn12");
+    });
+
+    it("popover content inner div should contain default classes when innerContentClassOverride prop is not provided", async () => {
+        const {container} = render(Popover, {
+            props: {
+                ...defaultProps,
+                autoshow: true,
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
+            },
+        });
+
+        const innerContentElement = container.querySelector(".s-popover--content");
+        expect(innerContentElement).to.exist;
+        expect(innerContentElement).to.have.class("p12");
+        expect(innerContentElement).to.have.class("mn12");
+    });
+
     it("should hide the popover content when the user click outside the popover", async () => {
         render(Popover, {
             props: {
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
index 2492d5ba02..f60c25759f 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
@@ -13,13 +13,22 @@
          * Additional CSS classes added to the element
          */
         class?: string;
+        /**
+         * Override the default inner content class
+         */
+        innerContentClassOverride?: string | null;
         /**
          * Children snippet
          */
         children?: Snippet;
     }
 
-    let { role = null, class: className = "", children }: Props = $props();
+    let {
+        role = null,
+        class: className = "",
+        innerContentClassOverride = null,
+        children,
+    }: Props = $props();
 
     let pstate = usePopoverContext("PopoverContent");
 
@@ -34,6 +43,16 @@
         return result;
     });
 
+    let innerContentClass = $derived.by(() => {
+        let result = "s-popover--content ";
+        if (innerContentClassOverride != null) {
+            result += innerContentClassOverride;
+        } else {
+            result += "p12 mn12";
+        }
+        return result;
+    });
+
     let computedClass = $derived(
         `${classes}${pstate.visible ? " is-visible" : ""}`
     );
@@ -58,7 +77,7 @@
     onfocusout={pstate.closeTooltip}
     data-popper-placement={pstate.computedPlacement}
 >
-    <div class="s-popover--content p12 mn12">
+    <div class={innerContentClass}>
         <div class="ps-relative">
             {@render children?.()}
         </div>

From 413f9e7f1d2bfc36601e791ed4fe24d6dfcded06 Mon Sep 17 00:00:00 2001
From: chris-doucette-stack <cdoucette@stackoverflow.com>
Date: Fri, 21 Nov 2025 13:26:13 -0500
Subject: [PATCH 2/2] fixing linting issue in Popover.test.ts

---
 .../src/components/Popover/Popover.test.ts         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
index e74c38b1b2..c1bf38f4fb 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts
+++ b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
@@ -196,7 +196,7 @@ describe("Popover", () => {
     });
 
     it("override classes to the popover content inner div when the innerContentClassOverride prop is provided", async () => {
-        const {container} = render(Popover, {
+        const { container } = render(Popover, {
             props: {
                 ...defaultProps,
                 autoshow: true,
@@ -215,7 +215,10 @@ describe("Popover", () => {
             },
         });
 
-        const innerContentElement = container.querySelector(".s-popover--content");
+        const innerContentElement = container.querySelector(
+            ".s-popover--content"
+        );
+
         expect(innerContentElement).to.exist;
         expect(innerContentElement).to.have.class("custom-class");
         expect(innerContentElement).not.to.have.class("p12");
@@ -223,7 +226,7 @@ describe("Popover", () => {
     });
 
     it("popover content inner div should contain default classes when innerContentClassOverride prop is not provided", async () => {
-        const {container} = render(Popover, {
+        const { container } = render(Popover, {
             props: {
                 ...defaultProps,
                 autoshow: true,
@@ -234,7 +237,10 @@ describe("Popover", () => {
             },
         });
 
-        const innerContentElement = container.querySelector(".s-popover--content");
+        const innerContentElement = container.querySelector(
+            ".s-popover--content"
+        );
+
         expect(innerContentElement).to.exist;
         expect(innerContentElement).to.have.class("p12");
         expect(innerContentElement).to.have.class("mn12");