@amiceli/papierjs 0.0.1 → 0.2.0

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

@@ -1,4 +1,3 @@
-// biome-ignore lint/correctness/noUnusedImports: required for jsx
 import { h } from "@stencil/core";
 export class ProgressBar {
     constructor() {
@@ -36,7 +35,7 @@ export class ProgressBar {
         return cssClass;
     }
     render() {
-        return (h("div", { key: '00775762381af67d2731ea4480fa0a0c4cbbf8b4', class: this.getParentClass() }, h("div", { key: '424fcbf00f05a00791fa8f0229dc98f393bd41e7', class: "progress" }, h("div", { key: '8b5c91514194ca154f04ae9b350c7c93cfbcd629', class: this.getClass() }, h("slot", { key: 'ce392a0c50b52033a03aba975a8373a7e8f1fa12' })))));
+        return (h("div", { key: 'a3a903b56dd7a216cd026067c6ab017ccac8896c', class: this.getParentClass() }, h("div", { key: '02567b1caa5e06b64f73000175215a0cbf9ebb6e', class: "progress" }, h("div", { key: '425f22fd262fa1b7022736db1e7c370dd51da643', class: this.getClass() }, h("slot", { key: 'eb83af0be2657e9b86bcd7aad422948f3c5e96e4' })))));
     }
     static get is() { return "p-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAelD,MAAM,OAAO,WAAW;IALxB;QAOI,SAAI,GAAsB,SAAS,CAAA;QAEnC,UAAK,GAAY,CAAC,CAAA;QAElB,YAAO,GAAa,KAAK,CAAA;QAEzB,SAAI,GAAa,KAAK,CAAA;KA+CzB;IA7CU,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;YACR,OAAO;YACP,SAAS;SACZ,CAAA;QACD,IAAI,QAAQ,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,CAAA;QAEpC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAA;QACzC,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAC,UAAU;gBACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvB,8DAAQ,CACN,CACJ,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["// biome-ignore lint/correctness/noUnusedImports: required for jsx\nimport { Component, Prop, h } from '@stencil/core'\n\ntype ProgressBarColor =\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'muted'\n    | 'primary'\n\n@Component({\n    tag: 'p-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true,\n})\nexport class ProgressBar {\n    @Prop()\n    type?: ProgressBarColor = 'primary'\n    @Prop()\n    value?: number = 0\n    @Prop()\n    striped?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    public getClass(): string {\n        const types = [\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n            'muted',\n            'primary',\n        ]\n        let cssClass = `bar w-${this.value}`\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} primary`\n        } else {\n            cssClass = `${cssClass} ${this.type}`\n        }\n\n        if (this.striped) {\n            cssClass = `${cssClass} striped`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class=\"progress\">\n                    <div class={this.getClass()}>\n                        <slot />\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAelD,MAAM,OAAO,WAAW;IALxB;QAOI,SAAI,GAAsB,SAAS,CAAA;QAEnC,UAAK,GAAY,CAAC,CAAA;QAElB,YAAO,GAAa,KAAK,CAAA;QAEzB,SAAI,GAAa,KAAK,CAAA;KA+CzB;IA7CU,QAAQ;QACX,MAAM,KAAK,GAAG;YACV,WAAW;YACX,SAAS;YACT,SAAS;YACT,QAAQ;YACR,OAAO;YACP,SAAS;SACZ,CAAA;QACD,IAAI,QAAQ,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,CAAA;QAEpC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAA;QACzC,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,QAAQ,GAAG,GAAG,QAAQ,UAAU,CAAA;QACpC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAC,UAAU;gBACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvB,8DAAQ,CACN,CACJ,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype ProgressBarColor =\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'muted'\n    | 'primary'\n\n@Component({\n    tag: 'p-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true,\n})\nexport class ProgressBar {\n    @Prop()\n    type?: ProgressBarColor = 'primary'\n    @Prop()\n    value?: number = 0\n    @Prop()\n    striped?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    public getClass(): string {\n        const types = [\n            'secondary',\n            'success',\n            'warning',\n            'danger',\n            'muted',\n            'primary',\n        ]\n        let cssClass = `bar w-${this.value}`\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} primary`\n        } else {\n            cssClass = `${cssClass} ${this.type}`\n        }\n\n        if (this.striped) {\n            cssClass = `${cssClass} striped`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class=\"progress\">\n                    <div class={this.getClass()}>\n                        <slot />\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5ec03f76.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-81e1c3fa.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{p-5ec03f76.js → p-81e1c3fa.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'papierjs';
-const BUILD = /* papierjs */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, 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: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: false, 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: false, 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: 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: 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
@@ -49,6 +49,22 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  let supportsListenerOptions2 = false;
+  try {
+    doc.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -159,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 () => {
@@ -169,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 = [];
@@ -195,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) {
@@ -210,6 +287,9 @@ var h = (nodeName, vnodeData, ...children) => {
   {
     vnode.$key$ = key;
   }
+  {
+    vnode.$name$ = slotName;
+  }
   return vnode;
 };
 var newVNode = (tag, text) => {
@@ -226,6 +306,9 @@ var newVNode = (tag, text) => {
   {
     vnode.$key$ = null;
   }
+  {
+    vnode.$name$ = null;
+  }
   return vnode;
 };
 var Host = {};
@@ -475,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$
@@ -502,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;
@@ -515,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) );
       }
     }
   }
@@ -526,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();
       }
     }
@@ -562,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];
@@ -597,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$)
+          );
         }
       }
     }
@@ -617,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$;
     }
@@ -627,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 {
@@ -652,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);
@@ -679,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
@@ -780,12 +1071,16 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad", void 0, elm);
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -810,6 +1105,16 @@ var postUpdateComponent = (hostRef) => {
 var appDidLoad = (who) => {
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
+var safeCall = (instance, method, arg, elm) => {
+  if (instance && instance[method]) {
+    try {
+      return instance[method](arg);
+    } catch (e) {
+      consoleError(e, elm);
+    }
+  }
+  return void 0;
+};
 var addHydratedFlag = (elm) => {
   var _a;
   return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
@@ -970,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) {
@@ -992,6 +1303,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
       }
@@ -999,9 +1311,22 @@ 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) {
-    getHostRef(elm);
+    const hostRef = getHostRef(elm);
+    {
+      if (hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
   }
   if (rootAppliedStyles.has(elm)) {
     rootAppliedStyles.delete(elm);
@@ -1018,6 +1343,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   {
     cmpMeta.$members$ = compactMeta[2];
   }
+  {
+    cmpMeta.$listeners$ = compactMeta[3];
+  }
   Object.assign(Cstr.prototype, {
     __hasHostListenerAttached: false,
     __registerHost() {
@@ -1025,7 +1353,8 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     },
     connectedCallback() {
       if (!this.__hasHostListenerAttached) {
-        getHostRef(this);
+        const hostRef = getHostRef(this);
+        addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
         this.__hasHostListenerAttached = true;
       }
       connectedCallback(this);
@@ -1062,6 +1391,34 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   Cstr.is = cmpMeta.$tagName$;
   return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners) {
+    listeners.map(([flags, name, method]) => {
+      const target = getHostListenerTarget(elm, flags) ;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  try {
+    {
+      hostRef.$hostElement$[methodName](ev);
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var getHostListenerTarget = (elm, flags) => {
+  if (flags & 8 /* TargetWindow */) return win;
+  return elm;
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
@@ -1071,4 +1428,4 @@ 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 };
 
-//# sourceMappingURL=p-5ec03f76.js.map
+//# sourceMappingURL=p-81e1c3fa.js.map