@ptcwebops/ptcw-design 6.4.16 → 6.4.17-beta

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

@@ -1,15 +1,11 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.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;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 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 PtcSubnavV2 = class {
   constructor(hostRef) {
     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,82 +45,19 @@ const PtcSubnavV2 = class {
         // Only update if different from current active
         if (activeSection !== this.currentActive) {
           this.currentActive = activeSection;
-        }
-        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;
+          // 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.stickyScrollTimeout = null;
+        this.scrollThrottleTimeout = 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
@@ -160,6 +93,13 @@ 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
@@ -176,24 +116,6 @@ 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)
@@ -233,6 +155,9 @@ 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);
     };
@@ -246,6 +171,7 @@ const PtcSubnavV2 = class {
       if (navItems.length === 0) {
         this.visibleItems = [];
         this.overflowItems = [];
+        this.selectedMobileItem = null;
         return;
       }
       // Check if we're in mobile mode (below 767px)
@@ -259,6 +185,7 @@ 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);
       }
@@ -279,21 +206,19 @@ const PtcSubnavV2 = class {
         }
         let visibleCount = 0;
         let totalWidth = 0;
-        // 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);
+        // 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];
-          this.measurementElement.textContent = item.label;
-          const itemWidth = this.measurementElement.offsetWidth + 32; // 32px for gap
+          tempContainer.textContent = item.label;
+          const itemWidth = tempContainer.offsetWidth + 32; // 32px for gap
           if (totalWidth + itemWidth <= availableWidth) {
             totalWidth += itemWidth;
             visibleCount++;
@@ -302,7 +227,7 @@ const PtcSubnavV2 = class {
             break;
           }
         }
-        document.body.removeChild(this.measurementElement);
+        document.body.removeChild(tempContainer);
         this.visibleItems = navItems.slice(0, visibleCount);
         this.overflowItems = navItems.slice(visibleCount);
       }
@@ -311,33 +236,29 @@ 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
       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 },
@@ -345,77 +266,13 @@ const PtcSubnavV2 = class {
         composed: true,
       });
       this.el.dispatchEvent(customEvent);
-      // Smooth scroll to section if it exists, accounting for sticky nav height
+      // Smooth scroll to section if it exists
       const targetElement = document.querySelector(`#${section}`);
       if (targetElement) {
-        // 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,
+        targetElement.scrollIntoView({
           behavior: "smooth",
+          block: "start",
         });
-        // Reset manual navigation flag and correct scroll position after animation
-        this.manualNavigationTimeout = window.setTimeout(() => {
-          this.isManualNavigation = false;
-          // Re-check position to account for lazy-loaded images
-          const finalNavHeight = this.el.offsetHeight;
-          const finalTargetPosition = targetElement.getBoundingClientRect().top +
-            window.scrollY -
-            finalNavHeight;
-          // If we're off by more than a small threshold, correct it instantly.
-          if (Math.abs(window.scrollY - finalTargetPosition) > 5) {
-            window.scrollTo({
-              top: finalTargetPosition,
-              behavior: "smooth",
-            });
-          }
-        }, 800); // Give enough time for smooth scroll to complete
-      }
-      else {
-        // Fallback timeout if the element doesn't exist
-        this.manualNavigationTimeout = window.setTimeout(() => {
-          this.isManualNavigation = false;
-        }, 1500);
-      }
-    };
-    this.handleInitialLoadWithHash = () => {
-      if (window.location.hash) {
-        if (document.readyState === "complete") {
-          // If the page is already loaded, scroll immediately
-          this.handleHashChange();
-        }
-        else {
-          // Otherwise, wait for the page to fully load before scrolling
-          window.addEventListener("load", this.boundHandleHashChange, {
-            once: true,
-          });
-        }
-      }
-    };
-    this.handleHashChange = () => {
-      const hash = window.location.hash;
-      if (hash) {
-        const sectionId = hash.substring(1);
-        this.scrollToSection(sectionId);
-      }
-    };
-    this.scrollToSection = (sectionId, smooth = true) => {
-      const targetElement = document.getElementById(sectionId);
-      if (targetElement) {
-        const navHeight = this.el.offsetHeight;
-        const targetPosition = targetElement.getBoundingClientRect().top +
-          window.scrollY -
-          navHeight;
-        window.scrollTo({
-          top: targetPosition,
-          behavior: smooth ? "smooth" : "auto",
-        });
-        this.currentActive = sectionId;
       }
     };
     this.activeSection = "overview";
