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

package/dist/collection/components/ptc-subnav-v2/ptc-subnav-v2.js

@@ -5,6 +5,7 @@ export class PtcSubnavV2 {
     this.isSticky = false;
     this.originalTop = 0;
     this.placeholderElement = null;
+    this.measurementElement = null;
     this.handleClickOutside = (event) => {
       if (!this.el.contains(event.target)) {
         this.showOverflowMenu = false;
@@ -44,13 +45,6 @@ export class PtcSubnavV2 {
         // 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
@@ -123,6 +117,9 @@ export class PtcSubnavV2 {
         // 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 = () => {
@@ -159,13 +156,6 @@ export class PtcSubnavV2 {
             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
@@ -182,6 +172,24 @@ export class PtcSubnavV2 {
         }
       });
     };
+    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)
@@ -221,9 +229,6 @@ export class PtcSubnavV2 {
       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);
     };
@@ -237,7 +242,6 @@ export class PtcSubnavV2 {
       if (navItems.length === 0) {
         this.visibleItems = [];
         this.overflowItems = [];
-        this.selectedMobileItem = null;
         return;
       }
       // Check if we're in mobile mode (below 767px)
@@ -251,7 +255,6 @@ export class PtcSubnavV2 {
         // 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);
       }
@@ -272,19 +275,21 @@ export class PtcSubnavV2 {
         }
         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++;
@@ -293,7 +298,6 @@ export class PtcSubnavV2 {
             break;
           }
         }
-        document.body.removeChild(tempContainer);
         this.visibleItems = navItems.slice(0, visibleCount);
         this.overflowItems = navItems.slice(visibleCount);
       }
@@ -302,19 +306,27 @@ export class PtcSubnavV2 {
     };
     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
@@ -332,12 +344,19 @@ export class PtcSubnavV2 {
         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",
         });
       }
     };
@@ -347,30 +366,19 @@ export class PtcSubnavV2 {
     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() {
@@ -395,7 +403,8 @@ export class PtcSubnavV2 {
     this.removeEventListeners();
     this.cleanupTimeouts();
     this.cleanupIntersectionObserver();
-    this.cleanupPlaceholder();
+    this.cleanupResizeObserver();
+    this.cleanupElements();
   }
   removeEventListeners() {
     window.removeEventListener("resize", this.boundHandleResize);
@@ -405,25 +414,34 @@ export class PtcSubnavV2 {
     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;
@@ -444,14 +462,16 @@ export class PtcSubnavV2 {
     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 (h(Host, null, h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, hasRightContent && (h("div", { class: "subnav-menu-right" }, h("slot", { name: "subnav-menu-right" }))))));
     }
-    const hasRightContent = this.hasSubnavMenuRightContent();
     return (h(Host, null, h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, 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
     h("div", { class: "mobile-dropdown-container" }, h("button", { class: "mobile-dropdown-button", onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
@@ -460,32 +480,31 @@ export class PtcSubnavV2 {
           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) }, h("span", { class: "mobile-selected-item" }, ((_b = this.selectedMobileItem) === null || _b === void 0 ? void 0 : _b.label) ||
-      "Select Section"), h("span", { class: `mobile-arrow ${this.showOverflowMenu ? "rotated" : ""}`, "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 1.5L5.94975 6.44975L10.8995 1.5", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))), this.showOverflowMenu && (h("ul", { class: "mobile-dropdown", role: "menu", "aria-label": "Navigation sections" }, this.mobileDropdownItems.map((item) => (h("li", { key: item.id }, 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) }, h("span", { class: "mobile-selected-item" }, (selectedMobileItem === null || selectedMobileItem === void 0 ? void 0 : selectedMobileItem.label) ||
+      "Select Section"), h("span", { class: `mobile-arrow ${this.showOverflowMenu ? "rotated" : ""}`, "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 1.5L5.94975 6.44975L10.8995 1.5", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))), this.showOverflowMenu && (h("ul", { class: "mobile-dropdown", role: "menu", "aria-label": "Navigation sections" }, navItems.map((item) => (h("li", { key: item.id, class: "mf-listen", id: item.trackerId ||
+        `mobile-nav-${item.id}` }, 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
-    h("ul", { class: "desktop-menu" }, this.visibleItems.map((item) => (h("li", { key: item.id, class: "mf-listen", "tracker-id": item.trackerId || `nav-${item.id}` }, h("a", { href: `#${item.id}`, class: this.currentActive === item.id
+    h("ul", { class: "desktop-menu" }, this.visibleItems.map((item) => (h("li", { key: item.id, class: "mf-listen", id: item.trackerId || `nav-${item.id}` }, 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 && (h("li", { class: "overflow-menu-container mf-listen", "tracker-id": "overflow-menu" }, h("button", { class: `overflow-button ${this.hasActiveOverflowItem() ? "selected-active" : ""}`, onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
+        : undefined }, item.label)))), this.overflowItems.length > 0 && (h("li", { class: "overflow-menu-container mf-listen", id: "overflow-menu", ref: (el) => (this.overflowMenuContainer = el) }, 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) }, h("span", { class: "overflow-dots", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "1.25", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "5", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "8.75", cy: "5", r: "1.25", fill: "#617480" })))), this.showOverflowMenu && (h("div", { class: "overflow-dropdown", role: "menu", "aria-label": "Additional navigation sections" }, this.overflowItems.map((item) => (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) }, h("span", { class: "overflow-dots", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "1.25", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "5", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "8.75", cy: "5", r: "1.25", fill: "#617480" })))), this.showOverflowMenu && (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) => (h("a", { key: item.id, href: `#${item.id}`, class: `mf-listen ${this
         .currentActive ===
         item.id
         ? "active"
@@ -557,10 +576,9 @@ export class PtcSubnavV2 {
       "visibleItems": {},
       "overflowItems": {},
       "showOverflowMenu": {},
+      "overflowDropdownAlignLeft": {},
       "isMobile": {},
-      "selectedMobileItem": {},
-      "isManualNavigation": {},
-      "mobileDropdownItems": {}
+      "isManualNavigation": {}
     };
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -3743,7 +3743,7 @@ ptc-footer {
 .ptc-text-field .iti__flag {
   background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/img/flags.png");
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   .ptc-text-field .iti__flag {
     background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/img/flags@2x.png");
   }

package/dist/collection/components/ptc-value-prop-card/ptc-value-prop-card.css

@@ -107,8 +107,7 @@ ptc-footer {
   border-radius: var(--ptc-border-radius-large);
   border: 1px solid var(--color-white);
   background-color: rgba(0, 0, 0, 0.6);
-  -webkit-backdrop-filter: blur(2px);
-          backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
   color: var(--color-white);
   z-index: 10;
   display: flex;

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -6113,8 +6113,7 @@ blockquote p {
   z-index: 900;
   transition: all 0.1s ease 0s;
   background-color: var(--color-standard-white);
-  -webkit-backdrop-filter: blur(22px);
-          backdrop-filter: blur(22px);
+  backdrop-filter: blur(22px);
   background-image: linear-gradient(93deg, #f4f4f4, #fff 100%);
   box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.16);
 }