@radix-ng/primitives 0.20.0 → 0.20.2

package/compodoc/documentation.json

@@ -7742,12 +7742,12 @@
         },
         {
             "name": "RdxPopoverArrowDirective",
-            "id": "directive-RdxPopoverArrowDirective-c44ebda00539b0187145be6bb7b600fb09f168a523316a8f0c64e158fc91dbb33a0dddade91fb89d326b80442e7748c967afd05bbf8abef2d08c78787ec81228",
+            "id": "directive-RdxPopoverArrowDirective-d05177319f8976c7b4ccfb63296f30cfd9b3d018f8c4845132effe4d67bfdbeefd61da5d07831b4b180cd0a4d4098562ce2deb401b1c7df4ab4007b848dcff52",
             "file": "popover/src/popover-arrow.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport {\n    AfterViewInit,\n    computed,\n    Directive,\n    effect,\n    ElementRef,\n    forwardRef,\n    inject,\n    input,\n    Renderer2,\n    signal,\n    untracked\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from './popover.utils';\n\n@Directive({\n    selector: '[rdxPopoverArrow]',\n    standalone: true,\n    providers: [\n        {\n            provide: RdxPopoverArrowToken,\n            useExisting: forwardRef(() => RdxPopoverArrowDirective)\n        }\n    ]\n})\nexport class RdxPopoverArrowDirective implements AfterViewInit {\n    /** @ignore */\n    private readonly renderer = inject(Renderer2);\n    /** @ignore */\n    private readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * The width of the arrow in pixels.\n     */\n    readonly width = input<number>(10);\n\n    /**\n     * The height of the arrow in pixels.\n     */\n    readonly height = input<number>(5);\n\n    /** @ignore */\n    readonly arrowSvgElement = computed<HTMLElement>(() => {\n        const width = this.width();\n        const height = this.height();\n\n        const svgElement = this.renderer.createElement('svg', 'svg');\n        this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');\n        this.renderer.setAttribute(svgElement, 'width', String(width));\n        this.renderer.setAttribute(svgElement, 'height', String(height));\n        const polygonElement = this.renderer.createElement('polygon', 'svg');\n        this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');\n        this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');\n        this.renderer.appendChild(svgElement, polygonElement);\n\n        return svgElement;\n    });\n\n    /** @ignore */\n    private readonly currentArrowSvgElement = signal<HTMLOrSVGElement | undefined>(void 0);\n    /** @ignore */\n    private readonly position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());\n\n    /** @ignore */\n    private triggerRect: DOMRect;\n\n    constructor() {\n        this.onArrowSvgElementChangeEffect();\n        this.onContentPositionChangeEffect();\n    }\n\n    /** @ignore */\n    ngAfterViewInit() {\n        if (this.elementRef.nativeElement.parentElement) {\n            this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');\n        }\n        this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');\n        this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');\n        this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');\n        this.triggerRect = this.popoverRoot.popoverTriggerDirective().elementRef.nativeElement.getBoundingClientRect();\n    }\n\n    /** @ignore */\n    private setPosition(position: ConnectedOverlayPositionChange) {\n        const posParams = getArrowPositionParams(\n            getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair),\n            { width: this.width(), height: this.height() },\n            { width: this.triggerRect.width, height: this.triggerRect.height }\n        );\n\n        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', posParams.bottom);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'right', posParams.right);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);\n    }\n\n    /** @ignore */\n    private onArrowSvgElementChangeEffect() {\n        effect(() => {\n            const arrowElement = this.arrowSvgElement();\n            untracked(() => {\n                const currentArrowSvgElement = this.currentArrowSvgElement();\n                if (currentArrowSvgElement) {\n                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);\n                }\n                this.currentArrowSvgElement.set(arrowElement);\n                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);\n                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);\n                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());\n            });\n        });\n    }\n\n    /** @ignore */\n    private onContentPositionChangeEffect() {\n        effect(() => {\n            const position = this.position();\n            untracked(() => {\n                if (!position) {\n                    return;\n                }\n                this.setPosition(position);\n            });\n        });\n    }\n}\n",
+            "sourceCode": "import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport {\n    AfterViewInit,\n    computed,\n    Directive,\n    effect,\n    ElementRef,\n    forwardRef,\n    inject,\n    input,\n    Renderer2,\n    signal,\n    untracked\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from './popover.utils';\n\n@Directive({\n    selector: '[rdxPopoverArrow]',\n    standalone: true,\n    providers: [\n        {\n            provide: RdxPopoverArrowToken,\n            useExisting: forwardRef(() => RdxPopoverArrowDirective)\n        }\n    ]\n})\nexport class RdxPopoverArrowDirective implements AfterViewInit {\n    /** @ignore */\n    private readonly renderer = inject(Renderer2);\n    /** @ignore */\n    private readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    private readonly elementRef = inject(ElementRef);\n\n    /**\n     * The width of the arrow in pixels.\n     */\n    readonly width = input<number>(10);\n\n    /**\n     * The height of the arrow in pixels.\n     */\n    readonly height = input<number>(5);\n\n    /** @ignore */\n    readonly arrowSvgElement = computed<HTMLElement>(() => {\n        const width = this.width();\n        const height = this.height();\n\n        const svgElement = this.renderer.createElement('svg', 'svg');\n        this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');\n        this.renderer.setAttribute(svgElement, 'width', String(width));\n        this.renderer.setAttribute(svgElement, 'height', String(height));\n        const polygonElement = this.renderer.createElement('polygon', 'svg');\n        this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');\n        this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');\n        this.renderer.appendChild(svgElement, polygonElement);\n\n        return svgElement;\n    });\n\n    /** @ignore */\n    private readonly currentArrowSvgElement = signal<HTMLOrSVGElement | undefined>(void 0);\n    /** @ignore */\n    private readonly position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());\n\n    /** @ignore */\n    private triggerRect: DOMRect;\n\n    constructor() {\n        this.onArrowSvgElementChangeEffect();\n        this.onContentPositionChangeEffect();\n    }\n\n    /** @ignore */\n    ngAfterViewInit() {\n        if (this.elementRef.nativeElement.parentElement) {\n            this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');\n        }\n        this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');\n        this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');\n        this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');\n        this.triggerRect = this.popoverRoot.popoverTriggerDirective().elementRef.nativeElement.getBoundingClientRect();\n    }\n\n    /** @ignore */\n    private setPosition(position: ConnectedOverlayPositionChange) {\n        const posParams = getArrowPositionParams(\n            getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair),\n            { width: this.width(), height: this.height() },\n            { width: this.triggerRect.width, height: this.triggerRect.height }\n        );\n\n        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', posParams.bottom);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'right', posParams.right);\n        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);\n    }\n\n    /** @ignore */\n    private onArrowSvgElementChangeEffect() {\n        effect(() => {\n            const arrowElement = this.arrowSvgElement();\n            untracked(() => {\n                const currentArrowSvgElement = this.currentArrowSvgElement();\n                if (currentArrowSvgElement) {\n                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);\n                }\n                this.currentArrowSvgElement.set(arrowElement);\n                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);\n                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);\n                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());\n            });\n        });\n    }\n\n    /** @ignore */\n    private onContentPositionChangeEffect() {\n        effect(() => {\n            const position = this.position();\n            untracked(() => {\n                if (!position) {\n                    return;\n                }\n                this.setPosition(position);\n            });\n        });\n    }\n}\n",
             "selector": "[rdxPopoverArrow]",
             "providers": [
                 {
@@ -7846,12 +7846,12 @@
         },
         {
             "name": "RdxPopoverCloseDirective",
-            "id": "directive-RdxPopoverCloseDirective-cadd1b5a3d54c6f6bfe16d2b01583f5f232dd338ea73d1568ce37a527e302e2695b5c1d3f35071e7bf9b12e687f68f036d879fd2452e2c2faec71a9c360f3d38",
+            "id": "directive-RdxPopoverCloseDirective-79ab5fb443749547b59965502f770901f6620b3d5e42830b0c91261c56329c6cae5a195ee62dbd98b0e88a0a7e94c2de8560f684dafcc86c705a3e4386f82693",
             "file": "popover/src/popover-close.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, effect, ElementRef, inject, Renderer2, untracked } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n    selector: '[rdxPopoverClose]',\n    standalone: true,\n    host: {\n        type: 'button',\n        '(click)': 'popoverRoot.handleClose()'\n    }\n})\nexport class RdxPopoverCloseDirective {\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);\n    /** @ignore */\n    private readonly renderer = inject(Renderer2);\n\n    constructor() {\n        this.onIsControlledExternallyEffect();\n    }\n\n    /** @ignore */\n    private onIsControlledExternallyEffect() {\n        effect(() => {\n            const isControlledExternally = this.popoverRoot.controlledExternally()();\n\n            untracked(() => {\n                this.renderer.setStyle(\n                    this.elementRef.nativeElement,\n                    'display',\n                    isControlledExternally ? 'none' : null\n                );\n            });\n        });\n    }\n}\n",
+            "sourceCode": "import { Directive, effect, ElementRef, inject, Renderer2, untracked } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n    selector: '[rdxPopoverClose]',\n    standalone: true,\n    host: {\n        type: 'button',\n        '(click)': 'popoverRoot.handleClose()'\n    }\n})\nexport class RdxPopoverCloseDirective {\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly elementRef = inject(ElementRef);\n    /** @ignore */\n    private readonly renderer = inject(Renderer2);\n\n    constructor() {\n        this.onIsControlledExternallyEffect();\n    }\n\n    /** @ignore */\n    private onIsControlledExternallyEffect() {\n        effect(() => {\n            const isControlledExternally = this.popoverRoot.controlledExternally()();\n\n            untracked(() => {\n                this.renderer.setStyle(\n                    this.elementRef.nativeElement,\n                    'display',\n                    isControlledExternally ? 'none' : null\n                );\n            });\n        });\n    }\n}\n",
             "selector": "[rdxPopoverClose]",
             "providers": [],
             "hostDirectives": [],
@@ -7876,19 +7876,17 @@
         },
         {
             "name": "RdxPopoverContentDirective",
-            "id": "directive-RdxPopoverContentDirective-e8b337aea55560e3b56bddb2c596a3fe72a7d6240e295a1be7a044676ecca3b2d46b6ea7019f00124b12cdb11b0ed1ba04de6c8b5b33de6a20bf124b6143b880",
+            "id": "directive-RdxPopoverContentDirective-8788479e1ad7d9e3ee8851ea33529382deeecf396a3f9d7b2cbc1a4f09e35c82dae8b2940b1cc6ed85b4f16dac40dbc68906102af5859a47cffa6322ac6c8881",
             "file": "popover/src/popover-content.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';\nimport {\n    computed,\n    DestroyRef,\n    Directive,\n    effect,\n    inject,\n    input,\n    OnInit,\n    output,\n    SimpleChange,\n    TemplateRef,\n    untracked\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter, tap } from 'rxjs';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { DEFAULTS } from './popover.constants';\nimport { RdxPopoverAlign, RdxPopoverSide, RdxSideAndAlignOffsets } from './popover.types';\nimport { getAllPossibleConnectedPositions, getContentPosition } from './popover.utils';\n\n@Directive({\n    selector: '[rdxPopoverContent]',\n    standalone: true,\n    hostDirectives: [\n        {\n            directive: CdkConnectedOverlay\n        }\n    ]\n})\nexport class RdxPopoverContentDirective implements OnInit {\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly templateRef = inject(TemplateRef);\n    /** @ignore */\n    readonly overlay = inject(Overlay);\n    /** @ignore */\n    readonly destroyRef = inject(DestroyRef);\n    /** @ignore */\n    private readonly connectedOverlay = inject(CdkConnectedOverlay);\n\n    /**\n     * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n     */\n    readonly side = input<RdxPopoverSide>(RdxPopoverSide.Top);\n    /**\n     * The distance in pixels from the trigger.\n     */\n    readonly sideOffset = input<number | undefined>(void 0);\n\n    /**\n     * The preferred alignment against the trigger. May change when collisions occur.\n     */\n    readonly align = input<RdxPopoverAlign>(RdxPopoverAlign.Center);\n    /**\n     * An offset in pixels from the \"start\" or \"end\" alignment options.\n     */\n    readonly alignOffset = input<number | undefined>(void 0);\n\n    /**\n     * Whether to add some alternate positions of the content.\n     */\n    readonly disableAlternatePositions = input(false);\n\n    /** @ingore */\n    readonly positions = computed(() => {\n        const greatestDimensionFromTheArrow = Math.max(\n            this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n            this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n        );\n        const offsets: RdxSideAndAlignOffsets = {\n            sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n            alignOffset: this.alignOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.align)\n        };\n        const basePosition = getContentPosition({\n            side: this.side(),\n            align: this.align(),\n            sideOffset: offsets.sideOffset,\n            alignOffset: offsets.alignOffset\n        });\n        const positions = [basePosition];\n        if (!this.disableAlternatePositions()) {\n            /**\n             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n             */\n            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n            allPossibleConnectedPositions.forEach((value, key) => {\n                const sideAndAlignArray = key.split('|');\n                if (\n                    (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n                    (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n                ) {\n                    positions.push(\n                        getContentPosition({\n                            side: sideAndAlignArray[0] as RdxPopoverSide,\n                            align: sideAndAlignArray[1] as RdxPopoverAlign,\n                            sideOffset: offsets.sideOffset,\n                            alignOffset: offsets.alignOffset\n                        })\n                    );\n                }\n            });\n        }\n        return positions;\n    });\n\n    /**\n     * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.\n     */\n    readonly onEscapeKeyDown = output<KeyboardEvent>();\n\n    /**\n     * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.\n     */\n    readonly onPointerDownOutside = output<MouseEvent>();\n\n    /**\n     * Event handler called when the overlay is atached\n     */\n    readonly onShow = output<void>();\n    /**\n     * Event handler called when the overlay is detached\n     */\n    readonly onHide = output<void>();\n\n    constructor() {\n        this.onPositionChangeEffect();\n        this.onControlledExternallyChangeEffect();\n    }\n\n    /** @ignore */\n    ngOnInit() {\n        this.setOrigin();\n        this.setScrollStrategy();\n        this.onAttach();\n        this.onDetach();\n        this.connectKeydownEscape();\n        this.connectOutsideClick();\n    }\n\n    /** @ignore */\n    show() {\n        const prevOpen = this.connectedOverlay.open;\n        this.connectedOverlay.open = true;\n        if (!prevOpen) {\n            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, true, false) });\n        }\n    }\n\n    /** @ignore */\n    hide() {\n        const prevOpen = this.connectedOverlay.open;\n        this.connectedOverlay.open = false;\n        if (prevOpen) {\n            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, false, false) });\n        }\n    }\n\n    /** @ignore */\n    positionChange() {\n        return this.connectedOverlay.positionChange.asObservable();\n    }\n\n    /** @ignore */\n    private connectKeydownEscape() {\n        this.connectedOverlay.overlayKeydown\n            .asObservable()\n            .pipe(\n                filter((event) => event.key === 'Escape'),\n                tap((event) => {\n                    this.onEscapeKeyDown.emit(event);\n                    if (!event.defaultPrevented) {\n                        this.popoverRoot.handleClose();\n                    }\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private connectOutsideClick() {\n        this.connectedOverlay.overlayOutsideClick\n            .asObservable()\n            .pipe(\n                tap((event) => {\n                    this.onPointerDownOutside.emit(event);\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private onAttach() {\n        this.connectedOverlay.attach\n            .asObservable()\n            .pipe(\n                tap(() => {\n                    this.onShow.emit();\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private onDetach() {\n        this.connectedOverlay.detach\n            .asObservable()\n            .pipe(\n                tap(() => {\n                    this.onHide.emit();\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private setScrollStrategy() {\n        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;\n        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();\n        this.connectedOverlay.ngOnChanges({\n            scrollStrategy: new SimpleChange(prevScrollStrategy, this.connectedOverlay.scrollStrategy, false)\n        });\n    }\n\n    /** @ignore */\n    private setDisableClose() {\n        const prevDisableClose = this.connectedOverlay.disableClose;\n        this.connectedOverlay.disableClose = this.popoverRoot.controlledExternally()();\n        this.connectedOverlay.ngOnChanges({\n            disableClose: new SimpleChange(prevDisableClose, this.connectedOverlay.disableClose, false)\n        });\n    }\n\n    /** @ignore */\n    private setOrigin() {\n        const prevOrigin = this.connectedOverlay.origin;\n        this.connectedOverlay.origin = this.popoverRoot.popoverTriggerDirective().overlayOrigin;\n        this.connectedOverlay.ngOnChanges({\n            origin: new SimpleChange(prevOrigin, this.connectedOverlay.origin, false)\n        });\n    }\n\n    /** @ignore */\n    private onPositionChangeEffect() {\n        effect(() => {\n            const positions = this.positions();\n            this.disableAlternatePositions();\n            untracked(() => {\n                const prevPositions = this.connectedOverlay.positions;\n                this.connectedOverlay.positions = positions;\n                this.connectedOverlay.ngOnChanges({\n                    positions: new SimpleChange(prevPositions, this.connectedOverlay.positions, false)\n                });\n                this.connectedOverlay.overlayRef?.updatePosition();\n            });\n        });\n    }\n\n    /** @ignore */\n    private onControlledExternallyChangeEffect() {\n        effect(() => {\n            this.popoverRoot.controlledExternally()();\n            untracked(() => {\n                this.setDisableClose();\n            });\n        });\n    }\n}\n",
+            "sourceCode": "import { CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';\nimport {\n    computed,\n    DestroyRef,\n    Directive,\n    effect,\n    inject,\n    input,\n    OnInit,\n    output,\n    SimpleChange,\n    TemplateRef,\n    untracked\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter, tap } from 'rxjs';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { DEFAULTS } from './popover.constants';\nimport { RdxPopoverAlign, RdxPopoverSide, RdxSideAndAlignOffsets } from './popover.types';\nimport { getAllPossibleConnectedPositions, getContentPosition } from './popover.utils';\n\n@Directive({\n    selector: '[rdxPopoverContent]',\n    standalone: true,\n    hostDirectives: [\n        CdkConnectedOverlay\n    ]\n})\nexport class RdxPopoverContentDirective implements OnInit {\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly templateRef = inject(TemplateRef);\n    /** @ignore */\n    readonly overlay = inject(Overlay);\n    /** @ignore */\n    readonly destroyRef = inject(DestroyRef);\n    /** @ignore */\n    private readonly connectedOverlay = inject(CdkConnectedOverlay);\n\n    /**\n     * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n     */\n    readonly side = input<RdxPopoverSide>(RdxPopoverSide.Top);\n    /**\n     * The distance in pixels from the trigger.\n     */\n    readonly sideOffset = input<number | undefined>(void 0);\n\n    /**\n     * The preferred alignment against the trigger. May change when collisions occur.\n     */\n    readonly align = input<RdxPopoverAlign>(RdxPopoverAlign.Center);\n    /**\n     * An offset in pixels from the \"start\" or \"end\" alignment options.\n     */\n    readonly alignOffset = input<number | undefined>(void 0);\n\n    /**\n     * Whether to add some alternate positions of the content.\n     */\n    readonly disableAlternatePositions = input(false);\n\n    /** @ingore */\n    readonly positions = computed(() => {\n        const greatestDimensionFromTheArrow = Math.max(\n            this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n            this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n        );\n        const offsets: RdxSideAndAlignOffsets = {\n            sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n            alignOffset: this.alignOffset() ?? DEFAULTS.offsets.align\n        };\n        const basePosition = getContentPosition({\n            side: this.side(),\n            align: this.align(),\n            sideOffset: offsets.sideOffset,\n            alignOffset: offsets.alignOffset\n        });\n        const positions = [basePosition];\n        if (!this.disableAlternatePositions()) {\n            /**\n             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n             */\n            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n            allPossibleConnectedPositions.forEach((_, key) => {\n                const sideAndAlignArray = key.split('|');\n                if (\n                    (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n                    (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n                ) {\n                    positions.push(\n                        getContentPosition({\n                            side: sideAndAlignArray[0] as RdxPopoverSide,\n                            align: sideAndAlignArray[1] as RdxPopoverAlign,\n                            sideOffset: offsets.sideOffset,\n                            alignOffset: offsets.alignOffset\n                        })\n                    );\n                }\n            });\n        }\n        return positions;\n    });\n\n    /**\n     * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.\n     */\n    readonly onEscapeKeyDown = output<KeyboardEvent>();\n\n    /**\n     * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.\n     */\n    readonly onPointerDownOutside = output<MouseEvent>();\n\n    /**\n     * Event handler called when the overlay is atached\n     */\n    readonly onShow = output<void>();\n    /**\n     * Event handler called when the overlay is detached\n     */\n    readonly onHide = output<void>();\n\n    constructor() {\n        this.onPositionChangeEffect();\n    }\n\n    /** @ignore */\n    ngOnInit() {\n        this.setOrigin();\n        this.setScrollStrategy();\n        this.setDisableClose();\n        this.onAttach();\n        this.onDetach();\n        this.connectKeydownEscape();\n        this.connectOutsideClick();\n    }\n\n    /** @ignore */\n    show() {\n        const prevOpen = this.connectedOverlay.open;\n        this.connectedOverlay.open = true;\n        if (!prevOpen) {\n            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, true, false) });\n        }\n    }\n\n    /** @ignore */\n    hide() {\n        const prevOpen = this.connectedOverlay.open;\n        this.connectedOverlay.open = false;\n        if (prevOpen) {\n            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, false, false) });\n        }\n    }\n\n    /** @ignore */\n    positionChange() {\n        return this.connectedOverlay.positionChange.asObservable();\n    }\n\n    /** @ignore */\n    private connectKeydownEscape() {\n        this.connectedOverlay.overlayKeydown\n            .asObservable()\n            .pipe(\n                filter((event) => event.key === 'Escape'),\n                tap((event) => {\n                    this.onEscapeKeyDown.emit(event);\n                    if (!event.defaultPrevented) {\n                        this.popoverRoot.handleClose();\n                    }\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private connectOutsideClick() {\n        this.connectedOverlay.overlayOutsideClick\n            .asObservable()\n            .pipe(\n                tap((event) => {\n                    this.onPointerDownOutside.emit(event);\n                    if (!event.defaultPrevented) {\n                        this.popoverRoot.handleClose();\n                    }\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private onAttach() {\n        this.connectedOverlay.attach\n            .asObservable()\n            .pipe(\n                tap(() => {\n                    this.onShow.emit();\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private onDetach() {\n        this.connectedOverlay.detach\n            .asObservable()\n            .pipe(\n                tap(() => {\n                    this.onHide.emit();\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe();\n    }\n\n    /** @ignore */\n    private setScrollStrategy() {\n        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;\n        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();\n        this.connectedOverlay.ngOnChanges({\n            scrollStrategy: new SimpleChange(prevScrollStrategy, this.connectedOverlay.scrollStrategy, false)\n        });\n    }\n\n    /** @ignore */\n    private setDisableClose() {\n        const prevDisableClose = this.connectedOverlay.disableClose;\n        this.connectedOverlay.disableClose = true;\n        this.connectedOverlay.ngOnChanges({\n            disableClose: new SimpleChange(prevDisableClose, this.connectedOverlay.disableClose, false)\n        });\n    }\n\n    /** @ignore */\n    private setOrigin() {\n        const prevOrigin = this.connectedOverlay.origin;\n        this.connectedOverlay.origin = this.popoverRoot.popoverTriggerDirective().overlayOrigin;\n        this.connectedOverlay.ngOnChanges({\n            origin: new SimpleChange(prevOrigin, this.connectedOverlay.origin, false)\n        });\n    }\n\n    /** @ignore */\n    private onPositionChangeEffect() {\n        effect(() => {\n            const positions = this.positions();\n            this.disableAlternatePositions();\n            untracked(() => {\n                const prevPositions = this.connectedOverlay.positions;\n                this.connectedOverlay.positions = positions;\n                this.connectedOverlay.ngOnChanges({\n                    positions: new SimpleChange(prevPositions, this.connectedOverlay.positions, false)\n                });\n                this.connectedOverlay.overlayRef?.updatePosition();\n            });\n        });\n    }\n}\n",
             "selector": "[rdxPopoverContent]",
             "providers": [],
             "hostDirectives": [
                 {
-                    "name": "CdkConnectedOverlay",
-                    "inputs": [],
-                    "outputs": []
+                    "name": "CdkConnectedOverlay"
                 }
             ],
             "standalone": true,
@@ -7902,7 +7900,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether to add some alternate positions of the content.</p>\n",
-                    "line": 64,
+                    "line": 62,
                     "rawdescription": "\n\nWhether to add some alternate positions of the content.\n",
                     "modifierKind": [
                         148
@@ -7925,7 +7923,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The preferred alignment against the trigger. May change when collisions occur.</p>\n",
-                    "line": 55,
+                    "line": 53,
                     "rawdescription": "\n\nThe preferred alignment against the trigger. May change when collisions occur.\n",
                     "modifierKind": [
                         148
@@ -7940,7 +7938,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>An offset in pixels from the &quot;start&quot; or &quot;end&quot; alignment options.</p>\n",
-                    "line": 59,
+                    "line": 57,
                     "rawdescription": "\n\nAn offset in pixels from the \"start\" or \"end\" alignment options.\n",
                     "modifierKind": [
                         148
@@ -7955,7 +7953,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether to add some alternate positions of the content.</p>\n",
-                    "line": 64,
+                    "line": 62,
                     "rawdescription": "\n\nWhether to add some alternate positions of the content.\n",
                     "modifierKind": [
                         148
@@ -7971,7 +7969,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.</p>\n",
-                    "line": 111,
+                    "line": 109,
                     "rawdescription": "\n\nEvent handler called when the escape key is down. It can be prevented by calling event.preventDefault.\n",
                     "modifierKind": [
                         148
@@ -7986,7 +7984,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when the overlay is detached</p>\n",
-                    "line": 125,
+                    "line": 123,
                     "rawdescription": "\n\nEvent handler called when the overlay is detached\n",
                     "modifierKind": [
                         148
@@ -8001,7 +7999,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.</p>\n",
-                    "line": 116,
+                    "line": 114,
                     "rawdescription": "\n\nEvent handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.\n",
                     "modifierKind": [
                         148
@@ -8016,7 +8014,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when the overlay is atached</p>\n",
-                    "line": 121,
+                    "line": 119,
                     "rawdescription": "\n\nEvent handler called when the overlay is atached\n",
                     "modifierKind": [
                         148
@@ -8024,30 +8022,30 @@
                 },
                 {
                     "name": "positions",
-                    "defaultValue": "computed(() => {\n        const greatestDimensionFromTheArrow = Math.max(\n            this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n            this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n        );\n        const offsets: RdxSideAndAlignOffsets = {\n            sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n            alignOffset: this.alignOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.align)\n        };\n        const basePosition = getContentPosition({\n            side: this.side(),\n            align: this.align(),\n            sideOffset: offsets.sideOffset,\n            alignOffset: offsets.alignOffset\n        });\n        const positions = [basePosition];\n        if (!this.disableAlternatePositions()) {\n            /**\n             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n             */\n            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n            allPossibleConnectedPositions.forEach((value, key) => {\n                const sideAndAlignArray = key.split('|');\n                if (\n                    (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n                    (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n                ) {\n                    positions.push(\n                        getContentPosition({\n                            side: sideAndAlignArray[0] as RdxPopoverSide,\n                            align: sideAndAlignArray[1] as RdxPopoverAlign,\n                            sideOffset: offsets.sideOffset,\n                            alignOffset: offsets.alignOffset\n                        })\n                    );\n                }\n            });\n        }\n        return positions;\n    })",
+                    "defaultValue": "computed(() => {\n        const greatestDimensionFromTheArrow = Math.max(\n            this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n            this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n        );\n        const offsets: RdxSideAndAlignOffsets = {\n            sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n            alignOffset: this.alignOffset() ?? DEFAULTS.offsets.align\n        };\n        const basePosition = getContentPosition({\n            side: this.side(),\n            align: this.align(),\n            sideOffset: offsets.sideOffset,\n            alignOffset: offsets.alignOffset\n        });\n        const positions = [basePosition];\n        if (!this.disableAlternatePositions()) {\n            /**\n             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n             */\n            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n            allPossibleConnectedPositions.forEach((_, key) => {\n                const sideAndAlignArray = key.split('|');\n                if (\n                    (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n                    (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n                ) {\n                    positions.push(\n                        getContentPosition({\n                            side: sideAndAlignArray[0] as RdxPopoverSide,\n                            align: sideAndAlignArray[1] as RdxPopoverAlign,\n                            sideOffset: offsets.sideOffset,\n                            alignOffset: offsets.alignOffset\n                        })\n                    );\n                }\n            });\n        }\n        return positions;\n    })",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 67,
+                    "line": 65,
                     "rawdescription": "",
                     "modifierKind": [
                         148
                     ],
                     "jsdoctags": [
                         {
-                            "pos": 2027,
-                            "end": 2035,
+                            "pos": 1992,
+                            "end": 2000,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2028,
-                                "end": 2034,
+                                "pos": 1993,
+                                "end": 1999,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -8067,7 +8065,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.</p>\n",
-                    "line": 46,
+                    "line": 44,
                     "rawdescription": "\n\nThe preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n",
                     "modifierKind": [
                         148
@@ -8082,7 +8080,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The distance in pixels from the trigger.</p>\n",
-                    "line": 50,
+                    "line": 48,
                     "rawdescription": "\n\nThe distance in pixels from the trigger.\n",
                     "modifierKind": [
                         148
@@ -8100,17 +8098,17 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 125
+                "line": 123
             }
         },
         {
             "name": "RdxPopoverRootDirective",
-            "id": "directive-RdxPopoverRootDirective-68b3548677d14470bfbcf2f68adaadf5d03ac6a520dfbf262192e6b3fd6c512ad99b560cbdaabc2277ae2c4ed5a31a61b7b773bb24ec9f9d254e8937bf9e9369",
+            "id": "directive-RdxPopoverRootDirective-e96e8026ed28e058a5551f6e6f830db4faeaec3fda88d2bc6a884cb06ac90fe0dd7643a4f86e87e68b19b858e3b6d0e3dce4636a9cd07617aff207acbf7d84b8",
             "file": "popover/src/popover-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { DOCUMENT } from '@angular/common';\nimport {\n    computed,\n    contentChild,\n    Directive,\n    effect,\n    forwardRef,\n    inject,\n    input,\n    OnInit,\n    output,\n    signal,\n    untracked,\n    ViewContainerRef\n} from '@angular/core';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { RdxPopoverContentDirective } from './popover-content.directive';\nimport { RdxPopoverRootToken } from './popover-root.token';\nimport { RdxPopoverTriggerDirective } from './popover-trigger.directive';\nimport { RdxPopoverState } from './popover.types';\n\n@Directive({\n    selector: '[rdxPopoverRoot]',\n    standalone: true,\n    providers: [\n        {\n            provide: RdxPopoverRootToken,\n            useExisting: forwardRef(() => RdxPopoverRootDirective)\n        }\n    ],\n    exportAs: 'rdxPopoverRoot'\n})\nexport class RdxPopoverRootDirective implements OnInit {\n    /**\n     * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n     */\n    readonly defaultOpen = input<boolean>(false);\n    /**\n     * The controlled open state of the popover. Must be used in conjunction with onOpenChange.\n     */\n    readonly open = input<boolean | undefined>();\n\n    /**\n     * Event handler called when the open state of the popover changes.\n     */\n    readonly onOpenChange = output<boolean>();\n\n    /** @ignore */\n    readonly popoverContentDirective = contentChild.required(RdxPopoverContentDirective);\n    /** @ignore */\n    readonly popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);\n    /** @ignore */\n    readonly popoverArrowDirective = contentChild(RdxPopoverArrowToken);\n\n    /** @ignore */\n    readonly viewContainerRef = inject(ViewContainerRef);\n    /** @ignore */\n    private readonly document = inject(DOCUMENT);\n\n    /** @ignore */\n    readonly isOpen = signal<boolean>(this.defaultOpen());\n    /** @ignore */\n    readonly state = computed<RdxPopoverState>(() => {\n        const currentIsOpen = this.isOpen();\n        if (currentIsOpen) {\n            return 'open';\n        }\n        return 'closed';\n    });\n\n    /** @ignore */\n    private isControlledExternally = computed(() => signal(this.open() !== void 0));\n\n    constructor() {\n        this.onOpenChangeEffect();\n        this.onIsOpenChangeEffect();\n    }\n\n    /** @ignore */\n    ngOnInit(): void {\n        if (this.defaultOpen()) {\n            this.handleOpen();\n        }\n    }\n\n    /** @ignore */\n    controlledExternally() {\n        return this.isControlledExternally().asReadonly();\n    }\n\n    /** @ignore */\n    handleOpen(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.setOpen(true);\n    }\n\n    /** @ignore */\n    handleClose(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.setOpen(false);\n    }\n\n    /** @ignore */\n    handleToggle(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.isOpen() ? this.handleClose() : this.handleOpen();\n    }\n\n    /** @ignore */\n    private setOpen(open = false): void {\n        if (open) {\n            this.document.dispatchEvent(new CustomEvent('popover.open'));\n        }\n\n        this.isOpen.set(open);\n        this.onOpenChange.emit(open);\n    }\n\n    /** @ignore */\n    private show(): void {\n        this.popoverContentDirective().show();\n    }\n\n    /** @ignore */\n    private hide(): void {\n        this.popoverContentDirective().hide();\n    }\n\n    /** @ignore */\n    private onIsOpenChangeEffect() {\n        effect(() => {\n            const isOpen = this.isOpen();\n\n            untracked(() => {\n                if (isOpen) {\n                    this.show();\n                } else {\n                    this.hide();\n                }\n            });\n        });\n    }\n\n    /** @ignore */\n    private onOpenChangeEffect() {\n        effect(() => {\n            const currentOpen = this.open();\n\n            untracked(() => {\n                this.isControlledExternally().set(currentOpen !== void 0);\n                if (this.isControlledExternally()()) {\n                    this.setOpen(currentOpen);\n                }\n            });\n        });\n    }\n}\n",
+            "sourceCode": "import { DOCUMENT } from '@angular/common';\nimport {\n    computed,\n    contentChild,\n    Directive,\n    effect,\n    forwardRef,\n    inject,\n    input,\n    OnInit,\n    output,\n    signal,\n    untracked,\n    ViewContainerRef\n} from '@angular/core';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { RdxPopoverContentDirective } from './popover-content.directive';\nimport { RdxPopoverRootToken } from './popover-root.token';\nimport { RdxPopoverTriggerDirective } from './popover-trigger.directive';\nimport { RdxPopoverState } from './popover.types';\n\nlet nextId = 0;\n\n@Directive({\n    selector: '[rdxPopoverRoot]',\n    standalone: true,\n    providers: [\n        {\n            provide: RdxPopoverRootToken,\n            useExisting: forwardRef(() => RdxPopoverRootDirective)\n        }\n    ],\n    exportAs: 'rdxPopoverRoot'\n})\nexport class RdxPopoverRootDirective implements OnInit {\n    readonly uniqueId = signal(++nextId);\n    readonly name = computed(() => `rdx-popover-root-${this.uniqueId()}`);\n\n    /**\n     * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n     */\n    readonly defaultOpen = input<boolean>(false);\n    /**\n     * The controlled open state of the popover. Must be used in conjunction with onOpenChange.\n     */\n    readonly open = input<boolean | undefined>();\n\n    /**\n     * Event handler called when the open state of the popover changes.\n     */\n    readonly onOpenChange = output<boolean>();\n\n    /** @ignore */\n    readonly popoverContentDirective = contentChild.required(RdxPopoverContentDirective);\n    /** @ignore */\n    readonly popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);\n    /** @ignore */\n    readonly popoverArrowDirective = contentChild(RdxPopoverArrowToken);\n\n    /** @ignore */\n    readonly viewContainerRef = inject(ViewContainerRef);\n    /** @ignore */\n    private readonly document = inject(DOCUMENT);\n\n    /** @ignore */\n    readonly isOpen = signal<boolean>(this.defaultOpen());\n    /** @ignore */\n    readonly state = computed<RdxPopoverState>(() => {\n        const currentIsOpen = this.isOpen();\n        if (currentIsOpen) {\n            return 'open';\n        }\n        return 'closed';\n    });\n\n    /** @ignore */\n    private isControlledExternally = computed(() => signal(this.open() !== void 0));\n\n    constructor() {\n        this.onOpenChangeEffect();\n        this.onIsOpenChangeEffect();\n    }\n\n    /** @ignore */\n    ngOnInit(): void {\n        if (this.defaultOpen()) {\n            this.handleOpen();\n        }\n    }\n\n    /** @ignore */\n    controlledExternally() {\n        return this.isControlledExternally().asReadonly();\n    }\n\n    /** @ignore */\n    handleOpen(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.setOpen(true);\n    }\n\n    /** @ignore */\n    handleClose(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.setOpen(false);\n    }\n\n    /** @ignore */\n    handleToggle(): void {\n        if (this.isControlledExternally()()) {\n            return;\n        }\n        this.isOpen() ? this.handleClose() : this.handleOpen();\n    }\n\n    /** @ignore */\n    private setOpen(open = false): void {\n        this.document.dispatchEvent(\n            new CustomEvent(`popover.${open ? 'open' : 'close'}`, {\n                detail: {\n                    id: this.name()\n                }\n            })\n        );\n\n        this.isOpen.set(open);\n        this.onOpenChange.emit(open);\n    }\n\n    /** @ignore */\n    private show(): void {\n        this.popoverContentDirective().show();\n    }\n\n    /** @ignore */\n    private hide(): void {\n        this.popoverContentDirective().hide();\n    }\n\n    /** @ignore */\n    private onIsOpenChangeEffect() {\n        effect(() => {\n            const isOpen = this.isOpen();\n\n            untracked(() => {\n                if (isOpen) {\n                    this.show();\n                } else {\n                    this.hide();\n                }\n            });\n        });\n    }\n\n    /** @ignore */\n    private onOpenChangeEffect() {\n        effect(() => {\n            const currentOpen = this.open();\n\n            untracked(() => {\n                this.isControlledExternally().set(currentOpen !== void 0);\n                if (this.isControlledExternally()()) {\n                    this.setOpen(currentOpen);\n                }\n            });\n        });\n    }\n}\n",
             "selector": "[rdxPopoverRoot]",
             "providers": [
                 {
@@ -8131,7 +8129,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The open state of the popover when it is initially rendered. Use when you do not need to control its open state.</p>\n",
-                    "line": 37,
+                    "line": 42,
                     "rawdescription": "\n\nThe open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n",
                     "modifierKind": [
                         148
@@ -8154,13 +8152,27 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The open state of the popover when it is initially rendered. Use when you do not need to control its open state.</p>\n",
-                    "line": 37,
+                    "line": 42,
                     "rawdescription": "\n\nThe open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
+                {
+                    "name": "name",
+                    "defaultValue": "computed(() => `rdx-popover-root-${this.uniqueId()}`)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 37,
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "onOpenChange",
                     "defaultValue": "output<boolean>()",
@@ -8170,7 +8182,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when the open state of the popover changes.</p>\n",
-                    "line": 46,
+                    "line": 51,
                     "rawdescription": "\n\nEvent handler called when the open state of the popover changes.\n",
                     "modifierKind": [
                         148
@@ -8185,11 +8197,25 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The controlled open state of the popover. Must be used in conjunction with onOpenChange.</p>\n",
-                    "line": 41,
+                    "line": 46,
                     "rawdescription": "\n\nThe controlled open state of the popover. Must be used in conjunction with onOpenChange.\n",
                     "modifierKind": [
                         148
                     ]
+                },
+                {
+                    "name": "uniqueId",
+                    "defaultValue": "signal(++nextId)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 36,
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
             "methodsClass": [],
@@ -8203,17 +8229,17 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 72
+                "line": 77
             }
         },
         {
             "name": "RdxPopoverTriggerDirective",
-            "id": "directive-RdxPopoverTriggerDirective-2c839104a65b2faa2092db10bc076c17650e25cadbca2c67a6cedea587dd272aa24399d7f1f4c2e7285998e8fa1e386373630bc3798781aa407d6dfee88b797c",
+            "id": "directive-RdxPopoverTriggerDirective-8084bcc26be6cb9672051a844f54a1733d56d3bec5cbc590ff97647a21492b8ad6f131c7461e43663de8a6ad29409d748c48e8daabffec5165653e90080a34d8",
             "file": "popover/src/popover-trigger.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { computed, Directive, ElementRef, inject, input } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\nlet nextId = 0;\n\n@Directive({\n    selector: '[rdxPopoverTrigger]',\n    standalone: true,\n    hostDirectives: [CdkOverlayOrigin],\n    host: {\n        type: 'button',\n        '[attr.id]': 'id()',\n        '[attr.aria-haspopup]': '\"dialog\"',\n        '[attr.aria-expanded]': 'popoverRoot.isOpen()',\n        '[attr.aria-controls]': 'popoverId()',\n        '[attr.data-state]': 'popoverRoot.state()',\n        '(click)': 'onClick()'\n    }\n})\nexport class RdxPopoverTriggerDirective {\n    readonly id = input(`rdx-popover-root-${nextId++}`);\n    readonly popoverId = computed(() => `rdx-popover-${this.id()}`);\n\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);\n    /** @ignore */\n    readonly overlayOrigin = inject(CdkOverlayOrigin);\n\n    /** @ignore */\n    onClick(): void {\n        this.popoverRoot.handleToggle();\n    }\n}\n",
+            "sourceCode": "import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { computed, Directive, ElementRef, inject } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n    selector: '[rdxPopoverTrigger]',\n    standalone: true,\n    hostDirectives: [CdkOverlayOrigin],\n    host: {\n        type: 'button',\n        '[attr.id]': 'name()',\n        '[attr.aria-haspopup]': '\"dialog\"',\n        '[attr.aria-expanded]': 'popoverRoot.isOpen()',\n        '[attr.aria-controls]': 'controlsId()',\n        '[attr.data-state]': 'popoverRoot.state()',\n        '(click)': 'onClick()'\n    }\n})\nexport class RdxPopoverTriggerDirective {\n    /** @ignore */\n    readonly popoverRoot = injectPopoverRoot();\n    /** @ignore */\n    readonly elementRef = inject(ElementRef);\n    /** @ignore */\n    readonly overlayOrigin = inject(CdkOverlayOrigin);\n\n    /** @ignore */\n    readonly name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`);\n    /** @ignore */\n    readonly controlsId = computed(() => `rdx-popover-trigger-controls-${this.popoverRoot.uniqueId()}`);\n\n    /** @ignore */\n    onClick(): void {\n        this.popoverRoot.handleToggle();\n    }\n}\n",
             "selector": "[rdxPopoverTrigger]",
             "providers": [],
             "hostDirectives": [
@@ -8228,36 +8254,7 @@
             "deprecationMessage": "",
             "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "id",
-                    "defaultValue": "input(`rdx-popover-root-${nextId++}`)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 22,
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "popoverId",
-                    "defaultValue": "computed(() => `rdx-popover-${this.id()}`)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 23,
-                    "modifierKind": [
-                        148
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [],
             "extends": []
         },
@@ -8615,12 +8612,12 @@
         },
         {
             "name": "RdxRadioIndicatorDirective",
-            "id": "directive-RdxRadioIndicatorDirective-ec2f6ec6eca54ed507a9200d0a8638bb80051f09968bf1681883613dbd5c92b269f6dc7be115b7eb450ff13c9fe439c25ae20bcba34cd821749d07830a4335a4",
+            "id": "directive-RdxRadioIndicatorDirective-5b355eb159bab75305137248aa6fa8e888bc5283ce5c65219443ce36d763a10a531a27df786b02f76115bf5e0e4cc05f45abfca0029506f22d9572e5831de4f5",
             "file": "radio/src/radio-indicator.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';\n\n@Directive({\n    selector: '[rdxRadioIndicator]',\n    exportAs: 'rdxRadioIndicator',\n    standalone: true,\n    host: {\n        '[attr.data-state]': 'radioItem.checked ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'radioItem.disabled ? \"\" : null'\n    }\n})\nexport class RdxRadioIndicatorDirective {\n    protected readonly radioGroup: RadioGroupDirective = inject(RDX_RADIO_GROUP);\n    protected readonly radioItem: RdxRadioItemDirective = inject(RdxRadioItemDirective);\n}\n",
+            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';\n\n@Directive({\n    selector: '[rdxRadioIndicator]',\n    exportAs: 'rdxRadioIndicator',\n    standalone: true,\n    host: {\n        '[attr.data-state]': 'radioItem.checkedState() ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'radioItem.disabled ? \"\" : null'\n    }\n})\nexport class RdxRadioIndicatorDirective {\n    protected readonly radioGroup: RadioGroupDirective = inject(RDX_RADIO_GROUP);\n    protected readonly radioItem: RdxRadioItemDirective = inject(RdxRadioItemDirective);\n}\n",
             "selector": "[rdxRadioIndicator]",
             "providers": [],
             "exportAs": "rdxRadioIndicator",
@@ -13150,9 +13147,88 @@
             "stylesData": "\n        .CollapsibleRoot {\n            width: 300px;\n        }\n\n        .ExternalTrigger {\n            font-family: inherit;\n            border-radius: 8px;\n\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            box-shadow: 0 2px 10px var(--black-a7);\n            margin-bottom: 10px;\n            padding: 4px;\n        }\n\n        .ExternalTrigger[data-state='closed'] {\n            background-color: white;\n        }\n\n        .ExternalTrigger[data-state='open'] {\n            background-color: var(--violet-3);\n        }\n\n        .ExternalTrigger:hover {\n            background-color: var(--violet-3);\n        }\n\n        .ExternalTrigger:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Text {\n            color: var(--violet-11);\n            font-size: 15px;\n            line-height: 25px;\n        }\n\n        .Repository {\n            background-color: white;\n            border-radius: 4px;\n            margin: 10px 0;\n            padding: 10px;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n    \n",
             "extends": []
         },
+        {
+            "name": "RdxPopoverDefaultComponent",
+            "id": "component-RdxPopoverDefaultComponent-e542e582f4271fb22525f4ccfe02376250bca3d1c822960d8768e0b14ebe6f296c65303f7a9b9bdef1470f426e173a0f387fb4fcbf8d349ad5a33f15626d4622",
+            "file": "popover/stories/popover-default.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "rdx-popover-default",
+            "styleUrls": [],
+            "styles": [
+                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    "
+            ],
+            "template": "<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template rdxPopoverContent>\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "MountainSnowIcon",
+                    "defaultValue": "MountainSnowIcon",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 234,
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "XIcon",
+                    "defaultValue": "X",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 235,
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "FormsModule",
+                    "type": "module"
+                },
+                {
+                    "name": "RdxPopoverModule",
+                    "type": "module"
+                },
+                {
+                    "name": "LucideAngularModule",
+                    "type": "module"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n    selector: 'rdx-popover-default',\n    standalone: true,\n    imports: [\n        FormsModule,\n        RdxPopoverModule,\n        LucideAngularModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    `,\n    template: `\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template rdxPopoverContent>\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n    `\n})\nexport class RdxPopoverDefaultComponent {\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    \n",
+            "extends": []
+        },
         {
             "name": "RdxPopoverEventsComponent",
-            "id": "component-RdxPopoverEventsComponent-a8cf38fccffb66120bd1a55880647859d3f10949a5625abde89048caf43d96c76b0710c5cc501f452477be5aeee358cde6f221a53405f653f9aee02ef387faf3",
+            "id": "component-RdxPopoverEventsComponent-76bf523e63e4e8ecc64adaaedc8f0c342bac94fa618271b210bd9a121cbe16956f4883384ec25c741b94fd6c5f5e4a2825455f8cef12e5afa8497c5589b23ec0",
             "file": "popover/stories/popover-events.components.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -13162,15 +13238,44 @@
             "selector": "rdx-popover-events",
             "styleUrls": [],
             "styles": [
-                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    "
+                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        .MessagesContainer {\n            padding: 20px;\n        }\n\n        .Message {\n            color: var(--white-a12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: bolder;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    "
             ],
-            "template": "<div class=\"container\" #eventsContainer>\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" #triggerElement rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template\n            [sideOffset]=\"8\"\n            (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n            (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n            (onShow)=\"onShow()\"\n            (onHide)=\"onHide()\"\n            rdxPopoverContent\n        >\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n",
+            "template": "<div class=\"ParamsContainer\">\n    (onEscapeKeyDown) prevent default:\n    <input\n        [ngModel]=\"onEscapeKeyDownPreventDefault()\"\n        (ngModelChange)=\"onEscapeKeyDownPreventDefault.set($event)\"\n        type=\"checkbox\"\n    />\n    (onPointerDownOutside) prevent default:\n    <input\n        [ngModel]=\"onPointerDownOutsidePreventDefault()\"\n        (ngModelChange)=\"onPointerDownOutsidePreventDefault.set($event)\"\n        type=\"checkbox\"\n    />\n</div>\n\n<div class=\"container\" #eventsContainer>\n    <ng-container rdxPopoverRoot>\n        <button class=\"reset IconButton\" #triggerElement rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template\n            [sideOffset]=\"8\"\n            (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n            (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n            (onShow)=\"onShow()\"\n            (onHide)=\"onHide()\"\n            rdxPopoverContent\n        >\n            <div class=\"PopoverContent\">\n                <button class=\"reset PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n@if (messages().length) {\n    <div class=\"MessagesContainer\">\n        @for (message of messages(); track message; let i = $index) {\n            <p class=\"Message\">{{ messages().length - i }}. {{ message }}</p>\n        }\n    </div>\n}\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [],
             "outputsClass": [],
             "propertiesClass": [
+                {
+                    "name": "aligns",
+                    "defaultValue": "RdxPopoverAlign",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 322,
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
+                },
+                {
+                    "name": "messages",
+                    "defaultValue": "signal<string[]>([])",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 289,
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "MountainSnowIcon",
                     "defaultValue": "MountainSnowIcon",
@@ -13180,11 +13285,54 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 242,
+                    "line": 286,
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "onEscapeKeyDownPreventDefault",
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 291,
                     "modifierKind": [
                         148
                     ]
                 },
+                {
+                    "name": "onPointerDownOutsidePreventDefault",
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 292,
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "sides",
+                    "defaultValue": "RdxPopoverSide",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 321,
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
+                },
                 {
                     "name": "XIcon",
                     "defaultValue": "X",
@@ -13194,7 +13342,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 243,
+                    "line": 287,
                     "modifierKind": [
                         148
                     ]
@@ -13214,7 +13362,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 245,
+                    "line": 294,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -13235,7 +13383,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 265,
+                    "line": 313,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -13252,7 +13400,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 250,
+                    "line": 299,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -13273,7 +13421,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 309,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -13284,6 +13432,89 @@
             "hostListeners": [],
             "standalone": true,
             "imports": [
+                {
+                    "name": "RdxPopoverModule",
+                    "type": "module"
+                },
+                {
+                    "name": "LucideAngularModule",
+                    "type": "module"
+                },
+                {
+                    "name": "FormsModule",
+                    "type": "module"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component, ElementRef, inject, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverAlign, RdxPopoverModule, RdxPopoverSide } from '../index';\n\n@Component({\n    selector: 'rdx-popover-events',\n    standalone: true,\n    imports: [\n        RdxPopoverModule,\n        LucideAngularModule,\n        FormsModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        .MessagesContainer {\n            padding: 20px;\n        }\n\n        .Message {\n            color: var(--white-a12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: bolder;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    `,\n    template: `\n        <div class=\"ParamsContainer\">\n            (onEscapeKeyDown) prevent default:\n            <input\n                [ngModel]=\"onEscapeKeyDownPreventDefault()\"\n                (ngModelChange)=\"onEscapeKeyDownPreventDefault.set($event)\"\n                type=\"checkbox\"\n            />\n            (onPointerDownOutside) prevent default:\n            <input\n                [ngModel]=\"onPointerDownOutsidePreventDefault()\"\n                (ngModelChange)=\"onPointerDownOutsidePreventDefault.set($event)\"\n                type=\"checkbox\"\n            />\n        </div>\n\n        <div class=\"container\" #eventsContainer>\n            <ng-container rdxPopoverRoot>\n                <button class=\"reset IconButton\" #triggerElement rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template\n                    [sideOffset]=\"8\"\n                    (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n                    (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n                    (onShow)=\"onShow()\"\n                    (onHide)=\"onHide()\"\n                    rdxPopoverContent\n                >\n                    <div class=\"PopoverContent\">\n                        <button class=\"reset PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n        @if (messages().length) {\n            <div class=\"MessagesContainer\">\n                @for (message of messages(); track message; let i = $index) {\n                    <p class=\"Message\">{{ messages().length - i }}. {{ message }}</p>\n                }\n            </div>\n        }\n    `\n})\nexport class RdxPopoverEventsComponent {\n    private elementRef = inject(ElementRef);\n\n    private readonly triggerElement = viewChild<ElementRef<HTMLElement>>('triggerElement');\n    private readonly eventsContainer = viewChild<ElementRef<HTMLElement>>('eventsContainer');\n\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n\n    readonly messages = signal<string[]>([]);\n\n    readonly onEscapeKeyDownPreventDefault = signal(false);\n    readonly onPointerDownOutsidePreventDefault = signal(false);\n\n    onEscapeKeyDown(event: KeyboardEvent) {\n        this.addMessage(`Escape clicked! (preventDefault: ${this.onEscapeKeyDownPreventDefault()})`);\n        this.onEscapeKeyDownPreventDefault() && event.preventDefault();\n    }\n\n    onPointerDownOutside(event: MouseEvent): void {\n        if (!event.target || !this.elementRef.nativeElement.contains(event.target as HTMLElement)) {\n            return;\n        }\n        this.addMessage(\n            `Mouse clicked outside the popover! (preventDefault: ${this.onPointerDownOutsidePreventDefault()})`\n        );\n        this.onPointerDownOutsidePreventDefault() && event.preventDefault();\n    }\n\n    onShow() {\n        this.addMessage('Popover shown!');\n    }\n\n    onHide() {\n        this.addMessage('Popover hidden!');\n    }\n\n    private addMessage(message: string) {\n        this.messages.update((messages) => [message, ...messages]);\n    }\n\n    protected readonly sides = RdxPopoverSide;\n    protected readonly aligns = RdxPopoverAlign;\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        .MessagesContainer {\n            padding: 20px;\n        }\n\n        .Message {\n            color: var(--white-a12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: bolder;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    \n",
+            "extends": []
+        },
+        {
+            "name": "RdxPopoverMultipleComponent",
+            "id": "component-RdxPopoverMultipleComponent-d7220d54fd49c5984573ea3a5d1b6d46eb0cd01d779d0ae32b6970cd761a954f2f10f6a9def2f599ba53e437007be35b0fecdaeb10cb5715d00b287d7f213a54",
+            "file": "popover/stories/popover-multiple.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "rdx-popover-multiple",
+            "styleUrls": [],
+            "styles": [
+                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    "
+            ],
+            "template": "<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template rdxPopoverContent>\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template [sideOffset]=\"16\" [alignOffset]=\"16\" rdxPopoverContent>\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template [sideOffset]=\"60\" [alignOffset]=\"60\" rdxPopoverContent>\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "MountainSnowIcon",
+                    "defaultValue": "MountainSnowIcon",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 306,
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "XIcon",
+                    "defaultValue": "X",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 307,
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": true,
+            "imports": [
+                {
+                    "name": "FormsModule",
+                    "type": "module"
+                },
                 {
                     "name": "RdxPopoverModule",
                     "type": "module"
@@ -13296,7 +13527,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, ElementRef, viewChild } from '@angular/core';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n    selector: 'rdx-popover-events',\n    standalone: true,\n    imports: [\n        RdxPopoverModule,\n        LucideAngularModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    `,\n    template: `\n        <div class=\"container\" #eventsContainer>\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" #triggerElement rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template\n                    [sideOffset]=\"8\"\n                    (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n                    (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n                    (onShow)=\"onShow()\"\n                    (onHide)=\"onHide()\"\n                    rdxPopoverContent\n                >\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n    `\n})\nexport class RdxPopoverEventsComponent {\n    private readonly triggerElement = viewChild<ElementRef<HTMLElement>>('triggerElement');\n    private readonly eventsContainer = viewChild<ElementRef<HTMLElement>>('eventsContainer');\n\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n\n    onEscapeKeyDown(event: KeyboardEvent) {\n        alert('Escape clicked!');\n        event.preventDefault();\n    }\n\n    onPointerDownOutside(event: MouseEvent): void {\n        if (!event.target || !this.eventsContainer()?.nativeElement.contains(event.target as HTMLElement)) {\n            return;\n        }\n        alert('Mouse clicked outside the popover!');\n        if (event.target === this.triggerElement()?.nativeElement) {\n            event.stopPropagation();\n        }\n        event.preventDefault();\n    }\n\n    onShow() {\n        alert('Popover shown!');\n    }\n\n    onHide() {\n        alert('Popover hidden!');\n    }\n}\n",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n    selector: 'rdx-popover-multiple',\n    standalone: true,\n    imports: [\n        FormsModule,\n        RdxPopoverModule,\n        LucideAngularModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    `,\n    template: `\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template rdxPopoverContent>\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template [sideOffset]=\"16\" [alignOffset]=\"16\" rdxPopoverContent>\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template [sideOffset]=\"60\" [alignOffset]=\"60\" rdxPopoverContent>\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n    `\n})\nexport class RdxPopoverMultipleComponent {\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n    \n",
@@ -13304,7 +13535,7 @@
         },
         {
             "name": "RdxPopoverPositioningComponent",
-            "id": "component-RdxPopoverPositioningComponent-dff0350a47365890e7fa6b29ca36574781595fe53fc358d5a43979f32252e8fb4aaeaade4dcf605927c8fedacbce16b4b821118c3fa8518ddb92de0eb5e8083e",
+            "id": "component-RdxPopoverPositioningComponent-d72f8e2425ab204cfb02370235c579615dba1035c7e5bae07c32906714ec483978db4dc95b752db2b97fddd5150eafbae3921a13c7e5307e6c1fc2de72f6a071",
             "file": "popover/stories/popover-positioning.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -13314,9 +13545,9 @@
             "selector": "rdx-popover-positioning",
             "styleUrls": [],
             "styles": [
-                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input:not(.no-reset) {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    "
+                "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    "
             ],
-            "template": "<div class=\"ParamsContainer\">\n    Side:\n    <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n        <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n        <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n        <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n        <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n    </select>\n    Align:\n    <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n        <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n        <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n        <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n    </select>\n    SideOffset:\n    <input class=\"no-reset\" [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n    AlignOffset:\n    <input class=\"no-reset\" [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n    Alternate positions:\n    <input\n        class=\"no-reset\"\n        [ngModel]=\"disableAlternatePositions()\"\n        (ngModelChange)=\"disableAlternatePositions.set($event)\"\n        type=\"checkbox\"\n    />\n</div>\n\n<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template\n            [sideOffset]=\"sideOffset()\"\n            [alignOffset]=\"alignOffset()\"\n            [side]=\"selectedSide()\"\n            [align]=\"selectedAlign()\"\n            [disableAlternatePositions]=\"disableAlternatePositions()\"\n            rdxPopoverContent\n        >\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n",
+            "template": "<div class=\"ParamsContainer\">\n    Side:\n    <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n        <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n        <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n        <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n        <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n    </select>\n    Align:\n    <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n        <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n        <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n        <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n    </select>\n    SideOffset:\n    <input [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n    AlignOffset:\n    <input [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n    Alternate positions:\n    <input\n        [ngModel]=\"disableAlternatePositions()\"\n        (ngModelChange)=\"disableAlternatePositions.set($event)\"\n        type=\"checkbox\"\n    />\n</div>\n\n<div class=\"container\">\n    <ng-container rdxPopoverRoot>\n        <button class=\"IconButton reset\" rdxPopoverTrigger>\n            <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n        </button>\n\n        <ng-template\n            [sideOffset]=\"sideOffset()\"\n            [alignOffset]=\"alignOffset()\"\n            [side]=\"selectedSide()\"\n            [align]=\"selectedAlign()\"\n            [disableAlternatePositions]=\"disableAlternatePositions()\"\n            rdxPopoverContent\n        >\n            <div class=\"PopoverContent\">\n                <button class=\"PopoverClose reset\" rdxPopoverClose aria-label=\"Close\">\n                    <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n                <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                    <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"width\">Width</label>\n                        <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                        <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"height\">Height</label>\n                        <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n                    </fieldset>\n                    <fieldset class=\"reset Fieldset\">\n                        <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                        <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n                    </fieldset>\n                </div>\n                <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -13332,7 +13563,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 284
+                    "line": 281
                 },
                 {
                     "name": "aligns",
@@ -13343,7 +13574,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 288,
+                    "line": 285,
                     "modifierKind": [
                         148
                     ]
@@ -13357,7 +13588,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 285
+                    "line": 282
                 },
                 {
                     "name": "MountainSnowIcon",
@@ -13368,7 +13599,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 278,
+                    "line": 275,
                     "modifierKind": [
                         148
                     ]
@@ -13382,7 +13613,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 282
+                    "line": 279
                 },
                 {
                     "name": "selectedSide",
@@ -13393,7 +13624,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 281
+                    "line": 278
                 },
                 {
                     "name": "sideOffset",
@@ -13404,7 +13635,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 283
+                    "line": 280
                 },
                 {
                     "name": "sides",
@@ -13415,7 +13646,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 287,
+                    "line": 284,
                     "modifierKind": [
                         148
                     ]
@@ -13429,7 +13660,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 279,
+                    "line": 276,
                     "modifierKind": [
                         148
                     ]
@@ -13458,10 +13689,10 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\nimport { RdxPopoverAlign, RdxPopoverSide } from '../src/popover.types';\n\n@Component({\n    selector: 'rdx-popover-positioning',\n    standalone: true,\n    imports: [\n        FormsModule,\n        RdxPopoverModule,\n        LucideAngularModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input:not(.no-reset) {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    `,\n    template: `\n        <div class=\"ParamsContainer\">\n            Side:\n            <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n                <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n                <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n                <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n                <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n            </select>\n            Align:\n            <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n                <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n                <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n                <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n            </select>\n            SideOffset:\n            <input class=\"no-reset\" [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n            AlignOffset:\n            <input class=\"no-reset\" [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n            Alternate positions:\n            <input\n                class=\"no-reset\"\n                [ngModel]=\"disableAlternatePositions()\"\n                (ngModelChange)=\"disableAlternatePositions.set($event)\"\n                type=\"checkbox\"\n            />\n        </div>\n\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template\n                    [sideOffset]=\"sideOffset()\"\n                    [alignOffset]=\"alignOffset()\"\n                    [side]=\"selectedSide()\"\n                    [align]=\"selectedAlign()\"\n                    [disableAlternatePositions]=\"disableAlternatePositions()\"\n                    rdxPopoverContent\n                >\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n    `\n})\nexport class RdxPopoverPositioningComponent {\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n\n    selectedSide = signal(RdxPopoverSide.Top);\n    selectedAlign = signal(RdxPopoverAlign.Center);\n    sideOffset = signal(8);\n    alignOffset = signal(8);\n    disableAlternatePositions = signal(false);\n\n    readonly sides = RdxPopoverSide;\n    readonly aligns = RdxPopoverAlign;\n}\n",
+            "sourceCode": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\nimport { RdxPopoverAlign, RdxPopoverSide } from '../src/popover.types';\n\n@Component({\n    selector: 'rdx-popover-positioning',\n    standalone: true,\n    imports: [\n        FormsModule,\n        RdxPopoverModule,\n        LucideAngularModule\n    ],\n    styles: `\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    `,\n    template: `\n        <div class=\"ParamsContainer\">\n            Side:\n            <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n                <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n                <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n                <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n                <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n            </select>\n            Align:\n            <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n                <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n                <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n                <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n            </select>\n            SideOffset:\n            <input [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n            AlignOffset:\n            <input [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n            Alternate positions:\n            <input\n                [ngModel]=\"disableAlternatePositions()\"\n                (ngModelChange)=\"disableAlternatePositions.set($event)\"\n                type=\"checkbox\"\n            />\n        </div>\n\n        <div class=\"container\">\n            <ng-container rdxPopoverRoot>\n                <button class=\"IconButton reset\" rdxPopoverTrigger>\n                    <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n                </button>\n\n                <ng-template\n                    [sideOffset]=\"sideOffset()\"\n                    [alignOffset]=\"alignOffset()\"\n                    [side]=\"selectedSide()\"\n                    [align]=\"selectedAlign()\"\n                    [disableAlternatePositions]=\"disableAlternatePositions()\"\n                    rdxPopoverContent\n                >\n                    <div class=\"PopoverContent\">\n                        <button class=\"PopoverClose reset\" rdxPopoverClose aria-label=\"Close\">\n                            <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n                        </button>\n                        <div style=\"display: flex; flex-direction: column; gap: 10px\">\n                            <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"width\">Width</label>\n                                <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n                                <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"height\">Height</label>\n                                <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n                            </fieldset>\n                            <fieldset class=\"reset Fieldset\">\n                                <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n                                <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n                            </fieldset>\n                        </div>\n                        <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n                    </div>\n                </ng-template>\n            </ng-container>\n        </div>\n    `\n})\nexport class RdxPopoverPositioningComponent {\n    readonly MountainSnowIcon = MountainSnowIcon;\n    readonly XIcon = X;\n\n    selectedSide = signal(RdxPopoverSide.Top);\n    selectedAlign = signal(RdxPopoverAlign.Center);\n    sideOffset = signal(8);\n    alignOffset = signal(8);\n    disableAlternatePositions = signal(false);\n\n    readonly sides = RdxPopoverSide;\n    readonly aligns = RdxPopoverAlign;\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
-            "stylesData": "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        button,\n        fieldset,\n        input:not(.no-reset) {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    \n",
+            "stylesData": "\n        .container {\n            height: 150px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        /* reset */\n        .reset {\n            all: unset;\n        }\n\n        .PopoverContent {\n            border-radius: 4px;\n            padding: 20px;\n            width: 260px;\n            background-color: white;\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n            animation-duration: 400ms;\n            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n            will-change: transform, opacity;\n        }\n\n        .PopoverContent:focus {\n            box-shadow:\n                hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n                hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n                0 0 0 2px var(--violet-7);\n        }\n\n        .PopoverContent[data-state='open'][data-side='top'] {\n            animation-name: slideDownAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='right'] {\n            animation-name: slideLeftAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='bottom'] {\n            animation-name: slideUpAndFade;\n        }\n\n        .PopoverContent[data-state='open'][data-side='left'] {\n            animation-name: slideRightAndFade;\n        }\n\n        .PopoverArrow {\n            fill: white;\n        }\n\n        .PopoverClose {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 25px;\n            width: 25px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            position: absolute;\n            top: 5px;\n            right: 5px;\n        }\n\n        .PopoverClose:hover {\n            background-color: var(--violet-4);\n        }\n\n        .PopoverClose:focus {\n            box-shadow: 0 0 0 2px var(--violet-7);\n        }\n\n        .IconButton {\n            font-family: inherit;\n            border-radius: 100%;\n            height: 35px;\n            width: 35px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--violet-11);\n            background-color: white;\n            box-shadow: 0 2px 10px var(--black-a7);\n        }\n\n        .IconButton:hover {\n            background-color: var(--violet-3);\n        }\n\n        .IconButton:focus {\n            box-shadow: 0 0 0 2px black;\n        }\n\n        .Fieldset {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n        }\n\n        .Label {\n            font-size: 13px;\n            color: var(--violet-11);\n            width: 75px;\n        }\n\n        .Input {\n            width: 100%;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 1;\n            border-radius: 4px;\n            padding: 0 10px;\n            font-size: 13px;\n            line-height: 1;\n            color: var(--violet-11);\n            box-shadow: 0 0 0 1px var(--violet-7);\n            height: 25px;\n        }\n\n        .Input:focus {\n            box-shadow: 0 0 0 2px var(--violet-8);\n        }\n\n        .Text {\n            margin: 0;\n            color: var(--mauve-12);\n            font-size: 15px;\n            line-height: 19px;\n            font-weight: 500;\n        }\n\n        @keyframes slideUpAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideRightAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        @keyframes slideDownAndFade {\n            from {\n                opacity: 0;\n                transform: translateY(-2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes slideLeftAndFade {\n            from {\n                opacity: 0;\n                transform: translateX(2px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n\n        /* =============== Params layout =============== */\n\n        .ParamsContainer {\n            display: flex;\n            column-gap: 8px;\n            color: var(--white-a12);\n            margin-bottom: 32px;\n        }\n    \n",
             "extends": []
         },
         {
@@ -16665,7 +16896,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "{\n    offsets: {\n        side: 10,\n        align: 10\n    }\n} as const"
+                "defaultValue": "{\n    offsets: {\n        side: 10,\n        align: 0\n    }\n} as const"
             },
             {
                 "name": "defaultTooltipConfig",
@@ -16871,7 +17102,7 @@
                 "name": "nextId",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "popover/src/popover-trigger.directive.ts",
+                "file": "popover/src/popover-root.directive.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "number",
@@ -20906,7 +21137,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "{\n    offsets: {\n        side: 10,\n        align: 10\n    }\n} as const"
+                    "defaultValue": "{\n    offsets: {\n        side: 10,\n        align: 0\n    }\n} as const"
                 },
                 {
                     "name": "POPOVER_POSITIONS",
@@ -21187,12 +21418,12 @@
                     "description": "<p>Counter used to set a unique id and name for a selectable item</p>\n"
                 }
             ],
-            "popover/src/popover-trigger.directive.ts": [
+            "popover/src/popover-root.directive.ts": [
                 {
                     "name": "nextId",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "popover/src/popover-trigger.directive.ts",
+                    "file": "popover/src/popover-root.directive.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "number",