From e31a3ceba8fedcb3fbaada4290dfd849d5631e59 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 9 Sep 2024 11:41:12 -0700
Subject: [PATCH 1/9] feat(action-group, block, panel): add 'placement' and
 'flipPlacements' properties. #7516

---
 .../calcite-components/src/components.d.ts    | 48 +++++++++++++++++
 .../action-group/action-group.e2e.ts          | 52 ++++++++++++++++++-
 .../components/action-group/action-group.tsx  | 31 +++++++++--
 .../src/components/block/block.e2e.ts         | 35 +++++++++++++
 .../src/components/block/block.tsx            | 26 +++++++++-
 .../src/components/panel/panel.e2e.ts         | 34 ++++++++++++
 .../src/components/panel/panel.tsx            | 18 +++++--
 7 files changed, 232 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 718aac02da7..424aff1e7c2 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -395,6 +395,10 @@ export namespace Components {
           * When `true`, the component is expanded.
          */
         "expanded": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -420,6 +424,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -626,6 +634,10 @@ export namespace Components {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -666,6 +678,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Sets focus on the component's first tabbable element.
          */
@@ -3858,6 +3874,10 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * The component header text.
          */
@@ -3886,6 +3906,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement": LogicalPlacement;
         /**
           * Specifies the size of the component.
          */
@@ -8321,6 +8345,10 @@ declare namespace LocalJSX {
           * When `true`, the component is expanded.
          */
         "expanded"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Accessible name for the component.
          */
@@ -8346,6 +8374,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the `calcite-action-menu`.
          */
@@ -8559,6 +8591,10 @@ declare namespace LocalJSX {
           * When `true`, displays a drag handle in the header.
          */
         "dragHandle"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -8620,6 +8656,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Displays a status-related indicator icon.
           * @deprecated Use `icon-start` instead.
@@ -11980,6 +12020,10 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * The component header text.
          */
@@ -12020,6 +12064,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the component.
          */
diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index 288761da844..17b04f95f21 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,5 +1,15 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import {
+  accessible,
+  defaults,
+  focusable,
+  hidden,
+  reflects,
+  renders,
+  slots,
+  t9n,
+  themed,
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -19,6 +29,23 @@ describe("calcite-action-group", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "placement",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "flipPlacements",
+        defaultValue: undefined,
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-action-group", [
+      {
+        propertyName: "placement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -42,6 +69,29 @@ describe("calcite-action-group", () => {
     slots("calcite-action-group", SLOTS);
   });
 
+  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
+    const page = await newE2EPage({
+      html: html`
+        <calcite-action-group scale="l" overlay-positioning="fixed" placement="top">
+          <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
+          <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
+        </calcite-action-group>
+      `,
+    });
+    await page.waitForChanges();
+
+    const flipPlacements = ["top", "bottom"];
+
+    const actionGroup = await page.find("calcite-action-group");
+    actionGroup.setProperty("flipPlacements", flipPlacements);
+    await page.waitForChanges();
+
+    const actionMenu = await page.find("calcite-action-group >>> calcite-action-menu");
+
+    expect(await actionMenu.getProperty("placement")).toBe("top");
+    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
+  });
+
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: actionGroupHTML });
     const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index 4d9f309e002..e03f0f9636e 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -21,7 +21,7 @@ import {
 } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { Columns } from "./interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
@@ -59,6 +59,11 @@ export class ActionGroup
     this.menuOpen = false;
   }
 
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  @Prop() flipPlacements: FlipPlacement[];
+
   /**
    *  Accessible name for the component.
    */
@@ -90,6 +95,11 @@ export class ActionGroup
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) placement: LogicalPlacement;
+
   /**
    * Specifies the size of the `calcite-action-menu`.
    */
@@ -178,19 +188,30 @@ export class ActionGroup
   // --------------------------------------------------------------------------
 
   renderMenu(): VNode {
-    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =
-      this;
+    const {
+      expanded,
+      menuOpen,
+      scale,
+      layout,
+      messages,
+      overlayPositioning,
+      hasMenuActions,
+      flipPlacements,
+      placement,
+    } = this;
 
     return (
       <calcite-action-menu
         expanded={expanded}
-        flipPlacements={["left", "right"]}
+        flipPlacements={
+          flipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])
+        }
         hidden={!hasMenuActions}
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
         overlayPositioning={overlayPositioning}
