@biggive/components 202501021532.0.0 → 202501071646.0.0

package/hydrate/index.js

@@ -128,10 +128,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'biggive';
-const BUILD = /* biggive */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, 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: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* biggive */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, 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: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
- Stencil Hydrate Platform v4.23.0 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.23.1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -149,9 +149,6 @@ var getAssetPath = (path) => {
 var EMPTY_OBJ = {};
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
-
-// src/utils/helpers.ts
-var isDef = (v) => v != null;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -228,6 +225,95 @@ var DEFAULT_DOC_DATA = {
   staticComponents: /* @__PURE__ */ new Set()
 };
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+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);
+    }
+  }
+};
+var 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 || 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 addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
+  let slottedNodeLocation;
+  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
+    slottedNodeLocation = newChild["s-ol"];
+  } else {
+    slottedNodeLocation = document.createTextNode("");
+    slottedNodeLocation["s-nr"] = newChild;
+  }
+  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
+  const parent = slotNode["s-cr"].parentNode;
+  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
+  if (typeof position !== "undefined") {
+    {
+      slottedNodeLocation["s-oo"] = position;
+      const childNodes = parent.__childNodes || parent.childNodes;
+      const slotRelocateNodes = [slottedNodeLocation];
+      childNodes.forEach((n) => {
+        if (n["s-nr"]) slotRelocateNodes.push(n);
+      });
+      slotRelocateNodes.sort((a, b) => {
+        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
+        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+        return 0;
+      });
+      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
+    }
+  } else {
+    appendMethod.call(parent, slottedNodeLocation);
+  }
+  newChild["s-ol"] = slottedNodeLocation;
+  newChild["s-sh"] = slotNode["s-hn"];
+};
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -346,12 +432,19 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
-      const newClasses = parseClassList(newValue);
-      if (elm["s-si"] && newClasses.indexOf(elm["s-si"]) < 0) {
+      let newClasses = parseClassList(newValue);
+      if (elm["s-si"]) {
         newClasses.push(elm["s-si"]);
+        oldClasses.forEach((c) => {
+          if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        });
+        newClasses = [...new Set(newClasses)];
+        classList.add(...newClasses);
+        delete elm["s-si"];
+      } else {
+        classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+        classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
       }
-      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     } else if (memberName === "style") {
       {
         for (const prop in oldValue) {
@@ -428,7 +521,15 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   }
 };
 var parseClassListRegex = /\s/;
-var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var parseClassList = (value) => {
+  if (typeof value === "object" && "baseVal" in value) {
+    value = value.baseVal;
+  }
+  if (!value) {
+    return [];
+  }
+  return value.split(parseClassListRegex);
+};
 var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
@@ -457,16 +558,13 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
-
-// src/runtime/vdom/vdom-render.ts
-var scopeId;
 var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
 var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
-var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
@@ -476,9 +574,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   if (!useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
-      if (scopeId) {
-        parentElm.classList.add(scopeId + "-s");
-      }
       newVNode2.$flags$ |= newVNode2.$children$ ? (
         // slot element has fallback content
         // still create an element that "mocks" the slot element
@@ -509,14 +604,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
-    const rootNode = elm.getRootNode();
-    const isElementWithinShadowRoot = !rootNode.querySelector("body");
-    if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
-      elm.classList.add(elm["s-si"] = scopeId);
-    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
-        childNode = createElm(oldParentVNode, newVNode2, i2, elm);
+        childNode = createElm(oldParentVNode, newVNode2, i2);
         if (childNode) {
           elm.appendChild(childNode);
         }
@@ -561,7 +651,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
+      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -581,7 +671,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   }
   for (; startIdx <= endIdx; ++startIdx) {
     if (vnodes[startIdx]) {
-      childNode = createElm(null, parentVNode, startIdx, parentElm);
+      childNode = createElm(null, parentVNode, startIdx);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
         insertBefore(containerElm, childNode, referenceNode(before) );
@@ -668,7 +758,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -676,12 +766,16 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         }
         newStartVnode = newCh[++newStartIdx];
       } else {
-        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx, parentElm);
+        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
         {
-          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
+          insertBefore(
+            referenceNode(oldStartVnode.$elm$).parentNode,
+            node,
+            referenceNode(oldStartVnode.$elm$)
+          );
         }
       }
     }
@@ -702,28 +796,19 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
     if (leftVNode.$tag$ === "slot") {
-      if (
-        // The component gets hydrated and no VDOM has been initialized.
-        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
-        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
-        // hydration comments to be removed
-        leftVNode.$elm$.nodeType !== 8
-      ) {
-        return false;
-      }
       return leftVNode.$name$ === rightVNode.$name$;
     }
     if (!isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
+    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
+      leftVNode.$key$ = rightVNode.$key$;
+    }
     return true;
   }
   return false;
 };
-var referenceNode = (node) => {
-  return node && node["s-ol"] || node;
-};
-var parentReferenceNode = (node) => (node["s-ol"] ? node["s-ol"] : node).parentNode;
+var referenceNode = (node) => node && node["s-ol"] || node;
 var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
