@siemens/ix 4.4.0 → 5.1.0

package/dist/esm/{index-BEPo7U1W.js → index-EBgS4zhE.js}

@@ -1,8 +1,8 @@
 const NAMESPACE = 'siemens-ix';
-const BUILD = /* siemens-ix */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
+const BUILD = /* siemens-ix */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.43.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -33,6 +33,19 @@ var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
 var TYPE_CONSTANT = "type";
 var VALUE_CONSTANT = "value";
 var SERIALIZED_PREFIX = "serialized:";
+
+// src/utils/get-prop-descriptor.ts
+function getPropertyDescriptor(obj, memberName, getOnly) {
+  const stopAt = typeof HTMLElement !== "undefined" ? HTMLElement.prototype : null;
+  while (obj && obj !== stopAt) {
+    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+    if (desc && (!getOnly || desc.get)) return desc;
+    obj = Object.getPrototypeOf(obj);
+  }
+  return void 0;
+}
+
+// src/utils/es2022-rewire-class-members.ts
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -40,7 +53,7 @@ var reWireGetterSetter = (instance, hostRef) => {
   members.map(([memberName, [memberFlags]]) => {
     if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
       const ogValue = instance[memberName];
-      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
+      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName, true) || Object.getOwnPropertyDescriptor(instance, memberName);
       if (ogDescriptor) {
         Object.defineProperty(instance, memberName, {
           get() {
@@ -53,18 +66,14 @@ var reWireGetterSetter = (instance, hostRef) => {
           enumerable: true
         });
       }
-      instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
+      if (hostRef.$instanceValues$.has(memberName)) {
+        instance[memberName] = hostRef.$instanceValues$.get(memberName);
+      } else if (ogValue !== void 0) {
+        instance[memberName] = ogValue;
+      }
     }
   });
 };