-        placement={layout === "horizontal" ? "bottom-start" : "leading-start"}
+        placement={placement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")}
         scale={scale}
       >
         <calcite-action
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 984ac12335e..6fb9b0331d4 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -43,6 +43,14 @@ describe("calcite-block", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "placement",
+        defaultValue: "bottom-end",
+      },
+      {
+        propertyName: "flipPlacements",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -64,6 +72,10 @@ describe("calcite-block", () => {
         propertyName: "overlayPositioning",
         value: "fixed",
       },
+      {
+        propertyName: "placement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -161,6 +173,29 @@ describe("calcite-block", () => {
     expect(await page.find("calcite-block >>> calcite-scrim")).toBeTruthy();
   });
 
+  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
+    const page = await newE2EPage({
+      html: html`
+        <calcite-block heading="heading" description="description" placement="top">
+          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+          <div class="content">content</div>
+        </calcite-block>
+      `,
+    });
+    await page.waitForChanges();
+
+    const flipPlacements = ["top", "bottom"];
+
+    const block = await page.find("calcite-block");
+    block.setProperty("flipPlacements", flipPlacements);
+    await page.waitForChanges();
+
+    const actionMenu = await page.find("calcite-block >>> calcite-action-menu");
+
+    expect(await actionMenu.getProperty("placement")).toBe("top");
+    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
+  });
+
   it("can display/hide content", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-block><div>some content</div></calcite-block>");
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index c935ccf5eac..3d7fe7e9005 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -44,7 +44,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import { CSS, ICONS, IDS, SLOTS } from "./resources";
@@ -94,6 +94,11 @@ export class Block
    */
   @Prop({ reflect: true }) dragHandle = false;
 
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  @Prop() flipPlacements: FlipPlacement[];
+
   /**
    * The component header text.
    */
@@ -128,6 +133,11 @@ export class Block
     onToggleOpenCloseComponent(this);
   }
 
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) placement: LogicalPlacement = "bottom-end";
+
   /**
    * Displays a status-related indicator icon.
    *
@@ -405,7 +415,17 @@ export class Block
   }
 
   render(): VNode {
-    const { collapsible, el, loading, open, heading, messages, description } = this;
+    const {
+      collapsible,
+      el,
+      loading,
+      open,
+      heading,
+      messages,
+      description,
+      flipPlacements,
+      placement,
+    } = this;
 
     const toggleLabel = open ? messages.collapse : messages.expand;
 
@@ -459,8 +479,10 @@ export class Block
         ) : null}
         {hasMenuActions ? (
           <calcite-action-menu
+            flipPlacements={flipPlacements ?? ["top", "bottom"]}
             label={messages.options}
             overlayPositioning={this.overlayPositioning}
+            placement={placement}
           >
             <slot name={SLOTS.headerMenuActions} />
           </calcite-action-menu>
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index e13772267a4..b0c4a113ff4 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -122,6 +122,14 @@ describe("calcite-panel", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "placement",
+        defaultValue: "bottom-end",
+      },
+      {
+        propertyName: "flipPlacements",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -143,6 +151,10 @@ describe("calcite-panel", () => {
         propertyName: "overlayPositioning",
         value: "fixed",
       },
+      {
+        propertyName: "placement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -198,6 +210,28 @@ describe("calcite-panel", () => {
     );
   });
 
+  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
+    const page = await newE2EPage({
+      html: html`
+        <calcite-panel placement="top">
+          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+        </calcite-panel>
+      `,
+    });
+    await page.waitForChanges();
+
+    const flipPlacements = ["top", "bottom"];
+
+    const panel = await page.find("calcite-panel");
+    panel.setProperty("flipPlacements", flipPlacements);
+    await page.waitForChanges();
+
+    const actionMenu = await page.find("calcite-panel >>> calcite-action-menu");
+
+    expect(await actionMenu.getProperty("placement")).toBe("top");
+    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
+  });
+
   it("honors closed prop", async () => {
     const page = await newE2EPage();
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 47245776ec7..606577e3ee2 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -39,7 +39,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
 import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
@@ -112,6 +112,11 @@ export class Panel
    */
   @Prop({ reflect: true }) collapsible = false;
 
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  @Prop() flipPlacements: FlipPlacement[];
+
   /**
    * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
    */
