@ptcwebops/ptcw-design 6.2.22-beta → 6.2.22

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css

@@ -115,6 +115,10 @@ ptc-link, ptc-square-card,
   /* scroll-snap-align: start; */
   /* Snap to start of the card */
 }
+.card:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .card ptc-img::after {
   content: "";
   top: 0px;
@@ -164,8 +168,23 @@ ptc-link, ptc-square-card,
   visibility: hidden;
 }
 
+@media only screen and (min-width: 768px) {
+  .card-title {
+    font-size: var(--ptc-font-size-xx-large);
+  }
+  .card-title span {
+    font-size: var(--ptc-font-size-xx-large);
+  }
+}
 /* Larger Screen Styles */
 @media only screen and (min-width: 992px) {
+  .card-title {
+    font-size: var(--ptc-font-size-x-large);
+  }
+  .card-title span {
+    font-size: var(--ptc-font-size-x-large);
+  }
+
   .cta-group {
     margin-bottom: 88px;
   }
@@ -192,9 +211,11 @@ ptc-link, ptc-square-card,
   }
 
   .card.active {
+    min-height: 530px;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
     box-shadow: var(--ptc-shadow-x-large);
+    height: auto;
   }
 
   .panel {
@@ -204,7 +225,7 @@ ptc-link, ptc-square-card,
     top: 0;
     left: 0;
     /* need adjustments for mobiles */
-    height: 530px;
+    min-height: 530px;
     padding: 40px;
     background: var(--color-white);
     border-radius: var(--ptc-border-radius-standard);
@@ -218,6 +239,7 @@ ptc-link, ptc-square-card,
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
     box-shadow: var(--ptc-shadow-x-large);
+    height: auto;
   }
 
   .close-panel {
@@ -239,10 +261,10 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 1200px) {
   .card-title {
-    font-size: 32px;
+    font-size: var(--ptc-font-size-xx-large);
   }
   .card-title span {
-    font-size: 32px;
+    font-size: var(--ptc-font-size-xx-large);
   }
 
   .jumbotron-cards {

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js

@@ -71,6 +71,7 @@ export class EventJumbotronExample {
     });
     panel.style.display = 'block';
     panel.style.width = `calc(100% - ${card.getBoundingClientRect().width}px`;
+    card.style.height = `${panel.getBoundingClientRect().height}px`;
     this.arrowButtons = document.querySelectorAll('ptc-scroll-button');
     setTimeout(() => {
       panel.style.transform = `translateX(${card.offsetWidth}px)`;
@@ -94,6 +95,7 @@ export class EventJumbotronExample {
     this.slider.style.transform = 'translateX(0)';
     Array.from(this.slider.children).forEach(card => {
       card.classList.remove('hidden', 'active');
+      card.style.height = '530px';
     });
   }
   enableDragging() {
@@ -124,7 +126,7 @@ export class EventJumbotronExample {
       h("div", { class: {
           'event-jumbotron': true,
           'ptc-container': this.isDesktop,
-        } }, h("div", { class: "jumbotron-cards-wrapper" }, h("div", { class: "jumbotron-cards" }, this.cards.map((card, index) => (h("div", { class: "card", onClick: () => this.handleCardClick(index), "data-panel": `panel-${index}` }, h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: "ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0}" }), h("div", { class: "text-wrapper" }, h("h3", { class: "card-title" }, card.title, ' ', h("span", null, card.description)), !this.activePanel && [h("div", { innerHTML: card.panelContent })]))))), this.cards.map((_, index) => (h("div", { id: `panel-${index}`, class: "panel" }, h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index}`), "aria-label": "Close panel" }, h("ptc-close-icon", null)), h("slot", { name: `panel-content-${index}` })))), !this.isDesktop && this.cards.map((_, index) => (h("ptc-modal", { id: `modal-${index}`, show: false, "close-on-blur": true, "modal-type": "event-listing", "custom-class": "event-mobile-modal", headerOnlyText1: this.cards[index].title, headerOnlyText2: this.cards[index].description, headerOnlyBg: this.cards[index].cardBg, bottomCloseBtn: this.modalBtnCloseText }, h("div", { innerHTML: modalContentSlots[index].innerHTML })))))),
+        } }, h("div", { class: "jumbotron-cards-wrapper" }, h("div", { class: "jumbotron-cards" }, this.cards.map((card, index) => (h("div", { class: "card", onClick: () => this.handleCardClick(index), "data-panel": `panel-${index}`, onKeyPress: () => this.handleCardClick(index), tabindex: "0" }, h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: "ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0}" }), h("div", { class: "text-wrapper" }, h("h3", { class: "card-title" }, card.title, ' ', h("span", null, card.description)), !this.activePanel && [h("div", { innerHTML: card.panelContent })]))))), this.cards.map((_, index) => (h("div", { id: `panel-${index}`, class: "panel" }, h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index}`), "aria-label": "Close panel" }, h("ptc-close-icon", null)), h("slot", { name: `panel-content-${index}` })))), !this.isDesktop && this.cards.map((_, index) => (h("ptc-modal", { id: `modal-${index}`, show: false, "close-on-blur": true, "modal-type": "event-listing", "custom-class": "event-mobile-modal", headerOnlyText1: this.cards[index].title, headerOnlyText2: this.cards[index].description, headerOnlyBg: this.cards[index].cardBg, bottomCloseBtn: this.modalBtnCloseText }, h("div", { innerHTML: modalContentSlots[index].innerHTML })))))),
       h("div", { class: "white-placeholder" }),
     ];
   }

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.css