-function getPropertyDescriptor(obj, memberName) {
-  while (obj) {
-    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
-    if (desc == null ? void 0 : desc.get) return desc;
-    obj = Object.getPrototypeOf(obj);
-  }
-  return void 0;
-}
 
 // src/client/client-host-ref.ts
 var getHostRef = (ref) => {
@@ -139,10 +148,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-application-header.entry.js').then(processMod, consoleError);
-                case 'ix-application-sidebar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-application-sidebar.entry.js').then(processMod, consoleError);
                 case 'ix-application-switch-modal':
                     return import(
                       /* webpackMode: "lazy" */
@@ -155,6 +160,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-breadcrumb.entry.js').then(processMod, consoleError);
+                case 'ix-breadcrumb-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-breadcrumb-item.entry.js').then(processMod, consoleError);
                 case 'ix-card-list':
                     return import(
                       /* webpackMode: "lazy" */
@@ -183,6 +192,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-content-header.entry.js').then(processMod, consoleError);
+                case 'ix-css-grid':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-css-grid.entry.js').then(processMod, consoleError);
                 case 'ix-css-grid-item':
                     return import(
                       /* webpackMode: "lazy" */
@@ -199,18 +212,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-date-input.entry.js').then(processMod, consoleError);
-                case 'ix-datetime-picker':
+                case 'ix-datetime-input':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-datetime-picker.entry.js').then(processMod, consoleError);
-                case 'ix-drawer':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-drawer.entry.js').then(processMod, consoleError);
-                case 'ix-dropdown-button':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-dropdown-button.entry.js').then(processMod, consoleError);
+                      './ix-datetime-input.entry.js').then(processMod, consoleError);
                 case 'ix-dropdown-header':
                     return import(
                       /* webpackMode: "lazy" */
@@ -259,10 +264,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-input.entry.js').then(processMod, consoleError);
-                case 'ix-input-group':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-input-group.entry.js').then(processMod, consoleError);
                 case 'ix-key-value':
                     return import(
                       /* webpackMode: "lazy" */
@@ -283,6 +284,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-link-button.entry.js').then(processMod, consoleError);
+                case 'ix-menu':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-menu.entry.js').then(processMod, consoleError);
                 case 'ix-menu-about':
                     return import(
                       /* webpackMode: "lazy" */
@@ -299,6 +304,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-menu-avatar.entry.js').then(processMod, consoleError);
+                case 'ix-menu-category':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-menu-category.entry.js').then(processMod, consoleError);
+                case 'ix-menu-settings':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-menu-settings.entry.js').then(processMod, consoleError);
                 case 'ix-menu-settings-item':
                     return import(
                       /* webpackMode: "lazy" */
@@ -331,10 +344,30 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-pane-layout.entry.js').then(processMod, consoleError);
-                case 'ix-pill':
+                case 'ix-popover':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-pill.entry.js').then(processMod, consoleError);
+                      './ix-popover.entry.js').then(processMod, consoleError);
+                case 'ix-popover-content':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-popover-content.entry.js').then(processMod, consoleError);
+                case 'ix-popover-footer':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-popover-footer.entry.js').then(processMod, consoleError);
+                case 'ix-popover-header':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-popover-header.entry.js').then(processMod, consoleError);
+                case 'ix-popover-image':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-popover-image.entry.js').then(processMod, consoleError);
+                case 'ix-progress-indicator':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-progress-indicator.entry.js').then(processMod, consoleError);
                 case 'ix-push-card':
                     return import(
                       /* webpackMode: "lazy" */
@@ -347,6 +380,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-radio-group.entry.js').then(processMod, consoleError);
+                case 'ix-range-field':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-range-field.entry.js').then(processMod, consoleError);
                 case 'ix-slider':
                     return import(
                       /* webpackMode: "lazy" */
@@ -355,6 +392,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-split-button.entry.js').then(processMod, consoleError);
+                case 'ix-textarea':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ix-textarea.entry.js').then(processMod, consoleError);
                 case 'ix-tile':
                     return import(
                       /* webpackMode: "lazy" */
@@ -375,14 +416,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-toggle-button.entry.js').then(processMod, consoleError);
-                case 'ix-upload':
+                case 'ix-tree':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-upload.entry.js').then(processMod, consoleError);
-                case 'ix-validation-tooltip':
+                      './ix-tree.entry.js').then(processMod, consoleError);
+                case 'ix-upload':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-validation-tooltip.entry.js').then(processMod, consoleError);
+                      './ix-upload.entry.js').then(processMod, consoleError);
                 case 'ix-workflow-step':
                     return import(
                       /* webpackMode: "lazy" */
@@ -391,134 +432,110 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-workflow-steps.entry.js').then(processMod, consoleError);
-                case 'ix-breadcrumb-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-breadcrumb-item.entry.js').then(processMod, consoleError);
-                case 'ix-select':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-select.entry.js').then(processMod, consoleError);
-                case 'ix-toast':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-toast.entry.js').then(processMod, consoleError);
-                case 'ix-tree-item':
+                case 'ix-avatar_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-tree-item.entry.js').then(processMod, consoleError);
-                case 'ix-menu-expand-icon':
+                      './ix-avatar_2.entry.js').then(processMod, consoleError);
+                case 'ix-card-accordion_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-menu-expand-icon.entry.js').then(processMod, consoleError);
-                case 'ix-time-picker':
+                      './ix-card-accordion_2.entry.js').then(processMod, consoleError);
+                case 'ix-datetime-picker':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-time-picker.entry.js').then(processMod, consoleError);
-                case 'ix-divider':
+                      './ix-datetime-picker.entry.js').then(processMod, consoleError);
+                case 'ix-group-context-menu_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-divider.entry.js').then(processMod, consoleError);
-                case 'ix-date-time-card':
+                      './ix-group-context-menu_2.entry.js').then(processMod, consoleError);
+                case 'ix-modal':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-date-time-card.entry.js').then(processMod, consoleError);
-                case 'ix-dropdown-item':
+                      './ix-modal.entry.js').then(processMod, consoleError);
+                case 'ix-modal-content_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-dropdown-item.entry.js').then(processMod, consoleError);
-                case 'ix-button':
+                      './ix-modal-content_2.entry.js').then(processMod, consoleError);
+                case 'ix-select':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-button.entry.js').then(processMod, consoleError);
-                case 'ix-dropdown':
+                      './ix-select.entry.js').then(processMod, consoleError);
+                case 'ix-toast':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-dropdown.entry.js').then(processMod, consoleError);
-                case 'ix-tooltip':
+                      './ix-toast.entry.js').then(processMod, consoleError);
+                case 'ix-tree-item':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-tooltip.entry.js').then(processMod, consoleError);
-                case 'ix-typography':
+                      './ix-tree-item.entry.js').then(processMod, consoleError);
+                case 'ix-col_4':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-typography.entry.js').then(processMod, consoleError);
-                case 'ix-css-grid':
+                      './ix-col_4.entry.js').then(processMod, consoleError);
+                case 'ix-menu-expand-icon':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-css-grid.entry.js').then(processMod, consoleError);
-                case 'ix-menu':
+                      './ix-menu-expand-icon.entry.js').then(processMod, consoleError);
+                case 'ix-menu-item':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-menu.entry.js').then(processMod, consoleError);
-                case 'ix-menu-category':
+                      './ix-menu-item.entry.js').then(processMod, consoleError);
+                case 'ix-filter-chip_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-menu-category.entry.js').then(processMod, consoleError);
-                case 'ix-modal':
+                      './ix-filter-chip_2.entry.js').then(processMod, consoleError);
+                case 'ix-pill_4':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-modal.entry.js').then(processMod, consoleError);
-                case 'ix-textarea':
+                      './ix-pill_4.entry.js').then(processMod, consoleError);
+                case 'ix-tab-panel':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-textarea.entry.js').then(processMod, consoleError);
-                case 'ix-tree':
+                      './ix-tab-panel.entry.js').then(processMod, consoleError);
+                case 'ix-card_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-tree.entry.js').then(processMod, consoleError);
-                case 'ix-menu-item':
+                      './ix-card_2.entry.js').then(processMod, consoleError);
+                case 'ix-divider':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-menu-item.entry.js').then(processMod, consoleError);
-                case 'ix-progress-indicator':
+                      './ix-divider.entry.js').then(processMod, consoleError);
+                case 'ix-date-picker':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-progress-indicator.entry.js').then(processMod, consoleError);
-                case 'ix-avatar_2':
+                      './ix-date-picker.entry.js').then(processMod, consoleError);
+                case 'ix-date-time-card':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-avatar_2.entry.js').then(processMod, consoleError);
-                case 'ix-card-accordion_2':
+                      './ix-date-time-card.entry.js').then(processMod, consoleError);
+                case 'ix-dropdown-button':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-card-accordion_2.entry.js').then(processMod, consoleError);
-                case 'ix-group-context-menu_2':
+                      './ix-dropdown-button.entry.js').then(processMod, consoleError);
+                case 'ix-field-label_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-group-context-menu_2.entry.js').then(processMod, consoleError);
-                case 'ix-modal-content_2':
+                      './ix-field-label_2.entry.js').then(processMod, consoleError);
+                case 'ix-dropdown_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-modal-content_2.entry.js').then(processMod, consoleError);
-                case 'ix-tab-item_2':
+                      './ix-dropdown_2.entry.js').then(processMod, consoleError);
+                case 'ix-button':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-tab-item_2.entry.js').then(processMod, consoleError);
-                case 'ix-card_2':
+                      './ix-button.entry.js').then(processMod, consoleError);
+                case 'ix-tooltip':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-card_2.entry.js').then(processMod, consoleError);
+                      './ix-tooltip.entry.js').then(processMod, consoleError);
                 case 'ix-icon-button_2':
                     return import(
                       /* webpackMode: "lazy" */
                       './ix-icon-button_2.entry.js').then(processMod, consoleError);
