npm - @ptcwebops/ptcw-design - Versions diffs - 6.4.9 → 6.4.10 - Mend

@ptcwebops/ptcw-design 6.4.9 → 6.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (403) hide show

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

@@ -4,12 +4,16 @@ 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{display:block;font-family:var(--ptc-font-latin);position:sticky;top:0;z-index:105;background-color:var(--color-standard-gray);box-shadow:var(--ptc-shadow-small)}: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;transition:all 0.2s ease}:host .subnav-menu-left .overflow-menu-container .overflow-dropdown{position:absolute;top:100%;background:var(--color-standard-gray);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large);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;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{text-align:left;line-height:18px}: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:14px;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: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% - 8px);left:-2px;background:var(--color-standard-gray);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:14px;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{width:auto;max-width:300px}}";
 const PtcSubnavV2 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cachedNavItems = null;
+    this.isSticky = false;
+    this.originalTop = 0;
+    this.placeholderElement = null;
+    this.measurementElement = null;
     this.handleClickOutside = (event) => {
       if (!this.el.contains(event.target)) {
         this.showOverflowMenu = false;
@@ -49,19 +53,82 @@ 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
     };
+    this.initializeStickyPosition = () => {
+      // Store the original position of the subnav
+      const rect = this.el.getBoundingClientRect();
+      this.originalTop = rect.top + window.scrollY;
+    };
+    this.handleStickyScroll = () => {
+      // Throttle sticky scroll events for better performance
+      if (this.stickyScrollTimeout) {
+        return;
+      }
+      this.stickyScrollTimeout = window.setTimeout(() => {
+        var _a;
+        const scrollY = window.scrollY;
+        // Check if we should make the subnav sticky
+        const shouldBeSticky = scrollY >= this.originalTop;
+        if (shouldBeSticky && !this.isSticky) {
+          // Store the original height before making it fixed
+          const originalHeight = this.el.offsetHeight;
+          // Create placeholder element to maintain space
+          this.placeholderElement = document.createElement("div");
+          this.placeholderElement.style.height = `${originalHeight}px`;
+          this.placeholderElement.style.width = "100%";
+          this.placeholderElement.style.pointerEvents = "none";
+          // Insert placeholder before the subnav
+          (_a = this.el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.placeholderElement, this.el);
+          // Add transition class for smooth animation
+          this.el.classList.add("sticky-transition");
+          // Apply fixed positioning with smooth transition
+          this.el.style.position = "fixed";
+          this.el.style.top = "0";
+          this.el.style.left = "0";
+          this.el.style.right = "0";
+          this.el.style.width = "100%";
+          this.el.style.zIndex = "105";
+          this.el.style.transform = "translateY(0)";
+          this.isSticky = true;
+        }
+        else if (!shouldBeSticky && this.isSticky) {
+          // Remove transition class and reset transform
+          this.el.classList.remove("sticky-transition");
+          this.el.style.transform = "";
+          // Remove fixed positioning and restore original position
+          this.el.style.position = "";
+          this.el.style.top = "";
+          this.el.style.left = "";
+          this.el.style.right = "";
+          this.el.style.width = "";
+          this.el.style.zIndex = "";
+          this.isSticky = false;
+          // Remove placeholder element
+          if (this.placeholderElement) {
+            this.placeholderElement.remove();
+            this.placeholderElement = null;
+          }
+        }
+        this.stickyScrollTimeout = null;
+      }, 16); // ~60fps throttling
+    };
     this.handleResize = () => {
       this.navContainer && setTimeout(() => this.calculateVisibleItems(), 10);
+      // Recalculate original position on resize
+      if (!this.isSticky) {
+        this.initializeStickyPosition();
+      }
+      else if (this.placeholderElement) {
+        // 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 = () => {
       // Get all sections that correspond to our navigation items
@@ -97,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
@@ -120,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)
@@ -159,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);
     };
@@ -175,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)
@@ -189,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);
       }
@@ -210,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++;
@@ -231,7 +306,6 @@ const PtcSubnavV2 = class {
             break;
           }
         }
-        document.body.removeChild(tempContainer);
         this.visibleItems = navItems.slice(0, visibleCount);
         this.overflowItems = navItems.slice(visibleCount);
       }
@@ -240,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
@@ -270,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",
         });
       }
     };
@@ -285,36 +374,27 @@ 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() {
     this.boundHandleResize = this.handleResize.bind(this);
     this.boundHandleClickOutside = this.handleClickOutside.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
     this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this.boundHandleStickyScroll = this.handleStickyScroll.bind(this);
   }
   addEventListeners() {
     window.addEventListener("resize", this.boundHandleResize);
@@ -323,32 +403,54 @@ const PtcSubnavV2 = class {
     window.addEventListener("scroll", this.boundHandleScroll, {
       passive: true,
     });
+    window.addEventListener("scroll", this.boundHandleStickyScroll, {
+      passive: true,
+    });
   }
   disconnectedCallback() {
     this.removeEventListeners();
     this.cleanupTimeouts();
     this.cleanupIntersectionObserver();
+    this.cleanupResizeObserver();
+    this.cleanupElements();
   }
   removeEventListeners() {
     window.removeEventListener("resize", this.boundHandleResize);
     document.removeEventListener("click", this.boundHandleClickOutside);
     document.removeEventListener("keydown", this.boundHandleKeyDown);
     window.removeEventListener("scroll", this.boundHandleScroll);
+    window.removeEventListener("scroll", this.boundHandleStickyScroll);
   }
   cleanupTimeouts() {
-    [
-      this.scrollTimeout,
-      this.scrollThrottleTimeout,
-      this.manualNavigationTimeout,
-    ]
-      .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();
     }
   }
+  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;
     if (!((_a = this.navItems) === null || _a === void 0 ? void 0 : _a.trim()))
@@ -368,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) => {
@@ -384,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"