@roadtrip/components 3.6.0 → 3.8.0

package/dist/collection/components/rating/rating.js

@@ -10,6 +10,10 @@ export class Rating {
      * Rate review between 0 and 5
      */
     this.rate = 0;
+    /**
+   * Show reviews
+   */
+    this.showreviews = true;
     /**
      * number of reviews
      */
@@ -24,7 +28,7 @@ export class Rating {
     const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;
     const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
     const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
-    return (h(Host, null, h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), h("a", { class: `${sizeRatingNumberClass}`, href: "#" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+    return (h(Host, null, h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.showreviews && h("a", { class: `${sizeRatingNumberClass}`, href: "#" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
   }
   static get is() { return "road-rating"; }
   static get encapsulation() { return "shadow"; }
@@ -76,6 +80,24 @@ export class Rating {
         "reflect": false,
         "defaultValue": "0"
       },
+      "showreviews": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show reviews"
+        },
+        "attribute": "showreviews",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "reviews": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/rating/rating.stories.js

@@ -18,6 +18,9 @@ export default {
         max: '5',
       },
     },
+    showreviews: {
+      control: 'boolean',
+    },
     reviews: {
       control: {
         type: 'number',
@@ -38,7 +41,8 @@ const Template = (args) => html`
   rate="${ifDefined(args.rate)}" 
   reviews="${ifDefined(args.reviews)}" 
   reviews-text="${ifDefined(args['reviews-text'])}"
-  size="${ifDefined(args.size)}" 
+  size="${ifDefined(args.size)}"
+  showreviews="${ifDefined(args.showreviews)}"
 ></road-rating>
 `;
 
@@ -47,6 +51,7 @@ Playground.args = {
   rate: 3,
   reviews: 5,
   'reviews-text': 'reviews',
+  showreviews:'true',
 };
 
 export const Rating = Template.bind({});
@@ -60,3 +65,10 @@ MaxRating.args = {
   rate: 5,
   reviews: 50,
 };
+
+export const LightRating = Template.bind({});
+LightRating.args = {
+  rate: 5,
+  reviews: 50,
+  showreviews:'false',
+};

package/dist/collection/components/tag/tag.css

@@ -22,31 +22,60 @@
   background-color: var(--road-grey-85);
 }
 
+:host(.tag-grey.tag-grey-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-grey-40);
+}
+
 :host(.tag-yellow) {
   color: var(--road-yellow-mikado-20);
   background-color: var(--road-yellow-mikado-90);
 }
 
+:host(.tag-yellow.tag-yellow-contrast) {
+  color: var(--road-yellow-mikado-20);
+  background-color: var(--road-yellow-mikado-60);
+}
+
 :host(.tag-red) {
   color: var(--road-red-pepper-30);
   background-color: var(--road-red-pepper-95);
 }
 
+:host(.tag-red.tag-red-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-red-pepper-60);
+}
+
 :host(.tag-violet) {
   color: var(--road-violet-electric-30);
   background-color: var(--road-violet-electric-95);
 }
 
+:host(.tag-violet.tag-violet-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-violet-electric-60);
+}
+
 :host(.tag-blue) {
   color: var(--road-blue-klein-40);
   background-color: var(--road-blue-klein-95);
 }
 
+:host(.tag-blue.tag-blue-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-blue-klein-60);
+}
+
 :host(.tag-green) {
   color: var(--road-green-monstera-30);
   background-color: var(--road-green-monstera-95);
 }
 
+:host(.tag-green.tag-green-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-green-monstera-60);
+}
 
 /**
  * Hover state

package/dist/collection/components/tag/tag.js

@@ -9,9 +9,14 @@ export class Tag {
      * The color to use from your application's color palette.
      */
     this.color = 'grey';
+    /**
+   * Set to `true` for a contrast tag, for example on a gryy surface
+   */
+    this.contrast = false;
   }
   render() {
-    return (h(Host, { class: `tag-${this.color}` }, h("slot", null)));
+    const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
+    return (h(Host, { class: `${contrastClass}` }, h("slot", null)));
   }
   static get is() { return "road-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -44,6 +49,24 @@ export class Tag {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "'grey'"
+      },
+      "contrast": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` for a contrast tag, for example on a gryy surface"
+        },
+        "attribute": "contrast",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/tag/tag.stories.js

@@ -20,6 +20,9 @@ export default {
         type: 'select',
       },
     },
+    contrast: {
+      control: 'boolean',
+    },
   },
   args: {
     ' ': `Label`,
@@ -28,7 +31,7 @@ export default {
 
 const Template = (args) => html`
 <road-tag
-  color="${ifDefined(args.color)}"
+  color="${ifDefined(args.color)}" contrast="${ifDefined(args.contrast)}"
 >
   ${unsafeHTML(args[' '])}
 </road-tag>
@@ -38,4 +41,10 @@ export const Color = Template.bind({});
 Color.args = {
   color: 'grey',
   ' ': `Reset`,
+};
+
+export const Contrast = Template.bind({});
+Contrast.args = {
+  color: 'grey',
+  contrast: true,
 };

package/dist/collection/components/textarea/textarea.css

@@ -109,6 +109,10 @@
   line-height: 1.5;
 }
 
