@shoper/phoenix_design_system 0.9.1 → 0.10.1-1

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -4,7 +4,9 @@ import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
+import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTAINER_NAME } from './dropdown_constants.js';
+import { BREAKPOINTS } from '../../global_constants.js';
 import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
@@ -17,27 +19,92 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
         this.direction = DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
+        this.transition = 'direction';
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = () => {
-            this.opened = true;
+        this.show = async () => {
+            return new Promise((resolve) => {
+                var _a;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
+                this.opened = true;
+                window.requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                    }, 0);
+                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+                    setTimeout(() => {
+                        var _a;
+                        this._dispatchShowDropdownEvent();
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._dispatchShowDropdownEvent = () => {
             const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            const showBackdropEvent = new Event(BACKDROP_EVENTS.show, {
+                bubbles: true
+            });
+            document.dispatchEvent(showBackdropEvent);
         };
-        this.hide = () => {
-            this.opened = false;
+        this.hide = async () => new Promise((resolve) => {
+            const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    this.opened = false;
+                    this._dispatchHideDropdownEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+        this._dispatchHideDropdownEvent = () => {
             const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
             this.dispatchEvent(hideDropdownEvent);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            const hideBackdropEvent = new Event(BACKDROP_EVENTS.hide, {
+                bubbles: true
+            });
+            document.dispatchEvent(hideBackdropEvent);
+        };
+        this._hoverToggle = async (ev) => {
+            if (window.innerWidth < BREAKPOINTS.xs)
+                return;
+            if (!ev.target) {
+                await this.hide();
+                return;
+            }
+            const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                await this.hide();
+                return;
+            }
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
-                this.opened && this._positionController.position();
+                this.opened && window.innerWidth < BREAKPOINTS.xs
+                    ? this._positionController.disableRelativePositioning()
+                    : this._positionController.position();
             });
         };
     }
@@ -48,12 +115,17 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
             this.$dropdownToggler = this.querySelector(DROPDOWN_TOGGLER_NAME);
+        const $nestedDropdown = this.$dropdownContent.querySelector(DROPDOWN_CONTAINER_NAME);
+        if ($nestedDropdown && !this.$nestedDropdownContentElements)
+            this.$nestedDropdownContentElements = [...$nestedDropdown.querySelectorAll(DROPDOWN_CONTENT_NAME)];
         if (!this._positionController)
             this._positionController = new RelativePositionController({
                 host: this,
                 direction: this.direction,
                 relativeElement: this.$dropdownToggler,
-                elementToPosition: this.$dropdownContent
+                elementToPosition: this.$dropdownContent,
+                shouldDisablePositioning: () => window.innerWidth < BREAKPOINTS.xs,
+                portalElementsNames: [DROPDOWN_CONTENT_NAME]
             });
         if (!this._clickOutsideController)
             this._clickOutsideController = new ClickOutsideController({
@@ -61,16 +133,10 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
                 container: this,
                 name: this.name
             });
-        this._setupListeners();
-    }
-    _setupListeners() {
-        var _a, _b, _c;
-        this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
+        if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
+            this.$hoverableDropdownContentElements = [...this.querySelectorAll(DROPDOWN_CONTENT_NAME)];
         }
+        this._setupListeners();
     }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
@@ -80,22 +146,43 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    _handleClickOutside() {
+    _setupListeners() {
         var _a;
+        this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
+        if (this.toggleOnHover)
+            document.addEventListener('mouseover', this._hoverToggle);
+    }
+    _handleClickOutside(ev) {
+        var _a, _b, _c;
         if (!this.opened)
             return;
-        this.hide();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+        const target = ev.detail.target;
+        const clickedWithinNestedDropdown = (_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((element) => element.contains(target));
+        const shouldHideElements = !((_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
+        if (shouldHideElements) {
+            this.hide();
+            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
+        }
+    }
+    _isHoveredWithinDropdown(element) {
+        const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
+        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        const isDescendantOfContent = this.$dropdownContent &&
+            $closestDropdownContent !== null &&
+            !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
+        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a;
         super.disconnectedCallback();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
+        if (this.toggleOnHover)
+            document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.opened) {
+            this.opened = false;
+            this._dispatchHideDropdownEvent();
         }
-        this.opened = false;
     }
     render() {
         super.render();
@@ -123,6 +210,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "transition", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts

@@ -10,3 +10,8 @@ export declare const DROPDOWN_EVENTS: {
 export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
 export declare const DROPDOWN_CLASS = "dropdown";
 export declare const DROPDOWN_CONTENT_CLASS: string;
+export declare const DROPDOWN_TOGGLER_CLASS: string;
+export declare const DROPDOWN_BACKDROP_CLASS: string;
+export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
+export declare const DROPDOWN_CONTENT_SHOW: string;
+export declare const DROPDOWN_CONTENT_HIDE: string;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js

@@ -10,7 +10,11 @@ const DROPDOWN_EVENTS = {
 };
 const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
 const DROPDOWN_CLASS = 'dropdown';
-const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
+const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
+const DROPDOWN_TOGGLER_CLASS = `${DROPDOWN_CLASS}__toggler`;
+const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
+const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
+const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
 
-export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_NAME, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_NAME };
+export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
 //# sourceMappingURL=dropdown_constants.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts

@@ -1,6 +1,7 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HDropdownContent extends PhoenixLightLitElement {
+    name: string;
     constructor();
     protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
+import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { DROPDOWN_CONTENT_CLASS } from './dropdown_constants.js';
@@ -7,6 +8,7 @@ import { DROPDOWN_CONTENT_CLASS } from './dropdown_constants.js';
 let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
     constructor() {
         super();
+        this.name = '';
         this.setAttribute('role', 'menu');
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
         this.className = `${DROPDOWN_CONTENT_CLASS} ${this.className}`;
@@ -19,6 +21,10 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
         return html ` <div role="dialog">${this.getSlot('content')}</div> `;
     }
 };
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HDropdownContent.prototype, "name", void 0);
 HDropdownContent = __decorate([
     phoenixCustomElement('h-dropdown-content'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BtnController } from '../../controllers/btn_controller.js';
-import { DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { DROPDOWN_TOGGLER_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -19,6 +19,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        this.className = `${DROPDOWN_TOGGLER_CLASS} ${this.className}`;
     }
     connectedCallback() {
         super.connectedCallback();

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult, PropertyValues } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HModal extends PhoenixLightLitElement {
     opened: boolean;
@@ -13,7 +13,6 @@ export declare class HModal extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openModals;
     private static _appendModalsPortal;
-    private static _appendModalsBackdrop;
     static isSomeModalOpen(): boolean;
     constructor();
     connectedCallback(): void;

package/build/esm/packages/phoenix/src/components/modal/modal.js

@@ -6,6 +6,7 @@ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_eleme
 import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 import { createRef as e, ref as n } from '../../../../../external/lit-html/directives/ref.js';
+import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
 
 var HModal_1;
 let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
@@ -89,26 +90,21 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    static _appendModalsBackdrop() {
-        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
-        if (!$modalsBackdrop) {
-            const $backdrop = document.createElement('h-modal-backdrop');
-            document.body.appendChild($backdrop);
-        }
-    }
     static isSomeModalOpen() {
         return HModal_1.openModals.some((modal) => modal.opened);
     }
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        HModal_1._appendModalsBackdrop();
         document.addEventListener('keydown', this._keepFocusWithinModal);
         document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this[MODAL_OPENED_PROP] = false;
+        if (this[MODAL_OPENED_PROP]) {
+            this[MODAL_OPENED_PROP] = false;
+            this._dispatchModalClosedEvent();
+        }
         document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
     }
@@ -135,7 +131,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 setTimeout(() => {
                     var _a;
                     this[MODAL_OPENED_PROP] = true;
-                    this._dispatchModalOpenedEvent();
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
                     resolve();
                 }, transitionDuration);
@@ -147,6 +142,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             bubbles: true
         });
         this.dispatchEvent(openModalEvent);
+        const openBackdropEvent = new CustomEvent(BACKDROP_EVENTS.show, {
+            bubbles: true
+        });
+        document.dispatchEvent(openBackdropEvent);
     }
     async close() {
         return new Promise((resolve) => {
@@ -170,6 +169,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             bubbles: true
         });
         this.dispatchEvent(closeModalEvent);
+        const closeBackdropEvent = new CustomEvent(BACKDROP_EVENTS.hide, {
+            bubbles: true
+        });
+        document.dispatchEvent(closeBackdropEvent);
     }
     render() {
         return html `

package/build/esm/packages/phoenix/src/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js

@@ -15,8 +15,10 @@ class ClickOutsideController {
                     name: this._name
                 }
             });
-            const { target } = ev;
-            if (target.contains(__classPrivateFieldGet(this, _ClickOutsideController_container, "f"))) {
+            const target = ev.target;
+            const isContainerWithinTarget = target.contains(__classPrivateFieldGet(this, _ClickOutsideController_container, "f")) && target !== __classPrivateFieldGet(this, _ClickOutsideController_container, "f");
+            const isTargetWithinContainer = __classPrivateFieldGet(this, _ClickOutsideController_container, "f").contains(target);
+            if (isContainerWithinTarget || !isTargetWithinContainer) {
                 __classPrivateFieldGet(this, _ClickOutsideController_host, "f").dispatchEvent(clickedOutsideEvent);
             }
         };

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.d.ts

@@ -4,3 +4,7 @@ export declare type TClickOutsideControllerProps = {
     container: HTMLElement;
     name?: string;
 };
+export declare type TClickOutsideEvent = {
+    target: EventTarget | null;
+    name?: string;
+};

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js

@@ -25,11 +25,11 @@ class PositionCalculator {
         };
     }
     _canFitTopSide() {
-        const elementTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         return elementTop > __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementTop > 0;
     }
     _canFitBottomSide() {
-        const elementBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         return elementBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementBottom < window.innerHeight;
     }
     _calculateSidePosition(side) {

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.d.ts

@@ -1,7 +1,7 @@
 import { IRelativePositionController, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
 export declare class RelativePositionController implements IRelativePositionController {
     #private;
-    constructor({ host, container, direction, relativeElement, elementToPosition }: TRelativePositionControllerConstructorOptions);
+    constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames }: TRelativePositionControllerConstructorOptions);
     hostConnected(): void;
     hostDisconnected(): void;
     position(): void;
@@ -9,4 +9,5 @@ export declare class RelativePositionController implements IRelativePositionCont
     private _findContainer;
     private _findParentBasedOnStyle;
     private _setElementPosition;
+    disableRelativePositioning(): void;
 }

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js

@@ -1,12 +1,12 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS } from './relative_position_controller_constants.js';
 import { PositionCalculator } from './relative_position_calculator.js';
 import lodash from '../../../../../external/lodash/lodash.js';
 
-var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
+var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_shouldDisablePositioning, _RelativePositionController_portalElementsNames, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames = [] }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
@@ -14,30 +14,42 @@ class RelativePositionController {
         _RelativePositionController_nearestScrollableElement.set(this, void 0);
         _RelativePositionController_relativeElement.set(this, void 0);
         _RelativePositionController_elementToPosition.set(this, void 0);
+        _RelativePositionController_shouldDisablePositioning.set(this, void 0);
+        _RelativePositionController_portalElementsNames.set(this, void 0);
         _RelativePositionController_throttledReposition.set(this, lodash.throttle(() => {
-            this.position();
+            if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, DEFAULT_THROTTLE_WAIT_TIME));
         _RelativePositionController_throttledRepositionForScroll.set(this, lodash.throttle(() => {
-            this.position();
+            if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
         __classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
         __classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
         __classPrivateFieldSet(this, _RelativePositionController_direction, direction, "f");
         __classPrivateFieldSet(this, _RelativePositionController_relativeElement, relativeElement, "f");
         __classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
         __classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
     }
     hostConnected() {
-        __classPrivateFieldGet(this, _RelativePositionController_host, "f").addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (!__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
             return;
         if (!__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f")) {
             __classPrivateFieldSet(this, _RelativePositionController_nearestScrollableElement, this._findNearestScrollableElement(__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f")), "f");
         }
+        window.addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").addEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
     hostDisconnected() {
-        __classPrivateFieldGet(this, _RelativePositionController_host, "f").removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
+        window.removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
             __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
@@ -58,7 +70,8 @@ class RelativePositionController {
     }
     _findNearestScrollableElement(element) {
         const overflowArray = ['overflow', 'overflowY', 'overflowX'];
-        return this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(OVERFLOW_SCROLL) || overflowArray.includes(OVERFLOW_AUTO));
+        const scrollableElement = this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(OVERFLOW_SCROLL) || overflowArray.includes(OVERFLOW_AUTO));
+        return scrollableElement !== document.body ? scrollableElement : window;
     }
     _findContainer(element) {
         return this._findParentBasedOnStyle(element, ['position'], ([position]) => NON_STATIC_POSITIONS.includes(position));
@@ -70,7 +83,7 @@ class RelativePositionController {
         const parentStyles = styles.reduce((styles, currentStyle) => {
             return [...styles, window.getComputedStyle(parent)[currentStyle]];
         }, []);
-        if (callback(parentStyles) || parent === document.body)
+        if ((callback(parentStyles) || parent === document.body) && !__classPrivateFieldGet(this, _RelativePositionController_portalElementsNames, "f").includes(parent.localName))
             return parent;
         return this._findParentBasedOnStyle(parent, styles, callback);
     }
@@ -86,8 +99,15 @@ class RelativePositionController {
             elementStyle.left = '0';
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
     }
+    disableRelativePositioning() {
+        if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
+            return;
+        const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
+        elementStyle.position = '';
+        elementStyle.transform = '';
+    }
 }
-_RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
+_RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_shouldDisablePositioning = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
 
 export { RelativePositionController };
 //# sourceMappingURL=relative_position_controller.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.d.ts

@@ -10,6 +10,8 @@ export declare type TRelativePositionControllerConstructorOptions = {
     container?: HTMLElement;
     relativeElement: HTMLElement;
     elementToPosition: HTMLElement;
+    shouldDisablePositioning?: () => boolean;
+    portalElementsNames?: string[];
 };
 export interface IRelativePositionController extends ReactiveController {
     position(): void;

package/build/esm/packages/phoenix/src/controllers/transition_controller/transition_controller.d.ts

@@ -0,0 +1,11 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class TransitionController implements ReactiveController {
+    private host;
+    private _transitionDuration;
+    private _transitionName;
+    constructor(host: ReactiveControllerHost & HTMLElement, transitionName: string);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    show(callback?: () => void): void;
+    hide(callback?: () => void): void;
+}