@ptcwebops/ptcw-design 6.4.17-beta → 6.4.18-beta

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

@@ -572,7 +572,6 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card) ::slotted([slot=slot-date]) {
@@ -592,7 +591,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 
@@ -688,7 +686,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 @media only screen and (min-width: 1200px) {
@@ -734,7 +731,6 @@ ptc-footer {
   margin-bottom: 8px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 @media (min-width: 768px) {
@@ -763,7 +759,6 @@ ptc-footer {
     margin-bottom: 8px;
     margin-top: 0rem;
     word-break: break-word;
-    -webkit-hyphens: auto;
     hyphens: auto;
   }
 }
@@ -778,7 +773,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card-horizontal) ::slotted([slot=slot-description]) p {
@@ -942,8 +936,7 @@ ptc-footer {
   margin-bottom: 12px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: manual;
-          hyphens: manual;
+  hyphens: manual;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
@@ -954,7 +947,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) p {
@@ -966,7 +958,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 39px;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) span {
@@ -1189,7 +1180,6 @@ ptc-footer {
   width: fit-content;
   clip-path: inset(-6px -6px -6px 0px);
   word-break: break-word;
-  -webkit-hyphens: manual;
   hyphens: manual;
 }
 :host(.related-card) .link-wrapper {
@@ -1282,7 +1272,6 @@ ptc-footer {
   display: inline-block;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) .card-body .small {
@@ -1303,7 +1292,6 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) ::slotted([slot=slot-description]) {
@@ -1407,7 +1395,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
   margin-bottom: 0rem;
 }
@@ -1428,7 +1415,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-description]) p {

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.css

@@ -194,7 +194,6 @@ ptc-footer {
   display: flex;
   align-items: baseline;
   word-break: break-word;
-  -webkit-hyphens: manual;
   hyphens: manual;
 }
 :host .radio-label input {

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -252,8 +252,7 @@ ptc-footer {
   border-radius: 4px 4px 0px 0px;
   border-bottom: 2px solid var(--color-blue-07);
   background: transparent;
-  -webkit-backdrop-filter: blur(12px);
-          backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   padding: 24px;
   word-wrap: normal;
   color: var(--color-white);

package/dist/collection/components/ptc-image-download-strip/ptc-image-download-strip.css

@@ -66,8 +66,7 @@ ptc-footer {
 :host .strip {
   position: absolute;
   bottom: 0;
-  -webkit-backdrop-filter: blur(15.2px);
-          backdrop-filter: blur(15.2px);
+  backdrop-filter: blur(15.2px);
   background: white;
   background: rgba(255, 255, 255, 0.3);
   width: 100%;

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -206,15 +206,13 @@ ptc-footer {
   line-height: 24px;
   text-align: left;
   word-break: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
   margin-bottom: 2px;
 }
 @media only screen and (min-width: 1200px) {
   :host(.media-card) .nav-card-wrap .media-card-wrap h4 {
     font-size: 12px;
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     line-height: 18px;
     text-align: left;
     margin-bottom: 2px;
@@ -228,7 +226,6 @@ ptc-footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: 400;
-  -webkit-hyphens: auto;
   hyphens: auto;
   letter-spacing: normal;
   line-height: 21px;

package/dist/collection/components/ptc-seo-title/ptc-seo-title.js

@@ -191,7 +191,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"margin-flush\"\r\n\t\t| \"margin-top-3\"\r\n\t\t| \"margin-top-4\"\r\n\t\t| \"margin-top-5\"\r\n\t\t| \"margin-top-6\"\r\n\t\t| \"margin-bottom-3\"\r\n\t\t| \"margin-bottom-4\"\r\n\t\t| \"margin-bottom-5\"\r\n\t\t| \"margin-bottom-6\"\r\n\t\t| \"margin-3\"\r\n\t\t| \"margin-4\"\r\n\t\t| \"margin-5\"\r\n\t\t| \"margin-6\"\r\n\t\t| \"margin-9\"",
+          "original": "| \"margin-flush\"\n\t\t| \"margin-top-3\"\n\t\t| \"margin-top-4\"\n\t\t| \"margin-top-5\"\n\t\t| \"margin-top-6\"\n\t\t| \"margin-bottom-3\"\n\t\t| \"margin-bottom-4\"\n\t\t| \"margin-bottom-5\"\n\t\t| \"margin-bottom-6\"\n\t\t| \"margin-3\"\n\t\t| \"margin-4\"\n\t\t| \"margin-5\"\n\t\t| \"margin-6\"\n\t\t| \"margin-9\"",
           "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-9\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
           "references": {}
         },
@@ -225,7 +225,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"xx-small\"\r\n\t\t| \"x-small\"\r\n\t\t| \"small\"\r\n\t\t| \"medium\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"xxxx-large-allbp\"\r\n\t\t| \"xx-large-allbp\"\r\n\t\t| \"xxxx-large-desktop\"\r\n\t\t| \"xxxx-large-store\"",
+          "original": "| \"xx-small\"\n\t\t| \"x-small\"\n\t\t| \"small\"\n\t\t| \"medium\"\n\t\t| \"large\"\n\t\t| \"x-large\"\n\t\t| \"xx-large\"\n\t\t| \"xxx-large\"\n\t\t| \"xxxx-large\"\n\t\t| \"xxxx-large-allbp\"\n\t\t| \"xx-large-allbp\"\n\t\t| \"xxxx-large-desktop\"\n\t\t| \"xxxx-large-store\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-large-allbp\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\" | \"xxxx-large-allbp\" | \"xxxx-large-desktop\" | \"xxxx-large-store\"",
           "references": {}
         },
@@ -242,7 +242,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"densest\"\r\n\t\t| \"denser\"\r\n\t\t| \"dense\"\r\n\t\t| \"normal\"\r\n\t\t| \"loose\"\r\n\t\t| \"looser\"\r\n\t\t| \"paragraph\"",
+          "original": "| \"densest\"\n\t\t| \"denser\"\n\t\t| \"dense\"\n\t\t| \"normal\"\n\t\t| \"loose\"\n\t\t| \"looser\"\n\t\t| \"paragraph\"",
           "resolved": "\"dense\" | \"denser\" | \"densest\" | \"loose\" | \"looser\" | \"normal\" | \"paragraph\"",
           "references": {}
         },

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

@@ -103,13 +103,16 @@ ptc-footer {
 }
 
 :host {
+  position: relative;
   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);
+  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;

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

@@ -2,6 +2,9 @@ import { Host, h } from "@stencil/core";
 export class PtcSubnavV2 {
   constructor() {
     this.cachedNavItems = null;
+    this.isSticky = false;
+    this.originalTop = 0;
+    this.placeholderElement = null;
     this.handleClickOutside = (event) => {
       if (!this.el.contains(event.target)) {
         this.showOverflowMenu = false;
@@ -52,8 +55,75 @@ export class PtcSubnavV2 {
         this.scrollThrottleTimeout = null;
       }, 16); // ~60fps throttling
     };
+    this.initializeStickyPosition = () => {
+      // Store the original position of the subnav
+      const rect = this.el.getBoundingClientRect();
+      this.originalTop = rect.top + window.scrollY;
+    };
+    this.handleStickyScroll = () => {
+      // Throttle sticky scroll events for better performance
+      if (this.stickyScrollTimeout) {
+        return;
+      }
+      this.stickyScrollTimeout = window.setTimeout(() => {
+        var _a;
+        const scrollY = window.scrollY;
+        // Check if we should make the subnav sticky
+        const shouldBeSticky = scrollY >= this.originalTop;
+        if (shouldBeSticky && !this.isSticky) {
+          // Store the original height before making it fixed
+          const originalHeight = this.el.offsetHeight;
+          // Create placeholder element to maintain space
+          this.placeholderElement = document.createElement("div");
+          this.placeholderElement.style.height = `${originalHeight}px`;
+          this.placeholderElement.style.width = "100%";
+          this.placeholderElement.style.pointerEvents = "none";
+          // Insert placeholder before the subnav
+          (_a = this.el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.placeholderElement, this.el);
+          // Add transition class for smooth animation
+          this.el.classList.add("sticky-transition");
+          // Apply fixed positioning with smooth transition
+          this.el.style.position = "fixed";
+          this.el.style.top = "0";
+          this.el.style.left = "0";
+          this.el.style.right = "0";
+          this.el.style.width = "100%";
+          this.el.style.zIndex = "105";
+          this.el.style.transform = "translateY(0)";
+          this.isSticky = true;
+        }
+        else if (!shouldBeSticky && this.isSticky) {
+          // Remove transition class and reset transform
+          this.el.classList.remove("sticky-transition");
+          this.el.style.transform = "";
+          // Remove fixed positioning and restore original position
+          this.el.style.position = "";
+          this.el.style.top = "";
+          this.el.style.left = "";
+          this.el.style.right = "";
+          this.el.style.width = "";
+          this.el.style.zIndex = "";
+          this.isSticky = false;
+          // Remove placeholder element
+          if (this.placeholderElement) {
+            this.placeholderElement.remove();
+            this.placeholderElement = null;
+          }
+        }
+        this.stickyScrollTimeout = null;
+      }, 16); // ~60fps throttling
+    };
     this.handleResize = () => {
       this.navContainer && setTimeout(() => this.calculateVisibleItems(), 10);
+      // Recalculate original position on resize
+      if (!this.isSticky) {
+        this.initializeStickyPosition();
+      }
+      else if (this.placeholderElement) {
+        // Update placeholder height if sticky and resized
+        const currentHeight = this.el.offsetHeight;
+        this.placeholderElement.style.height = `${currentHeight}px`;
+      }
     };
     this.setupIntersectionObserver = () => {
       // Get all sections that correspond to our navigation items
@@ -301,12 +371,14 @@ export class PtcSubnavV2 {
     this.handleResize();
     this.addEventListeners();
     this.setupIntersectionObserver();
+    this.initializeStickyPosition();
   }
   bindEventHandlers() {
     this.boundHandleResize = this.handleResize.bind(this);
     this.boundHandleClickOutside = this.handleClickOutside.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
     this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this.boundHandleStickyScroll = this.handleStickyScroll.bind(this);
   }
   addEventListeners() {
     window.addEventListener("resize", this.boundHandleResize);
@@ -315,23 +387,29 @@ export class PtcSubnavV2 {
     window.addEventListener("scroll", this.boundHandleScroll, {
       passive: true,
     });
+    window.addEventListener("scroll", this.boundHandleStickyScroll, {
+      passive: true,
+    });
   }
   disconnectedCallback() {
     this.removeEventListeners();
     this.cleanupTimeouts();
     this.cleanupIntersectionObserver();
+    this.cleanupPlaceholder();
   }
   removeEventListeners() {
     window.removeEventListener("resize", this.boundHandleResize);
     document.removeEventListener("click", this.boundHandleClickOutside);
     document.removeEventListener("keydown", this.boundHandleKeyDown);
     window.removeEventListener("scroll", this.boundHandleScroll);
+    window.removeEventListener("scroll", this.boundHandleStickyScroll);
   }
   cleanupTimeouts() {
     [
       this.scrollTimeout,
       this.scrollThrottleTimeout,
       this.manualNavigationTimeout,
+      this.stickyScrollTimeout,
     ]
       .filter(Boolean)
       .forEach((timeout) => clearTimeout(timeout));
@@ -341,6 +419,12 @@ export class PtcSubnavV2 {
       this.intersectionObserver.disconnect();
     }
   }
+  cleanupPlaceholder() {
+    if (this.placeholderElement) {
+      this.placeholderElement.remove();
+      this.placeholderElement = null;
+    }
+  }
   parsePropNavItems() {
     var _a;
     if (!((_a = this.navItems) === null || _a === void 0 ? void 0 : _a.trim()))

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

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

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

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

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

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