@@ -424,29 +281,36 @@ 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();
-    this.handleInitialLoadWithHash();
   }
   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);
-    this.boundHandleHashChange = this.handleHashChange.bind(this);
   }
   addEventListeners() {
     window.addEventListener("resize", this.boundHandleResize);
@@ -455,60 +319,32 @@ const PtcSubnavV2 = class {
     window.addEventListener("scroll", this.boundHandleScroll, {
       passive: true,
     });
-    window.addEventListener("scroll", this.boundHandleStickyScroll, {
-      passive: true,
-    });
-    window.addEventListener("hashchange", this.boundHandleHashChange);
-    window.addEventListener("load", this.boundHandleHashChange, {
-      once: 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);
-    window.removeEventListener("hashchange", this.boundHandleHashChange);
-    window.removeEventListener("load", this.boundHandleHashChange);
   }
   cleanupTimeouts() {
-    if (this.scrollTimeout)
-      clearTimeout(this.scrollTimeout);
-    if (this.scrollThrottleTimeout)
-      clearTimeout(this.scrollThrottleTimeout);
-    if (this.manualNavigationTimeout)
-      clearTimeout(this.manualNavigationTimeout);
-    if (this.stickyScrollTimeout)
-      clearTimeout(this.stickyScrollTimeout);
+    [
+      this.scrollTimeout,
+      this.scrollThrottleTimeout,
+      this.manualNavigationTimeout,
+    ]
+      .filter(Boolean)
+      .forEach((timeout) => clearTimeout(timeout));
   }
   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()))
@@ -528,16 +364,14 @@ 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 (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) => {
@@ -546,31 +380,32 @@ const PtcSubnavV2 = class {
           e.preventDefault();
           this.toggleOverflowMenu();
         }
-      }, "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 ===
+      }, "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 ===
         item.id
         ? "active"
-        : ""}`, role: "menuitem", "aria-current": this.currentActive ===
+        : ""}`, role: "menuitem", "aria-current": this
+        .currentActive ===
         item.id
         ? "page"
-        : undefined, title: item.title || "", onClick: (e) => {
+        : 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
-    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
+    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
         ? "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", id: "overflow-menu", ref: (el) => (this.overflowMenuContainer = el) }, 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", "tracker-id": "overflow-menu" }, 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 ${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
+      }, "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
         .currentActive ===
         item.id
         ? "active"

package/dist/esm/ptc-subnav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
 
 const ptcSubnavCss = "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;width:100%;background-color:var(--color-gray-12);z-index:990;position:relative}@media only screen and (min-width: 1200px){:host{background-color:var(--color-gray-10)}}:host .stickyEl.sticky{top:0;position:fixed;width:100%;z-index:990;transition:top 0.5s}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1150px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media (min-width: 1250px){:host .navbar .navbar-inner{max-width:1200px}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px;max-height:calc(100vh - 53px)}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between;max-height:auto}}:host .navbar.navOpen .navbar-inner{display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
 

package/dist/esm/ptc-svg-btn.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
 const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
     <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">

