From 787507fd9a2998c5bb59e50bef7325b0faf1d178 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:42:45 -0500
Subject: [PATCH 1/2] Attempt to use popover attribute in `<Popover>`

---
 .../public/docs/5-floaty-bits/anchor-to.md    |  56 +++---
 .../public/docs/5-floaty-bits/floating-ui.md  |  57 +++---
 docs-app/public/docs/5-floaty-bits/popover.md | 182 +++++++++---------
 ember-primitives/src/components/popover.gts   |  34 +---
 .../src/floating-ui/component.gts             |  16 +-
 ember-primitives/src/floating-ui/modifier.ts  |  56 +++++-
 6 files changed, 218 insertions(+), 183 deletions(-)

diff --git a/docs-app/public/docs/5-floaty-bits/anchor-to.md b/docs-app/public/docs/5-floaty-bits/anchor-to.md
index 0ad795bba..738934530 100644
--- a/docs-app/public/docs/5-floaty-bits/anchor-to.md
+++ b/docs-app/public/docs/5-floaty-bits/anchor-to.md
@@ -2,6 +2,8 @@
 
 The `anchorTo` modifier provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc). 
 
+This modifier uses the native [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) attribute to automatically make the intended floating element behave correctly.
+
 <Callout>
 
 The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) lands and is widely supported (This component and modifier will still exist for the purpose of wiring up the ids between anchor and target). 
@@ -34,35 +36,37 @@ import { InViewport } from 'ember-primitives/viewport';
 
 <template>
   <InViewport>
-    <button id="reference" popovertarget="floating">Click the reference element</button>
-    <menu popover id="floating" {{anchorTo "#reference"}}>Here is <br> floating element</menu>
+    <button id="reference">Click the reference element</button>
+    <menu {{anchorTo "#reference"}}>Here is <br> floating element</menu>
   </InViewport>
 
   <style>
-    menu#floating {
-      width: max-content;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: #222;
-      color: white;
-      font-weight: bold;
-      padding: 2rem;
-      border-radius: 4px;
-      font-size: 90%;
-      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
-      z-index: 10;
-    }
-    button#reference {
-      padding: 0.5rem;
-      border: 1px solid;
-      display: inline-block;
-      background: white;
-      color: black;
-      border-radius: 0.25rem;
-
-      &:hover {
-        background: #ddd;
+    @scope {
+      menu {
+        width: max-content;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #222;
+        color: white;
+        font-weight: bold;
+        padding: 2rem;
+        border-radius: 4px;
+        font-size: 90%;
+        filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
+        z-index: 10;
+      }
+      button {
+        padding: 0.5rem;
+        border: 1px solid;
+        display: inline-block;
+        background: white;
+        color: black;
+        border-radius: 0.25rem;
+
+        &:hover {
+          background: #ddd;
+        }
       }
     }
   </style>
diff --git a/docs-app/public/docs/5-floaty-bits/floating-ui.md b/docs-app/public/docs/5-floaty-bits/floating-ui.md
index ff3f898e3..a8b77ccd8 100644
--- a/docs-app/public/docs/5-floaty-bits/floating-ui.md
+++ b/docs-app/public/docs/5-floaty-bits/floating-ui.md
@@ -2,6 +2,8 @@
 
 The `FloatingUI` component provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc). 
 
+This component uses the native [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) attribute to automatically make the intended floating element behave correctly.
+
 <Callout>
 
 The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) lands and is widely supported (This component and modifier will still exist for the purpose of wiring up the ids between anchor and target). 
