@shoper/phoenix_design_system 0.5.0 → 0.6.0

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

@@ -6,6 +6,7 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('../portal/portal_constants.js');
 var modal_constants = require('./modal_constants.js');
 var ref = require('../../../../../external/lit-html/directives/ref.js');
@@ -58,14 +59,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 }
             }
         };
-        this._handleCloseFromCloseComponent = (ev) => {
+        this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
             if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
-                this.close();
+                await this.close();
             }
         };
-        this._bindCloseOnEsc = (ev) => {
+        this._bindCloseOnEsc = async (ev) => {
             ev.stopImmediatePropagation();
             const $target = ev.target;
             const closeConditions = [
@@ -78,7 +79,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             const shouldCloseModal = closeConditions.every((condition) => condition);
             if (shouldCloseModal) {
                 const [modalToClose] = HModal_1.openModals.slice(-1);
-                modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
+                await (modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close());
             }
         };
         this.hidden = true;
@@ -128,24 +129,21 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     async open() {
         return new Promise((resolve) => {
             var _a;
-            if (!this[modal_constants.MODAL_OPENED_PROP]) {
-                this[modal_constants.MODAL_OPENED_PROP] = true;
-                this._dispatchModalOpenedEvent();
-                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
-                window.requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
-                    }, 0);
-                    const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
-                    setTimeout(() => {
-                        var _a;
-                        (_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);
-                });
-            }
-            resolve();
+            (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
+                }, 0);
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                setTimeout(() => {
+                    var _a;
+                    this[modal_constants.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);
+            });
         });
     }
     _dispatchModalOpenedEvent() {
@@ -156,22 +154,19 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     }
     async close() {
         return new Promise((resolve) => {
-            if (this[modal_constants.MODAL_OPENED_PROP]) {
-                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
-                window.requestAnimationFrame(() => {
-                    var _a, _b;
-                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
-                    (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
-                        this[modal_constants.MODAL_OPENED_PROP] = false;
-                        this._dispatchModalClosedEvent();
-                        resolve();
-                    }, transitionDuration);
-                });
-            }
-            resolve();
+            const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
+                (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
+                    this[modal_constants.MODAL_OPENED_PROP] = false;
+                    this._dispatchModalClosedEvent();
+                    resolve();
+                }, transitionDuration);
+            });
         });
     }
     _dispatchModalClosedEvent() {
@@ -220,7 +215,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HModal.prototype, "_lastFocusableElement", void 0);
 exports.HModal = HModal_1 = tslib_es6.__decorate([
-    decorators.customElement('h-modal'),
+    phoenix_custom_element.phoenixCustomElement('h-modal'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModal);
 //# sourceMappingURL=modal.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal.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,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal_backdrop.js

@@ -6,6 +6,7 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var modal_constants = require('./modal_constants.js');
 var modal = require('./modal.js');
 
@@ -52,7 +53,7 @@ exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.
         document.body.style.removeProperty('padding-right');
     }
     render() {
-        return lit.html `<div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+        return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
     }
 };
 tslib_es6.__decorate([
@@ -60,6 +61,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HModalBackdrop.prototype, "visible", void 0);
 exports.HModalBackdrop = tslib_es6.__decorate([
-    decorators.customElement('h-modal-backdrop')
+    phoenix_custom_element.phoenixCustomElement('h-modal-backdrop')
 ], exports.HModalBackdrop);
 //# sourceMappingURL=modal_backdrop.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_body.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 
 exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -14,7 +14,7 @@ exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixL
     }
 };
 exports.HModalBody = tslib_es6.__decorate([
-    decorators.customElement('h-modal-body'),
+    phoenix_custom_element.phoenixCustomElement('h-modal-body'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModalBody);
 //# sourceMappingURL=modal_body.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_close.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var modal_constants = require('./modal_constants.js');
 
 exports.HModalClose = class HModalClose extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -35,7 +35,7 @@ exports.HModalClose = class HModalClose extends phoenix_light_lit_element.Phoeni
     }
 };
 exports.HModalClose = tslib_es6.__decorate([
-    decorators.customElement('h-modal-close'),
+    phoenix_custom_element.phoenixCustomElement('h-modal-close'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModalClose);
 //# sourceMappingURL=modal_close.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 
 exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -14,7 +14,7 @@ exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.Phoe
     }
 };
 exports.HModalFooter = tslib_es6.__decorate([
-    decorators.customElement('h-modal-footer'),
+    phoenix_custom_element.phoenixCustomElement('h-modal-footer'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModalFooter);
 //# sourceMappingURL=modal_footer.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_header.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 
 exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -14,7 +14,7 @@ exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.Phoe
     }
 };
 exports.HModalHeader = tslib_es6.__decorate([
-    decorators.customElement('h-modal-header'),
+    phoenix_custom_element.phoenixCustomElement('h-modal-header'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModalHeader);
 //# sourceMappingURL=modal_header.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 
 exports.HModalOpener = class HModalOpener extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -37,7 +38,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HModalOpener.prototype, "name", void 0);
 exports.HModalOpener = tslib_es6.__decorate([
-    decorators.customElement('h-modal-opener'),
+    phoenix_custom_element.phoenixCustomElement('h-modal-opener'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HModalOpener);
 //# sourceMappingURL=modal_opener.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_opener.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;"}
+{"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;"}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('./portal_constants.js');
 var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 
@@ -79,7 +80,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HPortal.prototype, "disabled", void 0);
 exports.HPortal = tslib_es6.__decorate([
-    decorators.customElement('h-portal'),
+    phoenix_custom_element.phoenixCustomElement('h-portal'),
     tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HPortal);
 //# sourceMappingURL=portal.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_target.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_target_error = require('./portal_target_error.js');
 var portal_constants = require('./portal_constants.js');
 
@@ -71,6 +72,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HPortalTarget.prototype, "_portalElementsMap", void 0);
 exports.HPortalTarget = HPortalTarget_1 = tslib_es6.__decorate([
-    decorators.customElement('h-portal-target')
+    phoenix_custom_element.phoenixCustomElement('h-portal-target')
 ], exports.HPortalTarget);
 //# sourceMappingURL=portal_target.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal_target.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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/controllers/btn_controller.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('lit');
+
+class BtnController {
+    constructor(host, callback) {
+        (this.host = host).addController(this);
+        this.host.tabIndex = 0;
+        this.host.setAttribute('role', 'button');
+        this.callback = (ev) => {
+            const isEnterOrSpacebarPressed = ev.code === 'Enter' || ev.code === 'Space';
+            if (isEnterOrSpacebarPressed) {
+                callback();
+            }
+        };
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.callback);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.callback);
+    }
+}
+
+exports.BtnController = BtnController;
+//# sourceMappingURL=btn_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/btn_controller.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;"}

package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Allow for custom element classes with private constructors
+ */
+const legacyCustomElement = (tagName, clazz) => {
+    // Cast as any because TS doesn't recognize the return type as being a
+    // subtype of the decorated class when clazz is typed as
+    // `Constructor<HTMLElement>` for some reason.
+    // `Constructor<HTMLElement>` is helpful to make sure the decorator is
+    // applied to elements however.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defineComponent(tagName, clazz);
+    clazz.__componentName__ = tagName;
+    return clazz;
+};
+const standardCustomElement = (tagName, descriptor) => {
+    const { kind, elements } = descriptor;
+    return {
+        kind,
+        elements,
+        // This callback is called once the class is otherwise fully defined
+        finisher(clazz) {
+            clazz.__componentName__ = tagName;
+            defineComponent(tagName, clazz);
+        }
+    };
+};
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```js
+ * @phoenixCustomElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+const phoenixCustomElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
+    ? legacyCustomElement(tagName, classOrDescriptor)
+    : standardCustomElement(tagName, classOrDescriptor);
+const defineComponent = (tagName, componentClass) => {
+    const isCustomElementAlreadyDefined = customElements.get(tagName);
+    if (!isCustomElementAlreadyDefined)
+        window.customElements.define(tagName, componentClass);
+    if (isCustomElementAlreadyDefined && window.__debug_mode__) {
+        console.warn(`Custom element ${tagName} is already defined.`);
+    }
+};
+
+exports.phoenixCustomElement = phoenixCustomElement;
+//# sourceMappingURL=phoenix_custom_element.js.map

package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.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;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/hello_button.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
+var phoenix_custom_element = require('./core/decorators/phoenix_custom_element.js');
 
 exports.HelloButton = class HelloButton extends lit.LitElement {
     constructor() {
@@ -46,6 +47,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HelloButton.prototype, "planet", void 0);
 exports.HelloButton = tslib_es6.__decorate([
-    decorators.customElement('hello-button')
+    phoenix_custom_element.phoenixCustomElement('hello-button')
 ], exports.HelloButton);
 //# sourceMappingURL=hello_button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,sCAA0C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sCAA0C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.js

@@ -15,6 +15,7 @@ var modal_body = require('./components/modal/modal_body.js');
 var modal_footer = require('./components/modal/modal_footer.js');
 var modal_header = require('./components/modal/modal_header.js');
 var modal_close = require('./components/modal/modal_close.js');
+var btn_controller = require('./controllers/btn_controller.js');
 
 
 
@@ -81,4 +82,5 @@ Object.defineProperty(exports, 'HModalClose', {
 		return modal_close.HModalClose;
 	}
 });
+exports.BtnController = btn_controller.BtnController;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;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.js

@@ -1,7 +1,8 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
-import { property, state, customElement } from 'lit/decorators';
+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 { 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';
@@ -54,14 +55,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 }
             }
         };