@@ -995,8 +995,8 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
-:host {
-  display: block;
+.host-ele {
+  position: relative;
 }
 
 .hcs-title {
@@ -1020,47 +1020,40 @@ homepage-case-study-cards {
   height: 100%;
 }
 
+.swiper-container {
+  overflow: hidden;
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.swiper-container .swiper-wrapper {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 .swiper-homepage-cs {
   margin-top: 1rem;
 }
 .swiper-homepage-cs .swiper-horizontal {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 3.5rem;
-  padding-top: 2rem;
+  display: block;
+  padding-bottom: 4.104rem;
+  padding-top: 5px;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-slide:first-child {
-  margin-left: 16px;
+  margin-left: 0px !important;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-slide:last-child {
-  margin-right: 16px;
+  margin-right: 0px !important;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar {
   position: absolute;
-  left: auto;
-  transform: translateY(-13px);
+  left: 50%;
+  transform: translate(-50%, -13px);
   z-index: 50;
-  width: 209px;
+  width: 161px;
   height: 8px;
   border-radius: 999px;
   background: #E4E7E9;
 }
-@media (min-width: 480px) {
-  .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar {
-    width: 329px;
-  }
-}
-@media (min-width: 768px) {
-  .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar {
-    width: 429px;
-  }
-}
-@media (min-width: 992px) {
-  .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar {
-    width: 373px;
-  }
-}
 .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
@@ -1080,7 +1073,7 @@ homepage-case-study-cards {
   top: auto;
   bottom: 0px;
   left: auto;
-  right: calc(50% + 126.5px);
+  right: calc(50% + 116.5px);
   height: 40px;
   width: 40px;
   border-radius: 4px;
@@ -1106,30 +1099,12 @@ homepage-case-study-cards {
   height: 14px;
   width: 9px;
 }
-@media (min-width: 480px) {
-  .swiper-homepage-cs .swiper-button-prev,
-.swiper-homepage-cs .swiper-rtl .swiper-button-next {
-    right: calc(50% + 180.5px);
-  }
-}
-@media (min-width: 768px) {
-  .swiper-homepage-cs .swiper-button-prev,
-.swiper-homepage-cs .swiper-rtl .swiper-button-next {
-    right: calc(50% + 230.5px);
-  }
-}
-@media (min-width: 992px) {
-  .swiper-homepage-cs .swiper-button-prev,
-.swiper-homepage-cs .swiper-rtl .swiper-button-next {
-    right: calc(50% + 224px);
-  }
-}
 .swiper-homepage-cs .swiper-button-next,
 .swiper-homepage-cs .swiper-rtl .swiper-button-prev {
   top: auto;
   bottom: 0px;
   right: auto;
-  left: calc(50% + 126.5px);
+  left: calc(50% + 116.5px);
   height: 40px;
   width: 40px;
   border-radius: 4px;
@@ -1155,30 +1130,12 @@ homepage-case-study-cards {
   height: 14px;
   width: 9px;
 }
-@media (min-width: 480px) {
-  .swiper-homepage-cs .swiper-button-next,
-.swiper-homepage-cs .swiper-rtl .swiper-button-prev {
-    left: calc(50% + 180.5px);
-  }
-}
-@media (min-width: 768px) {
-  .swiper-homepage-cs .swiper-button-next,
-.swiper-homepage-cs .swiper-rtl .swiper-button-prev {
-    left: calc(50% + 230.5px);
-  }
-}
-@media (min-width: 992px) {
-  .swiper-homepage-cs .swiper-button-next,
-.swiper-homepage-cs .swiper-rtl .swiper-button-prev {
-    left: calc(50% + 224px);
-  }
-}
 
 .swiper-slide {
   text-align: center;
   font-size: 18px;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 }
 
@@ -1190,8 +1147,6 @@ homepage-case-study-cards {
 }
 
 .event-slider-cards.swiper-horizontal {
-  position: relative;
-  overflow-y: hidden;
   scrollbar-width: none;
 }
 .event-slider-cards.swiper-horizontal .swiper-slide {
@@ -1201,9 +1156,6 @@ homepage-case-study-cards {
 .event-slider-cards.swiper-horizontal .swiper-slide::-webkit-scrollbar {
   display: none;
 }
-.event-slider-cards.swiper-horizontal .swiper-slide:first-child {
-  margin-left: 4px !important;
-}
 
 @media (min-width: 992px) {
   .event-slider-cards.swiper-horizontal .swiper-slide {

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js

@@ -1,10 +1,11 @@
 import { Host, h } from '@stencil/core';
 import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class EventPodcastSliderExample {
-  constructor() {
-    this.sliderType = 'event-slider-cards';
-  }
   componentDidLoad() {
+    //const swiperContainer = this.el.querySelector('.swiper-container');
+    //const slides = swiperContainer.querySelectorAll('.swiper-slide');
+    // Define a desktop breakpoint
+    //const isDesktop = window.matchMedia('(min-width: 992px)').matches;
     setTimeout(() => {
       let list = this.el.querySelector('.event-slider-cards');
       this.listSwp = new Swiper(list, {
@@ -12,10 +13,10 @@ export class EventPodcastSliderExample {
         modules: [Navigation, Pagination, Scrollbar, Mousewheel],
         slidesPerView: 'auto',
         spaceBetween: 24,
-        centeredSlides: true,
+        //centeredSlides: true,
         centeredSlidesBounds: true,
         initialSlide: 0,
-        centerInsufficientSlides: true,
+        centerInsufficientSlides: false,
         freeMode: true,
         scrollbar: {
           el: this.swiperPaginationRef,
@@ -30,18 +31,21 @@ export class EventPodcastSliderExample {
           sensitivity: 100,
         },
         breakpoints: {
+          992: {
+            slidesPerView: 4,
+          },
           1200: {
             spaceBetween: 32,
           },
           1400: {
             spaceBetween: 40,
-          }
-        }
+          },
+        },
       });
     }, 100);
   }
   render() {
-    return (h(Host, null, h("div", { class: "event-slider-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, { class: "host-ele" }, h("div", { class: "event-slider-cards swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "event-podcast-slider-example"; }
   static get originalStyleUrls() {
@@ -54,27 +58,5 @@ export class EventPodcastSliderExample {
       "$": ["event-podcast-slider-example.css"]
     };
   }
-  static get properties() {
-    return {
-      "sliderType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'homepage-case-study-cards' | 'event-slider-cards'",
-          "resolved": "\"event-slider-cards\" | \"homepage-case-study-cards\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slider-type",
-        "reflect": false,
-        "defaultValue": "'event-slider-cards'"
-      }
-    };
-  }
   static get elementRef() { return "el"; }
 }

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

@@ -265,6 +265,7 @@ ptc-link, ptc-square-card,
 
 .bar-close {
   max-width: 36px;
+  max-height: 36px;
   cursor: pointer;
   margin-left: var(--ptc-element-spacing-08);
   position: relative;
@@ -279,6 +280,10 @@ ptc-link, ptc-square-card,
   transform: translate(-50%, -50%);
   z-index: 1;
 }
+.bar-close:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 ptc-tooltip-v2.after-space::after {
   content: " ";
@@ -297,6 +302,7 @@ ptc-tooltip-v2.after-space::after {
 
   .bar-close {
     max-width: 18px;
+    max-height: 18px;
   }
   .bar-close::before {
     width: 34px;

package/dist/collection/components/ptc-announcement/ptc-announcement.js

@@ -51,7 +51,7 @@ export class PtcAnnouncement {
     //desktop view
     h("div", { class: "description" }, !!this.description ? (
     // <ptc-tooltip text-display="inline" max-length="165" z-index="z-2" description={this.description + ' '} position="bottom"></ptc-tooltip>
-    h("ptc-tooltip-v2", { "element-display": "inline", "max-length": "165", "z-index": "3", class: "after-space" }, this.description + ' ')) : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, h("ptc-tooltip-v2", { "element-display": "inline-block", "max-length": "25", "z-index": "2", position: 'bottom', styles: ".tooltip-content.bottom{transform:translate(-20%, 12px)}.tooltip-text{text-decoration:underline;}" }, this.linkText))) : null))), h("icon-asset", { id: "announcement-bar-close", color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close mf-listen", focusOn: true, trackerId: "announcement-bar-close", onKeyDown: this.handleKeyClick })))));
+    h("ptc-tooltip-v2", { "element-display": "inline", "max-length": "165", "z-index": "3", class: "after-space" }, this.description + ' ')) : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, h("ptc-tooltip-v2", { "element-display": "inline-block", "max-length": "25", "z-index": "2", position: 'bottom', styles: ".tooltip-content.bottom{transform:translate(-20%, 12px)}.tooltip-text{text-decoration:underline;}" }, this.linkText))) : null))), h("icon-asset", { id: "announcement-bar-close", color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close mf-listen", focusOn: true, trackerId: "announcement-bar-close", onKeyDown: this.handleKeyClick, tabIndex: 0 })))));
   }
   getCssClassMap() {
     return {

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

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -159,6 +159,13 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
 :host {
   display: block;
   color: var(--color-gray-10);

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

@@ -366,6 +366,7 @@ ptc-link, ptc-square-card,
 }
 :host(.horizontal-card) .card-layout {
   position: relative;
+  display: block;
 }
 @media only screen and (min-width: 768px) {
   :host(.horizontal-card) .card-layout {

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

@@ -166,6 +166,7 @@ ptc-link, ptc-square-card,
 }
 :host(.extra-tall) a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
@@ -176,6 +177,7 @@ ptc-link, ptc-square-card,
 :host(.color-outlined) a:focus-visible {
   box-shadow: 0 0 0 5px var(--keyboard-nav-outline);
   border-radius: var(--ptc-border-radius-standard) !important;
+  border: 2px solid white;
   display: block;
   outline: none;
 }

package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js

@@ -8,6 +8,7 @@ export class PtcCardPlm {
     this.isLoading = false;
     this.trackerId = undefined;
     this.disabled = false;
+    this.hideLinkTitle = false;
     this.styles = undefined;
     this.darkFocusState = false;
   }
@@ -44,7 +45,7 @@ export class PtcCardPlm {
   render() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.cardLink ? 'a' : 'div';
-    return (h(Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card" ? { tabindex: '0' } : { tabindex: '-1' }), (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null)))));
+    return (h(Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card" ? { tabindex: '0' } : { tabindex: '-1' }), (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading && !this.hideLinkTitle ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -212,6 +213,24 @@ export class PtcCardPlm {
         "reflect": false,
         "defaultValue": "false"
       },
+      "hideLinkTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Turn off hover Title"
+        },
+        "attribute": "hide-link-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "styles": {
         "type": "string",
         "mutable": false,

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

@@ -781,26 +781,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -858,6 +858,13 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
 :host {
   display: block;
   overflow: hidden;

package/dist/collection/components/ptc-close-icon/ptc-close-icon.js

@@ -1,7 +1,7 @@
 import { Host, h } from '@stencil/core';
 export class PtcCloseIcon {
   render() {
-    return (h(Host, null, h("div", { class: 'close-icon mf-listen', "tab-index": "0" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", tabindex: 0 }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.00089 8.4151L12.5876 14.0018L14.0018 12.5876L8.4151 7.00089L14.0018 1.41421L12.5876 0L7.00089 5.58667L1.41421 0L0 1.41421L5.58667 7.00089L0 12.5876L1.41421 14.0018L7.00089 8.4151Z", fill: "#20262A" })))));
+    return (h(Host, null, h("div", { class: 'close-icon mf-listen', id: "modal-pop-up-close-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", tabindex: 0 }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.00089 8.4151L12.5876 14.0018L14.0018 12.5876L8.4151 7.00089L14.0018 1.41421L12.5876 0L7.00089 5.58667L1.41421 0L0 1.41421L5.58667 7.00089L0 12.5876L1.41421 14.0018L7.00089 8.4151Z", fill: "#20262A" })))));
   }
   static get is() { return "ptc-close-icon"; }
   static get encapsulation() { return "shadow"; }