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

@ptcwebops/ptcw-design 6.4.9 → 6.4.10

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

Files changed (403) hide show

package/dist/collection/components/ptc-icon-component/ptc-icon-component.css CHANGED Viewed

@@ -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-jumbotron/ptc-jumbotron.css CHANGED Viewed

@@ -1804,7 +1804,8 @@ ptc-info-tile:focus-visible {
   outline-offset: 2px;
 }
-:host(.light-video-jumbotron),
-:host(.light-jumbotron) {
+:host(.light-video-jumbotron) .bg-overlay,
+:host(.light-jumbotron) .bg-overlay {
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
 }

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

@@ -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 CHANGED Viewed

@@ -62,25 +62,27 @@ ptc-footer {
   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: var(--ptc-line-height-densest);
+  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%;
-  right: 0;
-  background: var(--color-white);
+  background: var(--color-standard-gray);
   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;
@@ -103,13 +105,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;
@@ -176,7 +181,7 @@ ptc-footer {
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-left ul.desktop-menu li a {
-    padding: 20px 0;
+    padding: 20px 0 17px 0;
   }
 }
 :host .subnav-menu-left ul.desktop-menu li a:hover {
@@ -202,10 +207,11 @@ ptc-footer {
 :host .subnav-menu-left .overflow-menu-container .overflow-button {
   background: none;
   border: none;
-  padding: 20px 0;
+  padding: 20px 0 17px 0;
   cursor: pointer;
   justify-content: center;
-  min-width: 32px;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button:hover {
   color: var(--color-gray-10);
@@ -225,6 +231,7 @@ ptc-footer {
   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);
@@ -238,7 +245,7 @@ ptc-footer {
   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);
+  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);
@@ -247,6 +254,18 @@ ptc-footer {
 :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);
@@ -262,7 +281,7 @@ ptc-footer {
   height: 100%;
   background-color: var(--color-green-07);
   position: absolute;
-  left: 16px;
+  left: 14px;
   top: 0;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:focus-visible {
@@ -292,15 +311,11 @@ ptc-footer {
   background: transparent;
   border: none;
   border-bottom: 3px solid var(--color-green-07);
-  padding: 20px 0;
+  padding: 20px 0 17px 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);
@@ -338,9 +353,9 @@ ptc-footer {
 }
 :host .mobile-dropdown-container .mobile-dropdown {
   position: absolute;
-  top: calc(100% - 4px);
-  background: var(--color-white);
-  border: 1px solid var(--color-gray-02);
+  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;
@@ -365,6 +380,7 @@ ptc-footer {
   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);
@@ -376,7 +392,7 @@ ptc-footer {
   height: 100%;
   background-color: var(--color-green-07);
   position: absolute;
-  left: 16px;
+  left: 14px;
   top: 0;
 }
 :host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item:focus-visible {
@@ -389,7 +405,6 @@ ptc-footer {
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-right {
-    margin-left: 48px;
     width: auto;
     max-width: 300px;
   }