@nova-design-system/nova-webcomponents 3.0.0-beta.29 → 3.0.0-beta.30

package/hydrate/index.js

@@ -128,7 +128,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'native';
-const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 // Prevents the dev components from being bundled in production as a component
 if (Build.isDev) {
@@ -136,7 +136,7 @@ if (Build.isDev) {
 }
 
 /*
- Stencil Hydrate Platform v4.23.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.22.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -148,6 +148,9 @@ var __export = (target, all) => {
 var EMPTY_OBJ = {};
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
+
+// src/utils/helpers.ts
+var isDef = (v) => v != null;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -207,13 +210,26 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
+var createTime = (fnName, tagName = "") => {
+  {
+    return () => {
+      return;
+    };
+  }
+};
+var uniqueTime = (key, measureText) => {
+  {
+    return () => {
+      return;
+    };
+  }
+};
 
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
 var SLOT_NODE_ID = "s";
 var TEXT_NODE_ID = "t";
-var COMMENT_NODE_ID = "c";
 var HYDRATE_ID = "s-id";
 var HYDRATED_STYLE_ID = "sty-id";
 var HYDRATE_CHILD_ID = "c-id";
@@ -230,95 +246,6 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
   "formDisabledCallback",
   "formStateRestoreCallback"
 ];
-var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
-  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
-    getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-      var _a;
-      if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
-        if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
-          slotNode.hidden = true;
-        } else {
-          slotNode.hidden = false;
-        }
-      }
-    });
-  }
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
-      updateFallbackSlotVisibility(childNode);
-    }
-  }
-};
-var getHostSlotNodes = (childNodes, hostName, slotName) => {
-  let i2 = 0;
-  let slottedNodes = [];
-  let childNode;
-  for (; i2 < childNodes.length; i2++) {
-    childNode = childNodes[i2];
-    if (childNode["s-sr"] && childNode["s-hn"] === hostName && (!slotName || childNode["s-sn"] === slotName)) {
-      slottedNodes.push(childNode);
-      if (typeof slotName !== "undefined") return slottedNodes;
-    }
-    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
-  }
-  return slottedNodes;
-};
-var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
-  const childNodes = [];
-  if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
-  while ((node = node.nextSibling) && node["s-sn"] === slotName) {
-    childNodes.push(node);
-  }
-  return childNodes;
-};
-var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
-  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
-      return true;
-    }
-    if (nodeToRelocate.getAttribute("slot") === slotName) {
-      return true;
-    }
-    return false;
-  }
-  if (nodeToRelocate["s-sn"] === slotName) {
-    return true;
-  }
-  return slotName === "";
-};
-var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
-  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
-  }
-  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
-  const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
-  if (typeof position !== "undefined") {
-    {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
-  } else {
-    appendMethod.call(parent, slottedNodeLocation);
-  }
-  newChild["s-ol"] = slottedNodeLocation;
-  newChild["s-sh"] = slotNode["s-hn"];
-};
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -393,123 +320,392 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
-var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-  if (oldValue !== newValue) {
-    let isProp = isMemberInElement(elm, memberName);
-    let ln = memberName.toLowerCase();
-    if (memberName === "class") {
-      const classList = elm.classList;
-      const oldClasses = parseClassList(oldValue);
-      let newClasses = parseClassList(newValue);
-      if (elm["s-si"]) {
-        newClasses.push(elm["s-si"]);
-        oldClasses.forEach((c) => {
-          if (c.startsWith(elm["s-si"])) newClasses.push(c);
-        });
-        newClasses = [...new Set(newClasses)];
-        classList.add(...newClasses);
-        delete elm["s-si"];
-      } else {
-        classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-        classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+
+// src/runtime/client-hydrate.ts
+var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  const endHydrate = createTime("hydrateClient", tagName);
+  const shadowRoot = hostElm.shadowRoot;
+  const childRenderNodes = [];
+  const slotNodes = [];
+  const shadowRootNodes = null;
+  const vnode = hostRef.$vnode$ = newVNode(tagName, null);
+  if (!plt.$orgLocNodes$) {
+    initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ 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;
       }
-    } else if (memberName === "style") {
-      {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            {
-              elm.style[prop] = "";
-            }
-          }
+    }
+    plt.$orgLocNodes$.delete(orgLocationId);
+  });
+  endHydrate();
+};
+var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
+  let childNodeType;
+  let childIdSplt;
+  let childVNode;
+  let i2;
+  if (node.nodeType === 1 /* ElementNode */) {
+    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+    if (childNodeType) {
+      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);
+        if (!parentVNode.$children$) {
+          parentVNode.$children$ = [];
         }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          {
-            elm.style[prop] = newValue[prop];
-          }
+        parentVNode.$children$[childVNode.$index$] = childVNode;
+        parentVNode = childVNode;
+        if (shadowRootNodes && childVNode.$depth$ === "0") {
+          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
         }
       }
-    } else if (memberName === "key") ; else if (memberName === "ref") {
-      if (newValue) {
-        newValue(elm);
-      }
-    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
-      if (memberName[2] === "-") {
-        memberName = memberName.slice(3);
-      } else if (isMemberInElement(win, ln)) {
-        memberName = ln.slice(2);
-      } else {
-        memberName = ln[2] + memberName.slice(3);
+    }
+    if (node.shadowRoot) {
+      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
+        clientHydrate(
+          parentVNode,
+          childRenderNodes,
+          slotNodes,
+          shadowRootNodes,
+          hostElm,
+          node.shadowRoot.childNodes[i2],
+          hostId
+        );
       }
-      if (oldValue || newValue) {
-        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-        if (oldValue) {
-          plt.rel(elm, memberName, oldValue, capture);
-        }
-        if (newValue) {
-          plt.ael(elm, memberName, newValue, capture);
+    }
+    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        node.childNodes[i2],
+        hostId
+      );
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
+      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 /* TextNode */) {
+          childVNode.$text$ = childVNode.$elm$.textContent;
+          childRenderNodes.push(childVNode);
+          node.remove();
+          if (!parentVNode.$children$) {
+            parentVNode.$children$ = [];
+          }
+          parentVNode.$children$[childVNode.$index$] = childVNode;
+          if (shadowRootNodes && childVNode.$depth$ === "0") {
+            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+          }
         }
-      }
-    } else {
-      const isComplex = isComplexType(newValue);
-      if ((isProp || isComplex && newValue !== null) && !isSvg) {
-        try {
-          if (!elm.tagName.includes("-")) {
-            const n = newValue == null ? "" : newValue;
-            if (memberName === "list") {
-              isProp = false;
-            } else if (oldValue == null || elm[memberName] != n) {
-              if (typeof elm.__lookupSetter__(memberName) === "function") {
-                elm[memberName] = n;
-              } else {
-                elm.setAttribute(memberName, n);
-              }
-            }
+      } else if (childVNode.$hostId$ === hostId) {
+        if (childNodeType === SLOT_NODE_ID) {
+          childVNode.$tag$ = "slot";
+          if (childIdSplt[5]) {
+            node["s-sn"] = childVNode.$name$ = childIdSplt[5];
           } else {
-            elm[memberName] = newValue;
+            node["s-sn"] = "";
           }
-        } catch (e) {
-        }
-      }
-      if (newValue == null || newValue === false) {
-        if (newValue !== false || elm.getAttribute(memberName) === "") {
+          node["s-sr"] = true;
+          slotNodes.push(childVNode);
+          if (!parentVNode.$children$) {
+            parentVNode.$children$ = [];
+          }
+          parentVNode.$children$[childVNode.$index$] = childVNode;
+        } else if (childNodeType === CONTENT_REF_ID) {
           {
-            elm.removeAttribute(memberName);
+            hostElm["s-cr"] = node;
+            node["s-cn"] = true;
           }
         }
-      } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
-        newValue = newValue === true ? "" : newValue;
-        {
-          elm.setAttribute(memberName, newValue);
-        }
       }
     }
+  } else if (parentVNode && parentVNode.$tag$ === "style") {
+    const vnode = newVNode(null, node.textContent);
+    vnode.$elm$ = node;
+    vnode.$index$ = "0";
+    parentVNode.$children$ = [vnode];
   }
 };
-var parseClassListRegex = /\s/;
-var parseClassList = (value) => {
-  if (typeof value === "object" && "baseVal" in value) {
-    value = value.baseVal;
-  }
-  if (!value) {
-    return [];
-  }
-  return value.split(parseClassListRegex);
-};
-var CAPTURE_EVENT_SUFFIX = "Capture";
-var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
-
-// src/runtime/vdom/update-element.ts
-var updateElement = (oldVnode, newVnode, isSvgMode2) => {
-  const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
-  const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
-  const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-  {
-    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
-      if (!(memberName in newVnodeAttrs)) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
+var initializeDocumentHydrate = (node, orgLocNodes) => {
+  if (node.nodeType === 1 /* ElementNode */) {
+    let i2 = 0;
+    if (node.shadowRoot) {
+      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
+        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
+      }
+    }
+    for (i2 = 0; i2 < node.childNodes.length; i2++) {
+      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    const childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[0] === ORG_LOCATION_ID) {
+      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
+      node.nodeValue = "";
+      node["s-en"] = childIdSplt[3];
+    }
+  }
+};
+var parsePropertyValue = (propValue, propType) => {
+  if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
+    if (propType & 1 /* String */) {
+      return String(propValue);
+    }
+    return propValue;
+  }
+  return propValue;
+};
+var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
+var emitEvent = (elm, name, opts) => {
+  const ev = plt.ce(name, opts);
+  elm.dispatchEvent(ev);
+  return ev;
+};
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var registerStyle = (scopeId2, cssText, allowCS) => {
+  let style = styles.get(scopeId2);
+  {
+    style = cssText;
+  }
+  styles.set(scopeId2, style);
+};
+var addStyle = (styleContainerNode, cmpMeta, mode) => {
+  var _a;
+  const scopeId2 = getScopeId(cmpMeta);
+  const style = styles.get(scopeId2);
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
+  if (style) {
+    if (typeof style === "string") {
+      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      let styleElm;
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+      }
+      if (!appliedStyles.has(scopeId2)) {
+        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = doc.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
+          }
+          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+            if (styleContainerNode.nodeName === "HEAD") {
+              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+              styleContainerNode.insertBefore(styleElm, referenceNode2);
+            } else if ("host" in styleContainerNode) {
+              {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
+              }
+            } else {
+              styleContainerNode.append(styleElm);
+            }
+          }
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
+        }
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
+        }
+      }
+    }
+  }
+  return scopeId2;
+};
+var attachStyles = (hostRef) => {
+  const cmpMeta = hostRef.$cmpMeta$;
+  const elm = hostRef.$hostElement$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  addStyle(
+    elm.getRootNode(),
+    cmpMeta);
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
+var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+  if (oldValue !== newValue) {
+    let isProp = isMemberInElement(elm, memberName);
+    let ln = memberName.toLowerCase();
+    if (memberName === "class") {
+      const classList = elm.classList;
+      const oldClasses = parseClassList(oldValue);
+      const newClasses = parseClassList(newValue);
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
+    } else if (memberName === "key") ; else if (memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
+      }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+      if (memberName[2] === "-") {
+        memberName = memberName.slice(3);
+      } else if (isMemberInElement(win, ln)) {
+        memberName = ln.slice(2);
+      } else {
+        memberName = ln[2] + memberName.slice(3);
+      }
+      if (oldValue || newValue) {
+        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+        if (oldValue) {
+          plt.rel(elm, memberName, oldValue, capture);
+        }
+        if (newValue) {
+          plt.ael(elm, memberName, newValue, capture);
+        }
+      }
+    } else {
+      const isComplex = isComplexType(newValue);
+      if ((isProp || isComplex && newValue !== null) && !isSvg) {
+        try {
+          if (!elm.tagName.includes("-")) {
+            const n = newValue == null ? "" : newValue;
+            if (memberName === "list") {
+              isProp = false;
+            } else if (oldValue == null || elm[memberName] != n) {
+              if (typeof elm.__lookupSetter__(memberName) === "function") {
+                elm[memberName] = n;
+              } else {
+                elm.setAttribute(memberName, n);
+              }
+            }
+          } else {
+            elm[memberName] = newValue;
+          }
+        } catch (e) {
+        }
+      }
+      if (newValue == null || newValue === false) {
+        if (newValue !== false || elm.getAttribute(memberName) === "") {
+          {
+            elm.removeAttribute(memberName);
+          }
+        }
+      } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
+        newValue = newValue === true ? "" : newValue;
+        {
+          elm.setAttribute(memberName, newValue);
+        }
+      }
+    }
+  }
+};
+var parseClassListRegex = /\s/;
+var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
+
+// src/runtime/vdom/update-element.ts
+var updateElement = (oldVnode, newVnode, isSvgMode2) => {
+  const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
+  const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
+  const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+  {
+    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
+      if (!(memberName in newVnodeAttrs)) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
       }
     }
   }
@@ -526,13 +722,16 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
+
+// src/runtime/vdom/vdom-render.ts
+var scopeId;
 var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
 var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
-var createElm = (oldParentVNode, newParentVNode, childIndex) => {
+var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
@@ -572,6 +771,11 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
+    const rootNode = elm.getRootNode();
+    const isElementWithinShadowRoot = !rootNode.querySelector("body");
+    if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
+      elm.classList.add(elm["s-si"] = scopeId);
+    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2);
@@ -607,7 +811,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
 };
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
-  const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
+  const oldSlotChildNodes = Array.from(parentElm.childNodes);
   if (parentElm["s-sr"] && BUILD.experimentalSlotFixes) {
     let node = parentElm;
     while (node = node.nextSibling) {
@@ -619,7 +823,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
+      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -736,11 +940,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       }
       if (node) {
         {
-          insertBefore(
-            referenceNode(oldStartVnode.$elm$).parentNode,
-            node,
-            referenceNode(oldStartVnode.$elm$)
-          );
+          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         }
       }
     }
@@ -761,19 +961,28 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
     if (leftVNode.$tag$ === "slot") {
+      if (
+        // The component gets hydrated and no VDOM has been initialized.
+        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
+        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
+        // hydration comments to be removed
+        leftVNode.$elm$.nodeType !== 8
+      ) {
+        return false;
+      }
       return leftVNode.$name$ === rightVNode.$name$;
     }
     if (!isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
-    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
-      leftVNode.$key$ = rightVNode.$key$;
-    }
     return true;
   }
   return false;
 };
-var referenceNode = (node) => node && node["s-ol"] || node;
+var referenceNode = (node) => {
+  return node && node["s-ol"] || node;
+};
+var parentReferenceNode = (node) => (node["s-ol"] ? node["s-ol"] : node).parentNode;
 var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