+.textarea-control.no-resize {
+  resize: none;
+}
+
 /* LABEL
  -------------------- */
 

package/dist/collection/components/textarea/textarea.js

@@ -37,6 +37,10 @@ export class Textarea {
      * If `true`, the element will have its spelling and grammar checked.
      */
     this.spellcheck = false;
+    /**
+   * If `false`, to disabled resize.
+   */
+    this.resize = true;
     /**
      * The value of the textarea.
      */
@@ -76,8 +80,9 @@ export class Textarea {
     const value = this.getValue();
     const labelId = this.textareaId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
+    const noResizeClass = this.resize == false ? 'no-resize' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { class: `form-control textarea-control ${hasValueClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
   }
   static get is() { return "road-textarea"; }
   static get encapsulation() { return "scoped"; }
@@ -340,6 +345,24 @@ export class Textarea {
         "reflect": false,
         "defaultValue": "false"
       },
+      "resize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `false`, to disabled resize."
+        },
+        "attribute": "resize",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "cols": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/textarea/textarea.stories.js

@@ -25,6 +25,9 @@ export default {
     spellcheck: {
       control: 'boolean',
     },
+    resize: {
+      control: 'boolean',
+    },
     error: {
       control: 'text',
     },
@@ -143,6 +146,7 @@ const Template = (args) => html`
     sizes="${ifDefined(args.sizes)}"
     value="${ifDefined(args.value)}"
     spellcheck="${ifDefined(args.spellcheck)}"
+    resize="${ifDefined(args.resize)}"
     placeholder="${ifDefined(args.placeholder)}"
     autocapitalize="${ifDefined(args.autocapitalize)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
@@ -168,6 +172,11 @@ Disabled.args = {
   disabled: true,
 };
 
+export const noResize = Template.bind({});
+noResize.args = {
+  resize: false,
+};
+
 export const Error = Template.bind({});
 Error.args = {
   error: 'This field is required',

package/dist/esm/{app-ca51f056.js → app-36d3a1be.js}

@@ -1,4 +1,4 @@
-import { s as setMode } from './index-a99a5e7b.js';
+import { s as setMode } from './index-3648a167.js';
 
 setMode(elm => {
   return elm.mode || elm.getAttribute('mode') || 'light';

package/dist/esm/{index-a99a5e7b.js → index-3648a167.js}

@@ -34,6 +34,13 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
+const CONTENT_REF_ID = 'r';
+const ORG_LOCATION_ID = 'o';
+const SLOT_NODE_ID = 's';
+const TEXT_NODE_ID = 't';
+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}';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
@@ -184,6 +191,211 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+    const endHydrate = createTime('hydrateClient', tagName);
+    const shadowRoot = hostElm.shadowRoot;
+    const childRenderNodes = [];
+    const slotNodes = [];
+    const shadowRootNodes = shadowRoot ? [] : null;
+    const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
+    if (!plt.$orgLocNodes$) {
+        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
+    }
+    hostElm[HYDRATE_ID] = hostId;
+    hostElm.removeAttribute(HYDRATE_ID);
+    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
+    childRenderNodes.map((c) => {
+        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
+        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+        const node = c.$elm$;
+        if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
+            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+        }
+        if (!shadowRoot) {
+            node['s-hn'] = tagName;
+            if (orgLocationNode) {
+                node['s-ol'] = orgLocationNode;
+                node['s-ol']['s-nr'] = node;
+            }
+        }
+        plt.$orgLocNodes$.delete(orgLocationId);
+    });
+    if (shadowRoot) {
+        shadowRootNodes.map((shadowRootNode) => {
+            if (shadowRootNode) {
+                shadowRoot.appendChild(shadowRootNode);
+            }
+        });
+    }
+    endHydrate();
+};
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
+    let childNodeType;
+    let childIdSplt;
+    let childVNode;
+    let i;
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+        if (childNodeType) {
+            // got the node data from the element's attribute
+            // `${hostId}.${nodeId}.${depth}.${index}`
+            childIdSplt = childNodeType.split('.');
+            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
+                childVNode = {
+                    $flags$: 0,
+                    $hostId$: childIdSplt[0],
+                    $nodeId$: childIdSplt[1],
+                    $depth$: childIdSplt[2],
+                    $index$: childIdSplt[3],
+                    $tag$: node.tagName.toLowerCase(),
+                    $elm$: node,
+                    $attrs$: null,
+                    $children$: null,
+                    $key$: null,
+                    $name$: null,
+                    $text$: null,
+                };
+                childRenderNodes.push(childVNode);
+                node.removeAttribute(HYDRATE_CHILD_ID);
+                // this is a new child vnode
+                // so ensure its parent vnode has the vchildren array
+                if (!parentVNode.$children$) {
+                    parentVNode.$children$ = [];
+                }
+                // add our child vnode to a specific index of the vnode's children
+                parentVNode.$children$[childVNode.$index$] = childVNode;
+                // this is now the new parent vnode for all the next child checks
+                parentVNode = childVNode;
+                if (shadowRootNodes && childVNode.$depth$ === '0') {
+                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                }
+            }
+        }
+        // recursively drill down, end to start so we can remove nodes
+        for (i = node.childNodes.length - 1; i >= 0; i--) {
+            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
+        }
+        if (node.shadowRoot) {
+            // keep drilling down through the shadow root nodes
+            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
+                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
+        childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
+            // comment node for either the host id or a 0 host id
+            childNodeType = childIdSplt[0];
+            childVNode = {
+                $flags$: 0,
+                $hostId$: childIdSplt[1],
+                $nodeId$: childIdSplt[2],
+                $depth$: childIdSplt[3],
+                $index$: childIdSplt[4],
+                $elm$: node,
+                $attrs$: null,
+                $children$: null,
+                $key$: null,
+                $name$: null,
+                $tag$: null,
+                $text$: null,
+            };
+            if (childNodeType === TEXT_NODE_ID) {
+                childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
+                    childVNode.$text$ = childVNode.$elm$.textContent;
+                    childRenderNodes.push(childVNode);
+                    // remove the text comment since it's no longer needed
+                    node.remove();
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                    if (shadowRootNodes && childVNode.$depth$ === '0') {
+                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                    }
+                }
+            }
+            else if (childVNode.$hostId$ === hostId) {
+                // this comment node is specifcally for this host id
+                if (childNodeType === SLOT_NODE_ID) {
+                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
+                    childVNode.$tag$ = 'slot';
+                    if (childIdSplt[5]) {
+                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
+                    }
+                    else {
+                        node['s-sn'] = '';
+                    }
+                    node['s-sr'] = true;
+                    if (shadowRootNodes) {
+                        // browser support shadowRoot and this is a shadow dom component
+                        // create an actual slot element
+                        childVNode.$elm$ = doc.createElement(childVNode.$tag$);
+                        if (childVNode.$name$) {
+                            // add the slot name attribute
+                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
+                        }
+                        // insert the new slot element before the slot comment
+                        node.parentNode.insertBefore(childVNode.$elm$, node);
+                        // remove the slot comment since it's not needed for shadow
+                        node.remove();
+                        if (childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                    slotNodes.push(childVNode);
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                else if (childNodeType === CONTENT_REF_ID) {
+                    // `${CONTENT_REF_ID}.${hostId}`;
+                    if (shadowRootNodes) {
+                        // remove the content ref comment since it's not needed for shadow
+                        node.remove();
+                    }
+                    else {
+                        hostElm['s-cr'] = node;
+                        node['s-cn'] = true;
+                    }
+                }
+            }
+        }
+    }
+    else if (parentVNode && parentVNode.$tag$ === 'style') {
+        const vnode = newVNode(null, node.textContent);
+        vnode.$elm$ = node;
+        vnode.$index$ = '0';
+        parentVNode.$children$ = [vnode];
+    }
+};
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        let i = 0;
+        for (; i < node.childNodes.length; i++) {
+            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
+        }
+        if (node.shadowRoot) {
+            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
+                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        const childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[0] === ORG_LOCATION_ID) {
+            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
+            node.nodeValue = '';
+            // useful to know if the original location is
+            // the root light-dom of a shadow dom component
+            node['s-en'] = childIdSplt[3];
+        }
+    }
+};
 // Private
 const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
 // Public
