@ptcwebops/ptcw-design 6.4.4 → 6.4.5

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

@@ -0,0 +1,430 @@
+'use strict';
+
+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: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: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 PtcSubnavV2 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cachedNavItems = null;
+    this.handleClickOutside = (event) => {
+      if (!this.el.contains(event.target)) {
+        this.showOverflowMenu = false;
+      }
+    };
+    this.handleKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape" && this.showOverflowMenu) {
+        this.showOverflowMenu = false;
+        (_a = this.overflowButton) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    };
+    this.handleScroll = () => {
+      // Throttle scroll events for better performance
+      if (this.scrollThrottleTimeout) {
+        return;
+      }
+      this.scrollThrottleTimeout = window.setTimeout(() => {
+        // Don't update active state if user just manually navigated
+        if (this.isManualNavigation) {
+          this.scrollThrottleTimeout = null;
+          return;
+        }
+        // Fallback scroll handler to ensure active state is updated
+        const navItems = this.getNavItems();
+        const subnavHeight = this.el.offsetHeight;
+        const scrollPosition = window.scrollY + subnavHeight + 100; // Offset for better detection
+        // Find the section that should be active based on scroll position
+        let activeSection = navItems[0].id; // Default to first section
+        for (let i = navItems.length - 1; i >= 0; i--) {
+          const section = document.getElementById(navItems[i].id);
+          if (section && section.offsetTop <= scrollPosition) {
+            activeSection = navItems[i].id;
+            break;
+          }
+        }
+        // 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.handleResize = () => {
+      this.navContainer && setTimeout(() => this.calculateVisibleItems(), 10);
+    };
+    this.setupIntersectionObserver = () => {
+      // Get all sections that correspond to our navigation items
+      const navItems = this.getNavItems();
+      // Create intersection observer
+      this.intersectionObserver = new IntersectionObserver((entries) => {
+        // Clear any existing timeout
+        if (this.scrollTimeout) {
+          clearTimeout(this.scrollTimeout);
+        }
+        // Debounce the intersection changes
+        this.scrollTimeout = window.setTimeout(() => {
+          // Don't update active state if user just manually navigated
+          if (this.isManualNavigation) {
+            return;
+          }
+          // Find all intersecting sections
+          const intersectingSections = entries.filter((entry) => entry.isIntersecting);
+          if (intersectingSections.length > 0) {
+            // Sort by intersection ratio (how much of the section is visible)
+            // and then by position (top to bottom)
+            intersectingSections.sort((a, b) => {
+              // First sort by intersection ratio (higher = more visible)
+              if (b.intersectionRatio !== a.intersectionRatio) {
+                return (b.intersectionRatio - a.intersectionRatio);
+              }
+              // If intersection ratios are equal, sort by position
+              return (a.boundingClientRect.top -
+                b.boundingClientRect.top);
+            });
+            // Get the most visible section
+            const mostVisibleSection = intersectingSections[0];
+            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
+      }, {
+        root: null,
+        rootMargin: "-20% 0px -60% 0px",
+        threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0], // Multiple thresholds for better detection
+      });
+      // Observe all sections
+      navItems.forEach((item) => {
+        const section = document.getElementById(item.id);
+        if (section) {
+          this.intersectionObserver.observe(section);
+        }
+      });
+    };
+    this.extractNavItemsFromSlots = () => {
+      const slotElement = this.el.querySelector('[slot="nav-items"]');
+      if (!slotElement)
+        return null;
+      const links = slotElement.querySelectorAll("a");
+      const items = Array.from(links)
+        .map((link) => {
+        var _a, _b;
+        return ({
+          id: ((_a = link.getAttribute("href")) === null || _a === void 0 ? void 0 : _a.substring(1)) || "",
+          label: ((_b = link.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "",
+          title: link.getAttribute("title") || undefined,
+          trackerId: link.getAttribute("tracker-id") || undefined,
+        });
+      })
+        .filter((item) => Boolean(item.id && item.label));
+      return items.length > 0 ? items : null;
+    };
+    this.getNavItems = () => {
+      // Return cached items if available
+      if (this.cachedNavItems) {
+        return this.cachedNavItems;
+      }
+      // Extract navigation items from slots (SEO-friendly approach)
+      const slotItems = this.extractNavItemsFromSlots();
+      if (slotItems) {
+        this.cachedNavItems = slotItems;
+        return slotItems;
+      }
+      // If navItems prop is provided, parse and use it (fallback)
+      const propItems = this.parsePropNavItems();
+      if (propItems) {
+        this.cachedNavItems = propItems;
+        return propItems;
+      }
+      // Return empty array if no navigation items found
+      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);
+    };
+    this.hasSubnavMenuRightContent = () => {
+      const slotElement = this.el.querySelector('[slot="subnav-menu-right"]');
+      return Boolean(slotElement === null || slotElement === void 0 ? void 0 : slotElement.children.length);
+    };
+    this.calculateVisibleItems = () => {
+      const navItems = this.getNavItems();
+      // Handle case where no navigation items are found
+      if (navItems.length === 0) {
+        this.visibleItems = [];
+        this.overflowItems = [];
+        this.selectedMobileItem = null;
+        return;
+      }
+      // Check if we're in mobile mode (below 767px)
+      const wasMobile = this.isMobile;
+      this.isMobile = window.innerWidth <= 767;
+      // Force re-render if mobile state changed
+      if (wasMobile !== this.isMobile) {
+        this.showOverflowMenu = false; // Close any open menus when switching modes
+      }
+      if (this.isMobile) {
+        // 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);
+      }
+      else {
+        // Desktop behavior - calculate based on available width
+        const containerWidth = this.navContainer
+          ? this.navContainer.offsetWidth
+          : 0;
+        const buttonWidth = this.overflowButton
+          ? this.overflowButton.offsetWidth + 32
+          : 0; // 32px for gap
+        const availableWidth = containerWidth - buttonWidth - 48; // 48px for right margin
+        // Fallback if container width is not available yet
+        if (containerWidth === 0) {
+          this.visibleItems = navItems;
+          this.overflowItems = [];
+          return;
+        }
+        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);
+        for (let i = 0; i < navItems.length; i++) {
+          const item = navItems[i];
+          tempContainer.textContent = item.label;
+          const itemWidth = tempContainer.offsetWidth + 32; // 32px for gap
+          if (totalWidth + itemWidth <= availableWidth) {
+            totalWidth += itemWidth;
+            visibleCount++;
+          }
+          else {
+            break;
+          }
+        }
+        document.body.removeChild(tempContainer);
+        this.visibleItems = navItems.slice(0, visibleCount);
+        this.overflowItems = navItems.slice(visibleCount);
+      }
+      // Don't automatically show overflow menu - it should be closed by default
+      // this.showOverflowMenu = this.overflowItems.length > 0;
+    };
+    this.toggleOverflowMenu = () => {
+      this.showOverflowMenu = !this.showOverflowMenu;
+    };
+    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
+      if (this.manualNavigationTimeout) {
+        clearTimeout(this.manualNavigationTimeout);
+      }
+      // Reset manual navigation flag after scroll animation completes
+      this.manualNavigationTimeout = window.setTimeout(() => {
+        this.isManualNavigation = false;
+      }, 1500); // Give enough time for smooth scroll to complete
+      // Emit custom event for parent components
+      const customEvent = new CustomEvent("sectionChange", {
+        detail: { section },
+        bubbles: true,
+        composed: true,
+      });
+      this.el.dispatchEvent(customEvent);
+      // Smooth scroll to section if it exists
+      const targetElement = document.querySelector(`#${section}`);
+      if (targetElement) {
+        targetElement.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+      }
+    };
+    this.activeSection = "overview";
+    this.navItems = "";
+    this.currentActive = "overview";
+    this.visibleItems = [];
+    this.overflowItems = [];
+    this.showOverflowMenu = 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();
+  }
+  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);
+  }
+  addEventListeners() {
+    window.addEventListener("resize", this.boundHandleResize);
+    document.addEventListener("click", this.boundHandleClickOutside);
+    document.addEventListener("keydown", this.boundHandleKeyDown);
+    window.addEventListener("scroll", this.boundHandleScroll, {
+      passive: true,
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+    this.cleanupTimeouts();
+    this.cleanupIntersectionObserver();
+  }
+  removeEventListeners() {
+    window.removeEventListener("resize", this.boundHandleResize);
+    document.removeEventListener("click", this.boundHandleClickOutside);
+    document.removeEventListener("keydown", this.boundHandleKeyDown);
+    window.removeEventListener("scroll", this.boundHandleScroll);
+  }
+  cleanupTimeouts() {
+    [
+      this.scrollTimeout,
+      this.scrollThrottleTimeout,
+      this.manualNavigationTimeout,
+    ]
+      .filter(Boolean)
+      .forEach((timeout) => clearTimeout(timeout));
+  }
+  cleanupIntersectionObserver() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+  }
+  parsePropNavItems() {
+    var _a;
+    if (!((_a = this.navItems) === null || _a === void 0 ? void 0 : _a.trim()))
+      return null;
+    try {
+      const parsedItems = JSON.parse(this.navItems);
+      if (Array.isArray(parsedItems) && parsedItems.length > 0) {
+        const validItems = parsedItems.filter((item) => Boolean(item &&
+          typeof item.id === "string" &&
+          typeof item.label === "string"));
+        return validItems.length > 0 ? validItems : null;
+      }
+    }
+    catch (error) {
+      console.warn("Invalid navItems JSON provided to ptc-subnav-v2:", error);
+    }
+    return null;
+  }
+  render() {
+    var _a, _b;
+    const navItems = this.getNavItems();
+    // 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) => {
+        if (e.key === "Enter" ||
+          e.key === " ") {
+          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 ===
+        item.id
+        ? "active"
+        : ""}`, role: "menuitem", "aria-current": this
+        .currentActive ===
+        item.id
+        ? "page"
+        : undefined, "tracker-id": item.trackerId ||
+        `mobile-nav-${item.id}`, 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
+        ? "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) => {
+        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
+        .currentActive ===
+        item.id
+        ? "active"
+        : ""}`, title: item.title || "", "tracker-id": item.trackerId ||
+        `overflow-link-${item.id}`, role: "menuitem", onClick: (e) => {
+        this.handleNavClick(e, item.id);
+        this.showOverflowMenu = false;
+      }, "aria-current": this
+        .currentActive ===
+        item.id
+        ? "page"
+        : undefined }, item.label)))))))))), hasRightContent && (index.h("div", { class: "subnav-menu-right" }, index.h("slot", { name: "subnav-menu-right" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+PtcSubnavV2.style = ptcSubnavV2Css;
+
+exports.ptc_subnav_v2 = PtcSubnavV2;

package/dist/cjs/ptc-text-copy-with-background.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const ptcTextCopyWithBackgroundCss = "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;position:relative;width:100%;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.6}:host(.hero-footer-cta){padding:var(--ptc-layout-spacing-05) 0}@media only screen and (min-width: 768px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-01)) 0}}:host(.hero-footer-cta) .copy-bg-overlay-layer{opacity:0.6}:host(.tab-cta-with-background){min-height:300px;padding:var(--ptc-layout-spacing-02)}:host(.tab-cta-with-background) .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover;display:none;border-radius:4px}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){min-height:400px}:host(.tab-cta-with-background) .copy-bg-image{display:block}}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center;padding:var(--ptc-element-spacing-09)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}:host(.bottom-right) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1)}:host(.bottom-left) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1) scaleX(-1);left:80px;right:auto}:host(.top-left) .tcb-top-slit{top:-1px;bottom:auto;transform:scale(1.5, 1) rotate(180deg);left:80px;right:auto}:host(.case-studies){min-height:25rem;height:auto;margin-bottom:10rem;display:flex;align-items:center}@media only screen and (min-width: 768px){:host(.case-studies){min-height:33.75rem;height:auto;margin-bottom:0;padding-top:var(--ptc-layout-spacing-06)}}:host(.case-studies) .card-wrap{position:relative;border:1px solid transparent;width:100%;height:100%;max-width:540px;bottom:-13rem}@media only screen and (min-width: 768px){:host(.case-studies) .card-wrap{bottom:auto}}:host(.case-studies) .card-wrap::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;top:0px;left:0px;animation:widthAnimate 0.2s linear 0.2s 1 forwards}:host(.case-studies) .card-wrap::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;top:0px;right:0px;animation:heightAnimate 0.2s linear 0.4s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border{border:1px solid transparent;position:absolute;left:-1px;right:0;bottom:0px;top:-1px;width:100%;height:100%;box-shadow:var(--ptc-shadow-x-small)}:host(.case-studies) .card-wrap .card-animated-border::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;bottom:0px;right:0px;animation:widthAnimate 0.2s linear 0.6s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;bottom:0px;left:0px;animation:heightAnimate 0.2s linear 0.8s 1 forwards}:host(.case-studies) .card-wrap .card-content{opacity:0;animation:fadeIn 0.5s ease-in 0.9s 1 forwards;background-color:transparent;width:100%;height:100%}:host(.case-studies) .card-wrap .card-content .card-layout{padding:var(--ptc-layout-spacing-04);background-color:#fff}@keyframes widthAnimate{0%{width:0}100%{width:100%}}@keyframes heightAnimate{0%{height:0}100%{height:100%}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host(.case-studies) .content-wrap{width:100%}:host(.case-studies) .ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1200px}}:host(.bg-image-absent){padding:0rem}";
+const ptcTextCopyWithBackgroundCss = "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;position:relative;width:100%;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.6}:host(.hero-footer-cta){padding:var(--ptc-layout-spacing-05) 0}@media only screen and (min-width: 768px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-01)) 0}}:host(.hero-footer-cta) .copy-bg-overlay-layer{opacity:0.6}:host(.tab-cta-with-background){min-height:300px;padding:var(--ptc-layout-spacing-02)}:host(.tab-cta-with-background) .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover;display:none;border-radius:4px}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){min-height:400px}:host(.tab-cta-with-background) .copy-bg-image{display:block}}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center;padding:var(--ptc-element-spacing-09)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}:host(.bottom-right) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1)}:host(.bottom-left) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1) scaleX(-1);left:80px;right:auto}:host(.top-left) .tcb-top-slit{top:-1px;bottom:auto;transform:scale(1.5, 1) rotate(180deg);left:80px;right:auto}:host(.case-studies){min-height:25rem;height:auto;margin-bottom:10rem;display:flex;align-items:center}@media only screen and (min-width: 768px){:host(.case-studies){min-height:33.75rem;height:auto;margin-bottom:0;padding-top:var(--ptc-layout-spacing-06)}}:host(.case-studies) .card-wrap{position:relative;border:1px solid transparent;width:100%;height:100%;max-width:540px;bottom:-13rem}@media only screen and (min-width: 768px){:host(.case-studies) .card-wrap{bottom:auto}}:host(.case-studies) .card-wrap::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;top:0px;left:0px;animation:widthAnimate 0.2s linear 0.2s 1 forwards}:host(.case-studies) .card-wrap::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;top:0px;right:0px;animation:heightAnimate 0.2s linear 0.4s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border{border:1px solid transparent;position:absolute;left:-1px;right:0;bottom:0px;top:-1px;width:100%;height:100%;box-shadow:var(--ptc-shadow-x-small)}:host(.case-studies) .card-wrap .card-animated-border::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;bottom:0px;right:0px;animation:widthAnimate 0.2s linear 0.6s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;bottom:0px;left:0px;animation:heightAnimate 0.2s linear 0.8s 1 forwards}:host(.case-studies) .card-wrap .card-content{opacity:0;animation:fadeIn 0.5s ease-in 0.9s 1 forwards;background-color:transparent;width:100%;height:100%}:host(.case-studies) .card-wrap .card-content .card-layout{padding:var(--ptc-layout-spacing-04);background-color:#fff}@keyframes widthAnimate{0%{width:0}100%{width:100%}}@keyframes heightAnimate{0%{height:0}100%{height:100%}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host(.case-studies) .content-wrap{width:100%}:host(.case-studies) .ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1200px}}@media (prefers-reduced-motion: reduce){:host(.case-studies) .card-wrap::after{animation:none}:host(.case-studies) .card-wrap::before{animation:none}:host(.case-studies) .card-wrap .card-animated-border::before{animation:none}:host(.case-studies) .card-wrap .card-animated-border::after{animation:none}:host(.case-studies) .card-wrap .card-content{opacity:1;visibility:visible;animation:none}}:host(.bg-image-absent){padding:0rem}";
 
 const PtcTextCopyWithBackground = class {
   constructor(hostRef) {