package/dist/esm/ptc-tab-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
 
 const ptcTabListCss = "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}}ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:var(--color-white);padding:24px 16px 16px 16px;border-radius:4px}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner{padding:24px}}ptc-tab-list.tab-with-banner .tabs-content{padding:16px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p:not(video-js p),ptc-tab-list.tab-with-banner .tabs-content span:not(video-js span),ptc-tab-list.tab-with-banner .tabs-content h1:not(video-js h1),ptc-tab-list.tab-with-banner .tabs-content h2:not(video-js h2),ptc-tab-list.tab-with-banner .tabs-content h3:not(video-js h3),ptc-tab-list.tab-with-banner .tabs-content h4:not(video-js h4),ptc-tab-list.tab-with-banner .tabs-content h5:not(video-js h5),ptc-tab-list.tab-with-banner .tabs-content h6:not(video-js h6),ptc-tab-list.tab-with-banner .tabs-content ul:not(video-js ul),ptc-tab-list.tab-with-banner .tabs-content li:not(video-js li),ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table){color:var(--color-gray-12)}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-content{padding:24px 0 0 0}}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-header{align-items:stretch;padding-left:0rem;width:calc(100% - 44px);display:flex;justify-content:space-between;align-items:center;flex-direction:row;padding-right:0}ptc-tab-list.tab-with-banner tab-header{padding:0 16px;display:flex;align-items:center;flex:1 0 0;align-self:stretch;text-align:center;flex-direction:column;align-items:center}}ptc-tab-list.tab-with-banner .tab-header{padding:0 0 1rem 0}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px;white-space:normal;height:100%;align-content:center;transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}ptc-tab-list.tab-with-banner .tab-header:hover{color:var(--color-gray-10)}}@media (min-width: 1080px){ptc-tab-list.tab-with-banner .tab-header{min-width:230px}}@media only screen and (min-width: 1200px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px}}@media only screen and (min-width: 1440px){ptc-tab-list.tab-with-banner .tab-header{min-width:175px}}ptc-tab-list.tab-with-banner .tabs-header-container{display:flex}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px;min-height:300px}.ellipsis-btn{display:none}@media only screen and (min-width: 768px){.ellipsis-btn.default{position:absolute;top:auto;right:0;bottom:9px}}@media only screen and (min-width: 1440px){.ellipsis-btn.default{bottom:15px}}@media only screen and (min-width: 1440px){.ellipsis-btn{bottom:15px}}.ellipsis-btn.active{display:inline-block}.ellipsis-btn:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}tab-header{padding-right:48px}";
 

package/dist/esm/ptc-tab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
 const ptcTabsCss = "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;margin-top:var(--ptc-element-spacing-03);color:var(--color-gray-12);box-sizing:border-box}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block;transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium)}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);color:var(--color-white)}:host .ptc-pricing-block:hover:not(.active){background-color:var(--color-gray-03)}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:right;float:right;margin:15px 20px 15px 15px;display:block}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 15px 20px;display:inline-block}.tabs-list{border-bottom:1px solid #dddddd;padding:0 5px}.tab-button{border:0;font-size:14px;padding:8px;outline:none;cursor:pointer}.tab-button:hover:not(:disabled):not(.active){border-bottom:3px solid grey}.tab-button:disabled{opacity:0.4}.tab-button.active{border-bottom:3px solid blue;font-weight:600}";
 

package/dist/esm/ptc-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c83db688.js';
 
 const ptcTabsCss = "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;margin-top:var(--ptc-element-spacing-03);color:var(--color-gray-12);box-sizing:border-box}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block;transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium)}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);color:var(--color-white)}:host .ptc-pricing-block:hover:not(.active){background-color:var(--color-gray-03)}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:right;float:right;margin:15px 20px 15px 15px;display:block}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 15px 20px;display:inline-block}.tabs-list{border-bottom:1px solid #dddddd;padding:0 5px}.tab-button{border:0;font-size:14px;padding:8px;outline:none;cursor:pointer}.tab-button:hover:not(:disabled):not(.active){border-bottom:3px solid grey}.tab-button:disabled{opacity:0.4}.tab-button.active{border-bottom:3px solid blue;font-weight:600}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.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{filter:url(#blur);-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}";