@@ -293,7 +505,12 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                 rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
             }
             if (!appliedStyles.has(scopeId)) {
-                {
+                if (styleContainerNode.host &&
+                    (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                    // This is only happening on native shadow-dom, do not needs CSS var shim
+                    styleElm.innerHTML = style;
+                }
+                else {
                     if (plt.$cssShim$) {
                         styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
                         const newScopeId = styleElm['s-sc'];
@@ -345,6 +562,7 @@ const attachStyles = (hostRef) => {
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
 /**
  * Production setAccessor() function based on Preact by
  * Jason Miller (@developit)
@@ -1699,7 +1917,19 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
+            let hostId;
             {
+                hostId = elm.getAttribute(HYDRATE_ID);
+                if (hostId) {
+                    if (supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        const scopeId = addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode'))
+                            ;
+                        elm.classList.remove(scopeId + '-h', scopeId + '-s');
+                    }
+                    initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+                }
+            }
+            if (!hostId) {
                 // initUpdate
                 // if the slot polyfill is required we'll need to put some nodes
                 // in here to act as original content anchors as we move nodes around
@@ -1715,7 +1945,10 @@ const connectedCallback = (elm) => {
                 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
                     // climb up the ancestors looking for the first
                     // component that hasn't finished its lifecycle update yet
-                    if (ancestorComponent['s-p']) {
+                    if ((ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
+                        ancestorComponent.hasAttribute('s-id') &&
+                        ancestorComponent['s-p']) ||
+                        ancestorComponent['s-p']) {
                         // we found this components first ancestor component
                         // keep a reference to this component's ancestor component
                         attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
@@ -1788,10 +2021,22 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
     const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
+    const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
     let appLoadFallback;
     let isBootstrapping = true;
+    let i = 0;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    {
+        // If the app is already hydrated there is not point to disable the
+        // async queue. This will improve the first input delay
+        plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
+    }
+    {
+        for (; i < styles.length; i++) {
+            registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
+        }
+    }
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { a as addIcons } from './utils-0ec32b47.js';
-import './index-a99a5e7b.js';
+export { a as addIcons } from './utils-4fb81650.js';
+import './index-3648a167.js';