@radix-ng/primitives 1.0.4 → 1.0.6

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

@@ -35,7 +35,8 @@ function injectRdxTooltipConfig() {
  * opens, sibling tooltips open instantly until `timeout` ms after the last close.
  */
 function createTooltipInstantController(timeout, destroyRef) {
-    const instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+    const instant = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
     const timer = useTimeoutFn(() => instant.set(false), timeout, { immediate: false }, destroyRef);
     return {
         isInstant: instant.asReadonly(),
@@ -112,10 +113,10 @@ class RdxTooltipProvider {
         this.timeout = input(this.defaultConfig.timeout, { ...(ngDevMode ? { debugName: "timeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.instant = createTooltipInstantController(() => this.timeout(), this.destroyRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipProvider, isStandalone: true, selector: "[rdxTooltipProvider]", inputs: { delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxTooltipProviderContext(providerContext)], exportAs: ["rdxTooltipProvider"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTooltipProvider, isStandalone: true, selector: "[rdxTooltipProvider]", inputs: { delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxTooltipProviderContext(providerContext)], exportAs: ["rdxTooltipProvider"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipProvider, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipProvider]',
@@ -145,7 +146,8 @@ class RdxTooltip {
         /**
          * Whether the tooltip 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 tooltip is initially open. Uncontrolled.
          */
@@ -167,7 +169,8 @@ class RdxTooltip {
         /**
          * Determines which axis the tooltip should track the cursor on.
          */
-        this.trackCursorAxis = input('none', ...(ngDevMode ? [{ debugName: "trackCursorAxis" }] : /* istanbul ignore next */ []));
+        this.trackCursorAxis = input('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackCursorAxis" }] : /* istanbul ignore next */ []));
         /**
          * When `true`, the tooltip will not open.
          */
@@ -175,34 +178,55 @@ class RdxTooltip {
         /**
          * Associates this root with detached trigger elements.
          */
-        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.handle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         /**
          * Event handler called when the open state changes.
          */
         this.onOpenChange = output();
         this.contentId = injectId('rdx-tooltip-content-');
-        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-        this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
-        this.payload = signal(undefined, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
-        this.cursorPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "cursorPosition" }] : /* istanbul ignore next */ []));
-        this.openChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
-        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
-        this.openedInstant = signal(false, ...(ngDevMode ? [{ debugName: "openedInstant" }] : /* istanbul ignore next */ []));
+        this.trigger = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.triggers = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+        this.payload = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.cursorPosition = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cursorPosition" }] : /* istanbul ignore next */ []));
+        this.openChangeReason = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.openedInstant = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedInstant" }] : /* istanbul ignore next */ []));
+        this.openedInstantType = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedInstantType" }] : /* istanbul ignore next */ []));
         this.suppressNextOpenChangeEmit = false;
         /** Local instant window used when this tooltip is not inside a provider. */
         this.localInstant = createTooltipInstantController(() => this.defaultConfig.timeout, this.destroyRef);
         this.instantGroup = this.provider ?? this.localInstant;
         /** Per-trigger overrides set by the active trigger, taking precedence over the root/provider. */
-        this.triggerDelay = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerDelay" }] : /* istanbul ignore next */ []));
-        this.triggerCloseDelay = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerCloseDelay" }] : /* istanbul ignore next */ []));
-        this.resolvedDelay = computed(() => this.triggerDelay() ?? this.delay() ?? this.provider?.delay() ?? this.defaultConfig.delay, ...(ngDevMode ? [{ debugName: "resolvedDelay" }] : /* istanbul ignore next */ []));
+        this.triggerDelay = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerDelay" }] : /* istanbul ignore next */ []));
+        this.triggerCloseDelay = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerCloseDelay" }] : /* istanbul ignore next */ []));
+        this.resolvedDelay = computed(() => this.triggerDelay() ?? this.delay() ?? this.provider?.delay() ?? this.defaultConfig.delay, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedDelay" }] : /* istanbul ignore next */ []));
         this.resolvedCloseDelay = computed(() => this.triggerCloseDelay() ??
             this.closeDelay() ??
             this.provider?.closeDelay() ??
-            this.defaultConfig.closeDelay, ...(ngDevMode ? [{ debugName: "resolvedCloseDelay" }] : /* istanbul ignore next */ []));
+            this.defaultConfig.closeDelay, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedCloseDelay" }] : /* istanbul ignore next */ []));
         /** Whether the most recent open happened without the delay. */
         this.instant = this.openedInstant.asReadonly();
-        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        /**
+         * Reason the open/close was instant (Base UI `data-instant`). Cursor tracking takes precedence
+         * while open — the popup follows the cursor, so its position updates can never be transitioned.
+         */
+        this.instantType = computed(() => this.open() && this.trackCursorAxis() !== 'none' ? 'tracking-cursor' : this.openedInstantType(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instantType" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         this.virtualAnchor = computed(() => {
             const axis = this.trackCursorAxis();
             const element = this.trigger();
@@ -225,7 +249,8 @@ class RdxTooltip {
                     return { width, height, x, y, top: y, left: x, right: x + width, bottom: y + height };
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "virtualAnchor" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "virtualAnchor" }] : /* istanbul ignore next */ []));
         this.openTimer = useTimeoutFn(() => this.applyOpen(false, this.trigger(), this.payload(), 'trigger-hover'), () => this.resolvedDelay(), { immediate: false }, this.destroyRef);
         this.closeTimer = useTimeoutFn(() => this.applyClose(), () => this.resolvedCloseDelay(), { immediate: false }, this.destroyRef);
         effect(() => {
@@ -261,6 +286,7 @@ class RdxTooltip {
             else {
                 this.instantGroup.onClose();
                 this.openedInstant.set(false);
+                this.openedInstantType.set(undefined);
             }
         }, { defer: true });
     }
@@ -364,7 +390,11 @@ class RdxTooltip {
         if (payload !== undefined) {
             this.payload.set(payload);
         }
-        this.openedInstant.set(instant || this.instantGroup.isInstant());
+        const isInstant = instant || this.instantGroup.isInstant();
+        this.openedInstant.set(isInstant);
+        // `'focus'` for a focus/imperative open; `'delay'` for a hover open within the skip-delay
+        // instant window. A normal delayed open is animated, so no instant type.
+        this.openedInstantType.set(isInstant ? (reason === 'trigger-focus' ? 'focus' : 'delay') : undefined);
         this.preventUnmountOnClose.set(false);
         this.openChangeReason.set(reason);
         this.open.set(true);
@@ -381,18 +411,22 @@ class RdxTooltip {
         }
         this.suppressNextOpenChangeEmit = true;
         this.preventUnmountOnClose.set(change.shouldPreventUnmountOnClose());
-        this.openedInstant.set(this.instantGroup.isInstant());
+        const isInstant = this.instantGroup.isInstant();
+        this.openedInstant.set(isInstant);
+        // Escape / outside-press close instantly as `'dismiss'`; a close within the instant window is
+        // `'delay'`; an ordinary close is animated.
+        this.openedInstantType.set(reason === 'escape-key' || reason === 'outside-press' ? 'dismiss' : isInstant ? 'delay' : undefined);
         this.openChangeReason.set(reason);
         this.open.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltip, isStandalone: true, selector: "[rdxTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", 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 }, disableHoverablePopup: { classPropertyName: "disableHoverablePopup", publicName: "disableHoverablePopup", isSignal: true, isRequired: false, transformFunction: null }, trackCursorAxis: { classPropertyName: "trackCursorAxis", publicName: "trackCursorAxis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTooltip, isStandalone: true, selector: "[rdxTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", 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 }, disableHoverablePopup: { classPropertyName: "disableHoverablePopup", publicName: "disableHoverablePopup", isSignal: true, isRequired: false, transformFunction: null }, trackCursorAxis: { classPropertyName: "trackCursorAxis", publicName: "trackCursorAxis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange" }, providers: [
             provideRdxTooltipContext(context),
             provideFloatingTree(),
             provideFloatingRootContext(() => inject(RdxTooltip).floatingContext)
         ], exportAs: ["rdxTooltip"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltip]',
@@ -411,6 +445,7 @@ function contextFor(root) {
         isOpen: root.open,
         present: root.present,
         instant: root.instant,
+        instantType: root.instantType,
         disabled: root.disabled,
         disableHoverablePopup: root.disableHoverablePopup,
         trackCursorAxis: root.trackCursorAxis,
@@ -435,17 +470,20 @@ class RdxTooltipArrow {
     constructor() {
         this.rootContext = injectRdxTooltipContext();
         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 */ []));
+        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 */ []));
         this.isVisuallyHidden = !!inject(RdxVisuallyHiddenDirective, {
             optional: true
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipArrow, isStandalone: true, selector: "[rdxTooltipArrow]", host: { properties: { "hidden": "isVisuallyHidden", "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" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTooltipArrow, isStandalone: true, selector: "[rdxTooltipArrow]", host: { properties: { "hidden": "isVisuallyHidden", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instantType()", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipArrow]',
@@ -454,6 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[hidden]': 'isVisuallyHidden',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         '[attr.data-side]': 'side()',
                         '[attr.data-align]': 'align()',
                         '[attr.data-uncentered]': 'uncentered() ? "" : undefined'
@@ -468,13 +507,15 @@ class RdxTooltipPopup {
     constructor() {
         this.rootContext = injectRdxTooltipContext();
         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.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 */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPopup, isStandalone: true, selector: "[rdxTooltipPopup]", host: { attributes: { "role": "tooltip" }, properties: { "id": "rootContext.contentId", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-side": "side()", "attr.data-align": "align()" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTooltipPopup, isStandalone: true, selector: "[rdxTooltipPopup]", host: { attributes: { "role": "tooltip" }, properties: { "id": "rootContext.contentId", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instantType()", "attr.data-side": "side()", "attr.data-align": "align()" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipPopup]',
@@ -484,7 +525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[id]': 'rootContext.contentId',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         '[attr.data-side]': 'side()',
                         '[attr.data-align]': 'align()'
                     }
@@ -500,10 +541,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * with `[container]`.
  */
 class RdxTooltipPortal {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortal, isStandalone: true, selector: "ng-template[rdxTooltipPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().present }))], exportAs: ["rdxTooltipPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTooltipPortal, isStandalone: true, selector: "ng-template[rdxTooltipPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().present }))], exportAs: ["rdxTooltipPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxTooltipPortal]',
@@ -525,10 +566,10 @@ class RdxTooltipPortalMisuseGuard {
                 'rdxTooltipPortalPresence has been removed.', 'components/tooltip');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortalMisuseGuard, isStandalone: true, selector: "[rdxTooltipPortal]:not(ng-template)", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTooltipPortalMisuseGuard, isStandalone: true, selector: "[rdxTooltipPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalMisuseGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipPortal]:not(ng-template)'
@@ -561,8 +602,10 @@ class RdxTooltipPositioner extends RdxPopperContentWrapper {
          * Event handler called when a `pointerdown` event happens outside of the popup. Can be prevented.
          */
         this.pointerDownOutside = output();
-        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-        this.containerEl = signal(null, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.triggerEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl, 300);
         this.afterNextRender = afterNextRender(() => {
             this.triggerEl.set(this.rootContext.trigger() ?? null);
@@ -606,13 +649,13 @@ class RdxTooltipPositioner extends RdxPopperContentWrapper {
         // pointer-events: none so the pointer always passes through to the trigger underneath.
         effect(() => this.nonInteractive.set(this.rootContext.trackCursorAxis() !== 'none'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPositioner, isStandalone: true, selector: "[rdxTooltipPositioner]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxTooltipPositioner, isStandalone: true, selector: "[rdxTooltipPositioner]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxTooltipPositioner),
             provideRdxPopperContentConfig({ side: 'top', arrowPadding: 5, collisionPadding: 5 })
         ], usesInheritance: true, hostDirectives: [{ directive: i1$2.RdxFloatingNodeRegistration }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPositioner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipPositioner]',
@@ -667,15 +710,18 @@ class RdxTooltipTrigger {
         /**
          * Associates this trigger with a detached tooltip root.
          */
-        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.handle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         /**
          * Data associated with this trigger while it is active.
          */
-        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.payload = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
         /**
          * ID used to identify this trigger when opening a detached tooltip imperatively.
          */
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Whether the tooltip should close when the trigger is clicked.
          * @defaultValue true
@@ -695,12 +741,16 @@ class RdxTooltipTrigger {
          */
         this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
         this.userOnPointerDown = input(undefined, { ...(ngDevMode ? { debugName: "userOnPointerDown" } : /* istanbul ignore next */ {}), alias: 'rdxOnPointerDown' });
-        this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.triggerId = computed(() => this.id() ?? this.generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
         /** Disabled if either the root or this trigger is disabled. */
-        this.isDisabled = computed(() => (this.rootContext()?.disabled() ?? false) || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => (this.rootContext()?.disabled() ?? false) || this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /** Whether this specific trigger is the active anchor of an open tooltip. */
-        this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.triggerInteraction = createRdxTriggerInteraction({
             trigger: () => this.elementRef.nativeElement,
             activeTrigger: () => this.rootContext()?.trigger(),
@@ -708,9 +758,12 @@ class RdxTooltipTrigger {
             disabled: () => this.isDisabled(),
             contentId: () => this.rootContext()?.contentId
         });
-        this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
-        this.hasPointerMoveOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : /* istanbul ignore next */ []));
-        this.isNestedTriggerHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNestedTriggerHovered" }] : /* istanbul ignore next */ []));
+        this.isPointerDown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
+        this.hasPointerMoveOpened = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : /* istanbul ignore next */ []));
+        this.isNestedTriggerHovered = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNestedTriggerHovered" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {
@@ -831,10 +884,10 @@ class RdxTooltipTrigger {
         }
         return nestedTriggerHovered;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-grace-area-trigger": "''" }, listeners: { "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave()", "mouseover": "handleMouseOver($event)", "mouseleave": "handleMouseLeave()", "pointerdown": "handlePointerDown($event)", "focus": "handleFocus($event)", "blur": "handleBlur($event)", "click": "handleClick($event)" }, properties: { "id": "triggerId()", "attr.aria-describedby": "isOpen() ? rootContext()?.contentId : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-trigger-disabled": "triggerInteraction.disabled() ? \"\" : undefined", "attr.data-rdx-tooltip-trigger": "isDisabled() ? undefined : \"\"" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-grace-area-trigger": "''" }, listeners: { "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave()", "mouseover": "handleMouseOver($event)", "mouseleave": "handleMouseLeave()", "pointerdown": "handlePointerDown($event)", "focus": "handleFocus($event)", "blur": "handleBlur($event)", "click": "handleClick($event)" }, properties: { "id": "triggerId()", "attr.aria-describedby": "isOpen() ? rootContext()?.contentId : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-trigger-disabled": "triggerInteraction.disabled() ? \"\" : undefined", "attr.data-rdx-tooltip-trigger": "isDisabled() ? undefined : \"\"" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipTrigger]',
@@ -862,10 +915,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class RdxTooltipHandle {
     constructor() {
-        this.rootContext = signal(undefined, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.rootContext = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
         this.triggers = new Map();
         this.rootTriggerCleanups = new Map();
-        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     }
     open(triggerId) {
         const trigger = this.triggers.get(triggerId);