@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/{cjs/index-990b968b.js → esm/index-93509377.js}

@@ -1,26 +1,5 @@
-'use strict';
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return Object.freeze(n);
-}
-
 const NAMESPACE = 'core';
+const BUILD = /* core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, 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: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -60,6 +39,13 @@ const HYDRATE_ID = 's-id';
 const HYDRATED_STYLE_ID = 'sty-id';
 const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
@@ -264,6 +250,17 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
+/**
+ * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
+ * document and all its nodes.
+ *
+ * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
+ *
+ * @param hostElm The element to hydrate.
+ * @param tagName The element's tag name.
+ * @param hostId The host ID assigned to the element by the server.
+ * @param hostRef The host reference for the element.
+ */
 const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const endHydrate = createTime('hydrateClient', tagName);
     const shadowRoot = hostElm.shadowRoot;
@@ -281,6 +278,8 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
         const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
         const node = c.$elm$;
+        // Put the node back in its original location since the native Shadow DOM
+        // can handle rendering it its correct location now
         if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
             orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
         }
@@ -302,6 +301,22 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     endHydrate();
 };
+/**
+ * Recursively constructs the virtual node tree for a host element and its children.
+ * The tree is constructed by parsing the annotations set on the nodes by the server.
+ *
+ * In addition to constructing the vNode tree, we also track information about the node's
+ * descendants like which are slots, which should exist in the shadow root, and which
+ * are nodes that should be rendered as children of the parent node.
+ *
+ * @param parentVNode The vNode representing the parent node.
+ * @param childRenderNodes An array of all child nodes in the parent's node tree.
+ * @param slotNodes An array of all slot nodes in the parent's node tree.
+ * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
+ * @param hostElm The parent element.
+ * @param node The node to construct the vNode tree for.
+ * @param hostId The host ID assigned to the element by the server.
+ */
 const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
     let childNodeType;
     let childIdSplt;
@@ -446,6 +461,13 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
         parentVNode.$children$ = [vnode];
     }
 };
+/**
+ * Recursively locate any comments representing an original location for a node in a node's
+ * children or shadowRoot children.
+ *
+ * @param node The node to search.
+ * @param orgLocNodes A map of the original location annotation and the current node being searched.
+ */
 const initializeDocumentHydrate = (node, orgLocNodes) => {
     if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
         let i = 0;
@@ -590,6 +612,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -724,11 +750,19 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 // except for the first character, we keep the event name case
                 memberName = ln[2] + memberName.slice(3);
             }
-            if (oldValue) {
-                plt.rel(elm, memberName, oldValue, false);
-            }
-            if (newValue) {
-                plt.ael(elm, memberName, newValue, false);
+            if (oldValue || newValue) {
+                // Need to account for "capture" events.
+                // If the event name ends with "Capture", we'll update the name to remove
+                // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
+                const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+                // Make sure we only replace the last instance of "Capture"
+                memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
+                if (oldValue) {
+                    plt.rel(elm, memberName, oldValue, capture);
+                }
+                if (newValue) {
+                    plt.ael(elm, memberName, newValue, capture);
+                }
             }
         }
         else {
@@ -750,7 +784,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             /**
              * Need to manually update attribute if:
@@ -789,7 +827,14 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
+const CAPTURE_EVENT_SUFFIX = 'Capture';
+const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
 const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
     // then we want to be adding attrs/props to the shadow root's "host" element
@@ -823,6 +868,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
  * @returns the newly created node
  */
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+    var _a;
     // tslint:disable-next-line: prefer-const
     const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
@@ -896,11 +942,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
+    // This needs to always happen so we can hide nodes that are projected
+    // to another component but don't end up in a slot
+    elm['s-hn'] = hostTagName;
     {
-        elm['s-hn'] = hostTagName;
         if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
             // remember the content reference comment
             elm['s-sr'] = true;
+            // Persist the name of the slot that this slot was going to be projected into.
+            elm['s-fs'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.slot;
             // remember the content reference comment
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
@@ -908,30 +958,38 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             // check if we've got an old vnode for this slot
             oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
-                // we've got an old slot vnode and the wrapper is being replaced
-                // so let's move the old slot content back to it's original location
-                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                {
+                    // we've got an old slot vnode and the wrapper is being replaced
+                    // so let's move the old slot content back to its original location
+                    putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                }
             }
         }
     }
     return elm;
 };
 const putBackInOriginalLocation = (parentElm, recursive) => {
+    var _a;
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
     const oldSlotChildNodes = parentElm.childNodes;
     for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
         const childNode = oldSlotChildNodes[i];
         if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
-            // // this child node in the old element is from another component
-            // // remove this node from the old slot's parent
-            // childNode.remove();
             // and relocate it back to it's original location
             parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
             // remove the old original location comment entirely
             // later on the patch function will know what to do
-            // and move this to the correct spot in need be
+            // and move this to the correct spot if need be
             childNode['s-ol'].remove();
             childNode['s-ol'] = undefined;
+            // Reset so we can correctly move the node around again.
+            childNode['s-sh'] = undefined;
+            // When putting an element node back in its original location,
+            // we need to reset the `slot` attribute back to the value it originally had
+            // so we can correctly relocate it again in the future
+            if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                childNode.setAttribute('slot', (_a = childNode['s-sn']) !== null && _a !== void 0 ? _a : '');
+            }
             checkSlotRelocate = true;
         }
         if (recursive) {
@@ -1076,8 +1134,9 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
  * @param oldCh the old children of the parent node
  * @param newVNode the new VNode which will replace the parent
  * @param newCh the new children of the parent node
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let idxInOld = 0;
@@ -1104,24 +1163,24 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         else if (newEndVnode == null) {
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
             // if the start nodes are the same then we should patch the new VNode
             // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
             // indices to reflect that. We don't need to move any DOM Nodes around
             // since things are matched up in order.
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, isInitialRender);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
             // likewise, if the end nodes are the same we patch new onto old and
             // decrement our end indices, and also likewise in this case we don't
             // need to move any DOM Nodes.
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, isInitialRender);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+        else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
             // case: "Vnode moved right"
             //
             // We've found that the last node in our window on the new children is
