@ptcwebops/ptcw-design 6.2.20 → 6.2.21-beta

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-ele {
-  position: relative;
+:host {
+  display: block;
 }
 
 .hcs-title {
@@ -1020,40 +1020,47 @@ 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: block;
-  padding-bottom: 4.104rem;
-  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 3.5rem;
+  padding-top: 2rem;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-slide:first-child {
-  margin-left: 0px !important;
+  margin-left: 16px;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-slide:last-child {
-  margin-right: 0px !important;
+  margin-right: 16px;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar {
   position: absolute;
-  left: 50%;
-  transform: translate(-50%, -13px);
+  left: auto;
+  transform: translateY(-13px);
   z-index: 50;
-  width: 161px;
+  width: 209px;
   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;
@@ -1073,7 +1080,7 @@ homepage-case-study-cards {
   top: auto;
   bottom: 0px;
   left: auto;
-  right: calc(50% + 116.5px);
+  right: calc(50% + 126.5px);
   height: 40px;
   width: 40px;
   border-radius: 4px;
@@ -1099,12 +1106,30 @@ 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% + 116.5px);
+  left: calc(50% + 126.5px);
   height: 40px;
   width: 40px;
   border-radius: 4px;
@@ -1130,12 +1155,30 @@ 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: flex-start;
+  justify-content: center;
   align-items: center;
 }
 
@@ -1147,6 +1190,8 @@ homepage-case-study-cards {
 }
 
 .event-slider-cards.swiper-horizontal {
+  position: relative;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 .event-slider-cards.swiper-horizontal .swiper-slide {
@@ -1156,6 +1201,9 @@ 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,67 +1,47 @@
 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');
-      if (!isDesktop || slides.length >= 4) {
-        this.listSwp = new Swiper(list, {
-          // Customize options here
-          modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-          slidesPerView: 'auto',
-          spaceBetween: 24,
-          //centeredSlides: true,
-          centeredSlidesBounds: true,
-          initialSlide: 0,
-          centerInsufficientSlides: false,
-          freeMode: true,
-          scrollbar: {
-            el: this.swiperPaginationRef,
-            draggable: true,
-          },
-          navigation: {
-            nextEl: this.swiperButtonNextRef,
-            prevEl: this.swiperButtonPrevRef,
-          },
-          mousewheel: {
-            forceToAxis: true,
-            sensitivity: 100,
+      this.listSwp = new Swiper(list, {
+        // Customize options here
+        modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+        slidesPerView: 'auto',
+        spaceBetween: 24,
+        centeredSlides: true,
+        centeredSlidesBounds: true,
+        initialSlide: 0,
+        centerInsufficientSlides: true,
+        freeMode: true,
+        scrollbar: {
+          el: this.swiperPaginationRef,
+          draggable: true,
+        },
+        navigation: {
+          nextEl: this.swiperButtonNextRef,
+          prevEl: this.swiperButtonPrevRef,
+        },
+        mousewheel: {
+          forceToAxis: true,
+          sensitivity: 100,
+        },
+        breakpoints: {
+          1200: {
+            spaceBetween: 32,
           },
-          breakpoints: {
-            992: {
-              slidesPerView: 4,
-            },
-            1200: {
-              spaceBetween: 32,
-            },
-            1400: {
-              spaceBetween: 40,
-            },
-          },
-        });
-      }
-      else {
-        const nextBtn = this.el.querySelector('.swiper-button-next');
-        const prevBtn = this.el.querySelector('.swiper-button-prev');
-        const scrollbar = this.el.querySelector('.swiper-scrollbar');
-        if (nextBtn) {
-          nextBtn.setAttribute('style', 'display: none;');
-        }
-        if (prevBtn) {
-          prevBtn.setAttribute('style', 'display: none;');
+          1400: {
+            spaceBetween: 40,
+          }
         }
-        if (scrollbar) {
-          scrollbar.setAttribute('style', 'display: none;');
-        }
-      }
+      });
     }, 100);
   }
   render() {
-    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" }))))));
+    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" }))))));
   }
   static get is() { return "event-podcast-slider-example"; }
   static get originalStyleUrls() {
@@ -74,5 +54,27 @@ 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/organism-bundles/form/modal-from-example/modal-form-example.css

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+.form-wrapper {
+  width: 371px;
+  display: flex;
+  border-radius: 3px;
+  background: #FFF;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px 32px;
+
+  @media only screen and (min-width: 360px) and (max-width: 479.55px) {
+    max-width: 360px;
+    width: 360px;
+  }
+
+  .button-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    margin-top: 48px;
+    flex-wrap: wrap;
+  }
+}

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js

@@ -0,0 +1,99 @@
+import { Host, h } from '@stencil/core';
+export class PtcForm {
+  constructor() {
+    this.formData = {
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
+      policyChecked: false,
+    };
+  }
+  // private countryEle: HTMLPtcSelectElement;
+  // private inquiryreasonEle: HTMLPtcTextfieldElement;
+  // private howhearselfreport: HTMLPtcTextfieldElement;
+  componentDidLoad() {
+    this.formButton = this.el.querySelector('.form-submit');
+    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    //get Email
+    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
+    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
+    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
+    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
+    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
+    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
+    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
+    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
+  }
+  handleInputChange(field, value) {
+    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.formData.email = this.emailEle.inputValue;
+    this.formData.firstName = this.firstNameEle.inputValue;
+    this.formData.lastName = this.lastNameEle.inputValue;
+    this.formData.company = this.companyEle.inputValue;
+    this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
+    if (this.isValid()) {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
+        detail: this.formData,
+        bubbles: true,
+      });
+      this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
+    }
+    else {
+      console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
+    }
+  }
+  isValid() {
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    const multiSelectItems = [
+      { text: 'Item 1', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
+      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
+      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' }
+    ];
+    return (h(Host, null, h("div", { class: "ptc-container u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("ptc-title", { "seo-compatibility-mode": true, "text-align": "left", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false", "title-size": "medium" }, h("h2", null, "PTC\u2019s PLM application suite combines the power of Windchill, the industry\u2019s #1 PLM software with Thingworx")), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-densest" }, "PTC\u2019s market-leading, purpose-built IIoT platform. The suite offers a mix of Packages, Add-Ons, and Apps to best suit your business needs:"), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Select a country")), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("div", { class: "button-wrapper" }, h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Submit"), h("ptc-button", { class: "form-close", color: "ptc-tertiary", type: "button", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Cancel")))))));
+  }
+  static get is() { return "modal-form-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get states() {
+    return {
+      "formData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -82,23 +82,38 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
+.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 {
   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):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
+.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 {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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 {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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 {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
+.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 {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { getSeoTagType } from '../../utils/utils';
+import { getSeoTagType, CheckDarkFocusState } from '../../utils/utils';
 export class PtcButton {
   constructor() {
     this.disabled = false;
@@ -27,6 +27,9 @@ export class PtcButton {
   clickEventHandler() {
     this.clickEvent.emit();
   }
+  componentWillLoad() {
+    CheckDarkFocusState(this, this.el);
+  }
   seoCompRender() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';

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

@@ -366,7 +366,6 @@ 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,7 +166,6 @@ 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);
 }
 
@@ -177,7 +176,6 @@ 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,7 +8,6 @@ export class PtcCardPlm {
     this.isLoading = false;
     this.trackerId = undefined;
     this.disabled = false;
-    this.hideLinkTitle = false;
     this.styles = undefined;
     this.darkFocusState = false;
   }
@@ -45,7 +44,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 && !this.hideLinkTitle ? { 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 ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -213,24 +212,6 @@ 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,23 +781,38 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
+.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 {
   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):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
+.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 {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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 {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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 {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
+.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 {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);