@amiceli/papierjs 0.1.0 → 0.3.0

package/dist/collection/components/p-modal/p-modal.js

@@ -0,0 +1,61 @@
+import { Host, h } from "@stencil/core";
+export class PModal {
+    constructor() {
+        this.isOpen = false;
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    render() {
+        return (h(Host, { key: '5c4e7a04c0ccd3be165ae01c0efa8872624e0ca9' }, this.isOpen && (h("div", { key: 'c3ab6740f10f5d22be2c5b71be9ec550a314eb82', class: "papier" }, h("div", { key: '2cfc871e6c9cb41e7cde854667ab724f244c991d', class: "modal" }, h("div", { key: '7bde677fa33cb292b892ddb2afe3862058abc8e0', class: "modal-bg", onClick: () => this.close() }), h("div", { key: 'bf2eb167e2212f0d4ea8cbd3c336d3d6b3f3551f', class: "modal-body" }, h("span", { key: '6d273c5b6da477fdd7b7e380e3ae480929a3344f', class: "btn-close", onClick: () => this.close() }, "X"), h("h4", { key: 'eef7c2b42a6f5ecba1888d84aaeeeb6f4ecec5ac', class: "modal-title" }, h("slot", { key: '3962a58c0b73d75da6c1a9b63d61fcd194d46680', name: "title" })), h("h5", { key: 'ac9648a3ec88e861bbcb841cb595f84af7e6b774', class: "modal-subtitle" }, h("slot", { key: '3f011e0ed1d54b7682a86cc5d9f183cd784fb0ec', name: "sub-title" })), h("p", { key: '8ebb994ada7f45643b35beb5a81cedf8c1589475', class: "modal-text" }, h("slot", { key: '6226b1b51f09af6924cfd423e9d14295b9955df0', name: "text" })), h("slot", { key: 'aa050710343d4021b526134b914a67baae20ede9' })))))));
+    }
+    static get is() { return "p-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["p-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["p-modal.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {},
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {},
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=p-modal.js.map

package/dist/collection/components/p-modal/p-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-modal.js","sourceRoot":"","sources":["../../../src/components/p-modal/p-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAOjE,MAAM,OAAO,MAAM;IALnB;QAOI,WAAM,GAAY,KAAK,CAAA;KA8C1B;IA3CU,IAAI;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACtB,CAAC;IAGM,KAAK;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;IACvB,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,uDACA,IAAI,CAAC,MAAM,IAAI,CACZ,4DAAK,KAAK,EAAC,QAAQ;YACf,4DAAK,KAAK,EAAC,OAAO;gBACd,4DACI,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAC7B;gBACF,4DAAK,KAAK,EAAC,YAAY;oBACnB,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,QAGxB;oBACP,2DAAI,KAAK,EAAC,aAAa;wBACnB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB;oBACL,2DAAI,KAAK,EAAC,gBAAgB;wBACtB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACxB;oBACL,0DAAG,KAAK,EAAC,YAAY;wBACjB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB;oBACJ,8DAAQ,CACN,CACJ,CACJ,CACT,CACE,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Method, State, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-modal',\n    styleUrl: 'p-modal.scss',\n    shadow: true,\n})\nexport class PModal {\n    @State()\n    isOpen: boolean = false\n\n    @Method()\n    public open() {\n        this.isOpen = true\n    }\n\n    @Method()\n    public close() {\n        this.isOpen = false\n    }\n\n    render() {\n        return (\n            <Host>\n                {this.isOpen && (\n                    <div class=\"papier\">\n                        <div class=\"modal\">\n                            <div\n                                class=\"modal-bg\"\n                                onClick={() => this.close()}\n                            />\n                            <div class=\"modal-body\">\n                                <span\n                                    class=\"btn-close\"\n                                    onClick={() => this.close()}\n                                >\n                                    X\n                                </span>\n                                <h4 class=\"modal-title\">\n                                    <slot name=\"title\" />\n                                </h4>\n                                <h5 class=\"modal-subtitle\">\n                                    <slot name=\"sub-title\" />\n                                </h5>\n                                <p class=\"modal-text\">\n                                    <slot name=\"text\" />\n                                </p>\n                                <slot />\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/p-modal/p-modal.preview.js

@@ -0,0 +1,26 @@
+export function previewModal() {
+    const inputObserver = new MutationObserver(() => {
+        const modal = document.querySelector('#modal-1');
+        const buttonModal = document.querySelector('#open-modal-1');
+        const otherModal = document.querySelector('#modal-2');
+        const otherButton = document.querySelector('#open-modal-2');
+        const closeIt = document.querySelector('#close-it');
+        if (modal && buttonModal && otherModal && otherButton) {
+            buttonModal.addEventListener('click', () => {
+                modal.open();
+            });
+            otherButton.addEventListener('click', () => {
+                otherModal.open();
+            });
+            closeIt.addEventListener('click', () => {
+                otherModal.close();
+            });
+            inputObserver.disconnect();
+        }
+    });
+    inputObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+}
+//# sourceMappingURL=p-modal.preview.js.map

package/dist/collection/components/p-modal/p-modal.preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-modal.preview.js","sourceRoot":"","sources":["../../../src/components/p-modal/p-modal.preview.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY;IACxB,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAsB,CAAA;QACrE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAE3D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACrC,UAAU,CACQ,CAAA;QACtB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;QAEnD,IAAI,KAAK,IAAI,WAAW,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;YACpD,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,KAAK,CAAC,IAAI,EAAE,CAAA;YAChB,CAAC,CAAC,CAAA;YACF,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,UAAU,CAAC,IAAI,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;YACF,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACnC,UAAU,CAAC,KAAK,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;YACF,aAAa,CAAC,UAAU,EAAE,CAAA;QAC9B,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QACjC,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC,CAAA;AACN,CAAC","sourcesContent":["import type { PModal } from '../../../dist/types/components/p-modal/p-modal'\n\nexport function previewModal() {\n    const inputObserver = new MutationObserver(() => {\n        const modal = document.querySelector('#modal-1') as unknown as PModal\n        const buttonModal = document.querySelector('#open-modal-1')\n\n        const otherModal = document.querySelector(\n            '#modal-2',\n        ) as unknown as PModal\n        const otherButton = document.querySelector('#open-modal-2')\n        const closeIt = document.querySelector('#close-it')\n\n        if (modal && buttonModal && otherModal && otherButton) {\n            buttonModal.addEventListener('click', () => {\n                modal.open()\n            })\n            otherButton.addEventListener('click', () => {\n                otherModal.open()\n            })\n            closeIt.addEventListener('click', () => {\n                otherModal.close()\n            })\n            inputObserver.disconnect()\n        }\n    })\n\n    inputObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -35,7 +35,7 @@ export class ProgressBar {
         return cssClass;
     }
     render() {
-        return (h("div", { key: '13774a43fc459137b7dba96e5a20e82fdd91b05a', class: this.getParentClass() }, h("div", { key: 'e2724e88881fb4350a974b3f11f576e5e292022d', class: "progress" }, h("div", { key: '256f6cac733d250af7ca1ca4ae347d8adba8dd0d', class: this.getClass() }, h("slot", { key: 'bf0de2e844c903c4a963a8123764b87ae9d432b5' })))));
+        return (h("div", { key: 'b5b6f14316d2f2581fc02d2ca4c1c6fc589f9b0a', class: this.getParentClass() }, h("div", { key: '9f7c3be8aa7fd5cfa58bfedd61335594723b91ce', class: "progress" }, h("div", { key: '758ac60825e1c5ad51fc1897d9f85fa8a148194e', class: this.getClass() }, h("slot", { key: '274937e50c80c677f2da3d08981cc01b3f4731c8' })))));
     }
     static get is() { return "p-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-92aa42e7.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-784ab1ae.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{p-92aa42e7.js → p-784ab1ae.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'papierjs';
-const BUILD = /* papierjs */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* papierjs */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.25.3 | MIT Licensed | https://stenciljs.com
@@ -175,6 +175,63 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
+var updateFallbackSlotVisibility = (elm) => {
+  const childNodes = elm.__childNodes || elm.childNodes;
+  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
+    getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
+      var _a;
+      if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
+        if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
+          slotNode.hidden = true;
+        } else {
+          slotNode.hidden = false;
+        }
+      }
+    });
+  }
+  for (const childNode of childNodes) {
+    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
+      updateFallbackSlotVisibility(childNode);
+    }
+  }
+};
+function getHostSlotNodes(childNodes, hostName, slotName) {
+  let i2 = 0;
+  let slottedNodes = [];
+  let childNode;
+  for (; i2 < childNodes.length; i2++) {
+    childNode = childNodes[i2];
+    if (childNode["s-sr"] && childNode["s-hn"] === hostName && (slotName === void 0 || childNode["s-sn"] === slotName)) {
+      slottedNodes.push(childNode);
+      if (typeof slotName !== "undefined") return slottedNodes;
+    }
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+  }
+  return slottedNodes;
+}
+var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+  const childNodes = [];
+  if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
+  while ((node = node.nextSibling) && node["s-sn"] === slotName) {
+    childNodes.push(node);
+  }
+  return childNodes;
+};
+var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
+  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
+      return true;
+    }
+    if (nodeToRelocate.getAttribute("slot") === slotName) {
+      return true;
+    }
+    return false;
+  }
+  if (nodeToRelocate["s-sn"] === slotName) {
+    return true;
+  }
+  return slotName === "";
+};
 var createTime = (fnName, tagName = "") => {
   {
     return () => {
@@ -185,6 +242,7 @@ var createTime = (fnName, tagName = "") => {
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
+  let slotName = null;
   let simple = false;
   let lastSimple = false;
   const vNodeChildren = [];
@@ -211,6 +269,9 @@ var h = (nodeName, vnodeData, ...children) => {
     if (vnodeData.key) {
       key = vnodeData.key;
     }
+    if (vnodeData.name) {
+      slotName = vnodeData.name;
+    }
     {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
@@ -226,6 +287,9 @@ var h = (nodeName, vnodeData, ...children) => {
   {
     vnode.$key$ = key;
   }
+  {
+    vnode.$name$ = slotName;
+  }
   return vnode;
 };
 var newVNode = (tag, text) => {
@@ -242,6 +306,9 @@ var newVNode = (tag, text) => {
   {
     vnode.$key$ = null;
   }
+  {
+    vnode.$name$ = null;
+  }
   return vnode;
 };
 var Host = {};
@@ -491,16 +558,38 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
+var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
+var checkSlotFallbackVisibility = false;
+var checkSlotRelocate = false;
 var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
+  var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
   let elm;
   let childNode;
+  let oldVNode;
+  if (!useNativeShadowDom) {
+    checkSlotRelocate = true;
+    if (newVNode2.$tag$ === "slot") {
+      newVNode2.$flags$ |= newVNode2.$children$ ? (
+        // slot element has fallback content
+        // still create an element that "mocks" the slot element
+        2 /* isSlotFallback */
+      ) : (
+        // slot element does not have fallback content
+        // create an html comment we'll use to always reference
+        // where actual slot content should sit next to
+        1 /* isSlotReference */
+      );
+    }
+  }
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
+  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = doc.createTextNode("");
   } else {
     elm = newVNode2.$elm$ = doc.createElement(
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
@@ -518,10 +607,50 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     }
   }
   elm["s-hn"] = hostTagName;
+  {
+    if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+      elm["s-sr"] = true;
+      elm["s-cr"] = contentRef;
+      elm["s-sn"] = newVNode2.$name$ || "";
+      elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
+      oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+      if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
+        {
+          putBackInOriginalLocation(oldParentVNode.$elm$, false);
+        }
+      }
+    }
+  }
   return elm;
 };
+var putBackInOriginalLocation = (parentElm, recursive) => {
+  plt.$flags$ |= 1 /* isTmpDisconnected */;
+  const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
+  if (parentElm["s-sr"] && BUILD.experimentalSlotFixes) {
+    let node = parentElm;
+    while (node = node.nextSibling) {
+      if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
+        oldSlotChildNodes.push(node);
+      }
+    }
+  }
+  for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
+    const childNode = oldSlotChildNodes[i2];
+    if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
+      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
+      childNode["s-ol"].remove();
+      childNode["s-ol"] = void 0;
+      childNode["s-sh"] = void 0;
+      checkSlotRelocate = true;
+    }
+    if (recursive) {
+      putBackInOriginalLocation(childNode, recursive);
+    }
+  }
+  plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = parentElm;
+  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
   if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
@@ -531,7 +660,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, before);
+        insertBefore(containerElm, childNode, referenceNode(before) );
       }
     }
   }