@@ -1139,7 +1198,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
                 putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
             }
-            patch(oldStartVnode, newEndVnode);
+            patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
             // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -1161,7 +1220,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+        else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
             // case: "Vnode moved left"
             //
             // We've found that the first node in our window on the new children is
@@ -1180,7 +1239,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
                 putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
             }
-            patch(oldEndVnode, newStartVnode);
+            patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
             // can move the element for `oldEndVnode` _before_ the element for
@@ -1217,7 +1276,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                     node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
                 }
                 else {
-                    patch(elmToMove, newStartVnode);
+                    patch(elmToMove, newStartVnode, isInitialRender);
                     // invalidate the matching old node so that we won't try to update it
                     // again later on
                     oldCh[idxInOld] = undefined;
@@ -1268,19 +1327,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
+ * @param isInitialRender whether or not this is the first render of the vdom
  * @returns whether they're equal or not
  */
-const isSameVnode = (leftVNode, rightVNode) => {
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        // this will be set if components in the build have `key` attrs set on them
-        {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
             return leftVNode.$key$ === rightVNode.$key$;
         }
+        return true;
     }
     return false;
 };
@@ -1299,8 +1364,9 @@ const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).paren
  *
  * @param oldVNode an old VNode whose DOM element and children we want to update
  * @param newVNode a new VNode representing an updated version of the old one
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const patch = (oldVNode, newVNode) => {
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
@@ -1326,7 +1392,7 @@ const patch = (oldVNode, newVNode) => {
         if (oldChildren !== null && newChildren !== null) {
             // looks like there's child vnodes for both the old and new vnodes
             // so we need to call `updateChildren` to reconcile them
-            updateChildren(elm, oldChildren, newVNode, newChildren);
+            updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
         }
         else if (newChildren !== null) {
             // no old child vnodes, but there are new child vnodes to add
@@ -1355,42 +1421,53 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
+ * are slot fallbacks nodes.
+ *
+ * A slot fallback node should be visible by default. Then, it should be
+ * conditionally hidden if:
+ *
+ * - it has a sibling with a `slot` property set to its slot name or if
+ * - it is a default fallback slot node, in which case we hide if it has any
+ *   content
+ *
+ * @param elm the element of interest
+ */
 const updateFallbackSlotVisibility = (elm) => {
-    // tslint:disable-next-line: prefer-const
     const childNodes = elm.childNodes;
-    let childNode;
-    let i;
-    let ilen;
-    let j;
-    let slotNameAttr;
-    let nodeType;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of childNodes) {
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
             if (childNode['s-sr']) {
                 // this is a slot fallback node
                 // get the slot name for this slot reference node
-                slotNameAttr = childNode['s-sn'];
+                const slotName = childNode['s-sn'];
                 // by default always show a fallback slot node
                 // then hide it if there are other slots in the light dom
                 childNode.hidden = false;
-                for (j = 0; j < ilen; j++) {
-                    nodeType = childNodes[j].nodeType;
-                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
-                        // this sibling node is from a different component OR is a named fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
-                            childNode.hidden = true;
-                            break;
+                // we need to check all of its sibling nodes in order to see if
+                // `childNode` should be hidden
+                for (const siblingNode of childNodes) {
+                    // Don't check the node against itself
+                    if (siblingNode !== childNode) {
+                        if (siblingNode['s-hn'] !== childNode['s-hn'] || slotName !== '') {
+                            // this sibling node is from a different component OR is a named
+                            // fallback slot node
+                            if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
+                                (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])) {
+                                childNode.hidden = true;
+                                break;
+                            }
                         }
-                    }
-                    else {
-                        // this is a default fallback slot node
-                        // any element or text node (with content)
-                        // should hide the default fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                            (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
-                            childNode.hidden = true;
-                            break;
+                        else {
+                            // this is a default fallback slot node
+                            // any element or text node (with content)
+                            // should hide the default fallback slot node
+                            if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ ||
+                                (siblingNode.nodeType === 3 /* NODE_TYPE.TextNode */ && siblingNode.textContent.trim() !== '')) {
+                                childNode.hidden = true;
+                                break;
+                            }
                         }
                     }
                 }
@@ -1400,45 +1477,67 @@ const updateFallbackSlotVisibility = (elm) => {
         }
     }
 };
+/**
+ * Component-global information about nodes which are either currently being
+ * relocated or will be shortly.
+ */
 const relocateNodes = [];
-const relocateSlotContent = (elm) => {
+/**
+ * Mark the contents of a slot for relocation via adding references to them to
+ * the {@link relocateNodes} data structure. The actual work of relocating them
+ * will then be handled in {@link renderVdom}.
+ *
+ * @param elm a render node whose child nodes need to be relocated
+ */
+const markSlotContentForRelocation = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNode;
     let node;
     let hostContentNodes;
-    let slotNameAttr;
-    let relocateNodeData;
     let j;
-    let i = 0;
-    const childNodes = elm.childNodes;
-    const ilen = childNodes.length;
-    for (; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of elm.childNodes) {
+        // we need to find child nodes which are slot references so we can then try
+        // to match them up with nodes that need to be relocated
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
-            // first got the content reference comment node
-            // then we got it's parent, which is where all the host content is in now
+            // first get the content reference comment node ('s-cr'), then we get
+            // its parent, which is where all the host content is now
             hostContentNodes = node.parentNode.childNodes;
-            slotNameAttr = childNode['s-sn'];
+            const slotName = childNode['s-sn'];
+            // iterate through all the nodes under the location where the host was
+            // originally rendered
             for (j = hostContentNodes.length - 1; j >= 0; j--) {
                 node = hostContentNodes[j];
-                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
-                    // let's do some relocating to its new home
-                    // but never relocate a content reference node
-                    // that is suppose to always represent the original content location
-                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
+                // check that the node is not a content reference node or a node
+                // reference and then check that the host name does not match that of
+                // childNode.
+                // In addition, check that the slot either has not already been relocated, or
+                // that its current location's host is not childNode's host. This is essentially
+                // a check so that we don't try to relocate (and then hide) a node that is already
+                // where it should be.
+                if (!node['s-cn'] &&
+                    !node['s-nr'] &&
+                    node['s-hn'] !== childNode['s-hn'] &&
+                    (!BUILD.experimentalSlotFixes  )) {
+                    // if `node` is located in the slot that `childNode` refers to (via the
+                    // `'s-sn'` property) then we need to relocate it from it's current spot
+                    // (under the host element parent) to the right slot location
+                    if (isNodeLocatedInSlot(node, slotName)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                        let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
                         checkSlotFallbackVisibility = true;
-                        node['s-sn'] = node['s-sn'] || slotNameAttr;
+                        // ensure that the slot-name attr is correct
+                        node['s-sn'] = node['s-sn'] || slotName;
                         if (relocateNodeData) {
-                            // previously we never found a slot home for this node
-                            // but turns out we did, so let's remember it now
+                            relocateNodeData.$nodeToRelocate$['s-sh'] = childNode['s-hn'];
+                            // we marked this node for relocation previously but didn't find
+                            // out the slot reference node to which it needs to be relocated
+                            // so write it down now!
                             relocateNodeData.$slotRefNode$ = childNode;
                         }
                         else {
+                            node['s-sh'] = childNode['s-hn'];
                             // add to our list of nodes to relocate
                             relocateNodes.push({
                                 $slotRefNode$: childNode,
@@ -1457,8 +1556,10 @@ const relocateSlotContent = (elm) => {
                         }
                     }
                     else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-                        // so far this element does not have a slot home, not setting slotRefNode on purpose
-                        // if we never find a home for this element then we'll need to hide it
+                        // the node is not found within the slot (`childNode`) that we're
+                        // currently looking at, so we stick it into `relocateNodes` to
+                        // handle later. If we never find a home for this element then
+                        // we'll need to hide it
                         relocateNodes.push({
                             $nodeToRelocate$: node,
                         });
@@ -1466,30 +1567,41 @@ const relocateSlotContent = (elm) => {
                 }
             }
         }
+        // if we're dealing with any type of element (capable of itself being a
+        // slot reference or containing one) then we recur
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            relocateSlotContent(childNode);
+            markSlotContentForRelocation(childNode);
         }
     }
 };
-const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
+/**
+ * Check whether a node is located in a given named slot.
+ *
+ * @param nodeToRelocate the node of interest
+ * @param slotName the slot name to check
+ * @returns whether the node is located in the slot or not
+ */
+const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
+        if (nodeToRelocate.getAttribute('slot') === null && slotName === '') {
+            // if the node doesn't have a slot attribute, and the slot we're checking
+            // is not a named slot, then we assume the node should be within the slot
             return true;
         }
-        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
+        if (nodeToRelocate.getAttribute('slot') === slotName) {
             return true;
         }
         return false;
     }
-    if (nodeToRelocate['s-sn'] === slotNameAttr) {
+    if (nodeToRelocate['s-sn'] === slotName) {
         return true;
     }
-    return slotNameAttr === '';
+    return slotName === '';
 };
 /**
- * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
- * calling them with `null`. This signals that the DOM element corresponding to
- * the VDom node has been removed from the DOM.
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
+ * them with `null`. This signals that the DOM element corresponding to the VDom
+ * node has been removed from the DOM.
  *
  * @param vNode a virtual DOM node
  */
@@ -1513,6 +1625,7 @@ const nullifyVNodeRefs = (vNode) => {
  * @param isInitialLoad whether or not this is the first call after page load
  */
 const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
+    var _a, _b, _c, _d;
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1562,49 +1675,54 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         checkSlotFallbackVisibility = false;
     }
     // synchronous patch
-    patch(oldVNode, rootVnode);
+    patch(oldVNode, rootVnode, isInitialLoad);
     {
         // while we're moving nodes around existing nodes, temporarily disable
         // the disconnectCallback from working
         plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
         if (checkSlotRelocate) {
-            relocateSlotContent(rootVnode.$elm$);
-            let relocateData;
-            let nodeToRelocate;
-            let orgLocationNode;
-            let parentNodeRef;
-            let insertBeforeNode;
-            let refNode;
-            let i = 0;
-            for (; i < relocateNodes.length; i++) {
-                relocateData = relocateNodes[i];
-                nodeToRelocate = relocateData.$nodeToRelocate$;
+            markSlotContentForRelocation(rootVnode.$elm$);
+            for (const relocateData of relocateNodes) {
+                const nodeToRelocate = relocateData.$nodeToRelocate$;
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    orgLocationNode =
-                        doc.createTextNode('');
+                    const orgLocationNode = doc.createTextNode('');
                     orgLocationNode['s-nr'] = nodeToRelocate;
                     nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
                 }
             }
-            for (i = 0; i < relocateNodes.length; i++) {
-                relocateData = relocateNodes[i];
-                nodeToRelocate = relocateData.$nodeToRelocate$;
-                if (relocateData.$slotRefNode$) {
-                    // by default we're just going to insert it directly
-                    // after the slot reference node
-                    parentNodeRef = relocateData.$slotRefNode$.parentNode;
-                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
-                    orgLocationNode = nodeToRelocate['s-ol'];
-                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
-                        refNode = orgLocationNode['s-nr'];
-                        if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
-                            refNode = refNode.nextSibling;
-                            if (!refNode || !refNode['s-nr']) {
-                                insertBeforeNode = refNode;
-                                break;
+            for (const relocateData of relocateNodes) {
+                const nodeToRelocate = relocateData.$nodeToRelocate$;
+                const slotRefNode = relocateData.$slotRefNode$;
+                if (slotRefNode) {
+                    const parentNodeRef = slotRefNode.parentNode;
+                    // When determining where to insert content, the most simple case would be
+                    // to relocate the node immediately following the slot reference node. We do this
+                    // by getting a reference to the node immediately following the slot reference node
+                    // since we will use `insertBefore` to manipulate the DOM.
+                    //
+                    // If there is no node immediately following the slot reference node, then we will just
+                    // end up appending the node as the last child of the parent.
+                    let insertBeforeNode = slotRefNode.nextSibling;
+                    // If the node we're currently planning on inserting the new node before is an element,
+                    // we need to do some additional checks to make sure we're inserting the node in the correct order.
+                    // The use case here would be that we have multiple nodes being relocated to the same slot. So, we want
+                    // to make sure they get inserted into their new how in the same order they were declared in their original location.
+                    //
+                    // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
+                    {
+                        let orgLocationNode = (_a = nodeToRelocate['s-ol']) === null || _a === void 0 ? void 0 : _a.previousSibling;
+                        while (orgLocationNode) {
+                            let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
+                            if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
+                                refNode = refNode.nextSibling;
+                                if (!refNode || !refNode['s-nr']) {
+                                    insertBeforeNode = refNode;
+                                    break;
+                                }
                             }
+                            orgLocationNode = orgLocationNode.previousSibling;
                         }
                     }
                     if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
@@ -1617,14 +1735,29 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                                 // probably a component in the index.html that doesn't have its hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
-                            // add it back to the dom but in its new home
+                            // Add it back to the dom but in its new home
+                            // If we get to this point and `insertBeforeNode` is `null`, that means
+                            // we're just going to append the node as the last child of the parent. Passing
+                            // `null` as the second arg here will trigger that behavior.
                             parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+                            // Reset the `hidden` value back to what it was defined as originally
+                            // This solves a problem where a `slot` is dynamically rendered and `hidden` may have
+                            // been set on content originally, but now it has a slot to go to so it should have
+                            // the value it was defined as having in the DOM, not what we overrode it to.
+                            if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                                nodeToRelocate.hidden = (_c = nodeToRelocate['s-ih']) !== null && _c !== void 0 ? _c : false;
+                            }
                         }
                     }
                 }
                 else {
                     // this node doesn't have a slot home to go to, so let's hide it
                     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                        // Store the initial value of `hidden` so we can reset it later when
+                        // moving nodes around.
+                        if (isInitialLoad) {
+                            nodeToRelocate['s-ih'] = (_d = nodeToRelocate.hidden) !== null && _d !== void 0 ? _d : false;
+                        }
                         nodeToRelocate.hidden = true;
                     }
                 }
@@ -1807,6 +1940,10 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
  */
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1881,6 +2018,18 @@ const postUpdateComponent = (hostRef) => {
     // ( •_•)>⌐■-■
     // (⌐■_■)
 };
+const forceUpdate = (ref) => {
+    {
+        const hostRef = getHostRef(ref);
+        const isConnected = hostRef.$hostElement$.isConnected;
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+            scheduleUpdate(hostRef, false);
+        }
+        // Returns "true" when the forced update was successfully scheduled
+        return isConnected;
+    }
+};
 const appDidLoad = (who) => {
     // on appload
     // we have finish the first big initial render
@@ -1889,6 +2038,16 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -1957,13 +2116,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
         }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1986,8 +2145,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 // proxyComponent - method
                 Object.defineProperty(prototype, memberName, {
                     value(...args) {
+                        var _a;
                         const ref = getHostRef(this);
-                        return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                        return (_a = ref === null || ref === void 0 ? void 0 : ref.$onInstancePromise$) === null || _a === void 0 ? void 0 : _a.then(() => { var _a; return (_a = ref.$lazyInstance$) === null || _a === void 0 ? void 0 : _a[memberName](...args); });
                     },
                 });
             }
@@ -1996,6 +2156,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -2051,11 +2212,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const instance = hostRef.$lazyInstance$ ;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -2077,10 +2239,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 ...members
                     .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
                     .map(([propName, m]) => {
+                    var _a;
                     const attrName = m[1] || propName;
                     attrNameToPropName.set(attrName, propName);
                     if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                        (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
                     }
                     return attrName;
                 }),
@@ -2089,7 +2252,18 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
@@ -2292,7 +2466,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
     let appLoadFallback;
@@ -2310,6 +2484,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
         }
     }
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             var _a;
@@ -2319,6 +2494,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -2381,15 +2561,25 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
+    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+    if (hasSlotRelocation) {
+        dataStyles.innerHTML += SLOT_FB_CSS;
+    }
+    // Add hydration styles
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
+        // Insert the styles into the document head
+        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -2448,13 +2638,40 @@ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !==
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -2463,11 +2680,11 @@ const registerHost = (elm, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-    return hostRefs.set(elm, hostRef);
+    addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
@@ -2481,233 +2698,249 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
         return module[exportName];
     }
     
-    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-      const processMod = importedModule => {
-        cmpModules.set(bundleId, importedModule);
-        return importedModule[exportName];
-      }
-      switch(bundleId) {
-        
-        case 'ic-back-to-top.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-back-to-top.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-breadcrumb-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-breadcrumb-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-card.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-card.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-checkbox.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-checkbox-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-checkbox-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-chip.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-chip.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-classification-banner.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-classification-banner.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-data-entity.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-data-entity.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-data-row.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-data-row.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-data-table.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-data-table.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-dialog.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-dialog.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-empty-state.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-empty-state.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-footer.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-footer.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-footer-link.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-footer-link.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-footer-link-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-footer-link-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-hero.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-hero.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-menu-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-menu-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-navigation-button.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-navigation-button.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-navigation-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-navigation-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-navigation-item.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-navigation-item.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-page-header.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-page-header.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-popover-menu.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-popover-menu.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-radio-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-radio-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-radio-option.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-radio-option.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-search-bar.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-search-bar.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-side-navigation.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-side-navigation.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-skeleton.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-skeleton.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-status-tag.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-status-tag.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-step.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-step.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-stepper.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-stepper.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-switch.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-switch.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-tab.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-tab.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-tab-context.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-tab-context.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-tab-group.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-tab-group.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-tab-panel.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-theme.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-theme.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-toast.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-toast.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-toast-region.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-toast-region.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-top-navigation.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-top-navigation.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-alert.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-alert.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-breadcrumb.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-breadcrumb.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-divider.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-divider.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-menu-item.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-menu-item.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-navigation-menu.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-navigation-menu.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-pagination-bar.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-pagination-bar.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-pagination_4.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-pagination_4.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-horizontal-scroll.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-horizontal-scroll.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-link.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-link.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-input-component-container_3.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-input-component-container_3.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-section-container.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-section-container.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-input-label_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-input-label_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-button_3.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-button_3.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ic-typography.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ic-typography.cjs.entry.js')); }).then(processMod, consoleError);
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'ic-accordion':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-accordion.entry.js').then(processMod, consoleError);
+                case 'ic-accordion-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-accordion-group.entry.js').then(processMod, consoleError);
+                case 'ic-back-to-top':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-back-to-top.entry.js').then(processMod, consoleError);
+                case 'ic-badge':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-badge.entry.js').then(processMod, consoleError);
+                case 'ic-breadcrumb-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-breadcrumb-group.entry.js').then(processMod, consoleError);
+                case 'ic-card':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-card.entry.js').then(processMod, consoleError);
+                case 'ic-checkbox':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-checkbox.entry.js').then(processMod, consoleError);
+                case 'ic-checkbox-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-checkbox-group.entry.js').then(processMod, consoleError);
+                case 'ic-chip':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-chip.entry.js').then(processMod, consoleError);
+                case 'ic-classification-banner':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-classification-banner.entry.js').then(processMod, consoleError);
+                case 'ic-data-entity':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-data-entity.entry.js').then(processMod, consoleError);
+                case 'ic-data-row':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-data-row.entry.js').then(processMod, consoleError);
+                case 'ic-data-table':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-data-table.entry.js').then(processMod, consoleError);
+                case 'ic-dialog':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-dialog.entry.js').then(processMod, consoleError);
+                case 'ic-empty-state':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-empty-state.entry.js').then(processMod, consoleError);
+                case 'ic-footer':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-footer.entry.js').then(processMod, consoleError);
+                case 'ic-footer-link':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-footer-link.entry.js').then(processMod, consoleError);
+                case 'ic-footer-link-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-footer-link-group.entry.js').then(processMod, consoleError);
+                case 'ic-hero':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-hero.entry.js').then(processMod, consoleError);
+                case 'ic-menu-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-menu-group.entry.js').then(processMod, consoleError);
+                case 'ic-navigation-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-navigation-button.entry.js').then(processMod, consoleError);
+                case 'ic-navigation-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-navigation-group.entry.js').then(processMod, consoleError);
+                case 'ic-navigation-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-navigation-item.entry.js').then(processMod, consoleError);
+                case 'ic-page-header':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-page-header.entry.js').then(processMod, consoleError);
+                case 'ic-popover-menu':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-popover-menu.entry.js').then(processMod, consoleError);
+                case 'ic-radio-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-radio-group.entry.js').then(processMod, consoleError);
+                case 'ic-radio-option':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-radio-option.entry.js').then(processMod, consoleError);
+                case 'ic-search-bar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-search-bar.entry.js').then(processMod, consoleError);
+                case 'ic-side-navigation':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-side-navigation.entry.js').then(processMod, consoleError);
+                case 'ic-skeleton':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-skeleton.entry.js').then(processMod, consoleError);
+                case 'ic-status-tag':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-status-tag.entry.js').then(processMod, consoleError);
+                case 'ic-step':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-step.entry.js').then(processMod, consoleError);
+                case 'ic-stepper':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-stepper.entry.js').then(processMod, consoleError);
+                case 'ic-switch':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-switch.entry.js').then(processMod, consoleError);
+                case 'ic-tab':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-tab.entry.js').then(processMod, consoleError);
+                case 'ic-tab-context':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-tab-context.entry.js').then(processMod, consoleError);
+                case 'ic-tab-group':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-tab-group.entry.js').then(processMod, consoleError);
+                case 'ic-tab-panel':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-tab-panel.entry.js').then(processMod, consoleError);
+                case 'ic-theme':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-theme.entry.js').then(processMod, consoleError);
+                case 'ic-toast':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-toast.entry.js').then(processMod, consoleError);
+                case 'ic-toast-region':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-toast-region.entry.js').then(processMod, consoleError);
+                case 'ic-toggle-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-toggle-button.entry.js').then(processMod, consoleError);
+                case 'ic-top-navigation':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-top-navigation.entry.js').then(processMod, consoleError);
+                case 'ic-alert':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-alert.entry.js').then(processMod, consoleError);
+                case 'ic-breadcrumb':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-breadcrumb.entry.js').then(processMod, consoleError);
+                case 'ic-divider':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-divider.entry.js').then(processMod, consoleError);
+                case 'ic-menu-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-menu-item.entry.js').then(processMod, consoleError);
+                case 'ic-navigation-menu':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-navigation-menu.entry.js').then(processMod, consoleError);
+                case 'ic-pagination-bar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-pagination-bar.entry.js').then(processMod, consoleError);
+                case 'ic-pagination_4':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-pagination_4.entry.js').then(processMod, consoleError);
+                case 'ic-horizontal-scroll':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-horizontal-scroll.entry.js').then(processMod, consoleError);
+                case 'ic-link':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-link.entry.js').then(processMod, consoleError);
+                case 'ic-input-component-container_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-input-component-container_3.entry.js').then(processMod, consoleError);
+                case 'ic-section-container':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-section-container.entry.js').then(processMod, consoleError);
+                case 'ic-input-label_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-input-label_2.entry.js').then(processMod, consoleError);
+                case 'ic-button_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-button_3.entry.js').then(processMod, consoleError);
+                case 'ic-typography':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ic-typography.entry.js').then(processMod, consoleError);
+          }
       }
-    }
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${''}`)); }).then((importedModule) => {
+    `./${bundleId}.entry.js${''}`).then((importedModule) => {
         {
             cmpModules.set(bundleId, importedModule);
         }
@@ -2779,17 +3012,9 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-exports.Fragment = Fragment;
-exports.Host = Host;
-exports.bootstrapLazy = bootstrapLazy;
-exports.createEvent = createEvent;
-exports.getElement = getElement;
-exports.h = h;
-exports.promiseResolve = promiseResolve;
-exports.registerInstance = registerInstance;
-exports.setNonce = setNonce;
+export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-990b968b.js.map
+//# sourceMappingURL=index-93509377.js.map