@jumpgroup/jump-design-system 0.1.9 → 0.2.1

package/dist/components/jump-badge.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
+const JumpBadgeStyle0 = jumpBadgeCss;
+
+const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.label = '';
+        this.variant = 'primary';
+    }
+    render() {
+        return (h(Host, { key: '8a7bf8245f0edf5aa45f70be833001e7c2899a5e', variant: this.variant }, this.label));
+    }
+    static get style() { return JumpBadgeStyle0; }
+}, [0, "jump-badge", {
+        "label": [513],
+        "variant": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AppCard);
+            }
+            break;
+    } });
+}
+
+const JumpBadge = AppCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpBadge, defineCustomElement };
+
+//# sourceMappingURL=jump-badge.js.map

package/dist/components/jump-badge.js.map

@@ -0,0 +1 @@
+{"file":"jump-badge.js","mappings":";;AAAA,MAAM,YAAY,GAAG,koBAAkoB,CAAC;AACxpB,wBAAe,YAAY;;MCMd,OAAO;;;;qBAIqB,EAAE;uBAKe,SAAS;;IAEjE,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n  --jump-badge-background: var(--primary-standard);\n  --jump-badge-color: #fff;\n  --jump-bafge-border-radius: 50px;\n\n  display: inline-flex;\n  color: var(--jump-badge-color);\n  background-color: var(--jump-badge-background);\n  align-items: center;\n  justify-content: center;\n  font-size: var(--fs-300);\n  font-weight: var(--fw-900);\n  line-height: 1;\n  border-radius: var(--jump-bafge-border-radius);\n  border: solid 1px var(--jump-bafge-border-radius);\n  white-space: nowrap;\n  padding: 0.35em 0.6em;\n  user-select: none;\n  cursor: inherit;\n\n  &[variant='primary'] {\n    --jump-badge-background: var(--primary-standard);\n  }\n\n  &[variant='secondary'] {\n    --jump-badge-background: var(--secondary-standard);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-badge',\n  styleUrl: 'jump-badge.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop({reflect: true}) variant: 'primary'|'secondary' = 'primary';\n\n  render() {\n    return (\n      <Host variant={this.variant}>\n        {this.label}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-button.js

@@ -24,7 +24,7 @@ const AppButton = /*@__PURE__*/ proxyCustomElement(class AppButton extends HTMLE
         this.buttonId = undefined;
     }
     render() {
-        return (h(Host, { key: '99f1066ec9ae582f15275114e8cf95f37d3914d0' }, this.href ? (h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
+        return (h(Host, { key: '21647cd89a0a179d5c035f5e7f533f54375311cf' }, this.href ? (h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
     }
     static get style() { return JumpButtonStyle0; }
 }, [4, "jump-button", {

package/dist/components/jump-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpCard extends Components.JumpCard, HTMLElement {}
+export const JumpCard: {
+    prototype: JumpCard;
+    new (): JumpCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-card.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
+const JumpCardStyle0 = jumpCardCss;
+
+const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.horizontal = false;
+        this.dark = false;
+        this.shadow = undefined;
+        this.border = undefined;
+        this.borderRadius = false;
+        this.topBorderContentRadius = false;
+        this.boxed = false;
+        this.roundedMedia = false;
+        this.imgSrc = '';
+        this.imgAlt = '';
+        this.videoSrc = '';
+    }
+    render() {
+        return (h(Host, { key: 'a1f0752a89731d2f493060b79548fa69e99e1e68', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'a7d7a20a7a5960f3fab3d417d224dd711d119e0b', class: "Content" }, h("slot", { key: '7667cd1ea36b6f2115174f0fa39a6368bc020b16', name: "body" }), h("slot", { key: 'bbaded488f7b0603a9aa19e1549ba41e524ad322', name: "footer" }))));
+    }
+    static get style() { return JumpCardStyle0; }
+}, [4, "jump-card", {
+        "horizontal": [516],
+        "dark": [516],
+        "shadow": [516],
+        "border": [516],
+        "borderRadius": [516, "border-radius"],
+        "topBorderContentRadius": [516, "top-border-content-radius"],
+        "boxed": [516],
+        "roundedMedia": [516, "rounded-media"],
+        "imgSrc": [513, "img-src"],
+        "imgAlt": [513, "img-alt"],
+        "videoSrc": [513, "video-src"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AppCard);
+            }
+            break;
+    } });
+}
+
+const JumpCard = AppCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpCard, defineCustomElement };
+
+//# sourceMappingURL=jump-card.js.map

package/dist/components/jump-card.js.map

@@ -0,0 +1 @@
+{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uvEAAuvE,CAAC;AAC5wE,uBAAe,WAAW;;MCMb,OAAO;;;;0BAI2B,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE5C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["jump-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  // --jump-card-max-width: 320px;\n  --jump-card-max-width-horizontal: 100%;\n  --jump-card-color: var(--neutral-grey-primary);\n  --jump-card-background: #fff;\n  --jump-card-color-dark: #fff;\n  --jump-card-border-color: var(--neutral-grey-background);\n  --jump-card-border-radius: 6px;\n  --jump-card-border-top-radius: 1rem;\n  --jump-card-top-border-body-radius: 1.5rem 1rem;\n  --jump-card-padding: 1rem 1.25rem;\n\n  font-family: var(--ff-primary, 'Arial'), sans-serif;\n  line-height: var(--lh-400, 1.3);\n  background-color: var(--jump-card-background);\n  color: var(--jump-card-color);\n  // max-width: var(--jump-card-max-width);\n  overflow: hidden;\n\n  img,\n  video {\n    aspect-ratio: 4/3;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .Content {\n    padding: 1.5rem 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    flex: 1;\n    background-color: var(--jump-card-background);\n  }\n\n  &[dark] {\n    background-color: var(--neutral-grey-primary);\n    color: var(--jump-card-color-dark);\n\n    .Content {\n      background-color: var(--neutral-grey-primary);\n      color: var(--jump-card-color-dark);\n    }\n  }\n\n  &[border] {\n    border: 1px solid var(--jump-card-border-color);\n  }\n\n  &[border-radius] {\n    border-radius: var(--jump-card-border-radius);\n  }\n\n  &[top-border-content-radius] {\n    border-radius: var(--jump-card-border-top-radius);\n\n    .Content {\n      border-top-left-radius: var(--jump-card-border-top-radius);\n      border-top-right-radius: var(--jump-card-border-top-radius);\n      margin-top: -1rem;\n      z-index: 2;\n    }\n  }\n\n  &[boxed] {\n    border-radius: var(--jump-card-border-radius);\n\n    img,\n    video {\n      border-radius: var(--jump-card-border-radius);\n      background-color: var(--jump-card-background);\n      margin: 0.5rem 0.5rem 0;\n    }\n  }\n\n  &[horizontal] {\n    flex-direction: row;\n    gap: 0.5rem;\n    align-items: center;\n    max-width: var(--jump-card-max-width-horizontal);\n  }\n\n  &[rounded-media] {\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    background-color: transparent;\n\n    img,\n    video {\n      background-color: transparent;\n      border-radius: 50%;\n      aspect-ratio: 1;\n      object-fit: cover;\n      width: 100%;\n      flex: 0 1 40%;\n    }\n\n    .Content {\n      background-color: transparent;\n      align-items: center;\n    }\n  }\n\n  &[rounded-media][horizontal] {\n    text-align: left;\n\n    .Content {\n      align-items: flex-start;\n    }\n  }\n\n  &[shadow] {\n    box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card',\n  styleUrl: 'jump-card.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop({reflect: true}) horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop({reflect: true}) dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop({reflect: true}) shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop({reflect: true}) border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop({reflect: true}) borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop({reflect: true}) topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop({reflect: true}) boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop({reflect: true}) roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop({reflect: true}) imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop({reflect: true}) imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop({reflect: true}) videoSrc: string = '';\n\n  render() {\n    return (\n      <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n        {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n        {this.videoSrc && !this.imgSrc ? \n          <video autoplay> \n            <source src={this.videoSrc} type=\"video/mp4\"/> \n            <source src={this.videoSrc} type=\"video/mov\"/> \n            <source src={this.videoSrc} type=\"video/webm\"/> \n          </video> : ''}\n        <div class=\"Content\">\n          <slot name=\"body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-pagination.js

@@ -19,11 +19,11 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
     }
     render() {
         var _a;
-        return (h(Host, { key: 'eacb989c1eafddab001bce8a3e7618b42e281604', class: "JumpPagination" }, h("div", { key: '52ebe6a91e9cde9f4bdcbad4be0a7e16d0a3867f', class: "JumpPagination__Wrapper" }, this.completeVersion &&
-            h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '97a70fd1f86f644ee0199f0a6f1945988579705c', class: "indicators" }, h("div", { key: '9e9a1c2f541b3aaad78105a58f051127770b6e4d', class: "elements" }, this.completeVersion ?
+        return (h(Host, { key: 'e19fd7770573042573cc19152c02c74054c80ca0', class: "JumpPagination" }, h("div", { key: '293584737d7a7d04e6d35756736f5041e79057bc', class: "JumpPagination__Wrapper" }, this.completeVersion &&
+            h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: 'abcc46875ebf0e3d6197b964b6ae5fc7d3478bd8', class: "indicators" }, h("div", { key: '4bf7e8c0470eb551389f35ac9325162a01ebdde2', class: "elements" }, this.completeVersion ?
             h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
             :
-                h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: 'e7fe2402c2c6a1906f9f3bfc70cfde428590c964', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { name: "chevrons-left" }), h("jump-icon", { key: 'dadb4d94ce1bf31219adfa554a47b33f19b9b3a7', name: "chevron-left" }), h("jump-icon", { key: '841030e266c11bda6d75800bbc61f7e0899fd1ae', name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { name: "chevrons-right" }))))));
+                h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '977288ffe184d14a7bf5b3fe8cb0d252324b303c', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { name: "chevrons-left" }), h("jump-icon", { key: 'b4707986287695a858e70ad2765f2b7e6a3d144c', name: "chevron-left" }), h("jump-icon", { key: '2cbe3824ee94c3d893784ffb78fefff385c714d3', name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { name: "chevrons-right" }))))));
     }
     static get style() { return JumpPaginationStyle0; }
 }, [0, "jump-pagination", {

package/dist/esm/{index-b0176170.js → index-7feee8ea.js}

@@ -420,6 +420,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;
@@ -478,6 +479,8 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
             elm['s-sn'] = newVNode.$name$ || '';
+            // remember the ref callback function
+            elm['s-rf'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.ref;
             // 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$) {
@@ -493,7 +496,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
 };
 const putBackInOriginalLocation = (parentElm, recursive) => {
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-    const oldSlotChildNodes = parentElm.childNodes;
+    const oldSlotChildNodes = Array.from(parentElm.childNodes);
+    if (parentElm['s-sr'] && BUILD.experimentalSlotFixes) {
+        let node = parentElm;
+        while ((node = node.nextSibling)) {
+            if (node && node['s-sn'] === parentElm['s-sn'] && node['s-sh'] === hostTagName) {
+                oldSlotChildNodes.push(node);
+            }
+        }
+    }
     for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
         const childNode = oldSlotChildNodes[i];
         if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
@@ -1195,7 +1206,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                     // 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.
+                    // to make sure they get inserted into their new home in the same order they were declared in their original location.
                     //
                     // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
                     {
@@ -1236,6 +1247,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                             }
                         }
                     }
+                    nodeToRelocate && typeof slotRefNode['s-rf'] === 'function' && slotRefNode['s-rf'](nodeToRelocate);
                 }
                 else {
                     // this node doesn't have a slot home to go to, so let's hide it
@@ -1675,7 +1687,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
         hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
-        {
+        const bundleId = cmpMeta.$lazyBundleId$;
+        if (bundleId) {
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1712,6 +1725,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
             }
             endNewInstance();
         }
+        else {
+            // sync constructor component
+            Cstr = elm.constructor;
+            // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
+            // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
+            // Stencil has completed instantiating the component.
+            customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
+        }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
             let style = Cstr.style;
@@ -2081,4 +2102,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-b0176170.js.map
+//# sourceMappingURL=index-7feee8ea.js.map