@ds-mo/ui 1.6.1 → 1.6.3

package/dist/types/components/Menu/menu-position.d.ts

@@ -0,0 +1,20 @@
+export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
+export type MenuAlign = 'start' | 'center' | 'end';
+export interface MenuPositionInput {
+    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
+    popupWidth: number;
+    popupHeight: number;
+    side: MenuSide;
+    align: MenuAlign;
+    sideOffsetPx: number;
+    alignOffsetPx: number;
+    viewportPadPx: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
+export declare function computeMenuPosition(input: MenuPositionInput): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=menu-position.d.ts.map

package/dist/types/components/Menu/menu-types.d.ts

@@ -0,0 +1,16 @@
+export type { MenuAlign, MenuSide } from './menu-position';
+export interface MenuItemData {
+    label: string;
+    value?: string;
+    subtext?: string;
+    isSelected?: boolean;
+    isInactive?: boolean;
+    isDestructive?: boolean;
+    showToggle?: boolean;
+    toggleValue?: boolean;
+}
+export interface MenuSection {
+    header?: string;
+    items: MenuItemData[];
+}
+//# sourceMappingURL=menu-types.d.ts.map

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
-import type { PanelNavGroup, PanelNavRouterMode } from './panel-nav-types';
+import { type PanelNavGroup, type PanelNavRouterMode, type PanelNavUserActionDetail } from './panel-nav-types';
 export declare class PanelNav {
     /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.
      *  Property: `navStyle`. HTML attribute: `nav-style`. */
@@ -40,8 +40,8 @@ export declare class PanelNav {
     dsNavToggle: EventEmitter<boolean>;
     /** Emitted when the footer left button (gear / dashboard) is clicked. */
     dsNavFooterAction: EventEmitter<void>;
-    /** Emitted when the footer user button is clicked. */
-    dsNavUserAction: EventEmitter<void>;
+    /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */
+    dsNavUserAction: EventEmitter<PanelNavUserActionDetail>;
     el: HTMLElement;
     /** Mirrors `style` but is only updated inside the VT callback so the
      *  View Transition captures a clean before/after snapshot. */

package/dist/types/components/PanelNav/index.d.ts

@@ -1,4 +1,5 @@
-export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './panel-nav-types';
+export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup, PanelNavUserActionDetail, } from './panel-nav-types';
+export { PANEL_NAV_USER_MENU_ANCHOR_ID } from './panel-nav-types';
 export type { NavChromeStyle } from '../../nav/nav-chrome';
 export { NAV_STYLE_HINT_ATTR, setNavStyleHint, clearNavStyleHint, resolvePanelNavStyle, shouldResyncPanelNavStyle, ensurePanelNavVtStyle, deriveActiveIdFromUrl, parsePanelNavGroups, } from './panel-nav-utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/PanelNav/panel-nav-types.d.ts

@@ -17,4 +17,10 @@ export interface PanelNavGroup {
     label?: string;
     items: PanelNavItem[];
 }
+/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */
+export declare const PANEL_NAV_USER_MENU_ANCHOR_ID = "ds-panel-nav-user-menu-anchor";
+/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */
+export interface PanelNavUserActionDetail {
+    anchor: HTMLElement;
+}
 //# sourceMappingURL=panel-nav-types.d.ts.map

package/dist/types/components.d.ts

@@ -22,9 +22,10 @@ import { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
 import { HeaderBackground } from "./components/Header/Header";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
-import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
-import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
+import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -57,9 +58,10 @@ export { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
 export { HeaderBackground } from "./components/Header/Header";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
-export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
-export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
+export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -1442,7 +1444,7 @@ declare global {
         "dsNavSelect": string;
         "dsNavToggle": boolean;
         "dsNavFooterAction": void;
-        "dsNavUserAction": void;
+        "dsNavUserAction": PanelNavUserActionDetail;
     }
     interface HTMLDsPanelNavElement extends Components.DsPanelNav, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2330,9 +2332,9 @@ declare namespace LocalJSX {
          */
         "onDsNavToggle"?: (event: DsPanelNavCustomEvent<boolean>) => void;
         /**
-          * Emitted when the footer user button is clicked.
+          * Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`.
          */
-        "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<void>) => void;
+        "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<PanelNavUserActionDetail>) => void;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,7 +69,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",
@@ -104,7 +104,7 @@
   },
   "devDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": "^2.10.0",
+    "@ds-mo/tokens": "^2.11.0",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.8",
     "@modelcontextprotocol/sdk": "^1.29.0",

package/src/angular/proxies.ts

@@ -658,7 +658,7 @@ export class DsPanelNav {
   @Output() dsNavSelect = new EventEmitter<CustomEvent<string>>();
   @Output() dsNavToggle = new EventEmitter<CustomEvent<boolean>>();
   @Output() dsNavFooterAction = new EventEmitter<CustomEvent<void>>();
-  @Output() dsNavUserAction = new EventEmitter<CustomEvent<void>>();
+  @Output() dsNavUserAction = new EventEmitter<CustomEvent<IDsPanelNavPanelNavUserActionDetail>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -666,6 +666,8 @@ export class DsPanelNav {
 }
 
 
+import type { PanelNavUserActionDetail as IDsPanelNavPanelNavUserActionDetail } from '@ds-mo/ui';
+
 export declare interface DsPanelNav extends Components.DsPanelNav {
   /**
    * Emitted when a nav item is clicked. Detail = the item's `id`.
@@ -680,9 +682,9 @@ export declare interface DsPanelNav extends Components.DsPanelNav {
    */
   dsNavFooterAction: EventEmitter<CustomEvent<void>>;
   /**
-   * Emitted when the footer user button is clicked.
+   * Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`.
    */
-  dsNavUserAction: EventEmitter<CustomEvent<void>>;
+  dsNavUserAction: EventEmitter<CustomEvent<IDsPanelNavPanelNavUserActionDetail>>;
 }
 
 

package/src/react/ds-panel-nav.ts

@@ -11,7 +11,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
-import { type DsPanelNavCustomEvent } from "@ds-mo/ui";
+import { type DsPanelNavCustomEvent, type PanelNavUserActionDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsPanelNav as DsPanelNavElement, defineCustomElement as defineDsPanelNav } from "@ds-mo/ui/dist/components/ds-panel-nav.js";
 
@@ -19,7 +19,7 @@ export type DsPanelNavEvents = {
     onDsNavSelect: EventName<DsPanelNavCustomEvent<string>>,
     onDsNavToggle: EventName<DsPanelNavCustomEvent<boolean>>,
     onDsNavFooterAction: EventName<DsPanelNavCustomEvent<void>>,
-    onDsNavUserAction: EventName<DsPanelNavCustomEvent<void>>
+    onDsNavUserAction: EventName<DsPanelNavCustomEvent<PanelNavUserActionDetail>>
 };
 
 export const DsPanelNav: StencilReactComponent<DsPanelNavElement, DsPanelNavEvents, Components.DsPanelNav> = /*@__PURE__*/ createComponent<DsPanelNavElement, DsPanelNavEvents, Components.DsPanelNav>({

package/src/wc/components/BarNav/BarNav.tsx

@@ -8,7 +8,7 @@ import {
   h,
   Host,
 } from '@stencil/core';
-import type { MenuItemData } from '../Menu/Menu';
+import type { MenuItemData } from '../Menu/menu-types';
 import type { BarNavActionBackground } from '../BarNavAction/BarNavAction';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';

package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts

@@ -1,4 +1,4 @@
-import type { MenuSection } from '../Menu/Menu';
+import type { MenuSection } from '../Menu/menu-types';
 import {
   getSelectableTabs,
   isTabDivider,

package/src/wc/components/Menu/Menu.tsx

@@ -1,24 +1,10 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
 import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
+import { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';
+import type { MenuItemData, MenuSection } from './menu-types';
 
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-
-export interface MenuItemData {
-  label: string;
-  value?: string;
-  subtext?: string;
-  isSelected?: boolean;
-  isInactive?: boolean;
-  isDestructive?: boolean;
-  showToggle?: boolean;
-  toggleValue?: boolean;
-}
-
-export interface MenuSection {
-  header?: string;
-  items: MenuItemData[];
-}
+/** rAF retries while the popup mounts or the anchor resolves. */
+const POSITION_RETRY_BUDGET = 8;
 
 @Component({
   tag: 'ds-menu',
@@ -57,12 +43,15 @@ export class Menu {
   private scrollResizeHandler: (() => void) | null = null;
   private closeTimer: ReturnType<typeof setTimeout> | null = null;
   private itemEls: HTMLElement[] = [];
+  private positionRetryRaf: number | null = null;
+  private listenersReady = false;
 
   componentDidLoad() {
     if (this.open) this.onOpenChange(true);
   }
 
   disconnectedCallback() {
+    this.cancelPositionRetry();
     this.teardownListeners();
   }
 
@@ -72,15 +61,19 @@ export class Menu {
       this.shouldRender = true;
       this.closing = false;
       this.positionReady = false;
-      requestAnimationFrame(() => {
-        this.calculatePosition();
-        this.positionReady = true;
-        this.focusInitialItem();
-        this.setupListeners();
+      this.listenersReady = false;
+      this.schedulePositionUpdate(() => {
+        if (!this.listenersReady) {
+          this.listenersReady = true;
+          this.focusInitialItem();
+          this.setupListeners();
+        }
       });
     } else if (this.shouldRender) {
+      this.cancelPositionRetry();
       this.closing = true;
       this.teardownListeners();
+      this.listenersReady = false;
       this.closeTimer = setTimeout(() => {
         this.shouldRender = false;
         this.closing = false;
@@ -89,12 +82,18 @@ export class Menu {
     }
   }
 
+  @Watch('anchor')
+  @Watch('anchorId')
+  onAnchorChange() {
+    if (this.open) this.schedulePositionUpdate();
+  }
+
   @Watch('side')
   @Watch('align')
   @Watch('sideOffset')
   @Watch('alignOffset')
   onPositionPropsChange() {
-    if (this.open) this.calculatePosition();
+    if (this.open) this.schedulePositionUpdate();
   }
 
   private get viewportPadPx(): number {
@@ -137,51 +136,61 @@ export class Menu {
     return this.activeSections.flatMap(s => s.items);
   }
 
-  private calculatePosition() {
-    const anchorEl = this.resolvedAnchor;
-    if (!anchorEl) return;
-    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;
-    if (!popup) return;
-
-    const a = anchorEl.getBoundingClientRect();
-    const pw = popup.offsetWidth || this.popupFallbackWidthPx;
-    const ph = popup.offsetHeight || this.popupFallbackHeightPx;
-    const sideOffset = this.sideOffsetPx;
-    const alignOffset = this.alignOffsetPx;
-    const vpPad = this.viewportPadPx;
-    let x = 0, y = 0;
-
-    switch (this.side) {
-      case 'top':
-        y = a.top - ph - sideOffset;
-        x = this.align === 'start' ? a.left + alignOffset
-          : this.align === 'end' ? a.right - pw + alignOffset
-          : a.left + a.width / 2 - pw / 2 + alignOffset;
-        break;
-      case 'bottom':
-        y = a.bottom + sideOffset;
-        x = this.align === 'start' ? a.left + alignOffset
-          : this.align === 'end' ? a.right - pw + alignOffset
-          : a.left + a.width / 2 - pw / 2 + alignOffset;
-        break;
-      case 'left':
-        x = a.left - pw - sideOffset;
-        y = this.align === 'start' ? a.top + alignOffset
-          : this.align === 'end' ? a.bottom - ph + alignOffset
-          : a.top + a.height / 2 - ph / 2 + alignOffset;
-        break;
-      case 'right':
-        x = a.right + sideOffset;
-        y = this.align === 'start' ? a.top + alignOffset
-          : this.align === 'end' ? a.bottom - ph + alignOffset
-          : a.top + a.height / 2 - ph / 2 + alignOffset;
-        break;
+  private cancelPositionRetry() {
+    if (this.positionRetryRaf !== null) {
+      cancelAnimationFrame(this.positionRetryRaf);
+      this.positionRetryRaf = null;
     }
+  }
 
-    this.pos = {
-      x: Math.min(Math.max(x, vpPad), window.innerWidth - pw - vpPad),
-      y: Math.min(Math.max(y, vpPad), window.innerHeight - ph - vpPad),
+  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
+  private schedulePositionUpdate(onReady?: () => void) {
+    if (!this.open) return;
+
+    this.cancelPositionRetry();
+    this.positionReady = false;
+
+    let remaining = POSITION_RETRY_BUDGET;
+
+    const attempt = () => {
+      this.positionRetryRaf = null;
+      if (!this.open) return;
+
+      if (this.calculatePosition()) {
+        this.positionReady = true;
+        onReady?.();
+        return;
+      }
+
+      if (remaining > 0) {
+        remaining -= 1;
+        this.positionRetryRaf = requestAnimationFrame(attempt);
+      }
     };
+
+    this.positionRetryRaf = requestAnimationFrame(attempt);
+  }
+
+  /** @returns `true` when anchor and popup were found and `pos` was updated. */
+  private calculatePosition(): boolean {
+    const anchorEl = this.resolvedAnchor;
+    if (!anchorEl) return false;
+    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;
+    if (!popup) return false;
+
+    this.pos = computeMenuPosition({
+      anchorRect: anchorEl.getBoundingClientRect(),
+      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,
+      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,
+      side: this.side,
+      align: this.align,
+      sideOffsetPx: this.sideOffsetPx,
+      alignOffsetPx: this.alignOffsetPx,
+      viewportPadPx: this.viewportPadPx,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+    });
+    return true;
   }
 
   /** Focus the selected item when present, otherwise the first enabled item. */
@@ -208,7 +217,9 @@ export class Menu {
       this.close();
     };
 
-    this.scrollResizeHandler = () => this.calculatePosition();
+    this.scrollResizeHandler = () => {
+      if (this.open) this.calculatePosition();
+    };
 
     document.addEventListener('mousedown', this.clickOutsideHandler, true);
     window.addEventListener('scroll', this.scrollResizeHandler, true);

package/src/wc/components/Menu/menu-position.ts

@@ -0,0 +1,78 @@
+export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
+export type MenuAlign = 'start' | 'center' | 'end';
+
+export interface MenuPositionInput {
+  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
+  popupWidth: number;
+  popupHeight: number;
+  side: MenuSide;
+  align: MenuAlign;
+  sideOffsetPx: number;
+  alignOffsetPx: number;
+  viewportPadPx: number;
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
+export function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {
+  const {
+    anchorRect: a,
+    popupWidth: pw,
+    popupHeight: ph,
+    side,
+    align,
+    sideOffsetPx,
+    alignOffsetPx,
+    viewportPadPx: vpPad,
+    viewportWidth,
+    viewportHeight,
+  } = input;
+
+  let x = 0;
+  let y = 0;
+
+  switch (side) {
+    case 'top':
+      y = a.top - ph - sideOffsetPx;
+      x =
+        align === 'start'
+          ? a.left + alignOffsetPx
+          : align === 'end'
+            ? a.right - pw + alignOffsetPx
+            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;
+      break;
+    case 'bottom':
+      y = a.bottom + sideOffsetPx;
+      x =
+        align === 'start'
+          ? a.left + alignOffsetPx
+          : align === 'end'
+            ? a.right - pw + alignOffsetPx
+            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;
+      break;
+    case 'left':
+      x = a.left - pw - sideOffsetPx;
+      y =
+        align === 'start'
+          ? a.top + alignOffsetPx
+          : align === 'end'
+            ? a.bottom - ph + alignOffsetPx
+            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;
+      break;
+    case 'right':
+      x = a.right + sideOffsetPx;
+      y =
+        align === 'start'
+          ? a.top + alignOffsetPx
+          : align === 'end'
+            ? a.bottom - ph + alignOffsetPx
+            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;
+      break;
+  }
+
+  return {
+    x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),
+    y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),
+  };
+}

package/src/wc/components/Menu/menu-types.ts

@@ -0,0 +1,17 @@
+export type { MenuAlign, MenuSide } from './menu-position';
+
+export interface MenuItemData {
+  label: string;
+  value?: string;
+  subtext?: string;
+  isSelected?: boolean;
+  isInactive?: boolean;
+  isDestructive?: boolean;
+  showToggle?: boolean;
+  toggleValue?: boolean;
+}
+
+export interface MenuSection {
+  header?: string;
+  items: MenuItemData[];
+}

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -14,7 +14,13 @@ import {
   shouldResyncPanelNavGroups,
   shouldResyncPanelNavStyle,
 } from './panel-nav-utils';
-import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from './panel-nav-types';
+import {
+  PANEL_NAV_USER_MENU_ANCHOR_ID,
+  type PanelNavGroup,
+  type PanelNavItem,
+  type PanelNavRouterMode,
+  type PanelNavUserActionDetail,
+} from './panel-nav-types';
 
 // Module-level WeakMaps
 interface ViewTransition {
@@ -86,8 +92,8 @@ export class PanelNav {
   /** Emitted when the footer left button (gear / dashboard) is clicked. */
   @Event() dsNavFooterAction!: EventEmitter<void>;
 
-  /** Emitted when the footer user button is clicked. */
-  @Event() dsNavUserAction!: EventEmitter<void>;
+  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */
+  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;
 
   @Element() el!: HTMLElement;
 
@@ -379,8 +385,9 @@ export class PanelNav {
     this.dsNavFooterAction.emit();
   }
 
-  private handleUserAction() {
-    this.dsNavUserAction.emit();
+  private handleUserAction(e: MouseEvent) {
+    const anchor = e.currentTarget as HTMLElement;
+    this.dsNavUserAction.emit({ anchor });
   }
 
   private clearEdgeOverlayTimer() {
@@ -587,9 +594,10 @@ export class PanelNav {
             {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}
             <button
               type="button"
+              id={PANEL_NAV_USER_MENU_ANCHOR_ID}
               class="panel-nav__item panel-nav__footer-user"
               aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}
-              onClick={() => this.handleUserAction()}
+              onClick={(e) => this.handleUserAction(e)}
             >
               <span class="panel-nav__item-label panel-nav__footer-user-label">
                 <span class="panel-nav__item-label-text">

package/src/wc/components/PanelNav/index.ts

@@ -1,4 +1,10 @@
-export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './panel-nav-types';
+export type {
+  PanelNavRouterMode,
+  PanelNavItem,
+  PanelNavGroup,
+  PanelNavUserActionDetail,
+} from './panel-nav-types';
+export { PANEL_NAV_USER_MENU_ANCHOR_ID } from './panel-nav-types';
 export type { NavChromeStyle } from '../../nav/nav-chrome';
 export {
   NAV_STYLE_HINT_ATTR,

package/src/wc/components/PanelNav/panel-nav-types.ts

@@ -20,3 +20,11 @@ export interface PanelNavGroup {
   label?: string;
   items: PanelNavItem[];
 }
+
+/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */
+export const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';
+
+/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */
+export interface PanelNavUserActionDetail {
+  anchor: HTMLElement;
+}

package/src/wc/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
-import type { MenuItemData } from '../Menu/Menu';
+import type { MenuItemData } from '../Menu/menu-types';
 
 export interface SelectOption {
   label: string;

package/src/wc/components.d.ts

@@ -22,9 +22,10 @@ import { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
 import { HeaderBackground } from "./components/Header/Header";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
-import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
-import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
+import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -57,9 +58,10 @@ export { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
 export { HeaderBackground } from "./components/Header/Header";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
-export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
-export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
+export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -1442,7 +1444,7 @@ declare global {
         "dsNavSelect": string;
         "dsNavToggle": boolean;
         "dsNavFooterAction": void;
-        "dsNavUserAction": void;
+        "dsNavUserAction": PanelNavUserActionDetail;
     }
     interface HTMLDsPanelNavElement extends Components.DsPanelNav, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2330,9 +2332,9 @@ declare namespace LocalJSX {
          */
         "onDsNavToggle"?: (event: DsPanelNavCustomEvent<boolean>) => void;
         /**
-          * Emitted when the footer user button is clicked.
+          * Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`.
          */
-        "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<void>) => void;
+        "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<PanelNavUserActionDetail>) => void;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'