-                case 'ix-filter-chip_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-filter-chip_2.entry.js').then(processMod, consoleError);
-                case 'ix-field-label_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-field-label_2.entry.js').then(processMod, consoleError);
-                case 'ix-col_4':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './ix-col_4.entry.js').then(processMod, consoleError);
-                case 'ix-menu-settings':
+                case 'ix-typography':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ix-menu-settings.entry.js').then(processMod, consoleError);
+                      './ix-typography.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -664,6 +681,27 @@ function createShadowRoot(cmpMeta) {
     }
   }
 }
+var updateFallbackSlotVisibility = (elm) => {
+  const childNodes = internalCall(elm, "childNodes");
+  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
+    getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
+      if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
+        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
+          slotNode.hidden = true;
+        } else {
+          slotNode.hidden = false;
+        }
+      }
+    });
+  }
+  let i2 = 0;
+  for (i2 = 0; i2 < childNodes.length; i2++) {
+    const childNode = childNodes[i2];
+    if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
+      updateFallbackSlotVisibility(childNode);
+    }
+  }
+};
 var getSlottedChildNodes = (childNodes) => {
   const result = [];
   for (let i2 = 0; i2 < childNodes.length; i2++) {
@@ -674,6 +712,44 @@ var getSlottedChildNodes = (childNodes) => {
   }
   return result;
 };
+function getHostSlotNodes(childNodes, hostName, slotName) {
+  let i2 = 0;
+  let slottedNodes = [];
+  let childNode;
+  for (; i2 < childNodes.length; i2++) {
+    childNode = childNodes[i2];
+    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
+      slottedNodes.push(childNode);
+      if (typeof slotName !== "undefined") return slottedNodes;
+    }
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+  }
+  return slottedNodes;
+}
+var getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
+  const childNodes = [];
+  if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
+  let node = slot;
+  while (node = node.nextSibling) {
+    if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) 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 addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
   if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
     return;
