ember-primitives 0.55.2 → 0.57.0

package/declarations/components/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/components/menu.gts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/components/menu.gts"],"names":[],"mappings":"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"}

package/declarations/components/popover.d.ts

@@ -50,14 +50,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: [
@@ -74,8 +66,10 @@ export interface Signature {
     };
 }
 /**
- * Allows lazy evaluation of the portal target (do nothing until rendered)
- * This is useful because the algorithm for finding the portal target isn't cheap.
+ * Content uses `popover="manual"` + `showPopover()` to promote
+ * the element to the browser's top layer. This escapes all ancestor
+ * overflow clipping and stacking contexts — the same guarantee that
+ * portalling provided, but using the browser's native mechanism.
  */
 declare const Content: TOC<{
     Element: HTMLDivElement;
@@ -83,7 +77,6 @@ declare const Content: TOC<{
         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.

package/declarations/components/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.gts"],"names":[],"mappings":"AAmQA,OAAO,KAAK,EAAE,SAAS,IAAI,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE;QACJ;;;;WAIG;QACH,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;QAC5D;;;;WAIG;QACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC;QAC1D;;;;WAIG;QACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,CAAC;QAChE;;;;;;;;;;;;WAYG;QACH,SAAS,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;QAC9E;;;;WAIG;QACH,YAAY,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC;QAC9D;;;;;;WAMG;QACH,QAAQ,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC;QAEtD;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,SAAS,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChE,YAAY,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;gBACnF,OAAO,EAAE,aAAa,CAAC,OAAO,OAAO,EAAE,UAAU,CAAC,CAAC;gBACnD,IAAI,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACnE,KAAK,EAAE,YAAY,CAAC;oBAAE,OAAO,EAAE,WAAW,CAAA;iBAAE,CAAC,CAAC;aAC/C;SACF,CAAC;KACH,CAAC;CACH;AAMD;;;GAGG;AACH,QAAA,MAAM,OAAO,EAAE,GAAG,CAAC;IACjB,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,YAAY,CAAC;YAAE,OAAO,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC;QACjD,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB;;;;;;;;;;;;WAYG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IACF,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CAuCC,CAAC;AAkFH,eAAO,MAAM,OAAO,EAAE,GAAG,CAAC,SAAS,CAmCjC,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.gts"],"names":[],"mappings":"AAyQA,OAAO,KAAK,EAAE,SAAS,IAAI,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE;QACJ;;;;WAIG;QACH,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;QAC5D;;;;WAIG;QACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC;QAC1D;;;;WAIG;QACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,CAAC;QAChE;;;;;;;;;;;;WAYG;QACH,SAAS,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;QAC9E;;;;WAIG;QACH,YAAY,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC;QAC9D;;;;;;WAMG;QACH,QAAQ,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC;KACvD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,SAAS,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChE,YAAY,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;gBACnF,OAAO,EAAE,aAAa,CAAC,OAAO,OAAO,EAAE,UAAU,CAAC,CAAC;gBACnD,IAAI,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACnE,KAAK,EAAE,YAAY,CAAC;oBAAE,OAAO,EAAE,WAAW,CAAA;iBAAE,CAAC,CAAC;aAC/C;SACF,CAAC;KACH,CAAC;CACH;AAoCD;;;;;GAKG;AACH,QAAA,MAAM,OAAO,EAAE,GAAG,CAAC;IACjB,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,YAAY,CAAC;YAAE,OAAO,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC;QACjD;;;;;;;;;;;;WAYG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IACF,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CA0BC,CAAC;AAkFH,eAAO,MAAM,OAAO,EAAE,GAAG,CAAC,SAAS,CAmCjC,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/declarations/components/tabs.d.ts

@@ -212,7 +212,7 @@ declare class TabState {
         activeTab?: string;
         onChange?: () => void;
     });
-    get activationMode(): "automatic" | "manual";
+    get activationMode(): "manual" | "automatic";
     get isAutomatic(): boolean;
     /**
      * This function relies on the fact that during rendering,

package/dist/components/menu.js

@@ -4,7 +4,7 @@ import { on } from '@ember/modifier';
 import { guidFor } from '@ember/object/internals';
 import { modifier } from 'ember-modifier';
 import { cell } from 'ember-resources';
-import { getTabsterAttribute, MoverDirections, getTabster, setTabsterAttribute } from 'tabster';
+import { getTabsterAttribute, MoverDirections, setTabsterAttribute, getTabster } from 'tabster';
 import { Link } from './link.js';
 import { Popover } from './popover.js';
 import { precompileTemplate } from '@ember/template-compilation';
@@ -60,12 +60,18 @@ const installContent = modifier((element, _, {
   isOpen,
   triggerElement
 }) => {
-  // focus first focusable element on the content
-  const tabster = getTabster(window);
-  const firstFocusable = tabster?.focusable.findFirst({
-    container: element
-  });
-  firstFocusable?.focus();
+  // Focus first focusable element when the popover opens.
+  // The toggle event fires natively after showPopover() completes.
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+  function onToggle(e) {
+    if (e.newState !== "open") return;
+    const tabster = getTabster(window);
+    const firstFocusable = tabster?.focusable.findFirst({
+      container: element
+    });
+    firstFocusable?.focus();
+  }
+  element.addEventListener("toggle", onToggle);
   // listen for "outside" clicks
   function onDocumentClick(e) {
     if (isOpen.current && e.target && !element.contains(e.target) && !triggerElement.current?.contains(e.target)) {
@@ -81,6 +87,7 @@ const installContent = modifier((element, _, {
   document.addEventListener("click", onDocumentClick);
   document.addEventListener("keydown", onDocumentKeydown);
   return () => {
+    element.removeEventListener("toggle", onToggle);
     document.removeEventListener("click", onDocumentClick);
     document.removeEventListener("keydown", onDocumentKeydown);
   };
@@ -137,7 +144,7 @@ const TriggerElement = () => cell();
 class Menu extends Component {
   contentId = guidFor(this);
   static {
-    setComponentTemplate(precompileTemplate("{{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n  <Popover @flipOptions={{@flipOptions}} @middleware={{@middleware}} @offsetOptions={{@offsetOptions}} @placement={{@placement}} @shiftOptions={{@shiftOptions}} @strategy={{@strategy}} @inline={{@inline}} as |p|>\n    {{#let (modifier trigger triggerElement=triggerEl isOpen=isOpen contentId=this.contentId setReference=p.setReference) as |triggerModifier|}}\n      {{yield (hash trigger=triggerModifier Trigger=(component Trigger triggerModifier=triggerModifier) Content=(component Content PopoverContent=p.Content isOpen=isOpen triggerElement=triggerEl contentId=this.contentId) arrow=p.arrow isOpen=isOpen.current)}}\n    {{/let}}\n  </Popover>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n  <Popover @flipOptions={{@flipOptions}} @middleware={{@middleware}} @offsetOptions={{@offsetOptions}} @placement={{@placement}} @shiftOptions={{@shiftOptions}} @strategy={{@strategy}} as |p|>\n    {{#let (modifier trigger triggerElement=triggerEl isOpen=isOpen contentId=this.contentId setReference=p.setReference) as |triggerModifier|}}\n      {{yield (hash trigger=triggerModifier Trigger=(component Trigger triggerModifier=triggerModifier) Content=(component Content PopoverContent=p.Content isOpen=isOpen triggerElement=triggerEl contentId=this.contentId) arrow=p.arrow isOpen=isOpen.current)}}\n    {{/let}}\n  </Popover>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         IsOpen,

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/components/menu.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\nimport { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from \"tabster\";\n\nimport { Link, type Signature as LinkSignature } from \"./link.gts\";\nimport { Popover, type Signature as PopoverSignature } from \"./popover.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\ntype Cell<V> = ReturnType<typeof cell<V>>;\ntype LinkArgs = LinkSignature[\"Args\"];\ntype PopoverArgs = PopoverSignature[\"Args\"];\ntype PopoverBlockParams = PopoverSignature[\"Blocks\"][\"default\"][0];\n\nconst TABSTER_CONFIG_CONTENT = getTabsterAttribute(\n  {\n    mover: {\n      direction: MoverDirections.Both,\n      cyclic: true,\n    },\n    deloser: {},\n  },\n  true,\n);\n\nconst TABSTER_CONFIG_TRIGGER = {\n  deloser: {},\n};\n\nexport interface Signature {\n  Args: PopoverArgs;\n  Blocks: {\n    default: [\n      {\n        arrow: PopoverBlockParams[\"arrow\"];\n        trigger: WithBoundArgs<\n          typeof trigger,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n        >;\n        Trigger: WithBoundArgs<typeof Trigger, \"triggerModifier\">;\n        Content: WithBoundArgs<\n          typeof Content,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"PopoverContent\"\n        >;\n        isOpen: boolean;\n      },\n    ];\n  };\n}\n\nexport interface SeparatorSignature {\n  Element: HTMLDivElement;\n  Blocks: { default: [] };\n}\n\nconst Separator: TOC<SeparatorSignature> = <template>\n  <div role=\"separator\" ...attributes>\n    {{yield}}\n  </div>\n</template>;\n\n/**\n * We focus items on `pointerMove` to achieve the following:\n *\n * - Mouse over an item (it focuses)\n * - Leave mouse where it is and use keyboard to focus a different item\n * - Wiggle mouse without it leaving previously focused item\n * - Previously focused item should re-focus\n *\n * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n * wiggles. This is to match native menu implementation.\n */\nfunction focusOnHover(e: PointerEvent) {\n  const item = e.currentTarget;\n\n  if (item instanceof HTMLElement) {\n    item?.focus();\n  }\n}\n\ninterface PrivateItemSignature {\n  Element: HTMLButtonElement;\n  Args: { onSelect?: (event: Event) => void; toggle: () => void };\n  Blocks: { default: [] };\n}\n\nexport interface ItemSignature {\n  Element: PrivateItemSignature[\"Element\"];\n  Args: Omit<PrivateItemSignature[\"Args\"], \"toggle\">;\n  Blocks: PrivateItemSignature[\"Blocks\"];\n}\n\nconst Item: TOC<PrivateItemSignature> = <template>\n  {{! @glint-expect-error }}\n  {{#let (if @onSelect (modifier on \"click\" @onSelect)) as |maybeClick|}}\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      {{! @glint-expect-error }}\n      {{maybeClick}}\n      {{on \"click\" @toggle}}\n      {{on \"pointermove\" focusOnHover}}\n      ...attributes\n    >\n      {{yield}}\n    </button>\n  {{/let}}\n</template>;\n\ninterface LinkItemArgs extends LinkArgs {\n  toggle: () => void;\n}\n\ninterface PrivateLinkItemSignature {\n  Element: HTMLAnchorElement;\n  Args: LinkItemArgs;\n  Blocks: { default: [] };\n}\n\nexport interface LinkItemSignature {\n  Element: PrivateLinkItemSignature[\"Element\"];\n  Args: LinkArgs;\n  Blocks: PrivateLinkItemSignature[\"Blocks\"];\n}\n\nconst LinkItem: TOC<PrivateLinkItemSignature> = <template>\n  <Link\n    role=\"menuitem\"\n    @href={{@href}}\n    @includeActiveQueryParams={{@includeActiveQueryParams}}\n    @activeOnSubPaths={{@activeOnSubPaths}}\n    {{on \"click\" @toggle}}\n    {{on \"pointermove\" focusOnHover}}\n    ...attributes\n  >\n    {{yield}}\n  </Link>\n</template>;\n\nconst installContent = eModifier<{\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      isOpen: Cell<boolean>;\n      triggerElement: Cell<HTMLElement>;\n    };\n  };\n}>((element, _: [], { isOpen, triggerElement }) => {\n  // focus first focusable element on the content\n  const tabster = getTabster(window);\n  const firstFocusable = tabster?.focusable.findFirst({\n    container: element,\n  });\n\n  firstFocusable?.focus();\n\n  // listen for \"outside\" clicks\n  function onDocumentClick(e: MouseEvent) {\n    if (\n      isOpen.current &&\n      e.target &&\n      !element.contains(e.target as HTMLElement) &&\n      !triggerElement.current?.contains(e.target as HTMLElement)\n    ) {\n      isOpen.current = false;\n    }\n  }\n\n  // listen for the escape key\n  function onDocumentKeydown(e: KeyboardEvent) {\n    if (isOpen.current && e.key === \"Escape\") {\n      isOpen.current = false;\n    }\n  }\n\n  document.addEventListener(\"click\", onDocumentClick);\n  document.addEventListener(\"keydown\", onDocumentKeydown);\n\n  return () => {\n    document.removeEventListener(\"click\", onDocumentClick);\n    document.removeEventListener(\"keydown\", onDocumentKeydown);\n  };\n});\n\ninterface PrivateContentSignature {\n  Element: HTMLDivElement;\n  Args: {\n    triggerElement: Cell<HTMLElement>;\n    contentId: string;\n    isOpen: Cell<boolean>;\n    PopoverContent: PopoverBlockParams[\"Content\"];\n  };\n  Blocks: {\n    default: [\n      {\n        Item: WithBoundArgs<typeof Item, \"toggle\">;\n        LinkItem: WithBoundArgs<typeof LinkItem, \"toggle\">;\n        Separator: typeof Separator;\n      },\n    ];\n  };\n}\n\nexport interface ContentSignature {\n  Element: PrivateContentSignature[\"Element\"];\n  Blocks: PrivateContentSignature[\"Blocks\"];\n}\n\nconst Content: TOC<PrivateContentSignature> = <template>\n  {{#if @isOpen.current}}\n    <@PopoverContent\n      id={{@contentId}}\n      role=\"menu\"\n      data-tabster={{TABSTER_CONFIG_CONTENT}}\n      tabindex=\"0\"\n      {{installContent isOpen=@isOpen triggerElement=@triggerElement}}\n      ...attributes\n    >\n      {{yield\n        (hash\n          Item=(component Item toggle=@isOpen.toggle)\n          LinkItem=(component LinkItem toggle=@isOpen.toggle)\n          Separator=Separator\n        )\n      }}\n    </@PopoverContent>\n  {{/if}}\n</template>;\n\ninterface PrivateTriggerModifierSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      triggerElement: Cell<HTMLElement>;\n      isOpen: Cell<boolean>;\n      contentId: string;\n      setReference: PopoverBlockParams[\"setReference\"];\n      stopPropagation?: boolean;\n      preventDefault?: boolean;\n    };\n  };\n}\n\nexport interface TriggerModifierSignature {\n  Element: PrivateTriggerModifierSignature[\"Element\"];\n}\n\nconst trigger = eModifier<PrivateTriggerModifierSignature>(\n  (\n    element,\n    _: [],\n    { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },\n  ) => {\n    element.setAttribute(\"aria-haspopup\", \"menu\");\n\n    if (isOpen.current) {\n      element.setAttribute(\"aria-controls\", contentId);\n      element.setAttribute(\"aria-expanded\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-controls\");\n      element.setAttribute(\"aria-expanded\", \"false\");\n    }\n\n    setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);\n\n    const onTriggerClick = (event: MouseEvent) => {\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n\n      isOpen.toggle();\n    };\n\n    element.addEventListener(\"click\", onTriggerClick);\n\n    triggerElement.current = element;\n\n    setReference(element);\n\n    return () => {\n      element.removeEventListener(\"click\", onTriggerClick);\n    };\n  },\n);\n\ninterface PrivateTriggerSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    triggerModifier: WithBoundArgs<\n      typeof trigger,\n      \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n    >;\n    stopPropagation?: boolean;\n    preventDefault?: boolean;\n  };\n  Blocks: { default: [] };\n}\n\nexport interface TriggerSignature {\n  Element: PrivateTriggerSignature[\"Element\"];\n  Blocks: PrivateTriggerSignature[\"Blocks\"];\n}\n\nconst Trigger: TOC<PrivateTriggerSignature> = <template>\n  <button\n    type=\"button\"\n    {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}\n    ...attributes\n  >\n    {{yield}}\n  </button>\n</template>;\n\nconst IsOpen = () => cell<boolean>(false);\nconst TriggerElement = () => cell<HTMLElement>();\n\nexport class Menu extends Component<Signature> {\n  contentId = guidFor(this);\n\n  <template>\n    {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n      <Popover\n        @flipOptions={{@flipOptions}}\n        @middleware={{@middleware}}\n        @offsetOptions={{@offsetOptions}}\n        @placement={{@placement}}\n        @shiftOptions={{@shiftOptions}}\n        @strategy={{@strategy}}\n        @inline={{@inline}}\n        as |p|\n      >\n        {{#let\n          (modifier\n            trigger\n            triggerElement=triggerEl\n            isOpen=isOpen\n            contentId=this.contentId\n            setReference=p.setReference\n          )\n          as |triggerModifier|\n        }}\n          {{yield\n            (hash\n              trigger=triggerModifier\n              Trigger=(component Trigger triggerModifier=triggerModifier)\n              Content=(component\n                Content\n                PopoverContent=p.Content\n                isOpen=isOpen\n                triggerElement=triggerEl\n                contentId=this.contentId\n              )\n              arrow=p.arrow\n              isOpen=isOpen.current\n            )\n          }}\n        {{/let}}\n      </Popover>\n    {{/let}}\n  </template>\n}\n\nexport default Menu;\n"],"names":["TABSTER_CONFIG_CONTENT","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","deloser","TABSTER_CONFIG_TRIGGER","Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","focusOnHover","e","item","currentTarget","HTMLElement","focus","Item","scope","on","LinkItem","Link","installContent","eModifier","element","_","isOpen","triggerElement","tabster","getTabster","window","firstFocusable","focusable","findFirst","container","onDocumentClick","current","target","contains","onDocumentKeydown","key","document","addEventListener","removeEventListener","Content","hash","trigger","contentId","setReference","stopPropagation","preventDefault","setAttribute","removeAttribute","setTabsterAttribute","onTriggerClick","event","toggle","Trigger","IsOpen","cell","TriggerElement","Menu","Component","guidFor","Popover"],"mappings":";;;;;;;;;;;;;AAoBA,MAAMA,yBAAyBC,mBAAA,CAC7B;AACEC,EAAAA,KAAA,EAAO;IACLC,SAAA,EAAWC,gBAAgBC,IAAI;AAC/BC,IAAAA,MAAA,EAAQ;GACV;AACAC,EAAAA,OAAA,EAAS;AACX,CAAA,EACA,IAAA,CAAA;AAGF,MAAMC,sBAAA,GAAyB;AAC7BD,EAAAA,OAAA,EAAS;AACX,CAAA;AA4BA,MAAME,SAAe,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,6DAAA,EAI3C;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEV;;;;;;;;;;;AAWA,SAASC,YAAAA,CAAaC,CAAe,EAAA;AACnC,EAAA,MAAMC,IAAA,GAAOD,EAAEE,aAAa;EAE5B,IAAID,gBAAgBE,WAAA,EAAa;IAC/BF,IAAA,EAAMG,KAAA,EAAA;AACR,EAAA;AACF;AAcA,MAAMC,IAAU,GAAAV,oBAAA,CAAwBC,kBAAA,CAAA,wTAAA,EAexC;EAAAC,UAAA,EAAA,IAAA;AAAAS,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;AAAAR,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAD,YAAA,EAAA,CAAA;AAkBV,MAAMU,QAAc,GAAAb,oBAAA,CAA4BC,kBAAA,CAAA,2OAAA,EAYhD;EAAAC,UAAA,EAAA,IAAA;AAAAS,EAAAA,KAAA,EAAAA,OAAA;IAAAG,IAAA;IAAAF,EAAA;AAAAR,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAD,YAAA,EAAA,CAAA;AAEV,MAAMY,cAAA,GAAiBC,QAAA,CAQpB,CAACC,SAASC,CAAA,EAAO;EAAEC,MAAM;AAAEC,EAAAA;AAAc,CAAE,KAAA;AAC5C;AACA,EAAA,MAAMC,UAAUC,UAAA,CAAWC,MAAA,CAAA;AAC3B,EAAA,MAAMC,cAAA,GAAiBH,OAAA,EAASI,SAAA,CAAUC,SAAA,CAAU;AAClDC,IAAAA,SAAA,EAAWV;AACb,GAAA,CAAA;EAEAO,cAAA,EAAgBf,KAAA,EAAA;AAEhB;EACA,SAASmB,eAAAA,CAAgBvB,CAAa,EAAA;AACpC,IAAA,IACEc,MAAA,CAAOU,OAAO,IACdxB,CAAA,CAAEyB,MAAM,IACR,CAACb,OAAA,CAAQc,QAAQ,CAAC1B,CAAA,CAAEyB,MAAU,CAAA,IAC9B,CAACV,cAAA,CAAeS,OAAO,EAAEE,QAAA,CAAS1B,CAAA,CAAEyB,MAAU,CAAA,EAC9C;MACAX,MAAA,CAAOU,OAAO,GAAG,KAAA;AACnB,IAAA;AACF,EAAA;AAEA;EACA,SAASG,iBAAAA,CAAkB3B,CAAgB,EAAA;IACzC,IAAIc,OAAOU,OAAO,IAAIxB,CAAA,CAAE4B,GAAG,KAAK,QAAA,EAAU;MACxCd,MAAA,CAAOU,OAAO,GAAG,KAAA;AACnB,IAAA;AACF,EAAA;AAEAK,EAAAA,QAAA,CAASC,gBAAgB,CAAC,OAAA,EAASP,eAAA,CAAA;AACnCM,EAAAA,QAAA,CAASC,gBAAgB,CAAC,SAAA,EAAWH,iBAAA,CAAA;AAErC,EAAA,OAAO,MAAA;AACLE,IAAAA,QAAA,CAASE,mBAAmB,CAAC,OAAA,EAASR,eAAA,CAAA;AACtCM,IAAAA,QAAA,CAASE,mBAAmB,CAAC,SAAA,EAAWJ,iBAAA,CAAA;EAC1C,CAAA;AACF,CAAA,CAAA;AA0BA,MAAMK,OAAa,GAAArC,oBAAA,CAA2BC,kBAAA,CAAA,6XAAA,EAmB9C;EAAAC,UAAA,EAAA,IAAA;AAAAS,EAAAA,KAAA,EAAAA,OAAA;IAAArB,sBAAA;IAAAyB,cAAA;IAAAuB,IAAA;IAAA5B,IAAA;IAAAG,QAAA;AAAAd,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAI,YAAA,EAAA,CAAA;AAoBV,MAAMoC,UAAUvB,QAAA,CACd,CACEC,OAAA,EACAC,CAAA,EACA;EAAEE,cAAc;EAAED,MAAM;EAAEqB,SAAS;EAAEC,YAAY;EAAEC,eAAe;AAAEC,EAAAA;AAAc,CAAE,KAAA;AAEpF1B,EAAAA,OAAA,CAAQ2B,YAAY,CAAC,eAAA,EAAiB,MAAA,CAAA;EAEtC,IAAIzB,MAAA,CAAOU,OAAO,EAAE;AAClBZ,IAAAA,OAAA,CAAQ2B,YAAY,CAAC,eAAA,EAAiBJ,SAAA,CAAA;AACtCvB,IAAAA,OAAA,CAAQ2B,YAAY,CAAC,eAAA,EAAiB,MAAA,CAAA;AACxC,EAAA,CAAA,MAAO;AACL3B,IAAAA,OAAA,CAAQ4B,eAAe,CAAC,eAAA,CAAA;AACxB5B,IAAAA,OAAA,CAAQ2B,YAAY,CAAC,eAAA,EAAiB,OAAA,CAAA;AACxC,EAAA;AAEAE,EAAAA,mBAAA,CAAoB7B,OAAA,EAASnB,sBAAA,CAAA;EAE7B,MAAMiD,cAAA,GAAkBC,KAAO,IAAA;AAC7B,IAAA,IAAIN,eAAA,EAAiB;MACnBM,KAAA,CAAMN,eAAe,EAAA;AACvB,IAAA;AAEA,IAAA,IAAIC,cAAA,EAAgB;MAClBK,KAAA,CAAML,cAAc,EAAA;AACtB,IAAA;IAEAxB,MAAA,CAAO8B,MAAM,EAAA;EACf,CAAA;AAEAhC,EAAAA,OAAA,CAAQkB,gBAAgB,CAAC,OAAA,EAASY,cAAA,CAAA;EAElC3B,cAAA,CAAeS,OAAO,GAAGZ,OAAA;EAEzBwB,YAAA,CAAaxB,OAAA,CAAA;AAEb,EAAA,OAAO,MAAA;AACLA,IAAAA,OAAA,CAAQmB,mBAAmB,CAAC,OAAA,EAASW,cAAA,CAAA;EACvC,CAAA;AACF,CAAA,CAAA;AAqBF,MAAMG,OAAa,GAAAlD,oBAAA,CAA2BC,kBAAA,CAAA,qJAAA,EAQ9C;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEV,MAAMgD,MAAA,GAASA,MAAMC,IAAA,CAAc,KAAA,CAAA;AACnC,MAAMC,cAAA,GAAiBA,MAAMD,IAAA,EAAK;AAE3B,MAAME,aAAaC,SAAA,CAAU;AAClCf,EAAAA,SAAA,GAAYgB,OAAA,CAAQ,IAAI,CAAA;AAExB,EAAA;IAAAxD,oBAAA,CAAAC,kBAAA,CAAA,6sBAAA,EAwCA;MAAAC,UAAA,EAAA,IAAA;AAAAS,MAAAA,KAAA,EAAAA,OAAA;QAAAwC,MAAA;QAAAE,cAAA;QAAAI,OAAA;QAAAlB,OAAA;QAAAD,IAAA;QAAAY,OAAA;AAAAb,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"menu.js","sources":["../../src/components/menu.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\nimport { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from \"tabster\";\n\nimport { Link, type Signature as LinkSignature } from \"./link.gts\";\nimport { Popover, type Signature as PopoverSignature } from \"./popover.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\ntype Cell<V> = ReturnType<typeof cell<V>>;\ntype LinkArgs = LinkSignature[\"Args\"];\ntype PopoverArgs = PopoverSignature[\"Args\"];\ntype PopoverBlockParams = PopoverSignature[\"Blocks\"][\"default\"][0];\n\nconst TABSTER_CONFIG_CONTENT = getTabsterAttribute(\n  {\n    mover: {\n      direction: MoverDirections.Both,\n      cyclic: true,\n    },\n    deloser: {},\n  },\n  true,\n);\n\nconst TABSTER_CONFIG_TRIGGER = {\n  deloser: {},\n};\n\nexport interface Signature {\n  Args: PopoverArgs;\n  Blocks: {\n    default: [\n      {\n        arrow: PopoverBlockParams[\"arrow\"];\n        trigger: WithBoundArgs<\n          typeof trigger,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n        >;\n        Trigger: WithBoundArgs<typeof Trigger, \"triggerModifier\">;\n        Content: WithBoundArgs<\n          typeof Content,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"PopoverContent\"\n        >;\n        isOpen: boolean;\n      },\n    ];\n  };\n}\n\nexport interface SeparatorSignature {\n  Element: HTMLDivElement;\n  Blocks: { default: [] };\n}\n\nconst Separator: TOC<SeparatorSignature> = <template>\n  <div role=\"separator\" ...attributes>\n    {{yield}}\n  </div>\n</template>;\n\n/**\n * We focus items on `pointerMove` to achieve the following:\n *\n * - Mouse over an item (it focuses)\n * - Leave mouse where it is and use keyboard to focus a different item\n * - Wiggle mouse without it leaving previously focused item\n * - Previously focused item should re-focus\n *\n * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n * wiggles. This is to match native menu implementation.\n */\nfunction focusOnHover(e: PointerEvent) {\n  const item = e.currentTarget;\n\n  if (item instanceof HTMLElement) {\n    item?.focus();\n  }\n}\n\ninterface PrivateItemSignature {\n  Element: HTMLButtonElement;\n  Args: { onSelect?: (event: Event) => void; toggle: () => void };\n  Blocks: { default: [] };\n}\n\nexport interface ItemSignature {\n  Element: PrivateItemSignature[\"Element\"];\n  Args: Omit<PrivateItemSignature[\"Args\"], \"toggle\">;\n  Blocks: PrivateItemSignature[\"Blocks\"];\n}\n\nconst Item: TOC<PrivateItemSignature> = <template>\n  {{! @glint-expect-error }}\n  {{#let (if @onSelect (modifier on \"click\" @onSelect)) as |maybeClick|}}\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      {{! @glint-expect-error }}\n      {{maybeClick}}\n      {{on \"click\" @toggle}}\n      {{on \"pointermove\" focusOnHover}}\n      ...attributes\n    >\n      {{yield}}\n    </button>\n  {{/let}}\n</template>;\n\ninterface LinkItemArgs extends LinkArgs {\n  toggle: () => void;\n}\n\ninterface PrivateLinkItemSignature {\n  Element: HTMLAnchorElement;\n  Args: LinkItemArgs;\n  Blocks: { default: [] };\n}\n\nexport interface LinkItemSignature {\n  Element: PrivateLinkItemSignature[\"Element\"];\n  Args: LinkArgs;\n  Blocks: PrivateLinkItemSignature[\"Blocks\"];\n}\n\nconst LinkItem: TOC<PrivateLinkItemSignature> = <template>\n  <Link\n    role=\"menuitem\"\n    @href={{@href}}\n    @includeActiveQueryParams={{@includeActiveQueryParams}}\n    @activeOnSubPaths={{@activeOnSubPaths}}\n    {{on \"click\" @toggle}}\n    {{on \"pointermove\" focusOnHover}}\n    ...attributes\n  >\n    {{yield}}\n  </Link>\n</template>;\n\nconst installContent = eModifier<{\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      isOpen: Cell<boolean>;\n      triggerElement: Cell<HTMLElement>;\n    };\n  };\n}>((element, _: [], { isOpen, triggerElement }) => {\n  // Focus first focusable element when the popover opens.\n  // The toggle event fires natively after showPopover() completes.\n  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event\n  function onToggle(e: ToggleEvent) {\n    if (e.newState !== \"open\") return;\n\n    const tabster = getTabster(window);\n    const firstFocusable = tabster?.focusable.findFirst({\n      container: element,\n    });\n\n    firstFocusable?.focus();\n  }\n\n  element.addEventListener(\"toggle\", onToggle as EventListener);\n\n  // listen for \"outside\" clicks\n  function onDocumentClick(e: MouseEvent) {\n    if (\n      isOpen.current &&\n      e.target &&\n      !element.contains(e.target as HTMLElement) &&\n      !triggerElement.current?.contains(e.target as HTMLElement)\n    ) {\n      isOpen.current = false;\n    }\n  }\n\n  // listen for the escape key\n  function onDocumentKeydown(e: KeyboardEvent) {\n    if (isOpen.current && e.key === \"Escape\") {\n      isOpen.current = false;\n    }\n  }\n\n  document.addEventListener(\"click\", onDocumentClick);\n  document.addEventListener(\"keydown\", onDocumentKeydown);\n\n  return () => {\n    element.removeEventListener(\"toggle\", onToggle as EventListener);\n    document.removeEventListener(\"click\", onDocumentClick);\n    document.removeEventListener(\"keydown\", onDocumentKeydown);\n  };\n});\n\ninterface PrivateContentSignature {\n  Element: HTMLDivElement;\n  Args: {\n    triggerElement: Cell<HTMLElement>;\n    contentId: string;\n    isOpen: Cell<boolean>;\n    PopoverContent: PopoverBlockParams[\"Content\"];\n  };\n  Blocks: {\n    default: [\n      {\n        Item: WithBoundArgs<typeof Item, \"toggle\">;\n        LinkItem: WithBoundArgs<typeof LinkItem, \"toggle\">;\n        Separator: typeof Separator;\n      },\n    ];\n  };\n}\n\nexport interface ContentSignature {\n  Element: PrivateContentSignature[\"Element\"];\n  Blocks: PrivateContentSignature[\"Blocks\"];\n}\n\nconst Content: TOC<PrivateContentSignature> = <template>\n  {{#if @isOpen.current}}\n    <@PopoverContent\n      id={{@contentId}}\n      role=\"menu\"\n      data-tabster={{TABSTER_CONFIG_CONTENT}}\n      tabindex=\"0\"\n      {{installContent isOpen=@isOpen triggerElement=@triggerElement}}\n      ...attributes\n    >\n      {{yield\n        (hash\n          Item=(component Item toggle=@isOpen.toggle)\n          LinkItem=(component LinkItem toggle=@isOpen.toggle)\n          Separator=Separator\n        )\n      }}\n    </@PopoverContent>\n  {{/if}}\n</template>;\n\ninterface PrivateTriggerModifierSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      triggerElement: Cell<HTMLElement>;\n      isOpen: Cell<boolean>;\n      contentId: string;\n      setReference: PopoverBlockParams[\"setReference\"];\n      stopPropagation?: boolean;\n      preventDefault?: boolean;\n    };\n  };\n}\n\nexport interface TriggerModifierSignature {\n  Element: PrivateTriggerModifierSignature[\"Element\"];\n}\n\nconst trigger = eModifier<PrivateTriggerModifierSignature>(\n  (\n    element,\n    _: [],\n    { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },\n  ) => {\n    element.setAttribute(\"aria-haspopup\", \"menu\");\n\n    if (isOpen.current) {\n      element.setAttribute(\"aria-controls\", contentId);\n      element.setAttribute(\"aria-expanded\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-controls\");\n      element.setAttribute(\"aria-expanded\", \"false\");\n    }\n\n    setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);\n\n    const onTriggerClick = (event: MouseEvent) => {\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n\n      isOpen.toggle();\n    };\n\n    element.addEventListener(\"click\", onTriggerClick);\n\n    triggerElement.current = element;\n\n    setReference(element);\n\n    return () => {\n      element.removeEventListener(\"click\", onTriggerClick);\n    };\n  },\n);\n\ninterface PrivateTriggerSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    triggerModifier: WithBoundArgs<\n      typeof trigger,\n      \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n    >;\n    stopPropagation?: boolean;\n    preventDefault?: boolean;\n  };\n  Blocks: { default: [] };\n}\n\nexport interface TriggerSignature {\n  Element: PrivateTriggerSignature[\"Element\"];\n  Blocks: PrivateTriggerSignature[\"Blocks\"];\n}\n\nconst Trigger: TOC<PrivateTriggerSignature> = <template>\n  <button\n    type=\"button\"\n    {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}\n    ...attributes\n  >\n    {{yield}}\n  </button>\n</template>;\n\nconst IsOpen = () => cell<boolean>(false);\nconst TriggerElement = () => cell<HTMLElement>();\n\nexport class Menu extends Component<Signature> {\n  contentId = guidFor(this);\n\n  <template>\n    {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n      <Popover\n        @flipOptions={{@flipOptions}}\n        @middleware={{@middleware}}\n        @offsetOptions={{@offsetOptions}}\n        @placement={{@placement}}\n        @shiftOptions={{@shiftOptions}}\n        @strategy={{@strategy}}\n        as |p|\n      >\n        {{#let\n          (modifier\n            trigger\n            triggerElement=triggerEl\n            isOpen=isOpen\n            contentId=this.contentId\n            setReference=p.setReference\n          )\n          as |triggerModifier|\n        }}\n          {{yield\n            (hash\n              trigger=triggerModifier\n              Trigger=(component Trigger triggerModifier=triggerModifier)\n              Content=(component\n                Content\n                PopoverContent=p.Content\n                isOpen=isOpen\n                triggerElement=triggerEl\n                contentId=this.contentId\n              )\n              arrow=p.arrow\n              isOpen=isOpen.current\n            )\n          }}\n        {{/let}}\n      </Popover>\n    {{/let}}\n  </template>\n}\n\nexport default Menu;\n"],"names":["TABSTER_CONFIG_CONTENT","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","deloser","TABSTER_CONFIG_TRIGGER","Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","focusOnHover","e","item","currentTarget","HTMLElement","focus","Item","scope","on","LinkItem","Link","installContent","eModifier","element","_","isOpen","triggerElement","onToggle","newState","tabster","getTabster","window","firstFocusable","focusable","findFirst","container","addEventListener","onDocumentClick","current","target","contains","onDocumentKeydown","key","document","removeEventListener","Content","hash","trigger","contentId","setReference","stopPropagation","preventDefault","setAttribute","removeAttribute","setTabsterAttribute","onTriggerClick","event","toggle","Trigger","IsOpen","cell","TriggerElement","Menu","Component","guidFor","Popover"],"mappings":"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"}

package/dist/components/popover.js

@@ -4,26 +4,49 @@ import { element } from 'ember-element-helper';
 import { modifier } from 'ember-modifier';
 import { cell } from 'ember-resources';
 import { F as FloatingUI } from '../component-BXy_iafw.js';
-import { Portal } from './portal.js';
-import { TARGETS } from './portal-targets.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
+const showPopover = modifier(element => {
+  const el = element;
+  // Reset [popover] UA overflow default that clips arrows positioned outside
+  el.style.setProperty("overflow", "visible");
+  // Don't promote to top layer if already inside a popover — the parent
+  // popover already handles layering. Adding both to the top layer causes
+  // stacking issues where the parent renders on top of the child.
+  if (el.parentElement?.closest("[popover]")) {
+    el.removeAttribute("popover");
+    // <dialog> elements are hidden by default — ensure they're visible
+    // when opting out of the top layer.
+    if (el instanceof HTMLDialogElement) {
+      el.setAttribute("open", "");
+    }
+  } else {
+    el.showPopover();
+  }
+  return () => {
+    try {
+      el.hidePopover();
+    } catch {
+      /* already hidden */}
+  };
+});
 function getElementTag(tagName) {
   return tagName || "div";
 }
 /**
- * Allows lazy evaluation of the portal target (do nothing until rendered)
- * This is useful because the algorithm for finding the portal target isn't cheap.
+ * Content uses `popover="manual"` + `showPopover()` to promote
+ * the element to the browser's top layer. This escapes all ancestor
+ * overflow clipping and stacking contexts — the same guarantee that
+ * portalling provided, but using the browser's native mechanism.
  */
-const Content = setComponentTemplate(precompileTemplate("{{#let (element (getElementTag @as)) as |El|}}\n  {{#if @inline}}\n    {{!-- @glint-ignore\n          https://github.com/tildeio/ember-element-helper/issues/91\n          https://github.com/typed-ember/glint/issues/610\n    --}}\n    <El {{@floating}} ...attributes>\n      {{yield}}\n    </El>\n  {{else}}\n    <Portal @to={{TARGETS.popover}}>\n      {{!-- @glint-ignore\n            https://github.com/tildeio/ember-element-helper/issues/91\n            https://github.com/typed-ember/glint/issues/610\n      --}}\n      <El {{@floating}} ...attributes>\n        {{yield}}\n      </El>\n    </Portal>\n  {{/if}}\n{{/let}}", {
+const Content = setComponentTemplate(precompileTemplate("{{#let (element (getElementTag @as)) as |El|}}\n  {{!-- @glint-ignore\n        https://github.com/tildeio/ember-element-helper/issues/91\n        https://github.com/typed-ember/glint/issues/610\n  --}}\n  <El popover=\"manual\" {{showPopover}} {{@floating}} ...attributes>\n    {{yield}}\n  </El>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     element,
     getElementTag,
-    Portal,
-    TARGETS
+    showPopover
   })
 }), templateOnly());
 const arrowSides = {
@@ -80,7 +103,7 @@ function flipOptions(options) {
     ...options
   };
 }
-const Popover = setComponentTemplate(precompileTemplate("{{#let (ArrowElement) as |arrowElement|}}\n  <FloatingUI @placement={{@placement}} @strategy={{@strategy}} @middleware={{maybeAddArrow @middleware arrowElement.current}} @flipOptions={{flipOptions @flipOptions}} @shiftOptions={{@shiftOptions}} @offsetOptions={{@offsetOptions}} as |reference floating extra|>\n    {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}\n      {{yield (hash reference=reference setReference=extra.setReference Content=(component Content floating=floating inline=@inline) data=extra.data arrow=arrow)}}\n    {{/let}}\n  </FloatingUI>\n{{/let}}", {
+const Popover = setComponentTemplate(precompileTemplate("{{#let (ArrowElement) as |arrowElement|}}\n  <FloatingUI @placement={{@placement}} @strategy={{@strategy}} @middleware={{maybeAddArrow @middleware arrowElement.current}} @flipOptions={{flipOptions @flipOptions}} @shiftOptions={{@shiftOptions}} @offsetOptions={{@offsetOptions}} as |reference floating extra|>\n    {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}\n      {{yield (hash reference=reference setReference=extra.setReference Content=(component Content floating=floating) data=extra.data arrow=arrow)}}\n    {{/let}}\n  </FloatingUI>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     ArrowElement,

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../src/components/popover.gts"],"sourcesContent":["import { hash } from \"@ember/helper\";\n\nimport { arrow } from \"@floating-ui/dom\";\nimport { element } from \"ember-element-helper\";\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\n\nimport { FloatingUI } from \"../floating-ui.ts\";\nimport { Portal } from \"./portal.gts\";\nimport { TARGETS } from \"./portal-targets.gts\";\n\nimport type { Signature as FloatingUiComponentSignature } from \"../floating-ui/component.ts\";\nimport type { Signature as HookSignature } from \"../floating-ui/modifier.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ElementContext, Middleware } from \"@floating-ui/dom\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  Args: {\n    /**\n     * See the Floating UI's [flip docs](https://floating-ui.com/docs/flip) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    flipOptions?: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"];\n    /**\n     * Array of one or more objects to add to Floating UI's list of [middleware](https://floating-ui.com/docs/middleware)\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    middleware?: HookSignature[\"Args\"][\"Named\"][\"middleware\"];\n    /**\n     * See the Floating UI's [offset docs](https://floating-ui.com/docs/offset) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    offsetOptions?: HookSignature[\"Args\"][\"Named\"][\"offsetOptions\"];\n    /**\n     * One of the possible [`placements`](https://floating-ui.com/docs/computeposition#placement). The default is 'bottom'.\n     *\n     * Possible values are\n     * - top\n     * - bottom\n     * - right\n     * - left\n     *\n     * And may optionally have `-start` or `-end` added to adjust position along the side.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    placement?: `${\"top\" | \"bottom\" | \"left\" | \"right\"}${\"\" | \"-start\" | \"-end\"}`;\n    /**\n     * See the Floating UI's [shift docs](https://floating-ui.com/docs/shift) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    shiftOptions?: HookSignature[\"Args\"][\"Named\"][\"shiftOptions\"];\n    /**\n     * CSS position property, either `fixed` or `absolute`.\n     *\n     * Pros and cons of each strategy are explained on [Floating UI's Docs](https://floating-ui.com/docs/computePosition#strategy)\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    strategy?: HookSignature[\"Args\"][\"Named\"][\"strategy\"];\n\n    /**\n     * By default, the popover is portaled.\n     * If you don't control your CSS, and the positioning of the popover content\n     * is misbehaving, you may pass \"@inline={{true}}\" to opt out of portalling.\n     *\n     * Inline may also be useful in nested menus, where you know exactly how the nesting occurs\n     */\n    inline?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        reference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][0];\n        setReference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"setReference\"];\n        Content: WithBoundArgs<typeof Content, \"floating\">;\n        data: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"data\"];\n        arrow: ModifierLike<{ Element: HTMLElement }>;\n      },\n    ];\n  };\n}\n\nfunction getElementTag(tagName: undefined | string) {\n  return tagName || \"div\";\n}\n\n/**\n * Allows lazy evaluation of the portal target (do nothing until rendered)\n * This is useful because the algorithm for finding the portal target isn't cheap.\n */\nconst Content: TOC<{\n  Element: HTMLDivElement;\n  Args: {\n    floating: ModifierLike<{ Element: HTMLElement }>;\n    inline?: boolean;\n    /**\n     * By default the popover content is wrapped in a div.\n     * You may change this by supplying the name of an element here.\n     *\n     * For example:\n     * ```gjs\n     * <Popover as |p|>\n     *  <p.Content @as=\"dialog\">\n     *    this is now focus trapped\n     *  </p.Content>\n     * </Popover>\n     * ```\n     */\n    as?: string;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  {{#let (element (getElementTag @as)) as |El|}}\n    {{#if @inline}}\n      {{! @glint-ignore\n            https://github.com/tildeio/ember-element-helper/issues/91\n            https://github.com/typed-ember/glint/issues/610\n      }}\n      <El {{@floating}} ...attributes>\n        {{yield}}\n      </El>\n    {{else}}\n      <Portal @to={{TARGETS.popover}}>\n        {{! @glint-ignore\n              https://github.com/tildeio/ember-element-helper/issues/91\n              https://github.com/typed-ember/glint/issues/610\n        }}\n        <El {{@floating}} ...attributes>\n          {{yield}}\n        </El>\n      </Portal>\n    {{/if}}\n  {{/let}}\n</template>;\n\ninterface AttachArrowSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      arrowElement: ReturnType<typeof ArrowElement>;\n      data:\n        | undefined\n        | {\n            placement: string;\n            middlewareData?: {\n              arrow?: { x?: number; y?: number };\n            };\n          };\n    };\n  };\n}\n\nconst arrowSides = {\n  top: \"bottom\",\n  right: \"left\",\n  bottom: \"top\",\n  left: \"right\",\n};\n\ntype Direction = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Placement = `${Direction}${\"\" | \"-start\" | \"-end\"}`;\n\nconst attachArrow: ModifierLike<AttachArrowSignature> = eModifier<AttachArrowSignature>(\n  (element, _: [], named) => {\n    if (element === named.arrowElement.current) {\n      if (!named.data) return;\n      if (!named.data.middlewareData) return;\n\n      const { arrow } = named.data.middlewareData;\n      const { placement } = named.data;\n\n      if (!arrow) return;\n      if (!placement) return;\n\n      const { x: arrowX, y: arrowY } = arrow;\n      const otherSide = (placement as Placement).split(\"-\")[0] as Direction;\n      const staticSide = arrowSides[otherSide];\n\n      Object.assign(named.arrowElement.current.style, {\n        left: arrowX != null ? `${arrowX}px` : \"\",\n        top: arrowY != null ? `${arrowY}px` : \"\",\n        right: \"\",\n        bottom: \"\",\n        [staticSide]: \"-4px\",\n      });\n\n      return;\n    }\n\n    void (async () => {\n      await Promise.resolve();\n      named.arrowElement.set(element);\n    })();\n  },\n);\n\nconst ArrowElement: () => ReturnType<typeof cell<HTMLElement>> = () => cell<HTMLElement>();\n\nfunction maybeAddArrow(middleware: Middleware[] | undefined, element: Element | undefined) {\n  const result = [...(middleware || [])];\n\n  if (element) {\n    result.push(arrow({ element }));\n  }\n\n  return result;\n}\n\nfunction flipOptions(options: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"]) {\n  return {\n    elementContext: \"reference\" as ElementContext,\n    ...options,\n  };\n}\n\nexport const Popover: TOC<Signature> = <template>\n  {{#let (ArrowElement) as |arrowElement|}}\n    <FloatingUI\n      @placement={{@placement}}\n      @strategy={{@strategy}}\n      @middleware={{maybeAddArrow @middleware arrowElement.current}}\n      @flipOptions={{flipOptions @flipOptions}}\n      @shiftOptions={{@shiftOptions}}\n      @offsetOptions={{@offsetOptions}}\n      as |reference floating extra|\n    >\n      {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}\n        {{yield\n          (hash\n            reference=reference\n            setReference=extra.setReference\n            Content=(component Content floating=floating inline=@inline)\n            data=extra.data\n            arrow=arrow\n          )\n        }}\n      {{/let}}\n    </FloatingUI>\n  {{/let}}\n</template>;\n\nexport default Popover;\n"],"names":["getElementTag","tagName","Content","setComponentTemplate","precompileTemplate","strictMode","scope","element","Portal","TARGETS","templateOnly","arrowSides","top","right","bottom","left","attachArrow","eModifier","_","named","arrowElement","current","data","middlewareData","arrow","placement","x","arrowX","y","arrowY","otherSide","split","staticSide","Object","assign","style","Promise","resolve","set","ArrowElement","cell","maybeAddArrow","middleware","result","push","flipOptions","options","elementContext","Popover","FloatingUI","hash"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../src/components/popover.gts"],"sourcesContent":["import { hash } from \"@ember/helper\";\n\nimport { arrow } from \"@floating-ui/dom\";\nimport { element } from \"ember-element-helper\";\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\n\nimport { FloatingUI } from \"../floating-ui.ts\";\n\nimport type { Signature as FloatingUiComponentSignature } from \"../floating-ui/component.ts\";\nimport type { Signature as HookSignature } from \"../floating-ui/modifier.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ElementContext, Middleware } from \"@floating-ui/dom\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  Args: {\n    /**\n     * See the Floating UI's [flip docs](https://floating-ui.com/docs/flip) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    flipOptions?: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"];\n    /**\n     * Array of one or more objects to add to Floating UI's list of [middleware](https://floating-ui.com/docs/middleware)\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    middleware?: HookSignature[\"Args\"][\"Named\"][\"middleware\"];\n    /**\n     * See the Floating UI's [offset docs](https://floating-ui.com/docs/offset) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    offsetOptions?: HookSignature[\"Args\"][\"Named\"][\"offsetOptions\"];\n    /**\n     * One of the possible [`placements`](https://floating-ui.com/docs/computeposition#placement). The default is 'bottom'.\n     *\n     * Possible values are\n     * - top\n     * - bottom\n     * - right\n     * - left\n     *\n     * And may optionally have `-start` or `-end` added to adjust position along the side.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    placement?: `${\"top\" | \"bottom\" | \"left\" | \"right\"}${\"\" | \"-start\" | \"-end\"}`;\n    /**\n     * See the Floating UI's [shift docs](https://floating-ui.com/docs/shift) for possible values.\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    shiftOptions?: HookSignature[\"Args\"][\"Named\"][\"shiftOptions\"];\n    /**\n     * CSS position property, either `fixed` or `absolute`.\n     *\n     * Pros and cons of each strategy are explained on [Floating UI's Docs](https://floating-ui.com/docs/computePosition#strategy)\n     *\n     * This argument is forwarded to the `<FloatingUI>` component.\n     */\n    strategy?: HookSignature[\"Args\"][\"Named\"][\"strategy\"];\n  };\n  Blocks: {\n    default: [\n      {\n        reference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][0];\n        setReference: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"setReference\"];\n        Content: WithBoundArgs<typeof Content, \"floating\">;\n        data: FloatingUiComponentSignature[\"Blocks\"][\"default\"][2][\"data\"];\n        arrow: ModifierLike<{ Element: HTMLElement }>;\n      },\n    ];\n  };\n}\n\nconst showPopover = eModifier<{ Element: Element }>((element) => {\n  const el = element as HTMLElement;\n\n  // Reset [popover] UA overflow default that clips arrows positioned outside\n  el.style.setProperty(\"overflow\", \"visible\");\n\n  // Don't promote to top layer if already inside a popover — the parent\n  // popover already handles layering. Adding both to the top layer causes\n  // stacking issues where the parent renders on top of the child.\n  if (el.parentElement?.closest(\"[popover]\")) {\n    el.removeAttribute(\"popover\");\n\n    // <dialog> elements are hidden by default — ensure they're visible\n    // when opting out of the top layer.\n    if (el instanceof HTMLDialogElement) {\n      el.setAttribute(\"open\", \"\");\n    }\n  } else {\n    el.showPopover();\n  }\n\n  return () => {\n    try {\n      el.hidePopover();\n    } catch {\n      /* already hidden */\n    }\n  };\n});\n\nfunction getElementTag(tagName: undefined | string) {\n  return tagName || \"div\";\n}\n\n/**\n * Content uses `popover=\"manual\"` + `showPopover()` to promote\n * the element to the browser's top layer. This escapes all ancestor\n * overflow clipping and stacking contexts — the same guarantee that\n * portalling provided, but using the browser's native mechanism.\n */\nconst Content: TOC<{\n  Element: HTMLDivElement;\n  Args: {\n    floating: ModifierLike<{ Element: HTMLElement }>;\n    /**\n     * By default the popover content is wrapped in a div.\n     * You may change this by supplying the name of an element here.\n     *\n     * For example:\n     * ```gjs\n     * <Popover as |p|>\n     *  <p.Content @as=\"dialog\">\n     *    this is now focus trapped\n     *  </p.Content>\n     * </Popover>\n     * ```\n     */\n    as?: string;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  {{#let (element (getElementTag @as)) as |El|}}\n    {{! @glint-ignore\n          https://github.com/tildeio/ember-element-helper/issues/91\n          https://github.com/typed-ember/glint/issues/610\n    }}\n    <El popover=\"manual\" {{showPopover}} {{@floating}} ...attributes>\n      {{yield}}\n    </El>\n  {{/let}}\n</template>;\n\ninterface AttachArrowSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      arrowElement: ReturnType<typeof ArrowElement>;\n      data:\n        | undefined\n        | {\n            placement: string;\n            middlewareData?: {\n              arrow?: { x?: number; y?: number };\n            };\n          };\n    };\n  };\n}\n\nconst arrowSides = {\n  top: \"bottom\",\n  right: \"left\",\n  bottom: \"top\",\n  left: \"right\",\n};\n\ntype Direction = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Placement = `${Direction}${\"\" | \"-start\" | \"-end\"}`;\n\nconst attachArrow: ModifierLike<AttachArrowSignature> = eModifier<AttachArrowSignature>(\n  (element, _: [], named) => {\n    if (element === named.arrowElement.current) {\n      if (!named.data) return;\n      if (!named.data.middlewareData) return;\n\n      const { arrow } = named.data.middlewareData;\n      const { placement } = named.data;\n\n      if (!arrow) return;\n      if (!placement) return;\n\n      const { x: arrowX, y: arrowY } = arrow;\n      const otherSide = (placement as Placement).split(\"-\")[0] as Direction;\n      const staticSide = arrowSides[otherSide];\n\n      Object.assign(named.arrowElement.current.style, {\n        left: arrowX != null ? `${arrowX}px` : \"\",\n        top: arrowY != null ? `${arrowY}px` : \"\",\n        right: \"\",\n        bottom: \"\",\n        [staticSide]: \"-4px\",\n      });\n\n      return;\n    }\n\n    void (async () => {\n      await Promise.resolve();\n      named.arrowElement.set(element);\n    })();\n  },\n);\n\nconst ArrowElement: () => ReturnType<typeof cell<HTMLElement>> = () => cell<HTMLElement>();\n\nfunction maybeAddArrow(middleware: Middleware[] | undefined, element: Element | undefined) {\n  const result = [...(middleware || [])];\n\n  if (element) {\n    result.push(arrow({ element }));\n  }\n\n  return result;\n}\n\nfunction flipOptions(options: HookSignature[\"Args\"][\"Named\"][\"flipOptions\"]) {\n  return {\n    elementContext: \"reference\" as ElementContext,\n    ...options,\n  };\n}\n\nexport const Popover: TOC<Signature> = <template>\n  {{#let (ArrowElement) as |arrowElement|}}\n    <FloatingUI\n      @placement={{@placement}}\n      @strategy={{@strategy}}\n      @middleware={{maybeAddArrow @middleware arrowElement.current}}\n      @flipOptions={{flipOptions @flipOptions}}\n      @shiftOptions={{@shiftOptions}}\n      @offsetOptions={{@offsetOptions}}\n      as |reference floating extra|\n    >\n      {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}\n        {{yield\n          (hash\n            reference=reference\n            setReference=extra.setReference\n            Content=(component Content floating=floating)\n            data=extra.data\n            arrow=arrow\n          )\n        }}\n      {{/let}}\n    </FloatingUI>\n  {{/let}}\n</template>;\n\nexport default Popover;\n"],"names":["showPopover","eModifier","element","el","style","setProperty","parentElement","closest","removeAttribute","HTMLDialogElement","setAttribute","hidePopover","getElementTag","tagName","Content","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly","arrowSides","top","right","bottom","left","attachArrow","_","named","arrowElement","current","data","middlewareData","arrow","placement","x","arrowX","y","arrowY","otherSide","split","staticSide","Object","assign","Promise","resolve","set","ArrowElement","cell","maybeAddArrow","middleware","result","push","flipOptions","options","elementContext","Popover","FloatingUI","hash"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.55.2",
+  "version": "0.57.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"
@@ -27,7 +27,7 @@
     "should-handle-link": "^1.2.2",
     "tabster": "^8.7.0",
     "tracked-built-ins": "^4.1.0",
-    "tracked-toolbox": "^2.2.0",
+    "tracked-toolbox": "^3.0.0",
     "which-heading-do-i-need": "0.2.7"
   },
   "devDependencies": {

package/src/components/menu.gts

@@ -152,13 +152,21 @@ const installContent = eModifier<{
     };
   };
 }>((element, _: [], { isOpen, triggerElement }) => {
-  // focus first focusable element on the content
-  const tabster = getTabster(window);
-  const firstFocusable = tabster?.focusable.findFirst({
-    container: element,
-  });
+  // Focus first focusable element when the popover opens.
+  // The toggle event fires natively after showPopover() completes.
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+  function onToggle(e: ToggleEvent) {
+    if (e.newState !== "open") return;
+
+    const tabster = getTabster(window);
+    const firstFocusable = tabster?.focusable.findFirst({
+      container: element,
+    });
+
+    firstFocusable?.focus();
+  }
 
-  firstFocusable?.focus();
+  element.addEventListener("toggle", onToggle as EventListener);
 
   // listen for "outside" clicks
   function onDocumentClick(e: MouseEvent) {
@@ -183,6 +191,7 @@ const installContent = eModifier<{
   document.addEventListener("keydown", onDocumentKeydown);
 
   return () => {
+    element.removeEventListener("toggle", onToggle as EventListener);
     document.removeEventListener("click", onDocumentClick);
     document.removeEventListener("keydown", onDocumentKeydown);
   };
@@ -336,7 +345,6 @@ export class Menu extends Component<Signature> {
         @placement={{@placement}}
         @shiftOptions={{@shiftOptions}}
         @strategy={{@strategy}}
-        @inline={{@inline}}
         as |p|
       >
         {{#let

package/src/components/popover.gts

@@ -6,8 +6,6 @@ import { modifier as eModifier } from "ember-modifier";
 import { cell } from "ember-resources";
 
 import { FloatingUI } from "../floating-ui.ts";
-import { Portal } from "./portal.gts";
-import { TARGETS } from "./portal-targets.gts";
 
 import type { Signature as FloatingUiComponentSignature } from "../floating-ui/component.ts";
 import type { Signature as HookSignature } from "../floating-ui/modifier.ts";
@@ -63,15 +61,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: [
@@ -86,19 +75,50 @@ export interface Signature {
   };
 }
 
+const showPopover = eModifier<{ Element: Element }>((element) => {
+  const el = element as HTMLElement;
+
+  // Reset [popover] UA overflow default that clips arrows positioned outside
+  el.style.setProperty("overflow", "visible");
+
+  // Don't promote to top layer if already inside a popover — the parent
+  // popover already handles layering. Adding both to the top layer causes
+  // stacking issues where the parent renders on top of the child.
+  if (el.parentElement?.closest("[popover]")) {
+    el.removeAttribute("popover");
+
+    // <dialog> elements are hidden by default — ensure they're visible
+    // when opting out of the top layer.
+    if (el instanceof HTMLDialogElement) {
+      el.setAttribute("open", "");
+    }
+  } else {
+    el.showPopover();
+  }
+
+  return () => {
+    try {
+      el.hidePopover();
+    } catch {
+      /* already hidden */
+    }
+  };
+});
+
 function getElementTag(tagName: undefined | string) {
   return tagName || "div";
 }
 
 /**
- * Allows lazy evaluation of the portal target (do nothing until rendered)
- * This is useful because the algorithm for finding the portal target isn't cheap.
+ * Content uses `popover="manual"` + `showPopover()` to promote
+ * the element to the browser's top layer. This escapes all ancestor
+ * overflow clipping and stacking contexts — the same guarantee that
+ * portalling provided, but using the browser's native mechanism.
  */
 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 +137,13 @@ 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}}
+    {{! @glint-ignore
+          https://github.com/tildeio/ember-element-helper/issues/91
+          https://github.com/typed-ember/glint/issues/610
+    }}
+    <El popover="manual" {{showPopover}} {{@floating}} ...attributes>
+      {{yield}}
+    </El>
   {{/let}}
 </template>;
 
@@ -235,7 +243,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)
             data=extra.data
             arrow=arrow
           )