@@ -164,6 +169,11 @@ export class Panel
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) placement: LogicalPlacement = "bottom-end";
+
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -548,17 +558,17 @@ export class Panel
   }
 
   renderMenu(): VNode {
-    const { hasMenuItems, messages, menuOpen } = this;
+    const { hasMenuItems, messages, menuOpen, flipPlacements, placement } = this;
 
     return (
       <calcite-action-menu
-        flipPlacements={["top", "bottom"]}
+        flipPlacements={flipPlacements ?? ["top", "bottom"]}
         hidden={!hasMenuItems}
         key="menu"
         label={messages.options}
         open={menuOpen}
         overlayPositioning={this.overlayPositioning}
-        placement="bottom-end"
+        placement={placement}
       >
         <calcite-action
           icon={ICONS.menu}

From ece913b50076736fa984d90780fe50bce9fde022 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 9 Sep 2024 11:51:20 -0700
Subject: [PATCH 2/9] story updates

---
 .../src/components/block/block.stories.ts     | 13 ++++++++++++-
 .../src/components/block/block.tsx            |  4 ++--
 .../src/components/block/resources.ts         |  2 ++
 .../src/components/panel/panel.stories.ts     | 19 +++++++++++++++++--
 .../src/components/panel/panel.tsx            |  4 ++--
 .../src/components/panel/resources.ts         |  2 ++
 6 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 3798bcedef2..3af81b1a9c3 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -3,11 +3,16 @@ import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { placements } from "../../utils/floating-ui";
 import { Block } from "./block";
+import { defaultMenuPlacement } from "./resources";
 const { toggleDisplay } = ATTRIBUTES;
 
 interface BlockStoryArgs
-  extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
+  extends Pick<
+      Block,
+      "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel" | "placement"
+    >,
     Pick<BlockSection, "toggleDisplay"> {
   text: string;
   sectionOpen: BlockSection["open"];
@@ -16,6 +21,7 @@ interface BlockStoryArgs
 export default {
   title: "Components/Block",
   args: {
+    placement: defaultMenuPlacement,
     heading: "Heading",
     description: "description",
     open: true,
@@ -28,6 +34,10 @@ export default {
     toggleDisplay: toggleDisplay.defaultValue,
   },
   argTypes: {
+    placement: {
+      options: placements,
+      control: { type: "select" },
+    },
     headingLevel: {
       control: { type: "number", min: 1, max: 6, step: 1 },
     },
@@ -42,6 +52,7 @@ export const simple = (args: BlockStoryArgs): string => html`
   <calcite-block
     heading="${args.heading}"
     description="${args.description}"
+    placement="${args.placement}"
     ${boolean("open", args.open)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 3d7fe7e9005..5e6446b2a7b 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -47,7 +47,7 @@ import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/open
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
-import { CSS, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, defaultMenuPlacement, ICONS, IDS, SLOTS } from "./resources";
 import { BlockMessages } from "./assets/block/t9n";
 
 /**
@@ -136,7 +136,7 @@ export class Block
   /**
    * Determines where the action menu will be positioned.
    */
-  @Prop({ reflect: true }) placement: LogicalPlacement = "bottom-end";
+  @Prop({ reflect: true }) placement: LogicalPlacement = defaultMenuPlacement;
 
   /**
    * Displays a status-related indicator icon.
diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts
index 77610777c5b..5ac3e7aa9cf 100644
--- a/packages/calcite-components/src/components/block/resources.ts
+++ b/packages/calcite-components/src/components/block/resources.ts
@@ -43,3 +43,5 @@ export const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
 } as const;
+
+export const defaultMenuPlacement = "bottom-end";
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index d6a48a5ecc3..f655f2cbfad 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -1,14 +1,23 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { placements } from "../../utils/floating-ui";
 import { Panel } from "./panel";
-import { SLOTS } from "./resources";
+import { defaultMenuPlacement, SLOTS } from "./resources";
 const { collapseDirection, scale } = ATTRIBUTES;
 
 interface PanelStoryArgs
   extends Pick<
     Panel,
-    "closed" | "disabled" | "closable" | "collapsed" | "collapsible" | "collapseDirection" | "loading" | "scale"
+    | "closed"
+    | "disabled"
+    | "closable"
+    | "collapsed"
+    | "collapsible"
+    | "collapseDirection"
+    | "loading"
+    | "scale"
+    | "placement"
   > {
   heightScale: string;
 }
@@ -16,6 +25,7 @@ interface PanelStoryArgs
 export default {
   title: "Components/Panel",
   args: {
+    placement: defaultMenuPlacement,
     closed: false,
     disabled: false,
     closable: false,
@@ -27,6 +37,10 @@ export default {
     loading: false,
   },
   argTypes: {
+    placement: {
+      options: placements,
+      control: { type: "select" },
+    },
     collapseDirection: {
       options: collapseDirection.values,
       control: { type: "select" },
@@ -91,6 +105,7 @@ export const simple = (args: PanelStoryArgs): string => html`
     heightScale="${args.heightScale}"
     scale="${args.scale}"
     ${boolean("loading", args.loading)}
+    placement="${args.placement}"
     heading="Heading"
     description="A great panel description"
   >
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 606577e3ee2..24b31e7875b 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -43,7 +43,7 @@ import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils
 import { CollapseDirection } from "../interfaces";
 import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
-import { CSS, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, defaultMenuPlacement, ICONS, IDS, SLOTS } from "./resources";
 
 /**
  * @slot - A slot for adding custom content.
@@ -172,7 +172,7 @@ export class Panel
   /**
    * Determines where the action menu will be positioned.
    */
-  @Prop({ reflect: true }) placement: LogicalPlacement = "bottom-end";
+  @Prop({ reflect: true }) placement: LogicalPlacement = defaultMenuPlacement;
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index 428b13c5901..8874c324351 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -54,3 +54,5 @@ export const SLOTS = {
 };
 
 export const HEADING_LEVEL = 3;
+
+export const defaultMenuPlacement = "bottom-end";

From d0d5464aa449224cbd4ea7b9df3d69a1d238b7fb Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 9 Sep 2024 11:52:12 -0700
Subject: [PATCH 3/9] cleanup

---
 packages/calcite-components/src/components/block/block.e2e.ts | 4 ++--
 packages/calcite-components/src/components/panel/panel.e2e.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 6fb9b0331d4..7cb9d12493b 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -14,7 +14,7 @@ import {
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { skipAnimations } from "../../tests/utils";
-import { CSS, SLOTS } from "./resources";
+import { CSS, defaultMenuPlacement, SLOTS } from "./resources";
 
 describe("calcite-block", () => {
   describe("renders", () => {
@@ -45,7 +45,7 @@ describe("calcite-block", () => {
       },
       {
         propertyName: "placement",
-        defaultValue: "bottom-end",
+        defaultValue: defaultMenuPlacement,
       },
       {
         propertyName: "flipPlacements",
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index b0c4a113ff4..f645c4f8625 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -14,7 +14,7 @@ import {
   themed,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
-import { CSS, IDS, SLOTS } from "./resources";
+import { CSS, defaultMenuPlacement, IDS, SLOTS } from "./resources";
 
 type TestWindow = GlobalTestProps<{
   beforeClose: () => Promise<void>;
@@ -124,7 +124,7 @@ describe("calcite-panel", () => {
       },
       {
         propertyName: "placement",
-        defaultValue: "bottom-end",
+        defaultValue: defaultMenuPlacement,
       },
       {
         propertyName: "flipPlacements",

From fdd20ec6c1d12ad840c66e51efb7a04424e50089 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 10 Sep 2024 11:51:52 -0700
Subject: [PATCH 4/9] update doc

---
 .../src/components/action-group/action-group.tsx                | 2 +-
 packages/calcite-components/src/components/block/block.tsx      | 2 +-
 packages/calcite-components/src/components/panel/panel.tsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index e03f0f9636e..fdf3f2d9fe9 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -60,7 +60,7 @@ export class ActionGroup
   }
 
   /**
-   * Defines the available placements that can be used when a flip occurs.
+   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 5e6446b2a7b..998aff0b126 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -95,7 +95,7 @@ export class Block
   @Prop({ reflect: true }) dragHandle = false;
 
   /**
-   * Defines the available placements that can be used when a flip occurs.
+   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 24b31e7875b..9c9e9450760 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -113,7 +113,7 @@ export class Panel
   @Prop({ reflect: true }) collapsible = false;
 
   /**
-   * Defines the available placements that can be used when a flip occurs.
+   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 

From ac7c64a588244bc10857ae95b9b43fe1d84415fb Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 10 Sep 2024 12:01:36 -0700
Subject: [PATCH 5/9] doc

---
 .../src/components/action-group/action-group.tsx                | 2 +-
 packages/calcite-components/src/components/block/block.tsx      | 2 +-
 packages/calcite-components/src/components/panel/panel.tsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index fdf3f2d9fe9..fb8b3d2f482 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -60,7 +60,7 @@ export class ActionGroup
   }
 
   /**
-   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 998aff0b126..35be956a940 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -95,7 +95,7 @@ export class Block
   @Prop({ reflect: true }) dragHandle = false;
 
   /**
-   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 9c9e9450760..3663ee5138d 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -113,7 +113,7 @@ export class Panel
   @Prop({ reflect: true }) collapsible = false;
 
   /**
-   * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
    */
   @Prop() flipPlacements: FlipPlacement[];
 

From 7711a8bec1a22c29f2db257aeae511bc0aaaf9e6 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 11 Sep 2024 10:36:03 -0700
Subject: [PATCH 6/9] Review fixes

---
 .../calcite-components/src/components.d.ts    | 12 +++++------
 .../action-group/action-group.e2e.ts          | 15 +++++++-------
 .../src/components/block/block.e2e.ts         | 20 +++++++++----------
 .../src/components/block/block.stories.ts     |  5 ++---
 .../src/components/block/block.tsx            | 11 +++++++---
 .../src/components/block/resources.ts         |  2 --
 .../src/components/panel/panel.e2e.ts         | 18 ++++++++---------
 .../src/components/panel/panel.stories.ts     |  6 +++---
 .../src/components/panel/panel.tsx            | 11 +++++++---
 .../src/components/panel/resources.ts         |  2 --
 .../src/utils/floating-ui.ts                  |  1 +
 11 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 424aff1e7c2..a6ee8543333 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -396,7 +396,7 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -635,7 +635,7 @@ export namespace Components {
          */
         "dragHandle": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -3875,7 +3875,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -8346,7 +8346,7 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -8592,7 +8592,7 @@ declare namespace LocalJSX {
          */
         "dragHandle"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -12021,7 +12021,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index 17b04f95f21..3182629889c 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -70,14 +70,13 @@ describe("calcite-action-group", () => {
   });
 
   it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage({
-      html: html`
-        <calcite-action-group scale="l" overlay-positioning="fixed" placement="top">
-          <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
-          <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
-        </calcite-action-group>
-      `,
-    });
+    const page = await newE2EPage({});
+    page.setContent(html`
+      <calcite-action-group scale="l" overlay-positioning="fixed" placement="top">
+        <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
+        <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
+      </calcite-action-group>
+    `);
     await page.waitForChanges();
 
     const flipPlacements = ["top", "bottom"];
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 7cb9d12493b..be3c4ebadcf 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -14,7 +14,8 @@ import {
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { skipAnimations } from "../../tests/utils";
-import { CSS, defaultMenuPlacement, SLOTS } from "./resources";
+import { defaultEndMenuPlacement } from "../../utils/floating-ui";
+import { CSS, SLOTS } from "./resources";
 
 describe("calcite-block", () => {
   describe("renders", () => {
@@ -45,7 +46,7 @@ describe("calcite-block", () => {
       },
       {
         propertyName: "placement",
-        defaultValue: defaultMenuPlacement,
+        defaultValue: defaultEndMenuPlacement,
       },
       {
         propertyName: "flipPlacements",
@@ -174,14 +175,13 @@ describe("calcite-block", () => {
   });
 
   it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage({
-      html: html`
-        <calcite-block heading="heading" description="description" placement="top">
-          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-          <div class="content">content</div>
-        </calcite-block>
-      `,
-    });
+    const page = await newE2EPage();
+    page.setContent(html`
+      <calcite-block heading="heading" description="description" placement="top">
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+        <div class="content">content</div>
+      </calcite-block>
+    `);
     await page.waitForChanges();
 
     const flipPlacements = ["top", "bottom"];
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 3af81b1a9c3..b4672bfa4e2 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -3,9 +3,8 @@ import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
-import { placements } from "../../utils/floating-ui";
+import { defaultEndMenuPlacement, placements } from "../../utils/floating-ui";
 import { Block } from "./block";
-import { defaultMenuPlacement } from "./resources";
 const { toggleDisplay } = ATTRIBUTES;
 
 interface BlockStoryArgs
@@ -21,7 +20,7 @@ interface BlockStoryArgs
 export default {
   title: "Components/Block",
   args: {
-    placement: defaultMenuPlacement,
+    placement: defaultEndMenuPlacement,
     heading: "Heading",
     description: "description",
     open: true,
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index 35be956a940..b0b22d4bd1e 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -44,10 +44,15 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
+import {
+  defaultEndMenuPlacement,
+  FlipPlacement,
+  LogicalPlacement,
+  OverlayPositioning,
+} from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
-import { CSS, defaultMenuPlacement, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, ICONS, IDS, SLOTS } from "./resources";
 import { BlockMessages } from "./assets/block/t9n";
 
 /**
@@ -136,7 +141,7 @@ export class Block
   /**
    * Determines where the action menu will be positioned.
    */
-  @Prop({ reflect: true }) placement: LogicalPlacement = defaultMenuPlacement;
+  @Prop({ reflect: true }) placement: LogicalPlacement = defaultEndMenuPlacement;
 
   /**
    * Displays a status-related indicator icon.
diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts
index 5ac3e7aa9cf..77610777c5b 100644
--- a/packages/calcite-components/src/components/block/resources.ts
+++ b/packages/calcite-components/src/components/block/resources.ts
@@ -43,5 +43,3 @@ export const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
 } as const;
-
-export const defaultMenuPlacement = "bottom-end";
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index f645c4f8625..d25f67075fa 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -14,7 +14,8 @@ import {
   themed,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
-import { CSS, defaultMenuPlacement, IDS, SLOTS } from "./resources";
+import { defaultEndMenuPlacement } from "../../utils/floating-ui";
+import { CSS, IDS, SLOTS } from "./resources";
 
 type TestWindow = GlobalTestProps<{
   beforeClose: () => Promise<void>;
@@ -124,7 +125,7 @@ describe("calcite-panel", () => {
       },
       {
         propertyName: "placement",
-        defaultValue: defaultMenuPlacement,
+        defaultValue: defaultEndMenuPlacement,
       },
       {
         propertyName: "flipPlacements",
@@ -211,13 +212,12 @@ describe("calcite-panel", () => {
   });
 
   it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage({
-      html: html`
-        <calcite-panel placement="top">
-          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-        </calcite-panel>
-      `,
-    });
+    const page = await newE2EPage();
+    page.setContent(html`
+      <calcite-panel placement="top">
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+      </calcite-panel>
+    `);
     await page.waitForChanges();
 
     const flipPlacements = ["top", "bottom"];
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index f655f2cbfad..e73a8350445 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -1,9 +1,9 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
-import { placements } from "../../utils/floating-ui";
+import { defaultEndMenuPlacement, placements } from "../../utils/floating-ui";
 import { Panel } from "./panel";
-import { defaultMenuPlacement, SLOTS } from "./resources";
+import { SLOTS } from "./resources";
 const { collapseDirection, scale } = ATTRIBUTES;
 
 interface PanelStoryArgs
@@ -25,7 +25,7 @@ interface PanelStoryArgs
 export default {
   title: "Components/Panel",
   args: {
-    placement: defaultMenuPlacement,
+    placement: defaultEndMenuPlacement,
     closed: false,
     disabled: false,
     closable: false,
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 3663ee5138d..d3bcc6320d4 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -39,11 +39,16 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
+import {
+  defaultEndMenuPlacement,
+  FlipPlacement,
+  LogicalPlacement,
+  OverlayPositioning,
+} from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
 import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
-import { CSS, defaultMenuPlacement, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, ICONS, IDS, SLOTS } from "./resources";
 
 /**
  * @slot - A slot for adding custom content.
@@ -172,7 +177,7 @@ export class Panel
   /**
    * Determines where the action menu will be positioned.
    */
-  @Prop({ reflect: true }) placement: LogicalPlacement = defaultMenuPlacement;
+  @Prop({ reflect: true }) placement: LogicalPlacement = defaultEndMenuPlacement;
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index 8874c324351..428b13c5901 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -54,5 +54,3 @@ export const SLOTS = {
 };
 
 export const HEADING_LEVEL = 3;
-
-export const defaultMenuPlacement = "bottom-end";
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index 95b07ad042f..426dac7d1a8 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -271,6 +271,7 @@ export type MenuPlacement = Extract<
 >;
 
 export const defaultMenuPlacement: MenuPlacement = "bottom-start";
+export const defaultEndMenuPlacement: MenuPlacement = "bottom-end";
 
 export interface FloatingUIComponent {
   /**

From 373300136b6e7a8fdcfc041b7ed3062ab476394e Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 11 Sep 2024 10:47:36 -0700
Subject: [PATCH 7/9] review fixes

---
 .../action-group/action-group.e2e.ts          | 18 ++--------
 .../src/components/block/block.e2e.ts         | 32 ++++++-----------
 .../src/components/panel/panel.e2e.ts         | 30 +++++-----------
 .../src/tests/commonTests/floatingUI.ts       | 34 +++++++++++++++++++
 .../src/tests/commonTests/index.ts            |  2 +-
 5 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index 3182629889c..ebba9e9e9de 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -3,6 +3,7 @@ import {
   accessible,
   defaults,
   focusable,
+  handlesActionMenuPlacements,
   hidden,
   reflects,
   renders,
@@ -69,26 +70,13 @@ describe("calcite-action-group", () => {
     slots("calcite-action-group", SLOTS);
   });
 
-  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage({});
-    page.setContent(html`
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
       <calcite-action-group scale="l" overlay-positioning="fixed" placement="top">
         <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
         <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
       </calcite-action-group>
     `);
-    await page.waitForChanges();
-
-    const flipPlacements = ["top", "bottom"];
-
-    const actionGroup = await page.find("calcite-action-group");
-    actionGroup.setProperty("flipPlacements", flipPlacements);
-    await page.waitForChanges();
-
-    const actionMenu = await page.find("calcite-action-group >>> calcite-action-menu");
-
-    expect(await actionMenu.getProperty("placement")).toBe("top");
-    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
   });
 
   it("should honor scale of expand icon", async () => {
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index be3c4ebadcf..3df160fa631 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -5,6 +5,7 @@ import {
   delegatesToFloatingUiOwningComponent,
   disabled,
   focusable,
+  handlesActionMenuPlacements,
   hidden,
   reflects,
   renders,
@@ -146,6 +147,15 @@ describe("calcite-block", () => {
     );
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-block heading="heading" description="description" placement="top">
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+        <div class="content">content</div>
+      </calcite-block>
+    `);
+  });
+
   it("has a loading state", async () => {
     const page = await newE2EPage({
       html: `
@@ -174,28 +184,6 @@ describe("calcite-block", () => {
     expect(await page.find("calcite-block >>> calcite-scrim")).toBeTruthy();
   });
 
-  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage();
-    page.setContent(html`
-      <calcite-block heading="heading" description="description" placement="top">
-        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-        <div class="content">content</div>
-      </calcite-block>
-    `);
-    await page.waitForChanges();
-
-    const flipPlacements = ["top", "bottom"];
-
-    const block = await page.find("calcite-block");
-    block.setProperty("flipPlacements", flipPlacements);
-    await page.waitForChanges();
-
-    const actionMenu = await page.find("calcite-block >>> calcite-action-menu");
-
-    expect(await actionMenu.getProperty("placement")).toBe("top");
-    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
-  });
-
   it("can display/hide content", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-block><div>some content</div></calcite-block>");
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index d25f67075fa..e88398e8fd4 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -12,6 +12,7 @@ import {
   slots,
   t9n,
   themed,
+  handlesActionMenuPlacements,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { defaultEndMenuPlacement } from "../../utils/floating-ui";
@@ -89,6 +90,14 @@ describe("calcite-panel", () => {
     hidden("calcite-panel");
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-panel placement="top">
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+      </calcite-panel>
+    `);
+  });
+
   describe("defaults", () => {
     defaults("calcite-panel", [
       {
@@ -211,27 +220,6 @@ describe("calcite-panel", () => {
     );
   });
 
-  it("sets placement and flipPlacements on internal calcite-action-menu", async () => {
-    const page = await newE2EPage();
-    page.setContent(html`
-      <calcite-panel placement="top">
-        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-      </calcite-panel>
-    `);
-    await page.waitForChanges();
-
-    const flipPlacements = ["top", "bottom"];
-
-    const panel = await page.find("calcite-panel");
-    panel.setProperty("flipPlacements", flipPlacements);
-    await page.waitForChanges();
-
-    const actionMenu = await page.find("calcite-panel >>> calcite-action-menu");
-
-    expect(await actionMenu.getProperty("placement")).toBe("top");
-    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
-  });
-
   it("honors closed prop", async () => {
     const page = await newE2EPage();
 
diff --git a/packages/calcite-components/src/tests/commonTests/floatingUI.ts b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
index cb647efefed..07718d71ec0 100644
--- a/packages/calcite-components/src/tests/commonTests/floatingUI.ts
+++ b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
@@ -132,3 +132,37 @@ export async function delegatesToFloatingUiOwningComponent(
     expect(await floatingUiOwningComponent.getProperty("overlayPositioning")).toBe("fixed");
   });
 }
+
+/**
+ * Helper to test if a component has a calcite-action-menu wired up correctly with placement and flipPlacements.
+ *
+ * @example
+ * describe("handles action-menu placement and flipPlacements", () => {
+ *   handlesActionMenuPlacements(html`
+ *    <calcite-panel placement="top">
+ *      <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+ *     </calcite-panel>
+ *   `);
+ * });
+ *
+ * @param componentTagOrHTML - The component tag or HTML markup to test against.
+ */
+export async function handlesActionMenuPlacements(componentTagOrHTML: TagOrHTML): Promise<void> {
+  it("handles placement and flipPlacements", async () => {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const tag = getTag(componentTagOrHTML);
+
+    await page.waitForChanges();
+
+    const flipPlacements = ["top", "bottom"];
+
+    const panel = await page.find(tag);
+    panel.setProperty("flipPlacements", flipPlacements);
+    await page.waitForChanges();
+
+    const actionMenu = await page.find(`${tag} >>> calcite-action-menu`);
+
+    expect(await actionMenu.getProperty("placement")).toBe("top");
+    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
+  });
+}
diff --git a/packages/calcite-components/src/tests/commonTests/index.ts b/packages/calcite-components/src/tests/commonTests/index.ts
index f4e7e12baae..5842da83559 100644
--- a/packages/calcite-components/src/tests/commonTests/index.ts
+++ b/packages/calcite-components/src/tests/commonTests/index.ts
@@ -5,7 +5,7 @@ export { reflects } from "./reflects";
 export { renders } from "./renders";
 export { disabled } from "./disabled";
 export { hidden } from "./hidden";
-export { floatingUIOwner, delegatesToFloatingUiOwningComponent } from "./floatingUI";
+export { floatingUIOwner, delegatesToFloatingUiOwningComponent, handlesActionMenuPlacements } from "./floatingUI";
 export { focusable } from "./focusable";
 export { formAssociated } from "./formAssociated";
 export { slots } from "./slots";

From e0e12d1e9c4ffc083b442bb930de81ec377ab6d2 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 20 Sep 2024 13:33:42 -0700
Subject: [PATCH 8/9] review fixes

---
 .../action-group/action-group.e2e.ts          |  8 +++---
 .../components/action-group/action-group.tsx  | 26 ++++++++---------
 .../src/components/block/block.e2e.ts         |  8 +++---
 .../src/components/block/block.stories.ts     |  8 +++---
 .../src/components/block/block.tsx            | 28 +++++++++----------
 .../src/components/panel/panel.e2e.ts         |  8 +++---
 .../src/components/panel/panel.stories.ts     |  8 +++---
 .../src/components/panel/panel.tsx            | 26 ++++++++---------
 .../src/tests/commonTests/floatingUI.ts       |  2 +-
 9 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index ebba9e9e9de..fae0a9e3f55 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -31,11 +31,11 @@ describe("calcite-action-group", () => {
         defaultValue: "absolute",
       },
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         defaultValue: undefined,
       },
       {
-        propertyName: "flipPlacements",
+        propertyName: "menuFlipPlacements",
         defaultValue: undefined,
       },
     ]);
@@ -44,7 +44,7 @@ describe("calcite-action-group", () => {
   describe("reflects", () => {
     reflects("calcite-action-group", [
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         value: "bottom",
       },
     ]);
@@ -72,7 +72,7 @@ describe("calcite-action-group", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-action-group scale="l" overlay-positioning="fixed" placement="top">
+      <calcite-action-group scale="l" overlay-positioning="fixed" menu-placement="top">
         <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
         <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
       </calcite-action-group>
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index fb8b3d2f482..df224f634e9 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -59,11 +59,6 @@ export class ActionGroup
     this.menuOpen = false;
   }
 
-  /**
-   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-   */
-  @Prop() flipPlacements: FlipPlacement[];
-
   /**
    *  Accessible name for the component.
    */
@@ -96,14 +91,19 @@ export class ActionGroup
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
   /**
-   * Determines where the action menu will be positioned.
+   * Specifies the size of the `calcite-action-menu`.
+   */
+  @Prop({ reflect: true }) scale: Scale;
+
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
    */
-  @Prop({ reflect: true }) placement: LogicalPlacement;
+  @Prop() menuFlipPlacements: FlipPlacement[];
 
   /**
-   * Specifies the size of the `calcite-action-menu`.
+   * Determines where the action menu will be positioned.
    */
-  @Prop({ reflect: true }) scale: Scale;
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;
 
   /**
    * Made into a prop for testing purposes only
@@ -196,22 +196,22 @@ export class ActionGroup
       messages,
       overlayPositioning,
       hasMenuActions,
-      flipPlacements,
-      placement,
+      menuFlipPlacements,
+      menuPlacement,
     } = this;
 
     return (
       <calcite-action-menu
         expanded={expanded}
         flipPlacements={
-          flipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])
+          menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])
         }
         hidden={!hasMenuActions}
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
         overlayPositioning={overlayPositioning}
-        placement={placement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")}
+        placement={menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")}
         scale={scale}
       >
         <calcite-action
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 3df160fa631..282e7c94935 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -46,11 +46,11 @@ describe("calcite-block", () => {
         defaultValue: "absolute",
       },
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         defaultValue: defaultEndMenuPlacement,
       },
       {
-        propertyName: "flipPlacements",
+        propertyName: "menuFlipPlacements",
         defaultValue: undefined,
       },
     ]);
@@ -75,7 +75,7 @@ describe("calcite-block", () => {
         value: "fixed",
       },
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         value: "bottom",
       },
     ]);
@@ -149,7 +149,7 @@ describe("calcite-block", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-block heading="heading" description="description" placement="top">
+      <calcite-block heading="heading" description="description" menu-placement="top">
         <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
         <div class="content">content</div>
       </calcite-block>
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index b4672bfa4e2..14144027057 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -10,7 +10,7 @@ const { toggleDisplay } = ATTRIBUTES;
 interface BlockStoryArgs
   extends Pick<
       Block,
-      "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel" | "placement"
+      "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel" | "menuPlacement"
     >,
     Pick<BlockSection, "toggleDisplay"> {
   text: string;
@@ -20,7 +20,7 @@ interface BlockStoryArgs
 export default {
   title: "Components/Block",
   args: {
-    placement: defaultEndMenuPlacement,
+    menuPlacement: defaultEndMenuPlacement,
     heading: "Heading",
     description: "description",
     open: true,
@@ -33,7 +33,7 @@ export default {
     toggleDisplay: toggleDisplay.defaultValue,
   },
   argTypes: {
-    placement: {
+    menuPlacement: {
       options: placements,
       control: { type: "select" },
     },
@@ -51,7 +51,7 @@ export const simple = (args: BlockStoryArgs): string => html`
   <calcite-block
     heading="${args.heading}"
     description="${args.description}"
-    placement="${args.placement}"
+    menu-placement="${args.menuPlacement}"
     ${boolean("open", args.open)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index b0b22d4bd1e..8b986c0a7cd 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -99,11 +99,6 @@ export class Block
    */
   @Prop({ reflect: true }) dragHandle = false;
 
-  /**
-   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-   */
-  @Prop() flipPlacements: FlipPlacement[];
-
   /**
    * The component header text.
    */
@@ -128,6 +123,16 @@ export class Block
    */
   @Prop({ reflect: true }) loading = false;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;
+
   /**
    * When `true`, expands the component and its contents.
    */
@@ -138,11 +143,6 @@ export class Block
     onToggleOpenCloseComponent(this);
   }
 
-  /**
-   * Determines where the action menu will be positioned.
-   */
-  @Prop({ reflect: true }) placement: LogicalPlacement = defaultEndMenuPlacement;
-
   /**
    * Displays a status-related indicator icon.
    *
@@ -428,8 +428,8 @@ export class Block
       heading,
       messages,
       description,
-      flipPlacements,
-      placement,
+      menuFlipPlacements,
+      menuPlacement,
     } = this;
 
     const toggleLabel = open ? messages.collapse : messages.expand;
@@ -484,10 +484,10 @@ export class Block
         ) : null}
         {hasMenuActions ? (
           <calcite-action-menu
-            flipPlacements={flipPlacements ?? ["top", "bottom"]}
+            flipPlacements={menuFlipPlacements ?? ["top", "bottom"]}
             label={messages.options}
             overlayPositioning={this.overlayPositioning}
-            placement={placement}
+            placement={menuPlacement}
           >
             <slot name={SLOTS.headerMenuActions} />
           </calcite-action-menu>
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index e88398e8fd4..f8a6f33cf14 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -92,7 +92,7 @@ describe("calcite-panel", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-panel placement="top">
+      <calcite-panel menu-placement="top">
         <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
       </calcite-panel>
     `);
@@ -133,11 +133,11 @@ describe("calcite-panel", () => {
         defaultValue: "m",
       },
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         defaultValue: defaultEndMenuPlacement,
       },
       {
-        propertyName: "flipPlacements",
+        propertyName: "menuFlipPlacements",
         defaultValue: undefined,
       },
     ]);
@@ -162,7 +162,7 @@ describe("calcite-panel", () => {
         value: "fixed",
       },
       {
-        propertyName: "placement",
+        propertyName: "menuPlacement",
         value: "bottom",
       },
     ]);
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index e73a8350445..9f318bbcd71 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -17,7 +17,7 @@ interface PanelStoryArgs
     | "collapseDirection"
     | "loading"
     | "scale"
-    | "placement"
+    | "menuPlacement"
   > {
   heightScale: string;
 }
@@ -25,7 +25,7 @@ interface PanelStoryArgs
 export default {
   title: "Components/Panel",
   args: {
-    placement: defaultEndMenuPlacement,
+    menuPlacement: defaultEndMenuPlacement,
     closed: false,
     disabled: false,
     closable: false,
@@ -37,7 +37,7 @@ export default {
     loading: false,
   },
   argTypes: {
-    placement: {
+    menuPlacement: {
       options: placements,
       control: { type: "select" },
     },
@@ -105,7 +105,7 @@ export const simple = (args: PanelStoryArgs): string => html`
     heightScale="${args.heightScale}"
     scale="${args.scale}"
     ${boolean("loading", args.loading)}
-    placement="${args.placement}"
+    menu-placement="${args.menuPlacement}"
     heading="Heading"
     description="A great panel description"
   >
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index d3bcc6320d4..5219f432203 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -117,11 +117,6 @@ export class Panel
    */
   @Prop({ reflect: true }) collapsible = false;
 
-  /**
-   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
-   */
-  @Prop() flipPlacements: FlipPlacement[];
-
   /**
    * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
    */
@@ -140,11 +135,21 @@ export class Panel
   /** A description for the component. */
   @Prop() description: string;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    */
   @Prop({ reflect: true }) menuOpen = false;
 
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -174,11 +179,6 @@ export class Panel
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
-  /**
-   * Determines where the action menu will be positioned.
-   */
-  @Prop({ reflect: true }) placement: LogicalPlacement = defaultEndMenuPlacement;
-
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -563,17 +563,17 @@ export class Panel
   }
 
   renderMenu(): VNode {
-    const { hasMenuItems, messages, menuOpen, flipPlacements, placement } = this;
+    const { hasMenuItems, messages, menuOpen, menuFlipPlacements, menuPlacement } = this;
 
     return (
       <calcite-action-menu
-        flipPlacements={flipPlacements ?? ["top", "bottom"]}
+        flipPlacements={menuFlipPlacements ?? ["top", "bottom"]}
         hidden={!hasMenuItems}
         key="menu"
         label={messages.options}
         open={menuOpen}
         overlayPositioning={this.overlayPositioning}
-        placement={placement}
+        placement={menuPlacement}
       >
         <calcite-action
           icon={ICONS.menu}
diff --git a/packages/calcite-components/src/tests/commonTests/floatingUI.ts b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
index 07718d71ec0..d260b2ac61d 100644
--- a/packages/calcite-components/src/tests/commonTests/floatingUI.ts
+++ b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
@@ -157,7 +157,7 @@ export async function handlesActionMenuPlacements(componentTagOrHTML: TagOrHTML)
     const flipPlacements = ["top", "bottom"];
 
     const panel = await page.find(tag);
-    panel.setProperty("flipPlacements", flipPlacements);
+    panel.setProperty("menuFlipPlacements", flipPlacements);
     await page.waitForChanges();
 
     const actionMenu = await page.find(`${tag} >>> calcite-action-menu`);

From 9d85d40f6d51de353e6b8a2d3d10dbea665f2341 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 25 Sep 2024 15:18:45 -0700
Subject: [PATCH 9/9] cleanup

---
 .../src/components/action-group/action-group.e2e.ts          | 2 +-
 .../calcite-components/src/components/block/block.e2e.ts     | 2 +-
 .../calcite-components/src/components/panel/panel.e2e.ts     | 2 +-
 .../calcite-components/src/tests/commonTests/floatingUI.ts   | 5 +++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index fae0a9e3f55..c2ba175fd86 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -72,7 +72,7 @@ describe("calcite-action-group", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-action-group scale="l" overlay-positioning="fixed" menu-placement="top">
+      <calcite-action-group scale="l" overlay-positioning="fixed">
         <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
         <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
       </calcite-action-group>
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 282e7c94935..bac00a7f613 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -149,7 +149,7 @@ describe("calcite-block", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-block heading="heading" description="description" menu-placement="top">
+      <calcite-block heading="heading" description="description">
         <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
         <div class="content">content</div>
       </calcite-block>
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index f8a6f33cf14..7900f2fb432 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -92,7 +92,7 @@ describe("calcite-panel", () => {
 
   describe("handles action-menu placement and flipPlacements", () => {
     handlesActionMenuPlacements(html`
-      <calcite-panel menu-placement="top">
+      <calcite-panel>
         <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
       </calcite-panel>
     `);
diff --git a/packages/calcite-components/src/tests/commonTests/floatingUI.ts b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
index d260b2ac61d..51abd84f11a 100644
--- a/packages/calcite-components/src/tests/commonTests/floatingUI.ts
+++ b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
@@ -156,8 +156,9 @@ export async function handlesActionMenuPlacements(componentTagOrHTML: TagOrHTML)
 
     const flipPlacements = ["top", "bottom"];
 
-    const panel = await page.find(tag);
-    panel.setProperty("menuFlipPlacements", flipPlacements);
+    const component = await page.find(tag);
+    component.setProperty("menuFlipPlacements", flipPlacements);
+    component.setProperty("menuPlacement", "top");
     await page.waitForChanges();
 
     const actionMenu = await page.find(`${tag} >>> calcite-action-menu`);