Replace portals with Popover API for layering

.github/workflows/ci.yml

@@ -29,6 +29,7 @@ jobs:
       - uses: wyvox/action@v2
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - run: pnpm i -f # ensure all bin symlinks are created
       - run: pnpm build
       - id: set-pending
         run: echo "pending=$(./cache-status.sh)" >> $GITHUB_OUTPUT
@@ -47,6 +48,7 @@ jobs:
       - uses: wyvox/action@v2
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - run: pnpm i -f # ensure all bin symlinks are created
       - run: pnpm build
       - run: pnpm i -f # sync for some reason isn't running before lint
       - run: ls -la ember-primitives/

docs-app/app/templates/5-floaty-bits/menu.gjs.md

@@ -1,19 +1,17 @@
 # Menu
 
-Menus are built with Popovers, with added features for keyboard navigation and accessibility. 
+Menus are built with Popovers, with added features for keyboard navigation and accessibility.
 
 The placement of the menu content is handled by `<Popover>`, so `<Menu>` accepts the same arguments for positioning the dropdown.
 
-Like `<Popover>`, the `<Menu>` component uses portals in a way that totally solves layering issues. No more worrying about tooltips on varying layers of your UI sometimes appearing behind other floaty bits. See the `<Portal>` and `<PortalTargets>` pages for more information.
+Like `<Popover>`, the `<Menu>` component uses the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for layering, which totally solves z-index and overflow clipping issues, no portals needed.
 
 <div class="featured-demo">
 
 ```gjs live preview no-shadow
-import { PortalTargets, Menu } from 'ember-primitives';
+import { Menu } from "ember-primitives";
 
 <template>
-  <PortalTargets />
-
   <Menu @offsetOptions={{8}} as |m|>
     <m.Trigger class="trigger" aria-label="Options">
       <EllipsisVertical />
@@ -38,7 +36,11 @@ import { PortalTargets, Menu } from 'ember-primitives';
       border: none;
       font-size: 14px;
       z-index: 10;
-      box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 10px 15px -3px rgb(0 0 0 / 0.1),
+        0 4px 6px -4px rgb(0 0 0 / 0.1);
       display: flex;
       flex-direction: column;
     }
@@ -50,7 +52,8 @@ import { PortalTargets, Menu } from 'ember-primitives';
       cursor: pointer;
     }
 
-    .content [role="menuitem"]:focus, .trigger:hover {
+    .content [role="menuitem"]:focus,
+    .trigger:hover {
       background-color: #f9fafb;
     }
 
@@ -79,16 +82,20 @@ import { PortalTargets, Menu } from 'ember-primitives';
 </template>
 
 const EllipsisVertical = <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" fill="currentColor"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 128 512"
+    fill="currentColor"
+  ><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+      d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+    /></svg>
 </template>;
 ```
 
 </div>
 
-
 Sometimes, you need to use an existing component as the trigger. `<Menu>` also yields a `trigger` modifier that you can use anywhere, even on your own components (e.g a custom button):
 
-
 ```hbs
 <Menu as |m|>
   <MyButton {{m.trigger}}>
@@ -106,25 +113,23 @@ Sometimes, you need to use an existing component as the trigger. `<Menu>` also y
 
 Keep in mind that for the modifier to do its work, your custom component must use [`...attributes`](https://guides.emberjs.com/v5.7.0/components/component-arguments-and-html-attributes/#toc_html-attributes) in some HTML element.
 
-
 ## Install
 
-
 ```hbs live
 <SetupInstructions @src="components/menu.gts" />
 ```
 
-
 ## API Reference
 
 ```gjs live no-shadow
-import { ComponentSignature } from 'kolay';
+import { ComponentSignature } from "kolay";
 
 <template>
-  <ComponentSignature 
-    @package="ember-primitives" 
-    @module="declarations/components/menu" 
-    @name="Signature" />
+  <ComponentSignature
+    @package="ember-primitives"
+    @module="declarations/components/menu"
+    @name="Signature"
+  />
 </template>
 ```
 
@@ -134,9 +139,35 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA
 
 ### Keyboard Interactions
 
-| key | description |
-| :---: | :----------- |
-| <kbd>Space</kbd> <kbd>Enter</kbd>  | When focus is on `Trigger`, opens the menu and focuses the first item. When focus is on an `Item`, activates the focused item. |
-| <kbd>ArrowDown</kbd> <kbd>ArrowRight</kbd> | When `Content` is open, moves to the next item.  |
-| <kbd>ArrowUp</kbd> <kbd>ArrowLeft</kbd> | When `Content` is open, moves to the previous item.  |
-| <kbd>Esc</kbd> | Closes the menu and moves focus to `Trigger`. |
+|                    key                     | description                                                                                                                    |
+| :----------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------- |
+|     <kbd>Space</kbd> <kbd>Enter</kbd>      | When focus is on `Trigger`, opens the menu and focuses the first item. When focus is on an `Item`, activates the focused item. |
+| <kbd>ArrowDown</kbd> <kbd>ArrowRight</kbd> | When `Content` is open, moves to the next item.                                                                                |
+|  <kbd>ArrowUp</kbd> <kbd>ArrowLeft</kbd>   | When `Content` is open, moves to the previous item.                                                                            |
+|               <kbd>Esc</kbd>               | Closes the menu and moves focus to `Trigger`.                                                                                  |
+
+## Migrating from <= v0.55
+
+### Remove `<PortalTargets />`
+
+`<Menu>` now uses the browser's Popover API for layering. You no longer need `<PortalTargets />` in your templates.
+
+```diff
+- import { PortalTargets, Menu } from 'ember-primitives';
++ import { Menu } from 'ember-primitives/components/menu';
+
+  <template>
+-   <PortalTargets />
+    <Menu as |m|>
+      ...
+    </Menu>
+  </template>
+```
+
+### Remove `@inline`
+
+The `@inline` argument has been removed. Menu content now renders inline in the DOM and uses the Popover API for layering.
+
+### CSS considerations
+
+The `popover` HTML attribute has a browser UA stylesheet that adds default `border` and `overflow` styles to elements with `[popover]`. You may need to set `border: none` on your menu content if you don't want the browser's default `[popover]` border. The component resets `overflow: visible` automatically.