Adding innerContentClassOverride prop to PopoverContent

packages/stacks-svelte/src/components/Popover/Popover.test.ts

@@ -195,6 +195,57 @@ 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: {

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>