-        this._handleCloseFromCloseComponent = (ev) => {
+        this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
             if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
-                this.close();
+                await this.close();
             }
         };
-        this._bindCloseOnEsc = (ev) => {
+        this._bindCloseOnEsc = async (ev) => {
             ev.stopImmediatePropagation();
             const $target = ev.target;
             const closeConditions = [
@@ -74,7 +75,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             const shouldCloseModal = closeConditions.every((condition) => condition);
             if (shouldCloseModal) {
                 const [modalToClose] = HModal_1.openModals.slice(-1);
-                modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
+                await (modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close());
             }
         };
         this.hidden = true;
@@ -124,24 +125,21 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     async open() {
         return new Promise((resolve) => {
             var _a;
-            if (!this[MODAL_OPENED_PROP]) {
-                this[MODAL_OPENED_PROP] = true;
-                this._dispatchModalOpenedEvent();
-                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
-                window.requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
-                    }, 0);
-                    const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
-                    setTimeout(() => {
-                        var _a;
-                        (_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);
-                });
-            }
-            resolve();
+            (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
+                }, 0);
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                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);
+            });
         });
     }
     _dispatchModalOpenedEvent() {
@@ -152,22 +150,19 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     }
     async close() {
         return new Promise((resolve) => {
-            if (this[MODAL_OPENED_PROP]) {
-                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
-                window.requestAnimationFrame(() => {
-                    var _a, _b;
-                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
-                    (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
-                        this[MODAL_OPENED_PROP] = false;
-                        this._dispatchModalClosedEvent();
-                        resolve();
-                    }, transitionDuration);
-                });
-            }
-            resolve();
+            const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
+                (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
+                    this[MODAL_OPENED_PROP] = false;
+                    this._dispatchModalClosedEvent();
+                    resolve();
+                }, transitionDuration);
+            });
         });
     }
     _dispatchModalClosedEvent() {
@@ -216,7 +211,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HModal.prototype, "_lastFocusableElement", void 0);
 HModal = HModal_1 = __decorate([
-    customElement('h-modal'),
+    phoenixCustomElement('h-modal'),
     __metadata("design:paramtypes", [])
 ], HModal);
 

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

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