@@ -812,15 +1021,41 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var updateFallbackSlotVisibility = (elm) => {
+  const childNodes = elm.childNodes;
+  for (const childNode of childNodes) {
+    if (childNode.nodeType === 1 /* ElementNode */) {
+      if (childNode["s-sr"]) {
+        const slotName = childNode["s-sn"];
+        childNode.hidden = false;
+        for (const siblingNode of childNodes) {
+          if (siblingNode !== childNode) {
+            if (siblingNode["s-hn"] !== childNode["s-hn"] || slotName !== "") {
+              if (siblingNode.nodeType === 1 /* ElementNode */ && (slotName === siblingNode.getAttribute("slot") || slotName === siblingNode["s-sn"]) || siblingNode.nodeType === 3 /* TextNode */ && slotName === siblingNode["s-sn"]) {
+                childNode.hidden = true;
+                break;
+              }
+            } else {
+              if (siblingNode.nodeType === 1 /* ElementNode */ || siblingNode.nodeType === 3 /* TextNode */ && siblingNode.textContent.trim() !== "") {
+                childNode.hidden = true;
+                break;
+              }
+            }
+          }
+        }
+      }
+      updateFallbackSlotVisibility(childNode);
+    }
+  }
+};
 var relocateNodes = [];
 var markSlotContentForRelocation = (elm) => {
   let node;
   let hostContentNodes;
   let j;
-  const children = elm.__childNodes || elm.childNodes;
-  for (const childNode of children) {
+  for (const childNode of elm.childNodes) {
     if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
-      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
+      hostContentNodes = node.parentNode.childNodes;
       const slotName = childNode["s-sn"];
       for (j = hostContentNodes.length - 1; j >= 0; j--) {
         node = hostContentNodes[j];
@@ -862,10 +1097,25 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
+  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
+      return true;
+    }
+    if (nodeToRelocate.getAttribute("slot") === slotName) {
+      return true;
+    }
+    return false;
+  }
+  if (nodeToRelocate["s-sn"] === slotName) {
+    return true;
+  }
+  return slotName === "";
+};
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
@@ -873,7 +1123,7 @@ var insertBefore = (parent, newNode, reference) => {
   return inserted;
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-  var _c, _d;
+  var _a, _b, _c, _d;
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -920,13 +1170,30 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
+          {
+            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
+            while (orgLocationNode) {
+              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
+              if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === refNode.parentNode) {
+                refNode = refNode.nextSibling;
+                while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) {
+                  refNode = refNode == null ? void 0 : refNode.nextSibling;
+                }
+                if (!refNode || !refNode["s-nr"]) {
+                  insertBeforeNode = refNode;
+                  break;
+                }
+              }
+              orgLocationNode = orgLocationNode.previousSibling;
+            }
+          }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
               if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
-              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
+              if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
             }
@@ -956,572 +1223,125 @@ var slotReferenceDebugNode = (slotVNode) => doc.createComment(
 var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
   `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
 );
-var createTime = (fnName, tagName = "") => {
-  {
-    return () => {
-      return;
-    };
+
+// src/runtime/update-component.ts
+var attachToAncestor = (hostRef, ancestorComponent) => {
+  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+    ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
   }
 };
-var uniqueTime = (key, measureText) => {
+var scheduleUpdate = (hostRef, isInitialLoad) => {
   {
-    return () => {
-      return;
-    };
+    hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
+  if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+    hostRef.$flags$ |= 512 /* needsRerender */;
+    return;
+  }
+  attachToAncestor(hostRef, hostRef.$ancestorComponent$);
+  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  return writeTask(dispatch) ;
 };
-
-// src/runtime/client-hydrate.ts
-var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  const endHydrate = createTime("hydrateClient", tagName);
-  const shadowRoot = hostElm.shadowRoot;
-  const childRenderNodes = [];
-  const slotNodes = [];
-  const slottedNodes = [];
-  const shadowRootNodes = null;
-  const vnode = newVNode(tagName, null);
-  vnode.$elm$ = hostElm;
-  if (!plt.$orgLocNodes$) {
-    initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+var dispatchHooks = (hostRef, isInitialLoad) => {
+  const elm = hostRef.$hostElement$;
+  const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
+  const instance = hostRef.$lazyInstance$ ;
+  if (!instance) {
+    throw new Error(
+      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
+    );
   }
-  hostElm[HYDRATE_ID] = hostId;
-  hostElm.removeAttribute(HYDRATE_ID);
-  hostRef.$vnode$ = clientHydrate(
-    vnode,
-    childRenderNodes,
-    slotNodes,
-    shadowRootNodes,
-    hostElm,
-    hostElm,
-    hostId,
-    slottedNodes
-  );
-  let crIndex = 0;
-  const crLength = childRenderNodes.length;
-  let childRenderNode;
-  for (crIndex; crIndex < crLength; crIndex++) {
-    childRenderNode = childRenderNodes[crIndex];
-    const orgLocationId = childRenderNode.$hostId$ + "." + childRenderNode.$nodeId$;
-    const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
-    const node = childRenderNode.$elm$;
-    if (!shadowRoot) {
-      node["s-hn"] = tagName.toUpperCase();
-      if (childRenderNode.$tag$ === "slot") {
-        node["s-cr"] = hostElm["s-cr"];
-      }
-    }
-    if (childRenderNode.$tag$ === "slot") {
-      if (childRenderNode.$children$) {
-        childRenderNode.$flags$ |= 2 /* isSlotFallback */;
-        if (!childRenderNode.$elm$.childNodes.length) {
-          childRenderNode.$children$.forEach((c) => {
-            childRenderNode.$elm$.appendChild(c.$elm$);
-          });
-        }
-      } else {
-        childRenderNode.$flags$ |= 1 /* isSlotReference */;
+  let maybePromise;
+  if (isInitialLoad) {
+    {
+      hostRef.$flags$ |= 256 /* isListenReady */;
+      if (hostRef.$queuedListeners$) {
+        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+        hostRef.$queuedListeners$ = void 0;
       }
     }
-    if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
-        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-      }
-      orgLocationNode.parentNode.removeChild(orgLocationNode);
-      if (!shadowRoot) {
-        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
-      }
+    {
+      maybePromise = safeCall(instance, "componentWillLoad");
     }
-    plt.$orgLocNodes$.delete(orgLocationId);
   }
-  const hosts = [];
-  const snLen = slottedNodes.length;
-  let snIndex = 0;
-  let slotGroup;
-  let snGroupIdx;
-  let snGroupLen;
-  let slottedItem;
-  for (snIndex; snIndex < snLen; snIndex++) {
-    slotGroup = slottedNodes[snIndex];
-    if (!slotGroup || !slotGroup.length) continue;
-    snGroupLen = slotGroup.length;
-    snGroupIdx = 0;
-    for (snGroupIdx; snGroupIdx < snGroupLen; snGroupIdx++) {
-      slottedItem = slotGroup[snGroupIdx];
-      if (!hosts[slottedItem.hostId]) {
-        hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
-      }
-      if (!hosts[slottedItem.hostId]) continue;
-      const hostEle = hosts[slottedItem.hostId];
-      if (!hostEle.shadowRoot || !shadowRoot) {
-        slottedItem.slot["s-cr"] = hostEle["s-cr"];
-        if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
-          slottedItem.slot["s-cr"] = hostEle;
-        } else {
-          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
-        }
-        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-      }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
-      }
-    }
+  {
+    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
   }
-  hostRef.$hostElement$ = hostElm;
-  endHydrate();
+  endSchedule();
+  return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
-  let childNodeType;
-  let childIdSplt;
-  let childVNode;
-  let i2;
-  if (node.nodeType === 1 /* ElementNode */) {
-    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
-    if (childNodeType) {
-      childIdSplt = childNodeType.split(".");
-      if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
-        childVNode = createSimpleVNode({
-          $flags$: 0,
-          $hostId$: childIdSplt[0],
-          $nodeId$: childIdSplt[1],
-          $depth$: childIdSplt[2],
-          $index$: childIdSplt[3],
-          $tag$: node.tagName.toLowerCase(),
-          $elm$: node,
-          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` patch
-          // won't try to reconcile them. Classes set on the node will be blown away.
-          $attrs$: { class: node.className || "" }
-        });
-        childRenderNodes.push(childVNode);
-        node.removeAttribute(HYDRATE_CHILD_ID);
-        if (!parentVNode.$children$) {
-          parentVNode.$children$ = [];
-        }
-        const slotName = childVNode.$elm$.getAttribute("s-sn");
-        if (typeof slotName === "string") {
-          if (childVNode.$tag$ === "slot-fb") {
-            addSlot(
-              slotName,
-              childIdSplt[2],
-              childVNode,
-              node,
-              parentVNode,
-              childRenderNodes,
-              slotNodes,
-              shadowRootNodes,
-              slottedNodes
-            );
-          }
-          childVNode.$elm$["s-sn"] = slotName;
-          childVNode.$elm$.removeAttribute("s-sn");
-        }
-        if (childVNode.$index$ !== void 0) {
-          parentVNode.$children$[childVNode.$index$] = childVNode;
-        }
-        parentVNode = childVNode;
-        if (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
+  console.error(err2);
+  fn();
+}) : fn();
+var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
+var updateComponent = async (hostRef, instance, isInitialLoad) => {
+  var _a;
+  const elm = hostRef.$hostElement$;
+  const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
+  const rc = elm["s-rc"];
+  if (isInitialLoad) {
+    attachStyles(hostRef);
+  }
+  const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
+  {
+    await callRender(hostRef, instance, elm, isInitialLoad);
+  }
+  {
+    try {
+      serverSideConnected(elm);
+      if (isInitialLoad) {
+        if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
+          elm["s-en"] = "";
+        } else if (hostRef.$cmpMeta$.$flags$ & 2 /* scopedCssEncapsulation */) {
+          elm["s-en"] = "c";
         }
       }
+    } catch (e) {
+      consoleError(e, elm);
     }
-    if (node.shadowRoot) {
-      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
-        clientHydrate(
-          parentVNode,
-          childRenderNodes,
-          slotNodes,
-          shadowRootNodes,
-          hostElm,
-          node.shadowRoot.childNodes[i2],
-          hostId,
-          slottedNodes
-        );
-      }
+  }
+  if (rc) {
+    rc.map((cb) => cb());
+    elm["s-rc"] = void 0;
+  }
+  endRender();
+  endUpdate();
+  {
+    const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
+    const postUpdate = () => postUpdateComponent(hostRef);
+    if (childrenPromises.length === 0) {
+      postUpdate();
+    } else {
+      Promise.all(childrenPromises).then(postUpdate);
+      hostRef.$flags$ |= 4 /* isWaitingForChildren */;
+      childrenPromises.length = 0;
     }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = nonShadowNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        nonShadowNodes[i2],
-        hostId,
-        slottedNodes
-      );
+  }
+};
+var renderingRef = null;
+var callRender = (hostRef, instance, elm, isInitialLoad) => {
+  try {
+    renderingRef = instance;
+    instance = instance.render() ;
+    {
+      hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
     }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
-      childNodeType = childIdSplt[0];
-      childVNode = createSimpleVNode({
-        $hostId$: childIdSplt[1],
-        $nodeId$: childIdSplt[2],
-        $depth$: childIdSplt[3],
-        $index$: childIdSplt[4] || "0",
-        $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 /* TextNode */) {
-          childVNode.$text$ = childVNode.$elm$.textContent;
-          childRenderNodes.push(childVNode);
-          node.remove();
-          if (hostId === childVNode.$hostId$) {
-            if (!parentVNode.$children$) {
-              parentVNode.$children$ = [];
-            }
-            parentVNode.$children$[childVNode.$index$] = childVNode;
-          }
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-          }
-        }
-      } else if (childNodeType === COMMENT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
-        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
-          childRenderNodes.push(childVNode);
-          node.remove();
-        }
-      } else if (childVNode.$hostId$ === hostId) {
-        if (childNodeType === SLOT_NODE_ID) {
-          const slotName = node["s-sn"] = childIdSplt[5] || "";
-          addSlot(
-            slotName,
-            childIdSplt[2],
-            childVNode,
-            node,
-            parentVNode,
-            childRenderNodes,
-            slotNodes,
-            shadowRootNodes,
-            slottedNodes
-          );
-        } else if (childNodeType === CONTENT_REF_ID) {
-          {
-            hostElm["s-cr"] = node;
-            node["s-cn"] = true;
-          }
+    {
+      hostRef.$flags$ |= 2 /* hasRendered */;
+    }
+    {
+      {
+        {
+          return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
         }
       }
     }
-  } else if (parentVNode && parentVNode.$tag$ === "style") {
-    const vnode = newVNode(null, node.textContent);
-    vnode.$elm$ = node;
-    vnode.$index$ = "0";
-    parentVNode.$children$ = [vnode];
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
   }
-  return parentVNode;
-};
-var initializeDocumentHydrate = (node, orgLocNodes) => {
-  if (node.nodeType === 1 /* ElementNode */) {
-    const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
-    if (componentId) {
-      orgLocNodes.set(componentId, node);
-    }
-    let i2 = 0;
-    if (node.shadowRoot) {
-      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
-        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
-      }
-    }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = 0; i2 < nonShadowNodes.length; i2++) {
-      initializeDocumentHydrate(nonShadowNodes[i2], orgLocNodes);
-    }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    const childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[0] === ORG_LOCATION_ID) {
-      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
-      node.nodeValue = "";
-      node["s-en"] = childIdSplt[3];
-    }
-  }
-};
-var createSimpleVNode = (vnode) => {
-  const defaultVNode = {
-    $flags$: 0,
-    $hostId$: null,
-    $nodeId$: null,
-    $depth$: null,
-    $index$: "0",
-    $elm$: null,
-    $attrs$: null,
-    $children$: null,
-    $key$: null,
-    $name$: null,
-    $tag$: null,
-    $text$: null
-  };
-  return { ...defaultVNode, ...vnode };
-};
-function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
-  node["s-sr"] = true;
-  childVNode.$name$ = slotName || null;
-  childVNode.$tag$ = "slot";
-  const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  {
-    const slot = childVNode.$elm$;
-    const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
-    addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
-    if (shouldMove) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
-    }
-    childRenderNodes.push(childVNode);
-  }
-  slotNodes.push(childVNode);
-  if (!parentVNode.$children$) {
-    parentVNode.$children$ = [];
-  }
-  parentVNode.$children$[childVNode.$index$] = childVNode;
-}
-var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
-  let slottedNode = slotNode.nextSibling;
-  slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
-    slottedNode["s-sn"] = slotName;
-    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling;
-  }
-};
-var parsePropertyValue = (propValue, propType) => {
-  if (propValue != null && !isComplexType(propValue)) {
-    if (propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
-    }
-    if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
-    }
-    if (propType & 1 /* String */) {
-      return String(propValue);
-    }
-    return propValue;
-  }
-  return propValue;
-};
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
-
-// src/runtime/event-emitter.ts
-var createEvent = (ref, name, flags) => {
-  const elm = getElement(ref);
-  return {
-    emit: (detail) => {
-      return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
-        detail
-      });
-    }
-  };
-};
-var emitEvent = (elm, name, opts) => {
-  const ev = plt.ce(name, opts);
-  elm.dispatchEvent(ev);
-  return ev;
-};
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || doc.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(styleElm, referenceNode2);
-            } else if ("host" in styleContainerNode) {
-              {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
-              }
-            } else {
-              styleContainerNode.append(styleElm);
-            }
-          }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  addStyle(
-    elm.getRootNode(),
-    cmpMeta);
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
-
-// src/runtime/update-component.ts
-var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
-    ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
-  }
-};
-var scheduleUpdate = (hostRef, isInitialLoad) => {
-  {
-    hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
-  }
-  if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
-    hostRef.$flags$ |= 512 /* needsRerender */;
-    return;
-  }
-  attachToAncestor(hostRef, hostRef.$ancestorComponent$);
-  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return writeTask(dispatch) ;
-};
-var dispatchHooks = (hostRef, isInitialLoad) => {
-  const elm = hostRef.$hostElement$;
-  const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = hostRef.$lazyInstance$ ;
-  if (!instance) {
-    throw new Error(
-      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
-    );
-  }
-  let maybePromise;
-  if (isInitialLoad) {
-    {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
-        hostRef.$queuedListeners$ = void 0;
-      }
-    }
-    {
-      maybePromise = safeCall(instance, "componentWillLoad");
-    }
-  }
-  {
-    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
-  }
-  endSchedule();
-  return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
-};
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
-  console.error(err2);
-  fn();
-}) : fn();
-var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
-var updateComponent = async (hostRef, instance, isInitialLoad) => {
-  var _a;
-  const elm = hostRef.$hostElement$;
-  const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
-  const rc = elm["s-rc"];
-  if (isInitialLoad) {
-    attachStyles(hostRef);
-  }
-  const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  {
-    await callRender(hostRef, instance, elm, isInitialLoad);
-  }
-  {
-    try {
-      serverSideConnected(elm);
-      if (isInitialLoad) {
-        if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
-          elm["s-en"] = "";
-        } else if (hostRef.$cmpMeta$.$flags$ & 2 /* scopedCssEncapsulation */) {
-          elm["s-en"] = "c";
-        }
-      }
-    } catch (e) {
-      consoleError(e, elm);
-    }
-  }
-  if (rc) {
-    rc.map((cb) => cb());
-    elm["s-rc"] = void 0;
-  }
-  endRender();
-  endUpdate();
-  {
-    const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
-    const postUpdate = () => postUpdateComponent(hostRef);
-    if (childrenPromises.length === 0) {
-      postUpdate();
-    } else {
-      Promise.all(childrenPromises).then(postUpdate);
-      hostRef.$flags$ |= 4 /* isWaitingForChildren */;
-      childrenPromises.length = 0;
-    }
-  }
-};
-var renderingRef = null;
-var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  try {
-    renderingRef = instance;
-    instance = instance.render() ;
-    {
-      hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
-    }
-    {
-      hostRef.$flags$ |= 2 /* hasRendered */;
-    }
-    {
-      {
-        {
-          return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
-        }
-      }
-    }
-  } catch (e) {
-    consoleError(e, hostRef.$hostElement$);
-  }
-  renderingRef = null;
-  return null;
+  renderingRef = null;
+  return null;
 };
 var getRenderingRef = () => renderingRef;
 var postUpdateComponent = (hostRef) => {
@@ -1666,62 +1486,16 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        if ((memberFlags & 2048 /* Getter */) === 0) {
-          Object.defineProperty(prototype, memberName, {
-            get() {
-              return getValue(this, memberName);
-            },
-            set(newValue) {
-              setValue(this, memberName, newValue, cmpMeta);
-            },
-            configurable: true,
-            enumerable: true
-          });
-        } else if (flags & 1 /* isElementConstructor */ && memberFlags & 2048 /* Getter */) {
-          {
-            Object.defineProperty(prototype, memberName, {
-              get() {
-                const ref = getHostRef(this);
-                const instance = ref ? ref.$lazyInstance$ : prototype;
-                if (!instance) return;
-                return instance[memberName];
-              },
-              configurable: true,
-              enumerable: true
-            });
-          }
-          if (memberFlags & 4096 /* Setter */) {
-            const origSetter = Object.getOwnPropertyDescriptor(prototype, memberName).set;
-            Object.defineProperty(prototype, memberName, {
-              set(newValue) {
-                const ref = getHostRef(this);
-                if (origSetter) {
-                  const currentValue = ref.$hostElement$[memberName];
-                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                    ref.$instanceValues$.set(memberName, currentValue);
-                  }
-                  origSetter.apply(this, [parsePropertyValue(newValue, cmpMeta.$members$[memberName][0])]);
-                  setValue(this, memberName, ref.$hostElement$[memberName], cmpMeta);
-                  return;
-                }
-                if (!ref) return;
-                const setterSetVal = () => {
-                  const currentValue = ref.$lazyInstance$[memberName];
-                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                    ref.$instanceValues$.set(memberName, currentValue);
-                  }
-                  ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, cmpMeta.$members$[memberName][0]);
-                  setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-                };
-                if (ref.$lazyInstance$) {
-                  setterSetVal();
-                } else {
-                  ref.$onReadyPromise$.then(() => setterSetVal());
-                }
-              }
-            });
-          }
-        }
+        Object.defineProperty(prototype, memberName, {
+          get() {
+            return getValue(this, memberName);
+          },
+          set(newValue) {
+            setValue(this, memberName, newValue, cmpMeta);
+          },
+          configurable: true,
+          enumerable: true
+        });
       } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
