@ptcwebops/ptcw-design 6.2.2 → 6.2.4-beta

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

@@ -1480,4 +1480,130 @@ ptc-link, ptc-square-card,
 }
 .ptc-h3.none {
   text-transform: none;
+}
+
+:host(.events-card) {
+  height: 100%;
+}
+:host(.events-card) .card-border {
+  width: 100%;
+  background: var(--color-white);
+  box-shadow: var(--ptc-shadow-small);
+  border-radius: var(--ptc-border-radius-standard);
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  transition: background var(--ptc-transition-medium) var(--ptc-ease-inout), box-shadow var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+:host(.events-card) .card-border:hover {
+  background: var(--color-gray-02);
+  box-shadow: var(--ptc-shadow-large);
+}
+:host(.events-card) .card-border:hover .card-media {
+  background: var(--color-white);
+}
+:host(.events-card) .card-border:hover .card-media .smart-img {
+  background: var(--color-white);
+}
+:host(.events-card) .card-layout {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+:host(.events-card) .card-layout .card-body {
+  padding: 16px 20px 20px;
+}
+:host(.events-card) .card-layout .card-body h3 {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
+  margin-bottom: 12px;
+  margin-top: 0px;
+}
+:host(.events-card) .card-layout .card-body .events-date, :host(.events-card) .card-layout .card-body .events-type-class, :host(.events-card) .card-layout .card-body .language {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 8px;
+}
+:host(.events-card) .card-layout .card-body .calendar-icon {
+  width: 16px;
+  height: 16px;
+}
+:host(.events-card) .card-layout .card-body .events-item-text {
+  margin-left: 12px;
+  color: var(--color-gray-10);
+  font-family: var(--ptc-font-latin);
+  font-size: 14px;
+  font-style: var(--ptc-font-style-normal);
+  font-weight: 700;
+  line-height: 21px;
+}
+:host(.events-card) .card-layout .card-body .in-person-icon {
+  width: 16px;
+  height: 16px;
+}
+:host(.events-card) .card-layout .card-body .language-icon {
+  width: 16px;
+  height: 16px;
+}
+:host(.events-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.events-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.events-card) .link-wrapper:focus-visible {
+  border-radius: var(--ptc-border-radius-standard) !important;
+  box-shadow: 0 0 0 5px var(--keyboard-nav-outline);
+}
+:host(.events-card) .card-media {
+  width: 100%;
+  height: 288px;
+  transform: scale(1);
+  transform-origin: center bottom;
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  transition-delay: var(--ptc-delay-medium);
+}
+:host(.events-card) .card-media .smart-img {
+  height: 288px;
+}
+@media (min-width: 768px) {
+  :host(.events-card) .card-media .smart-img {
+    height: 232px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.events-card) .card-media .smart-img {
+    height: 192px;
+  }
+}
+@media (min-width: 1200px) {
+  :host(.events-card) .card-media .smart-img {
+    height: 170px;
+  }
+}
+@media (min-width: 768px) {
+  :host(.events-card) .card-media {
+    height: 232px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.events-card) .card-media {
+    height: 192px;
+  }
+}
+@media (min-width: 1200px) {
+  :host(.events-card) .card-media {
+    height: 170px;
+  }
+}
+:host(.events-card) ::slotted([slot=slot-description]) {
+  margin-top: 16px;
 }

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

@@ -23,6 +23,7 @@ export class PtcCard {
     this.isCreoCard = false;
     this.trackerId = "";
     this.isTabHidden = false;
+    this.language = "";
   }
   handleTabHiddenChange(newValue) {
     const tabElement = this.el.shadowRoot.querySelector('.tab-tracker-news[tabindex]');
@@ -72,13 +73,14 @@ export class PtcCard {
         [this.cardType]: !!this.cardType,
         'creo-card-wrap': this.isCreoCard, // Add the cardType class conditionally
       } }, this.styles && h("style", null, this.styles), h("slot", { name: "seo-content" }), h("div", { id: (this.cardType !== 'featured-horizontal-card') ? this.trackerId : "", class: "card-border mf-listen", part: "border-wrapper", style: { overflow: this.cardOverflow } }, h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {}), (Tag === 'a' && !this.isTabHidden) ? { tabindex: 0 } : { tabindex: -1 }), this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null, (!!this.ribbonText && this.cardType == 'resource-center-card') || (!!this.ribbonText && this.cardType == 'related-card')
-      || (!!this.ribbonText && this.cardType == 'listing-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { id: ((this.cardType === 'featured-horizontal-card' || this.cardType === 'related-card')) ? this.trackerId : "", class: "card-body mf-listen", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper mf-listen" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (BodyContainerTag === 'a') ? { tabIndex: 0 } : {}), !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (h("div", { class: "card-date-text" }, !!this.eventType ? (h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
+      || (!!this.ribbonText && this.cardType == 'listing-card') || (!!this.ribbonText && this.cardType == 'events-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { id: ((this.cardType === 'featured-horizontal-card' || this.cardType === 'related-card' || this.cardType == 'events-card')) ? this.trackerId : "", class: "card-body mf-listen", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper mf-listen" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (BodyContainerTag === 'a') ? { tabIndex: 0 } : {}), !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (h("div", { class: "card-date-text" }, !!this.eventType ? (h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
       ? Object.assign({}, (!!this.cardLogo ? (h("div", { class: "card-logo-container" }, h("ptc-picture", { alt: "", "object-fit": "contain", src: this.cardLogo, height: "40" }))) : (h("div", { class: "card-logo-none" })))) : null, h("slot", { name: "slot-before-heading" }), !!this.heading
       ? [
-        this.cardType === 'listing-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, this.heading)) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : this.cardType === 'featured-horizontal-card' ? (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, h("h2", null, this.heading))) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
+        this.cardType === 'listing-card' || this.cardType == 'events-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, this.heading)) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : this.cardType === 'featured-horizontal-card' ? (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, h("h2", null, this.heading))) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
         h("slot", { name: "slot-after-heading" }),
       ]
-      : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null))))));
+      : null, (!!this.cardDate && this.cardType == 'events-card' ? (h("div", { class: "events-date" }, h("svg", { class: "calendar-icon", width: "15", height: "17", viewBox: "0 0 15 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("path", { id: "Vector", d: "M4.62109 7.11804H3.12109V8.61804H4.62109V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_2", d: "M7.82129 7.11804H6.32129V8.61804H7.82129V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_3", d: "M11.1211 7.11804H9.62109V8.61804H11.1211V7.11804Z", fill: "#323B42" }), h("path", { id: "Vector_4", d: "M4.62109 9.51807H3.12109V11.0181H4.62109V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_5", d: "M7.82129 9.51807H6.32129V11.0181H7.82129V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_6", d: "M11.1211 9.51807H9.62109V11.0181H11.1211V9.51807Z", fill: "#323B42" }), h("path", { id: "Vector_7", d: "M7.82129 11.9181H6.32129V13.4181H7.82129V11.9181Z", fill: "#323B42" }), h("path", { id: "Vector_8", d: "M4.62109 11.9181H3.12109V13.4181H4.62109V11.9181Z", fill: "#323B42" }), h("g", { id: "Group_2" }, h("path", { id: "Vector_9", d: "M11.6211 2.11804V3.41804V3.91804H11.1211H9.12109H8.62109V3.41804V2.11804H5.32109V3.41804V3.91804H4.82109H2.82109H2.32109V3.41804V2.11804H0.121094V16.118H14.1211V2.11804H11.6211ZM12.6211 14.618H1.62109V5.81804H12.6211V14.618Z", fill: "#323B42" }), h("path", { id: "Vector_10", d: "M2.82129 0.118042V2.11804V3.41804H4.82129V2.11804V0.118042H2.82129Z", fill: "#323B42" }), h("path", { id: "Vector_11", d: "M9.12109 0.118042V2.11804V3.41804H11.1211V2.11804V0.118042H9.12109Z", fill: "#323B42" })))), h("span", { class: "events-item-text event-cards-date" }, `${this.cardDate}`)))
+      : null), !!this.eventType && this.cardType == 'events-card' ? (h("div", { class: "events-type-class" }, h("svg", { class: "in-person-icon", width: "17", height: "13", viewBox: "0 0 17 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M16.0211 9.71804L15.3211 7.31804C15.3211 7.31804 15.2211 6.71804 14.4211 6.51804L12.7211 6.11804C12.5211 6.01804 12.4211 5.61804 12.4211 5.61804V5.11804C12.6211 4.91804 12.7211 4.61804 12.8211 4.41804L12.9211 4.31804C13.0211 4.21804 13.0211 4.11804 13.0211 4.11804C13.1211 4.01804 13.1211 3.81804 13.1211 3.71804L13.2211 3.31804C13.2211 3.11804 13.2211 2.91804 13.1211 2.81804L13.0211 2.71804C13.0211 2.01804 12.9211 1.41804 12.6211 1.01804C12.5211 0.518042 12.0211 0.218042 11.4211 0.118042C11.3211 0.118042 11.1211 0.118042 11.0211 0.118042C10.9211 0.118042 10.7211 0.118042 10.6211 0.118042C10.0211 0.218042 9.52109 0.518042 9.22109 1.01804C8.92109 1.41804 8.82109 2.01804 8.82109 2.71804L8.72109 2.81804C8.62109 2.91804 8.62109 3.01804 8.62109 3.31804L8.72109 3.71804C8.72109 3.81804 8.72109 4.01804 8.82109 4.11804C8.82109 4.21804 8.92109 4.31804 8.92109 4.31804C9.02109 4.31804 9.02109 4.41804 9.12109 4.41804C9.22109 4.71804 9.32109 4.91804 9.52109 5.11804V5.61804C9.52109 5.61804 9.42109 6.01804 9.22109 6.11804L8.12109 6.41804V6.51804C8.12109 6.61804 8.02109 6.91804 7.92109 7.11804C7.82109 7.21804 7.82109 7.41804 7.72109 7.51804C7.72109 7.51804 7.72109 7.61804 7.62109 7.61804C7.82109 7.61804 8.12109 7.71804 8.52109 7.81804C9.52109 7.91804 10.1211 8.81804 10.3211 9.71804H11.0211H16.0211Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 9.81807C9.42148 9.81807 9.32148 9.21807 8.52148 9.01807L6.82148 8.61807C6.62148 8.51807 6.52148 8.11807 6.52148 8.11807V7.61807C6.72148 7.41807 6.82148 7.11807 6.92148 6.91807L7.02148 6.81807C7.12148 6.71807 7.12148 6.61807 7.12148 6.61807C7.22148 6.31807 7.32148 6.21807 7.32148 6.11807L7.42148 5.71807C7.42148 5.51807 7.42148 5.31807 7.32148 5.21807L7.22148 5.11807C7.22148 4.41807 7.12148 3.81807 6.82148 3.41807C6.52148 3.01807 6.02148 2.61807 5.42148 2.51807C5.32148 2.51807 5.12148 2.51807 5.02148 2.51807C4.92148 2.51807 4.72148 2.51807 4.62148 2.51807C4.02148 2.61807 3.52148 3.01807 3.22148 3.41807C2.92148 3.91807 2.82148 4.51807 2.92148 5.11807L2.82148 5.21807C2.72148 5.31807 2.62148 5.51807 2.72148 5.71807L2.82148 6.11807C2.82148 6.21807 2.82148 6.41807 2.92148 6.51807C2.92148 6.61807 3.02148 6.71807 3.02148 6.71807C3.02148 6.81807 3.12148 6.81807 3.12148 6.81807C3.22148 7.11807 3.32148 7.41807 3.52148 7.61807V8.11807C3.52148 8.11807 3.42148 8.51807 3.22148 8.61807L1.52148 9.01807C0.721484 9.21807 0.621484 9.81807 0.621484 9.81807L0.0214844 12.2181H5.02148H10.0215L9.42148 9.81807Z", fill: "#323B42" }))), h("span", { class: "event-name events-item-text" }, `${this.eventType}`))) : null, !!this.language && this.cardType == 'events-card' ? (h("div", { class: "language" }, h("svg", { class: "language-icon", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Group" }, h("g", { id: "Group_2" }, h("path", { id: "Vector", d: "M15.0219 3.31799H12.5219V11.118C12.5219 11.618 12.1219 12.118 11.5219 12.118H4.42188V12.318C4.42188 12.818 4.82187 13.318 5.42188 13.318H13.9219L16.0219 16.118V4.21799C16.0219 3.71799 15.6219 3.31799 15.0219 3.31799Z", fill: "#323B42" })), h("path", { id: "Vector_2", d: "M9.42148 0.118042H1.12148C0.521484 0.118042 0.0214844 0.618042 0.0214844 1.21804V13.018L2.12148 10.118H9.42148C10.0215 10.118 10.5215 9.61804 10.5215 9.01804V1.21804C10.5215 0.618042 10.0215 0.118042 9.42148 0.118042ZM6.12148 6.51804H1.72148V5.61804H6.12148V6.51804ZM8.82148 4.01804H1.72148V3.01804H8.82148V4.01804Z", fill: "#323B42" }))), h("span", { class: "language-name events-item-text" }, `${this.language}`))) : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' && this.cardType !== 'events-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null))))));
   }
   getCssClassMap() {
     return {
@@ -130,8 +132,8 @@ export class PtcCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'simple-card'\r\n    | 'lottie-card'\r\n    | 'custom-card'\r\n    | 'clip-edge-card'\r\n    | 'hightlight-card'\r\n    | 'listing-card'\r\n    | 'horizontal-card'\r\n    | 'listing-card-horizontal'\r\n    | 'resource-center-card'\r\n    | 'case-studies-card'\r\n    | 'featured-horizontal-card'\r\n    | 'related-card'",
-          "resolved": "\"case-studies-card\" | \"clip-edge-card\" | \"custom-card\" | \"featured-horizontal-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"related-card\" | \"resource-center-card\" | \"simple-card\"",
+          "original": "| 'simple-card'\r\n    | 'lottie-card'\r\n    | 'custom-card'\r\n    | 'clip-edge-card'\r\n    | 'hightlight-card'\r\n    | 'listing-card'\r\n    | 'horizontal-card'\r\n    | 'listing-card-horizontal'\r\n    | 'resource-center-card'\r\n    | 'case-studies-card'\r\n    | 'featured-horizontal-card'\r\n    | 'related-card'\r\n    | 'events-card'",
+          "resolved": "\"case-studies-card\" | \"clip-edge-card\" | \"custom-card\" | \"events-card\" | \"featured-horizontal-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"related-card\" | \"resource-center-card\" | \"simple-card\"",
           "references": {}
         },
         "required": false,
@@ -510,6 +512,24 @@ export class PtcCard {
         "attribute": "is-tab-hidden",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

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);

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

@@ -61,21 +61,28 @@ ptc-link, ptc-square-card,
   align-items: center;
   justify-content: flex-start;
   margin-left: 0px;
+  margin-bottom: 32px;
 }
 @media only screen and (min-width: 992px) {
   :host {
     margin-left: var(--ptc-element-spacing-05);
+    margin-bottom: 0px;
   }
 }
 
 .countdown-outer {
-  padding: 16px 32px;
+  padding: 16px 4px;
   display: block;
   max-width: 450px;
   border-radius: 4px;
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.32);
   background-color: #20262a;
 }
+@media only screen and (min-width: 480px) {
+  .countdown-outer {
+    padding: 16px 32px;
+  }
+}
 
 .event-name {
   display: flex;
@@ -117,9 +124,17 @@ ptc-link, ptc-square-card,
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
-  padding: 4px 16px;
+  padding: 4px 4px;
   border-right: 1px #6d707b solid;
 }
+@media only screen and (min-width: 480px) {
+  .day,
+.hours,
+.minutes,
+.seconds {
+    padding: 4px 16px;
+  }
+}
 .day div,
 .hours div,
 .minutes div,

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

@@ -10,6 +10,7 @@ export class PtcCountdown {
     this.countdownTitle = '';
     this.eventTime = '';
     this.eventTimeZone = 'America/New_York';
+    this.expiredText = 'This event has started on ';
     this.timeLeft = {
       days: 0,
       hours: 0,
@@ -54,7 +55,7 @@ export class PtcCountdown {
   }
   render() {
     const { days, hours, minutes, seconds } = this.timeLeft;
-    return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, "days")), h("div", { class: "hours" }, h("div", null, hours), h("span", null, "hours")), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, "minutes")), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, "seconds")))) : (h("div", { class: "expired" }, "This event has started.at", ' ', new Date(this.eventTime).toLocaleString('en-US', {
+    return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, "days")), h("div", { class: "hours" }, h("div", null, hours), h("span", null, "hours")), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, "minutes")), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, "seconds")))) : (h("div", { class: "expired" }, this.expiredText, new Date(this.eventTime).toLocaleString('en-US', {
       //timeZone: this.eventTimeZone,
       year: 'numeric',
       month: 'long',
@@ -137,6 +138,24 @@ export class PtcCountdown {
         "attribute": "event-time-zone",
         "reflect": false,
         "defaultValue": "'America/New_York'"
+      },
+      "expiredText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expired-text",
+        "reflect": false,
+        "defaultValue": "'This event has started on '"
       }
     };
   }

package/dist/collection/components/ptc-featured-list/ptc-featured-list.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);