@shoper/phoenix_design_system 0.2.1 → 0.2.2-0

package/build/cjs/external/lit-html/async-directive.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var directiveHelpers = require('./directive-helpers.js');
+var directive = require('./directive.js');
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=(i,t)=>{var s,o;const n=i._$AN;if(void 0===n)return !1;for(const i of n)null===(o=(s=i)._$AO)||void 0===o||o.call(s,t,!1),e(i,t);return !0},o=i=>{let t,s;do{if(void 0===(t=i._$AM))break;s=t._$AN,s.delete(i),i=t;}while(0===(null==s?void 0:s.size))},n=i=>{for(let t;t=i._$AM;i=t){let s=t._$AN;if(void 0===s)t._$AN=s=new Set;else if(s.has(i))break;s.add(i),l(t);}};function r(i){void 0!==this._$AN?(o(this),this._$AM=i,n(this)):this._$AM=i;}function h(i,t=!1,s=0){const n=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(t)if(Array.isArray(n))for(let i=s;i<n.length;i++)e(n[i],!1),o(n[i]);else null!=n&&(e(n,!1),o(n));else e(this,i);}const l=i=>{var t,e,o,n;i.type==directive.PartType.CHILD&&(null!==(t=(o=i)._$AP)&&void 0!==t||(o._$AP=h),null!==(e=(n=i)._$AQ)&&void 0!==e||(n._$AQ=r));};class d extends directive.Directive{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,s){super._$AT(i,t,s),n(this),this.isConnected=i._$AU;}_$AO(i,t=!0){var s,n;i!==this.isConnected&&(this.isConnected=i,i?null===(s=this.reconnected)||void 0===s||s.call(this):null===(n=this.disconnected)||void 0===n||n.call(this)),t&&(e(this,i),o(this));}setValue(t){if(directiveHelpers.isSingleExpression(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+exports.directive = directive.directive;
+exports.AsyncDirective = d;
+//# sourceMappingURL=async-directive.js.map

package/build/cjs/external/lit-html/async-directive.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/build/cjs/external/lit-html/directive-helpers.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./lit-html.js');
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const r=o=>void 0===o.strings;
+
+exports.isSingleExpression = r;
+//# sourceMappingURL=directive-helpers.js.map

package/build/cjs/external/lit-html/directive-helpers.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;"}

package/build/cjs/external/lit-html/directive.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+exports.Directive = i;
+exports.PartType = t;
+exports.directive = e;
+//# sourceMappingURL=directive.js.map

package/build/cjs/external/lit-html/directive.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;"}

package/build/cjs/external/lit-html/directives/ref.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var litHtml = require('../lit-html.js');
+var directive = require('../directive.js');
+var asyncDirective = require('../async-directive.js');
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=()=>new o;class o{}const h=new WeakMap,n=directive.directive(class extends asyncDirective.AsyncDirective{render(t){return litHtml.nothing}update(t,[s]){var e;const o=s!==this.U;return o&&void 0!==this.U&&this.ot(void 0),(o||this.rt!==this.lt)&&(this.U=s,this.ht=null===(e=t.options)||void 0===e?void 0:e.host,this.ot(this.lt=t.element)),litHtml.nothing}ot(i){var t;if("function"==typeof this.U){const s=null!==(t=this.ht)&&void 0!==t?t:globalThis;let e=h.get(s);void 0===e&&(e=new WeakMap,h.set(s,e)),void 0!==e.get(this.U)&&this.U.call(this.ht,void 0),e.set(this.U,i),void 0!==i&&this.U.call(this.ht,i);}else this.U.value=i;}get rt(){var i,t,s;return "function"==typeof this.U?null===(t=h.get(null!==(i=this.ht)&&void 0!==i?i:globalThis))||void 0===t?void 0:t.get(this.U):null===(s=this.U)||void 0===s?void 0:s.value}disconnected(){this.rt===this.lt&&this.ot(void 0);}reconnected(){this.ot(this.lt);}});
+
+exports.createRef = e;
+exports.ref = n;
+//# sourceMappingURL=ref.js.map

package/build/cjs/external/lit-html/directives/ref.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;"}

package/build/cjs/external/lit-html/lit-html.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t;const i=globalThis.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e=`lit$${(Math.random()+"").slice(9)}$`,o="?"+e,n=`<${o}>`,l=document,h=(t="")=>l.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>{var i;return d(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,_=/'/g,m=/"/g,g=/^(?:script|style|textarea|title)$/i,b=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),T=new WeakMap,A=l.createTreeWalker(l,129,null,!1),C=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"<svg>":"",d=c;for(let i=0;i<o;i++){const s=t[i];let o,u,p=-1,$=0;for(;$<s.length&&(d.lastIndex=$,u=d.exec(s),null!==u);)$=d.lastIndex,d===c?"!--"===u[1]?d=v:void 0!==u[1]?d=a:void 0!==u[2]?(g.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=f):void 0!==u[3]&&(d=f):d===f?">"===u[0]?(d=null!=h?h:c,p=-1):void 0===u[1]?p=-2:(p=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?m:_):d===m||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n:p>=0?(l.push(o),s.slice(0,p)+"$lit$"+s.slice(p)+e+y):s+e+(-2===p?(l.push(void 0),i):y);}const u=r+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==s?s.createHTML(u):u,l]};class E{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,s);if(this.el=E.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(e)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(e),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?H:"@"===i[1]?I:S});}else c.push({type:6,index:r});}for(const i of t)l.removeAttribute(i);}if(g.test(l.tagName)){const t=l.textContent.split(e),s=t.length-1;if(s>0){l.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)l.append(t[i],h()),A.nextNode(),c.push({type:2,index:++r});l.append(t[s],h());}}}else if(8===l.nodeType)if(l.data===o)c.push({type:2,index:r});else {let t=-1;for(;-1!==(t=l.data.indexOf(e,t+1));)c.push({type:7,index:r}),t+=e.length-1;}r++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function P(t,i,s=t,e){var o,n,l,h;if(i===b)return i;let d=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=r(i)?void 0:i._$litDirective$;return (null==d?void 0:d.constructor)!==u&&(null===(n=null==d?void 0:d._$AO)||void 0===n||n.call(d,!1),void 0===u?d=void 0:(d=new u(t),d._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=d:s._$Cu=d),void 0!==d&&(i=P(t,d._$AS(t,i.values),d,e)),i}class V{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:l).importNode(s,!0);A.currentNode=o;let n=A.nextNode(),h=0,r=0,d=e[0];for(;void 0!==d;){if(h===d.index){let i;2===d.type?i=new N(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}h!==(null==d?void 0:d.index)&&(n=A.nextNode(),h++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class N{constructor(t,i,s,e){var o;this.type=2,this._$AH=w,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cg=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=P(this,t,i),r(t)?t===w||null==t||""===t?(this._$AH!==w&&this._$AR(),this._$AH=w):t!==this._$AH&&t!==b&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):u(t)?this.S(t):this.$(t);}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t));}$(t){this._$AH!==w&&r(this._$AH)?this._$AA.nextSibling.data=t:this.k(l.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=E.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new V(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new E(t)),i}S(t){d(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new N(this.M(h()),this.M(h()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class S{constructor(t,i,s,e,o){this.type=1,this._$AH=w,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=P(this,e[s+l],i,l),h===b&&(h=this._$AH[l]),n||(n=!r(h)||h!==this._$AH[l]),h===w?t=w:t!==w&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.C(t);}C(t){t===w?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class M extends S{constructor(){super(...arguments),this.type=3;}C(t){this.element[this.name]=t===w?void 0:t;}}const k=i?i.emptyScript:"";class H extends S{constructor(){super(...arguments),this.type=4;}C(t){t&&t!==w?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends S{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=P(this,t,i,0))&&void 0!==s?s:w)===b)return;const e=this._$AH,o=t===w&&e!==w||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==w&&(e===w||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t);}}const z=window.litHtmlPolyfillSupport;null==z||z(E,N),(null!==(t=globalThis.litHtmlVersions)&&void 0!==t?t:globalThis.litHtmlVersions=[]).push("2.2.5");
+
+exports.noChange = b;
+exports.nothing = w;
+//# sourceMappingURL=lit-html.js.map

package/build/cjs/external/lit-html/lit-html.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;"}

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

@@ -0,0 +1,170 @@
+'use strict';
+
+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_light_lit_element = require('../../core/phoenix_light_lit_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');
+
+var HModal_1;
+exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this._firstFocusableElement = undefined;
+        this._focusableElements = null;
+        this._lastFocusableElement = undefined;
+        this._contentRef = ref.createRef();
+        this._focusSentinelStart = ref.createRef();
+        this._focusSentinelEnd = ref.createRef();
+        this._propsChangeStrategies = {
+            [modal_constants.MODAL_OPENED_PROP]: {
+                true: () => {
+                    HModal_1.openModals = [...HModal_1.openModals, this];
+                    document.addEventListener('keydown', this._bindCloseOnEsc);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, 0);
+                },
+                false: () => {
+                    HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
+                    document.removeEventListener('keydown', this._bindCloseOnEsc);
+                }
+            }
+        };
+        this._keepFocusWithinModal = (ev) => {
+            var _a, _b;
+            const isTabPressed = ev.code === 'Tab';
+            if (isTabPressed) {
+                if (ev.shiftKey) {
+                    if (document.activeElement === this._firstFocusableElement) {
+                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        ev.preventDefault();
+                    }
+                }
+                else if (document.activeElement === this._lastFocusableElement) {
+                    (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                    ev.preventDefault();
+                }
+            }
+        };
+        this._handleCloseFromCloseComponent = (ev) => {
+            var _a;
+            ev.stopPropagation();
+            if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
+                this.close();
+            }
+        };
+        this._bindCloseOnEsc = (ev) => {
+            ev.stopImmediatePropagation();
+            const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
+            const shouldCloseModal = closeConditions.every((condition) => condition);
+            if (shouldCloseModal) {
+                const [modalToClose] = HModal_1.openModals.slice(-1);
+                modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
+            }
+        };
+        this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
+    }
+    static _appendModalsPortal() {
+        const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${modal_constants.MODALS_PORTAL_NAME}"]`);
+        if (!$modalsPortalTarget) {
+            const $portalTarget = document.createElement('h-portal-target');
+            $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, modal_constants.MODALS_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    static _appendModalsBackdrop() {
+        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
+        if (!$modalsBackdrop) {
+            const $backdrop = document.createElement('h-modal-backdrop');
+            document.body.appendChild($backdrop);
+        }
+    }
+    static isSomeModalOpen() {
+        return HModal_1.openModals.some((modal) => modal.opened);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        HModal_1._appendModalsPortal();
+        HModal_1._appendModalsBackdrop();
+        document.addEventListener('keydown', this._keepFocusWithinModal);
+        document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+        document.removeEventListener('keydown', this._bindCloseOnEsc);
+    }
+    firstUpdated() {
+        this._firstFocusableElement = this._focusSentinelStart.value;
+        this._lastFocusableElement = this._focusSentinelEnd.value;
+    }
+    updated(changedProps) {
+        if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
+            this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
+        }
+    }
+    open() {
+        if (!this[modal_constants.MODAL_OPENED_PROP]) {
+            this[modal_constants.MODAL_OPENED_PROP] = true;
+            this._dispatchModalOpenedEvent();
+        }
+    }
+    _dispatchModalOpenedEvent() {
+        const openModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.opened, {
+            bubbles: true
+        });
+        this.dispatchEvent(openModalEvent);
+    }
+    close() {
+        if (this[modal_constants.MODAL_OPENED_PROP]) {
+            this[modal_constants.MODAL_OPENED_PROP] = false;
+            this._dispatchModalClosedEvent();
+        }
+    }
+    _dispatchModalClosedEvent() {
+        const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.closed, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    render() {
+        return lit.html `
+            <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
+                <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
+                <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
+                    ${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}
+                </div>
+                <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
+            </h-portal>
+        `;
+    }
+};
+exports.HModal.openModals = [];
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_firstFocusableElement", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_focusableElements", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_lastFocusableElement", void 0);
+exports.HModal = HModal_1 = tslib_es6.__decorate([
+    decorators.customElement('h-modal'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModal);
+//# sourceMappingURL=modal.js.map

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

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

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

@@ -0,0 +1,65 @@
+'use strict';
+
+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_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var modal_constants = require('./modal_constants.js');
+var modal = require('./modal.js');
+
+exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this._show = () => {
+            if (!this.visible) {
+                this.visible = true;
+            }
+        };
+        this._hide = () => {
+            if (!modal.HModal.isSomeModalOpen()) {
+                this.visible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
+        document.addEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
+        document.removeEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
+    }
+    updated() {
+        if (modal.HModal.isSomeModalOpen()) {
+            this.visible = true;
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return lit.html `<div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModalBackdrop.prototype, "visible", void 0);
+exports.HModalBackdrop = tslib_es6.__decorate([
+    decorators.customElement('h-modal-backdrop')
+], exports.HModalBackdrop);
+//# sourceMappingURL=modal_backdrop.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+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');
+
+exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'default';
+    }
+};
+exports.HModalBody = tslib_es6.__decorate([
+    decorators.customElement('h-modal-body'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalBody);
+//# sourceMappingURL=modal_body.js.map

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

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

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

@@ -0,0 +1,41 @@
+'use strict';
+
+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 modal_constants = require('./modal_constants.js');
+
+exports.HModalClose = class HModalClose extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchModalCloseEvent);
+        this.addEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._dispatchModalCloseEvent);
+        this.removeEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    _dispatchModalCloseEvent() {
+        const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.close, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    _dispatchModalCloseOnEnterEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._dispatchModalCloseEvent();
+        }
+    }
+};
+exports.HModalClose = tslib_es6.__decorate([
+    decorators.customElement('h-modal-close'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalClose);
+//# sourceMappingURL=modal_close.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MODALS_PORTAL_NAME = 'modals';
+const MODAL_EVENTS = {
+    open: 'modal.open',
+    close: 'modal.close',
+    opened: 'modal.opened',
+    closed: 'modal.closed'
+};
+const MODAL_OPENED_PROP = 'opened';
+const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+exports.FOCUSABLE_ELEMENTS_WITHIN_MODAL = FOCUSABLE_ELEMENTS_WITHIN_MODAL;
+exports.MODALS_PORTAL_NAME = MODALS_PORTAL_NAME;
+exports.MODAL_EVENTS = MODAL_EVENTS;
+exports.MODAL_OPENED_PROP = MODAL_OPENED_PROP;
+//# sourceMappingURL=modal_constants.js.map

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+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');
+
+exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+    }
+};
+exports.HModalFooter = tslib_es6.__decorate([
+    decorators.customElement('h-modal-footer'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalFooter);
+//# sourceMappingURL=modal_footer.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+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');
+
+exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+    }
+};
+exports.HModalHeader = tslib_es6.__decorate([
+    decorators.customElement('h-modal-header'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalHeader);
+//# sourceMappingURL=modal_header.js.map

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

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

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var portal_constants = require('./portal_constants.js');
 var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 
@@ -23,12 +23,17 @@ exports.HPortal = class HPortal extends phoenix_light_lit_element.PhoenixLightLi
             this.openPortal();
         }
     }
-    updated(changedProps) {
-        const disabledValue = changedProps.get('disabled');
-        if (disabledValue === true) {
+    updated() {
+        if (this.children.length > 0) {
+            if (!this.disabled) {
+                this._initialChildren = [...this.children];
+                this.openPortal();
+            }
+        }
+        if (this.disabled === true) {
             this.closePortal();
         }
-        else if (disabledValue === false) {
+        else if (this.disabled === false) {
             this.openPortal();
         }
     }

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;"}
+{"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;"}

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const PORTAL_EVENTS = {
     open: `portal.open`,
     close: 'portal.close'
-};
+};
+const PORTAL_TARGET_NAME_PROP = 'name';
 
 exports.PORTAL_EVENTS = PORTAL_EVENTS;
+exports.PORTAL_TARGET_NAME_PROP = PORTAL_TARGET_NAME_PROP;
 //# sourceMappingURL=portal_constants.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal_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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var decorators = require('lit/decorators');
-var portal_constants = require('./portal_constants.js');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var portal_target_error = require('./portal_target_error.js');
+var portal_constants = require('./portal_constants.js');
 
 var HPortalTarget_1;
 exports.HPortalTarget = HPortalTarget_1 = class HPortalTarget extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -48,17 +48,17 @@ exports.HPortalTarget = HPortalTarget_1 = class HPortalTarget extends phoenix_li
         super.disconnectedCallback();
         document.removeEventListener(portal_constants.PORTAL_EVENTS.open, this.portalElements);
         document.removeEventListener(portal_constants.PORTAL_EVENTS.close, this.removeTeleportedItems);
-        HPortalTarget_1.portalTargetsNames.delete(this.name);
+        HPortalTarget_1.portalTargetsNames.delete(this[portal_constants.PORTAL_TARGET_NAME_PROP]);
     }
     doesDestinationMatch(destination) {
-        return destination === this.name;
+        return destination === this[portal_constants.PORTAL_TARGET_NAME_PROP];
     }
     allowOnlyOnePortalTargetWithName() {
-        if (HPortalTarget_1.portalTargetsNames.has(this.name)) {
+        if (HPortalTarget_1.portalTargetsNames.has(this[portal_constants.PORTAL_TARGET_NAME_PROP])) {
             this.remove();
-            throw new portal_target_error.PortalTargetError(`Portal target with name "${this.name}" already exists.`);
+            throw new portal_target_error.PortalTargetError(`Portal target with name "${this[portal_constants.PORTAL_TARGET_NAME_PROP]}" already exists.`);
         }
-        HPortalTarget_1.portalTargetsNames.add(this.name);
+        HPortalTarget_1.portalTargetsNames.add(this[portal_constants.PORTAL_TARGET_NAME_PROP]);
     }
 };
 exports.HPortalTarget.portalTargetsNames = new Set();

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js

@@ -2,13 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
+var phoenix_light_lit_elements_constants = require('./phoenix_light_lit_elements_constants.js');
+var decorators = require('lit/decorators');
 
 class PhoenixLightLitElement extends lit.LitElement {
+    constructor() {
+        super();
+        this._slots = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._slots = this._assignSlots();
+    }
+    _assignSlots() {
+        return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
+            var _a;
+            const slotName = $el.slot || phoenix_light_lit_elements_constants.DEFAULT_SLOT_NAME;
+            acc[slotName] = acc[slotName] || [];
+            acc[slotName].push(lit.html `${$el}`);
+            (_a = $el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild($el);
+            $el.removeAttribute('slot');
+            return acc;
+        }, this._slots);
+    }
+    getSlot(name) {
+        try {
+            return this._slots[name];
+        }
+        catch (_a) { }
+        return lit.nothing;
+    }
     createRenderRoot() {
         return this;
     }
-}
+}
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "_slots", void 0);
 
 exports.PhoenixLightLitElement = PhoenixLightLitElement;
 //# sourceMappingURL=phoenix_light_lit_element.js.map