@@ -762,33 +847,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
-var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */) {
-      if (childNode["s-sr"]) {
-        const slotName = childNode["s-sn"];
-        childNode.hidden = false;
-        for (const siblingNode of childNodes) {
-          if (siblingNode !== childNode) {
-            if (siblingNode["s-hn"] !== childNode["s-hn"] || slotName !== "") {
-              if (siblingNode.nodeType === 1 /* ElementNode */ && (slotName === siblingNode.getAttribute("slot") || slotName === siblingNode["s-sn"]) || siblingNode.nodeType === 3 /* TextNode */ && slotName === siblingNode["s-sn"]) {
-                childNode.hidden = true;
-                break;
-              }
-            } else if (slotName === siblingNode["s-sn"]) {
-              if (siblingNode.nodeType === 1 /* ElementNode */ || siblingNode.nodeType === 3 /* TextNode */ && siblingNode.textContent.trim() !== "") {
-                childNode.hidden = true;
-                break;
-              }
-            }
-          }
-        }
-      }
-      updateFallbackSlotVisibility(childNode);
-    }
-  }
-};
 var relocateNodes = [];
 var markSlotContentForRelocation = (elm) => {
   let node;
@@ -839,21 +897,6 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
-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 nullifyVNodeRefs = (vNode) => {
   {
     vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
@@ -865,7 +908,7 @@ var insertBefore = (parent, newNode, reference) => {
   return inserted;
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-  var _a, _b, _c, _d;
+  var _c, _d;
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -882,9 +925,6 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  {
-    scopeId = hostElm["s-sc"];
-  }
   useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
   {
     contentRef = hostElm["s-cr"];
@@ -909,30 +949,13 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         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 = 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;
-            }
-          }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.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 */) {
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
             }
@@ -962,38 +985,6 @@ var slotReferenceDebugNode = (slotVNode) => doc.createComment(
 var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
   `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
 );
-var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
-  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
-  }
-  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
-  const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
-  if (typeof position !== "undefined") {
-    {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
-  } else {
-    appendMethod.call(parent, slottedNodeLocation);
-  }
-  newChild["s-ol"] = slottedNodeLocation;
-  newChild["s-sh"] = slotNode["s-hn"];
-};
 var createTime = (fnName, tagName = "") => {
   {
     return () => {
@@ -1048,6 +1039,18 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-cr"] = hostElm["s-cr"];
       }
     }
+    if (childRenderNode.$tag$ === "slot") {
+      if (childRenderNode.$children$) {
+        childRenderNode.$flags$ |= 2 /* isSlotFallback */;
+        if (!childRenderNode.$elm$.childNodes.length) {
+          childRenderNode.$children$.forEach((c) => {
+            childRenderNode.$elm$.appendChild(c.$elm$);
+          });
+        }
+      } else {
+        childRenderNode.$flags$ |= 1 /* isSlotReference */;
+      }
+    }
     if (orgLocationNode && orgLocationNode.isConnected) {
       if (shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
@@ -1060,8 +1063,8 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     plt.$orgLocNodes$.delete(orgLocationId);
   }
   const hosts = [];
-  let snIndex = 0;
   const snLen = slottedNodes.length;
+  let snIndex = 0;
   let slotGroup;
   let snGroupIdx;
   let snGroupLen;
@@ -1083,8 +1086,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
           slottedItem.slot["s-cr"] = hostEle;
         } else {
-          const hostChildren = hostEle.__childNodes || hostEle.childNodes;
-          slottedItem.slot["s-cr"] = hostChildren[0];
+          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
       }
@@ -1113,7 +1115,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
   let childIdSplt;
   let childVNode;
   let i2;
-  const scopeId2 = hostElm["s-sc"];
   if (node.nodeType === 1 /* ElementNode */) {
     childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
     if (childNodeType) {
@@ -1127,9 +1128,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           $index$: childIdSplt[3],
           $tag$: node.tagName.toLowerCase(),
           $elm$: node,
-          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` reconciliation will fail:
-          // client side changes before componentDidLoad will be ignored, `set-accessor.ts` will just take the element's initial classes
-          $attrs$: { class: node.className }
+          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` patch
+          // won't try to reconcile them. Classes set on the node will be blown away.
+          $attrs$: { class: node.className || "" }
         });
         childRenderNodes.push(childVNode);
         node.removeAttribute(HYDRATE_CHILD_ID);
@@ -1157,7 +1158,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (childVNode.$index$ !== void 0) {
           parentVNode.$children$[childVNode.$index$] = childVNode;
         }
-        if (scopeId2) node["s-si"] = scopeId2;
         parentVNode = childVNode;
         if (shadowRootNodes && childVNode.$depth$ === "0") {
           shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
@@ -1232,8 +1232,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         }
       } else if (childVNode.$hostId$ === hostId) {
         if (childNodeType === SLOT_NODE_ID) {
-          childVNode.$tag$ = "slot";
-          const slotName = node["s-sn"] = childVNode.$name$ = childIdSplt[5] || "";
+          const slotName = node["s-sn"] = childIdSplt[5] || "";
           addSlot(
             slotName,
             childIdSplt[2],
@@ -1307,6 +1306,8 @@ var createSimpleVNode = (vnode) => {
 };
 function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
   node["s-sr"] = true;
+  childVNode.$name$ = slotName || null;
+  childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
   if (shadowRootNodes) {
     const slot = childVNode.$elm$ = doc.createElement(childVNode.$tag$);
@@ -1408,7 +1409,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
-          styleElm = doc.createElement("style");
+          styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || doc.createElement("style");
           styleElm.innerHTML = style;
           const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
           if (nonce != null) {
@@ -1773,7 +1774,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName)) {
+          if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
           } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
@@ -2497,7 +2498,6 @@ class BiggiveAccordion {
         this.spaceBelow = 0;
         this.textColour = 'black';
         this.headingColour = 'primary';
-        this.children = undefined;
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -2571,22 +2571,10 @@ class BiggiveArticleCard {
         this.spaceBelow = 0;
         this.backgroundColour = 'white';
         this.backgroundImageUrl = '';
-        this.slug = undefined;
         this.slugColour = 'black';
-        this.date = undefined;
         this.dateColour = 'black';
-        this.mainTitle = undefined;
         this.mainTitleColour = 'black';
-        this.mainImageUrl = undefined;
-        this.mainImageAltText = undefined;
-        this.image1Url = undefined;
-        this.image1AltText = undefined;
-        this.image2Url = undefined;
-        this.image2AltText = undefined;
-        this.imageLabel = undefined;
         this.imageLabelColour = 'black';
-        this.buttonLabel = undefined;
-        this.buttonUrl = undefined;
         this.buttonColour = 'black';
         this.clipBottomLeftCorner = true;
         this.clipTopRightCorner = true;
@@ -2676,17 +2664,10 @@ class BiggiveBasicCard {
         this.backgroundImageUrl = '';
         this.cardColour = 'white';
         this.textColour = 'black';
-        this.mainImageUrl = undefined;
-        this.mainImageAltText = undefined;
-        this.mainTitle = undefined;
-        this.subtitle = undefined;
-        this.teaser = undefined;
         this.icon = true;
         this.iconColour = 'primary';
         this.buttonAlign = 'center';
         this.buttonStyle = 'standard';
-        this.buttonLabel = undefined;
-        this.buttonUrl = undefined;
         this.buttonColourScheme = 'clear-primary';
         this.clipBottomLeftCorner = true;
         this.clipTopRightCorner = true;
@@ -3219,10 +3200,21 @@ var BiggiveBeneficiaryIconStyle0 = biggiveBeneficiaryIconCss;
 class BiggiveBeneficiaryIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
+        /**
+         * Icon
+         */
         this.icon = 'Other';
-        this.label = undefined;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getBeneficiaryIcon() {
@@ -3324,10 +3316,25 @@ var BiggiveBoxedContentStyle0 = biggiveBoxedContentCss;
 class BiggiveBoxedContent {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Vertical padding
+         */
         this.verticalPadding = 3;
+        /**
+         * Horizontal padding
+         */
         this.horizontalPadding = 3;
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'white';
+        /**
+         * Shadow
+         */
         this.shadow = true;
     }
     render() {
@@ -3365,13 +3372,18 @@ var BiggiveBrandedImageStyle0 = biggiveBrandedImageCss;
 class BiggiveBrandedImage {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Full URL of the logo.
+         */
         this.logoUrl = '';
-        this.slug = undefined;
-        this.charityName = undefined;
-        this.charityLocation = undefined;
-        this.charityUrl = undefined;
     }
     render() {
         return (hAsync("div", { key: '23614f7c92777ff9cc505df3ba05e414266140ae', class: 'container space-below-' + this.spaceBelow }, hAsync("div", { key: 'de69e9303308ff4be55295f6d98c8df514ed1379', class: "slug" }, this.slug), this.imageUrl !== undefined && this.imageUrl !== null ? (hAsync("div", { class: "image-wrap" }, hAsync("img", { src: this.imageUrl }))) : null, this.logoUrl !== undefined && this.logoUrl !== null ? hAsync("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined && this.charityName !== null ? hAsync("h3", { class: "title" }, this.charityName) : null, this.charityLocation !== undefined && this.charityLocation !== null ? hAsync("div", { class: "charity-info" }, this.charityLocation) : null));
@@ -3402,19 +3414,42 @@ class BiggiveButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
+        /**
+         * Space below component
+         */
         this.spaceBelow = 1;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Text
+         */
         this.label = 'Click me';
-        this.url = undefined;
+        /**
+         * New Tab
+         */
         this.openInNewTab = false;
+        /**
+         * Display full width
+         */
         this.fullWidth = false;
+        /**
+         * Size
+         */
         this.size = 'medium';
+        /**
+         * Rounded corners
+         */
         this.rounded = false;
+        /**
+         * Centered
+         */
         this.centered = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         // We always want to have a href so that browsers will see this as a link and allow clicking with keybard.
@@ -3451,25 +3486,53 @@ var BiggiveCallToActionStyle0 = biggiveCallToActionCss;
 class BiggiveCallToAction {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Slug size
+         */
         this.slugSize = 4;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.slug = undefined;
+        /**
+         * Main title colour
+         */
         this.mainTitleColour = '';
+        /**
+         * Main title size
+         */
         this.mainTitleSize = 2;
-        this.mainTitle = undefined;
+        /**
+         * Main title size
+         */
         this.subtitleSize = 4;
+        /**
+         * Subtitle colour
+         */
         this.subtitleColour = '';
-        this.subtitle = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.teaser = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonLabel = undefined;
+        /**
+         * Primary button Colour Scheme
+         */
         this.primaryButtonColourScheme = 'primary';
-        this.secondaryButtonUrl = undefined;
-        this.secondaryButtonLabel = undefined;
+        /**
+         * Secondary button Colour Scheme
+         */
         this.secondaryButtonColourScheme = 'primary';
     }
     render() {
@@ -3514,28 +3577,37 @@ class BiggiveCampaignCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.doCardGeneralClick = createEvent(this, "doCardGeneralClick", 7);
-        this.handleCardGeneralClick = (event) => {
-            this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
-        };
+        /**
+         * Space below component
+         */
         this.spaceBelow = 4;
-        this.campaignType = undefined;
-        this.banner = undefined;
-        this.campaignTitle = undefined;
-        this.organisationName = undefined;
-        this.primaryFigureLabel = undefined;
-        this.primaryFigureAmount = undefined;
-        this.secondaryFigureLabel = undefined;
-        this.secondaryFigureAmount = undefined;
-        this.progressBarCounter = undefined;
+        /**
+         * Donate button label
+         */
         this.donateButtonLabel = 'Donate now';
-        this.donateButtonUrl = undefined;
+        /**
+         * Donate button colour scheme
+         */
         this.donateButtonColourScheme = 'primary';
+        /**
+         * More information button label
+         */
         this.moreInfoButtonLabel = 'Find out more';
-        this.moreInfoButtonUrl = undefined;
+        /**
+         * Donate button colour scheme
+         */
         this.moreInfoButtonColourScheme = 'clear-primary';
+        /**
+         * Boolean flag telling the component if the campaign is in the future (not open yet).
+         */
         this.isFutureCampaign = false;
+        /**
+         * Boolean flag telling the component if the campaign is in the future (not open yet).
+         */
         this.isPastCampaign = false;
-        this.datetime = undefined;
+        this.handleCardGeneralClick = (event) => {
+            this.doCardGeneralClick.emit({ event, url: this.moreInfoButtonUrl });
+        };
     }
     isEmpty(value) {
         return value === undefined || value === null || value === '';
@@ -3598,6 +3670,44 @@ class BiggiveCampaignCardFilterGrid {
         this.newSelectedFilterCategory = null;
         this.newSelectedFilterBeneficiary = null;
         this.newSelectedFilterLocation = null;
+        /**
+         * Space below component
+         */
+        this.spaceBelow = 0;
+        /**
+         * Intro
+         */
+        this.intro = 'Find a charity or project';
+        /**
+         * Optional search text prop. Useful for pre-populating the search field
+         * when the page is loaded with a search term already existing in the URL.
+         * This can happen when sharing links, or if a donor goes to a campaign page
+         * after searching, and then returns to the search results. In such a case,
+         * the search box text will clear, unless we use this prop to populate it on
+         * rendering. DON-652.
+         */
+        this.searchText = null;
+        /**
+         * Defines the text displayed as the placeholder in the input field
+         * before the user types anything
+         */
+        this.placeholderText = 'Search';
+        /**
+         * Defines the text on the search button
+         */
+        this.buttonText = 'Search';
+        /**
+         * For injecting the chosen category to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterCategory = null;
+        /**
+         * For injecting the chosen beneficiary to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterBeneficiary = null;
+        /**
+         * For injecting the chosen location to filter by, as per the comment above for `selectedSortByOption`.
+         */
+        this.selectedFilterLocation = null;
         this.categoryFilterSelectionChanged = (value) => {
             this.newSelectedFilterCategory = value;
         };
@@ -3687,19 +3797,6 @@ class BiggiveCampaignCardFilterGrid {
                 filterLocation: null,
             });
         };
-        this.spaceBelow = 0;
-        this.intro = 'Find a charity or project';
-        this.searchText = null;
-        this.placeholderText = 'Search';
-        this.buttonText = 'Search';
-        this.categoryOptions = undefined;
-        this.beneficiaryOptions = undefined;
-        this.locationOptions = undefined;
-        this.selectedSortByOption = undefined;
-        this.selectedFilterCategory = null;
-        this.selectedFilterBeneficiary = null;
-        this.selectedFilterLocation = null;
-        this.filtersApplied = undefined;
     }
     /**
      * Typically on non-negligible scroll away from the search area.
@@ -3833,20 +3930,14 @@ var BiggiveCampaignHighlightsStyle0 = biggiveCampaignHighlightsCss;
 class BiggiveCampaignHighlights {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.banner = undefined;
-        this.campaignTitle = undefined;
-        this.primaryFigureLabel = undefined;
-        this.primaryFigureAmount = undefined;
-        this.secondaryFigureLabel = undefined;
-        this.secondaryFigureAmount = undefined;
+        /**
+         * Progress bar percentage
+         */
         this.progressBarCounter = 100;
-        this.primaryStatIcon = undefined;
-        this.primaryStatText = undefined;
-        this.secondaryStatIcon = undefined;
-        this.secondaryStatText = undefined;
-        this.championName = undefined;
-        this.championUrl = undefined;
     }
     render() {
         return (hAsync("div", { key: 'add93be878549fc1c8f00b8dc3001896724cfe34', class: 'container space-below-' + this.spaceBelow }, hAsync("div", { key: 'd5577539172f56e51540d03e53c91327bed96143', class: "sleeve" }, this.campaignTitle != null ? (hAsync("div", { class: "campaign-title" }, hAsync("span", null, this.campaignTitle))) : null, this.banner !== null && this.banner !== undefined ? (hAsync("div", { class: "image-wrap banner", style: { 'background-image': 'url(' + this.banner + ')' } }, hAsync("img", { src: this.banner, class: "banner" }))) : null, hAsync("div", { key: 'c7029df25a46f19e84057d4e9db469ba6325d1ec', class: "meta-wrap" }, hAsync("div", { key: '877452b98dd3d64bfa132da71797e6f00bc5696d', class: "meta-item" }, hAsync("span", { key: '4c373ec8b3e8d53754280b5fabecc0986a57f6f8', class: "label" }, this.primaryFigureLabel), hAsync("span", { key: 'c354468bd49fb84a9b5317c7cfb7dc363b0b7b54', class: "text" }, this.primaryFigureAmount)), hAsync("div", { key: '49ba302a5c22f674bd45478607afe5e57c40ad98', class: "meta-item" }, hAsync("span", { key: '8f8c8e3935542794e7ba3e9624cedf5bacd89be1', class: "label" }, this.secondaryFigureLabel), hAsync("span", { key: '952ee3945423ac3f129d59f466b98c7f5b1f9f26', class: "text" }, this.secondaryFigureAmount))), hAsync("div", { key: '76bf79668d1c1f737d400d9d85816310de2147ee', class: "progress-bar-wrap" }, hAsync("biggive-progress-bar", { key: 'cb43751f5905000bb6c294d472a43c89e660447e', counter: this.progressBarCounter, "colour-scheme": "primary" })), hAsync("div", { key: 'af9a81b3c9ca0b15fa44e45df0aa7068ddb9249d', class: "stat-wrap" }, this.primaryStatIcon != null ? (hAsync("div", { class: "stat-item" }, hAsync("biggive-misc-icon", { icon: this.primaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), hAsync("span", { class: "label" }, this.primaryStatText))) : null, this.secondaryStatIcon != null ? (hAsync("div", { class: "stat-item" }, hAsync("biggive-misc-icon", { icon: this.secondaryStatIcon, "background-colour": "white", "icon-colour": "tertiary" }), hAsync("span", { class: "label" }, this.secondaryStatText))) : null), this.championName != null ? (hAsync("div", { class: "championed-by" }, "Championed by ", hAsync("a", { href: this.championUrl }, this.championName))) : null)));
@@ -3883,10 +3974,17 @@ var BiggiveCategoryIconStyle0 = biggiveCategoryIconCss;
 class BiggiveCategoryIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
-        this.icon = undefined;
-        this.label = undefined;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getCategoryIcon() {
@@ -3960,6 +4058,22 @@ class BiggiveCookieBanner {
         this.preferenceModalClosed = createEvent(this, "preferenceModalClosed", 7);
         this.cookieBannerAcceptAllSelected = createEvent(this, "cookieBannerAcceptAllSelected", 7);
         this.cookieBannerSavePreferencesSelected = createEvent(this, "cookieBannerSavePreferencesSelected", 7);
+        /**
+         * If true the Preferences modal will be auto-opened - for use when the user has requested to edit their cookie
+         * preferences
+         */
+        this.autoOpenPreferences = false;
+        /**
+         * This type is similar to CookiePreferences from donate-frontend/src/app/cookiePreference.service.ts
+         * but afaik there isn't a nice way to share a type.
+         *
+         * When updating please also update the copy in the type of cookieBannerSavePreferencesSelected - using a named type
+         * there caused build problems.
+         *
+         * When updating please also update the type of cookieBannerSavePreferencesSelected - I didn't find a way
+         * to avoid the duplication.
+         */
+        this.previouslyAgreedCookiePreferences = undefined;
         this.handleChoosePrefencesClick = () => {
             var _a;
             const elementById = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cookie-preferences-popup');
@@ -3988,9 +4102,6 @@ class BiggiveCookieBanner {
             // and make this component disappear.
             this.cookieBannerAcceptAllSelected.emit();
         };
-        this.autoOpenPreferences = false;
-        this.blogUriPrefix = undefined;
-        this.previouslyAgreedCookiePreferences = undefined;
     }
     componentDidLoad() {
         this.autoOpenPreferencesIfRequested();
@@ -4040,11 +4151,12 @@ var BiggiveFooterStyle0 = biggiveFooterCss;
 class BiggiveFooter {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.year = new Date().getFullYear().toString();
         this.headingLevel = 5;
-        this.donateUrlPrefix = undefined;
-        this.blogUrlPrefix = undefined;
-        this.experienceUrlPrefix = undefined;
+        this.year = new Date().getFullYear().toString();
+        /**
+         * Conditionally render footer menu:
+         * hard-coded (preset) when set to true, dynamic (slot-based) when set to false
+         */
         this.usePresetFooter = false;
     }
     appendMenu(menuName) {
@@ -4116,22 +4228,18 @@ var BiggiveFormFieldSelectStyle0 = biggiveFormFieldSelectCss;
 class BiggiveFormFieldSelect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.selectStyle = 'bordered';
+        this.selectedOptionColour = 'blue';
         this.doOptionSelectCompletedHandler = (event) => {
             const value = event.target.value;
             this.selectedValue = value;
             this.selectedLabel = event.target.label;
             this.selectionChanged(value);
         };
-        this.selectionChanged = undefined;
-        this.prompt = undefined;
-        this.selectedValue = undefined;
-        this.selectedLabel = undefined;
-        this.options = undefined;
-        this.selectStyle = 'bordered';
-        this.backgroundColour = undefined;
-        this.selectedOptionColour = 'blue';
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.placeholder = undefined;
     }
     render() {
         const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';
@@ -4191,8 +4299,17 @@ var BiggiveFormattedTextStyle0 = biggiveFormattedTextCss;
 class BiggiveFormattedText {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Width
+         */
         this.maxWidth = 100;
     }
     render() {
@@ -4221,9 +4338,6 @@ class BiggiveGenericIcon {
         registerInstance(this, hostRef);
         this.backgroundColour = 'primary';
         this.iconColour = 'white';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
     }
     getIconDefinition() {
         let iconDefinition;
@@ -4272,6 +4386,9 @@ class BiggiveGrid {
         registerInstance(this, hostRef);
         this.spaceBelow = 4;
         this.columnCount = 3;
+        /**
+         * Deprecated - should use columGap Instead
+         */
         this.spaceBetween = false;
         this.columnGap = 0;
     }
@@ -4341,23 +4458,46 @@ var BiggiveHeroImageStyle0 = biggiveHeroImageCss;
 class BiggiveHeroImage {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
-        this.slug = undefined;
-        this.slugColour = undefined;
+        /**
+         * Full URL of a logo image.
+         */
         this.logo = '';
+        /**
+        * Logo container height selection. Numbers are not measurements.
+        */
         this.logoHeight = 3;
+        /**
+         * Logo alt text
+         */
         this.logoAltText = '';
+        /**
+         * Full URL of a main hero image.
+         */
         this.mainImage = null;
+        /**
+         * Determines whether the main image is clipped to a triangle shape (default) or used as
+         * a background for the entire component. Clipping can leave a lot of blank space.
+         */
         this.mainImageShape = 'triangle';
+        /**
+         * Horizontal alignment of image
+         */
         this.mainImageAlignHorizontal = 'center';
+        /**
+     * Vertical alignment of image
+     */
         this.mainImageAlignVertical = 'center';
-        this.mainTitle = undefined;
-        this.mainTitleColour = undefined;
-        this.teaser = undefined;
-        this.teaserColour = undefined;
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {
@@ -4426,17 +4566,10 @@ class BiggiveIconButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.iconGroup = undefined;
-        this.icon = undefined;
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -4446,6 +4579,9 @@ class BiggiveIconButton {
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (hAsync("div", { key: '2345c3faaec52f17c518641b301caedc686ba150', class: 'container space-below-' +
@@ -4496,8 +4632,10 @@ var BiggiveIconGroupStyle0 = biggiveIconGroupCss;
 class BiggiveIconGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
-        this.label = undefined;
     }
     render() {
         return (hAsync("div", { key: 'ee83a9c74617db46a08413348e1b15ba7468788d', class: 'container space-below-' + this.spaceBelow }, this.label != null ? hAsync("div", { class: "label" }, this.label) : null, hAsync("div", { key: '8492137a5f62593cc93dce4865c29086c768bb2c', class: "sleeve" }, hAsync("slot", { key: '52b9d83703ae72a8f2ed8cb17fe6131eb5fd77d7' }))));
@@ -4522,12 +4660,33 @@ var BiggiveImageStyle0 = biggiveImageCss;
 class BiggiveImage {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
+        /**
+         * Image width
+         */
         this.width = 0;
+        /**
+         * Image width
+         */
         this.height = 0;
+        /**
+         * Size unit
+         */
         this.sizeUnit = 'px';
     }
     getWidth() {
@@ -4573,17 +4732,11 @@ class BiggiveImageButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.doButtonClick = createEvent(this, "doButtonClick", 7);
-        this.handleButtonClick = (event) => {
-            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
-        };
         this.spaceBelow = 1;
         this.backgroundColour = 'white';
         this.backgroundPadding = 0;
-        this.text = undefined;
         this.textColour = 'black';
-        this.imageUrl = undefined;
         this.imageStyle = 'cover';
-        this.url = undefined;
         this.openInNewTab = false;
         this.size = 'medium';
         this.arrow = false;
@@ -4593,6 +4746,9 @@ class BiggiveImageButton {
         this.centered = false;
         this.rounded = false;
         this.buttonId = undefined;
+        this.handleButtonClick = (event) => {
+            this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });
+        };
     }
     render() {
         return (hAsync("div", { key: 'ca8fa701b2ebc212f7b80005f41c43953e67b187', class: 'container space-below-' +
@@ -4645,15 +4801,10 @@ class BiggiveImageCard {
         registerInstance(this, hostRef);
         this.spaceBelow = 0;
         this.backgroundColour = 'primary';
-        this.mainImageUrl = undefined;
-        this.mainImageAltText = undefined;
         this.textAlign = 'center';
-        this.teaser = undefined;
         this.teaserColour = 'black';
         this.buttonAlign = 'center';
         this.buttonStyle = 'standard';
-        this.buttonLabel = undefined;
-        this.buttonUrl = undefined;
         this.buttonColourScheme = 'clear-primary';
         this.clipBottomLeftCorner = true;
         this.clipTopRightCorner = true;
@@ -4704,18 +4855,37 @@ var BiggiveImageFeatureStyle0 = biggiveImageFeatureCss;
 class BiggiveImageFeature {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a image.
+         */
         this.imageUrl = '';
+        /**
+         * Image alt text tag.
+         */
         this.imageAltText = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {
@@ -4754,6 +4924,19 @@ class BiggiveMainMenu {
         registerInstance(this, hostRef);
         this.logoutClicked = createEvent(this, "logoutClicked", 7);
         this.lastScrollHeight = 0;
+        // URL prefixes vary by environment, and components library is not best placed to know what they are, so we
+        // take them as props. But somehow on first render the prop passed in doesn't seem to be used, so the defaults
+        // below are the values currently used in our prod site. They should be replaced by other values in other
+        // environments.
+        this.blogUrlPrefix = 'https://biggive.org';
+        this.donateUrlPrefix = 'https://donate.biggive.org';
+        this.experienceUrlPrefix = 'https://community.biggive.org';
+        this.myAccountFlagEnabled = false;
+        /**
+         * Whether the current user is logged in (i.e. is assumed to have a valid JWT). They get links to some
+         * extra content if they are.
+         */
+        this.isLoggedIn = false;
         this.openMobileMenu = () => {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '0';
@@ -4765,11 +4948,6 @@ class BiggiveMainMenu {
             const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
             mobileMenu.style.left = '-100%';
         };
-        this.blogUrlPrefix = 'https://biggive.org';
-        this.donateUrlPrefix = 'https://donate.biggive.org';
-        this.experienceUrlPrefix = 'https://community.biggive.org';
-        this.myAccountFlagEnabled = false;
-        this.isLoggedIn = false;
     }
     async closeMobileMenuFromOutside() {
         const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
@@ -4892,10 +5070,14 @@ var BiggiveMiscIconStyle0 = biggiveMiscIconCss;
 class BiggiveMiscIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Background colour
+         */
         this.iconColour = 'white';
-        this.icon = undefined;
-        this.url = undefined;
     }
     getMiscIcon() {
         var icon = FontAwesomeIconsService.getMiscIcon(this.icon);
@@ -4928,6 +5110,9 @@ var BiggiveNavGroupStyle0 = biggiveNavGroupCss;
 class BiggiveNavGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Inline
+         */
         this.inline = true;
     }
     render() {
@@ -4952,9 +5137,6 @@ var BiggiveNavItemStyle0 = biggiveNavItemCss;
 class BiggiveNavItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.url = undefined;
-        this.label = undefined;
-        this.iconColour = undefined;
     }
     render() {
         return (hAsync("li", { key: 'e3397df27a329b834615305d2f0c290942735e3a', class: 'icon-' + this.iconColour }, hAsync("a", { key: '6bcc1f29538da7418b26e4f74b22e55dd1fa5f59', href: this.url }, this.label), hAsync("slot", { key: '9728762db7497b42bce1222b837699c075b31b00' })));
@@ -5001,6 +5183,9 @@ var BiggivePageColumnsStyle0 = biggivePageColumnsCss;
 class BiggivePageColumns {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
     }
     render() {
@@ -5025,11 +5210,25 @@ var BiggivePageSectionStyle0 = biggivePageSectionCss;
 class BiggivePageSection {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Section style top
+         */
         this.sectionStyleTop = 'straight';
+        /**
+         * Section style bottom
+         */
         this.sectionStyleBottom = 'straight';
-        this.colourScheme = undefined;
+        /**
+         * Width
+         */
         this.maxWidth = 100;
+        /**
+         * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.
+         */
         this.primaryFullBleed = false;
     }
     render() {
@@ -5069,6 +5268,10 @@ var BiggivePopupStyle0 = biggivePopupCss;
 class BiggivePopup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Function to execute when the modal is closed, whether by the user or programmatically.
+         */
+        this.modalClosedCallback = () => { };
         this.closeFromWithin = (event) => {
             if (event.target.classList.contains('popup') || event.target.classList.contains('close')) {
                 this.popup.setAttribute('data-visible', 'false');
@@ -5076,7 +5279,6 @@ class BiggivePopup {
                 this.modalClosedCallback();
             }
         };
-        this.modalClosedCallback = () => { };
     }
     async openFromOutside() {
         this.popup.setAttribute('data-visible', 'true');
@@ -5112,8 +5314,17 @@ var BiggiveProgressBarStyle0 = biggiveProgressBarCss;
 class BiggiveProgressBar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Colour Scheme
+         */
         this.colourScheme = 'primary';
+        /**
+         * Percentage to show + use for CSS width; round before input if desired
+         */
         this.counter = 100;
     }
     render() {
@@ -5175,14 +5386,17 @@ var BiggiveSheetStyle0 = biggiveSheetCss;
 class BiggiveSheet {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * A string ID (no spaces) unique within the page context, used to trigger the opening of the sheet from an anchor hash.
+         */
+        this.sheetId = '';
+        this.backgroundColour = 'primary';
+        this.textColour = 'white';
         this.closeSheet = () => {
             var _a, _b;
             (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container')) === null || _b === void 0 ? void 0 : _b.classList.remove('active');
             history.pushState('', document.title, window.location.pathname);
         };
-        this.sheetId = '';
-        this.backgroundColour = 'primary';
-        this.textColour = 'white';
     }
     componentWillLoad() {
         window.addEventListener('hashchange', () => {
@@ -5226,11 +5440,26 @@ var BiggiveSocialIconStyle0 = biggiveSocialIconCss;
 class BiggiveSocialIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.service = undefined;
+        /**
+         * Used within accessible labels for links. Typically a charity name or "Big Give". Can also be "Share".
+         */
         this.labelPrefix = 'Big Give';
+        /**
+         * Background colour
+         */
         this.backgroundColour = 'primary';
+        /**
+         * Icon colour
+         */
         this.iconColour = 'white';
+        /**
+         * Used in the social icons in the biggive-footer, which are more spaced out
+         * than others across the site. COM-43.
+         */
         this.wide = false;
+        /**
+         * Url
+         */
         this.url = '#';
     }
     getSocialIcon() {
@@ -5288,6 +5517,13 @@ var BiggiveTabbedContentStyle0 = biggiveTabbedContentCss;
 class BiggiveTabbedContent {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
         this.scrollOffset = 0;
         this.children = [];
         this.clickTabHandler = (e) => {
@@ -5307,13 +5543,6 @@ class BiggiveTabbedContent {
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -5478,8 +5707,6 @@ var BiggiveTextInputStyle0 = biggiveTextInputCss;
 class BiggiveTextInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.value = undefined;
-        this.currency = undefined;
         this.spaceBelow = 0;
         this.selectStyle = 'bordered';
     }
@@ -5519,6 +5746,18 @@ var BiggiveTimelineStyle0 = biggiveTimelineCss;
 class BiggiveTimeline {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.spaceBelow = 0;
+        this.textColour = 'black';
+        this.selectedTextColour = 'primary';
+        this.navigationHighlightColour = 'grey-medium';
+        this.selectedNavigationHighlightColour = 'primary';
+        this.buttonBackgroundColour = 'white';
+        this.buttonIconColour = 'primary';
+        this.entryBackgroundColour = 'white';
+        this.entryHighlightColour = 'secondary';
+        this.entryDateColour = 'black';
+        this.entryTitleColour = 'primary';
+        this.entryTextColour = 'black';
         this.scrollOffset = 0;
         this.tabHeadings = [];
         this.children = [];
@@ -5538,18 +5777,6 @@ class BiggiveTimeline {
         this.clickNextHandler = () => {
             this.scrollTab('NEXT');
         };
-        this.spaceBelow = 0;
-        this.textColour = 'black';
-        this.selectedTextColour = 'primary';
-        this.navigationHighlightColour = 'grey-medium';
-        this.selectedNavigationHighlightColour = 'primary';
-        this.buttonBackgroundColour = 'white';
-        this.buttonIconColour = 'primary';
-        this.entryBackgroundColour = 'white';
-        this.entryHighlightColour = 'secondary';
-        this.entryDateColour = 'black';
-        this.entryTitleColour = 'primary';
-        this.entryTextColour = 'black';
     }
     componentWillLoad() {
         this.children = Array.from(this.host.children);
@@ -5680,8 +5907,6 @@ var BiggiveTimelineEntryStyle0 = biggiveTimelineEntryCss;
 class BiggiveTimelineEntry {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.date = undefined;
-        this.heading = undefined;
     }
     render() {
         return null;
@@ -5707,12 +5932,26 @@ class BiggiveTotalizer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.lastWrapperWidth = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Primary banner colour
+         */
         this.primaryColour = 'primary';
+        /**
+         * Primary text colour
+         */
         this.primaryTextColour = 'white';
+        /**
+         * Secondary banner colour
+         */
         this.secondaryColour = 'secondary';
+        /**
+         * Secondary text colour
+         */
         this.secondaryTextColour = 'black';
-        this.mainMessage = undefined;
     }
     setSpeed(itemsWidth, containerWidth) {
         var _a;
@@ -5813,8 +6052,6 @@ var BiggiveTotalizerTickerItemStyle0 = biggiveTotalizerTickerItemCss;
 class BiggiveTotalizerTickerItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.figure = undefined;
-        this.label = undefined;
     }
     render() {
         return (hAsync("div", { key: 'a2402c2906760dd5e9f2220ba9f3b82e402ac668', class: "ticker-item" }, hAsync("strong", { key: 'f5c711457f2fd02384f65e8a3d0cefd4643b6fe0' }, this.figure), " ", this.label));
@@ -5854,8 +6091,17 @@ var BiggiveVideoStyle0 = biggiveVideoCss;
 class BiggiveVideo {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Full URL of a video.
+         */
         this.videoUrl = '';
     }
     render() {
@@ -5882,18 +6128,37 @@ var BiggiveVideoFeatureStyle0 = biggiveVideoFeatureCss;
 class BiggiveVideoFeature {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Space above component
+         */
         this.spaceAbove = 0;
+        /**
+         * Space below component
+         */
         this.spaceBelow = 0;
+        /**
+         * Default text colour
+         */
         this.defaultTextColour = 'primary';
+        /**
+         * Full URL of a video.
+         */
         this.videoUrl = '';
-        this.slug = undefined;
+        /**
+         * Slug colour
+         */
         this.slugColour = '';
-        this.mainTitle = undefined;
+        /**
+         * Slug colour
+         */
         this.mainTitleColour = '';
-        this.teaser = undefined;
+        /**
+         * Teaser colour
+         */
         this.teaserColour = '';
-        this.buttonUrl = undefined;
-        this.buttonLabel = undefined;
+        /**
+         * Button Colour Scheme
+         */
         this.buttonColourScheme = 'primary';
     }
     render() {
@@ -6089,7 +6354,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.23.0 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.23.1 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -16552,7 +16817,10 @@ function* streamToHtml(node, opts, output) {
       const tag = tagName === shadowRootTag ? "template" : tagName;
       yield "<" + tag;
       output.currentLineWidth += tag.length + 1;
-      if (tag === "template" && (!node.getAttribute || !node.getAttribute("shadowrootmode"))) {
+      if (tag === "template" && (!node.getAttribute || !node.getAttribute("shadowrootmode")) && /**
+       * If the node is a shadow root, we want to add the `shadowrootmode` attribute
+       */
+      ("host" in node || node.nodeName.toLocaleLowerCase() === shadowRootTag)) {
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
@@ -18018,6 +18286,8 @@ function createElement(ownerDocument, tagName) {
       return new MockTitleElement(ownerDocument);
     case "ul":
       return new MockUListElement(ownerDocument);
+    case "slot-fb":
+      return new MockHTMLElement(ownerDocument, tagName);
   }
   if (ownerDocument != null && tagName.includes("-")) {
     const win2 = ownerDocument.defaultView;