@@ -11,6 +13,7 @@ The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](h
 Several of Floating UI's functions and [middleware](https://floating-ui.com/docs/middleware) are used to create an experience out of the box that is useful and expected.
 See Floating UI's [documentation](https://floating-ui.com/docs/getting-started) for more information on any of the following included functionality.
 
+
 ## Install
 
 
@@ -31,35 +34,37 @@ import { FloatingUI } from 'ember-primitives/floating-ui';
 
 <template>
   <FloatingUI as |reference floating|>
-    <button {{reference}} popovertarget="floating2">Click the reference element</button>
-    <menu {{floating}} popover id="floating2">Here is <br> floating element</menu>
+    <button {{reference}}>Click the reference element</button>
+    <menu {{floating}}>Here is <br> floating element</menu>
   </FloatingUI>
 
   <style>
-    menu#floating2 {
-      width: max-content;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: #222;
-      color: white;
-      font-weight: bold;
-      padding: 2rem;
-      border-radius: 4px;
-      font-size: 90%;
-      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
-      z-index: 10;
-    }
-    button[popovertarget="floating2"] {
-      padding: 0.5rem;
-      border: 1px solid;
-      display: inline-block;
-      background: white;
-      color: black;
-      border-radius: 0.25rem;
-
-      &:hover {
-        background: #ddd;
+    @scope {
+      menu {
+        width: max-content;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #222;
+        color: white;
+        font-weight: bold;
+        padding: 2rem;
+        border-radius: 4px;
+        font-size: 90%;
+        filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
+        z-index: 10;
+      }
+      button {
+        padding: 0.5rem;
+        border: 1px solid;
+        display: inline-block;
+        background: white;
+        color: black;
+        border-radius: 0.25rem;
+
+        &:hover {
+          background: #ddd;
+        }
       }
     }
   </style>
diff --git a/docs-app/public/docs/5-floaty-bits/popover.md b/docs-app/public/docs/5-floaty-bits/popover.md
index 0f459a807..4358e925c 100644
--- a/docs-app/public/docs/5-floaty-bits/popover.md
+++ b/docs-app/public/docs/5-floaty-bits/popover.md
@@ -40,38 +40,40 @@ import { loremIpsum } from 'lorem-ipsum';
   </div>
 
   <style>
-    .floatybit {
-      width: max-content;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: #222;
-      color: white;
-      font-weight: bold;
-      padding: 5px;
-      border-radius: 4px;
-      font-size: 90%;
-      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
-      z-index: 10;
-    }
-    .arrow {
-      position: absolute;
-      background: #222;
-      width: 8px;
-      height: 8px;
-      transform: rotate(45deg);
-    }
-    .hook {
-      padding: 0.5rem;
-      border: 1px solid;
-      display: inline-block;
-      color: black;
-    }
-    .scroll-content {
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid;
-      padding: 0.5rem;
+    @scope {
+      .floatybit {
+        width: max-content;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #222;
+        color: white;
+        font-weight: bold;
+        padding: 5px;
+        border-radius: 4px;
+        font-size: 90%;
+        filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
+        z-index: 10;
+      }
+      .arrow {
+        position: absolute;
+        background: #222;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .hook {
+        padding: 0.5rem;
+        border: 1px solid;
+        display: inline-block;
+        color: black;
+      }
+      .scroll-content {
+        max-height: 150px;
+        overflow-y: auto;
+        border: 1px solid;
+        padding: 0.5rem;
+      }
     }
   </style>
 </template>
@@ -140,64 +142,66 @@ const settings = cell(true);
     </div>
 
   <style>
-    .floatybit {
-      width: max-content;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: #222;
-      color: white;
-      font-weight: bold;
-      padding: 0.5rem;
-      border-radius: 4px;
-      font-size: 90%;
-      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
-      z-index: 10;
-    }
-    .floatybit .floatybit {
-      background: #eee;
-      color: black;
-    }
-    .floatybit .floatybit .arrow {
-      background: #eee;
-    }
-    ul {
-      padding-left: 1rem;
-      margin: 0;
-    }
-    .arrow {
-      position: absolute;
-      background: #222;
-      width: 8px;
-      height: 8px;
-      transform: rotate(45deg);
-    }
-    .hook {
-      padding: 0.5rem;
-      border: 1px solid;
-      display: inline-block;
-      color: black;
-    }
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: white;
-      position: sticky;
-      top: 0;
-      width: 100%;
-      padding: 0.25rem;
-      filter: drop-shadow(0px 3px 6px #000000aa);
-    }
-    .main {
-      padding: 0.5rem;
-    }
-    .site {
-      max-height: 200px;
-      overflow-y: auto;
-      border: 1px solid;
+    @scope {
+      .floatybit {
+        width: max-content;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #222;
+        color: white;
+        font-weight: bold;
+        padding: 0.5rem;
+        border-radius: 4px;
+        font-size: 90%;
+        filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
+        z-index: 10;
+      }
+      .floatybit .floatybit {
+        background: #eee;
+        color: black;
+      }
+      .floatybit .floatybit .arrow {
+        background: #eee;
+      }
+      ul {
+        padding-left: 1rem;
+        margin: 0;
+      }
+      .arrow {
+        position: absolute;
+        background: #222;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .hook {
+        padding: 0.5rem;
+        border: 1px solid;
+        display: inline-block;
+        color: black;
+      }
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: white;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        padding: 0.25rem;
+        filter: drop-shadow(0px 3px 6px #000000aa);
+      }
+      .main {
+        padding: 0.5rem;
+      }
+      .site {
+        max-height: 200px;
+        overflow-y: auto;
+        border: 1px solid;
+      }
+      * { box-sizing: border-box; }
     }
-    * { box-sizing: border-box; }
   </style>
 </template>
 ```
diff --git a/ember-primitives/src/components/popover.gts b/ember-primitives/src/components/popover.gts
index 39d5cb776..a14f7af5a 100644
--- a/ember-primitives/src/components/popover.gts
+++ b/ember-primitives/src/components/popover.gts
@@ -63,15 +63,6 @@ export interface Signature {
      * This argument is forwarded to the `<FloatingUI>` component.
      */
     strategy?: HookSignature["Args"]["Named"]["strategy"];
-
-    /**
-     * By default, the popover is portaled.
-     * If you don't control your CSS, and the positioning of the popover content
-     * is misbehaving, you may pass "@inline={{true}}" to opt out of portalling.
-     *
-     * Inline may also be useful in nested menus, where you know exactly how the nesting occurs
-     */
-    inline?: boolean;
   };
   Blocks: {
     default: [
@@ -98,7 +89,6 @@ const Content: TOC<{
   Element: HTMLDivElement;
   Args: {
     floating: ModifierLike<{ Element: HTMLElement }>;
-    inline?: boolean;
     /**
      * By default the popover content is wrapped in a div.
      * You may change this by supplying the name of an element here.
@@ -117,25 +107,9 @@ const Content: TOC<{
   Blocks: { default: [] };
 }> = <template>
   {{#let (element (getElementTag @as)) as |El|}}
-    {{#if @inline}}
-      {{! @glint-ignore
-            https://github.com/tildeio/ember-element-helper/issues/91
-            https://github.com/typed-ember/glint/issues/610
-      }}
-      <El {{@floating}} ...attributes>
-        {{yield}}
-      </El>
-    {{else}}
-      <Portal @to={{TARGETS.popover}}>
-        {{! @glint-ignore
-              https://github.com/tildeio/ember-element-helper/issues/91
-              https://github.com/typed-ember/glint/issues/610
-        }}
-        <El {{@floating}} ...attributes>
-          {{yield}}
-        </El>
-      </Portal>
-    {{/if}}
+    <El {{@floating}} {{@makePopover}} ...attributes>
+      {{yield}}
+    </El>
   {{/let}}
 </template>;
 
@@ -235,7 +209,7 @@ export const Popover: TOC<Signature> = <template>
           (hash
             reference=reference
             setReference=extra.setReference
-            Content=(component Content floating=floating inline=@inline)
+            Content=(component Content floating=floating makePopover=extra.makePopover)
             data=extra.data
             arrow=arrow
           )
diff --git a/ember-primitives/src/floating-ui/component.gts b/ember-primitives/src/floating-ui/component.gts
index 4725dfd86..77ef7a166 100644
--- a/ember-primitives/src/floating-ui/component.gts
+++ b/ember-primitives/src/floating-ui/component.gts
@@ -4,7 +4,7 @@ import { hash } from "@ember/helper";
 
 import { modifier as eModifier } from "ember-modifier";
 
-import { anchorTo } from "./modifier.ts";
+import { anchorTo, makePopover } from "./modifier.ts";
 
 import type { Signature as ModifierSignature } from "./modifier.ts";
 import type { MiddlewareState } from "@floating-ui/dom";
@@ -114,6 +114,14 @@ export interface Signature {
          * Gives you x, y position, among other things.
          */
         data?: MiddlewareState;
+
+        /**
+         * Converts the floating element into a popover, also updating the
+         * reference element
+         */
+        makePopover: ModifierLike<{
+          Element: HTMLElement | SVGElement;
+        }>;
       },
     ];
   };
@@ -178,7 +186,11 @@ export class FloatingUI extends Component<Signature> {
         {{yield
           (modifier ref this.setReference)
           floating
-          (hash setReference=this.setReference data=this.data)
+          (hash
+            setReference=this.setReference
+            data=this.data
+            makePopover=(modifier makePopover this.reference)
+          )
         }}
       {{/let}}
     {{/let}}
diff --git a/ember-primitives/src/floating-ui/modifier.ts b/ember-primitives/src/floating-ui/modifier.ts
index 7cdd53f9e..57bb0c10f 100644
--- a/ember-primitives/src/floating-ui/modifier.ts
+++ b/ember-primitives/src/floating-ui/modifier.ts
@@ -84,6 +84,51 @@ export interface Signature {
   };
 }
 
+let id = 1;
+const nextId = () => {
+  id++;
+
+  return `ep-popover-${id}`;
+};
+
+function getId(element: Element) {
+  let existing = element.getAttribute('popovertarget');
+
+  if (existing) return existing;
+
+  existing = nextId();
+
+  element.setAttribute('popovertarget', existing);
+
+  return existing;
+}
+
+export const makePopover = eModifier<{
+  Element: HTMLElement | SVGElement;
+  Args: {
+    Positional: [string | HTMLElement | SVGElement];
+  };
+}>((floatingElement, [_referenceElement]) => {
+  const referenceElement = findReference(_referenceElement);
+
+  const popoverId = getId(referenceElement);
+
+  floatingElement.setAttribute('popover', '');
+  floatingElement.id = popoverId;
+});
+
+function findReference(specified: string | HTMLElement | SVGElement) {
+  const referenceElement: null | HTMLElement | SVGElement =
+    typeof specified === 'string' ? document.querySelector(specified) : specified;
+
+  assert(
+    'no reference element defined',
+    referenceElement instanceof HTMLElement || referenceElement instanceof SVGElement
+  );
+
+  return referenceElement;
+}
+
 /**
  * A modifier to apply to the _floating_ element.
  * This is what will anchor to the reference element.
@@ -112,21 +157,12 @@ export const anchorTo = eModifier<Signature>(
       setData,
     }
   ) => {
-    const referenceElement: null | HTMLElement | SVGElement =
-      typeof _referenceElement === 'string'
-        ? document.querySelector(_referenceElement)
-        : _referenceElement;
-
-    assert(
-      'no reference element defined',
-      referenceElement instanceof HTMLElement || referenceElement instanceof SVGElement
-    );
+    const referenceElement = findReference(_referenceElement);
 
     assert(
       'no floating element defined',
       floatingElement instanceof HTMLElement || _referenceElement instanceof SVGElement
     );
-
     assert(
       'reference and floating elements cannot be the same element',
       floatingElement !== _referenceElement

From fb6f8c52902a02b05c62560646a067e5a98595bb Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:44:30 -0500
Subject: [PATCH 2/2] ope

---
 ember-primitives/src/components/popover.gts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ember-primitives/src/components/popover.gts b/ember-primitives/src/components/popover.gts
index a14f7af5a..9c1a2fb36 100644
--- a/ember-primitives/src/components/popover.gts
+++ b/ember-primitives/src/components/popover.gts
@@ -89,6 +89,7 @@ const Content: TOC<{
   Element: HTMLDivElement;
   Args: {
     floating: ModifierLike<{ Element: HTMLElement }>;
+    makePopover: ModifierLike<{ Element: HTMLElement }>;
     /**
      * By default the popover content is wrapped in a div.
      * You may change this by supplying the name of an element here.