@radix-ng/primitives 1.0.4 → 1.0.6

package/fesm2022/radix-ng-primitives-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, DestroyRef, isDevMode, Injector, afterNextRender, numberAttribute, PLATFORM_ID, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, DestroyRef, isDevMode, Injector, afterNextRender, numberAttribute, PLATFORM_ID, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import * as i2 from '@radix-ng/primitives/core';
@@ -79,6 +79,12 @@ function getMenuItemType(element) {
 }
 
 const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext', 'components/menu');
+/**
+ * Ambient modality for a menu, provided by a coordinator (e.g. `Menubar`) so its child menus inherit
+ * the coordinator's `modal` setting instead of each defaulting independently. A top-level menu prefers
+ * this over its own `modal` input when present; submenus stay non-modal regardless.
+ */
+const RDX_MENU_AMBIENT_MODAL = new InjectionToken('RdxMenuAmbientModal');
 function buildContext(instance) {
     return {
         isOpen: instance.open,
@@ -95,6 +101,7 @@ function buildContext(instance) {
         isSubmenu: instance.isSubmenu.asReadonly(),
         parentType: instance.parentType,
         lastOpenChangeReason: instance.lastOpenChangeReason.asReadonly(),
+        instantType: instance.instantType,
         allowMouseUpTrigger: instance.allowMouseUpTrigger,
         openedByTouch: instance.openedByTouch.asReadonly(),
         openInteractionType: instance.openInteractionType.asReadonly(),
@@ -133,6 +140,8 @@ class RdxMenuRoot {
         this.popper = inject(RdxPopper);
         this.parentRoot = inject(RdxMenuRoot, { optional: true, skipSelf: true });
         this.providedDirection = injectDirection();
+        /** Ambient modality from an enclosing coordinator (e.g. Menubar). Overrides own `modal` for top-level menus. */
+        this.ambientModal = inject(RDX_MENU_AMBIENT_MODAL, { optional: true });
         /**
          * The shared per-popup floating context (ADR 0015 §1) — `open` mirrors this menu's open state, the
          * trigger registry is bridged from {@link registerTrigger}, and the reference / floating elements are
@@ -146,7 +155,8 @@ class RdxMenuRoot {
         this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
         this.hasAppliedDefaultOpen = false;
         /** Whether the menu is currently open. */
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /** Whether the menu is initially open. */
         this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether interactions with the menu are disabled. */
@@ -161,7 +171,8 @@ class RdxMenuRoot {
         /** Whether moving the pointer over items should highlight them. */
         this.highlightItemOnHover = input(true, { ...(ngDevMode ? { debugName: "highlightItemOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** The menu orientation. */
-        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.orientation = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /** Text direction for submenu arrow-key behavior. Inherited by nested submenu roots. */
         this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
         /** Whether pressing Escape inside a submenu closes the whole menu chain. */
@@ -170,18 +181,27 @@ class RdxMenuRoot {
         this.onOpenChange = output();
         /** Emits when the open/close CSS transition or animation finishes. */
         this.onOpenChangeComplete = output();
-        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-        this.popupElement = signal(undefined, ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
-        this.beforeContentFocusGuard = signal(null, ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
+        this.trigger = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.popupElement = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
+        this.beforeContentFocusGuard = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
-        this.activeIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this.activeIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         /** Whether the popup grabs focus when it opens. Set false for menubar hover-switching. */
-        this.autoFocus = signal('first', ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
-        this.isSubmenu = signal(false, ...(ngDevMode ? [{ debugName: "isSubmenu" }] : /* istanbul ignore next */ []));
+        this.autoFocus = signal('first', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+        this.isSubmenu = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSubmenu" }] : /* istanbul ignore next */ []));
         /** Set by `RdxContextMenuRoot` (it composes this root) — distinguishes a context menu from a dropdown. */
-        this.isContextMenu = signal(false, ...(ngDevMode ? [{ debugName: "isContextMenu" }] : /* istanbul ignore next */ []));
-        this.hasTriggerInteractionHandler = signal(false, ...(ngDevMode ? [{ debugName: "hasTriggerInteractionHandler" }] : /* istanbul ignore next */ []));
-        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.isContextMenu = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isContextMenu" }] : /* istanbul ignore next */ []));
+        this.hasTriggerInteractionHandler = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTriggerInteractionHandler" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
         /**
          * What kind of parent this menu has (Base UI `MenuParent.type`). A submenu wins over everything (its
          * parent is a menu); otherwise a context-menu marker, then a menubar (detected by the trigger
@@ -198,22 +218,54 @@ class RdxMenuRoot {
                 return 'menubar';
             }
             return undefined;
-        }, ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
         /** The reason for the most recent open-change (Base UI open-change `reason`), for the per-kind policy. */
-        this.lastOpenChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "lastOpenChangeReason" }] : /* istanbul ignore next */ []));
-        this.localAllowMouseUpTrigger = signal(false, ...(ngDevMode ? [{ debugName: "localAllowMouseUpTrigger" }] : /* istanbul ignore next */ []));
-        this.allowMouseUpTrigger = computed(() => this.parentRoot?.allowMouseUpTrigger() ?? this.localAllowMouseUpTrigger(), ...(ngDevMode ? [{ debugName: "allowMouseUpTrigger" }] : /* istanbul ignore next */ []));
+        this.lastOpenChangeReason = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastOpenChangeReason" }] : /* istanbul ignore next */ []));
+        this.localAllowMouseUpTrigger = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "localAllowMouseUpTrigger" }] : /* istanbul ignore next */ []));
+        this.allowMouseUpTrigger = computed(() => this.parentRoot?.allowMouseUpTrigger() ?? this.localAllowMouseUpTrigger(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowMouseUpTrigger" }] : /* istanbul ignore next */ []));
         /** Whether the current open was initiated by **touch** (ADR 0016 §3 — gates the anchored scroll lock). */
-        this.openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
-        this.openInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
-        this.closeInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || (this.parentRoot?.effectiveDisabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.openedByTouch = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+        this.openInteractionType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        this.closeInteractionType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.parentRoot?.effectiveDisabled() ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.dir = computed(() => {
             return this.dirInput() ?? this.parentRoot?.dir() ?? this.providedDirection();
-        }, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
-        this.effectiveModal = computed(() => this.modal() && !this.isSubmenu(), ...(ngDevMode ? [{ debugName: "effectiveModal" }] : /* istanbul ignore next */ []));
-        this.state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.effectiveModal = computed(() => (this.ambientModal?.() ?? this.modal()) && !this.isSubmenu(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveModal" }] : /* istanbul ignore next */ []));
+        this.state = computed(() => (this.open() ? 'open' : 'closed'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        /** Base UI `data-instant`: the open/close reason classified into the instant-suppression bucket. */
+        this.instantType = computed(() => {
+            const reason = this.lastOpenChangeReason();
+            if (this.open()) {
+                if (reason === 'sibling-open')
+                    return 'trigger-change';
+                if (reason === 'trigger-press' || reason === 'trigger-focus' || reason === 'list-navigation') {
+                    return 'click';
+                }
+                return undefined;
+            }
+            if (reason === 'escape-key' ||
+                reason === 'outside-press' ||
+                reason === 'focus-out' ||
+                reason === 'cancel-open') {
+                return 'dismiss';
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instantType" }] : /* istanbul ignore next */ []));
         effect(() => {
             const defaultOpen = this.defaultOpen();
             if (!this.hasAppliedDefaultOpen && defaultOpen) {
@@ -411,8 +463,8 @@ class RdxMenuRoot {
         const item = autoFocus === 'last' ? items.at(-1) : items[0];
         (item ?? popup).focus({ preventScroll: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRoot, isStandalone: true, selector: "[rdxMenuRoot],[rdxMenuSubmenuRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnEsc: { classPropertyName: "closeParentOnEsc", publicName: "closeParentOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuRoot, isStandalone: true, selector: "[rdxMenuRoot],[rdxMenuSubmenuRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnEsc: { classPropertyName: "closeParentOnEsc", publicName: "closeParentOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
             provideRdxMenuRootContext(contextFactory),
             // New floating foundation (ADR 0015/0017). Inherit-or-create the tree so a submenu shares its
             // parent menu's tree; the per-popup root context bridges open / triggers / reference.
@@ -420,7 +472,7 @@ class RdxMenuRoot {
             provideFloatingRootContext(() => inject(RdxMenuRoot).floatingContext)
         ], exportAs: ["rdxMenuRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRoot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuRoot],[rdxMenuSubmenuRoot]',
@@ -444,14 +496,17 @@ class RdxMenuArrow {
     constructor() {
         this.rootContext = injectRdxMenuRootContext();
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
-        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuArrow, isStandalone: true, selector: "[rdxMenuArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, exportAs: ["rdxMenuArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuArrow, isStandalone: true, selector: "[rdxMenuArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, exportAs: ["rdxMenuArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuArrow]',
@@ -476,10 +531,10 @@ class RdxMenuBackdrop {
     constructor() {
         this.rootContext = injectRdxMenuRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuBackdrop, isStandalone: true, selector: "[rdxMenuBackdrop]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined" } }, exportAs: ["rdxMenuBackdrop"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuBackdrop, isStandalone: true, selector: "[rdxMenuBackdrop]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined" } }, exportAs: ["rdxMenuBackdrop"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuBackdrop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuBackdrop]',
@@ -487,7 +542,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined'
                     }
@@ -516,22 +570,26 @@ class RdxMenuCheckboxItem {
         this.rootContext = injectRdxMenuRootContext(true);
         this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether toggling closes the menu. Defaults to false — checkbox items stay open. */
         this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
-        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** The checked state of the item. */
-        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        /** Emits when the checked state changes. */
+        this.checked = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /** Emits before the checked state changes; call `eventDetails.cancel()` to veto it. */
         this.onCheckedChange = output();
-        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         // Expose helpers for host bindings
         this.isIndeterminate = isIndeterminate;
-        this.getCheckedState = getCheckedState;
         effect(() => {
             this.listItem.setMetadata({
                 type: 'checkbox-item',
@@ -575,9 +633,9 @@ class RdxMenuCheckboxItem {
     onItemClick() {
         if (this.effectiveDisabled())
             return;
-        this.toggleChecked();
-        if (this.closeOnClick())
+        if (this.toggleChecked() && this.closeOnClick()) {
             this.rootContext?.closeEntireMenu();
+        }
     }
     onMouseUp(event) {
         if (this.effectiveDisabled() || event.button !== 0 || !this.rootContext?.allowMouseUpTrigger()) {
@@ -590,14 +648,20 @@ class RdxMenuCheckboxItem {
         if (this.effectiveDisabled())
             return;
         event.preventDefault();
-        this.toggleChecked();
-        if (this.closeOnClick())
+        if (this.toggleChecked(event) && this.closeOnClick()) {
             this.rootContext?.closeEntireMenu();
+        }
     }
-    toggleChecked() {
+    /** Emits the cancelable change, applies it unless vetoed, and reports whether it was applied. */
+    toggleChecked(event) {
         const next = isIndeterminate(this.checked()) ? true : !this.checked();
+        const { eventDetails } = createCancelableChangeEventDetails('none', event ?? new Event('menu.checked-change'));
+        this.onCheckedChange.emit({ checked: next, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return false;
+        }
         this.checked.set(next);
-        this.onCheckedChange.emit(next);
+        return true;
     }
     setActiveIndex() {
         if (!this.rootContext || this.rootContext.disabled()) {
@@ -613,10 +677,10 @@ class RdxMenuCheckboxItem {
             this.rootContext.setActiveIndex(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItem, isStandalone: true, selector: "[rdxMenuCheckboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuCheckboxItem, isStandalone: true, selector: "[rdxMenuCheckboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-checked": "checked() === true ? \"\" : undefined", "attr.data-unchecked": "checked() === false ? \"\" : undefined", "attr.data-indeterminate": "isIndeterminate(checked()) ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuCheckboxItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuCheckboxItem]',
@@ -627,7 +691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         role: 'menuitemcheckbox',
                         '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.aria-checked]': 'isIndeterminate(checked()) ? "mixed" : checked()',
-                        '[attr.data-state]': 'getCheckedState(checked())',
+                        '[attr.data-checked]': 'checked() === true ? "" : undefined',
+                        '[attr.data-unchecked]': 'checked() === false ? "" : undefined',
+                        '[attr.data-indeterminate]': 'isIndeterminate(checked()) ? "" : undefined',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
@@ -653,19 +719,23 @@ class RdxMenuCheckboxItemIndicator {
         this.itemContext = injectRdxMenuCheckboxItemContext();
         /** Keep the indicator in the DOM when unchecked so CSS exit animations can play. */
         this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.dataState = computed(() => getCheckedState(this.itemContext.checked()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
-        this.isVisible = computed(() => isIndeterminate(this.itemContext.checked()) || this.itemContext.checked() === true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.checked = this.itemContext.checked;
+        this.isIndeterminate = isIndeterminate;
+        this.isVisible = computed(() => isIndeterminate(this.itemContext.checked()) || this.itemContext.checked() === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItemIndicator, isStandalone: true, selector: "[rdxMenuCheckboxItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "dataState()", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuCheckboxItemIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuCheckboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuCheckboxItemIndicator, isStandalone: true, selector: "[rdxMenuCheckboxItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "checked() === true ? \"\" : undefined", "attr.data-unchecked": "checked() === false ? \"\" : undefined", "attr.data-indeterminate": "isIndeterminate(checked()) ? \"\" : undefined", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuCheckboxItemIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItemIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuCheckboxItemIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuCheckboxItemIndicator]',
                     exportAs: 'rdxMenuCheckboxItemIndicator',
                     host: {
-                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-checked]': 'checked() === true ? "" : undefined',
+                        '[attr.data-unchecked]': 'checked() === false ? "" : undefined',
+                        '[attr.data-indeterminate]': 'isIndeterminate(checked()) ? "" : undefined',
                         '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
                         '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
                         '[style.display]': '!keepMounted() && !isVisible() ? "none" : null'
@@ -684,12 +754,13 @@ const groupContextFactory$1 = () => {
  */
 class RdxMenuGroup {
     constructor() {
-        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.labelId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroup, isStandalone: true, selector: "[rdxMenuGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()" } }, providers: [provideRdxMenuGroupContext(groupContextFactory$1)], exportAs: ["rdxMenuGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuGroup, isStandalone: true, selector: "[rdxMenuGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()" } }, providers: [provideRdxMenuGroupContext(groupContextFactory$1)], exportAs: ["rdxMenuGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuGroup]',
@@ -716,10 +787,10 @@ class RdxMenuGroupLabel {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroupLabel, isStandalone: true, selector: "[rdxMenuGroupLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxMenuGroupLabel"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuGroupLabel, isStandalone: true, selector: "[rdxMenuGroupLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxMenuGroupLabel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroupLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuGroupLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuGroupLabel]',
@@ -738,17 +809,21 @@ class RdxMenuItem {
         this.rootContext = injectRdxMenuRootContext(true);
         this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether selecting this item closes the menu. */
         this.closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
-        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Emits when the item is selected. */
         this.onSelect = output();
-        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.listItem.setMetadata({
                 type: 'regular-item',
@@ -827,10 +902,10 @@ class RdxMenuItem {
             this.rootContext.setActiveIndex(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuItem, isStandalone: true, selector: "[rdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuItem, isStandalone: true, selector: "[rdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuItem]',
@@ -863,17 +938,21 @@ class RdxMenuLinkItem {
         this.rootContext = injectRdxMenuRootContext(true);
         this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether selecting this item closes the menu. Defaults to false — links navigate by default. */
         this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
-        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Emits when the item is selected. */
         this.onSelect = output();
-        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.listItem.setMetadata({
                 type: 'link-item',
@@ -951,10 +1030,10 @@ class RdxMenuLinkItem {
             this.rootContext.setActiveIndex(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuLinkItem, isStandalone: true, selector: "a[rdxMenuLinkItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuLinkItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuLinkItem, isStandalone: true, selector: "a[rdxMenuLinkItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuLinkItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[rdxMenuLinkItem]',
@@ -993,8 +1072,10 @@ class RdxMenuPopup {
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
         this.elementRef = inject(ElementRef);
         this.search = '';
-        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         /**
          * Event handler called when the escape key is pressed. Can be prevented.
          */
@@ -1256,8 +1337,8 @@ class RdxMenuPopup {
         this.rootContext.setActiveIndex(item.index);
         item.element.focus({ preventScroll: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPopup, isStandalone: true, selector: "[rdxMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "keydown": "handleKeydown($event)", "rdx-menu-close-parent": "handleCloseParent($event)" }, properties: { "attr.aria-orientation": "rootContext.orientation()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-align": "align()", "attr.data-side": "side()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPopup, isStandalone: true, selector: "[rdxMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "keydown": "handleKeydown($event)", "rdx-menu-close-parent": "handleCloseParent($event)" }, properties: { "attr.aria-orientation": "rootContext.orientation()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-instant": "rootContext.instantType()", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-align": "align()", "attr.data-side": "side()" } }, providers: [
             provideFloatingFocusManagerConfig(() => {
                 const rootContext = injectRdxMenuRootContext();
                 const popup = inject(ElementRef).nativeElement;
@@ -1308,7 +1389,7 @@ class RdxMenuPopup {
             })
         ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }, { directive: i1$1.RdxCompositeList }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuPopup]',
@@ -1370,7 +1451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-orientation]': 'rootContext.orientation()',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '[attr.data-align]': 'align()',
@@ -1391,10 +1472,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * custom container, or a backdrop alongside the positioner (multi-root), use the explicit form.
  */
 class RdxMenuPortal {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxMenuPortal]',
@@ -1414,10 +1495,10 @@ class RdxMenuPortalMisuseGuard {
                 'Use `*rdxMenuPortal` on the positioner element or `<ng-template rdxMenuPortal>`.', 'components/menu');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxMenuPortal]:not(ng-template)", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxMenuPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortalMisuseGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuPortal]:not(ng-template)'
@@ -1481,13 +1562,13 @@ class RdxMenuPositioner extends RdxPopperContentWrapper {
         // modal internal backdrop (finding #1) as a sibling before it.
         afterNextRender(() => setupMenuInternalBackdrop(host, this.rootContext, injector));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "style": "legacyVars" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "style": "legacyVars" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxMenuPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
         ], exportAs: ["rdxMenuPositioner"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPositioner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuPositioner]',
@@ -1528,16 +1609,19 @@ class RdxMenuRadioGroup {
         /**
          * The currently selected value.
          */
-        this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** The initially selected value for uncontrolled usage. */
-        this.defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        this.defaultValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /** Whether all radio items in the group are disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Emits when the selected value changes.
+         * Emits before the selected value changes; call `eventDetails.cancel()` to veto it.
          */
         this.onValueChange = output();
-        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.labelId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
         effect(() => {
             const defaultValue = this.defaultValue();
             if (!this.hasAppliedDefaultValue && defaultValue !== undefined) {
@@ -1546,20 +1630,24 @@ class RdxMenuRadioGroup {
             }
         });
     }
-    selectValue(newValue) {
+    selectValue(newValue, event) {
         if (this.disabled()) {
             return;
         }
+        const { eventDetails } = createCancelableChangeEventDetails('none', event ?? new Event('menu.value-change'));
+        this.onValueChange.emit({ value: newValue, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return;
+        }
         this.value.set(newValue);
-        this.onValueChange.emit(newValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioGroup, isStandalone: true, selector: "[rdxMenuRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuRadioGroup, isStandalone: true, selector: "[rdxMenuRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [
             provideRdxMenuRadioGroupContext(radioGroupContextFactory),
             provideRdxMenuGroupContext(groupContextFactory)
         ], exportAs: ["rdxMenuRadioGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuRadioGroup]',
@@ -1592,21 +1680,26 @@ class RdxMenuRadioItem {
         this.radioGroupContext = injectRdxMenuRadioGroupContext();
         this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** The value of this radio item. */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether selecting closes the menu. Defaults to false — radio items stay open. */
         this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
-        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Emits when this item is selected. */
         this.onSelect = output();
-        this.checked = computed(() => this.radioGroupContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || this.radioGroupContext.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
-        this.getCheckedState = getCheckedState;
+        this.checked = computed(() => this.radioGroupContext.value() === this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || this.radioGroupContext.disabled() || (this.rootContext?.disabled() ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.listItem.setMetadata({
                 type: 'radio-item',
@@ -1688,10 +1781,10 @@ class RdxMenuRadioItem {
             this.rootContext.setActiveIndex(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItem, isStandalone: true, selector: "[rdxMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitemradio" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuRadioItem, isStandalone: true, selector: "[rdxMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitemradio" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "checked()", "attr.data-checked": "checked() ? \"\" : undefined", "attr.data-unchecked": "checked() ? undefined : \"\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuRadioItem]',
@@ -1702,7 +1795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         role: 'menuitemradio',
                         '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.aria-checked]': 'checked()',
-                        '[attr.data-state]': 'getCheckedState(checked())',
+                        '[attr.data-checked]': 'checked() ? "" : undefined',
+                        '[attr.data-unchecked]': 'checked() ? undefined : ""',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
@@ -1728,19 +1822,21 @@ class RdxMenuRadioItemIndicator {
         this.itemContext = injectRdxMenuRadioItemContext();
         /** Keep the indicator in the DOM when unselected so CSS exit animations can play. */
         this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.dataState = computed(() => getCheckedState(this.itemContext.checked()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
-        this.isVisible = computed(() => this.itemContext.checked() === true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.checked = this.itemContext.checked;
+        this.isVisible = computed(() => this.itemContext.checked() === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItemIndicator, isStandalone: true, selector: "[rdxMenuRadioItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "dataState()", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuRadioItemIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuRadioItemIndicator, isStandalone: true, selector: "[rdxMenuRadioItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "checked() ? \"\" : undefined", "attr.data-unchecked": "checked() ? undefined : \"\"", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuRadioItemIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItemIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuRadioItemIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuRadioItemIndicator]',
                     exportAs: 'rdxMenuRadioItemIndicator',
                     host: {
-                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-checked]': 'checked() ? "" : undefined',
+                        '[attr.data-unchecked]': 'checked() ? undefined : ""',
                         '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
                         '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
                         '[style.display]': '!keepMounted() && !isVisible() ? "none" : null'
@@ -1752,20 +1848,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * A visual separator between groups of menu items.
  */
 class RdxMenuSeparator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuSeparator, isStandalone: true, selector: "[rdxMenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "\"horizontal\"" } }, exportAs: ["rdxMenuSeparator"], ngImport: i0 }); }
+    constructor() {
+        /** The orientation of the separator. Matches Base UI's `Separator.orientation`. */
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuSeparator, isStandalone: true, selector: "[rdxMenuSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()" } }, exportAs: ["rdxMenuSeparator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuSeparator]',
                     exportAs: 'rdxMenuSeparator',
                     host: {
                         role: 'separator',
-                        '[attr.aria-orientation]': '"horizontal"'
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.data-orientation]': 'orientation()'
                     }
                 }]
-        }] });
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 /**
  * Submenu "safe polygon" — a faithful port of Floating UI's `safePolygon` algorithm
@@ -2116,7 +2218,8 @@ class RdxMenuSubTrigger {
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Cursor position from the last pointer move over the trigger (safe-polygon apex). */
         this.lastPointer = null;
         /** Whether the current open was initiated by hover (vs keyboard / click). */
@@ -2133,13 +2236,17 @@ class RdxMenuSubTrigger {
         /** Delay before a pending hover close runs, in milliseconds. */
         this.closeDelay = input(0, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined$1 });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
-        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Highlighted when active in the parent menu or while the submenu is open. */
         this.highlighted = computed(() => this.parentMenuRoot?.activeIndex() === this.listItem.index() ||
             this.isFocused() ||
-            this.submenuContext.isOpen(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || this.submenuContext.disabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
-        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
+            this.submenuContext.isOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || this.submenuContext.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
         this.submenuContext.markAsSubmenu();
         effect((onCleanup) => {
             const el = this.elementRef.nativeElement;
@@ -2401,10 +2508,10 @@ class RdxMenuSubTrigger {
             this.parentMenuRoot.setActiveIndex(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.tabindex": "parentMenuRoot?.open() && highlighted() ? 0 : -1", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-state": "submenuContext.isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.tabindex": "parentMenuRoot?.open() && highlighted() ? 0 : -1", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuSubTrigger]',
@@ -2417,7 +2524,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-haspopup]': '"menu"',
                         '[attr.aria-expanded]': 'submenuContext.isOpen()',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
-                        '[attr.data-state]': 'submenuContext.isOpen() ? "open" : "closed"',
                         '[attr.data-popup-open]': 'submenuContext.isOpen() ? "" : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
@@ -2473,8 +2579,13 @@ class RdxMenuTrigger {
         this.delay = input(100, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
         /** Delay before hover leave closes the menu, in milliseconds. */
         this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
-        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
-        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
+        /** Whether the trigger is currently pressed (pointer down), for Base UI's `data-pressed`. */
+        this.pressed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.triggerInteraction = createRdxTriggerInteraction({
             trigger: () => this.elementRef.nativeElement,
             activeTrigger: () => this.rootContext.trigger(),
@@ -2561,6 +2672,9 @@ class RdxMenuTrigger {
     }
     handlePointerDown(event) {
         this.triggerInteraction.recordPointerDown(event);
+        if (!this.isDisabled() && event.button === 0) {
+            this.pressed.set(true);
+        }
     }
     handleClick(event) {
         if (this.isDisabled()) {
@@ -2667,6 +2781,7 @@ class RdxMenuTrigger {
         }, delay);
     }
     handlePointerLeave(event) {
+        this.pressed.set(false);
         if (event.pointerType === 'touch' || !this.openOnHover()) {
             return;
         }
@@ -2739,10 +2854,10 @@ class RdxMenuTrigger {
             setTimeout(run);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "triggerInteraction.dataState()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "pointerup": "pressed.set(false)", "pointercancel": "pressed.set(false)", "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-pressed": "pressed() ? \"\" : undefined", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuTrigger]',
@@ -2755,11 +2870,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-expanded]': 'triggerInteraction.ariaExpanded()',
                         '[attr.aria-disabled]': 'isDisabled() ? true : undefined',
                         '[attr.disabled]': 'nativeButtonState() && isDisabled() ? "" : undefined',
-                        '[attr.data-state]': 'triggerInteraction.dataState()',
                         '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
                         '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
+                        '[attr.data-pressed]': 'pressed() ? "" : undefined',
                         '[style.pointer-events]': 'rootContext.isOpen() && rootContext.modal() ? "auto" : undefined',
                         '(pointerdown)': 'handlePointerDown($event)',
+                        '(pointerup)': 'pressed.set(false)',
+                        '(pointercancel)': 'pressed.set(false)',
                         '(mousedown)': 'handleMouseDown($event)',
                         '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',
@@ -2800,9 +2917,12 @@ class RdxMenuViewport {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
-        this.width = signal(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        this.height = signal(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        this.width = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             const el = this.elementRef.nativeElement;
             // Seed the initial size without marking a transition.
@@ -2838,10 +2958,10 @@ class RdxMenuViewport {
         const duration = getMaxTransitionDuration(this.elementRef.nativeElement);
         this.transitionTimer = setTimeout(() => this.transitioning.set(false), duration > 0 ? duration + 50 : 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuViewport, isStandalone: true, selector: "[rdxMenuViewport]", host: { properties: { "attr.data-transitioning": "transitioning() ? \"\" : undefined", "style.--popup-width.px": "width()", "style.--popup-height.px": "height()" } }, exportAs: ["rdxMenuViewport"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuViewport, isStandalone: true, selector: "[rdxMenuViewport]", host: { properties: { "attr.data-transitioning": "transitioning() ? \"\" : undefined", "style.--popup-width.px": "width()", "style.--popup-height.px": "height()" } }, exportAs: ["rdxMenuViewport"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuViewport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuViewport]',
@@ -2877,8 +2997,8 @@ const menuImports = [
     RdxMenuRadioItemIndicator
 ];
 class RdxMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, imports: [RdxMenuRoot,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuModule, imports: [RdxMenuRoot,
             RdxMenuTrigger,
             RdxMenuSubTrigger,
             RdxMenuPortal,
@@ -2917,9 +3037,9 @@ class RdxMenuModule {
             RdxMenuRadioGroup,
             RdxMenuRadioItem,
             RdxMenuRadioItemIndicator] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...menuImports],
@@ -2931,5 +3051,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPortalMisuseGuard, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuGroupContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuGroupContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
+export { RDX_MENU_AMBIENT_MODAL, RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPortalMisuseGuard, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuGroupContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuGroupContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-menu.mjs.map