@@ -730,6 +806,18 @@ function patchSlotNode(node) {
   node.assignedElements = assignedFactory(true);
   node.assignedNodes = assignedFactory(false);
 }
+function dispatchSlotChangeEvent(elm) {
+  elm.dispatchEvent(new CustomEvent("slotchange", { bubbles: false, cancelable: false, composed: false }));
+}
+function findSlotFromSlottedNode(slottedNode, parentHost) {
+  var _a;
+  parentHost = parentHost || ((_a = slottedNode["s-ol"]) == null ? void 0 : _a.parentElement);
+  if (!parentHost) return { slotNode: null, slotName: "" };
+  const slotName = slottedNode["s-sn"] = getSlotName(slottedNode) || "";
+  const childNodes = internalCall(parentHost, "childNodes");
+  const slotNode = getHostSlotNodes(childNodes, parentHost.tagName, slotName)[0];
+  return { slotNode, slotName };
+}
 function internalCall(node, method) {
   if ("__" + method in node) {
     const toReturn = node["__" + method];
@@ -914,6 +1002,7 @@ var h = (nodeName, vnodeData, ...children) => {
   }
   let child = null;
   let key = null;
+  let slotName = null;
   let simple = false;
   let lastSimple = false;
   const vNodeChildren = [];
@@ -940,6 +1029,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) {
@@ -962,6 +1054,9 @@ var h = (nodeName, vnodeData, ...children) => {
   {
     vnode.$key$ = key;
   }
+  {
+    vnode.$name$ = slotName;
+  }
   return vnode;
 };
 var newVNode = (tag, text) => {
@@ -979,6 +1074,9 @@ var newVNode = (tag, text) => {
   {
     vnode.$key$ = null;
   }
+  {
+    vnode.$name$ = null;
+  }
   return vnode;
 };
 var Host = {};
@@ -1291,6 +1389,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         } else if (childNodeType === CONTENT_REF_ID) {
           if (shadowRootNodes) {
             node.remove();
+          } else {
+            hostElm["s-cr"] = node;
+            node["s-cn"] = true;
           }
         }
       }
@@ -1402,6 +1503,31 @@ var findCorrespondingNode = (node, type) => {
   return sibling;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -1498,11 +1624,19 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 
 // src/runtime/parse-property-value.ts
@@ -1748,18 +1882,43 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
+var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
+var checkSlotFallbackVisibility = false;
+var checkSlotRelocate = false;
 var isSvgMode = false;
 var refCallbacksToRemove = [];
 var refCallbacksToAttach = [];
 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$ = win.document.createTextNode(newVNode2.$text$);
+  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = win.document.createTextNode("");
+    {
+      updateElement(null, newVNode2, isSvgMode);
+    }
   } else {
     if (!isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
@@ -1769,7 +1928,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     }
     elm = newVNode2.$elm$ = win.document.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      newVNode2.$tag$
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
     if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
@@ -1795,6 +1954,19 @@ 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;
+      patchSlotNode(elm);
+      oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+      if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
+        relocateToHostRoot(oldParentVNode.$elm$);
+      }
+    }
+  }
   return elm;
 };
 var relocateToHostRoot = (parentElm) => {
@@ -1811,13 +1983,40 @@ var relocateToHostRoot = (parentElm) => {
       if (childNode["s-sh"] != null) {
         insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
         childNode["s-sh"] = void 0;
+        checkSlotRelocate = true;
+      }
+    }
+  }
+  plt.$flags$ &= -2 /* isTmpDisconnected */;
+};
+var putBackInOriginalLocation = (parentElm, recursive) => {
+  plt.$flags$ |= 1 /* isTmpDisconnected */;
+  const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
+  if (parentElm["s-sr"]) {
+    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$ &= -2 /* 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;
@@ -1830,7 +2029,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) );
       }
     }
   }
@@ -1842,6 +2041,14 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
+        {
+          checkSlotFallbackVisibility = true;
+          if (elm["s-ol"]) {
+            elm["s-ol"].remove();
+          } else {
+            putBackInOriginalLocation(elm, true);
+          }
+        }
         elm.remove();
       }
     }
@@ -1879,11 +2086,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(containerElm, 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(containerElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
@@ -1914,7 +2127,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$)
+          );
         }
       }
     }
@@ -1934,6 +2151,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$;
     }
@@ -1944,12 +2164,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) {
     {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
@@ -1981,10 +2203,62 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     if (isSvgMode && tag === "svg") {
       isSvgMode = false;
     }
+  } 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"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+          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 nullifyVNodeRefs = (vNode) => {
   {
     if (vNode.$attrs$ && vNode.$attrs$.ref) {
@@ -2007,6 +2281,14 @@ var flushQueuedRefCallbacks = () => {
   }
 };
 var insertBefore = (parent, newNode, reference, isInitialLoad) => {
+  {
+    if (typeof newNode["s-sn"] === "string") {
+      parent.insertBefore(newNode, reference);
+      const { slotNode } = findSlotFromSlottedNode(newNode);
+      if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+      return newNode;
+    }
+  }
   if (parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
@@ -2014,6 +2296,7 @@ var insertBefore = (parent, newNode, reference, isInitialLoad) => {
   }
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
+  var _a, _b, _c, _d, _e;
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -2040,7 +2323,106 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
   useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
+  {
+    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"] && win.document) {
+          const orgLocationNode = win.document.createTextNode("");
+          orgLocationNode["s-nr"] = nodeToRelocate;
+          insertBefore(
+            nodeToRelocate.parentNode,
+            nodeToRelocate["s-ol"] = orgLocationNode,
+            nodeToRelocate,
+            isInitialLoad
+          );
+        }
+      }
+      for (const relocateData of relocateNodes) {
+        const nodeToRelocate = relocateData.$nodeToRelocate$;
+        const slotRefNode = relocateData.$slotRefNode$;
+        if (nodeToRelocate.nodeType === 1 /* ElementNode */ && isInitialLoad) {
+          nodeToRelocate["s-ih"] = (_a = nodeToRelocate.hidden) != null ? _a : false;
+        }
+        if (slotRefNode) {
+          const parentNodeRef = slotRefNode.parentNode;
+          let insertBeforeNode = slotRefNode.nextSibling;
+          if (insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
+            let orgLocationNode = (_b = nodeToRelocate["s-ol"]) == null ? void 0 : _b.previousSibling;
+            while (orgLocationNode) {
+              let refNode = (_c = orgLocationNode["s-nr"]) != null ? _c : 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) {
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode, isInitialLoad);
+              if (nodeToRelocate.nodeType === 8 /* CommentNode */ && nodeToRelocate.nodeValue.startsWith("s-nt-")) {
+                const textNode = win.document.createTextNode(nodeToRelocate.nodeValue.replace(/^s-nt-/, ""));
+                textNode["s-hn"] = nodeToRelocate["s-hn"];
+                textNode["s-sn"] = nodeToRelocate["s-sn"];
+                textNode["s-sh"] = nodeToRelocate["s-sh"];
+                textNode["s-sr"] = nodeToRelocate["s-sr"];
+                textNode["s-ol"] = nodeToRelocate["s-ol"];
+                textNode["s-ol"]["s-nr"] = textNode;
+                insertBefore(nodeToRelocate.parentNode, textNode, nodeToRelocate, isInitialLoad);
+                nodeToRelocate.parentNode.removeChild(nodeToRelocate);
+              }
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
+                nodeToRelocate.hidden = (_d = nodeToRelocate["s-ih"]) != null ? _d : false;
+              }
+            }
+          }
+          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
+        } else if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+          nodeToRelocate.hidden = true;
+        }
+      }
+    }
+    if (checkSlotFallbackVisibility) {
+      updateFallbackSlotVisibility(rootVnode.$elm$);
+    }
+    plt.$flags$ &= -2 /* isTmpDisconnected */;
+    relocateNodes.length = 0;
+  }
+  if (!useNativeShadowDom && !(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && hostElm["s-cr"]) {
+    const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
+    for (const childNode of children) {
+      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+        if (isInitialLoad && childNode["s-ih"] == null) {
+          childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
+        }
+        if (childNode.nodeType === 1 /* ElementNode */) {
+          childNode.hidden = true;
+        } else if (childNode.nodeType === 3 /* TextNode */ && !!childNode.nodeValue.trim()) {
+          const textCommentNode = win.document.createComment("s-nt-" + childNode.nodeValue);
+          textCommentNode["s-sn"] = childNode["s-sn"];
+          insertBefore(childNode.parentNode, textCommentNode, childNode, isInitialLoad);
+          childNode.parentNode.removeChild(childNode);
+        }
+      }
+    }
+  }
+  contentRef = void 0;
   flushQueuedRefCallbacks();
 };
 
