@shoper/phoenix_design_system 0.7.2 → 0.8.1

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

@@ -12,6 +12,7 @@ var dropdown_constants = require('./dropdown_constants.js');
 var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var global_constants = require('../../global_constants.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 
 exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -21,23 +22,81 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
+        this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = () => {
-            this.opened = true;
+        this.show = async () => {
             const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
+            return new Promise((resolve) => {
+                var _a;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(dropdown_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
+                window.requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                    }, 0);
+                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+                    setTimeout(() => {
+                        var _a;
+                        this.opened = true;
+                        this.dispatchEvent(showDropdownEvent);
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
         };
-        this.hide = () => {
-            this.opened = false;
+        this.hide = async () => {
             const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
-            this.dispatchEvent(hideDropdownEvent);
+            return 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_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                        this.opened = false;
+                        this.dispatchEvent(hideDropdownEvent);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._hoverToggle = async (ev) => {
+            if (!ev.target) {
+                await this.hide();
+                return;
+            }
+            const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
+                (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
+                ev.target === this ||
+                ev.target === this.$dropdownContent;
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                await this.hide();
+                return;
+            }
+        };
+        this._isDescendantOfParent = function (parent, child) {
+            let parentNode = child.parentNode;
+            while (parentNode) {
+                if (parentNode === parent)
+                    return true;
+                parentNode = parentNode.parentNode;
+            }
+            return false;
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -48,6 +107,7 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
+        this._appendDropdownBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -67,15 +127,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             });
         this._setupListeners();
     }
-    _setupListeners() {
-        var _a, _b, _c;
-        this.addEventListener(click_outside_controller_messages.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);
-        }
-    }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -84,6 +135,21 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
+    _appendDropdownBackdrop() {
+        const $dropdownBackdrop = document.querySelector(dropdown_constants.DROPDOWN_BACKDROP_NAME);
+        if (!$dropdownBackdrop) {
+            const $backdrop = document.createElement(dropdown_constants.DROPDOWN_BACKDROP_NAME);
+            document.body.appendChild($backdrop);
+        }
+    }
+    _setupListeners() {
+        var _a;
+        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
+        if (this.toggleOnHover && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
+            document.addEventListener('mouseover', this._hoverToggle);
+        }
+    }
     _handleClickOutside() {
         var _a;
         if (!this.opened)
@@ -92,12 +158,11 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
     }
     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 && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
+            document.removeEventListener('mouseover', this._hoverToggle);
         }
         this.opened = false;
     }
@@ -127,6 +192,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "transition", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js

@@ -6,6 +6,7 @@ const DROPDOWN_NAME = 'dropdown';
 const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
 const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
 const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
+const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
 const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
 const DROPDOWN_EVENT = 'dropdown';
 const DROPDOWN_EVENTS = {
@@ -14,15 +15,24 @@ 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`;
 
 exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
+exports.DROPDOWN_BACKDROP_NAME = DROPDOWN_BACKDROP_NAME;
 exports.DROPDOWN_CLASS = DROPDOWN_CLASS;
 exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
 exports.DROPDOWN_CONTENT_CLASS = DROPDOWN_CONTENT_CLASS;
+exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
 exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
+exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
+exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
 exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
 exports.DROPDOWN_NAME = DROPDOWN_NAME;
 exports.DROPDOWN_OPENED_ATTRIBUTE_NAME = DROPDOWN_OPENED_ATTRIBUTE_NAME;
+exports.DROPDOWN_TOGGLER_CLASS = DROPDOWN_TOGGLER_CLASS;
 exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
 //# sourceMappingURL=dropdown_constants.js.map

package/build/cjs/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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -23,6 +23,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
             this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CLASS} ${this.className}`;
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/global_constants.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MOBILE_SCREEN_WIDTH = 575;
+
+exports.MOBILE_SCREEN_WIDTH = MOBILE_SCREEN_WIDTH;
+//# sourceMappingURL=global_constants.js.map

package/build/cjs/packages/phoenix/src/global_constants.js.map

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

package/build/cjs/packages/star_core/build/esm/external/tslib/tslib.es6.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+exports.__classPrivateFieldGet = __classPrivateFieldGet;
+exports.__classPrivateFieldSet = __classPrivateFieldSet;
+//# sourceMappingURL=tslib.es6.js.map

package/build/cjs/packages/star_core/build/esm/external/tslib/tslib.es6.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container.js

@@ -2,65 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../../../../../../external/tslib/tslib.es6.js');
-require('@starCoreRoot/classes/values_container/values_container_types');
-var values_container_error = require('@starCoreRoot/classes/values_container/values_container_error');
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var values_container_error = require('./values_container_error.js');
 
-var _ValuesContainer_valuesContainer, _ValuesContainer_settings;
-class ValuesContainer {
-    constructor(settings = {}) {
-        _ValuesContainer_valuesContainer.set(this, {});
-        _ValuesContainer_settings.set(this, {
-            silentMode: true,
-            allowOverwrite: false
-        });
-        tslib_es6.__classPrivateFieldSet(this, _ValuesContainer_settings, {
-            ...tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f"),
-            ...settings
-        }, "f");
-    }
-    add(key, value) {
-        if (this.has(key) && !tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f").allowOverwrite)
-            this._handleError(new values_container_error.ValuesContainerError(`value under key [${key}] already exists`));
-        tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
-    }
-    update(key, value) {
-        if (!this.has(key))
-            this._handleError(new values_container_error.ValuesContainerError(`value under key [${key}] doesn't exist`));
-        tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
-    }
-    remove(key) {
-        if (!this.has(key))
-            this._handleError(new values_container_error.ValuesContainerError(`${key} doesn't exist, cannot be removed`));
-        delete tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
-    }
-    has(key) {
-        return this.get(key) !== undefined;
-    }
-    get(key) {
-        return tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
-    }
-    keys() {
-        return Object.keys(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    values() {
-        return Object.values(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    entries() {
-        return Object.entries(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    clear() {
-        tslib_es6.__classPrivateFieldSet(this, _ValuesContainer_valuesContainer, {}, "f");
-    }
-    size() {
-        return this.keys().length;
-    }
-    _handleError(error) {
-        if (tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f").silentMode)
-            return;
-        throw error;
-    }
-}
+var _ValuesContainer_valuesContainer, _ValuesContainer_settings;
+class ValuesContainer {
+    constructor(settings = {}) {
+        _ValuesContainer_valuesContainer.set(this, {});
+        _ValuesContainer_settings.set(this, {
+            silentMode: true,
+            allowOverwrite: false
+        });
+        tslib_es6.__classPrivateFieldSet(this, _ValuesContainer_settings, {
+            ...tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f"),
+            ...settings
+        }, "f");
+    }
+    add(key, value) {
+        if (this.has(key) && !tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f").allowOverwrite)
+            this._handleError(new values_container_error.ValuesContainerError(`value under key [${key}] already exists`));
+        tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
+    }
+    update(key, value) {
+        if (!this.has(key))
+            this._handleError(new values_container_error.ValuesContainerError(`value under key [${key}] doesn't exist`));
+        tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
+    }
+    remove(key) {
+        if (!this.has(key))
+            this._handleError(new values_container_error.ValuesContainerError(`${key} doesn't exist, cannot be removed`));
+        delete tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
+    }
+    has(key) {
+        return this.get(key) !== undefined;
+    }
+    get(key) {
+        return tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
+    }
+    keys() {
+        return Object.keys(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    values() {
+        return Object.values(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    entries() {
+        return Object.entries(tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    clear() {
+        tslib_es6.__classPrivateFieldSet(this, _ValuesContainer_valuesContainer, {}, "f");
+    }
+    size() {
+        return this.keys().length;
+    }
+    _handleError(error) {
+        if (tslib_es6.__classPrivateFieldGet(this, _ValuesContainer_settings, "f").silentMode)
+            return;
+        throw error;
+    }
+}
 _ValuesContainer_valuesContainer = new WeakMap(), _ValuesContainer_settings = new WeakMap();
 
 exports.ValuesContainer = ValuesContainer;

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container_error.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var app_error = require('../../core/errors/app_error.js');
+
+class ValuesContainerError extends app_error.AppError {
+}
+
+exports.ValuesContainerError = ValuesContainerError;
+//# sourceMappingURL=values_container_error.js.map

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container_error.js.map

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

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/core/errors/app_error.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+
+var _AppError_message, _AppError_options;
+class AppError extends Error {
+    constructor(message, options = {}) {
+        super(message);
+        _AppError_message.set(this, void 0);
+        _AppError_options.set(this, void 0);
+        tslib_es6.__classPrivateFieldSet(this, _AppError_message, message, "f");
+        tslib_es6.__classPrivateFieldSet(this, _AppError_options, options, "f");
+    }
+}
+_AppError_message = new WeakMap(), _AppError_options = new WeakMap();
+
+exports.AppError = AppError;
+//# sourceMappingURL=app_error.js.map

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/core/errors/app_error.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;"}

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

@@ -6,18 +6,22 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     direction: "bottom-center";
     toggleOnHover: boolean;
     name: string;
+    transition: string;
     portalTarget: string;
     $dropdownToggler: HTMLElement | null;
     $dropdownContent: HTMLElement | null;
     private _positionController;
     private _clickOutsideController;
     connectedCallback(): void;
-    private _setupListeners;
     private _appendDropdownPortal;
+    private _appendDropdownBackdrop;
+    private _setupListeners;
     private _handleClickOutside;
     toggle: () => void;
-    show: () => void;
-    hide: () => void;
+    show: () => Promise<void>;
+    hide: () => Promise<void>;
+    private _hoverToggle;
+    private _isDescendantOfParent;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;

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

@@ -4,10 +4,11 @@ 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 { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_BACKDROP_NAME } from './dropdown_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';
+import { MOBILE_SCREEN_WIDTH } from '../../global_constants.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 
 let HDropdown = class HDropdown extends PhoenixLightLitElement {
@@ -17,23 +18,81 @@ 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 () => {
             const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
+            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`);
+                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.opened = true;
+                        this.dispatchEvent(showDropdownEvent);
+                        (_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.hide = () => {
-            this.opened = false;
+        this.hide = async () => {
             const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
-            this.dispatchEvent(hideDropdownEvent);
+            return 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.dispatchEvent(hideDropdownEvent);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._hoverToggle = async (ev) => {
+            if (!ev.target) {
+                await this.hide();
+                return;
+            }
+            const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
+                (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
+                ev.target === this ||
+                ev.target === this.$dropdownContent;
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                await this.hide();
+                return;
+            }
+        };
+        this._isDescendantOfParent = function (parent, child) {
+            let parentNode = child.parentNode;
+            while (parentNode) {
+                if (parentNode === parent)
+                    return true;
+                parentNode = parentNode.parentNode;
+            }
+            return false;
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -44,6 +103,7 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
+        this._appendDropdownBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -63,15 +123,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             });
         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);
-        }
-    }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -80,6 +131,21 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
+    _appendDropdownBackdrop() {
+        const $dropdownBackdrop = document.querySelector(DROPDOWN_BACKDROP_NAME);
+        if (!$dropdownBackdrop) {
+            const $backdrop = document.createElement(DROPDOWN_BACKDROP_NAME);
+            document.body.appendChild($backdrop);
+        }
+    }
+    _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 && window.innerWidth > MOBILE_SCREEN_WIDTH) {
+            document.addEventListener('mouseover', this._hoverToggle);
+        }
+    }
     _handleClickOutside() {
         var _a;
         if (!this.opened)
@@ -88,12 +154,11 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
     }
     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 && window.innerWidth > MOBILE_SCREEN_WIDTH) {
+            document.removeEventListener('mouseover', this._hoverToggle);
         }
         this.opened = false;
     }
@@ -123,6 +188,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;"}

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

@@ -0,0 +1,11 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HDropdownBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _show;
+    private _hide;
+    private _closeDropdown;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,54 @@
+import { __decorate, __metadata } from "tslib";
+import { DROPDOWN_BACKDROP_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS } from '@phoenixRoot/components/dropdown/dropdown_constants';
+import { html } from 'lit';
+import './dropdown_types';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { property } from 'lit/decorators';
+let HDropdownBackdrop = class HDropdownBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this._show = () => {
+            this.visible = true;
+        };
+        this._hide = () => {
+            this.visible = false;
+        };
+        this._closeDropdown = () => {
+            const dropdowns = document.querySelectorAll(DROPDOWN_CONTAINER_NAME);
+            dropdowns.forEach((dropdown) => {
+                const opened = dropdown.getAttribute('opened');
+                if (opened !== null)
+                    dropdown.hide();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(DROPDOWN_EVENTS.show, this._show);
+        document.addEventListener(DROPDOWN_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(DROPDOWN_EVENTS.show, this._show);
+        document.removeEventListener(DROPDOWN_EVENTS.hide, this._hide);
+    }
+    render() {
+        return html ` <div
+            aria-hidden="true"
+            ?hidden="${!this.visible}"
+            @click="${this._closeDropdown}"
+            class="${DROPDOWN_BACKDROP_CLASS}"
+        ></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HDropdownBackdrop.prototype, "visible", void 0);
+HDropdownBackdrop = __decorate([
+    phoenixCustomElement('h-dropdown-backdrop')
+], HDropdownBackdrop);
+export { HDropdownBackdrop };
+//# sourceMappingURL=dropdown_backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_backdrop.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_backdrop.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AACxI,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAA0B,kBAAkB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QAEI,YAAO,GAAG,KAAK,CAAC;QAgBR,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;YAErE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC/C,IAAI,MAAM,KAAK,IAAI;oBAAG,QAAiC,CAAC,IAAI,EAAE,CAAC;YACnE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IAUN,CAAC;IAvCU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACnE,CAAC;IAmBS,MAAM;QACZ,OAAO,IAAI,CAAA;;uBAEI,CAAC,IAAI,CAAC,OAAO;sBACd,IAAI,CAAC,cAAc;qBACpB,uBAAuB;gBAC5B,CAAC;IACb,CAAC;CACJ,CAAA;AAzCG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;kDACZ;AAFP,iBAAiB;IAD7B,oBAAoB,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CA2C7B;SA3CY,iBAAiB"}

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

@@ -2,6 +2,7 @@ export declare const DROPDOWN_NAME = "dropdown";
 export declare const DROPDOWN_CONTAINER_NAME: string;
 export declare const DROPDOWN_TOGGLER_NAME: string;
 export declare const DROPDOWN_CONTENT_NAME: string;
+export declare const DROPDOWN_BACKDROP_NAME: string;
 export declare const DEFAULT_DROPDOWN_PORTAL_NAME = "dropdown-portal";
 export declare const DROPDOWN_EVENTS: {
     readonly show: "dropdown.show";
@@ -10,3 +11,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

@@ -2,6 +2,7 @@ const DROPDOWN_NAME = 'dropdown';
 const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
 const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
 const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
+const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
 const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
 const DROPDOWN_EVENT = 'dropdown';
 const DROPDOWN_EVENTS = {
@@ -10,7 +11,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_BACKDROP_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;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/global_constants.d.ts

@@ -0,0 +1 @@
+export declare const MOBILE_SCREEN_WIDTH = 575;

package/build/esm/packages/phoenix/src/global_constants.js

@@ -0,0 +1,4 @@
+const MOBILE_SCREEN_WIDTH = 575;
+
+export { MOBILE_SCREEN_WIDTH };
+//# sourceMappingURL=global_constants.js.map

package/build/esm/packages/phoenix/src/global_constants.js.map

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

package/build/esm/packages/star_core/build/esm/external/tslib/tslib.es6.js

@@ -0,0 +1,30 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+export { __classPrivateFieldGet, __classPrivateFieldSet };
+//# sourceMappingURL=tslib.es6.js.map

package/build/esm/packages/star_core/build/esm/external/tslib/tslib.es6.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container.js

@@ -1,62 +1,61 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../../../../../external/tslib/tslib.es6.js';
-import '@starCoreRoot/classes/values_container/values_container_types';
-import { ValuesContainerError } from '@starCoreRoot/classes/values_container/values_container_error';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import { ValuesContainerError } from './values_container_error.js';
 
-var _ValuesContainer_valuesContainer, _ValuesContainer_settings;
-class ValuesContainer {
-    constructor(settings = {}) {
-        _ValuesContainer_valuesContainer.set(this, {});
-        _ValuesContainer_settings.set(this, {
-            silentMode: true,
-            allowOverwrite: false
-        });
-        __classPrivateFieldSet(this, _ValuesContainer_settings, {
-            ...__classPrivateFieldGet(this, _ValuesContainer_settings, "f"),
-            ...settings
-        }, "f");
-    }
-    add(key, value) {
-        if (this.has(key) && !__classPrivateFieldGet(this, _ValuesContainer_settings, "f").allowOverwrite)
-            this._handleError(new ValuesContainerError(`value under key [${key}] already exists`));
-        __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
-    }
-    update(key, value) {
-        if (!this.has(key))
-            this._handleError(new ValuesContainerError(`value under key [${key}] doesn't exist`));
-        __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
-    }
-    remove(key) {
-        if (!this.has(key))
-            this._handleError(new ValuesContainerError(`${key} doesn't exist, cannot be removed`));
-        delete __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
-    }
-    has(key) {
-        return this.get(key) !== undefined;
-    }
-    get(key) {
-        return __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
-    }
-    keys() {
-        return Object.keys(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    values() {
-        return Object.values(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    entries() {
-        return Object.entries(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
-    }
-    clear() {
-        __classPrivateFieldSet(this, _ValuesContainer_valuesContainer, {}, "f");
-    }
-    size() {
-        return this.keys().length;
-    }
-    _handleError(error) {
-        if (__classPrivateFieldGet(this, _ValuesContainer_settings, "f").silentMode)
-            return;
-        throw error;
-    }
-}
+var _ValuesContainer_valuesContainer, _ValuesContainer_settings;
+class ValuesContainer {
+    constructor(settings = {}) {
+        _ValuesContainer_valuesContainer.set(this, {});
+        _ValuesContainer_settings.set(this, {
+            silentMode: true,
+            allowOverwrite: false
+        });
+        __classPrivateFieldSet(this, _ValuesContainer_settings, {
+            ...__classPrivateFieldGet(this, _ValuesContainer_settings, "f"),
+            ...settings
+        }, "f");
+    }
+    add(key, value) {
+        if (this.has(key) && !__classPrivateFieldGet(this, _ValuesContainer_settings, "f").allowOverwrite)
+            this._handleError(new ValuesContainerError(`value under key [${key}] already exists`));
+        __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
+    }
+    update(key, value) {
+        if (!this.has(key))
+            this._handleError(new ValuesContainerError(`value under key [${key}] doesn't exist`));
+        __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key] = value;
+    }
+    remove(key) {
+        if (!this.has(key))
+            this._handleError(new ValuesContainerError(`${key} doesn't exist, cannot be removed`));
+        delete __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
+    }
+    has(key) {
+        return this.get(key) !== undefined;
+    }
+    get(key) {
+        return __classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f")[key];
+    }
+    keys() {
+        return Object.keys(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    values() {
+        return Object.values(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    entries() {
+        return Object.entries(__classPrivateFieldGet(this, _ValuesContainer_valuesContainer, "f"));
+    }
+    clear() {
+        __classPrivateFieldSet(this, _ValuesContainer_valuesContainer, {}, "f");
+    }
+    size() {
+        return this.keys().length;
+    }
+    _handleError(error) {
+        if (__classPrivateFieldGet(this, _ValuesContainer_settings, "f").silentMode)
+            return;
+        throw error;
+    }
+}
 _ValuesContainer_valuesContainer = new WeakMap(), _ValuesContainer_settings = new WeakMap();
 
 export { ValuesContainer };

package/build/esm/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,wDAA4D;AAC3H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/star_core/build/esm/packages/star_core/src/classes/values_container/values_container_error.js

@@ -0,0 +1,7 @@
+import { AppError } from '../../core/errors/app_error.js';
+
+class ValuesContainerError extends AppError {
+}
+
+export { ValuesContainerError };
+//# sourceMappingURL=values_container_error.js.map

package/build/esm/packages/star_core/build/esm/packages/star_core/src/classes/values_container/values_container_error.js.map

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

package/build/esm/packages/star_core/build/esm/packages/star_core/src/core/errors/app_error.js

@@ -0,0 +1,16 @@
+import { __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
+
+var _AppError_message, _AppError_options;
+class AppError extends Error {
+    constructor(message, options = {}) {
+        super(message);
+        _AppError_message.set(this, void 0);
+        _AppError_options.set(this, void 0);
+        __classPrivateFieldSet(this, _AppError_message, message, "f");
+        __classPrivateFieldSet(this, _AppError_options, options, "f");
+    }
+}
+_AppError_message = new WeakMap(), _AppError_options = new WeakMap();
+
+export { AppError };
+//# sourceMappingURL=app_error.js.map

package/build/esm/packages/star_core/build/esm/packages/star_core/src/core/errors/app_error.js.map

@@ -0,0 +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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",