@pine-ds/core 3.9.0 → 3.11.0

package/hydrate/index.js

@@ -34,6 +34,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
   var CharacterData = $stencilWindow.CharacterData;
   var CSS = $stencilWindow.CSS;
   var CustomEvent = $stencilWindow.CustomEvent;
+  var CSSStyleSheet = $stencilWindow.CSSStyleSheet;
   var Document = $stencilWindow.Document;
   var ShadowRoot = $stencilWindow.ShadowRoot;
   var DocumentFragment = $stencilWindow.DocumentFragment;
@@ -126,10 +127,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'pine-core';
-const BUILD = /* pine-core */ { hydratedSelectorName: "hydrated", slotRelocation: true, updatable: true};
+const BUILD = /* pine-core */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
 
 /*
- Stencil Hydrate Platform v4.28.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.38.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -140,6 +141,64 @@ var __export = (target, all) => {
 // src/utils/constants.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
+var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
+  PrimitiveType2["Undefined"] = "undefined";
+  PrimitiveType2["Null"] = "null";
+  PrimitiveType2["String"] = "string";
+  PrimitiveType2["Number"] = "number";
+  PrimitiveType2["SpecialNumber"] = "number";
+  PrimitiveType2["Boolean"] = "boolean";
+  PrimitiveType2["BigInt"] = "bigint";
+  return PrimitiveType2;
+})(PrimitiveType || {});
+var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
+  NonPrimitiveType2["Array"] = "array";
+  NonPrimitiveType2["Date"] = "date";
+  NonPrimitiveType2["Map"] = "map";
+  NonPrimitiveType2["Object"] = "object";
+  NonPrimitiveType2["RegularExpression"] = "regexp";
+  NonPrimitiveType2["Set"] = "set";
+  NonPrimitiveType2["Channel"] = "channel";
+  NonPrimitiveType2["Symbol"] = "symbol";
+  return NonPrimitiveType2;
+})(NonPrimitiveType || {});
+var TYPE_CONSTANT = "type";
+var VALUE_CONSTANT = "value";
+var SERIALIZED_PREFIX = "serialized:";
+
+// src/utils/es2022-rewire-class-members.ts
+var reWireGetterSetter = (instance, hostRef) => {
+  var _a;
+  const cmpMeta = hostRef.$cmpMeta$;
+  const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
+  members.map(([memberName, [memberFlags]]) => {
+    if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
+      const ogValue = instance[memberName];
+      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
+      if (ogDescriptor) {
+        Object.defineProperty(instance, memberName, {
+          get() {
+            return ogDescriptor.get.call(this);
+          },
+          set(newValue) {
+            ogDescriptor.set.call(this, newValue);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
+      instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
+    }
+  });
+};
+function getPropertyDescriptor(obj, memberName) {
+  while (obj) {
+    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+    if (desc == null ? void 0 : desc.get) return desc;
+    obj = Object.getPrototypeOf(obj);
+  }
+  return void 0;
+}
 
 // src/utils/helpers.ts
 var isDef = (v) => v != null && v !== void 0;
@@ -159,6 +218,101 @@ var escapeRegExpSpecialCharacters = (text) => {
   return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
+// src/utils/remote-value.ts
+var RemoteValue = class _RemoteValue {
+  /**
+   * Deserializes a LocalValue serialized object back to its original JavaScript representation
+   *
+   * @param serialized The serialized LocalValue object
+   * @returns The original JavaScript value/object
+   */
+  static fromLocalValue(serialized) {
+    const type = serialized[TYPE_CONSTANT];
+    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+    switch (type) {
+      case "string" /* String */:
+        return value;
+      case "boolean" /* Boolean */:
+        return value;
+      case "bigint" /* BigInt */:
+        return BigInt(value);
+      case "undefined" /* Undefined */:
+        return void 0;
+      case "null" /* Null */:
+        return null;
+      case "number" /* Number */:
+        if (value === "NaN") return NaN;
+        if (value === "-0") return -0;
+        if (value === "Infinity") return Infinity;
+        if (value === "-Infinity") return -Infinity;
+        return value;
+      case "array" /* Array */:
+        return value.map((item) => _RemoteValue.fromLocalValue(item));
+      case "date" /* Date */:
+        return new Date(value);
+      case "map" /* Map */:
+        const map2 = /* @__PURE__ */ new Map();
+        for (const [key, val] of value) {
+          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
+          const deserializedValue = _RemoteValue.fromLocalValue(val);
+          map2.set(deserializedKey, deserializedValue);
+        }
+        return map2;
+      case "object" /* Object */:
+        const obj = {};
+        for (const [key, val] of value) {
+          obj[key] = _RemoteValue.fromLocalValue(val);
+        }
+        return obj;
+      case "regexp" /* RegularExpression */:
+        const { pattern, flags } = value;
+        return new RegExp(pattern, flags);
+      case "set" /* Set */:
+        const set = /* @__PURE__ */ new Set();
+        for (const item of value) {
+          set.add(_RemoteValue.fromLocalValue(item));
+        }
+        return set;
+      case "symbol" /* Symbol */:
+        return Symbol(value);
+      default:
+        throw new Error(`Unsupported type: ${type}`);
+    }
+  }
+  /**
+   * Utility method to deserialize multiple LocalValues at once
+   *
+   * @param serializedValues Array of serialized LocalValue objects
+   * @returns Array of deserialized JavaScript values
+   */
+  static fromLocalValueArray(serializedValues) {
+    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
+  }
+  /**
+   * Verifies if the given object matches the structure of a serialized LocalValue
+   *
+   * @param obj Object to verify
+   * @returns boolean indicating if the object has LocalValue structure
+   */
+  static isLocalValueObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
+      return false;
+    }
+    const type = obj[TYPE_CONSTANT];
+    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
+    if (!hasTypeProperty) {
+      return false;
+    }
+    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
+      return obj.hasOwnProperty(VALUE_CONSTANT);
+    }
+    return true;
+  }
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -208,6 +362,32 @@ var unwrapErr = (result) => {
   }
 };
 
+// src/utils/serialize.ts
+function deserializeProperty(value) {
+  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
+    return value;
+  }
+  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
+// src/utils/style.ts
+function createStyleSheetIfNeededAndSupported(styles2) {
+  return void 0;
+}
+
+// src/utils/shadow-root.ts
+var globalStyleSheet;
+function createShadowRoot(cmpMeta) {
+  var _a;
+  const shadowRoot = this.attachShadow({ mode: "open" });
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) {
+    {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+    }
+  }
+}
+
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
@@ -331,7 +511,7 @@ function patchSlotNode(node) {
     const slotName = this["s-sn"];
     if (opts == null ? void 0 : opts.flatten) {
       console.error(`
-          Flattening is not supported for Stencil non-shadow slots. 
+          Flattening is not supported for Stencil non-shadow slots.
           You can use \`.childNodes\` to nested slot fallback content.
           If you have a particular use case, please open an issue on the Stencil repo.
         `);
@@ -375,6 +555,94 @@ var uniqueTime = (key, measureText) => {
     };
   }
 };