@@ -2087,6 +2469,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     {
+      if (hostRef.$deferredConnectedCallback$) {
+        hostRef.$deferredConnectedCallback$ = false;
+        safeCall(instance, "connectedCallback", void 0, elm);
+      }
       {
         hostRef.$flags$ |= 256 /* isListenReady */;
         if (hostRef.$queuedListeners$) {
@@ -2322,7 +2708,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -2334,7 +2720,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {};
+        const { get: origGetter, set: origSetter } = getPropertyDescriptor(prototype, memberName) || {};
         if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */;
         if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */;
         if (flags & 1 /* isElementConstructor */ || !origGetter) {
@@ -2452,11 +2838,13 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -2501,7 +2889,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (!Cstr.isProxied) {
           {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -2524,8 +2912,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           hostRef.$flags$ |= 128 /* isWatchReady */;
         }
         endNewInstance();
-        {
+        const needsDeferredCallback = cmpMeta.$flags$ & 4 /* hasSlotRelocation */;
+        if (!needsDeferredCallback) {
           fireConnectedCallback(hostRef.$lazyInstance$, elm);
+        } else {
+          hostRef.$deferredConnectedCallback$ = true;
         }
       } else {
         Cstr = elm.constructor;
@@ -2591,6 +2982,12 @@ var connectedCallback = (elm) => {
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
+      if (!hostId) {
+        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) {
@@ -2602,7 +2999,7 @@ var connectedCallback = (elm) => {
       }
       if (cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
+          if (memberFlags & 31 /* Prop */ && Object.prototype.hasOwnProperty.call(elm, memberName)) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;
@@ -2623,6 +3020,16 @@ var connectedCallback = (elm) => {
     endConnected();
   }
 };
+var setContentReference = (elm) => {
+  if (!win.document) {
+    return;
+  }
+  const contentRefElm = elm["s-cr"] = win.document.createComment(
+    ""
+  );
+  contentRefElm["s-cn"] = true;
+  insertBefore(elm, contentRefElm, elm.firstChild);
+};
 var disconnectInstance = (instance, elm) => {
   {
     safeCall(instance, "disconnectedCallback", void 0, elm || instance);
@@ -2676,15 +3083,19 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   {
     hydrateScopedToShadow();
   }
+  let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
         $members$: compactMeta[2],
         $listeners$: compactMeta[3]
       };
+      if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+        hasSlotRelocation = true;
+      }
       {
         cmpMeta.$members$ = compactMeta[2];
       }
@@ -2695,9 +3106,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
@@ -2778,6 +3189,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     });
   });
   if (cmpTags.length > 0) {
+    if (hasSlotRelocation) {
+      dataStyles.textContent += SLOT_FB_CSS;
+    }
     {
       dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
@@ -2829,6 +3243,9 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 4 /* TargetDocument */) {
+    return doc;
+  }
   if (flags & 8 /* TargetWindow */) {
     return win;
   }
@@ -2838,6 +3255,11 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
   passive: (flags & 1 /* Passive */) !== 0,
   capture: (flags & 2 /* Capture */) !== 0
 } : (flags & 2 /* Capture */) !== 0;
+var baseClass = class {
+} ;
+function Mixin(...mixins) {
+  return mixins.reduceRight((acc, mixin) => mixin(acc), baseClass);
+}
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
@@ -2845,4 +3267,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { Fragment as F, Host as H, setPlatformHelpers as a, bootstrapLazy as b, createEvent as c, readTask as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, Host as H, Mixin as M, setPlatformHelpers as a, bootstrapLazy as b, createEvent as c, readTask as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };