@ptcwebops/ptcw-design 6.4.19-beta → 6.4.21-beta

package/dist/cjs/ptc-picture.cjs.entry.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+const interfaces = require('./interfaces-574e6df7.js');
+
+const ptcPictureCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{-o-object-fit:cover;object-fit:cover}.fill{-o-object-fit:fill;object-fit:fill}.contain{-o-object-fit:contain;object-fit:contain}.scale-down{-o-object-fit:scale-down;object-fit:scale-down}.none{-o-object-fit:none;object-fit:none}.initial{-o-object-fit:initial;object-fit:initial}.inherit{-o-object-fit:inherit;object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-pill{border-radius:var(--ptc-border-radius-pill)}.radius-circle{border-radius:var(--ptc-border-radius-circle)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
+
+const PtcPicture = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.src = undefined;
+    this.alt = "image";
+    this.sizeXs = "510x340";
+    this.sizeSm = "1240x496";
+    this.sizeMd = "1366x500";
+    this.sizeLg = "1920x1080";
+    this.disableResize = false;
+    this.oldSrc = undefined;
+    this.imagePosition = "static";
+    this.borderRadius = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.objectFit = "cover";
+    this.isFullHeight = false;
+    this.isFullWidth = false;
+    this.styles = undefined;
+    this.imageAlignment = "left";
+    this.maxWidth = undefined;
+    this.displayImage = "block";
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentWillLoad() {
+    if (this.disableResize) {
+      this.sizeXs = undefined;
+      this.sizeSm = undefined;
+      this.sizeMd = undefined;
+      this.sizeLg = undefined;
+    }
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ("IntersectionObserver" in window) {
+      let lazyLoadImages = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector("img");
+            image.src = this.setResponsiveBg();
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      let tempImg = this.el.shadowRoot.querySelector("img");
+      if (tempImg) {
+        lazyLoadImages.observe(tempImg);
+      }
+      this.observer = lazyLoadImages;
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector("img");
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute("data-src");
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll("img"), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute("data-" + currentBreakpoint);
+      if (elData !== null) {
+        return elData;
+      }
+      else {
+        if (typeof console == "object") {
+          console.warn("Data attribute: data-" +
+            currentBreakpoint +
+            " not found on element:\n\n" +
+            el.outerHTML +
+            "\n\n\n");
+        }
+      }
+    }
+  }
+  //manually load image
+  async LoadImage() {
+    const image = this.el.shadowRoot.querySelector("img");
+    if (!image) {
+      return;
+    }
+    if (!image.src) {
+      image.src = this.setResponsiveBg();
+      image.onload = () => {
+        image.removeAttribute("data-src");
+      };
+    }
+    if (this.observer) {
+      this.observer.unobserve(image);
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const classMapHost = this.getCssClassMapHost();
+    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth
+        ? { maxWidth: this.maxWidth + "px" }
+        : {})) })), index.h("slot", null)));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement("div"), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = "hidden-" + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia("(min-width: 992px)").matches) {
+      return "lg";
+    }
+    else if (window.matchMedia("(min-width: 768px)").matches) {
+      return "md";
+    }
+    else if (window.matchMedia("(min-width: 576px)").matches) {
+      return "sm";
+    }
+    else {
+      return "xs";
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: this.borderRadius ? true : false,
+      [this.objectFit]: true,
+      [this.isFullHeight ? "is-full-height" : "is-normal-height"]: true,
+      [this.isFullWidth ? "is-full-width" : "is-normal-width"]: true,
+      [this.displayImage]: true,
+    };
+  }
+  getCssClassMapHost() {
+    return {
+      [this.imagePosition]: true,
+      [this.imageAlignment]: true,
+    };
+  }
+  get el() { return index.getElement(this); }
+};
+PtcPicture.style = ptcPictureCss;
+
+exports.ptc_picture = PtcPicture;

package/dist/cjs/ptc-spacer.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+
+const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
+
+const PtcSpacer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.breakpoint = "";
+    this.size = "medium";
+    this.direction = "vertical";
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return index.h(index.Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ["ptc-spacer-horizontal"]: this.direction === "horizontal",
+      ["ptc-spacer-vertical"]: this.direction === "vertical",
+      ["ptc-spacer-xx-small"]: this.breakpoint === "xx-small",
+      ["ptc-spacer-x-small"]: this.breakpoint === "x-small",
+      ["ptc-spacer-small"]: this.breakpoint === "small",
+      ["ptc-spacer-medium"]: this.breakpoint === "medium",
+      ["ptc-spacer-large"]: this.breakpoint === "large",
+      ["ptc-spacer-x-large"]: this.breakpoint === "x-large",
+      ["ptc-spacer-xx-large"]: this.breakpoint === "xx-large",
+      ["ptc-spacer-xxx-large"]: this.breakpoint === "xxx-large",
+    };
+  }
+};
+PtcSpacer.style = ptcSpacerCss;
+
+exports.ptc_spacer = PtcSpacer;

package/dist/cjs/ptc-subnav-v2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const ptcSubnavV2Css = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host .mobile-dropdown-container .mobile-dropdown-button,:host .subnav-menu-left .overflow-menu-container .overflow-button,:host .subnav-menu-left ul.desktop-menu li a{color:var(--color-gray-07);text-decoration:none;padding:8px 12px;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);display:flex;align-items:center;position:relative;border-bottom:3px solid transparent;height:100%;box-sizing:border-box}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown{position:absolute;top:100%;right:0;background:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large);min-width:200px;z-index:1001;padding:14px 0;margin-top:-4px;max-width:312px;width:-moz-max-content;width:max-content}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item,:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a{display:block;padding:10px 32px 10px 24px;color:var(--color-gray-07);text-decoration:none;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);transition:all 0.2s ease;position:relative;border:none}:host{position:relative;display:block;font-family:var(--ptc-font-latin);background-color:var(--color-standard-gray);box-shadow:var(--ptc-shadow-small);transition:all 0.3s ease-in-out}:host.sticky-transition{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15)}:host .subnav-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 24px;margin:0 auto;max-width:1200px;gap:24px}@media only screen and (min-width: 768px){:host .subnav-container{flex-wrap:wrap;gap:48px}}@media only screen and (min-width: 1200px){:host .subnav-container{padding:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host .subnav-container{padding:0;max-width:1200px}}:host .subnav-container.full-width{justify-content:flex-start}:host .subnav-menu-left{display:flex;align-items:center;flex:1;align-self:stretch}@media only screen and (min-width: 768px){:host .subnav-menu-left{justify-content:flex-start}}:host .subnav-menu-left ul.desktop-menu{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;align-self:stretch}@media only screen and (min-width: 768px){:host .subnav-menu-left ul.desktop-menu{justify-content:flex-start;gap:32px}}:host .subnav-menu-left ul.desktop-menu li{display:inline-block;height:100%}@media only screen and (min-width: 768px){:host .subnav-menu-left ul.desktop-menu li a{padding:20px 0}}:host .subnav-menu-left ul.desktop-menu li a:hover{color:var(--color-gray-10)}:host .subnav-menu-left ul.desktop-menu li a.active{color:var(--color-gray-10);border-bottom:3px solid var(--color-green-07)}:host .subnav-menu-left ul.desktop-menu li a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container{position:relative;display:none}@media only screen and (min-width: 768px){:host .subnav-menu-left .overflow-menu-container{display:inline-block}}:host .subnav-menu-left .overflow-menu-container .overflow-button{background:none;border:none;padding:20px 0;cursor:pointer;justify-content:center;min-width:32px}:host .subnav-menu-left .overflow-menu-container .overflow-button:hover{color:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots{border-radius:2px;border:1px solid var(--color-gray-07);line-height:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover svg circle{fill:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded],:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active{border-bottom:3px solid var(--color-green-07)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots,:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots{background-color:var(--color-green-07);border-color:var(--color-green-07)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots svg circle,:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots svg circle{fill:var(--color-white)}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:hover{background-color:var(--color-gray-02);color:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active{color:var(--color-gray-10);border-bottom:none}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active::before{content:\"\";display:block;width:2px;height:100%;background-color:var(--color-green-07);position:absolute;left:16px;top:0}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left.full-width{flex:1;width:100%;justify-content:flex-start}:host .subnav-menu-left.full-width .desktop-menu{width:100%}:host .mobile-dropdown-container{position:relative;display:block;height:100%;box-sizing:border-box}@media only screen and (min-width: 768px){:host .mobile-dropdown-container{display:none !important}}:host .mobile-dropdown-container .mobile-dropdown-button{background:transparent;border:none;border-bottom:3px solid var(--color-green-07);padding:20px 0;justify-content:center;gap:10px;cursor:pointer}:host .mobile-dropdown-container .mobile-dropdown-button:hover{border-color:var(--color-gray-04);color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .mobile-dropdown-container .mobile-dropdown-button[aria-expanded]{border-color:var(--color-green-07);color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-selected-item{flex:1;text-align:left;color:var(--color-gray-07);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow{display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow svg{transition:transform 0.2s ease}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow.rotated svg{transform:rotate(180deg)}:host .mobile-dropdown-container .mobile-dropdown{position:absolute;top:calc(100% - 4px);background:var(--color-white);border:1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-medium);z-index:1001;margin:4px 0 0 0;overflow-y:auto;min-width:280px;width:-moz-fit-content;width:fit-content;list-style:none;padding:14px 0}:host .mobile-dropdown-container .mobile-dropdown li{display:block}:host .mobile-dropdown-container .mobile-dropdown li:last-child{border-bottom:none}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item{width:100%;background:none;text-align:left;cursor:pointer;word-break:break-word;display:block}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active{color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active::before{content:\"\";display:block;width:2px;height:100%;background-color:var(--color-green-07);position:absolute;left:16px;top:0}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-right{max-width:50%;padding:12px 0}@media only screen and (min-width: 768px){:host .subnav-menu-right{margin-left:48px;width:auto;max-width:300px}}";
+const ptcSubnavV2Css = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host .mobile-dropdown-container .mobile-dropdown-button,:host .subnav-menu-left .overflow-menu-container .overflow-button,:host .subnav-menu-left ul.desktop-menu li a{color:var(--color-gray-07);text-decoration:none;padding:8px 12px;text-align:center;font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:18px;display:flex;align-items:center;position:relative;border-bottom:3px solid transparent;height:100%;box-sizing:border-box}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown{position:absolute;top:100%;background:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large);min-width:200px;z-index:1001;padding:14px 0;margin-top:-4px;max-width:312px;width:-moz-max-content;width:max-content}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item,:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a{display:block;padding:10px 32px 10px 24px;color:var(--color-gray-07);text-decoration:none;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);transition:all 0.2s ease;position:relative;border:none}:host{position:relative;display:block;font-family:var(--ptc-font-latin);background-color:var(--color-standard-gray);box-shadow:var(--ptc-shadow-small);transition:all 0.3s ease-in-out}:host.sticky-transition{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15)}:host .subnav-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 24px;margin:0 auto;max-width:1200px;gap:24px}@media only screen and (min-width: 768px){:host .subnav-container{flex-wrap:wrap;gap:48px}}@media only screen and (min-width: 1200px){:host .subnav-container{padding:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host .subnav-container{padding:0;max-width:1200px}}:host .subnav-container.full-width{justify-content:flex-start}:host .subnav-menu-left{display:flex;align-items:center;flex:1;align-self:stretch}@media only screen and (min-width: 768px){:host .subnav-menu-left{justify-content:flex-start}}:host .subnav-menu-left ul.desktop-menu{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;align-self:stretch}@media only screen and (min-width: 768px){:host .subnav-menu-left ul.desktop-menu{justify-content:flex-start;gap:32px}}:host .subnav-menu-left ul.desktop-menu li{display:inline-block;height:100%}@media only screen and (min-width: 768px){:host .subnav-menu-left ul.desktop-menu li a{padding:20px 0 17px 0}}:host .subnav-menu-left ul.desktop-menu li a:hover{color:var(--color-gray-10)}:host .subnav-menu-left ul.desktop-menu li a.active{color:var(--color-gray-10);border-bottom:3px solid var(--color-green-07)}:host .subnav-menu-left ul.desktop-menu li a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container{position:relative;display:none}@media only screen and (min-width: 768px){:host .subnav-menu-left .overflow-menu-container{display:inline-block}}:host .subnav-menu-left .overflow-menu-container .overflow-button{background:none;border:none;padding:20px 0 17px 0;cursor:pointer;justify-content:center;min-width:32px;border-bottom:3px solid transparent;box-sizing:border-box}:host .subnav-menu-left .overflow-menu-container .overflow-button:hover{color:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots{border-radius:2px;border:1px solid var(--color-gray-07);line-height:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;box-sizing:border-box}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover svg circle{fill:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded],:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active{border-bottom-color:var(--color-green-07)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots,:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots{background-color:var(--color-green-07);border-color:var(--color-green-07)}:host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots svg circle,:host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots svg circle{fill:var(--color-white)}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-right{left:auto;right:-2px}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-left{left:0;right:auto}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:hover{background-color:var(--color-gray-02);color:var(--color-gray-10)}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active{color:var(--color-gray-10);border-bottom:none}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active::before{content:\"\";display:block;width:2px;height:100%;background-color:var(--color-green-07);position:absolute;left:16px;top:0}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-left.full-width{flex:1;width:100%;justify-content:flex-start}:host .subnav-menu-left.full-width .desktop-menu{width:100%}:host .mobile-dropdown-container{position:relative;display:block;height:100%;box-sizing:border-box}@media only screen and (min-width: 768px){:host .mobile-dropdown-container{display:none !important}}:host .mobile-dropdown-container .mobile-dropdown-button{background:transparent;border:none;border-bottom:3px solid var(--color-green-07);padding:20px 0 17px 0;justify-content:center;gap:10px;cursor:pointer}:host .mobile-dropdown-container .mobile-dropdown-button:hover{border-color:var(--color-gray-04);color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .mobile-dropdown-container .mobile-dropdown-button[aria-expanded]{border-color:var(--color-green-07);color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-selected-item{flex:1;text-align:left;color:var(--color-gray-07);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow{display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow svg{transition:transform 0.2s ease}:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow.rotated svg{transform:rotate(180deg)}:host .mobile-dropdown-container .mobile-dropdown{position:absolute;top:calc(100% - 4px);background:var(--color-white);border:1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-medium);z-index:1001;margin:4px 0 0 0;overflow-y:auto;min-width:280px;width:-moz-fit-content;width:fit-content;list-style:none;padding:14px 0}:host .mobile-dropdown-container .mobile-dropdown li{display:block}:host .mobile-dropdown-container .mobile-dropdown li:last-child{border-bottom:none}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item{width:100%;background:none;text-align:left;cursor:pointer;word-break:break-word;display:block;box-sizing:border-box}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active{color:var(--color-gray-10)}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active::before{content:\"\";display:block;width:2px;height:100%;background-color:var(--color-green-07);position:absolute;left:16px;top:0}:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .subnav-menu-right{max-width:50%;padding:12px 0}@media only screen and (min-width: 768px){:host .subnav-menu-right{margin-left:48px;width:auto;max-width:300px}}";
 
 const PtcSubnavV2 = class {
   constructor(hostRef) {
@@ -13,6 +13,7 @@ const PtcSubnavV2 = class {
     this.isSticky = false;
     this.originalTop = 0;
     this.placeholderElement = null;
+    this.measurementElement = null;
     this.handleClickOutside = (event) => {
       if (!this.el.contains(event.target)) {
         this.showOverflowMenu = false;
@@ -52,13 +53,6 @@ const PtcSubnavV2 = class {
         // Only update if different from current active
         if (activeSection !== this.currentActive) {
           this.currentActive = activeSection;
-          // Update mobile selected item if in mobile mode
-          if (this.isMobile) {
-            const activeItem = navItems.find((item) => item.id === activeSection);
-            if (activeItem) {
-              this.selectedMobileItem = activeItem;
-            }
-          }
         }
         this.scrollThrottleTimeout = null;
       }, 16); // ~60fps throttling
@@ -131,6 +125,9 @@ const PtcSubnavV2 = class {
         // Update placeholder height if sticky and resized
         const currentHeight = this.el.offsetHeight;
         this.placeholderElement.style.height = `${currentHeight}px`;
+        // Update originalTop based on placeholder position (layout may have changed)
+        const placeholderRect = this.placeholderElement.getBoundingClientRect();
+        this.originalTop = placeholderRect.top + window.scrollY;
       }
     };
     this.setupIntersectionObserver = () => {
@@ -167,13 +164,6 @@ const PtcSubnavV2 = class {
             const sectionId = mostVisibleSection.target.id;
             if (sectionId && sectionId !== this.currentActive) {
               this.currentActive = sectionId;
-              // Update mobile selected item if in mobile mode
-              if (this.isMobile) {
-                const activeItem = navItems.find((item) => item.id === sectionId);
-                if (activeItem) {
-                  this.selectedMobileItem = activeItem;
-                }
-              }
             }
           }
         }, 100); // Increased debounce time for better performance
@@ -190,6 +180,24 @@ const PtcSubnavV2 = class {
         }
       });
     };
+    this.setupResizeObserver = () => {
+      // Observe the parent element for layout changes
+      this.resizeObserver = new ResizeObserver(() => {
+        // Recalculate sticky position when parent layout changes
+        if (!this.isSticky) {
+          this.initializeStickyPosition();
+        }
+        else if (this.placeholderElement) {
+          // If sticky, update originalTop based on placeholder position
+          const placeholderRect = this.placeholderElement.getBoundingClientRect();
+          this.originalTop = placeholderRect.top + window.scrollY;
+        }
+      });
+      // Observe the element's parent or the element itself
+      if (this.el.parentElement) {
+        this.resizeObserver.observe(this.el.parentElement);
+      }
+    };
     this.extractNavItemsFromSlots = () => {
       const slotElement = this.el.querySelector('[slot="nav-items"]');
       if (!slotElement)
@@ -229,9 +237,6 @@ const PtcSubnavV2 = class {
       console.warn("No navigation items found in slots or props for ptc-subnav-v2");
       return [];
     };
-    this.calculateMobileDropdownItems = () => {
-      this.mobileDropdownItems = this.getNavItems();
-    };
     this.hasActiveOverflowItem = () => {
       return this.overflowItems.some((item) => item.id === this.currentActive);
     };
@@ -245,7 +250,6 @@ const PtcSubnavV2 = class {
       if (navItems.length === 0) {
         this.visibleItems = [];
         this.overflowItems = [];
-        this.selectedMobileItem = null;
         return;
       }
       // Check if we're in mobile mode (below 767px)
@@ -259,7 +263,6 @@ const PtcSubnavV2 = class {
         // On mobile, show only the current active item
         const activeItem = navItems.find((item) => item.id === this.currentActive) ||
           navItems[0];
-        this.selectedMobileItem = activeItem;
         this.visibleItems = [activeItem];
         this.overflowItems = navItems.filter((item) => item.id !== activeItem.id);
       }
@@ -280,19 +283,21 @@ const PtcSubnavV2 = class {
         }
         let visibleCount = 0;
         let totalWidth = 0;
-        // Create temporary elements to measure width
-        const tempContainer = document.createElement("div");
-        tempContainer.style.position = "absolute";
-        tempContainer.style.visibility = "hidden";
-        tempContainer.style.whiteSpace = "nowrap";
-        tempContainer.style.fontSize = "14px";
-        tempContainer.style.fontWeight = "700";
-        tempContainer.style.padding = "20px 0 20px 0";
-        document.body.appendChild(tempContainer);
+        // Create or reuse measurement element
+        if (!this.measurementElement) {
+          this.measurementElement = document.createElement("div");
+          this.measurementElement.style.position = "absolute";
+          this.measurementElement.style.visibility = "hidden";
+          this.measurementElement.style.whiteSpace = "nowrap";
+          this.measurementElement.style.fontSize = "14px";
+          this.measurementElement.style.fontWeight = "700";
+          this.measurementElement.style.padding = "20px 0 20px 0";
+          document.body.appendChild(this.measurementElement);
+        }
         for (let i = 0; i < navItems.length; i++) {
           const item = navItems[i];
-          tempContainer.textContent = item.label;
-          const itemWidth = tempContainer.offsetWidth + 32; // 32px for gap
+          this.measurementElement.textContent = item.label;
+          const itemWidth = this.measurementElement.offsetWidth + 32; // 32px for gap
           if (totalWidth + itemWidth <= availableWidth) {
             totalWidth += itemWidth;
             visibleCount++;
@@ -301,7 +306,6 @@ const PtcSubnavV2 = class {
             break;
           }
         }
-        document.body.removeChild(tempContainer);
         this.visibleItems = navItems.slice(0, visibleCount);
         this.overflowItems = navItems.slice(visibleCount);
       }
@@ -310,19 +314,27 @@ const PtcSubnavV2 = class {
     };
     this.toggleOverflowMenu = () => {
       this.showOverflowMenu = !this.showOverflowMenu;
+      // After opening, measure and decide alignment to avoid viewport overflow
+      if (!this.showOverflowMenu) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        const container = this.overflowMenuContainer;
+        const dropdown = this.overflowDropdownEl;
+        if (!container || !dropdown)
+          return;
+        const containerRect = container.getBoundingClientRect();
+        // Default positioning is right: -2px inside container
+        const dropdownWidth = dropdown.offsetWidth || 0;
+        const rightEdge = containerRect.right + 2;
+        const leftEdge = rightEdge - dropdownWidth;
+        // If left edge would be off the viewport, flip to left aligned
+        this.overflowDropdownAlignLeft = leftEdge < 8; // keep a small gutter
+      });
     };
     this.handleNavClick = (event, section) => {
       event.preventDefault();
       this.currentActive = section;
-      // Update mobile selected item if in mobile mode
-      if (this.isMobile) {
-        const navItems = this.getNavItems();
-        const activeItem = navItems.find((item) => item.id === section);
-        if (activeItem) {
-          this.selectedMobileItem = activeItem;
-          this.calculateMobileDropdownItems();
-        }
-      }
       // Set manual navigation flag to prevent intersection observer from overriding
       this.isManualNavigation = true;
       // Clear any existing manual navigation timeout
@@ -340,12 +352,19 @@ const PtcSubnavV2 = class {
         composed: true,
       });
       this.el.dispatchEvent(customEvent);
-      // Smooth scroll to section if it exists
+      // Smooth scroll to section if it exists, accounting for sticky nav height
       const targetElement = document.querySelector(`#${section}`);
       if (targetElement) {
-        targetElement.scrollIntoView({
+        // Get the sticky nav height
+        const navHeight = this.el.offsetHeight;
+        // Calculate the target position with offset
+        const targetPosition = targetElement.getBoundingClientRect().top +
+          window.scrollY -
+          navHeight;
+        // Smooth scroll to the adjusted position
+        window.scrollTo({
+          top: targetPosition,
           behavior: "smooth",
-          block: "start",
         });
       }
     };
@@ -355,30 +374,19 @@ const PtcSubnavV2 = class {
     this.visibleItems = [];
     this.overflowItems = [];
     this.showOverflowMenu = false;
+    this.overflowDropdownAlignLeft = false;
     this.isMobile = false;
-    this.selectedMobileItem = null;
     this.isManualNavigation = false;
-    this.mobileDropdownItems = [];
   }
   componentWillLoad() {
     this.currentActive = this.activeSection;
-    this.initializeMobileItem();
-    this.calculateMobileDropdownItems();
-  }
-  initializeMobileItem() {
-    const navItems = this.getNavItems();
-    this.selectedMobileItem =
-      navItems.length > 0
-        ? navItems.find((item) => item.id === this.activeSection) ||
-          navItems[0]
-        : null;
   }
   componentDidLoad() {
     this.bindEventHandlers();
-    this.calculateMobileDropdownItems();
     this.handleResize();
     this.addEventListeners();
     this.setupIntersectionObserver();
+    this.setupResizeObserver();
     this.initializeStickyPosition();
   }
   bindEventHandlers() {
@@ -403,7 +411,8 @@ const PtcSubnavV2 = class {
     this.removeEventListeners();
     this.cleanupTimeouts();
     this.cleanupIntersectionObserver();
-    this.cleanupPlaceholder();
+    this.cleanupResizeObserver();
+    this.cleanupElements();
   }
   removeEventListeners() {
     window.removeEventListener("resize", this.boundHandleResize);
@@ -413,25 +422,34 @@ const PtcSubnavV2 = class {
     window.removeEventListener("scroll", this.boundHandleStickyScroll);
   }
   cleanupTimeouts() {
-    [
-      this.scrollTimeout,
-      this.scrollThrottleTimeout,
-      this.manualNavigationTimeout,
-      this.stickyScrollTimeout,
-    ]
-      .filter(Boolean)
-      .forEach((timeout) => clearTimeout(timeout));
+    if (this.scrollTimeout)
+      clearTimeout(this.scrollTimeout);
+    if (this.scrollThrottleTimeout)
+      clearTimeout(this.scrollThrottleTimeout);
+    if (this.manualNavigationTimeout)
+      clearTimeout(this.manualNavigationTimeout);
+    if (this.stickyScrollTimeout)
+      clearTimeout(this.stickyScrollTimeout);
   }
   cleanupIntersectionObserver() {
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
     }
   }
-  cleanupPlaceholder() {
+  cleanupResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  cleanupElements() {
     if (this.placeholderElement) {
       this.placeholderElement.remove();
       this.placeholderElement = null;
     }
+    if (this.measurementElement) {
+      this.measurementElement.remove();
+      this.measurementElement = null;
+    }
   }
   parsePropNavItems() {
     var _a;
@@ -452,14 +470,16 @@ const PtcSubnavV2 = class {
     return null;
   }
   render() {
-    var _a, _b;
     const navItems = this.getNavItems();
+    const hasRightContent = this.hasSubnavMenuRightContent();
+    const selectedMobileItem = this.isMobile
+      ? navItems.find((item) => item.id === this.currentActive) ||
+        navItems[0]
+      : null;
     // If no navigation items, don't render the navigation
     if (navItems.length === 0) {
-      const hasRightContent = this.hasSubnavMenuRightContent();
       return (index.h(index.Host, null, index.h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, hasRightContent && (index.h("div", { class: "subnav-menu-right" }, index.h("slot", { name: "subnav-menu-right" }))))));
     }
-    const hasRightContent = this.hasSubnavMenuRightContent();
     return (index.h(index.Host, null, index.h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, index.h("nav", { class: `subnav-menu-left ${!hasRightContent ? "full-width" : ""}`, role: "navigation", "aria-label": "Sub navigation", ref: (el) => (this.navContainer = el) }, this.isMobile ? (
     // Mobile layout - dropdown with arrows
     index.h("div", { class: "mobile-dropdown-container" }, index.h("button", { class: "mobile-dropdown-button", onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
@@ -468,32 +488,31 @@ const PtcSubnavV2 = class {
           e.preventDefault();
           this.toggleOverflowMenu();
         }
-      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": `${((_a = this.selectedMobileItem) === null || _a === void 0 ? void 0 : _a.label) || "Select Section"} - Choose navigation section`, "tracker-id": "mobile-dropdown-button", ref: (el) => (this.overflowButton = el) }, index.h("span", { class: "mobile-selected-item" }, ((_b = this.selectedMobileItem) === null || _b === void 0 ? void 0 : _b.label) ||
-      "Select Section"), index.h("span", { class: `mobile-arrow ${this.showOverflowMenu ? "rotated" : ""}`, "aria-hidden": "true" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M1 1.5L5.94975 6.44975L10.8995 1.5", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))), this.showOverflowMenu && (index.h("ul", { class: "mobile-dropdown", role: "menu", "aria-label": "Navigation sections" }, this.mobileDropdownItems.map((item) => (index.h("li", { key: item.id }, index.h("a", { href: `#${item.id}`, class: `mobile-dropdown-item mf-listen ${this
-        .currentActive ===
+      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": `${(selectedMobileItem === null || selectedMobileItem === void 0 ? void 0 : selectedMobileItem.label) || "Select Section"} - Choose navigation section`, "tracker-id": "mobile-dropdown-button", ref: (el) => (this.overflowButton = el) }, index.h("span", { class: "mobile-selected-item" }, (selectedMobileItem === null || selectedMobileItem === void 0 ? void 0 : selectedMobileItem.label) ||
+      "Select Section"), index.h("span", { class: `mobile-arrow ${this.showOverflowMenu ? "rotated" : ""}`, "aria-hidden": "true" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M1 1.5L5.94975 6.44975L10.8995 1.5", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))), this.showOverflowMenu && (index.h("ul", { class: "mobile-dropdown", role: "menu", "aria-label": "Navigation sections" }, navItems.map((item) => (index.h("li", { key: item.id, class: "mf-listen", id: item.trackerId ||
+        `mobile-nav-${item.id}` }, index.h("a", { href: `#${item.id}`, class: `mobile-dropdown-item  ${this.currentActive ===
         item.id
         ? "active"
-        : ""}`, role: "menuitem", "aria-current": this
-        .currentActive ===
+        : ""}`, role: "menuitem", "aria-current": this.currentActive ===
         item.id
         ? "page"
-        : undefined, "tracker-id": item.trackerId ||
-        `mobile-nav-${item.id}`, title: item.title || "", onClick: (e) => {
+        : undefined, title: item.title || "", onClick: (e) => {
         this.handleNavClick(e, item.id);
         this.showOverflowMenu = false;
       } }, item.label)))))))) : (
     // Desktop layout - original behavior
-    index.h("ul", { class: "desktop-menu" }, this.visibleItems.map((item) => (index.h("li", { key: item.id, class: "mf-listen", "tracker-id": item.trackerId || `nav-${item.id}` }, index.h("a", { href: `#${item.id}`, class: this.currentActive === item.id
+    index.h("ul", { class: "desktop-menu" }, this.visibleItems.map((item) => (index.h("li", { key: item.id, class: "mf-listen", id: item.trackerId || `nav-${item.id}` }, index.h("a", { href: `#${item.id}`, class: this.currentActive === item.id
         ? "active"
         : "", title: item.title || "", onClick: (e) => this.handleNavClick(e, item.id), "aria-current": this.currentActive === item.id
         ? "page"
-        : undefined }, item.label)))), this.overflowItems.length > 0 && (index.h("li", { class: "overflow-menu-container mf-listen", "tracker-id": "overflow-menu" }, index.h("button", { class: `overflow-button ${this.hasActiveOverflowItem() ? "selected-active" : ""}`, onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
+        : undefined }, item.label)))), this.overflowItems.length > 0 && (index.h("li", { class: "overflow-menu-container mf-listen", id: "overflow-menu", ref: (el) => (this.overflowMenuContainer = el) }, index.h("button", { class: `overflow-button ${this.hasActiveOverflowItem() ? "selected-active" : ""}`, onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
         if (e.key === "Enter" ||
           e.key === " ") {
           e.preventDefault();
           this.toggleOverflowMenu();
         }
-      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": "Show more navigation items", "tracker-id": "overflow-button", ref: (el) => (this.overflowButton = el) }, index.h("span", { class: "overflow-dots", "aria-hidden": "true" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "1.25", cy: "5", r: "1.25", fill: "#617480" }), index.h("circle", { cx: "5", cy: "5", r: "1.25", fill: "#617480" }), index.h("circle", { cx: "8.75", cy: "5", r: "1.25", fill: "#617480" })))), this.showOverflowMenu && (index.h("div", { class: "overflow-dropdown", role: "menu", "aria-label": "Additional navigation sections" }, this.overflowItems.map((item) => (index.h("a", { key: item.id, href: `#${item.id}`, class: `mf-listen ${this
+      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": "Show more navigation items", "tracker-id": "overflow-button", ref: (el) => (this.overflowButton = el) }, index.h("span", { class: "overflow-dots", "aria-hidden": "true" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "1.25", cy: "5", r: "1.25", fill: "#617480" }), index.h("circle", { cx: "5", cy: "5", r: "1.25", fill: "#617480" }), index.h("circle", { cx: "8.75", cy: "5", r: "1.25", fill: "#617480" })))), this.showOverflowMenu && (index.h("div", { class: `overflow-dropdown ${this.overflowDropdownAlignLeft ? "align-left" : "align-right"}`, role: "menu", "aria-label": "Additional navigation sections", ref: (el) => (this.overflowDropdownEl =
+        el) }, this.overflowItems.map((item) => (index.h("a", { key: item.id, href: `#${item.id}`, class: `mf-listen ${this
         .currentActive ===
         item.id
         ? "active"