@nanoporetech-digital/components 3.14.0 → 4.1.0

package/dist/cjs/{form-control-80c69d1d.js → form-control-2e900f54.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-46286eea.js');
+const index = require('./index-71f899a7.js');
 
 const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
   if (!label && !hasLabelSlot)
@@ -82,4 +82,4 @@ const FormControl = (props, children) => {
 exports.FormControl = FormControl;
 exports.FormControlWrap = FormControlWrap;
 
-//# sourceMappingURL=form-control-80c69d1d.js.map
+//# sourceMappingURL=form-control-2e900f54.js.map

package/dist/cjs/{form-control-80c69d1d.js.map → form-control-2e900f54.js.map}

@@ -1 +1 @@
-{"file":"form-control-80c69d1d.js","mappings":"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","names":["h"],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}
+{"file":"form-control-2e900f54.js","mappings":"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","names":["h"],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}

package/dist/cjs/{index-46286eea.js → index-71f899a7.js}

@@ -70,6 +70,7 @@ const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
 const SLOT_NODE_ID = 's';
 const TEXT_NODE_ID = 't';
+const COMMENT_NODE_ID = 'c';
 const HYDRATE_ID = 's-id';
 const HYDRATED_STYLE_ID = 'sty-id';
 const HYDRATE_CHILD_ID = 'c-id';
@@ -357,8 +358,8 @@ const updateFallbackSlotVisibility = (node) => {
         updateFallbackSlotVisibility(childNodes[i]);
     }
 };
-const patchPseudoShadowDom = (HostElementPrototype) => {
-    patchChildNodes(HostElementPrototype);
+const patchPseudoShadowDom = (HostElementPrototype, DescriptorPrototype) => {
+    patchChildNodes(HostElementPrototype, DescriptorPrototype);
     patchInsertBefore(HostElementPrototype);
     patchAppendChild(HostElementPrototype);
     patchAppend(HostElementPrototype);
@@ -367,9 +368,9 @@ const patchPseudoShadowDom = (HostElementPrototype) => {
     patchInsertAdjacentText(HostElementPrototype);
     patchInsertAdjacentElement(HostElementPrototype);
     patchReplaceChildren(HostElementPrototype);
-    patchInnerHTML(HostElementPrototype);
-    patchInnerText(HostElementPrototype);
-    patchTextContent(HostElementPrototype);
+    patchInnerHTML(HostElementPrototype, DescriptorPrototype);
+    patchInnerText(HostElementPrototype, DescriptorPrototype);
+    patchTextContent(HostElementPrototype, DescriptorPrototype);
 };
 ////// non-shadow host component patches
 /**
@@ -421,7 +422,7 @@ const patchCloneNode = (HostElementPrototype) => {
  * (`childNodes`, `children`, `firstChild`, `lastChild` and `childElementCount`)
  * @param HostElementPrototype
  */
-const patchChildNodes = (HostElementPrototype) => {
+const patchChildNodes = (HostElementPrototype, DescriptorPrototype) => {
     if (!globalThis.Node)
         return;
     class FakeNodeList extends Array {
@@ -429,17 +430,17 @@ const patchChildNodes = (HostElementPrototype) => {
             return this[n];
         }
     }
-    let childNodesDesc = Object.getOwnPropertyDescriptor(Node.prototype, 'childNodes');
+    let childNodesDesc = Object.getOwnPropertyDescriptor(DescriptorPrototype || Node.prototype, 'childNodes');
     if (!childNodesDesc) {
         childNodesDesc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(Node.prototype), 'childNodes');
     }
     if (childNodesDesc)
         Object.defineProperty(HostElementPrototype, '__childNodes', childNodesDesc);
-    let childrenDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'children');
+    let childrenDesc = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'children');
     // MockNode won't have these
     if (childrenDesc)
         Object.defineProperty(HostElementPrototype, '__children', childrenDesc);
-    const childElementCountDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'childElementCount');
+    const childElementCountDesc = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'childElementCount');
     if (childElementCountDesc)
         Object.defineProperty(HostElementPrototype, '__childElementCount', childElementCountDesc);
     Object.defineProperty(HostElementPrototype, 'children', {
@@ -490,10 +491,10 @@ const patchChildNodes = (HostElementPrototype) => {
  * Patches the inner html accessors of a non-shadow component
  * @param HostElementPrototype the host `Element` to be patched
  */
-const patchInnerHTML = (HostElementPrototype) => {
+const patchInnerHTML = (HostElementPrototype, DescriptorPrototype) => {
     if (!globalThis.Element)
         return;
-    let descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
+    let descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'innerHTML');
     // on IE it's on HTMLElement.prototype
     if (!descriptor)
         descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerHTML');
@@ -508,8 +509,12 @@ const patchInnerHTML = (HostElementPrototype) => {
         },
         set: function (value) {
             this.childNodes.forEach((node) => {
-                if (node['s-ol'])
-                    node['s-ol'].remove();
+                if (node['s-ol']) {
+                    try {
+                        node['s-ol'].remove();
+                    }
+                    catch (e) { }
+                }
                 node.remove();
             });
             this.insertAdjacentHTML('beforeend', value);
@@ -520,10 +525,10 @@ const patchInnerHTML = (HostElementPrototype) => {
  * Patches the inner text accessors of a non-shadow component
  * @param HostElementPrototype the host `Element` to be patched
  */
-const patchInnerText = (HostElementPrototype) => {
+const patchInnerText = (HostElementPrototype, DescriptorPrototype) => {
     if (!globalThis.Element)
         return;
-    let descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText');
+    let descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'innerText');
     // on IE it's on HTMLElement.prototype
     if (!descriptor)
         descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerText');
@@ -555,10 +560,10 @@ const patchInnerText = (HostElementPrototype) => {
  * Patches the text content accessors of a non-shadow component
  * @param HostElementPrototype the host `Element` to be patched
  */
-const patchTextContent = (HostElementPrototype) => {
+const patchTextContent = (HostElementPrototype, DescriptorPrototype) => {
     if (!globalThis.Node)
         return;
-    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+    const descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Node.prototype, 'textContent');
     // MockNode won't have these
     if (descriptor)
         Object.defineProperty(HostElementPrototype, '__textContent', descriptor);
@@ -809,10 +814,10 @@ const patchNextPrev = (NodePrototype) => {
  * Patches the `nextSibling` accessor of a non-shadow slotted node
  * @param NodePrototype the slotted node to be patched
  */
-const patchNextSibling = (NodePrototype) => {
+const patchNextSibling = (NodePrototype, DescriptorPrototype) => {
     if (!NodePrototype || NodePrototype.__nextSibling)
         return;
-    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'nextSibling');
+    const descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Node.prototype, 'nextSibling');
     // MockNode might not have these
     if (descriptor)
         Object.defineProperty(NodePrototype, '__nextSibling', descriptor);
@@ -835,10 +840,10 @@ const patchNextSibling = (NodePrototype) => {
  * Patches the `nextElementSibling` accessor of a non-shadow slotted node
  * @param NodePrototype the slotted node to be patched
  */
-const patchNextElementSibling = (ElementPrototype) => {
+const patchNextElementSibling = (ElementPrototype, DescriptorPrototype) => {
     if (!ElementPrototype || ElementPrototype.__nextElementSibling || !ElementPrototype.nextSiblingElement)
         return;
-    const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'nextElementSibling');
+    const descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'nextElementSibling');
     // MockNode won't have these
     if (descriptor)
         Object.defineProperty(ElementPrototype, '__nextElementSibling', descriptor);
@@ -861,10 +866,10 @@ const patchNextElementSibling = (ElementPrototype) => {
  * Patches the `previousSibling` accessor of a non-shadow slotted node
  * @param NodePrototype the slotted node to be patched
  */
-const patchPreviousSibling = (NodePrototype) => {
+const patchPreviousSibling = (NodePrototype, DescriptorPrototype) => {
     if (!NodePrototype || NodePrototype.__previousSibling)
         return;
-    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'previousSibling');
+    const descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Node.prototype, 'previousSibling');
     // MockNode won't have these
     if (descriptor)
         Object.defineProperty(NodePrototype, '__previousSibling', descriptor);
@@ -887,10 +892,10 @@ const patchPreviousSibling = (NodePrototype) => {
  * Patches the `previousElementSibling` accessor of a non-shadow slotted node
  * @param ElementPrototype the slotted node to be patched
  */
-const patchPreviousElementSibling = (ElementPrototype) => {
+const patchPreviousElementSibling = (ElementPrototype, DescriptorPrototype) => {
     if (!ElementPrototype || ElementPrototype.__previousElementSibling || !ElementPrototype.previousElementSibling)
         return;
-    const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'previousElementSibling');
+    const descriptor = Object.getOwnPropertyDescriptor(DescriptorPrototype || Element.prototype, 'previousElementSibling');
     // MockNode won't have these
     if (descriptor)
         Object.defineProperty(ElementPrototype, '__previousElementSibling', descriptor);
@@ -947,22 +952,42 @@ const patchRemoveChild = (ElementPrototype) => {
 };
 ////// Utils
 /**
- * When non-shadow component VDom re-renders,
- * they sometimes need a place to temporarily put their 'lightDOM' elements.
- * This function creates that node.
+ * Creates an empty text node to act as a forwarding address to a slotted node:
+ * 1) When non-shadow components re-render, they need a place to temporarily put 'lightDOM' elements.
+ * 2) Patched dom methods and accessors use this node to calculate what 'lightDOM' nodes are in the host.
  * @param newChild - A node that's going to be added to the component
  * @param slotNode - The slot node that the node will be added to
  */
-const addSlotRelocateNode = (newChild, slotNode) => {
+const addSlotRelocateNode = (newChild, slotNode, order) => {
     if (newChild['s-ol'] && newChild['s-ol'].isConnected)
         return;
-    const slotPlaceholder = document.createTextNode('');
-    slotPlaceholder['s-nr'] = newChild;
+    const slottedNodeLocation = document.createTextNode('');
+    slottedNodeLocation['s-nr'] = newChild;
     if (slotNode['s-cr'] && slotNode['s-cr'].parentNode) {
-        const appendChild = slotNode['s-cr'].parentNode.__appendChild || slotNode['s-cr'].parentNode.appendChild;
-        appendChild.call(slotNode['s-cr'].parentNode, slotPlaceholder);
+        const parent = slotNode['s-cr'].parentNode;
+        const appendChild = parent.__appendChild || parent.appendChild;
+        if (typeof order !== 'undefined') {
+            slottedNodeLocation['s-oo'] = order;
+            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) => appendChild.call(slotNode['s-cr'].parentNode, n));
+        }
+        else {
+            appendChild.call(slotNode['s-cr'].parentNode, slottedNodeLocation);
+        }
     }
-    newChild['s-ol'] = slotPlaceholder;
+    newChild['s-ol'] = slottedNodeLocation;
 };
 /**
  * Find the slot name of a given node
@@ -1068,11 +1093,17 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
                 // we're safe to move it now
                 orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
             }
-            // Remove original location comment now regardless:
+            // Remove original location / slot reference comment now regardless:
             // 1) Stops SSR frameworks complaining about mismatches
             // 2) is un-required for non-shadow, slotted nodes as
             //    we'll add all the meta nodes we need when we deal with *all* slotted nodes ↓↓↓
             orgLocationNode.parentNode.removeChild(orgLocationNode);
+            if (!shadowRoot) {
+                // Add the original order of this node.
+                // we'll use it later to make sure slotted nodes
+                // get added in the right, original order
+                node['s-oo'] = parseInt(childRenderNode.$nodeId$);
+            }
         }
         // remove the original location from the map
         plt.$orgLocNodes$.delete(orgLocationId);
@@ -1121,11 +1152,11 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
                     slottedItem.slot['s-cr'] = hostChildren[0];
                 }
                 // create our original location node
-                addSlotRelocateNode(slottedItem.node, slottedItem.slot);
+                addSlotRelocateNode(slottedItem.node, slottedItem.slot, slottedItem.node['s-oo']);
                 // patch this node for accessors like `nextSibling` (et al)
                 patchNextPrev(slottedItem.node);
             }
-            if (hostEle.shadowRoot) {
+            if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
                 // shadowDOM - move the item to the element root for
                 // native slotting
                 hostEle.appendChild(slottedItem.node);
@@ -1318,6 +1349,14 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                     }
                 }
             }
+            else if (childNodeType === COMMENT_NODE_ID) {
+                childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+                    childRenderNodes.push(childVNode);
+                    // remove the comment comment since it's no longer needed
+                    node.remove();
+                }
+            }
             else if (childVNode.$hostId$ === hostId) {
                 // this comment node is specifically for this host id
                 if (childNodeType === SLOT_NODE_ID) {
@@ -3538,6 +3577,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './nano-menu-drawer.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'nano-overflow-nav.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './nano-overflow-nav.cjs.entry.js')); }).then(processMod, consoleError);
         case 'nano-range.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -3606,10 +3649,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './nano-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'nano-icon-button.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './nano-icon-button.cjs.entry.js')); }).then(processMod, consoleError);
         case 'nano-resize-observe_2.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -3618,6 +3657,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './nano-spinner.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'nano-icon-button.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './nano-icon-button.cjs.entry.js')); }).then(processMod, consoleError);
         case 'nano-icon.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -3729,4 +3772,4 @@ exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 exports.writeTask = writeTask;
 
-//# sourceMappingURL=index-46286eea.js.map
+//# sourceMappingURL=index-71f899a7.js.map