@@ -1741,7 +1515,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
+          if (this.hasOwnProperty(propName)) {
             newValue = this[propName];
             delete this[propName];
           } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
@@ -1761,10 +1535,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             }
             return;
           }
-          const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!propDesc.get || !!propDesc.set) {
-            this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          }
+          this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
         });
       };
       Cstr.observedAttributes = Array.from(
@@ -1962,9 +1733,6 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
           childId = `${hostId}.${nodeId}`;
           if (nodeRef.nodeType === 1 /* ElementNode */) {
             nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
-            if (typeof nodeRef["s-sn"] === "string" && !nodeRef.getAttribute("slot")) {
-              nodeRef.setAttribute("s-sn", nodeRef["s-sn"]);
-            }
           } else if (nodeRef.nodeType === 3 /* TextNode */) {
             if (hostId === 0) {
               const textContent = (_a = nodeRef.nodeValue) == null ? void 0 : _a.trim();
@@ -1976,10 +1744,6 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
             const commentBeforeTextNode = doc2.createComment(childId);
             commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
             insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
-          } else if (nodeRef.nodeType === 8 /* CommentNode */) {
-            const commentBeforeTextNode = doc2.createComment(childId);
-            commentBeforeTextNode.nodeValue = `${COMMENT_NODE_ID}.${childId}`;
-            nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
           }
         }
         let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
@@ -2060,9 +1824,6 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
   childElm["s-node-id"] = nodeId;
   if (childElm.nodeType === 1 /* ElementNode */) {
     childElm.setAttribute(HYDRATE_CHILD_ID, childId);
-    if (typeof childElm["s-sn"] === "string" && !childElm.getAttribute("slot")) {
-      childElm.setAttribute("s-sn", childElm["s-sn"]);
-    }
   } else if (childElm.nodeType === 3 /* TextNode */) {
     const parentNode = childElm.parentNode;
     const nodeName = parentNode == null ? void 0 : parentNode.nodeName;
@@ -2580,63 +2341,6 @@ class NVFieldDropDown {
         registerInstance(this, hostRef);
         this.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * State of the dropdown popover.
-         */
-        this.open = false;
-        /**
-         * The autocomplete prop helps users fill out the input field faster by
-         * suggesting entries they’ve used before, like their email or address.
-         * You can turn it on to make forms more convenient or off to ensure users
-         * always type in fresh data.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * The text to display when no items match the filter.
-         */
-        this.emptyresult = 'No results found';
-        /**
-         * The text entered by the user for filtering dropdown items.
-         */
-        this.filterText = '';
-        /**
-         * Enables or disables the filtering feature for the dropdown items.
-         */
-        this.filterable = false;
-        this.isFilterable = this.filterable;
-        this.selectedValues = new Set();
         /**
          * Handle click on the input container.
          * @param {MouseEvent} event - The click event.
@@ -2720,6 +2424,24 @@ class NVFieldDropDown {
                 this.popoverElement.hide();
             }
         };
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.open = false;
+        this.autocomplete = 'off';
+        this.value = undefined;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.readonly = false;
+        this.disabled = false;
+        this.emptyresult = 'No results found';
+        this.filterText = '';
+        this.filterable = false;
+        this.isFilterable = this.filterable;
+        this.selectedValues = new Set();
     }
     handleItemSelected(event) {
         if (this.disabled || this.readonly)
@@ -5183,27 +4905,6 @@ class NvAlert {
         this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
         this.hiddenChangedComplete = createEvent(this, "hiddenChangedComplete", 7);
         this.closeClicked = createEvent(this, "closeClicked", 7);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Specifies the alert type which determines the color and default icon.
-         */
-        this.feedback = 'information';
-        /**
-         * Allows the alert to be dismissed via a close button (x). The alert is not
-         * dismissible unless explicitly enabled.
-         */
-        this.dismissible = false;
-        /**
-         * When true, the alert does not automatically close upon dismissing.
-         * Useful for externally controlled component behavior.
-         */
-        this.preventAutoClose = false;
-        /**
-         * Controls the visibility of the alert. Will animate with fade and collapse.
-         */
-        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -5238,6 +4939,14 @@ class NvAlert {
                     return 'info-circle';
             }
         };
+        this.color = undefined;
+        this.feedback = 'information';
+        this.message = undefined;
+        this.heading = undefined;
+        this.icon = undefined;
+        this.dismissible = false;
+        this.preventAutoClose = false;
+        this.hidden = false;
     }
     componentWillRender() {
         if (this.color) {
@@ -5340,14 +5049,17 @@ var NvAvatarStyle0 = nvAvatarCss;
 class NvAvatar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Define the size of the avatar. You can use t-shirt sizes.
-         */
+        this.xsmall = undefined;
+        this.small = undefined;
+        this.medium = undefined;
+        this.large = undefined;
+        this.xlarge = undefined;
+        this.text = undefined;
+        this.url = undefined;
+        this.alt = undefined;
+        this.src = undefined;
+        this.initials = undefined;
         this.size = 'md';
-        /**
-         * You can apply different colors on the Avatar.
-         * Use a string number between 1 and 10.
-         */
         this.color = '1';
     }
     componentWillRender() {
@@ -5426,42 +5138,6 @@ class NvBadge {
         this.closeClicked = createEvent(this, "closeClicked", 7);
         this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
         this.hiddenChangedComplete = createEvent(this, "hiddenChangedComplete", 7);
-        /****************************************************************************/
-        //#region DEPRECATED
-        /**
-         * Whether the badge is dismissible.
-         * @deprecated use dismissible instead.
-         */
-        this.dismissal = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * The color of the badge. Use a string between 1 to 10
-         */
-        this.color = '1';
-        /**
-         * Main content of the badge.
-         */
-        this.label = null;
-        /**
-         * The lead icon of the badge.
-         */
-        this.leadIcon = null;
-        /**
-         * Whether the badge is dismissible.
-         */
-        this.dismissible = false;
-        /**
-         * Controls the visibility of the badge. Will animate with fade and collapse.
-         */
-        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
-        this._isHidden = this.hidden;
-        /**
-         * When true, the alert does not automatically close upon dismissing.
-         * Useful for externally controlled component behavior.
-         */
-        this.preventAutoClose = false;
         //#endregion LIFECYCLE
         /****************************************************************************/
         //#region METHODS
@@ -5475,6 +5151,16 @@ class NvBadge {
             }
             this.closeClicked.emit(originalEvent);
         };
+        this.dismissal = false;
+        this.icon = undefined;
+        this.iconLocation = undefined;
+        this.color = '1';
+        this.label = null;
+        this.leadIcon = null;
+        this.dismissible = false;
+        this.hidden = false;
+        this._isHidden = this.hidden;
+        this.preventAutoClose = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -5665,45 +5351,6 @@ class NvButton {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the button appears, allowing for
-         * customization of the button's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Adjusts the button's emphasis to make it more or less visually prominent
-         * to users. Use this to draw attention to important actions or reduce focus
-         * on less critical ones
-         */
-        this.emphasis = 'high';
-        /**
-         * Applies styling that visually indicates the button represents a dangerous
-         * action.
-         */
-        this.danger = false;
-        /**
-         * Set this to true to show a spinner on the button, letting users know that
-         * their action is being processed. It helps improve user experience by
-         * indicating ongoing activities.
-         */
-        this.loading = false;
-        /**
-         * Disables the button, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Allows the button to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        /**
-         * Sets the button type to control its function in forms. Use 'submit' to send
-         * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
-         */
-        this.type = 'button';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -5726,6 +5373,13 @@ class NvButton {
                 (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
             }
         };
+        this.size = 'md';
+        this.emphasis = 'high';
+        this.danger = false;
+        this.loading = false;
+        this.disabled = false;
+        this.fluid = false;
+        this.type = 'button';
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -5790,6 +5444,7 @@ var NvColStyle0 = nvColCss;
 class NvCol {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.size = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -8791,42 +8446,16 @@ var NvDatagridStyle0 = nvDatagridCss;
 class NvDatagrid {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region STATES
         this.table = null;
-        this.parsedColumns = []; // Parsed array
-        this.parsedData = []; // Parsed array
+        this.parsedColumns = [];
+        this.parsedData = [];
         this.hasSlotHead = false;
         this.hasSlotBody = false;
-        //#endregion STATES
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * The columns to display in the data grid.
-         * @example
-         * [
-         *  {"header":"Name","accessor":"name"},
-         *  {"header":"Age","accessor":"age"},
-         *  {"header":"Email","accessor":"email"}
-         * ]
-         * @default []
-         */
         this.columns = [];
-        /**
-         * The data to display in the data grid.
-         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-         * @default []
-         */
+        this.columnsJson = undefined;
         this.data = [];
-        /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
-         */
+        this.dataJson = undefined;
         this.noDataMessage = 'No data available';
-        /**
-         * The message to display when there are no columns or data available.
-         * @default 'No data or columns available to display.'
-         */
         this.noColumnsNoDataMessage = 'No data or columns available to display.';
     }
     //#endregion PROPERTIES
@@ -9130,6 +8759,8 @@ var NvDatagridcolumnStyle0 = nvDatagridcolumnCss;
 class NvDatagridcolumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.header = undefined;
+        this.accessor = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -9160,6 +8791,7 @@ var NvDatagriddatacellStyle0 = nvDatagriddatacellCss;
 class NvDatagriddatacell {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.accessor = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -9246,211 +8878,1303 @@ class NvFieldcheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChanged = createEvent(this, "checkedChanged", 7);
-        /**
-         * When true, the label will be placed before the checkbox.
-         * @deprecated Use `labelPlacement = end` instead.
-         * */
+        this.message = undefined;
+        this.validation = undefined;
         this.labelBefore = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the radio button’s input element and the for attribute of
-         * the associated label. If no ID is provided, a random one will be
-         * automatically generated to ensure unique identification, facilitating
-         * proper label association and accessibility.
-         */
         this.inputId = v4();
-        /**
-         * Hides the label visually while still keeping it available for screen
-         * readers.
-         */
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
         this.hideLabel = false;
-        /**
-         * Signals that there is an error associated with the checkbox, which can
-         * trigger visual cues.
-         */
+        this.description = undefined;
         this.error = false;
-        /**
-         * Indicates whether the checkbox is checked or not.
-         */
+        this.errorDescription = undefined;
         this.checked = false;
-        /**
-         * Indicates whether the checkbox is in an indeterminate state, typically used
-         * for hierarchical checkboxes.
-         */
         this.indeterminate = false;
-        /**
-         * Disables the checkbox, preventing user interaction.
-         */
         this.disabled = false;
-        /**
-         * Sets the checkbox to read-only, preventing user changes but still allowing
-         * focus and selection of text.
-         */
         this.readonly = false;
-        /**
-         * Marks the checkbox as required, indicating that it must be checked for
-         * form submission.
-         */
         this.required = false;
     }
     componentWillRender() {
         if (this.message) {
             this.description = this.message;
         }
-        if (this.labelBefore) {
-            this.labelPlacement = 'before';
+        if (this.labelBefore) {
+            this.labelPlacement = 'before';
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.indeterminate) {
+                this.indeterminate = false;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, hAsync("input", { key: 'bffbfc1ac879fb70e1c7b436c3a9845150b78bca', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+                if (el) {
+                    el.indeterminate = this.indeterminate;
+                }
+            } }), hAsync("span", { key: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, hAsync("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, hAsync("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, hAsync("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', name: "error-description" }, this.errorDescription))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+    static get style() { return NvFieldcheckboxStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-fieldcheckbox",
+        "$members$": {
+            "message": [1],
+            "validation": [1],
+            "labelBefore": [4, "label-before"],
+            "inputId": [513, "input-id"],
+            "name": [513],
+            "value": [513],
+            "label": [513],
+            "labelPlacement": [1537, "label-placement"],
+            "hideLabel": [516, "hide-label"],
+            "description": [1537],
+            "error": [516],
+            "errorDescription": [1537, "error-description"],
+            "checked": [1540],
+            "indeterminate": [1540],
+            "disabled": [516],
+            "readonly": [516],
+            "required": [516]
+        },
+        "$listeners$": [[0, "change", "handleChange"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["value", "value"], ["label", "label"], ["labelPlacement", "label-placement"], ["hideLabel", "hide-label"], ["description", "description"], ["error", "error"], ["errorDescription", "error-description"], ["checked", "checked"], ["indeterminate", "indeterminate"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"]]
+    }; }
+}
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;max-width:300px;width:100%;padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem.selected{background-color:var(--components-menu-contextual-item-background-selected);color:var(--components-menu-contextual-item-content-selected)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{padding-left:10px;color:var(--components-menu-contextual-item-icon-selected);align-self:center}:root{--components-menu-contextual-item-background-selected:#f5f6f7;--components-menu-contextual-item-content-selected:#171f22;--components-menu-contextual-item-icon-selected:#007f00;--components-menu-contextual-item-background-hover:#f5f6f7;--components-menu-contextual-item-content-hover:#171f22}";
+var NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+/**
+ * @slot default - The content to be displayed inside the dropdown item.
+ */
+class NvFielddropdownitem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemSelected = createEvent(this, "itemSelected", 7);
+        this.handleClick = () => {
+            if (!this.disabled) {
+                let itemValue = this.value || '';
+                if (!itemValue) {
+                    itemValue =
+                        Array.from(this.el.childNodes)
+                            .map(node => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+                            .filter(text => text && text.length > 0)
+                            .join(' ') || '';
+                }
+                this.selected = !this.selected; // Toggle the selected state
+                this.itemSelected.emit({
+                    label: this.label,
+                    value: itemValue,
+                    selected: this.selected,
+                    disabled: this.disabled,
+                });
+            }
+        };
+        this.disabled = false;
+        this.selected = false;
+        this.value = undefined;
+        this.label = undefined;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Utility function to check if a string is null, empty, or contains only whitespace.
+     * @param {string | null | undefined} input - The string to check.
+     * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.
+     */
+    isNullOrEmptyOrWhitespace(input) {
+        return !input || input.trim().length === 0;
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
+        return (hAsync(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (hAsync("slot", null)) : (hAsync("div", { class: "flex gap-2" }, hAsync("span", { "data-scope": "text" }, this.label), this.selected && (hAsync("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvFielddropdownitemStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-fielddropdownitem",
+        "$members$": {
+            "disabled": [516],
+            "selected": [1540],
+            "value": [513],
+            "label": [513]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["disabled", "disabled"], ["selected", "selected"], ["value", "value"], ["label", "label"]]
+    }; }
+}
+
+const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck nv-fieldcheckbox input[type=checkbox]{all:unset;display:inline-block;margin:0;padding:0;width:20px;height:20px}";
+var NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
+
+class NvFielddropdownitemcheck {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemChecked = createEvent(this, "itemChecked", 7);
+        this.handleCheckboxToggle = () => {
+            if (this.disabled)
+                return; // Ignore interactions si désactivé
+            this.checked = !this.checked;
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+            console.log('itemChecked emitted:', {
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+        this.checked = false;
+        this.value = undefined;
+        this.label = undefined;
+        this.description = undefined;
+        this.group = undefined;
+        this.disabled = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: '571a1f2a81e3ba72969f1d6e84e27bd490b99044', onClick: this.handleCheckboxToggle }, hAsync("div", { key: '08590c63ca67b7414c06db1d6c05fd9c2ad41c16' }, hAsync("nv-fieldcheckbox", { key: '68108d6fb714b9fa9bcdc2c9be1ed8e1e2d3b174', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option" }))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvFielddropdownitemcheckStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "nv-fielddropdownitemcheck",
+        "$members$": {
+            "checked": [1540],
+            "value": [513],
+            "label": [513],
+            "description": [513],
+            "group": [513],
+            "disabled": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["checked", "checked"], ["value", "value"], ["label", "label"], ["description", "description"], ["group", "group"], ["disabled", "disabled"]]
+    }; }
+}
+
+const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldmultiselect .input-container-multiselect.focus-within,nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldmultiselect hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container-multiselect.focus-within,.input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}.no-results-message{text-align:center;padding:10px;color:var(--nv-field-error-text, #999)}";
+var NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
+
+/**
+ * @slot content - The content of the list.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+class NvFieldmultiselect {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.multiselectChange = createEvent(this, "multiselectChange", 7);
+        /**
+         * Flag to prevent concurrent reordering operations.
+         * Private property preferred over @State as it:
+         * - Manages internal component logic without affecting UI
+         * - Avoids unnecessary re-renders
+         * - Provides better performance for rapid state changes
+         * - Only needs class-level scope
+         */
+        this.isReordering = false;
+        /**
+         * Handle badge close for options mode.
+         */
+        this.handleBadgeCloseOptions = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder options without the divider since there are no selected elements
+            this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
+            // Reorder options without the divider since there are no selected elements
+            this.reorderOptionsContent();
+        };
+        /**
+         * Handle badge close for slots mode.
+         */
+        this.handleBadgeCloseSlots = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder slot content
+            this.reorderSlotContent();
+        };
+        /**
+         * Handle popover close
+         */
+        this.handlePopoverClose = () => {
+            this.open = false;
+            this.filterText = '';
+            if (this.modeState === 'options') {
+                this.reorderOptionsContent();
+            }
+            else {
+                this.reorderSlotContent();
+            }
+            // Reset filter if needed
+            if (this.filterable) {
+                this.resetFilter();
+            }
+        };
+        /**
+         * Handle keyboard events for options mode.
+         * @param {KeyboardEvent} event - The keyboard event.
+         */
+        this.handleKeyDownOptions = (event) => {
+            if (!this.open) {
+                if (event.key === 'ArrowDown') {
+                    this.open = true;
+                    this.popoverElement.show();
+                    if (!this.filterable) {
+                        this.focusFirstItem();
+                    }
+                    event.preventDefault();
+                    return;
+                }
+                return;
+            }
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            if (items.length === 0) {
+                console.warn('No dropdown items found to navigate');
+                return;
+            }
+            let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                currentIndex = (currentIndex + 1) % items.length;
+                this.updateHighlightedItem(items, currentIndex);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                currentIndex = (currentIndex - 1 + items.length) % items.length;
+                this.updateHighlightedItem(items, currentIndex);
+            }
+            else if (event.key === 'Enter' && currentIndex >= 0) {
+                event.preventDefault();
+                items[currentIndex].click();
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.handlePopoverClose();
+                if (this.inputElement) {
+                    this.inputElement.blur();
+                }
+            }
+        };
+        /**
+         * Handle input blur for options mode.
+         */
+        this.handleInputBlurOptions = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    this.handlePopoverClose();
+                }
+            }, 150);
+        };
+        /**
+         * Handle click on the input container for options mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickOptions = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle click on the input container for slots mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickSlots = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle input change for options mode.
+         * @param {Event} event - The input event.
+         */
+        this.handleInputOptions = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterOptionsItems();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input change for slots mode
+         * @param {Event} event - The input event.
+         */
+        this.handleInputSlots = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly)
+                return;
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterSlotsItems();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input focus for options mode.
+         */
+        this.handleInputFocusOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input focus for slots mode.
+         */
+        this.handleInputFocusSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input blur for slots mode.
+         */
+        this.handleInputBlurSlots = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    this.handlePopoverClose();
+                }
+            }, 150);
+        };
+        /**
+         * Toggle the multiselect popover for options mode.
+         */
+        this.togglePopoverOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.open) {
+                this.handlePopoverClose();
+            }
+            else {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+        };
+        /**
+         * Toggle the multiselect popover for slots mode.
+         */
+        this.togglePopoverSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = !this.open;
+            if (this.open) {
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+            else {
+                this.popoverElement.hide();
+            }
+        };
+        /**
+         * Handle keyboard events for slots mode.
+         * @param {KeyboardEvent} event - The keyboard event.
+         */
+        this.handleKeyDownSlots = (event) => {
+            if (!this.open) {
+                if (event.key === 'ArrowDown') {
+                    this.open = true;
+                    this.popoverElement.show();
+                    if (!this.filterable) {
+                        this.focusFirstItem();
+                    }
+                    event.preventDefault();
+                    return;
+                }
+                return;
+            }
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            if (items.length === 0) {
+                console.warn('No dropdown items found to navigate');
+                return;
+            }
+            let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                currentIndex = (currentIndex + 1) % items.length;
+                this.updateHighlightedItem(items, currentIndex);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                currentIndex = (currentIndex - 1 + items.length) % items.length;
+                this.updateHighlightedItem(items, currentIndex);
+            }
+            else if (event.key === 'Enter' && currentIndex >= 0) {
+                event.preventDefault();
+                items[currentIndex].click();
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.handlePopoverClose();
+                if (this.inputElement) {
+                    this.inputElement.blur();
+                }
+            }
+        };
+        this.inputId = v4();
+        this.name = undefined;
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.maxHeight = '200px';
+        this.badgeLabel = '';
+        this.emptyresult = 'No results found';
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.readonly = false;
+        this.disabled = false;
+        this.autocomplete = 'off';
+        this.filterable = false;
+        this.value = undefined;
+        this.open = false;
+        this.mode = undefined;
+        this.options = undefined;
+        this.parsedOptions = [];
+        this.selectedValues = [];
+        this.sortedOptions = [];
+        this.filterText = '';
+        this.isFilterable = this.filterable;
+        this.debounceDelay = 300;
+        this.modeState = 'options';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region EVENTS
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        this.modeState = this.mode;
+        this.handleOptionsChange(this.options);
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // If we don't have parsed options, initialize with slot elements
+        if (!this.parsedOptions || this.parsedOptions.length === 0) {
+            // Wait for the slot to be available
+            requestAnimationFrame(() => {
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                // Initialize selectedValues with checked elements
+                this.selectedValues = items
+                    .filter(item => item.hasAttribute('checked'))
+                    .map(item => item.getAttribute('value') || '');
+            });
+        }
+        // Initialize the sorted options array with the parsed options for initial rendering
+        this.sortedOptions = [...this.parsedOptions];
+        // Handle pre-selection during component initialization
+        this.setInitialSelection();
+        // Apply filtering if the multiselect is filterable and there is a value
+        if (this.filterable && this.value) {
+            this.filterText = this.value.toLowerCase();
+            this.filterItems();
+        }
+        else {
+            // Reset visibility state of all dropdown items
+            this.resetFilter();
+        }
+        const slot = this.el.querySelector('slot[name="content"]');
+        if (slot) {
+            const observer = new MutationObserver(() => {
+                this.reorderSlotContent();
+            });
+            observer.observe(slot, {
+                childList: true,
+                subtree: true,
+            });
+            this.reorderSlotContent();
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Emitted when the input loses focus.
+     * @param {CustomEvent<boolean>} event - The event object containing the focus state.
+     */
+    handleOpenChanged(event) {
+        // Update the open state of popover
+        this.open = event.detail;
+        if (this.open) {
+            if (this.filterText) {
+                this.filterItems();
+            }
+        }
+        else {
+            this.reorderSlotContent();
+        }
+    }
+    /**
+     * Listen for the `itemChecked` event emitted by child items.
+     * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
+     */
+    handleItemChecked(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const { value, checked } = event.detail;
+        if (value !== undefined && value !== null) {
+            const newSelectedValues = [...this.selectedValues];
+            if (checked && !newSelectedValues.includes(value)) {
+                newSelectedValues.push(value);
+            }
+            else if (!checked) {
+                const index = newSelectedValues.indexOf(value);
+                if (index > -1) {
+                    newSelectedValues.splice(index, 1);
+                }
+            }
+            this.selectedValues = newSelectedValues;
+            this.multiselectChange.emit(this.selectedValues);
+        }
+    }
+    /**
+     * Emitted when the options change.
+     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
+     */
+    handleOptionsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                const parsedOpts = JSON.parse(newValue);
+                // Process options: initialize selections, reorder items, and add dividers where needed
+                this.selectedValues = parsedOpts
+                    .filter(option => option.checked)
+                    .map(option => option.value);
+                const checkedItems = parsedOpts.filter(option => this.selectedValues.includes(option.value));
+                const uncheckedItems = parsedOpts.filter(option => !this.selectedValues.includes(option.value));
+                this.parsedOptions = [
+                    ...checkedItems,
+                    ...(checkedItems.length > 0 && uncheckedItems.length > 0
+                        ? [{ isDivider: true, label: '', value: '' }]
+                        : []),
+                    ...uncheckedItems,
+                ];
+            }
+            catch (error) {
+                console.error('Error parsing options:', error);
+                this.parsedOptions = [];
+            }
+        }
+        else if (Array.isArray(newValue)) {
+            this.selectedValues = newValue
+                .filter(option => option.checked)
+                .map(option => option.value);
+            this.parsedOptions = [...newValue];
+        }
+        else {
+            this.parsedOptions = [];
+        }
+        this.reorderSlotContent();
+    }
+    /**
+     * Emitted when the value changes.
+     */
+    watchValueHandler() {
+        // Handle value change and update the corresponding multiselect item if it exists
+        this.setInitialSelection();
+    }
+    /**
+     * Emitted when the filterable property changes.
+     * @param {boolean} newValue - The new value of the filterable property.
+     */
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    // Add a watcher for the slot content
+    handleSlotChange(event) {
+        const slot = event.target;
+        if (slot.name === 'content') {
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            // Update selectedValues when slot content changes
+            this.selectedValues = items
+                .filter(item => item.hasAttribute('checked'))
+                .map(item => item.getAttribute('value') || '');
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * Set the initial selection based on the current value and update the inputElement value.
+     */
+    setInitialSelection() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        const selectedItem = items.find(item => {
+            var _a;
+            return item.getAttribute('label') === this.value ||
+                item.getAttribute('value') === this.value ||
+                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
+        });
+        // Remove 'selected' from all items first to reset the state
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        if (selectedItem) {
+            // Add the `selected` attribute and `selected` class for visual styling
+            selectedItem.setAttribute('selected', 'true');
+            selectedItem.classList.add('selected');
+            // Update the value and inputElement value to reflect the pre-selected item
+            this.value =
+                selectedItem.getAttribute('label') ||
+                    selectedItem.getAttribute('value') ||
+                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                    '';
+            if (this.inputElement) {
+                this.inputElement.value = this.value;
+            }
+        }
+    }
+    /**
+     * Reset the filter and make all items visible.
+     */
+    async resetFilter() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Reset visibility state of all dropdown items
+        items.forEach(item => {
+            item.style.display = '';
+        });
+        // Clean up filter-related UI elements
+        const ul = this.el.querySelector('ul');
+        if (ul) {
+            const emptyMessage = ul.querySelector('[data-empty]');
+            const divider = ul.querySelector('hr.dropdown-divider');
+            if (emptyMessage)
+                emptyMessage.remove();
+            if (divider)
+                divider.remove();
+        }
+    }
+    /**
+     * Returns the list of selected values.
+     * @returns {string[]} The selected values.
+     */
+    async getSelectedValues() {
+        return this.selectedValues;
+    }
+    /**
+     * Reorder the content of the slot.
+     */
+    reorderSlotContent() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // First remove all existing dividers
+        ul.querySelectorAll('hr.dropdown-divider').forEach(divider => divider.remove());
+        // Get all visible items (not hidden)
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
+        // Check if we have an empty message
+        const hasEmptyMessage = ul.querySelector('[data-empty]');
+        if (hasEmptyMessage) {
+            // If we have an empty message, don't reorder
+            return;
+        }
+        // Separate selected and unselected items
+        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Empty the list
+        while (ul.firstChild) {
+            ul.removeChild(ul.firstChild);
+        }
+        // Reorder items
+        selectedItems.forEach(item => ul.appendChild(item));
+        // Add divider only if we have both selected AND unselected items
+        // AND if visible items are different
+        if (selectedItems.length > 0 &&
+            unselectedItems.length > 0 &&
+            items.length > 1) {
+            const divider = document.createElement('hr');
+            divider.className = 'dropdown-divider';
+            ul.appendChild(divider);
+        }
+        // Add unselected items
+        unselectedItems.forEach(item => ul.appendChild(item));
+    }
+    /**
+     * Reorder the content for options mode with async handling
+     */
+    async reorderOptionsContent() {
+        if (this.isReordering ||
+            !this.parsedOptions ||
+            this.parsedOptions.length === 0 ||
+            this.modeState !== 'options') {
+            return;
+        }
+        try {
+            this.isReordering = true;
+            // Update parsedOptions first
+            const optionsWithoutDivider = this.parsedOptions.filter(opt => !opt.isDivider);
+            const selectedOptions = optionsWithoutDivider.filter(opt => this.selectedValues.includes(opt.value));
+            const unselectedOptions = optionsWithoutDivider.filter(opt => !this.selectedValues.includes(opt.value));
+            // Update parsedOptions with new divider
+            this.parsedOptions = [
+                ...selectedOptions,
+                ...(selectedOptions.length > 0 && unselectedOptions.length > 0
+                    ? [{ isDivider: true, label: '', value: '' }]
+                    : []),
+                ...unselectedOptions,
+            ];
+            // Then update DOM
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            const ul = this.el.querySelector('ul');
+            if (!ul)
+                return;
+            // Get all items
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            // Remove all existing dividers
+            ul.querySelectorAll('hr.dropdown-divider').forEach(divider => divider.remove());
+            // Separate selected and unselected items
+            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            // Empty the list
+            while (ul.firstChild) {
+                ul.removeChild(ul.firstChild);
+            }
+            // Reorder items
+            selectedItems.forEach(item => ul.appendChild(item));
+            // Add divider only if there are both selected AND unselected items
+            if (selectedItems.length > 0 && unselectedItems.length > 0) {
+                const divider = document.createElement('hr');
+                divider.className = 'dropdown-divider';
+                ul.appendChild(divider);
+            }
+            // Add unselected items
+            unselectedItems.forEach(item => ul.appendChild(item));
+        }
+        finally {
+            this.isReordering = false;
+        }
+    }
+    /**
+     * Filter multiselect items based on the text entered by the user.
+     */
+    filterItems() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        if (!this.filterText.trim()) {
+            if (this.parsedOptions && this.parsedOptions.length > 0) {
+                // Reset options display
+                const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            else {
+                // Reset slot items display
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            this.reorderSlotContent();
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        if (this.parsedOptions && this.parsedOptions.length > 0) {
+            // Filter options mode
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+                if (option && !option.isDivider) {
+                    const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
+                        this.normalizeText(option.value).includes(normalizedFilter);
+                    item.style.display = matchesFilter ? '' : 'none';
+                    if (matchesFilter)
+                        hasVisibleItems = true;
+                }
+            });
+            // Hide dividers if needed
+            const dividers = ul.querySelectorAll('hr.dropdown-divider');
+            dividers.forEach(divider => {
+                divider.style.display = hasVisibleItems ? '' : 'none';
+            });
+        }
+        else {
+            // Filter slot items mode
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const label = item.getAttribute('label') || '';
+                const value = item.getAttribute('value') || '';
+                const textContent = item.textContent || '';
+                const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                    this.normalizeText(value).includes(normalizedFilter) ||
+                    this.normalizeText(textContent).includes(normalizedFilter);
+                item.style.display = matchesFilter ? '' : 'none';
+                if (matchesFilter)
+                    hasVisibleItems = true;
+            });
+        }
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+        this.reorderSlotContent();
+    }
+    /**
+     * Filter multiselect items in options mode.
+     */
+    filterOptionsItems() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        if (!this.filterText.trim()) {
+            // Reset options display
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.style.display = '';
+            });
+            this.reorderOptionsContent();
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        // Filter options mode
+        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+        items.forEach(item => {
+            const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+            if (option && !option.isDivider) {
+                const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
+                    this.normalizeText(option.value).includes(normalizedFilter);
+                item.style.display = matchesFilter ? '' : 'none';
+                if (matchesFilter)
+                    hasVisibleItems = true;
+            }
+        });
+        // Get visible items after filtering
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Hide divider if all visible items are either all selected or all unselected
+        const divider = ul.querySelector('hr.dropdown-divider');
+        if (divider) {
+            const shouldShowDivider = visibleSelectedItems.length > 0 &&
+                visibleSelectedItems.length < visibleItems.length;
+            divider.style.display = shouldShowDivider ? '' : 'none';
+        }
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+    }
+    /**
+     * Filter multiselect items in slots mode
+     */
+    filterSlotsItems() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        // If filter text is empty, reset all items visibility
+        if (!this.filterText.trim()) {
+            this.resetFilter();
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        // Get all items and preserve them in the DOM
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Instead of removing/reordering, just hide/show items
+        items.forEach(item => {
+            var _a;
+            const label = item.getAttribute('label') || '';
+            const value = item.getAttribute('value') || '';
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                this.normalizeText(value).includes(normalizedFilter) ||
+                this.normalizeText(textContent).includes(normalizedFilter);
+            item.style.display = matchesFilter ? '' : 'none';
+            if (matchesFilter)
+                hasVisibleItems = true;
+        });
+        // Get visible items after filtering
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Hide divider if all visible items are either all selected or all unselected
+        const divider = ul.querySelector('hr.dropdown-divider');
+        if (divider) {
+            const shouldShowDivider = visibleSelectedItems.length > 0 &&
+                visibleSelectedItems.length < visibleItems.length;
+            divider.style.display = shouldShowDivider ? '' : 'none';
+        }
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+    }
+    /**
+     * Normalizes text by removing accents and converting to lowercase
+     * @param {string} text - The text to normalize
+     * @returns {string} The normalized text
+     *
+     * @example
+     * normalizeText("Café Latte") => "cafe latte"
+     *
+     * @description
+     * This function performs text normalization in three steps:
+     * 1. Decomposes characters into their base form and combining characters (NFD)
+     * 2. Removes all diacritical marks (accents, umlauts, etc.)
+     * 3. Converts to lowercase and trims whitespace
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()
+     * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms
+     */
+    normalizeText(text) {
+        return text
+            .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)
+            .replace(/[\u0300-\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)
+            .toLowerCase() // Convert to lowercase
+            .trim(); // Remove leading and trailing whitespace
+    }
+    /**
+     * Handle click outside the component.
+     * @param {MouseEvent} event - The click event.
+     */
+    handleClickOutside(event) {
+        if (this.el.contains(event.target) ||
+            (this.inputElement && this.inputElement.contains(event.target))) {
+            return;
+        }
+        // Force le même comportement que la fermeture par iconbutton
+        if (this.modeState === 'options') {
+            this.handlePopoverClose();
+        }
+        else {
+            this.popoverElement.hide();
+        }
+    }
+    /**
+     * Handle keyboard events & arrow key navigation.
+     * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
+     * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                this.popoverElement.show();
+                // Focus on the first item if the list is not filterable
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        if (items.length === 0) {
+            console.warn('No dropdown items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex = (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
         }
-        if (this.validation) {
-            this.errorDescription = this.validation;
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex = (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            items[currentIndex].click();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            this.popoverElement.hide();
+            if (this.inputElement) {
+                this.inputElement.blur();
+            }
         }
     }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
     /**
-     * Watches for changes to the checked state and emits the new value.
-     * @param {boolean} checked - The new value of the checked state.
+     * Updates the highlighted item in the dropdown list.
+     *
+     * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.
+     * @param {number} index - The index of the item to highlight.
      */
-    onCheckedChanged(checked) {
-        this.checkedChanged.emit(checked);
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.setAttribute('tabindex', '0');
+                item.focus();
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
     }
     /**
-     * Listens for the change event on the checkbox input element and updates the
-     * checked state.
-     * @param {Event} event - The change event.
+     * Focus on the first item in the dropdown list.
      */
-    handleChange(event) {
-        const target = event.target;
-        if (target.type === 'checkbox' && target.id === this.inputId) {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (this.indeterminate) {
-                this.indeterminate = false;
-            }
-            this.checked = target.checked;
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck');
+        if (firstItem) {
+            firstItem.setAttribute('tabindex', '0');
+            firstItem.classList.add('highlighted');
+            firstItem.focus();
+        }
+        else {
+            console.warn('No first item found to focus');
         }
     }
-    //#endregion WATCHERS
+    /**
+     * Watch for changes in the mode prop and update modeState accordingly
+     * @param {string} newValue - The new mode value
+     */
+    handleModeChange(newValue) {
+        this.modeState = newValue;
+    }
+    //#endregion METHODS
     /****************************************************************************/
     //#region RENDER
+    /**
+     * Renders the component in options mode
+     * @returns {any} The JSX for options mode
+     */
+    renderOptionsMode() {
+        return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDownOptions })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDownOptions, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "presentation" }, this.parsedOptions.map(option => option.isDivider ? (hAsync("hr", { class: "dropdown-divider" })) : (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
+    }
+    /**
+     * Renders the component in slots mode
+     * @returns {any} The JSX for slots mode
+     */
+    renderSlotsMode() {
+        return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }, hAsync("p", null, "No leading input")), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDownSlots })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDownSlots, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+    }
+    /**
+     * Renders description and error description sections
+     * @returns {any} The JSX for descriptions
+     */
+    renderDescriptions() {
+        return [
+            (this.description || this.el.querySelector('[slot="description"]')) && (hAsync("div", { class: "description" }, hAsync("slot", { name: "description" }, this.description))),
+            (this.errorDescription ||
+                this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { hidden: !this.error, class: "error-description" }, hAsync("slot", { name: "error-description" }, this.errorDescription))),
+        ];
+    }
+    /**
+     * Main render method that decides which mode to render
+     * @returns {any} The JSX for the component
+     */
     render() {
-        return (hAsync(Host, { key: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, hAsync("input", { key: 'bffbfc1ac879fb70e1c7b436c3a9845150b78bca', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
-                if (el) {
-                    el.indeterminate = this.indeterminate;
-                }
-            } }), hAsync("span", { key: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, hAsync("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, hAsync("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, hAsync("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', name: "error-description" }, this.errorDescription))))));
+        return this.modeState === 'options'
+            ? this.renderOptionsMode()
+            : this.renderSlotsMode();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "checked": ["onCheckedChanged"]
+        "options": ["handleOptionsChange"],
+        "value": ["watchValueHandler"],
+        "filterable": ["watchFilterableHandler"],
+        "mode": ["handleModeChange"]
     }; }
-    static get style() { return NvFieldcheckboxStyle0; }
+    static get style() { return NvFieldmultiselectStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
-        "$tagName$": "nv-fieldcheckbox",
+        "$tagName$": "nv-fieldmultiselect",
         "$members$": {
-            "message": [1],
-            "validation": [1],
-            "labelBefore": [4, "label-before"],
             "inputId": [513, "input-id"],
             "name": [513],
-            "value": [513],
             "label": [513],
-            "labelPlacement": [1537, "label-placement"],
-            "hideLabel": [516, "hide-label"],
-            "description": [1537],
+            "description": [513],
+            "placeholder": [513],
+            "maxHeight": [513, "max-height"],
+            "badgeLabel": [513, "badge-label"],
+            "emptyresult": [513],
+            "required": [516],
             "error": [516],
-            "errorDescription": [1537, "error-description"],
-            "checked": [1540],
-            "indeterminate": [1540],
-            "disabled": [516],
+            "errorDescription": [513, "error-description"],
             "readonly": [516],
-            "required": [516]
-        },
-        "$listeners$": [[0, "change", "handleChange"]],
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["value", "value"], ["label", "label"], ["labelPlacement", "label-placement"], ["hideLabel", "hide-label"], ["description", "description"], ["error", "error"], ["errorDescription", "error-description"], ["checked", "checked"], ["indeterminate", "indeterminate"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"]]
-    }; }
-}
-
-const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;max-width:300px;width:100%;padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem.selected{background-color:var(--components-menu-contextual-item-background-selected);color:var(--components-menu-contextual-item-content-selected)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{padding-left:10px;color:var(--components-menu-contextual-item-icon-selected);align-self:center}:root{--components-menu-contextual-item-background-selected:#f5f6f7;--components-menu-contextual-item-content-selected:#171f22;--components-menu-contextual-item-icon-selected:#007f00;--components-menu-contextual-item-background-hover:#f5f6f7;--components-menu-contextual-item-content-hover:#171f22}";
-var NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
-
-/**
- * @slot default - The content to be displayed inside the dropdown item.
- */
-class NvFielddropdownitem {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.itemSelected = createEvent(this, "itemSelected", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Disables the item, preventing any user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Indicates if the item is selected.
-         */
-        this.selected = false;
-        this.handleClick = () => {
-            if (!this.disabled) {
-                let itemValue = this.value || '';
-                if (!itemValue) {
-                    itemValue =
-                        Array.from(this.el.childNodes)
-                            .map(node => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
-                            .filter(text => text && text.length > 0)
-                            .join(' ') || '';
-                }
-                this.selected = !this.selected; // Toggle the selected state
-                this.itemSelected.emit({
-                    label: this.label,
-                    value: itemValue,
-                    selected: this.selected,
-                    disabled: this.disabled,
-                });
-            }
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Utility function to check if a string is null, empty, or contains only whitespace.
-     * @param {string | null | undefined} input - The string to check.
-     * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.
-     */
-    isNullOrEmptyOrWhitespace(input) {
-        return !input || input.trim().length === 0;
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
-        return (hAsync(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (hAsync("slot", null)) : (hAsync("div", { class: "flex gap-2" }, hAsync("span", { "data-scope": "text" }, this.label), this.selected && (hAsync("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
-    }
-    get el() { return getElement(this); }
-    static get style() { return NvFielddropdownitemStyle0; }
-    static get cmpMeta() { return {
-        "$flags$": 4,
-        "$tagName$": "nv-fielddropdownitem",
-        "$members$": {
             "disabled": [516],
-            "selected": [1540],
-            "value": [513],
-            "label": [513]
+            "autocomplete": [513],
+            "filterable": [1540],
+            "value": [1537],
+            "open": [1540],
+            "mode": [513],
+            "options": [513],
+            "debounceDelay": [514, "debounce-delay"],
+            "parsedOptions": [32],
+            "selectedValues": [32],
+            "sortedOptions": [32],
+            "filterText": [32],
+            "isFilterable": [32],
+            "modeState": [32],
+            "getFilterText": [64],
+            "resetFilter": [64],
+            "getSelectedValues": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["selected", "selected"], ["value", "value"], ["label", "label"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["maxHeight", "max-height"], ["badgeLabel", "badge-label"], ["emptyresult", "emptyresult"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["autocomplete", "autocomplete"], ["filterable", "filterable"], ["value", "value"], ["open", "open"], ["mode", "mode"], ["options", "options"], ["debounceDelay", "debounce-delay"]]
     }; }
 }
 
@@ -9469,49 +10193,6 @@ class NvFieldnumber {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Define the increment value for the input field. It determines how much the
-         * value will increase or decrease when the user clicks the stepper buttons.
-         */
-        this.step = 1;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -9536,6 +10217,23 @@ class NvFieldnumber {
         this.isMaxValueReached = () => {
             return this.max !== undefined && this.value >= this.max;
         };
+        this.message = undefined;
+        this.validation = undefined;
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.step = 1;
+        this.value = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -9559,9 +10257,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5d63f2dca1678d7ea971b52a40f55481eae421d6' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '145560063839b6fe34e3c8431003d5f5fb5eb65d', htmlFor: this.inputId }, hAsync("slot", { key: 'd36ca2394cf3ce62c7d5f6177480a41979d7d1cb', name: "label" }, this.label))), hAsync("div", { key: 'c53243b5f2019033a24b22120e1bd5209c415075', class: "input-wrapper" }, hAsync("slot", { key: 'e32e0fdd6b0e27cbb719b3d962fb6417eb2f3e1b', name: "before-input" }), hAsync("div", { key: 'b9de75924bde8a2cd1108e34173d0f867f0bdcea', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '4d0bbdce8201370f1f62d06eabb5a2bd3b248c1f', name: "leading-input" }), hAsync("input", { key: '0c85ade03f9ca7e6c3aca788b3a107d0807d7b70', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '5da0668775a6841bf01c662009ec7bf9048b1622', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'be8e6e9e3c5428885aed216f49f1510b0fb29201', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '84ddbc5eb7e35ea216e0c9650dcbcb865e3bd726', class: "stepper-spacer" }), hAsync("div", { key: '9ba5a8087ef4fa46614d1c7492c80781af5c4a40', class: "stepper" }, hAsync("nv-icon", { key: 'a3b5adffd9b7a5a266711f02ed2862e84f2a5839', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '1a37933cfeab32a057807173a3b411e23a3c93b0', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '99c9105e0f46dfb5e56fa3949dd99264f61e7be5', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3b9df6f1e03117123b376c637840e4219ee4e45d', class: "description" }, hAsync("slot", { key: 'deb7681e9d6fe583e418f6d25248b667c4b2fcf0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6848cf6e73924df0552ed71078d19cc1423b6d72', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cf5526311207e2fca942ba84a5480cae6917060d', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'b8d099c0f8642f6b0c1bae142a4b29d93349df7b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '687f3458a59403ebf563cef230cf99dc6e086bb9', htmlFor: this.inputId }, hAsync("slot", { key: 'ca476c5b6af39760f69d7da7bf3c4c90a7e89e6f', name: "label" }, this.label))), hAsync("div", { key: '48ef137de9492e2403089c799f4fcea0b01d0f8f', class: "input-wrapper" }, hAsync("slot", { key: '46342a3cc4b245bb2786c8fabc82f3090c9dbb52', name: "before-input" }), hAsync("div", { key: 'cb57b1193cb5344d76a346fcd1942057a8e75752', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'fe2de873b80247a33bb33d902fc49b908702028c', name: "leading-input" }), hAsync("input", { key: '3cd24c2baab2a10c53fadb0e409c73e21a64a90c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: 'e82ce9ca32dd5876f401ad712c52a8203d5ee58d', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '839966e065defcae2268fb08fbfc1a36366b7e32', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '7b6dd67015549b173887a545be32b4c3f05a5b34', class: "stepper-spacer" }), hAsync("div", { key: 'd4df0c16fb8466ba97327f5537a502cec54b0c74', class: "stepper" }, hAsync("nv-icon", { key: '9f4b2894a80c7161cfde76c8267c5a32081a4af4', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '4a6e099ab3778386feeb22d72c67b020c2016f13', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: 'd660082780a4cce2f78ec463cf68f4158f9f6b30', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e37f6ad4f0f8d63bd89ab81922e1e067e9effb82', class: "description" }, hAsync("slot", { key: 'd1afa3730549af3796556164f98a6e8187db7324', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '171305d54a0389e450b6ae27148267e3676eee5e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'dfc8ea72d87c0ef8817ca28228e5c99a85c2fbf8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9612,67 +10310,6 @@ class NvFieldpassword {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Defines the type of the input.
-         * @default 'text'
-         */
-        this.mode = 'text';
-        /**
-         * The autocomplete prop helps users fill out the input field faster by
-         * suggesting entries they’ve used before, like their email or address.
-         * You can turn it on to make forms more convenient or off to ensure users
-         * always type in fresh data.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Hide the button to show/hide the password.
-         */
-        this.hidePasswordIcon = false;
-        /**
-         * Show/hide the password programmatically.
-         */
-        this.showPassword = false;
-        /**
-         * Defines whether the password is visible or not.
-         */
-        this.showPasswordState = this.showPassword;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -9695,6 +10332,26 @@ class NvFieldpassword {
             this.value = input.value; // Update the input value without worrying about the space
             this.valueChanged.emit(input.value);
         };
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.pattern = undefined;
+        this.mode = 'text';
+        this.autocomplete = 'off';
+        this.hidePasswordIcon = false;
+        this.showPassword = false;
+        this.showPasswordState = this.showPassword;
     }
     handleShowPasswordChange(newValue) {
         this.showPasswordState = newValue;
@@ -9703,9 +10360,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '40f6d172ebe46636a4240e010cc1dd9eb9e90e79' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc7b47c5796cfc862e1dafbe6720fe725662dd2c', htmlFor: this.inputId }, hAsync("slot", { key: 'a5696e12f593408bb20b92e49c0c5a6b21fef9b1', name: "label" }, this.label))), hAsync("div", { key: 'a1856e68415b5685982e936588791d36c9188d29', class: "input-wrapper" }, hAsync("slot", { key: 'ee701f5efbc0f7dcdbfd8d8494eb660ed9081f80', name: "before-input" }), hAsync("div", { key: '3a2b900d7fadac36538d936cc6853fe855713f26', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b59c93d7457f00ff7b7cb4fcd7caca927a197dc4', name: "leading-input" }), hAsync("input", { key: '67755bdf835476b8511083ba6e35ed5eca8868e5', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: 'd9ffdbb9a4bd76d30c6adbb5ada4a989c6bdc092', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '40b2376b0cf815998eede9c8917f1126cda51d28', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '6ae6f802256ac343a232bb24f7b7ec7e21ee5dd0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e08e5965bebe38262e5efd30f0ab3d3a905083ff', class: "description" }, hAsync("slot", { key: '8554c3620920efc3dd108b5e4f0e79dddc55c845', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cf40170d0e1c8de40601b1ef2d3a8260a07cf7e9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e3b0ff01a8ffd569d2eb2c2e3a188cb6e53f0f6f', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'e33d3781acc832fe374732bc8c0164b965926439' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '27f03dc42fb2a251e669f3e807fd01eee003c2e7', htmlFor: this.inputId }, hAsync("slot", { key: '61d826d1cea9b5035d614503fc187c484252abff', name: "label" }, this.label))), hAsync("div", { key: 'f75cd0ec46d1c92396ff37f7122029b534e46954', class: "input-wrapper" }, hAsync("slot", { key: 'bd54dca65be1b841ed93e534f8738bf685d495a0', name: "before-input" }), hAsync("div", { key: '4e9a7c5aa765a110f655421bf6dad433e5327bd3', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '8a6ba620bfe1e2b716f58fd544382f2f7d2b6aa2', name: "leading-input" }), hAsync("input", { key: '36c0f4b08067604f40cab2a807318f604786a610', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: 'dd8cbe23483e3fcfa9ec4b790835cca031dc1d11', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '9cccf9bdef256a36131208c40379e1a7c7109d03', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: 'ee5afcdd4ab13bbf79166f451208a62c3f868cab', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '195a795c9b498ee6e03cf2ee9ec90c545cc29085', class: "description" }, hAsync("slot", { key: '5490e3158aeeec08e5fda0e2aaa8fdf7923b742a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '97569ae30b6a0df6a11e687aabc16edd609f4e0b', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '144baf7c20ed3244bdce250a7eeed76a1b515b13', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9756,35 +10413,17 @@ class NvFieldradio {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChanged = createEvent(this, "checkedChanged", 7);
-        /**
-         * Set the label placement to before the input
-         * @deprecated use labelPlacement instead.
-         */
+        this.message = undefined;
         this.labelBefore = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the radio button’s input element and the for attribute of
-         * the associated label. If no ID is provided, a random one will be
-         * automatically generated to ensure unique identification, facilitating
-         * proper label association and accessibility.
-         */
         this.inputId = v4();
-        /**
-         * Highlight the radio button with error styling. It helps users quickly
-         * identify which option needs attention, improving their form-filling
-         * experience by making issues more visible.
-         * @validator error
-         */
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
+        this.description = undefined;
         this.error = false;
-        /**
-         * Controls whether the radio button is selected.
-         */
+        this.errorDescription = undefined;
         this.checked = false;
-        /**
-         * Disables the radio button, making it un-selectable.
-         */
         this.disabled = false;
     }
     componentWillRender() {
@@ -9825,9 +10464,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5c03f0c1423eb932aa9d2022e9d6a30bdbbb08ca', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '3ffb0990423348725ded997c26b12b41f10a8f0d', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'f862a9040abe14402fa352006c1cdedaba81a1af', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '07269171f02fc8a9621d958b0997728162fda439', htmlFor: this.inputId }, hAsync("slot", { key: '5e66a1ac747ed1462e948c35b96cbca4e4c037b3', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'cfa36a9cd3958511abf407027ec9432addd7cc1a', class: "description" }, hAsync("slot", { key: '1e86daa3580d6f99091950acb1fda3eeeb742ad5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c1c1e7ecae6edc43b5a7793c180c0dd28fc09a67', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '51f217f3465720fd73371dcd420492b2cdf00802', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '45884696429c5f9232102f1aee32bd1930085faf', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'ef66e9c39bf0c9f1740b055e77a9bfefb3d6135c', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '972f6f0a53bcfd1ee468195227397011b34f4ca8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8713b8a6433da65c8b84a323baebdc643ddd605a', htmlFor: this.inputId }, hAsync("slot", { key: 'bc1b2f7e682242d0da1be9e1c9d385e844568d62', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c67519cdb09a9a5414a8d37b7013730e32efc700', class: "description" }, hAsync("slot", { key: '5058c3dea12bcb2d00cd55219f4a823d50e55c93', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cb264c373040e87183e613bd3d434d3c661f47e7', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '91d8c2e24647ffbce8d6282a2fe1f2f366ef8712', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9874,64 +10513,6 @@ class NvFieldselect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        /****************************************************************************/
-        //#region STATES
-        this.computedDisplayValue = '';
-        this.internalReadonly = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the select element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.selectId = v4();
-        /**
-         * The disabled prop lets you turn off the select field so that users can’t
-         * choose something. When disabled, the field is grayed out and won’t respond to
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the select field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to change or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the select field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the select field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the select field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * When enabled, allows the select to handle multiple selections.
-         */
-        this.multiple = false;
-        /**
-         * The value of the select field.
-         * - If `multiple` is `false`, it's a single string.
-         * - If `multiple` is `true`, it's a comma-separated string of selected values.
-         */
-        this.value = '';
-        /**
-         * When enabled, displays the value element instead of the label when readonly.
-         * By default, the label is displayed in readonly mode. Also it automatically
-         * sets the component to readonly.
-         */
-        this.displayValue = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -9963,6 +10544,23 @@ class NvFieldselect {
                 this.selectElement.focus();
             }
         };
+        this.computedDisplayValue = '';
+        this.internalReadonly = false;
+        this.message = undefined;
+        this.validation = undefined;
+        this.selectId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.multiple = false;
+        this.value = '';
+        this.displayValue = false;
     }
     componentWillRender() {
         this.updateDisplayValue(); // Ensure display value is updated before render
@@ -10170,13 +10768,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'e1333260c8fa6eebf9078f7497d2d0b30f555068' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '42d18737d174df03ac92c2cd178e372fed4bde1a', htmlFor: this.selectId }, hAsync("slot", { key: '675f7d4d5089bebb8104d848f1953445c79b584f', name: "label" }, this.label))), hAsync("div", { key: '59f13a05173ee15cffa6afca296da0333568cea4', class: "select-wrapper" }, hAsync("slot", { key: '1c2fe2ec6e84b95a47dc4c2668afd5d0ea899aee', name: "before-input" }), hAsync("div", { key: 'f6bd0c186ac6fa781e52329fc8a4622b740066f2', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'fbf25811a89197b11a4d4ea6dd1020b44fd14f73', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'c05413ddedb713944ad7f128a866d761e38080c6', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: '067e8fb039aae38ff68121c7c3d7bd677ff9a48c' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ea707a112dcec12aa943e1ee477d8a9d03181312', htmlFor: this.selectId }, hAsync("slot", { key: '2ea8b094bad2b1783ebcf1e588cc74993885ecad', name: "label" }, this.label))), hAsync("div", { key: '2fe99ccec826acc0f7a3e06799f7375a470f70a6', class: "select-wrapper" }, hAsync("slot", { key: '8fe8e4a2037f5d9e0cd6f54ff04cc39b35bcf352', name: "before-input" }), hAsync("div", { key: 'b1464e7fbb698e6b36fb71f13b18554626991fcd', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'bf1d7391ecb23d07f43fbbfb84bb1265fc39f715', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'a9a2b66e21e1b0b9fe61c72451d408bb097628ac', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.selectId}-error`
-                : `${this.selectId}-description` })), hAsync("select", { key: '6bd95875e397c69c0297fe0c3bc9703c7872f477', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.selectId}-description` })), hAsync("select", { key: 'b485933c80bfdacc6711218f7f70ac49073fb80c', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.selectId}-error`
-                : `${this.selectId}-description` }, hAsync("slot", { key: '22798124b2b743ee1b8ffc22f4e8fffc6704be66' })), this.internalReadonly && (hAsync("nv-icon", { key: '6fb4193bf131fce928d0e5d0346eb7fe62fcf77e', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '4a84c2b8eece45c6247c7c58f74696fbc5b8ff4c', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '84af6db55127c516538f0df4d19f09f4570800f4', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '11dd18fc96e0360ac62b80d3d295895051a914d1', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '142d57ab7ba7aaef8ae0929b94716d37dd151e1c', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: '0ce2c8c5bfa0966b1017cfea79461df6630773b4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a06402c222f5f377ef314c66317c98df4b72e4b0', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '0d9e63fd9b8fa53a4ea037e5cb720a42206ee49d', name: "error-description" }, this.errorDescription)))));
+                : `${this.selectId}-description` }, hAsync("slot", { key: '71d627ccb58ea5af2c411307ee53fd52e0fce6a9' })), this.internalReadonly && (hAsync("nv-icon", { key: 'b14356aa40948fc083bb9741e55d83e002c4ef3a', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '79cd6e53e7b6448489c51f40c46498a9549b5220', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '41af1b3709fb5441dfb3dfc5dce309e2b6660298', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '30613a1d3af2954ef689991fca82c8b213f238d8', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0aaced12d0368e36251512f56592f57dd4f0e846', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: '502c52ed64f90e79c7c3b7e9bb5555e21073adfd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '350ecf381d1f466d5c93e19ba2c8609b1d3e5713', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '871693ad30b041ac0ddac4f79cf6fdec35dcebaa', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10229,57 +10827,6 @@ class NvFieldtext {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The type prop lets you specify what kind of information the input field
-         * should accept. Choose 'text' for general words or sentences, 'tel' for
-         * phone numbers, or 'email' for email addresses. This makes sure users get
-         * the right keyboard and validation for what they need to enter.
-         */
-        this.type = 'text';
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * When used with the email input type, this prop enables the field to accept
-         * multiple email addresses. Users can enter several addresses, separating
-         * each one with a comma, allowing the form to handle multiple recipients.
-         */
-        this.multiple = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -10299,6 +10846,27 @@ class NvFieldtext {
         this.handleInputContainerClick = () => {
             this.inputElement.focus();
         };
+        this.message = undefined;
+        this.validation = undefined;
+        this.textInputType = undefined;
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.type = 'text';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.pattern = undefined;
+        this.autocomplete = undefined;
+        this.multiple = false;
     }
     componentWillRender() {
         if (this.textInputType) {
@@ -10316,9 +10884,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8c9c791ef7164a3d1dc248242ced345652fae05d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8e768c2299d48e0ec4f2f4052503b38ec07367e9', htmlFor: this.inputId }, hAsync("slot", { key: '316e1beffe5534bd1386c9a85818a4fc134de595', name: "label" }, this.label))), hAsync("div", { key: '9a52ffcbcf9ef514c108c0f64ab09b0f1c70f80b', class: "input-wrapper" }, hAsync("slot", { key: 'bcb5d42ea25518e7d4408f6044ec70343476bd80', name: "before-input" }), hAsync("div", { key: '478c7770b2d00c7a0a4182cc4e23b426d74924b9', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '0b9538c630b6d1e27b439c54e47c31c39cce6001', name: "leading-input" }), hAsync("input", { key: '3a3ccf0c9fb16ef47f1c143c4d54a73e400e2b29', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: 'cd45c694b5480e3ee92d58ac05e51c97a1dd12f6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '6fca533bbceb8c4f4f9ed7dbcd9373df54d8496d', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '0ee33ded353265eeed3253b5c9f039b739508a82', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '12bd5f917245feb4562dd8903c157429ef72dae9', class: "description" }, hAsync("slot", { key: '37894343aa3ad21d37dc93f47a27723fdc7cc89a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '04253d575a1c987f48a95e32c41a38e0fe10c3a4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '2db01455b977c68638271427283d95b811f41d54', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'fea5a10f2f7a5144441333352a31d9f8b33e587a' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '96693bf825c79d480d7cc282aed3f71ae6e02018', htmlFor: this.inputId }, hAsync("slot", { key: '0948a3ee30db864bc7aa791c98d5288d0d83dbf8', name: "label" }, this.label))), hAsync("div", { key: 'a4b3a6ebce307ae33141f9af58d5673da51ceb0a', class: "input-wrapper" }, hAsync("slot", { key: '2c37613f69908cbbd5904cd036a32a60cd208ea7', name: "before-input" }), hAsync("div", { key: '2c0d2bb111c24642d2a4187a40ce33bf0cf9ae6f', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'eac9c83a80d5634220578c843c314d45fc76e387', name: "leading-input" }), hAsync("input", { key: 'f5d6f6727ce6e930870ec453c029290d99c648e5', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '6cb3f531c998563acfaed207804c8eb76b2636ab', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '4e8605db4947208eeb6264206980d876824e81f2', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '568578fbdd6c1c4d1682dea2bf2e8b28698b8fe5', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2e742e69c44d5f7d2d03db6511c25386bc3bb4c7', class: "description" }, hAsync("slot", { key: '196020366f8b06a3b74508b633cc076e5252e754', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '55d162f9ac2a4767c9e65031a638db6fd9387cea', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '724b2782e068b0acca707671452da63f2bb525a0', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10367,63 +10935,6 @@ class NvFieldtextarea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the textarea element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.textareaId = v4();
-        /**
-         * The disabled prop lets you turn off the textarea field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the textarea field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the textarea field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the textarea field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the textarea field’s appearance to indicate successful textarea or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * The number of visible text lines for the control. The default is 3. This
-         * can be useful when you want to limit the size of the textarea field or when
-         * you want to make the textarea field smaller to fit a specific layout. The
-         * textarea field will expand vertically to fit the text as the user types.
-         */
-        this.rows = 3;
-        /**
-         * Controls the resize property of a textarea. It can be set to none, both,
-         * horizontal, or vertical. The default is vertical.
-         */
-        this.resize = 'vertical';
-        /**
-         * Enable this to make the textarea automatically resize as the user types,
-         * adjusting the height to fit the content. For the best experience, avoid
-         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
-         * can still be allowed if desired.
-         */
-        this.autosize = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -10438,6 +10949,25 @@ class NvFieldtextarea {
         this.handleTextareaContainerClick = () => {
             this.textareaElement.focus();
         };
+        this.message = undefined;
+        this.validation = undefined;
+        this.textareaId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.rows = 3;
+        this.resize = 'vertical';
+        this.autosize = false;
     }
     componentWillRender() {
         if (this.message) {
@@ -10525,9 +11055,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f5b311b7b6ce4ad9d6ff0a63103018a065d8ff66' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '377483fb782672a29a9a9b3824e102587eb166b1', htmlFor: this.textareaId }, hAsync("slot", { key: '2705fb3d2736caef5b289fb3338790e62d758d56', name: "label" }, this.label))), hAsync("div", { key: '49d270fed9367b58eb1197a9e91d86c36cee90a8', class: "textarea-wrapper" }, hAsync("div", { key: '28e591c39cff80eeb5fa6105bafa2423f02b8da9', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '0dc54edc1a23221287810ecff5b51c7b91fe2b7b', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '32f6d57c4c3fa1fb937c8b92ef630280bc4238e1', class: "description" }, hAsync("slot", { key: '1896e7a524753172cdeb19aa21fc83afd394c1a7', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '94757defcafe57f7074871f81987a2733f509f88', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '561620515caa5c115c9bd8bb9139bf7fa29e22fb', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '4c044ab568a758eda425570b32f4e62ac52fd0bd' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b4ff190b325fe5bcb21692d9826edff006609a06', htmlFor: this.textareaId }, hAsync("slot", { key: '8d72187a69b9deb1d522ae0db6723280e953669d', name: "label" }, this.label))), hAsync("div", { key: 'e3b749368b69e5b5cbd5c58a5466d454711dc2d4', class: "textarea-wrapper" }, hAsync("div", { key: 'b2ab561a64505f9602e1c89a8ccf67087f4bc5f7', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'aed794ee9e228e14d7ccb1baecdbb7468b1d09e1', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd64a625c2b645d200248b21f84b29061ac88fd77', class: "description" }, hAsync("slot", { key: 'eeb16d8bdb97aa59d55e4189eba6021fc8da9bf8', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '28c2378effdb7974df58d6be858f39aebf1841b8', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8c3fa44d50353b8e3cf124483fd63896c39a89fb', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10577,28 +11107,15 @@ class NvFieldtoggle {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChanged = createEvent(this, "checkedChanged", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the radio button’s input element and the for attribute of
-         * the associated label. If no ID is provided, a random one will be
-         * automatically generated to ensure unique identification, facilitating
-         * proper label association and accessibility.
-         */
         this.inputId = v4();
-        /**
-         * Hides the label visually while still keeping it available for screen
-         * readers.
-         */
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
         this.hideLabel = false;
-        /** Indicates whether the toggle is checked or not. */
+        this.description = undefined;
         this.checked = false;
-        /** Disables the toggle, preventing user interaction. */
         this.disabled = false;
-        /**
-         * Sets the toggle to read-only, preventing user changes but still allowing
-         * focus and selection of text.
-         */
         this.readonly = false;
     }
     //#endregion EVENTS
@@ -10630,8 +11147,8 @@ class NvFieldtoggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '18603a99c814b19f77a3e78f4a7dd3960bdc0841', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '3fb419bde30424ee2abdb63d75ef8ef3c78754c8', class: "input-container" }, hAsync("input", { key: '2c6d98d5c1e05bb33832c48fbe4b2e68f133a70f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'cc81c4e259750d75fb4e799365da64cedb71304c', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '44177bd0153a833d5b5ef7a4e2e1d6dedfea3c91', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '05719cf662559b26b3074e4b9bd67ed908e4c9bf', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'db2e5122431af687ce42c85476bb38bca868ee26', class: "description" }, hAsync("slot", { key: '68256d968071f13d7441b1801d17162b91021a8b', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '9dd7235a2967fd24e60fb5989c84b2be30ff19dc', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'b32928b8385c42117ab91e58d55274bfc20d9338', class: "input-container" }, hAsync("input", { key: '03117b5baaece28cbc0ab830e36021801516b008', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'b4224a117f2cc056f66006ba2af09c59670ac886', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6e3538e9f9b78ce3b22e77deca8edff11e897ad3', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '33ba20eab20bdc5d91c5aba1d9c5a417ef057872', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd5a04053715549f6beb3153d3ebc90316f84838d', class: "description" }, hAsync("slot", { key: '784d242b1e1b0d53a414bae40339e1ae026240f3', name: "description" }, this.description))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10667,10 +11184,15 @@ var NvIconStyle0 = nvIconCss;
 class NvIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Adjust the size of the icon to fit your design needs.
-         */
+        this.xsmall = undefined;
+        this.small = undefined;
+        this.medium = undefined;
+        this.large = undefined;
+        this.xlarge = undefined;
+        this.color = undefined;
+        this.name = undefined;
         this.size = SemanticSizes.Medium;
+        this.spriteUrl = undefined;
     }
     componentWillRender() {
         if (this.xsmall) {
@@ -10704,7 +11226,7 @@ class NvIcon {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (hAsync(Host, { key: '1862efaf5cb956c36b1dad264518f7eb37a10c34', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '7beb3a4697c73a42e28b8d59128cea93978ba282', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: '50e901a1dc92fb8ada8489e9be15c1bf069df5e6', href: `${this.spriteUrl}#${this.name}` }))));
+        return (hAsync(Host, { key: '0dc158bd1c3036ad6f44a2ab73a81747b0e76962', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'a27d0fc2a904cf7868b0940e04619e8bbebb2000', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: '0c4dbd3406f3b3d1e6804f611b08703af8b1e350', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -10743,47 +11265,6 @@ class NvIconbutton {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the button appears, allowing for
-         * customization of the button's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Adjusts the button’s emphasis to make it more or less visually prominent
-         * to users. Use this to draw attention to important actions or reduce focus
-         * on less critical ones.
-         */
-        this.emphasis = 'high';
-        /**
-         * Set this to true to show a spinner on the button, letting users know that
-         * their action is being processed. It helps improve user experience by
-         * indicating ongoing activities. The icon is not displayed when the button
-         * is loading. Also, the button is disabled. If you want to disable the
-         * button, it is not possible. It is automatically disabled when loading.
-         */
-        this.loading = false;
-        /**
-         * Disables the button, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Makes the button look active when it’s within a compatible component
-         * like a button group.
-         */
-        this.active = false;
-        /**
-         * Sets the button type to control its function in forms. Use 'submit' to send
-         * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
-         */
-        this.type = 'button';
-        /**
-         * Sets the shape of the button. Choose between square and rounded.
-         */
-        this.shape = 'square';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -10806,6 +11287,14 @@ class NvIconbutton {
                 (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
             }
         };
+        this.size = 'md';
+        this.emphasis = 'high';
+        this.loading = false;
+        this.disabled = false;
+        this.active = false;
+        this.name = undefined;
+        this.type = 'button';
+        this.shape = 'square';
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -10834,7 +11323,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && hAsync("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), hAsync("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
+        return (hAsync(Host, { key: '5c4107ececbf6252efbf033882481c793aebfadb', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: 'd9ba86fb063f9bf3d6d6d95949222fcd4bf07da5', size: this.size }), !this.loading && hAsync("nv-icon", { key: '4fc7acc39c5dbb5bb668445f6427a28f767d8a0b', name: this.name, size: this.size }), hAsync("slot", { key: '21b8444e3e4f4d5f0f4b9b12f7edc2d6ec48ea80' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10868,21 +11357,15 @@ var NvLoaderStyle0 = nvLoaderCss;
 class NvLoader {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Choose the size of the loader to best fit your application’s needs, whether
-         * it’s a small spinner for subtle loading indicators or a large one for more
-         * prominent displays.
-         */
         this.size = 'md';
+        this.color = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '9d70fed6bfe41c8e1a87bd7eb2d83a1bb6af69ab', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '442187ad4ad5deaa2880a67c9fddf2b2e38d517d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -10911,28 +11394,9 @@ class NvMenu {
         this.menuitemSelected = createEvent(this, "menuitemSelected", 7);
         this.isHandlingKeyDown = false;
         this.isHandlingClick = false;
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Use this to toggle the initial visibility of the menu, by default the menu
-         * is hidden.
-         */
         this.open = false;
-        /**
-         * Use this if the menu is nested inside another menu. This will prevent the
-         * parent menu from closing when the child menu is opened.
-         */
         this.nested = false;
-        /**
-         * Use this to disable the menu from closing automatically when a menu item is
-         * selected.
-         */
         this.disableCloseOnSelect = false;
-        /**
-         * Decides where the menu shows up next to the button it’s linked to (above,
-         * below, to the sides). If there isn’t enough room, it will adjust its
-         * position on the axis to fit on the screen, so users can always see it.
-         */
         this.placement = this.nested ? 'right-start' : 'bottom-end';
     }
     //#endregion PROPERTIES
@@ -11095,7 +11559,7 @@ class NvMenu {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '23fdff061d4aa8364590e2486c60b26684400a34' }, hAsync("slot", { key: '50ff6d6a5b84ad83a9b9deefed42335e663c989d', name: "trigger" }), hAsync("nv-popover", { key: 'ee15458289098254b7074452b2c25a32a7e82b3e', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: 'bccea8f6469c29bad2e764c6628b6a783890d10d', name: "content" }))));
+        return (hAsync(Host, { key: 'cc0abb7b96dd16348e420a0d8f3d827fdeba3ec0' }, hAsync("slot", { key: '3240929357957f52cda4ab3ee04ef954db6f1425', name: "trigger" }), hAsync("nv-popover", { key: '3fe10536df9e606fbc69cadc0ec4023c7ee3ae75', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: '66ea7310d3b2e27288fa440dbb96f56885c88964', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -11125,13 +11589,9 @@ var NvMenuitemStyle0 = nvMenuitemCss;
 class NvMenuitem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Disables the item, preventing user interaction.
-         */
+        this.icon = undefined;
         this.disabled = false;
-        /**
-         * If the menu item has a submenu, the a caret icon will be displayed.
-         */
+        this.shortcut = undefined;
         this.hasSubmenu = false;
     }
     //#endregion PROPERTIES
@@ -13246,53 +13706,6 @@ class NvPopover {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.openChanged = createEvent(this, "openChanged", 7);
-        /**
-         * Use this prop to toggle the visibility of the popover. Set to true to show
-         * the popover and false to hide it.
-         */
-        this.open = false;
-        /**
-         * Sets the interaction mode for triggering the popover. Options include:
-         * - `hover`: The popover is shown on trigger hover.
-         * - `click`: The popover toggles on trigger click.
-         * - `controlled`: The visibility is managed manually through methods or the
-         *   open prop.
-         */
-        this.triggerMode = 'click';
-        /**
-         * Defines where the popover appears relative to the trigger.
-         */
-        this.placement = 'bottom';
-        /**
-         * Adjust the gap between the popover and its trigger element by setting how
-         * many pixels they should be apart.
-         */
-        this.offset = 12;
-        /**
-         * Use this to decide if the popover should include a small arrow pointing to
-         * the trigger element, making the connection between them more clear.
-         */
-        this.hasArrow = false;
-        /**
-         * Disables the automatic flipping of the popover when the trigger element is
-         * out of the viewport. The popover will flip automatically by default.
-         */
-        this.disableFlip = false;
-        /**
-         * Sets how many pixels the popover should stay from the edge of the viewport.
-         */
-        this.shiftPadding = 16;
-        /**
-         * Use this to set a delay before the popover appears on hover. If the mouse
-         * leaves before this time, the popover won’t show. This only works when the
-         * trigger mode is set to `hover`.
-         */
-        this.enterDelay = 0;
-        /**
-         * Use this to set the popover to be nested inside another popover. This will
-         * prevent the parent popover from closing when the child popover is opened.
-         */
-        this.nested = false;
         this.handleClickOutside = (event) => {
             // This popover should close when the user clicks outside of it.
             if (this.el.contains(event.target))
@@ -13358,6 +13771,17 @@ class NvPopover {
         /****************************************************************************/
         //#region WATCHERS
         this.isAnimating = false;
+        this.triggerElement = undefined;
+        this.open = false;
+        this.triggerMode = 'click';
+        this.placement = 'bottom';
+        this.groupName = undefined;
+        this.offset = 12;
+        this.hasArrow = false;
+        this.disableFlip = false;
+        this.shiftPadding = 16;
+        this.enterDelay = 0;
+        this.nested = false;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -13523,7 +13947,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ee70da5a68b34bf289f79b6d18ffac777f8d807f' }, hAsync("slot", { key: '64bd478a06c4ccf9f656a9ea617bbe39d2ce78d8', name: "trigger" }), hAsync("div", { key: '5d024ffd7c1e00f8f476164da19d231edafa96ec', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '63116e165f54dc018dfee0a8b56eeda96523f16f', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '6a7a400135aaea61ed5f1b0cb492ab962598ad16', name: "content" }))));
+        return (hAsync(Host, { key: 'a09380cf6451740b99cbebca902cb02f44b458a2' }, hAsync("slot", { key: '661c16225a71d26ab295b5efe139ebc507f9e261', name: "trigger" }), hAsync("div", { key: '7dafdc5529822fb262bb52bf27a9353bf9040c05', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'ec295857667a455e2511d0a2848e9847f275dc21', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '17723fe92077d5b88c584a4202f4995ad7a7149a', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13568,7 +13992,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '559c93b3961fdee5d278df42693dd4faae1f1eaf' }, hAsync("slot", { key: '3cbf2c0ed7a07e23537ae6fb3cc999fef27561ea' })));
+        return (hAsync(Host, { key: 'dbbdde31406c030369bc78434dffd38203c24660' }, hAsync("slot", { key: 'f132a4f4fa2141774f5f4094ed8e5bb63d9619f1' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -13591,19 +14015,17 @@ var NvStackStyle0 = nvStackCss;
 class NvStack {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Gutter refers to the space that exists between children components inside
-         * the stack container.
-         */
         this.gutter = 2;
+        this.fill = undefined;
+        this.flex = undefined;
+        this.full = undefined;
+        this.vertical = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '900b3afd3b0394433a719769797b4275998be59d', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'de28519746e3c18f04bdaea3f13258bc3d3d49a9' })));
+        return (hAsync(Host, { key: 'e60e05ba006143933b161ad781ba5f6fa8084086', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '91cd88a7cad2508c74561c202fa88c76ad01a43d' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -13635,36 +14057,15 @@ var NvTableStyle0 = nvTableCss;
 class NvTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region STATES
-        this.parsedColumns = []; // Parsed array of column headers
-        this.parsedData = []; // Parsed array of data rows
+        this.parsedColumns = [];
+        this.parsedData = [];
         this.hasSlotHead = false;
         this.hasSlotBody = false;
-        //#endregion STATES
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Defines the table columns.
-         * @example ['Name', 'Age', 'Email']
-         * @default []
-         */
         this.columns = [];
-        /**
-         * Defines the table data.
-         * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]
-         * @default []
-         */
+        this.columnsJson = undefined;
         this.data = [];
-        /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
-         */
+        this.dataJson = undefined;
         this.noDataMessage = 'No data available';
-        /**
-         * The message to display when there are no columns or data available.
-         * @default 'No data or columns available to display.'
-         */
         this.noColumnsNoDataMessage = 'No data or columns available to display.';
     }
     //#endregion PROPERTIES
@@ -13752,7 +14153,7 @@ class NvTable {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (hAsync(Host, { key: 'ab2f459ea80c9f134a537b62298ffd55ad7b719f' }, hAsync("div", { key: '081211573d87749e8b133b89e9da2a201b9e8bf3', class: "hidden" }, hAsync("slot", { key: '7dd2c168d379818e1456eb2117e14cf79e44f33e' }), hAsync("slot", { key: '7c8e1b4cf0b223257148459d753c2eb325a7cd17', name: "head" }), hAsync("slot", { key: 'd107814f31a82e3fd6e22dbccff319c5baf2b3db', name: "body" })), hAsync("slot", { key: 'd704c43a322b073ed459947f23950bc719402656', name: "before" }), this.parsedColumns.length === 0 &&
+        return (hAsync(Host, { key: '22d8c833c2907ef992fb62966f6dcb59014135bf' }, hAsync("div", { key: '6cfc9629509f05b318908fc9ffb82d98ee73863e', class: "hidden" }, hAsync("slot", { key: 'a76ccca57f1f7d88a00fd888decf905a422b45eb' }), hAsync("slot", { key: '01d42501df876c08143127890d066afe53ca2e7b', name: "head" }), hAsync("slot", { key: '0ece02867a278d868bb85f6dad7c07d02ab4c52a', name: "body" })), hAsync("slot", { key: '77959a8d81390cb679a366e0c98a63cd74747910', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 ? (hAsync("thead", null, hAsync("tr", null, this.parsedColumns.map(column => (hAsync("th", null, column)))))) : headerRows.length > 0 ? (hAsync("thead", null, headerRows.map(row => {
@@ -13763,7 +14164,7 @@ class NvTable {
             : Object.values(row).map(value => hAsync("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (hAsync("tr", null, cells.map(cell => (hAsync("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), hAsync("slot", { key: '727d2040bec14d6632d062637b86b3a79e30b88d', name: "after" })));
+        })) : null))), hAsync("slot", { key: '923eb6b92e5c8e146c32c972fd919b2ec72d3be2', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13807,7 +14208,7 @@ class NvTablebody {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '033046403a927a4e738ee0b17491436872845375' }, hAsync("tbody", { key: 'e9dd64ba4c4463b64f7c48ea01aa8d577d1abddd' }, hAsync("slot", { key: '3790e34a3f1c0c870e41f5259edf956253cf031d' }))));
+        return (hAsync(Host, { key: '0aafc5bec69cc03290e208df6210b39dc3b6f776' }, hAsync("tbody", { key: 'c198cb6ecafaf25ffce77cff806cd582db5eedb9' }, hAsync("slot", { key: '91d0417b3fbef34239707d27c23e9f778ec6023c' }))));
     }
     static get style() { return NvTablebodyStyle0; }
     static get cmpMeta() { return {
@@ -13829,28 +14230,17 @@ var NvTablecolumnStyle0 = nvTablecolumnCss;
 class NvTablecolumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * A non-negative integer value indicating how many columns the header cell spans
-         * or extends. The default value is 1. User agents dismiss values higher than 1000
-         * as incorrect, defaulting such values to 1.
-         * @default 1
-         */
+        this.abbr = undefined;
         this.colspan = 1;
-        /**
-         * A non-negative integer value indicating how many rows the header cell spans or
-         * extends. The default value is 1; if its value is set to 0, the header cell will
-         * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,
-         * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534
-         * are clipped at 65534.
-         * @default 1
-         */
         this.rowspan = 1;
+        this.headers = undefined;
+        this.scope = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9e3e12375467e02e9e964b3f008aaee842704132' }, hAsync("th", { key: '9e4ee5f486d53a6200bd73652d35783da9d56eae', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: 'b59a867f3fad0e30e475f730aaaf482564969807' }))));
+        return (hAsync(Host, { key: '9ddb6d1bacf5e5697236330936540232c6406879' }, hAsync("th", { key: '9cc2015b34d973a6d54061a00b8bb21b1833f7d7', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: '486abb79f2a0b1f4cd9f1f8bcb3c49c12a35eb2e' }))));
     }
     static get style() { return NvTablecolumnStyle0; }
     static get cmpMeta() { return {
@@ -13878,30 +14268,15 @@ var NvTabledatacellStyle0 = nvTabledatacellCss;
 class NvTabledatacell {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Contains a non-negative integer value that indicates how many columns the data
-         * cell spans or extends. The default value is 1. User agents dismiss values higher
-         * than 1000 as incorrect, setting to the default value (1).
-         * @default 1
-         */
         this.colspan = 1;
-        /**
-         * Contains a non-negative integer value that indicates for how many rows the data
-         * cell spans or extends. The default value is 1; if its value is set to 0, it
-         * extends until the end of the table grouping section (`<thead>`, `<tbody>`,
-         * `<tfoot>`, even if implicitly defined), that the cell belongs to. Values higher
-         * than 65534 are clipped to 65534.
-         * @default 1
-         */
         this.rowspan = 1;
+        this.headers = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2b8dd0b288e8771055c061f42bae406e35618394' }, hAsync("td", { key: '4c77b5ddb3e992816a9f74097b184cf0a4299a1d', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: '9698292b649e85f9d1a6578ae6b6166c33594eab' }))));
+        return (hAsync(Host, { key: 'abee360bdf041cea3cfbc658a24ba0b45b694fad' }, hAsync("td", { key: '9da91e1495dc943dad94380b5233dac9dcc340d8', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: '57cfd771f065dcc70b9686fbc03f46a86b39bdc7' }))));
     }
     static get style() { return NvTabledatacellStyle0; }
     static get cmpMeta() { return {
@@ -13931,7 +14306,7 @@ class NvTablehead {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '664bc779e57e372c4939f34e79be34672c701b9b' }, hAsync("thead", { key: '772dfe48aea949fa05229f036589947dcf097992' }, hAsync("slot", { key: 'bc76551105f0f0dfb4d6639bbe5b304b5b824328' }))));
+        return (hAsync(Host, { key: '12149e94ecec13e7cc4711cdd86dad480a6f80dc' }, hAsync("thead", { key: '3083c897b49ac72a0758a2c78efa10b64a90a4ee' }, hAsync("slot", { key: 'd40f3b40723b2bbed4c5c1fd800a0442ab094eea' }))));
     }
     static get style() { return NvTableheadStyle0; }
     static get cmpMeta() { return {
@@ -13957,7 +14332,7 @@ class NvTablerow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2b24e970bb04d2ce5e9a95a136127fbdaa84a677' }, hAsync("tr", { key: 'd6c6a5ca230a5282a152db23885f200c04c43be4' }, hAsync("slot", { key: '84d7b5452772f4ff37e481fa14bd28b25cb0fd77' }))));
+        return (hAsync(Host, { key: 'acb4cbd0903238ff07d45d556123278e9fddb800' }, hAsync("tr", { key: 'a2d47ed6d31e1d84cfe0c055dc50c9e32de41286' }, hAsync("slot", { key: '7bd7354523db2f45b8db3a78d32b6b26afc136ed' }))));
     }
     static get style() { return NvTablerowStyle0; }
     static get cmpMeta() { return {
@@ -13980,17 +14355,8 @@ var NvTooltipStyle0 = nvTooltipCss;
 class NvTooltip {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Decides where the tooltip shows up next to the element it’s linked to
-         * (above, below, to the sides). If there isn’t enough room, it will adjust
-         * it's position on the axis to fit on the screen, so users can always see it.
-         */
+        this.message = undefined;
         this.placement = 'bottom';
-        /**
-         * Controls how long (in milliseconds) the tooltip waits to show after you
-         * hover over or focus on an element. If you move away before the delay is up,
-         * the tooltip won’t appear.
-         */
         this.enterDelay = 0;
     }
     //#endregion PROPERTIES
@@ -14005,7 +14371,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '590d897c7012f9020f6ac6e9f49acb840b4067ca' }, hAsync("slot", { key: '9479477482e361a042d464311a90dc3b0babb9e5' }), hAsync("nv-popover", { key: '89a2903946a89074201b5eb61a64b0595d831512', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '5a6097b56440b06c33b20d5c06054f6aad9c9a42', slot: "content" }, this.message), hAsync("slot", { key: '595f1185183da50e916b243276c38a10a84e5712', name: "content" }))));
+        return (hAsync(Host, { key: 'f2a8c20a32c58f486c6ab3910947274c6c9307e3' }, hAsync("slot", { key: '0dd69aa01fa88f5640128014145a3dfe27cb6a11' }), hAsync("nv-popover", { key: 'f11b6473623a6223903c7bec2344af00c5952814', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'ca4426091740d7491f92aebaea090ff109a09436', slot: "content" }, this.message), hAsync("slot", { key: '94abaf31618c29d02439493f7628c7886c7d4ec0', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -14039,6 +14405,8 @@ registerComponents([
   NvDatagridrow,
   NvFieldcheckbox,
   NvFielddropdownitem,
+  NvFielddropdownitemcheck,
+  NvFieldmultiselect,
   NvFieldnumber,
   NvFieldpassword,
   NvFieldradio,
@@ -14175,7 +14543,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.23.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.22.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -24605,7 +24973,7 @@ function serializeNodeToHtml(elm, serializationOptions = {}) {
     text: []
   };
   let renderedNode = "";
-  const children = !opts.fullDocument && elm.body ? Array.from(elm.body.childNodes) : opts.outerHtml ? [elm] : Array.from(getChildNodes(elm));
+  const children = !opts.fullDocument && elm.body ? Array.from(elm.body.childNodes) : opts.outerHtml ? [elm] : Array.from(elm.childNodes);
   for (let i = 0, ii = children.length; i < ii; i++) {
     const child = children[i];
     const chunks = Array.from(streamToHtml(child, opts, output));
@@ -24638,10 +25006,7 @@ function* streamToHtml(node, opts, output) {
       const tag = tagName === shadowRootTag ? "template" : tagName;
       yield "<" + tag;
       output.currentLineWidth += tag.length + 1;
-      if (tag === "template" && (!node.getAttribute || !node.getAttribute("shadowrootmode")) && /**
-       * If the node is a shadow root, we want to add the `shadowrootmode` attribute
-       */
-      ("host" in node || node.nodeName.toLocaleLowerCase() === shadowRootTag)) {
+      if (tag === "template") {
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
@@ -24725,8 +25090,7 @@ style="${cssText}">`;
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
         yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
-        const childNodes = getChildNodes(node);
-        if (opts.newLines && (childNodes.length === 0 || childNodes.length === 1 && childNodes[0].nodeType === 3 /* TEXT_NODE */ && ((_e = childNodes[0].nodeValue) == null ? void 0 : _e.trim()) === "")) {
+        if (opts.newLines && (node.childNodes.length === 0 || node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 /* TEXT_NODE */ && ((_e = node.childNodes[0].nodeValue) == null ? void 0 : _e.trim()) === "")) {
           yield "\n";
           output.currentLineWidth = 0;
           for (let i = 0; i < output.indent; i++) {
@@ -24737,7 +25101,7 @@ style="${cssText}">`;
       }
       if (opts.excludeTagContent == null || opts.excludeTagContent.includes(tagName) === false) {
         const tag = tagName === shadowRootTag ? "template" : tagName;
-        const childNodes = tagName === "template" ? node.content.childNodes : getChildNodes(node);
+        const childNodes = tagName === "template" ? node.content.childNodes : node.childNodes;
         const childNodeLength = childNodes.length;
         if (childNodeLength > 0) {
           if (childNodeLength === 1 && childNodes[0].nodeType === 3 /* TEXT_NODE */ && (typeof childNodes[0].nodeValue !== "string" || childNodes[0].nodeValue.trim() === "")) {
@@ -24910,9 +25274,6 @@ function isWithinWhitespaceSensitive(node) {
   }
   return false;
 }
-function getChildNodes(node) {
-  return node.__childNodes || node.childNodes;
-}
 var NON_ESCAPABLE_CONTENT = /* @__PURE__ */ new Set([
   "STYLE",
   "SCRIPT",
@@ -25182,12 +25543,10 @@ var MockElement = class extends MockNode2 {
   attachInternals() {
     return new Proxy({}, {
       get: function(_target, prop, _receiver) {
-        if ("process" in globalThis && globalThis.process.env.__STENCIL_SPEC_TESTS__) {
-          console.error(
-            `NOTE: Property ${String(prop)} was accessed on ElementInternals, but this property is not implemented.
-  Testing components with ElementInternals is fully supported in e2e tests.`
-          );
-        }
+        console.error(
+          `NOTE: Property ${String(prop)} was accessed on ElementInternals, but this property is not implemented.
+Testing components with ElementInternals is fully supported in e2e tests.`
+        );
       }
     });
   }
@@ -26107,8 +26466,6 @@ function createElement(ownerDocument, tagName) {
       return new MockTitleElement(ownerDocument);
     case "ul":
       return new MockUListElement(ownerDocument);
-    case "slot-fb":
-      return new MockHTMLElement(ownerDocument, tagName);
   }
   if (ownerDocument != null && tagName.includes("-")) {
     const win2 = ownerDocument.defaultView;
@@ -28396,11 +28753,11 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
-var CAPTURE_EVENT_SUFFIX = "Capture";
-var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/mode.ts
 var setMode = (handler) => modeResolutionChain.push(handler);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/compiler/html/canonical-link.ts
 var updateCanonicalLink = (doc2, href) => {