+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);
+  if (!win.document) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
+  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 = win.document.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if ((cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
+            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 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
+              );
+            } 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.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 flags = cmpMeta.$flags$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  const scopeId2 = addStyle(
+    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta);
+  if (flags & 10 /* needsScopedEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -489,6 +757,7 @@ var convertToPrivate = (node) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  var _a, _b;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -535,6 +804,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
+    } else if (((_a = childRenderNode.$tag$) == null ? void 0 : _a.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+      const cmpMeta = getHostRef(childRenderNode.$elm$);
+      if (cmpMeta) {
+        const scopeId3 = getScopeId(
+          cmpMeta.$cmpMeta$);
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+        if (styleSheet) {
+          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        }
+      }
     }
     if (childRenderNode.$tag$ === "slot") {
       childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
@@ -550,7 +829,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
     if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
+      if (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
       }
       orgLocationNode.parentNode.removeChild(orgLocationNode);
@@ -558,7 +837,9 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
     }
-    plt.$orgLocNodes$.delete(orgLocationId);
+    if (orgLocationNode && !orgLocationNode["s-id"]) {
+      plt.$orgLocNodes$.delete(orgLocationId);
+    }
   }
   const hosts = [];
   const snLen = slottedNodes.length;
@@ -579,17 +860,22 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
+      }
       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];
+        if (!slottedItem.slot["s-cr"]) {
+          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);
+        if (((_b = slottedItem.node.parentElement) == null ? void 0 : _b.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+          slottedItem.node.removeAttribute("slot");
+        }
       }
     }
   }
@@ -598,25 +884,27 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
+  if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
       for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+        const node = shadowRootNodes[rnIdex];
+        if (node) {
+          shadowRoot.appendChild(node);
+        }
       }
       Array.from(hostElm.childNodes).forEach((node) => {
-        if (typeof node["s-sn"] !== "string") {
+        if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
           if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
             node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
             node.parentNode.removeChild(node);
           }
         }
       });
     }
   }
-  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -648,7 +936,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
-        if (scopeId2) {
+        if (scopeId2 && childIdSplt[0] === hostId) {
           node["s-si"] = scopeId2;
           childVNode.$attrs$.class += " " + scopeId2;
         }
@@ -778,7 +1066,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
   } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim() && !node["s-nr"]) {
       node.remove();
     }
   }
@@ -836,10 +1124,10 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
     }
-    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
+      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
     } else {
-      node.parentNode.insertBefore(childVNode.$elm$, node);
+      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
     node.remove();
@@ -854,8 +1142,8 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     if (shouldMove) {
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     }
-    childRenderNodes.push(childVNode);
   }
+  childRenderNodes.push(childVNode);
   slotNodes.push(childVNode);
   if (!parentVNode.$children$) {
     parentVNode.$children$ = [];
@@ -863,13 +1151,17 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   parentVNode.$children$[childVNode.$index$] = childVNode;
 }
 var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+  var _a, _b;
   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;
-  }
+  if (!slottedNode || ((_a = slottedNode.nodeValue) == null ? void 0 : _a.startsWith(SLOT_NODE_ID + "."))) return;
+  do {
+    if (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (!slottedNode["getAttribute"] || !slottedNode.getAttribute("slot")) && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */))) {
+      slottedNode["s-sn"] = slotName;
+      slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    }
+    slottedNode = slottedNode == null ? void 0 : slottedNode.nextSibling;
+  } while (slottedNode && !((_b = slottedNode.nodeValue) == null ? void 0 : _b.startsWith(SLOT_NODE_ID + ".")));
 };
 var findCorrespondingNode = (node, type) => {
   let sibling = node;
@@ -894,6 +1186,12 @@ var findCorrespondingNode = (node, type) => {
 var safeSelector = (selector) => {
   const placeholders = [];
   let index = 0;
+  selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
+    const replaceBy = `__part-${index}__`;
+    placeholders.push(keep);
+    index++;
+    return replaceBy;
+  });
   selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
     const replaceBy = `__ph-${index}__`;
     placeholders.push(keep);
@@ -913,6 +1211,7 @@ var safeSelector = (selector) => {
   return ss;
 };
 var restoreSafeSelector = (placeholders, content) => {
+  content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
   return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
 };
 var _polyfillHost = "-shadowcsshost";
@@ -925,9 +1224,18 @@ var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim"
 var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
 var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+var _safePartRe = /__part-(\d+)__/g;
 var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
 var _polyfillHostRe = /-shadowcsshost/gim;
-var createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<={.*))(${selector}\\b)`, "gim");
+var createSupportsRuleRe = (selector) => {
+  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
+    "g"
+  );
+};
 var _colonSlottedRe = createSupportsRuleRe("::slotted");
 var _colonHostRe = createSupportsRuleRe(":host");
 var _colonHostContextRe = createSupportsRuleRe(":host-context");
@@ -1002,7 +1310,16 @@ var escapeBlocks = (input) => {
   return strEscapedBlocks;
 };
 var insertPolyfillHostInCssText = (cssText) => {
+  const supportsBlocks = [];
+  cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
+    const placeholder = `__supports_${supportsBlocks.length}__`;
+    supportsBlocks.push(selectorContent);
+    return `@supports selector(${placeholder})`;
+  });
   cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
+  supportsBlocks.forEach((originalSelector, index) => {
+    cssText = cssText.replace(`__supports_${index}__`, originalSelector);
+  });
   return cssText;
 };
 var convertColonRule = (cssText, regExp, partReplacer) => {
@@ -1122,7 +1439,7 @@ var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
   let scopedSelector = "";
   let startIndex = 0;
   let res;
-  const sep = /( |>|\+|~(?!=))\s*/g;
+  const sep = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
   const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
   let shouldScope = !hasHost;
   while ((res = sep.exec(selector)) !== null) {
@@ -1134,7 +1451,7 @@ var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
     startIndex = sep.lastIndex;
   }
   const part = selector.substring(startIndex);
-  shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+  shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
   scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
   return restoreSafeSelector(safeContent.placeholders, scopedSelector);
 };
@@ -1191,6 +1508,36 @@ var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginal
 var replaceShadowCssHost = (cssText, hostScopeId) => {
   return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
 };
+var expandPartSelectors = (cssText) => {
+  const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
+  return processRules(cssText, (rule) => {
+    if (rule.selector[0] === "@") {
+      return rule;
+    }
+    const selectors = rule.selector.split(",").map((sel) => {
+      const out = [sel.trim()];
+      let m;
+      while ((m = partSelectorRe.exec(sel)) !== null) {
+        const before = m[1].trimEnd();
+        const partNames = m[2].trim().split(/\s+/);
+        const after = m[3] || "";
+        const partAttr = partNames.flatMap((p) => {
+          if (!rule.selector.includes(`[part~="${p}"]`)) {
+            return [`[part~="${p}"]`];
+          }
+          return [];
+        }).join("");
+        const expanded = `${before} ${partAttr}${after}`;
+        if (!!partAttr && expanded !== sel.trim()) {
+          out.push(expanded);
+        }
+      }
+      return out.join(", ");
+    });
+    rule.selector = selectors.join(", ");
+    return rule;
+  });
+};
 var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
   const hostScopeId = scopeId2 + "-h";
   const slotScopeId = scopeId2 + "-s";
@@ -1226,15 +1573,24 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
     const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
     cssText = cssText.replace(regex, slottedSelector.updatedSelector);
   });
+  cssText = expandPartSelectors(cssText);
   return cssText;
 };
-var parsePropertyValue = (propValue, propType) => {
+var parsePropertyValue = (propValue, propType, isFormAssociated) => {
+  if (typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+    propValue = deserializeProperty(propValue);
+    return propValue;
+  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
+      if (isFormAssociated && typeof propValue === "string") {
+        return propValue === "" || !!propValue;
+      } else {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
     }
     if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
     if (propType & 1 /* String */) {
       return String(propValue);
@@ -1243,7 +1599,10 @@ var parsePropertyValue = (propValue, propType) => {
   }
   return propValue;
 };
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
@@ -1264,94 +1623,6 @@ var emitEvent = (elm, 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);
-  if (!win.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
-  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}"]`) || win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if ((cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-            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 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } 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.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 flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
   if (oldValue === newValue) {
     return;
@@ -1362,12 +1633,13 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
     let newClasses = parseClassList(newValue);
-    if (elm["s-si"] && initialRender) {
-      newClasses.push(elm["s-si"]);
+    if ((elm["s-si"] || elm["s-sc"]) && initialRender) {
+      const scopeId2 = elm["s-sc"] || elm["s-si"];
+      newClasses.push(scopeId2);
       oldClasses.forEach((c) => {
-        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        if (c.startsWith(scopeId2)) newClasses.push(c);
       });
-      newClasses = [...new Set(newClasses)];
+      newClasses = [...new Set(newClasses)].filter((c) => c);
       classList.add(...newClasses);
     } else {
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
@@ -1799,6 +2071,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       !isInitialRender && BUILD.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) {
+      newVNode2.$children$ = oldChildren;
     }
     if (isSvgMode && tag === "svg") {
       isSvgMode = false;
@@ -1899,13 +2173,16 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const isHostElement = isHost(renderFnResults);
+  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
   }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
@@ -2013,6 +2290,12 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
   return writeTask(dispatch) ;
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
@@ -2027,10 +2310,15 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
+      if (hostRef.$fetchedCbList$.length) {
+        hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
     }
     maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
@@ -2150,10 +2438,16 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var appDidLoad = (who) => {
+  var _a;
   if (BUILD.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
+  {
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
+  }
 };
 var safeCall = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
@@ -2186,6 +2480,9 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return;
+  }
   if (!hostRef) {
     throw new Error(
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
@@ -2195,7 +2492,11 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
-  newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+  newVal = parsePropertyValue(
+    newVal,
+    cmpMeta.$members$[propName][0],
+    !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+  );
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -2229,9 +2530,17 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
@@ -2259,14 +2568,21 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
+            if (!ref) {
+              return;
+            }
             if (origSetter) {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
-              origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
+              origSetter.apply(this, [
+                parsePropertyValue(
+                  newValue,
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                )
+              ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
               return;
@@ -2306,6 +2622,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr.isProxied) {
         {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta);
         Cstr.isProxied = true;
@@ -2340,8 +2658,12 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const scopeId2 = getScopeId(cmpMeta);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
-          style = scopeCss(style, scopeId2);
+        {
+          if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+            style = scopeCss(style, scopeId2);
+          } else if (needsScopedSSR()) {
+            style = expandPartSelectors(style);
+          }
         }
         registerStyle(scopeId2, style);
         endRegisterStyles();
@@ -2366,6 +2688,9 @@ var fireConnectedCallback = (instance, elm) => {
 var connectedCallback = (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    if (!hostRef) {
+      return;
+    }
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
@@ -2623,8 +2948,13 @@ var hAsync = (nodeName, vnodeData, ...children) => {
   }
   return h(nodeName, vnodeData);
 };
+
+// src/hydrate/platform/proxy-host-element.ts
 function proxyHostElement(elm, cstr) {
   const cmpMeta = cstr.cmpMeta;
+  cmpMeta.$watchers$ = cmpMeta.$watchers$ || cstr.watchers;
+  cmpMeta.$deserializers$ = cmpMeta.$deserializers$ || cstr.deserializers;
+  cmpMeta.$serializers$ = cmpMeta.$serializers$ || cstr.serializers;
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
   }
@@ -2632,32 +2962,30 @@ function proxyHostElement(elm, cstr) {
     elm.forceUpdate = forceUpdate2;
   }
   if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-    {
-      elm.attachShadow({ mode: "open" });
-    }
+    createShadowRoot.call(elm, cmpMeta);
   }
   if (cmpMeta.$members$ != null) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-      var _a;
+      var _a, _b;
       if (memberFlags & 31 /* Prop */) {
         const attributeName = metaAttributeName || memberName;
-        let attrValue = elm.getAttribute(attributeName);
-        if ((attrValue == null ? void 0 : attrValue.startsWith("{")) && attrValue.endsWith("}") || (attrValue == null ? void 0 : attrValue.startsWith("[")) && attrValue.endsWith("]")) {
-          try {
-            attrValue = JSON.parse(attrValue);
-          } catch (e) {
-          }
-        }
-        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
+        const attrValue = elm.getAttribute(attributeName);
+        const propValue = elm[memberName];
         let attrPropVal;
+        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
         if (attrValue != null) {
-          attrPropVal = parsePropertyValue(attrValue, memberFlags);
+          if ((_a = cmpMeta.$deserializers$) == null ? void 0 : _a[memberName]) {
+            for (const methodName of cmpMeta.$deserializers$[memberName]) {
+              attrPropVal = cstr.prototype[methodName](attrValue, memberName);
+            }
+          } else {
+            attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & 64 /* formAssociated */));
+          }
         }
-        const ownValue = elm[memberName];
-        if (ownValue !== void 0) {
-          attrPropVal = ownValue;
+        if (propValue !== void 0) {
+          attrPropVal = propValue;
           delete elm[memberName];
         }
         if (attrPropVal !== void 0) {
@@ -2665,7 +2993,7 @@ function proxyHostElement(elm, cstr) {
             origSetter.apply(elm, [attrPropVal]);
             attrPropVal = origGetter ? origGetter.apply(elm) : attrPropVal;
           }
-          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, attrPropVal);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
         }
         const getterSetterDescriptor = {
           get: function() {
@@ -2679,21 +3007,18 @@ function proxyHostElement(elm, cstr) {
         };
         Object.defineProperty(elm, memberName, getterSetterDescriptor);
         Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
-        if (!cstr.prototype.__stencilAugmented) {
-          Object.defineProperty(cstr.prototype, memberName, {
-            get: function() {
-              var _a2;
-              const ref = getHostRef(this);
-              const attrPropVal2 = (_a2 = ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
-              if (origGetter && attrPropVal2 === void 0 && !getValue(this, memberName)) {
-                setValue(this, memberName, origGetter.apply(this), cmpMeta);
-              }
-              return attrPropVal2 !== void 0 ? attrPropVal2 : origGetter ? origGetter.apply(this) : getValue(this, memberName);
-            },
-            configurable: true,
-            enumerable: true
-          });
-        }
+        hostRef.$fetchedCbList$.push(() => {
+          var _a2;
+          if (!((_a2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a2.has(memberName))) {
+            setValue(
+              elm,
+              memberName,
+              attrPropVal !== void 0 ? attrPropVal : hostRef.$lazyInstance$[memberName],
+              cmpMeta
+            );
+          }
+          Object.defineProperty(hostRef.$lazyInstance$, memberName, getterSetterDescriptor);
+        });
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
@@ -2709,7 +3034,6 @@ function proxyHostElement(elm, cstr) {
         });
       }
     });
-    cstr.prototype.__stencilAugmented = true;
   }
 }
 function componentOnReady() {
@@ -2727,6 +3051,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   const orgDocumentCreateElement = win2.document.createElement;
   const orgDocumentCreateElementNS = win2.document.createElementNS;
   const resolved2 = Promise.resolve();
+  setScopedSSR(opts);
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
@@ -2834,13 +3159,16 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     if (cmpMeta != null) {
       waitingElements.add(elm);
       const hostRef = getHostRef(this);
+      if (!hostRef) {
+        return;
+      }
       addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
         results.hydratedCount++;
         const ref = getHostRef(elm);
-        const modeName = !ref.$modeName$ ? "$" : ref.$modeName$;
+        const modeName = !(ref == null ? void 0 : ref.$modeName$) ? "$" : ref == null ? void 0 : ref.$modeName$;
         if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) {
           results.components.push({
             tag: tagName,
@@ -3055,8 +3383,12 @@ var getHostRef = (ref) => {
   return void 0;
 };
 var registerInstance = (lazyInstance, hostRef) => {
+  if (!hostRef) return void 0;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
+  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
+    reWireGetterSetter(lazyInstance, hostRef);
+  }
   return hostRef;
 };
 var registerHost = (elm, cmpMeta) => {
@@ -3065,8 +3397,10 @@ var registerHost = (elm, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $hostElement$: elm,
     $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map(),
     $renderCount$: 0
   };
+  hostRef.$fetchedCbList$ = [];
   hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
@@ -3075,6 +3409,11 @@ var registerHost = (elm, cmpMeta) => {
   return hostRef;
 };
 var styles = /* @__PURE__ */ new Map();
+var setScopedSSR = (opts) => {
+  scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
+};
+var needsScopedSSR = () => scopedSSR;
+var scopedSSR = false;
 
 const pdsModalCss$1 = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
 
@@ -3161,7 +3500,7 @@ class MockPdsModal {
     get el() { return getElement(this); }
     static get style() { return pdsModalCss$1; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "mock-pds-modal",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -3178,7 +3517,7 @@ class MockPdsModal {
     }; }
 }
 
-/* pds-icons v9.9.0, ES Modules */
+/* pds-icons v9.11.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
@@ -3235,7 +3574,7 @@ class PdsAccordion {
     }; }
     static get style() { return pdsAccordionCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-accordion",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -3307,7 +3646,7 @@ class PdsAlert {
     get el() { return getElement(this); }
     static get style() { return pdsAlertTokensCss + pdsAlertCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-alert",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -3412,7 +3751,7 @@ class PdsAvatar {
     }
     static get style() { return pdsAvatarCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-avatar",
         "$members$": {
             "alt": [1],
@@ -3639,7 +3978,7 @@ class PdsBox {
     }
     static get style() { return pdsBoxCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "pds-box",
         "$members$": {
             "alignItems": [1, "align-items"],
@@ -3767,7 +4106,7 @@ class PdsBox {
     }; }
 }
 
-const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--filter{--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-white);--color-border-default:transparent;--color-border-hover:transparent;--color-border-focus:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-hover:var(--pine-color-text-hover);--color-text-disabled:var(--pine-color-text-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:hover{color:var(--color-text-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--color-background-default:transparent;--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:transparent;--color-border-default:transparent;--color-border-hover:var(--pine-color-grey-100);--color-border-disabled:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-white);--color-border-default:transparent;--color-border-hover:transparent;--color-border-focus:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-hover:var(--pine-color-text-hover);--color-text-disabled:var(--pine-color-text-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:hover{color:var(--color-text-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}";
 
 /**
  * @part button - Exposes the button element for styling.
@@ -3815,6 +4154,11 @@ class PdsButton {
          * @defaultValue button
          */
         this.type = 'button';
+        /**
+         * Sets the size of the button.
+         * @defaultValue default
+         */
+        this.size = 'default';
         /**
          * Sets the style variant of the button.
          * @defaultValue primary
@@ -3897,6 +4241,9 @@ class PdsButton {
         if (this.variant) {
             classNames.push('pds-button--' + this.variant);
         }
+        if (this.size && this.size !== 'default') {
+            classNames.push('pds-button--' + this.size);
+        }
         if (this.iconOnly) {
             classNames.push('pds-button--icon-only');
         }
@@ -3956,7 +4303,7 @@ class PdsButton {
     get el() { return getElement(this); }
     static get style() { return pdsButtonCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-button",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -3970,6 +4317,7 @@ class PdsButton {
             "target": [1],
             "type": [1],
             "value": [1],
+            "size": [1],
             "variant": [1]
         },
         "$listeners$": [[16, "keydown", "handleFormKeyDown"]],
@@ -4205,7 +4553,7 @@ class PdsCheckbox {
     }; }
     static get style() { return labelCss$5 + pdsCheckboxCss; }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-checkbox",
         "$members$": {
             "checked": [1028],
@@ -4299,7 +4647,7 @@ class PdsChip {
     }
     static get style() { return pdsChipTokensCss + pdsChipCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-chip",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -8187,7 +8535,7 @@ class PdsCombobox {
     }; }
     static get style() { return pdsComboboxCss; }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-combobox",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -8280,7 +8628,7 @@ class PdsCopytext {
     }
     static get style() { return pdsCopytextCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-copytext",
         "$members$": {
             "border": [516],
@@ -8322,7 +8670,7 @@ class PdsDivider {
     }
     static get style() { return pdsDividerCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-divider",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -8578,12 +8926,12 @@ class PdsDropdownMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '1e4384c8ab3fb3ca73221dd7a7f156846e9b8274', id: this.componentId }, hAsync("slot", { key: '0b3b532a025580b36bbe06f86bdb776d99e0c896', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '20229e833fa45ff5ce730d3a38e8faab582335c6', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: '47cad78c2e1b5150be13a399820fe64d09955e9d', onSlotchange: this.handleSlotChange }))));
+        return (hAsync(Host, { key: 'c2f9a74589c43a84f1e07a38748453bbc6cd7c8d', id: this.componentId }, hAsync("slot", { key: 'b3cd9b14b17f9f34b524f459c06506aa551602d2', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '3657c4884b745ba3e0a0f04030e46a004fcf00ac', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'fb77e6214ecd67e83babee0404bbf052c8d27714', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-dropdown-menu",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -8669,7 +9017,7 @@ class PdsDropdownMenuItem {
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuItemCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-dropdown-menu-item",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -8701,7 +9049,7 @@ class PdsDropdownMenuSeparator {
     }
     static get style() { return pdsDropdownMenuSeparatorCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-dropdown-menu-separator",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -9205,7 +9553,7 @@ class PdsFilter {
     get el() { return getElement(this); }
     static get style() { return pdsFilterCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-filter",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -9236,7 +9584,7 @@ class PdsFilters {
     }
     static get style() { return pdsFiltersCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-filters",
         "$members$": {
             "componentId": [1, "component-id"]
@@ -9649,7 +9997,7 @@ class PdsIcon {
     }; }
     static get style() { return pdsIconCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-icon",
         "$members$": {
             "color": [1],
@@ -9701,7 +10049,7 @@ class PdsImage {
     }
     static get style() { return pdsImageCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-image",
         "$members$": {
             "alt": [1],
@@ -9991,7 +10339,7 @@ class PdsInput {
     }; }
     static get style() { return pdsInputTokensCss$1 + (labelCss$4 + pdsInputCss); }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-input",
         "$members$": {
             "autocomplete": [1],
@@ -10083,7 +10431,7 @@ class PdsLink {
     }
     static get style() { return pdsLinkCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-link",
         "$members$": {
             "color": [1],
@@ -10153,7 +10501,7 @@ class PdsLoader {
     }
     static get style() { return pdsLoaderCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-loader",
         "$members$": {
             "isLoading": [4, "is-loading"],
@@ -10420,7 +10768,7 @@ class PdsModal {
     }; }
     static get style() { return pdsModalCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-modal",
         "$members$": {
             "backdropDismiss": [4, "backdrop-dismiss"],
@@ -10631,15 +10979,15 @@ class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (hAsync(Host, { key: '5357ae43a3c7e6922a182a00ddf0241775d5a2a2' }, hAsync("div", { key: '100bf34dbc72b4d7ec7de8dfe64aaa617f840a70', class: {
+        return (hAsync(Host, { key: '11f1dba4ecce4a2dbf5afcd484a545a68559b0dd' }, hAsync("div", { key: '09af48c8b62dbd0f0b418e9b15175fd9f4409636', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '3f4a2281f3e1243a86dfb7ac496e6e190c1df548' }))));
+            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'd738f5346e407ca6a5d92ff81d10387f7edc03bf' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalContentCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-modal-content",
         "$members$": {
             "border": [513],
@@ -10662,7 +11010,7 @@ class PdsModalFooter {
     }
     static get style() { return pdsModalFooterCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-modal-footer",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -10682,7 +11030,7 @@ class PdsModalHeader {
     }
     static get style() { return pdsModalHeaderCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-modal-header",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -10691,8 +11039,12 @@ class PdsModalHeader {
     }; }
 }
 
-const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host [popover]:popover-open:not(.pds-popover--positioned){visibility:hidden}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";
+const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}";
 
+/**
+ * @slot trigger - The trigger element for the popover
+ * @slot (default) - The content to display inside the popover
+ */
 class PdsPopover {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -10707,6 +11059,31 @@ class PdsPopover {
          * Tracks if the component is still mounted to prevent memory leaks
          */
         this.isComponentMounted = true;
+        /**
+         * Reference to the trigger element
+         */
+        this.triggerEl = null;
+        /**
+         * Portal element rendered in document.body
+         */
+        this.portalEl = null;
+        /**
+         * Guard to prevent repositioning loops
+         */
+        this.isRepositioning = false;
+        /**
+         * Debounce timers for performance optimization
+         */
+        this.scrollDebounceTimer = null;
+        this.resizeDebounceTimer = null;
+        /**
+         * Track moved nodes and their placeholders for restoration
+         */
+        this.movedNodes = [];
+        /**
+         * Timestamp when popover was opened (for preventing immediate close)
+         */
+        this.openTimestamp = 0;
         /**
          * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
          * @defaultValue "show"
@@ -10727,124 +11104,437 @@ class PdsPopover {
          * @defaultValue "right"
          */
         this.placement = 'right';
+        /**
+         * Handles changes to the trigger slot
+         */
+        this.handleTriggerSlotChange = (event) => {
+            const slot = event.target;
+            const assignedElements = slot.assignedElements();
+            // Clean up previous trigger's event listener if it exists
+            if (this.triggerEl != null) {
+                this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+            }
+            if (assignedElements.length > 0) {
+                // Use the first assigned element as the trigger
+                this.triggerEl = assignedElements[0];
+                // Set ARIA attributes to establish relationship between trigger and popover
+                // This mirrors the native Popover API's accessibility behavior
+                if (this.portalEl) {
+                    this.triggerEl.setAttribute('aria-expanded', String(this.active));
+                    this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
+                }
+                // Attach click listener to handle popover visibility
+                this.triggerEl.addEventListener('click', this.handleTriggerClick);
+            }
+            else {
+                this.triggerEl = null;
+            }
+        };
+        /**
+         * Handles changes to the default slot (popover content)
+         * When the popover is active, re-sync content with portal to handle dynamic updates
+         */
+        this.handleContentSlotChange = () => {
+            if (!this.active)
+                return;
+            this.updatePortalContent();
+        };
+        /**
+         * Handles clicks on the trigger element
+         */
+        this.handleTriggerClick = (event) => {
+            // Only prevent default if the trigger is not an anchor with href
+            // This allows link navigation while still controlling popover visibility
+            const composedPath = event.composedPath();
+            const anchorWithHref = composedPath.find((el) => el instanceof HTMLAnchorElement && el.href);
+            if (!anchorWithHref) {
+                event.preventDefault();
+            }
+            // Execute the appropriate action based on popoverTargetAction prop
+            switch (this.popoverTargetAction) {
+                case 'show':
+                    this.show();
+                    break;
+                case 'hide':
+                    this.hide();
+                    break;
+                case 'toggle':
+                default:
+                    this.toggle();
+                    break;
+            }
+        };
     }
     componentDidLoad() {
         var _a;
-        // Attach toggle event listener to the popover element
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null) {
-            this.boundToggleHandler = this.handleToggle.bind(this);
-            popoverEl.addEventListener('toggle', this.boundToggleHandler);
+        // Bind event handlers for cleanup
+        this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
+        this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
+        this.boundScrollHandler = this.handleScroll.bind(this);
+        this.boundResizeHandler = this.handleResize.bind(this);
+        // Create portal element
+        this.createPortal();
+        // Initialize trigger element by calling slot change handler
+        // This is a fallback for environments where slot change might not fire reliably
+        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+        if (triggerSlot && this.triggerEl == null) {
+            const CustomEvent = (typeof window !== 'undefined' ? window.Event : global.Event);
+            const slotChangeEvent = new CustomEvent('slotchange');
+            Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });
+            this.handleTriggerSlotChange(slotChangeEvent);
         }
     }
     disconnectedCallback() {
-        var _a;
         this.isComponentMounted = false;
-        // Clean up event listener
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && this.boundToggleHandler != null) {
-            popoverEl.removeEventListener('toggle', this.boundToggleHandler);
+        // Clean up trigger click event listener
+        if (this.triggerEl != null) {
+            this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+        }
+        // Clean up all event listeners
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        // Clear any pending debounce timers
+        this.clearDebounceTimers();
+        // Remove portal from DOM
+        this.removePortal();
+    }
+    /**
+     * Clears any pending debounce timers
+     */
+    clearDebounceTimers() {
+        if (this.scrollDebounceTimer !== null) {
+            clearTimeout(this.scrollDebounceTimer);
+            this.scrollDebounceTimer = null;
         }
+        if (this.resizeDebounceTimer !== null) {
+            clearTimeout(this.resizeDebounceTimer);
+            this.resizeDebounceTimer = null;
+        }
+    }
+    createPortal() {
+        if (this.portalEl !== null)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'pds-popover';
+        // Apply all styles inline since portal is outside shadow DOM
+        this.portalEl.style.position = 'fixed';
+        this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
+        this.portalEl.style.maxWidth = `${this.maxWidth}px`;
+        this.portalEl.style.display = 'none';
+        this.portalEl.style.opacity = '0';
+        this.portalEl.style.visibility = 'hidden';
+        this.portalEl.style.backgroundColor = 'var(--pine-color-background-container)';
+        this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
+        this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
+        this.portalEl.style.margin = 'var(--pine-dimension-none)';
+        this.portalEl.style.padding = 'var(--pine-dimension-md)';
+        // Generate unique ID
+        if (!this.componentId) {
+            const suffix = PdsPopover.instanceCounter++;
+            this.portalEl.id = `pds-popover-portal-${suffix}`;
+        }
+        else {
+            this.portalEl.id = `${this.componentId}-portal`;
+        }
+        // Add accessibility attributes for screen readers
+        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
+        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
+        // Append to body
+        document.body.appendChild(this.portalEl);
+        // Add global focus styles to match Pine design system
+        // This is done after appending to ensure it's part of the document and can access CSS variables
+        this.addPortalFocusStyles();
     }
     /**
-     * Opens the popover programmatically
+     * Adds Pine design system focus styles to the portal element
+     * Uses CSS variables from Pine's design tokens
      */
-    async show() {
+    addPortalFocusStyles() {
+        if (!this.portalEl)
+            return;
+        const portalId = this.portalEl.id;
+        // Check if style element already exists
+        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+        if (existingStyle)
+            return;
+        // Create style element with Pine's focus ring styles
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-pds-popover-focus', portalId);
+        styleEl.textContent = `
+      #${portalId}:focus {
+        outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
+        outline-offset: var(--pine-border-width, 1px);
+      }
+      #${portalId}:focus:not(:focus-visible) {
+        outline: none;
+      }
+    `;
+        document.head.appendChild(styleEl);
+    }
+    /**
+     * Moves slot content into portal (preserves event handlers and component instances)
+     */
+    updatePortalContent() {
         var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.showPopover === 'function') {
-            try {
-                popoverEl.showPopover();
+        if (!this.portalEl)
+            return;
+        const contentSlotWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-popover__content-slot-wrapper');
+        const defaultSlot = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('slot');
+        if (defaultSlot) {
+            const assignedNodes = defaultSlot.assignedNodes();
+            // Move each node into portal and track with placeholder for restoration
+            assignedNodes.forEach(node => {
+                var _a;
+                // Skip if node is already in the portal or already tracked
+                const isAlreadyInPortal = node.parentNode === this.portalEl;
+                const isAlreadyTracked = this.movedNodes.some(moved => moved.node === node);
+                if (isAlreadyInPortal || isAlreadyTracked) {
+                    return;
+                }
+                // Create a placeholder comment to mark original position
+                const placeholder = document.createComment('pds-popover-placeholder');
+                // Insert placeholder before moving the node
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(placeholder, node);
+                // Move the actual node to portal (preserves all handlers and state)
+                this.portalEl.appendChild(node);
+                // Track for restoration
+                this.movedNodes.push({ node, placeholder });
+            });
+        }
+    }
+    /**
+     * Restores moved nodes back to their original positions
+     */
+    restorePortalContent() {
+        // Restore each moved node to its original position
+        this.movedNodes.forEach(({ node, placeholder }) => {
+            if (placeholder.parentNode) {
+                placeholder.parentNode.insertBefore(node, placeholder);
+                placeholder.parentNode.removeChild(placeholder);
             }
-            catch (e) {
-                // Popover might already be open
-                console.warn('Failed to show popover:', e);
+        });
+        // Clear tracking array
+        this.movedNodes = [];
+    }
+    removePortal() {
+        if (this.portalEl) {
+            // Remove the portal element from DOM
+            if (this.portalEl.parentNode) {
+                this.portalEl.parentNode.removeChild(this.portalEl);
+            }
+            // Remove the associated focus style element
+            const portalId = this.portalEl.id;
+            const styleEl = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+            if (styleEl && styleEl.parentNode) {
+                styleEl.parentNode.removeChild(styleEl);
             }
         }
+        this.portalEl = null;
+    }
+    /**
+     * Opens the popover programmatically
+     */
+    async show() {
+        if (this.active || !this.portalEl)
+            return;
+        this.active = true;
+        // Record open timestamp to prevent immediate close from opening click
+        this.openTimestamp = Date.now();
+        // Update ARIA expanded state on trigger
+        if (this.triggerEl) {
+            this.triggerEl.setAttribute('aria-expanded', 'true');
+        }
+        // Update portal content with latest slot content
+        this.updatePortalContent();
+        // Show portal
+        this.portalEl.style.display = 'block';
+        this.portalEl.style.opacity = '1';
+        this.portalEl.style.visibility = 'visible';
+        // Position the popover
+        requestAnimationFrame(() => {
+            if (!this.isComponentMounted)
+                return;
+            this.handlePopoverPositioning();
+        });
+        // Add scroll and resize listeners for repositioning (always)
+        this.addScrollAndResizeListeners();
+        // Add document listeners for light dismiss and escape key (auto type only)
+        if (this.popoverType === 'auto') {
+            this.addLightDismissListeners();
+        }
+        // Emit open event
+        this.pdsPopoverOpen.emit({
+            componentId: this.componentId,
+            popoverType: this.popoverType,
+        });
     }
     /**
      * Closes the popover programmatically
      */
     async hide() {
-        var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.hidePopover === 'function') {
-            try {
-                popoverEl.hidePopover();
-            }
-            catch (e) {
-                // Popover might already be closed
-                console.warn('Failed to hide popover:', e);
-            }
+        if (!this.active || !this.portalEl)
+            return;
+        this.active = false;
+        // Update ARIA expanded state on trigger
+        if (this.triggerEl) {
+            this.triggerEl.setAttribute('aria-expanded', 'false');
         }
+        // Restore content back to original slot positions
+        this.restorePortalContent();
+        // Hide portal
+        this.portalEl.style.display = 'none';
+        this.portalEl.style.opacity = '0';
+        this.portalEl.style.visibility = 'hidden';
+        // Return focus to trigger for keyboard accessibility
+        // This mirrors native Popover API behavior on close
+        this.returnFocusToTrigger();
+        // Remove all listeners
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        // Clear any pending timers
+        this.clearDebounceTimers();
+        // Emit close event
+        this.pdsPopoverClose.emit({
+            componentId: this.componentId,
+            popoverType: this.popoverType,
+        });
     }
     /**
      * Toggles the popover open/closed state programmatically
      */
     async toggle() {
-        var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.togglePopover === 'function') {
-            try {
-                popoverEl.togglePopover();
-            }
-            catch (e) {
-                console.warn('Failed to toggle popover:', e);
-            }
+        if (this.active) {
+            this.hide();
+        }
+        else {
+            this.show();
         }
     }
-    handleToggle(event) {
-        var _a;
-        const toggleEvent = event;
-        // Prepare event detail
-        const eventDetail = {
-            componentId: this.componentId,
-            popoverType: this.popoverType,
-            text: this.text,
-        };
-        // Update internal state based on native popover state
-        if (toggleEvent.newState === 'open') {
-            this.active = true;
-            const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-            // Remove positioned class to hide popover via CSS
-            if (popoverEl != null) {
-                popoverEl.classList.remove('pds-popover--positioned');
-            }
-            // Position after the browser has rendered the popover, then show it
-            requestAnimationFrame(() => {
-                // Prevent memory leak if component unmounts during animation frame
-                if (!this.isComponentMounted)
-                    return;
-                this.handlePopoverPositioning();
-                if (popoverEl != null) {
-                    popoverEl.classList.add('pds-popover--positioned');
-                }
-            });
-            this.pdsPopoverOpen.emit(eventDetail);
+    /**
+     * Adds light dismiss listeners (click outside and escape key)
+     */
+    addLightDismissListeners() {
+        // Add listeners immediately - handleClickOutside will check timestamp
+        document.addEventListener('click', this.boundClickOutsideHandler, true);
+        document.addEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    /**
+     * Removes light dismiss listeners
+     */
+    removeLightDismissListeners() {
+        document.removeEventListener('click', this.boundClickOutsideHandler, true);
+        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    /**
+     * Adds scroll and resize listeners for repositioning
+     */
+    addScrollAndResizeListeners() {
+        window.addEventListener('scroll', this.boundScrollHandler, true);
+        window.addEventListener('resize', this.boundResizeHandler);
+    }
+    /**
+     * Removes scroll and resize listeners
+     */
+    removeScrollAndResizeListeners() {
+        window.removeEventListener('scroll', this.boundScrollHandler, true);
+        window.removeEventListener('resize', this.boundResizeHandler);
+    }
+    /**
+     * Handles clicks outside the popover for light dismiss (auto type only)
+     */
+    handleClickOutside(event) {
+        var _a, _b;
+        // Ignore events that occurred at or before the popover opened
+        // This prevents the opening click from immediately closing the popover
+        // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
+        // by calculating: currentEpochTime - (currentPerfTime - eventPerfTime)
+        const eventTime = event.timeStamp
+            ? Date.now() - (performance.now() - event.timeStamp)
+            : Date.now();
+        if (eventTime <= this.openTimestamp) {
+            return;
         }
-        else if (toggleEvent.newState === 'closed') {
-            this.active = false;
-            this.pdsPopoverClose.emit(eventDetail);
+        const target = event.target;
+        // Check if click is outside both the popover portal and the trigger
+        const clickedInsidePopover = (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.contains(target);
+        const clickedInsideTrigger = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.contains(target);
+        if (!clickedInsidePopover && !clickedInsideTrigger) {
+            this.hide();
         }
     }
+    /**
+     * Returns focus to the trigger element with visible focus indicator
+     * This ensures focus rings/outlines are shown as they would be with keyboard navigation
+     */
+    returnFocusToTrigger() {
+        if (!this.triggerEl)
+            return;
+        // Focus immediately while still in keyboard event context
+        // This ensures the browser treats it as keyboard-initiated and shows focus ring
+        this.triggerEl.focus({ preventScroll: true });
+    }
+    /**
+     * Handles escape key press to close the popover
+     * Mirrors native Popover API: Escape closes and returns focus to trigger
+     */
+    handleEscapeKey(event) {
+        if (event.key === 'Escape') {
+            // Prevent default Escape behavior and stop propagation
+            // This mirrors native Popover API which handles Escape exclusively
+            event.preventDefault();
+            event.stopPropagation();
+            // Close popover and return focus to trigger
+            this.hide();
+        }
+    }
+    /**
+     * Handles scroll events to reposition the popover (debounced for performance)
+     */
     handleScroll() {
-        var _a;
-        // Only reposition if the popover is actually open
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && this.active === true) {
+        if (!this.active)
+            return;
+        if (this.scrollDebounceTimer !== null) {
+            clearTimeout(this.scrollDebounceTimer);
+        }
+        this.scrollDebounceTimer = setTimeout(() => {
             this.handlePopoverPositioning();
+            this.scrollDebounceTimer = null;
+        }, 10); // 10ms debounce for smooth repositioning
+    }
+    /**
+     * Handles resize events to reposition the popover (debounced for performance)
+     */
+    handleResize() {
+        if (!this.active)
+            return;
+        if (this.resizeDebounceTimer !== null) {
+            clearTimeout(this.resizeDebounceTimer);
         }
+        this.resizeDebounceTimer = setTimeout(() => {
+            this.handlePopoverPositioning();
+            this.resizeDebounceTimer = null;
+        }, 100); // 100ms debounce for resize
     }
+    /**
+     * Positions the popover relative to its trigger element
+     */
     handlePopoverPositioning() {
-        const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
-        const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
-        if (triggerEl == null || popoverEl == null)
+        // Prevent repositioning loops
+        if (this.isRepositioning) {
+            return;
+        }
+        this.isRepositioning = true;
+        if (this.triggerEl == null || this.portalEl == null) {
+            this.isRepositioning = false;
             return;
-        // Cast to HTMLElement after null check for proper typing
-        const triggerElement = triggerEl;
-        const popoverElement = popoverEl;
-        const triggerRect = triggerElement.getBoundingClientRect();
-        const popoverRect = popoverElement.getBoundingClientRect();
+        }
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.portalEl.getBoundingClientRect();
+        // Safety check: ensure trigger has valid dimensions (is rendered and visible)
+        if (triggerRect.width === 0 || triggerRect.height === 0) {
+            this.isRepositioning = false;
+            return;
+        }
         let top = 0;
         let left = 0;
         const offset = 8;
@@ -10898,22 +11588,25 @@ class PdsPopover {
                 left = triggerRect.left - popoverRect.width - offset;
                 break;
         }
-        popoverElement.style.top = `${top}px`;
-        popoverElement.style.left = `${left}px`;
+        this.portalEl.style.top = `${top}px`;
+        this.portalEl.style.left = `${left}px`;
+        // Reset the repositioning guard after a short delay
+        setTimeout(() => {
+            this.isRepositioning = false;
+        }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (hAsync(Host, { key: 'c3da1b2ab23b4678aeb2f7fdfe59383c1c5e6766' }, hAsync("button", { key: 'd426d0c3145820c161858123cb71cdf92a6da3f6', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction }, this.text), hAsync("div", { key: 'aad97aedfc716085d1e7609649cc7aaeb7de7358', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, hAsync("slot", { key: '1b5dde4a0643ee6dbdf4116cc74fff8b188e498b' }))));
+        return (hAsync(Host, { key: 'f77eaf0e122faeb6cd3e6bd55313498afb0039b4', id: this.componentId }, hAsync("span", { key: '6a44717df3ed98a600756a01528cb1139478d0d3', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '7c535ad2329988da7166f4fa669266fe31ff3dfa', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: 'bd387d0e42d90f7339645c47f53b73bc0e345b7d', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '98bd73611af2ecf0facdc77949a68db2106a4f12', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsPopoverCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-popover",
         "$members$": {
             "popoverTargetAction": [1, "popover-target-action"],
             "popoverType": [1, "popover-type"],
             "componentId": [1, "component-id"],
-            "text": [1],
             "maxWidth": [2, "max-width"],
             "placement": [513],
             "active": [32],
@@ -10921,11 +11614,15 @@ class PdsPopover {
             "hide": [64],
             "toggle": [64]
         },
-        "$listeners$": [[11, "scroll", "handleScroll"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["placement", "placement"]]
     }; }
 }
+/**
+ * Instance counter for unique IDs
+ */
+PdsPopover.instanceCounter = 0;
 
 const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-brand);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";
 
@@ -10949,11 +11646,11 @@ class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (hAsync(Host, { key: '4b85286ee1fcc7ae77f733b915a996bb82aecb5b', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: 'ea3dfbafae2d416aac9903ec50dfade77c315e05', class: "pds-progress" }, hAsync("label", { key: '3ece69ae8b90e968d7f86b986faee633d7802a0b', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: '68beb43763d001495159e253562b0934521072d9', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '8480b66191aec536b0c2c588e71e5c568f5d0eeb', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (hAsync(Host, { key: '1d0872d18cc7c89d0f4c2b1690ac7a09801129ae', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: '556576ec3925f99d1104e9fe7709d5f3a756a8d6', class: "pds-progress" }, hAsync("label", { key: 'eca8e33f036dc1a17175fc2db7dde7be947aadab', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'b0c21fbb91236684e5351f5622db54ef54716dc8', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '5eec8cc0979d86e2740f21a95c64a7f945f4c84a', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get style() { return pdsProgressCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-progress",
         "$members$": {
             "animated": [4],
@@ -10983,11 +11680,11 @@ class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (hAsync(Host, { key: '4ff2ed5a1b7e551b6c4d86fb43fa64bc83b4e785', id: this.componentId }, hAsync("pds-box", { key: '0420487b64550d42621b9548e67c3a79e14b4c91', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: 'dc8e675839b1f7a6fbce5c7fc10ece743f4a1905', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '9b01e2e02d26f8e7629612c617405b9ce7e5397b' }))));
+        return (hAsync(Host, { key: '9f1076beddaabaf20026bde9381f5fc484289a84', id: this.componentId }, hAsync("pds-box", { key: '7be27ac25227ad3a1222b37a11b1932a9d0cce81', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '898a412a10fc25ed7ad0b4ec4241bdc489d99784', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: 'f51046da5cdb725605cac3302996f4828b9f9958' }))));
     }
     static get style() { return pdsPropertyCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-property",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -11079,16 +11776,16 @@ class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '714cf76fc30ab26b58523c6d802650a12de9c01a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: 'fc5deb9d38f9d2cc19a793dc32c46d88c9831482', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '5ec06b8b4e017027a3fe20cef0241a612abec196', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: 'f7bc6d0bd0759a833a668499039ba97a10bf18ec', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '771d1a284a0f24f204691c04addc7120d60c7a8c', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '629e33e9c80a6dc3af11e471d4342b4f992e0084', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (hAsync(Host, { key: 'edf86e2d9070289457c0256e1dbf7a5febdbc386', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: 'fddaf8db228e2e4a2b00ded0fe9afba80c876503', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: '2a5dbf40e955d039f6618fe9fa7e345ad5b6548d', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (hAsync(Host, { key: '706822a4f2b85462533dedc7c204679272537c2d', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: 'cc19b9c47bc9b3c38aa322754ff9bf51f6e75d76', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'cf4fe8dbdc464cb0ad39cafb21e67e9e184a2e4f', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
     static get style() { return labelCss$3 + pdsRadioCss; }
     static get cmpMeta() { return {
-        "$flags$": 6,
+        "$flags$": 262,
         "$tagName$": "pds-radio",
         "$members$": {
             "checked": [4],
@@ -11170,11 +11867,11 @@ class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return hAsync(Host, { key: '8e3f5095c33ca22b26dc2cd328ec84663e3bc46b', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return hAsync(Host, { key: 'a4df5b098252089e69c7da5f329df4223cc57d81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get style() { return pdsRowCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "pds-row",
         "$members$": {
             "alignItems": [1, "align-items"],
@@ -11411,7 +12108,7 @@ class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (hAsync(Host, { key: 'b3be9584f5fddb4f1a55517f54c1713f99881217', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '89ea75fbce2c1a0e5b4b744f10bacfd84db73773', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: 'bf1c8c06c96d941d7d93b960de9279df4520f10f', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'eb7beaa77f9f2be302e7b14642c6c5153db4cebe', htmlFor: this.componentId }, hAsync("span", { key: '47a737210afc1c86431c123aa2449827f0b9755d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'f510d59fe20742e210c4fb949d468184bb2f12cc', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '7653404278cc8446de96e3e1fdbfcf47ea6b8edc', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '04626b23972a2d3fe73b09ea8fbe94021e89d98d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '0d97224a202e0a6e7ad36e2b8a027975ff22079d', class: "pds-select__select-icon", icon: enlarge }))));
+        return (hAsync(Host, { key: '0d94c80a048b1ce3a0c2c6147bf84aab09781e08', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '15533d7713175f9fddd1fd972f7faa0852753763', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '5327297f4963ec4d1e182ee63f973e7309164389', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'b9d697e170c343be49f3654432eb3e9a269dc28c', htmlFor: this.componentId }, hAsync("span", { key: 'f2b2a61293818d2a163836f25e32bf8f66936752', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '4b1eed0ba9cb197fa2fdb9ac0a342bd3df21313b', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '2ceb92d89a00308245571f2aeae0c901cd850874', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '032ef7c0c4b7442fd8f524995cfb95475687b98c', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'ee2773042ca2d05a98ff9c46c2934926de69d8e6', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11421,7 +12118,7 @@ class PdsSelect {
     }; }
     static get style() { return pdsSelectTokensCss + (labelCss$2 + pdsSelectCss); }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-select",
         "$members$": {
             "autocomplete": [1],
@@ -14155,12 +14852,12 @@ class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (hAsync(Host, { key: '8d6acb29c18b53a699281b86f73c566b9ebfd291', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '32fee1636973846016311c70e885a0e5c7645431' })));
+        return (hAsync(Host, { key: '0af78db3e32adf714d10fb08ff4318f7c84aaef9', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '1e7ac27c41de163ea4d59c6186a1282eb5f0b27d' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsSortableCss; }
     static get cmpMeta() { return {
-        "$flags$": 6,
+        "$flags$": 262,
         "$tagName$": "pds-sortable",
         "$members$": {
             "border": [516],
@@ -14202,12 +14899,12 @@ class PdsSortableItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'c09d0efc16e9cfb2e3eb567620d768e55aedaf77', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '256c70c9ae566781ee3647196ba7bfa8b2e8f7cf', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: 'ec56d4eac7f1f464df061297a613554565130d3d', icon: handle }))), hAsync("slot", { key: '6131eda3a2b8a7ef96883f9f791a2cf777407fa4' }), this.enableActions && (hAsync("div", { key: '126589fa42498a25f5049786def7fb96f16087aa', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'e2726fb1ae3f74c5ff4b7879ee32b826fb2b8518', name: "sortable-item-actions" })))));
+        return (hAsync(Host, { key: '5c5ada49c505d935bfe505997ab69e7eafc2f642', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '3041977b792e192192fa9c101f113eb42e87ceea', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '082a98c200abcc8023dc126ed83091167c59290e', icon: handle }))), hAsync("slot", { key: '1e2b2154acee0c3ce09ec77b9949c761ff37181d' }), this.enableActions && (hAsync("div", { key: '5b318f04eb9c74f660900163e17ba51e2c354538', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '2c6631a860af0da48b3a007daeff69b59cfaff59', name: "sortable-item-actions" })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsSortableItemCss; }
     static get cmpMeta() { return {
-        "$flags$": 6,
+        "$flags$": 262,
         "$tagName$": "pds-sortable-item",
         "$members$": {
             "enableActions": [4, "enable-actions"],
@@ -14307,9 +15004,9 @@ class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (hAsync(Host, { key: 'ab8da77b752d017bafd9ce22daf8973967d4b063', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '95245686f147a5b1a50540319ab4a6e87dd04451', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'f32fbaf3997fee37c645b7578d117f4f9ed8c23a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: 'ff8441d3d043a4fd7f7f4d5fac659ca9ba7554a7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            hAsync("div", { key: '2a4ee4dbe651f76e782f9c20314b0d46aa6faf04', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '58a3dfb0ca96cc90da7fc606152f63f23d41391d', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'e8db31c01ba78b986e3f746f11dddb8c28dbd6be', icon: danger, size: "small" }), this.errorMessage)));
+        return (hAsync(Host, { key: 'bc66c138352b3de0330f5b725e043b4055bec2d6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: 'c4e400efb2dd2701217bb1044f036d1a281d0001', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '7b80961fb73cd330088f2c93d46475c1d1853da7', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '318e23af1f6126302b8bb0bb8b9f12a0dc7f71b5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            hAsync("div", { key: 'd16fc523de5eacdd14dc4edce347e3be63edeb3e', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            hAsync("div", { key: '3c4ecef3cdb08568b0f52ed4af58a60c5f6ace62', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'ef58ca016b5e0cf63cb43591ec7b50e84b19595d', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -14318,7 +15015,7 @@ class PdsSwitch {
     }; }
     static get style() { return labelCss$1 + pdsSwitchCss; }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-switch",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -14355,14 +15052,14 @@ class PdsTab {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (hAsync("span", { key: '6a1adf68c8774382c193832185552d89bd0c0c6c', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'df0dfc8e49b647e1050b938eb78438bcfff752b9', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (hAsync(Host, { key: 'e1c195404903faf1c8d0d69a532a9dbc74972ff3', variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { key: '48b87755de0d0f30c8a9e0e33262b0db61e5fe89', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { key: 'e14fe7ca40faca035ec6bc4f6ead950af31b320c', class: "pds-tab__content" }, hAsync("slot", { key: 'f9377c907178ef8c02c840c35c3fcbad9afee997' })))));
+        const availabilityTabEdgeInlineStart = (hAsync("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (hAsync(Host, { key: '1c02a1c8e5e562449ab954061a10acc3d54c3efc', variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { key: '31b0e173dd738fa272dcaf4fc48a0581978f43b2', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { key: '95b4f8d4c226e3b3a174d439816ec4d28cef0686', class: "pds-tab__content" }, hAsync("slot", { key: '452a208775d54a290c0fcc6a69f6e546fde29afe' })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-tab",
         "$members$": {
             "name": [1],
@@ -14573,7 +15270,7 @@ class PdsTable {
     get el() { return getElement(this); }
     static get style() { return pdsTableCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table",
         "$members$": {
             "compact": [4],
@@ -14597,11 +15294,11 @@ class PdsTableBody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0f587d936a93187caa879ae07b9f54072e4b9aa2', role: "rowgroup", part: "body" }, hAsync("slot", { key: '026fd33ac51c548fccd5465dfd675566e95fae33' })));
+        return (hAsync(Host, { key: '7c9b15bea47bcede62a93ef11ee9dba093450ab9', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'fab0b2ca27185373cdb7b29d9cb1807b4097aea9' })));
     }
     static get style() { return pdsTableBodyCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table-body",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -14708,16 +15405,16 @@ class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '5c3d35742f438d2bbb3bc9194e6bc0abf769e66f', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (hAsync(Host, { key: 'b1c76cfb3fa26b7e59586cfd693380701c9146ff', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: 'dcc7fe8ffa481915dbe61bad294855a05d9e8aeb' })));
+                : {} }, hAsync("slot", { key: '1a04730905bf7ad930141c1914f37dd7717570d8' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableCellCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table-cell",
         "$members$": {
             "cellAlign": [1, "cell-align"],
@@ -14774,12 +15471,12 @@ class PdsTableHead {
         }
     }
     render() {
-        return (hAsync(Host, { key: '773bc9ea7631958d8ef6adcbdc862f47e4052687', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'b065650fb881746ce17cd702c51aecb1abe07898', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, hAsync("pds-checkbox", { key: 'eab146eb7bca6f4cf04cbd3adc5a90c76ede9ca1', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), hAsync("slot", { key: '5b18fb5c6e7f09cbff336e8922b39eacc34fa692' })));
+        return (hAsync(Host, { key: '933e69ad28aaf0b899a8ee504088bc5b6396889d', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'a006c965a4e9bacb4b8e07b34799bab6a0bd482a', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, hAsync("pds-checkbox", { key: 'd7f94ac83be970b2c2ed334296971bc6762602e2', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), hAsync("slot", { key: '22edaaa12d31b2be1fd2835d6d4c2801386405af' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table-head",
         "$members$": {
             "indeterminate": [1028],
@@ -14913,16 +15610,16 @@ class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '6ee9e95f9ccdaa15037875425e5512b5b5e2c540', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (hAsync(Host, { key: '3d950a2997ef4c095d08f9c4e67b9a963fea093d', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '9f6716080ff52e32ea65080f29102fd8111436bf' }), this.sortable && (hAsync("pds-icon", { key: '538ea6761216c10f716e4d53b53bbcd69b73fd45', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, hAsync("slot", { key: '8ca7d4d169612e5ba237691d9a5ec9ed35610230' }), this.sortable && (hAsync("pds-icon", { key: 'e2e214b39a1706d887bb34a0d4fc3f632e752306', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCellCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table-head-cell",
         "$members$": {
             "cellAlign": [1, "cell-align"],
@@ -14984,12 +15681,12 @@ class PdsTableRow {
         }
     }
     render() {
-        return (hAsync(Host, { key: '5853e143e9866a596924b204c25d20a3983fc064', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '687d0a86e434d2422e794b14d0a9514b213c2afc', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '109474126dbf72c218a180985169ef608d7d0c40', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: 'e685aa96c44d590ddf0d1d1842f8e672c11cadcb' })));
+        return (hAsync(Host, { key: 'cffeb199c48f2a06af70a2e5a5b41a21649c24c7', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '02a80cd54efe360550e636f7bc0f11e3de59af1c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'a8cd6c303ec35f71e0a97f130c5d53a2e81a3e4a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '820a502627ffc329f650f7f0110e34ae3f096357' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableRowCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-table-row",
         "$members$": {
             "indeterminate": [1028],
@@ -15013,12 +15710,12 @@ class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (hAsync(Host, { key: '024cffb191c49db6049ec281eba1877c6618f4f2', slot: "tabpanels" }, hAsync("div", { key: '3ab5918e75ae4708bbd12394d55f4b86cc614fdc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '5c7ede2a36c7594b1943ae5f248df22c71b86537' }))));
+        return (hAsync(Host, { key: '84aa81506200fd7f06a94a4c7570b2702b36d9e8', slot: "tabpanels" }, hAsync("div", { key: '0e890243eb41ebda64183cc4fd559abf38f5dfdc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: 'aaabfd72a45f6cd52c9c279bf0c014315a659959' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabpanelCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-tabpanel",
         "$members$": {
             "name": [1],
@@ -15125,12 +15822,12 @@ class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (hAsync(Host, { key: '729d6b9d3deb5a31cc7b1d9b18334761a856f933', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, hAsync("div", { key: '87e06225508059a3c1b548440cf7da9b68df77fd', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { key: '5e8c4c941a7f6aea1ce3378641931c104b6b45cf', name: "tabs" })), hAsync("slot", { key: 'b396ed81d9a1c957803a94dbfe965986c6afc870', name: "tabpanels" })));
+        return (hAsync(Host, { key: '89db4772ef4dab7f4dba38306b0fdf1ae55c8a9b', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, hAsync("div", { key: 'c1596be516168b0f2548b90344ad3bffcc5cb844', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { key: 'be58f90ec895da67fc84eded670183151feb261f', name: "tabs" })), hAsync("slot", { key: '24d3bed1750d8b64a8ffc9c86f517b5e8b15f615', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabsCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-tabs",
         "$members$": {
             "tablistLabel": [1, "tablist-label"],
@@ -15168,12 +15865,12 @@ class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (hAsync(Tag, { key: '9cc756733434abd9798577fae889c441ea53072e', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'c6face46ad09ba9cb147f23211a98ee6c465680f' })));
+        return (hAsync(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTextCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-text",
         "$members$": {
             "align": [1],
@@ -15489,10 +16186,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: 'fab8cd9bb189557a54fe97484ba67f41b2341509', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '223b58e9f5ae0c18be6fe27b07d8c27fc12fde6f', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: '702ed2f128951af99b899ca733766f84c4cb1e90', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '4304bbc1b3c8f1734a8b07818f396e5c24e04567', htmlFor: this.componentId }, hAsync("span", { key: '1bae266f231f09aeb9803bb7edc57ab7ac42b94c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '9029c5ef6065e26ab1aedd277baa84e47ce035ee', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'b88f27f608460b51e411825dd096b972be375312', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            hAsync("p", { key: 'b1d23f288b196d064b5b5a8835e5f21aef384578', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: '238388d91d3e11a20306402e984eb8037ed9ef8b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '2a7eaeaba552596d00ccdf3e8ba42d7f4afdbe2b', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: 'd79506616a5e977e4055fa4901e69ffe58f70419', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '4addd26b68305e0e994e5c90dc9c038b9e6228ef', class: "pds-textarea" }, this.label &&
+            hAsync("div", { key: 'f7c87947c18d943b97319d2b8e89ff34ad41e4fb', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: 'bc9834bd0bcc5b24f7bd95c4743bffeb9fc6f44b', htmlFor: this.componentId }, hAsync("span", { key: '6725ebd07c0787a0eaaef846084fb49e10155385', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '64fdc55c4f135826118125f8cd8fe158f23df4e8', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '7c6bb49a463e464a48ee11e6567de6b09eaa474b', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            hAsync("p", { key: 'c29ceac2b41863c202787fc835841cd5422cd11b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: '3bd0c5f4abe35821e246937deea426bbaf2804ed', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'aa43fd092b146dfc77ea0f8fa54633aa251e4223', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15503,7 +16200,7 @@ class PdsTextarea {
     }; }
     static get style() { return labelCss + (pdsInputTokensCss + pdsTextareaCss); }
     static get cmpMeta() { return {
-        "$flags$": 73,
+        "$flags$": 329,
         "$tagName$": "pds-textarea",
         "$members$": {
             "autocomplete": [1],
@@ -15615,20 +16312,20 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: '6951589c3f851a7f45301488882f0b2742936f2a', hidden: !this.isVisible }, hAsync("div", { key: 'd8dea7ba93f56a6d3b7b13bba54174f8b262ed2f', class: {
+        return (hAsync(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, hAsync("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '003fd79841065a615ba3d7ef8ee934bc23284da3', class: "pds-toast__message" }, hAsync("slot", { key: 'b78d5f17d8b2d8133c9fed325122299be12c55af' })), this.dismissible && (hAsync("button", { key: '9e681cb13f0d63f4295efa41e1f5ac7dd4b59f31', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, hAsync("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (hAsync("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: 'f8784f5776604cb2a0f4b201ed6bb9d4ac12297f', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
     }
     static get watchers() { return {
         "duration": ["handleDurationChange"]
     }; }
     static get style() { return pdsToastCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "pds-toast",
         "$members$": {
             "componentId": [1, "component-id"],
@@ -15961,9 +16658,9 @@ class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (hAsync(Host, { key: 'af1e569128ba37226fd2fc36059f3c829a8f0c6f', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '16a834eb3ac201e8ab7b42000d89ee7f04a15ec9', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (hAsync(Host, { key: 'ef40605b8ed95b1920caa425a021b900bdaef847', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '953a0ddd6070fa99e89307f6ddb9bacfa6932b5c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '2c15603e660ef296a9e2d47958b858d7162d0cc5' })), hAsync("div", { key: 'e3bfefad4fe5f2c2d67ca1cc00d65f353ee08332', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '0f63d8e02dba9ba43df2c92ec5e5509ab5f8f920', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '9fa52468a1d99d4dd5af8a8c07d11b1591c5204c' })), hAsync("div", { key: 'c4dfe98893fc2abacff788177d1f143afb2aa502', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '468d06248f384f727517de3fd4c15af8d6e7b118', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15971,7 +16668,7 @@ class PdsTooltip {
     }; }
     static get style() { return pdsTooltipCss; }
     static get cmpMeta() { return {
-        "$flags$": 4,
+        "$flags$": 260,
         "$tagName$": "pds-tooltip",
         "$members$": {
             "content": [1],
@@ -16091,7 +16788,7 @@ var BUILD = {
   vdomRender: true,
   vdomStyle: true,
   vdomText: true,
-  watchCallback: true,
+  propChangeCallback: true,
   taskQueue: true,
   hotModuleReplacement: false,
   isDebug: false,
@@ -16139,7 +16836,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.28.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.38.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -16153,6 +16850,7 @@ var ORG_LOCATION_ID = "o";
 var SLOT_NODE_ID = "s";
 var TEXT_NODE_ID = "t";
 var HYDRATE_ID = "s-id";
+var HYDRATED_STYLE_ID = "sty-id";
 var STENCIL_DOC_DATA = "_stencilDocData";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 
@@ -16299,82 +16997,6 @@ var MockAttr = class {
   }
 };
 
-// src/mock-doc/class-list.ts
-var MockClassList = class {
-  constructor(elm) {
-    this.elm = elm;
-  }
-  add(...classNames) {
-    const clsNames = getItems(this.elm);
-    let updated = false;
-    classNames.forEach((className) => {
-      className = String(className);
-      validateClass(className);
-      if (clsNames.includes(className) === false) {
-        clsNames.push(className);
-        updated = true;
-      }
-    });
-    if (updated) {
-      this.elm.setAttributeNS(null, "class", clsNames.join(" "));
-    }
-  }
-  remove(...classNames) {
-    const clsNames = getItems(this.elm);
-    let updated = false;
-    classNames.forEach((className) => {
-      className = String(className);
-      validateClass(className);
-      const index = clsNames.indexOf(className);
-      if (index > -1) {
-        clsNames.splice(index, 1);
-        updated = true;
-      }
-    });
-    if (updated) {
-      this.elm.setAttributeNS(null, "class", clsNames.filter((c) => c.length > 0).join(" "));
-    }
-  }
-  contains(className) {
-    className = String(className);
-    return getItems(this.elm).includes(className);
-  }
-  toggle(className) {
-    className = String(className);
-    if (this.contains(className) === true) {
-      this.remove(className);
-    } else {
-      this.add(className);
-    }
-  }
-  get length() {
-    return getItems(this.elm).length;
-  }
-  item(index) {
-    return getItems(this.elm)[index];
-  }
-  toString() {
-    return getItems(this.elm).join(" ");
-  }
-};
-function validateClass(className) {
-  if (className === "") {
-    throw new Error("The token provided must not be empty.");
-  }
-  if (/\s/.test(className)) {
-    throw new Error(
-      `The token provided ('${className}') contains HTML space characters, which are not valid in tokens.`
-    );
-  }
-}
-function getItems(elm) {
-  const className = elm.getAttribute("class");
-  if (typeof className === "string" && className.length > 0) {
-    return className.trim().split(" ").filter((c) => c.length > 0);
-  }
-  return [];
-}
-
 // src/mock-doc/css-style-declaration.ts
 var MockCSSStyleDeclaration = class {
   constructor() {
@@ -16863,8 +17485,21 @@ function triggerEventListener(elm, ev) {
   } else if (elm.parentElement == null && elm.tagName === "HTML") {
     triggerEventListener(elm.ownerDocument, ev);
   } else {
-    triggerEventListener(elm.parentElement, ev);
+    const nextTarget = getNextEventTarget(elm, ev);
+    triggerEventListener(nextTarget, ev);
+  }
+}
+function getNextEventTarget(elm, ev) {
+  if (elm.parentElement) {
+    return elm.parentElement;
+  }
+  if (elm.host && ev.composed) {
+    return elm.host;
+  }
+  if (ev.composed && elm.parentNode && elm.parentNode.host) {
+    return elm.parentNode.host;
   }
+  return null;
 }
 function dispatchEvent(currentTarget, ev) {
   ev.target = currentTarget;
@@ -26506,6 +27141,11 @@ function* streamToHtml(node, opts, output) {
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
+        if (node.delegatesFocus) {
+          const delegatesFocusAttr = " shadowrootdelegatesfocus";
+          yield delegatesFocusAttr;
+          output.currentLineWidth += delegatesFocusAttr.length;
+        }
       }
       const attrsLength = node.attributes.length;
       const attributes = opts.prettyHtml && attrsLength > 1 ? cloneAttributes(node.attributes, true) : node.attributes;
@@ -26872,6 +27512,81 @@ var STRUCTURE_ELEMENTS = /* @__PURE__ */ new Set([
   "style"
 ]);
 
+// src/mock-doc/token-list.ts
+var MockTokenList = class {
+  constructor(elm, attr) {
+    this.elm = elm;
+    this.attr = attr;
+  }
+  add(...tokens) {
+    const items = getItems(this.elm, this.attr);
+    let updated = false;
+    tokens.forEach((token) => {
+      token = String(token);
+      validateToken(token);
+      if (items.includes(token) === false) {
+        items.push(token);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, this.attr, items.join(" "));
+    }
+  }
+  remove(...tokens) {
+    const items = getItems(this.elm, this.attr);
+    let updated = false;
+    tokens.forEach((token) => {
+      token = String(token);
+      validateToken(token);
+      const index = items.indexOf(token);
+      if (index > -1) {
+        items.splice(index, 1);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, this.attr, items.filter((c) => c.length > 0).join(" "));
+    }
+  }
+  contains(token) {
+    token = String(token);
+    return getItems(this.elm, this.attr).includes(token);
+  }
+  toggle(token) {
+    token = String(token);
+    if (this.contains(token) === true) {
+      this.remove(token);
+    } else {
+      this.add(token);
+    }
+  }
+  get length() {
+    return getItems(this.elm, this.attr).length;
+  }
+  item(index) {
+    return getItems(this.elm, this.attr)[index];
+  }
+  toString() {
+    return getItems(this.elm, this.attr).join(" ");
+  }
+};
+function validateToken(token) {
+  if (token === "") {
+    throw new Error("The token provided must not be empty.");
+  }
+  if (/\s/.test(token)) {
+    throw new Error(`The token provided ('${token}') contains HTML space characters, which are not valid in tokens.`);
+  }
+}
+function getItems(elm, attr) {
+  const value = elm.getAttribute(attr);
+  if (typeof value === "string" && value.length > 0) {
+    return value.trim().split(" ").filter((c) => c.length > 0);
+  }
+  return [];
+}
+
 // src/mock-doc/node.ts
 var MockNode2 = class {
   constructor(ownerDocument, nodeType, nodeName, nodeValue) {
@@ -27024,6 +27739,15 @@ var MockNode2 = class {
   set textContent(value) {
     this._nodeValue = String(value);
   }
+  addEventListener(type, handler) {
+    addEventListener(this, type, handler);
+  }
+  removeEventListener(type, handler) {
+    removeEventListener(this, type, handler);
+  }
+  dispatchEvent(ev) {
+    return dispatchEvent(this, ev);
+  }
 };
 MockNode2.ELEMENT_NODE = 1;
 MockNode2.TEXT_NODE = 3;
@@ -27062,15 +27786,25 @@ var MockElement = class extends MockNode2 {
     addEventListener(this, type, handler);
   }
   attachShadow(_opts) {
+    var _a2;
     const shadowRoot = this.ownerDocument.createDocumentFragment();
+    shadowRoot.delegatesFocus = (_a2 = _opts.delegatesFocus) != null ? _a2 : false;
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }
   blur() {
-    dispatchEvent(
-      this,
-      new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
-    );
+    if (isCurrentlyDispatching(this, "blur")) {
+      return;
+    }
+    markAsDispatching(this, "blur");
+    try {
+      dispatchEvent(
+        this,
+        new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
+      );
+    } finally {
+      unmarkAsDispatching(this, "blur");
+    }
   }
   get localName() {
     if (!this.nodeName) {
@@ -27120,7 +27854,10 @@ var MockElement = class extends MockNode2 {
     this.setAttributeNS(null, "class", value);
   }
   get classList() {
-    return new MockClassList(this);
+    return new MockTokenList(this, "class");
+  }
+  get part() {
+    return new MockTokenList(this, "part");
   }
   click() {
     dispatchEvent(this, new MockEvent("click", { bubbles: true, cancelable: true, composed: true }));
@@ -27812,6 +28549,28 @@ function setTextContent(elm, text) {
   const textNode = new MockTextNode(elm.ownerDocument, text);
   elm.appendChild(textNode);
 }
+var currentlyDispatching = /* @__PURE__ */ new WeakMap();
+function isCurrentlyDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  return dispatchingEvents != null && dispatchingEvents.has(eventType);
+}
+function markAsDispatching(target, eventType) {
+  let dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents == null) {
+    dispatchingEvents = /* @__PURE__ */ new Set();
+    currentlyDispatching.set(target, dispatchingEvents);
+  }
+  dispatchingEvents.add(eventType);
+}
+function unmarkAsDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents != null) {
+    dispatchingEvents.delete(eventType);
+    if (dispatchingEvents.size === 0) {
+      currentlyDispatching.delete(target);
+    }
+  }
+}
 
 // src/mock-doc/comment-node.ts
 var MockComment = class _MockComment extends MockNode2 {
@@ -27839,6 +28598,12 @@ var MockDocumentFragment = class _MockDocumentFragment extends MockHTMLElement {
   getElementById(id) {
     return getElementById(this, id);
   }
+  get adoptedStyleSheets() {
+    return [];
+  }
+  set adoptedStyleSheets(_adoptedStyleSheets) {
+    throw new Error("Unimplemented");
+  }
   cloneNode(deep) {
     const cloned = new _MockDocumentFragment(null);
     if (deep) {
@@ -27887,7 +28652,9 @@ var MockCSSStyleSheet = class {
   deleteRule(index) {
     if (index >= 0 && index < this.cssRules.length) {
       this.cssRules.splice(index, 1);
-      updateStyleTextNode(this.ownerNode);
+      if (this.ownerNode) {
+        updateStyleTextNode(this.ownerNode);
+      }
     }
   }
   insertRule(rule, index = 0) {
@@ -27903,9 +28670,23 @@ var MockCSSStyleSheet = class {
     const cssRule = new MockCSSRule(this);
     cssRule.cssText = rule;
     this.cssRules.splice(index, 0, cssRule);
-    updateStyleTextNode(this.ownerNode);
+    if (this.ownerNode) {
+      updateStyleTextNode(this.ownerNode);
+    }
     return index;
   }
+  replaceSync(cssText) {
+    this.cssRules = [];
+    const rules = cssText.split("}").map((rule) => rule.trim()).filter(Boolean).map((rule) => rule + "}");
+    for (const rule of rules) {
+      const cssRule = new MockCSSRule(this);
+      cssRule.cssText = rule;
+      this.cssRules.push(cssRule);
+    }
+    if (this.ownerNode) {
+      updateStyleTextNode(this.ownerNode);
+    }
+  }
 };
 function getStyleElementText(styleElm) {
   const output = [];
@@ -28944,9 +29725,11 @@ var WINDOW_PROPS = [
   "NodeList",
   "FocusEvent",
   "KeyboardEvent",
-  "MouseEvent"
+  "MouseEvent",
+  "CSSStyleSheet"
 ];
 var GLOBAL_CONSTRUCTORS = [
+  ["CSSStyleSheet", MockCSSStyleSheet],
   ["CustomEvent", MockCustomEvent],
   ["DocumentFragment", MockDocumentFragment],
   ["DOMParser", MockDOMParser],
@@ -29154,12 +29937,6 @@ var MockShadowRoot = class extends MockDocumentFragment {
   get activeElement() {
     return null;
   }
-  set adoptedStyleSheets(_adoptedStyleSheets) {
-    throw new Error("Unimplemented");
-  }
-  get adoptedStyleSheets() {
-    return [];
-  }
   get cloneable() {
     return false;
   }
@@ -29963,7 +30740,7 @@ var MockDocument = class _MockDocument extends MockHTMLElement {
   }
   set location(val) {
     if (this.defaultView != null) {
-      this.defaultView.location = val;
+      this.defaultView.location.href = val;
     }
   }
   get baseURI() {
@@ -30213,6 +30990,32 @@ var Build = {
   isServer: false,
   isTesting: BUILD.isTesting ? true : false
 };
+
+// src/utils/constants.ts
+var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
+  PrimitiveType2["Undefined"] = "undefined";
+  PrimitiveType2["Null"] = "null";
+  PrimitiveType2["String"] = "string";
+  PrimitiveType2["Number"] = "number";
+  PrimitiveType2["SpecialNumber"] = "number";
+  PrimitiveType2["Boolean"] = "boolean";
+  PrimitiveType2["BigInt"] = "bigint";
+  return PrimitiveType2;
+})(PrimitiveType || {});
+var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
+  NonPrimitiveType2["Array"] = "array";
+  NonPrimitiveType2["Date"] = "date";
+  NonPrimitiveType2["Map"] = "map";
+  NonPrimitiveType2["Object"] = "object";
+  NonPrimitiveType2["RegularExpression"] = "regexp";
+  NonPrimitiveType2["Set"] = "set";
+  NonPrimitiveType2["Channel"] = "channel";
+  NonPrimitiveType2["Symbol"] = "symbol";
+  return NonPrimitiveType2;
+})(NonPrimitiveType || {});
+var TYPE_CONSTANT = "type";
+var VALUE_CONSTANT = "value";
+var SERIALIZED_PREFIX = "serialized:";
 var STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : [
   "%cstencil",
   "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
@@ -30233,6 +31036,232 @@ var supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */
 // src/utils/helpers.ts
 var isString = (v) => typeof v === "string";
 
+// src/utils/local-value.ts
+var LocalValue = class _LocalValue {
+  constructor(type, value) {
+    if (type === "undefined" /* Undefined */ || type === "null" /* Null */) {
+      this.type = type;
+    } else {
+      this.type = type;
+      this.value = value;
+    }
+  }
+  /**
+   * Creates a new LocalValue object with a string value.
+   *
+   * @param {string} value - The string value to be stored in the LocalValue object.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createStringValue(value) {
+    return new _LocalValue("string" /* String */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a number value.
+   *
+   * @param {number} value - The number value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createNumberValue(value) {
+    return new _LocalValue("number" /* Number */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a special number value.
+   *
+   * @param {number} value - The value of the special number.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createSpecialNumberValue(value) {
+    if (Number.isNaN(value)) {
+      return new _LocalValue("number" /* SpecialNumber */, "NaN");
+    }
+    if (Object.is(value, -0)) {
+      return new _LocalValue("number" /* SpecialNumber */, "-0");
+    }
+    if (value === Infinity) {
+      return new _LocalValue("number" /* SpecialNumber */, "Infinity");
+    }
+    if (value === -Infinity) {
+      return new _LocalValue("number" /* SpecialNumber */, "-Infinity");
+    }
+    return new _LocalValue("number" /* SpecialNumber */, value);
+  }
+  /**
+   * Creates a new LocalValue object with an undefined value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createUndefinedValue() {
+    return new _LocalValue("undefined" /* Undefined */);
+  }
+  /**
+   * Creates a new LocalValue object with a null value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createNullValue() {
+    return new _LocalValue("null" /* Null */);
+  }
+  /**
+   * Creates a new LocalValue object with a boolean value.
+   *
+   * @param {boolean} value - The boolean value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createBooleanValue(value) {
+    return new _LocalValue("boolean" /* Boolean */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a BigInt value.
+   *
+   * @param {BigInt} value - The BigInt value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createBigIntValue(value) {
+    return new _LocalValue("bigint" /* BigInt */, value.toString());
+  }
+  /**
+   * Creates a new LocalValue object with an array.
+   *
+   * @param {Array} value - The array.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createArrayValue(value) {
+    return new _LocalValue("array" /* Array */, value);
+  }
+  /**
+   * Creates a new LocalValue object with date value.
+   *
+   * @param {string} value - The date.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createDateValue(value) {
+    return new _LocalValue("date" /* Date */, value);
+  }
+  /**
+   * Creates a new LocalValue object of map value.
+   * @param {Map} map - The map.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createMapValue(map2) {
+    const value = [];
+    Array.from(map2.entries()).forEach(([key, val]) => {
+      value.push([_LocalValue.getArgument(key), _LocalValue.getArgument(val)]);
+    });
+    return new _LocalValue("map" /* Map */, value);
+  }
+  /**
+   * Creates a new LocalValue object from the passed object.
+   *
+   * @param object the object to create a LocalValue from
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createObjectValue(object) {
+    const value = [];
+    Object.entries(object).forEach(([key, val]) => {
+      value.push([key, _LocalValue.getArgument(val)]);
+    });
+    return new _LocalValue("object" /* Object */, value);
+  }
+  /**
+   * Creates a new LocalValue object of regular expression value.
+   *
+   * @param {string} value - The value of the regular expression.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createRegularExpressionValue(value) {
+    return new _LocalValue("regexp" /* RegularExpression */, value);
+  }
+  /**
+   * Creates a new LocalValue object with the specified value.
+   * @param {Set} value - The value to be set.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createSetValue(value) {
+    return new _LocalValue("set" /* Set */, value);
+  }
+  /**
+   * Creates a new LocalValue object with the given channel value
+   *
+   * @param {ChannelValue} value - The channel value.
+   * @returns {LocalValue} - The created LocalValue object.
+   */
+  static createChannelValue(value) {
+    return new _LocalValue("channel" /* Channel */, value);
+  }
+  /**
+   * Creates a new LocalValue object with a Symbol value.
+   *
+   * @param {Symbol} symbol - The Symbol value
+   * @returns {LocalValue} - The created LocalValue object
+   */
+  static createSymbolValue(symbol) {
+    const description = symbol.description || "Symbol()";
+    return new _LocalValue("symbol" /* Symbol */, description);
+  }
+  static getArgument(argument) {
+    const type = typeof argument;
+    switch (type) {
+      case "string" /* String */:
+        return _LocalValue.createStringValue(argument);
+      case "number" /* Number */:
+        if (Number.isNaN(argument) || Object.is(argument, -0) || !Number.isFinite(argument)) {
+          return _LocalValue.createSpecialNumberValue(argument);
+        }
+        return _LocalValue.createNumberValue(argument);
+      case "boolean" /* Boolean */:
+        return _LocalValue.createBooleanValue(argument);
+      case "bigint" /* BigInt */:
+        return _LocalValue.createBigIntValue(argument);
+      case "undefined" /* Undefined */:
+        return _LocalValue.createUndefinedValue();
+      case "symbol" /* Symbol */:
+        return _LocalValue.createSymbolValue(argument);
+      case "object" /* Object */:
+        if (argument === null) {
+          return _LocalValue.createNullValue();
+        }
+        if (argument instanceof Date) {
+          return _LocalValue.createDateValue(argument);
+        }
+        if (argument instanceof Map) {
+          const map2 = [];
+          argument.forEach((value, key) => {
+            const objectKey = typeof key === "string" ? key : _LocalValue.getArgument(key);
+            const objectValue = _LocalValue.getArgument(value);
+            map2.push([objectKey, objectValue]);
+          });
+          return _LocalValue.createMapValue(argument);
+        }
+        if (argument instanceof Set) {
+          const set = [];
+          argument.forEach((value) => {
+            set.push(_LocalValue.getArgument(value));
+          });
+          return _LocalValue.createSetValue(set);
+        }
+        if (argument instanceof Array) {
+          const arr = [];
+          argument.forEach((value) => {
+            arr.push(_LocalValue.getArgument(value));
+          });
+          return _LocalValue.createArrayValue(arr);
+        }
+        if (argument instanceof RegExp) {
+          return _LocalValue.createRegularExpressionValue({
+            pattern: argument.source,
+            flags: argument.flags
+          });
+        }
+        return _LocalValue.createObjectValue(argument);
+    }
+    throw new Error(`Unsupported type: ${type}`);
+  }
+  asMap() {
+    return {
+      [TYPE_CONSTANT]: this.type,
+      ...!(this.type === "null" /* Null */ || this.type === "undefined" /* Undefined */) ? { [VALUE_CONSTANT]: this.value } : {}
+    };
+  }
+};
+
 // src/utils/message-utils.ts
 var catchError = (diagnostics, err2, msg) => {
   const diagnostic = {
@@ -30271,6 +31300,106 @@ var shouldIgnoreError = (msg) => {
 };
 var TASK_CANCELED_MSG = `task canceled`;
 
+// src/utils/regular-expression.ts
+var escapeRegExpSpecialCharacters = (text) => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+// src/utils/remote-value.ts
+var RemoteValue = class _RemoteValue {
+  /**
+   * Deserializes a LocalValue serialized object back to its original JavaScript representation
+   *
+   * @param serialized The serialized LocalValue object
+   * @returns The original JavaScript value/object
+   */
+  static fromLocalValue(serialized) {
+    const type = serialized[TYPE_CONSTANT];
+    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+    switch (type) {
+      case "string" /* String */:
+        return value;
+      case "boolean" /* Boolean */:
+        return value;
+      case "bigint" /* BigInt */:
+        return BigInt(value);
+      case "undefined" /* Undefined */:
+        return void 0;
+      case "null" /* Null */:
+        return null;
+      case "number" /* Number */:
+        if (value === "NaN") return NaN;
+        if (value === "-0") return -0;
+        if (value === "Infinity") return Infinity;
+        if (value === "-Infinity") return -Infinity;
+        return value;
+      case "array" /* Array */:
+        return value.map((item) => _RemoteValue.fromLocalValue(item));
+      case "date" /* Date */:
+        return new Date(value);
+      case "map" /* Map */:
+        const map2 = /* @__PURE__ */ new Map();
+        for (const [key, val] of value) {
+          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
+          const deserializedValue = _RemoteValue.fromLocalValue(val);
+          map2.set(deserializedKey, deserializedValue);
+        }
+        return map2;
+      case "object" /* Object */:
+        const obj = {};
+        for (const [key, val] of value) {
+          obj[key] = _RemoteValue.fromLocalValue(val);
+        }
+        return obj;
+      case "regexp" /* RegularExpression */:
+        const { pattern, flags } = value;
+        return new RegExp(pattern, flags);
+      case "set" /* Set */:
+        const set = /* @__PURE__ */ new Set();
+        for (const item of value) {
+          set.add(_RemoteValue.fromLocalValue(item));
+        }
+        return set;
+      case "symbol" /* Symbol */:
+        return Symbol(value);
+      default:
+        throw new Error(`Unsupported type: ${type}`);
+    }
+  }
+  /**
+   * Utility method to deserialize multiple LocalValues at once
+   *
+   * @param serializedValues Array of serialized LocalValue objects
+   * @returns Array of deserialized JavaScript values
+   */
+  static fromLocalValueArray(serializedValues) {
+    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
+  }
+  /**
+   * Verifies if the given object matches the structure of a serialized LocalValue
+   *
+   * @param obj Object to verify
+   * @returns boolean indicating if the object has LocalValue structure
+   */
+  static isLocalValueObject(obj) {
+    if (typeof obj !== "object" || obj === null) {
+      return false;
+    }
+    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
+      return false;
+    }
+    const type = obj[TYPE_CONSTANT];
+    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
+    if (!hasTypeProperty) {
+      return false;
+    }
+    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
+      return obj.hasOwnProperty(VALUE_CONSTANT);
+    }
+    return true;
+  }
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -30320,6 +31449,21 @@ var unwrapErr = (result) => {
   }
 };
 
+// src/utils/serialize.ts
+function serializeProperty(value) {
+  if (["string", "boolean", "undefined"].includes(typeof value) || typeof value === "number" && value !== Infinity && value !== -Infinity && !isNaN(value)) {
+    return value;
+  }
+  const arg = LocalValue.getArgument(value);
+  return SERIALIZED_PREFIX + btoa(JSON.stringify(arg));
+}
+function deserializeProperty(value) {
+  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
+    return value;
+  }
+  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
 // src/utils/util.ts
 var lowerPathParam = (fn) => (p) => fn(p.toLowerCase());
 var isDtsFile = lowerPathParam((p) => p.endsWith(".d.ts") || p.endsWith(".d.mts") || p.endsWith(".d.cts"));
@@ -30354,7 +31498,15 @@ var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
 var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
 var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
 var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
-var createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<={.*))(${selector}\\b)`, "gim");
+var createSupportsRuleRe = (selector) => {
+  const safeSelector = escapeRegExpSpecialCharacters(selector);
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector}))(${safeSelector}\\b)`,
+    "g"
+  );
+};
 var _colonSlottedRe = createSupportsRuleRe("::slotted");
 var _colonHostRe = createSupportsRuleRe(":host");
 var _colonHostContextRe = createSupportsRuleRe(":host-context");
@@ -30363,6 +31515,9 @@ var _colonHostContextRe = createSupportsRuleRe(":host-context");
 var setMode = (handler) => modeResolutionChain.push(handler);
 var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
+var baseClass = BUILD.lazyLoad ? class {
+} : globalThis.HTMLElement || class {
+};
 
 // src/compiler/html/canonical-link.ts
 var updateCanonicalLink = (doc, href) => {
@@ -31553,6 +32708,7 @@ function renderToString(html, options, asStream) {
 }
 function hydrateDocument(doc, options, asStream) {
   const opts = normalizeHydrateOptions(options);
+  opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "undefined" ? "declarative-shadow-dom" : opts.serializeShadowRoot;
   let win2 = null;
   const results = generateHydrateResults(opts);
   if (hasError(results.diagnostics)) {
@@ -31564,7 +32720,7 @@ function hydrateDocument(doc, options, asStream) {
       opts.destroyDocument = true;
       win2 = new MockWindow(doc);
       if (!asStream) {
-        return render(win2, opts, results).then(() => results);
+        return render2(win2, opts, results).then(() => results);
       }
       return renderStream(win2, opts, results);
     } catch (e) {
@@ -31581,7 +32737,7 @@ function hydrateDocument(doc, options, asStream) {
       opts.destroyDocument = false;
       win2 = patchDomImplementation(doc, opts);
       if (!asStream) {
-        return render(win2, opts, results).then(() => results);
+        return render2(win2, opts, results).then(() => results);
       }
       return renderStream(win2, opts, results);
     } catch (e) {
@@ -31596,7 +32752,7 @@ function hydrateDocument(doc, options, asStream) {
   renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
   return Promise.resolve(results);
 }
-async function render(win2, opts, results) {
+async function render2(win2, opts, results) {
   if ("process" in globalThis && typeof process.on === "function" && !process.__stencilErrors) {
     process.__stencilErrors = true;
     process.on("unhandledRejection", (e) => {
@@ -31621,7 +32777,7 @@ async function render(win2, opts, results) {
 }
 function renderStream(win2, opts, results) {
   async function* processRender() {
-    const renderResult = await render(win2, opts, results);
+    const renderResult = await render2(win2, opts, results);
     yield renderResult.html;
   }
   return stream.Readable.from(processRender());
@@ -31657,6 +32813,16 @@ function finalizeHydrate(win2, doc, opts, results) {
     if (opts.removeScripts) {
       removeScripts(doc.documentElement);
     }
+    const styles2 = doc.querySelectorAll("head style");
+    if (styles2.length > 0) {
+      results.styles.push(
+        ...Array.from(styles2).map((style) => ({
+          href: style.getAttribute("href"),
+          id: style.getAttribute(HYDRATED_STYLE_ID),
+          content: style.textContent
+        }))
+      );
+    }
     try {
       updateCanonicalLink(doc, opts.canonicalUrl);
     } catch (e) {
@@ -31735,7 +32901,9 @@ function removeScripts(elm) {
 }
 
 exports.createWindowFromHtml = createWindowFromHtml;
+exports.deserializeProperty = deserializeProperty;
 exports.hydrateDocument = hydrateDocument;
 exports.renderToString = renderToString;
 exports.serializeDocumentToString = serializeDocumentToString;
+exports.serializeProperty = serializeProperty;
 exports.streamToString = streamToString;