@@ -1,7 +1,8 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
-import { property, customElement } from 'lit/decorators';
+import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { MODAL_EVENTS } from './modal_constants.js';
 import { HModal } from './modal.js';
 
@@ -48,7 +49,7 @@ let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
         document.body.style.removeProperty('padding-right');
     }
     render() {
-        return html `<div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+        return html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
     }
 };
 __decorate([
@@ -56,7 +57,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HModalBackdrop.prototype, "visible", void 0);
 HModalBackdrop = __decorate([
-    customElement('h-modal-backdrop')
+    phoenixCustomElement('h-modal-backdrop')
 ], HModalBackdrop);
 
 export { HModalBackdrop };

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.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;"}
+{"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;"}

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { customElement } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalBody = class HModalBody extends PhoenixLightLitElement {
     constructor() {
@@ -10,7 +10,7 @@ let HModalBody = class HModalBody extends PhoenixLightLitElement {
     }
 };
 HModalBody = __decorate([
-    customElement('h-modal-body'),
+    phoenixCustomElement('h-modal-body'),
     __metadata("design:paramtypes", [])
 ], HModalBody);
 

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { customElement } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { MODAL_EVENTS } from './modal_constants.js';
 
 let HModalClose = class HModalClose extends PhoenixLightLitElement {
@@ -31,7 +31,7 @@ let HModalClose = class HModalClose extends PhoenixLightLitElement {
     }
 };
 HModalClose = __decorate([
-    customElement('h-modal-close'),
+    phoenixCustomElement('h-modal-close'),
     __metadata("design:paramtypes", [])
 ], HModalClose);
 

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { customElement } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalFooter = class HModalFooter extends PhoenixLightLitElement {
     constructor() {
@@ -10,7 +10,7 @@ let HModalFooter = class HModalFooter extends PhoenixLightLitElement {
     }
 };
 HModalFooter = __decorate([
-    customElement('h-modal-footer'),
+    phoenixCustomElement('h-modal-footer'),
     __metadata("design:paramtypes", [])
 ], HModalFooter);
 

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { customElement } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalHeader = class HModalHeader extends PhoenixLightLitElement {
     constructor() {
@@ -10,7 +10,7 @@ let HModalHeader = class HModalHeader extends PhoenixLightLitElement {
     }
 };
 HModalHeader = __decorate([
-    customElement('h-modal-header'),
+    phoenixCustomElement('h-modal-header'),
     __metadata("design:paramtypes", [])
 ], HModalHeader);
 

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { property, customElement } from 'lit/decorators';
+import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalOpener = class HModalOpener extends PhoenixLightLitElement {
     constructor() {
@@ -33,7 +34,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HModalOpener.prototype, "name", void 0);
 HModalOpener = __decorate([
-    customElement('h-modal-opener'),
+    phoenixCustomElement('h-modal-opener'),
     __metadata("design:paramtypes", [])
 ], HModalOpener);
 

package/build/esm/packages/phoenix/src/components/modal/modal_opener.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;"}
+{"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;"}

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { state, property, customElement } from 'lit/decorators';
+import { state, property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_EVENTS } from './portal_constants.js';
 import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 
@@ -75,7 +76,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HPortal.prototype, "disabled", void 0);
 HPortal = __decorate([
-    customElement('h-portal'),
+    phoenixCustomElement('h-portal'),
     __metadata("design:paramtypes", [])
 ], HPortal);
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA,eAAe,qDAAyD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;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;"}

package/build/esm/packages/phoenix/src/components/portal/portal_target.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { property, state, customElement } from 'lit/decorators';
+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 { PortalTargetError } from './portal_target_error.js';
 import { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP } from './portal_constants.js';
 
@@ -67,7 +68,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HPortalTarget.prototype, "_portalElementsMap", void 0);
 HPortalTarget = HPortalTarget_1 = __decorate([
-    customElement('h-portal-target')
+    phoenixCustomElement('h-portal-target')
 ], HPortalTarget);
 
 export { HPortalTarget };

package/build/esm/packages/phoenix/src/components/portal/portal_target.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;"}
+{"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;"}

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

@@ -0,0 +1,8 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class BtnController implements ReactiveController {
+    host: ReactiveControllerHost & HTMLElement;
+    callback: (ev: KeyboardEvent) => void;
+    constructor(host: ReactiveControllerHost & HTMLElement, callback: () => void);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,24 @@
+import 'lit';
+
+class BtnController {
+    constructor(host, callback) {
+        (this.host = host).addController(this);
+        this.host.tabIndex = 0;
+        this.host.setAttribute('role', 'button');
+        this.callback = (ev) => {
+            const isEnterOrSpacebarPressed = ev.code === 'Enter' || ev.code === 'Space';
+            if (isEnterOrSpacebarPressed) {
+                callback();
+            }
+        };
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.callback);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.callback);
+    }
+}
+
+export { BtnController };
+//# sourceMappingURL=btn_controller.js.map

package/build/esm/packages/phoenix/src/controllers/btn_controller.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;"}

package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Allow for custom element classes with private constructors
+ */
+import { ClassDescriptor, IPhoenixWebComponentClass } from "../../global_types";
+declare type CustomElementClass = Omit<typeof HTMLElement, 'new'> & IPhoenixWebComponentClass;
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```js
+ * @phoenixCustomElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export declare const phoenixCustomElement: (tagName: string) => (classOrDescriptor: CustomElementClass | ClassDescriptor) => any;
+export {};

package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.js

@@ -0,0 +1,54 @@
+/**
+ * Allow for custom element classes with private constructors
+ */
+const legacyCustomElement = (tagName, clazz) => {
+    // Cast as any because TS doesn't recognize the return type as being a
+    // subtype of the decorated class when clazz is typed as
+    // `Constructor<HTMLElement>` for some reason.
+    // `Constructor<HTMLElement>` is helpful to make sure the decorator is
+    // applied to elements however.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defineComponent(tagName, clazz);
+    clazz.__componentName__ = tagName;
+    return clazz;
+};
+const standardCustomElement = (tagName, descriptor) => {
+    const { kind, elements } = descriptor;
+    return {
+        kind,
+        elements,
+        // This callback is called once the class is otherwise fully defined
+        finisher(clazz) {
+            clazz.__componentName__ = tagName;
+            defineComponent(tagName, clazz);
+        }
+    };
+};
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```js
+ * @phoenixCustomElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+const phoenixCustomElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
+    ? legacyCustomElement(tagName, classOrDescriptor)
+    : standardCustomElement(tagName, classOrDescriptor);
+const defineComponent = (tagName, componentClass) => {
+    const isCustomElementAlreadyDefined = customElements.get(tagName);
+    if (!isCustomElementAlreadyDefined)
+        window.customElements.define(tagName, componentClass);
+    if (isCustomElementAlreadyDefined && window.__debug_mode__) {
+        console.warn(`Custom element ${tagName} is already defined.`);
+    }
+};
+
+export { phoenixCustomElement };
+//# sourceMappingURL=phoenix_custom_element.js.map

package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.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;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_types.d.ts

@@ -0,0 +1,25 @@
+export declare type Constructor<T> = {
+    new (...args: any[]): T;
+};
+export interface ClassDescriptor {
+    kind: 'class';
+    elements: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
+}
+export interface ClassElement {
+    kind: 'field' | 'method';
+    key: PropertyKey;
+    placement: 'static' | 'prototype' | 'own';
+    initializer?: Function;
+    extras?: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
+    descriptor?: PropertyDescriptor;
+}
+export interface IPhoenixWebComponentClass {
+    __componentName__?: string;
+}
+declare global {
+    interface Window {
+        __debug_mode__?: boolean;
+    }
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=global_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"global_types.js","sourceRoot":"","sources":["../../../../../src/global_types.ts"],"names":[],"mappings":""}

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from '../../../external/tslib/tslib.es6.js';
 import { LitElement, html, css } from 'lit';
-import { state, customElement } from 'lit/decorators';
+import { state } from 'lit/decorators';
+import { phoenixCustomElement } from './core/decorators/phoenix_custom_element.js';
 
 let HelloButton = class HelloButton extends LitElement {
     constructor() {
@@ -42,7 +43,7 @@ __decorate([
     __metadata("design:type", Object)
 ], HelloButton.prototype, "planet", void 0);
 HelloButton = __decorate([
-    customElement('hello-button')
+    phoenixCustomElement('hello-button')
 ], HelloButton);
 
 export { HelloButton };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,sCAA0C;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sCAA0C;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.d.ts

@@ -1,3 +1,4 @@
+export { IPhoenixWebComponentClass } from "./global_types";
 export { ContextProviderController } from "./core/context/context_provider_controller";
 export { ContextConsumerController } from "./core/context/context_consumer_controller";
 export { PhoenixLightLitElement } from "./core/phoenix_light_lit_element";
@@ -11,3 +12,4 @@ export { HModalBody } from './components/modal/modal_body';
 export { HModalFooter } from './components/modal/modal_footer';
 export { HModalHeader } from './components/modal/modal_header';
 export { HModalClose } from './components/modal/modal_close';
+export { BtnController } from './controllers/btn_controller';

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

@@ -11,4 +11,5 @@ export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';
 export { HModalHeader } from './components/modal/modal_header.js';
 export { HModalClose } from './components/modal/modal_close.js';
+export { BtnController } from './controllers/btn_controller.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/phoenix/src/index.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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.5.0",
+  "version": "0.6.0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",