@@ -542,6 +671,14 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     if (vnode) {
       const elm = vnode.$elm$;
       if (elm) {
+        {
+          checkSlotFallbackVisibility = true;
+          if (elm["s-ol"]) {
+            elm["s-ol"].remove();
+          } else {
+            putBackInOriginalLocation(elm, true);
+          }
+        }
         elm.remove();
       }
     }
@@ -578,11 +715,17 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+        putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+      }
       patch(oldStartVnode, newEndVnode, isInitialRender);
       insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+        putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+      }
       patch(oldEndVnode, newStartVnode, isInitialRender);
       insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
@@ -613,7 +756,11 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       }
       if (node) {
         {
-          insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+          insertBefore(
+            referenceNode(oldStartVnode.$elm$).parentNode,
+            node,
+            referenceNode(oldStartVnode.$elm$)
+          );
         }
       }
     }
@@ -633,6 +780,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
+    if (leftVNode.$tag$ === "slot") {
+      return leftVNode.$name$ === rightVNode.$name$;
+    }
     if (!isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
@@ -643,12 +793,14 @@ var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   }
   return false;
 };
+var referenceNode = (node) => node && node["s-ol"] || node;
 var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
+  let defaultHolder;
   if (text === null) {
     {
       if (tag === "slot" && !useNativeShadowDom) ; else {
@@ -668,16 +820,69 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
+  } else if ((defaultHolder = elm["s-cr"])) {
+    defaultHolder.parentNode.textContent = text;
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
+var relocateNodes = [];
+var markSlotContentForRelocation = (elm) => {
+  let node;
+  let hostContentNodes;
+  let j;
+  const children = elm.__childNodes || elm.childNodes;
+  for (const childNode of children) {
+    if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
+      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
+      const slotName = childNode["s-sn"];
+      for (j = hostContentNodes.length - 1; j >= 0; j--) {
+        node = hostContentNodes[j];
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD.experimentalSlotFixes  )) {
+          if (isNodeLocatedInSlot(node, slotName)) {
+            let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+            checkSlotFallbackVisibility = true;
+            node["s-sn"] = node["s-sn"] || slotName;
+            if (relocateNodeData) {
+              relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"];
+              relocateNodeData.$slotRefNode$ = childNode;
+            } else {
+              node["s-sh"] = childNode["s-hn"];
+              relocateNodes.push({
+                $slotRefNode$: childNode,
+                $nodeToRelocate$: node
+              });
+            }
+            if (node["s-sr"]) {
+              relocateNodes.map((relocateNode) => {
+                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) {
+                  relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                  if (relocateNodeData && !relocateNode.$slotRefNode$) {
+                    relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
+                  }
+                }
+              });
+            }
+          } else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
+            relocateNodes.push({
+              $nodeToRelocate$: node
+            });
+          }
+        }
+      }
+    }
+    if (childNode.nodeType === 1 /* ElementNode */) {
+      markSlotContentForRelocation(childNode);
+    }
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
+  var _a, _b, _c, _d;
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -695,7 +900,77 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
   useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  {
+    contentRef = hostElm["s-cr"];
+    checkSlotFallbackVisibility = false;
+  }
   patch(oldVNode, rootVnode, isInitialLoad);
+  {
+    plt.$flags$ |= 1 /* isTmpDisconnected */;
+    if (checkSlotRelocate) {
+      markSlotContentForRelocation(rootVnode.$elm$);
+      for (const relocateData of relocateNodes) {
+        const nodeToRelocate = relocateData.$nodeToRelocate$;
+        if (!nodeToRelocate["s-ol"]) {
+          const orgLocationNode = doc.createTextNode("");
+          orgLocationNode["s-nr"] = nodeToRelocate;
+          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+        }
+      }
+      for (const relocateData of relocateNodes) {
+        const nodeToRelocate = relocateData.$nodeToRelocate$;
+        const slotRefNode = relocateData.$slotRefNode$;
+        if (slotRefNode) {
+          const parentNodeRef = slotRefNode.parentNode;
+          let insertBeforeNode = slotRefNode.nextSibling;
+          {
+            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
+            while (orgLocationNode) {
+              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
+              if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === (refNode.__parentNode || refNode.parentNode)) {
+                refNode = refNode.nextSibling;
+                while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) {
+                  refNode = refNode == null ? void 0 : refNode.nextSibling;
+                }
+                if (!refNode || !refNode["s-nr"]) {
+                  insertBeforeNode = refNode;
+                  break;
+                }
+              }
+              orgLocationNode = orgLocationNode.previousSibling;
+            }
+          }
+          const parent = nodeToRelocate.__parentNode || nodeToRelocate.parentNode;
+          const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
+          if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
+            if (nodeToRelocate !== insertBeforeNode) {
+              if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+                nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
+              }
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
+                nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
+              }
+            }
+          }
+          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
+        } else {
+          if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+            if (isInitialLoad) {
+              nodeToRelocate["s-ih"] = (_d = nodeToRelocate.hidden) != null ? _d : false;
+            }
+            nodeToRelocate.hidden = true;
+          }
+        }
+      }
+    }
+    if (checkSlotFallbackVisibility) {
+      updateFallbackSlotVisibility(rootVnode.$elm$);
+    }
+    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+    relocateNodes.length = 0;
+  }
+  contentRef = void 0;
 };
 
 // src/runtime/update-component.ts
@@ -1000,6 +1275,12 @@ var connectedCallback = (elm) => {
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
+      {
+        if (// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+        cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
+          setContentReference(elm);
+        }
+      }
       {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
@@ -1030,6 +1311,13 @@ var connectedCallback = (elm) => {
     endConnected();
   }
 };
+var setContentReference = (elm) => {
+  const contentRefElm = elm["s-cr"] = doc.createComment(
+    ""
+  );
+  contentRefElm["s-cn"] = true;
+  insertBefore(elm, contentRefElm, elm.firstChild);
+};
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
@@ -1138,6 +1426,6 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 // src/runtime/platform-options.ts
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
-export { H, setNonce as a, setPlatformOptions as b, createEvent as c, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
+export { H, setNonce as a, setPlatformOptions as b, createEvent as c, Host as d, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
 
-//# sourceMappingURL=p-92aa42e7.js.map
+//# sourceMappingURL=p-784ab1ae.js.map