@ptcwebops/ptcw-design 6.3.27 → 6.3.28-beta

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

@@ -249,7 +249,7 @@ export class PtcTextfield {
       h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
           ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
           this.mdcTextfield = mdcTextfield;
-        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
+        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
           this.customInput = customInput;
         }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText }))),
       h("div", { class: `mdc-text-field-helper-line
@@ -283,7 +283,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID"
+          "text": ""
         },
         "attribute": "field-id",
         "reflect": false
@@ -300,7 +300,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "text, button, email, file and etc. This value triggers different validation"
+          "text": ""
         },
         "attribute": "type",
         "reflect": false,
@@ -318,7 +318,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Is this a mandatory field?"
+          "text": ""
         },
         "attribute": "required",
         "reflect": false,
@@ -336,7 +336,7 @@ export class PtcTextfield {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Text counter limit"
+          "text": ""
         },
         "attribute": "ptc-max-length",
         "reflect": false
@@ -353,7 +353,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label Text"
+          "text": ""
         },
         "attribute": "label-text",
         "reflect": false,
@@ -371,7 +371,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Validation text (red)"
+          "text": ""
         },
         "attribute": "helpertext",
         "reflect": false,
@@ -389,7 +389,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Info Text (black)"
+          "text": ""
         },
         "attribute": "info-text",
         "reflect": false
@@ -406,7 +406,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Alert Text"
+          "text": ""
         },
         "attribute": "alert-text",
         "reflect": false
@@ -423,7 +423,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Alert Text Content"
+          "text": ""
         },
         "attribute": "alert-text-content",
         "reflect": false
@@ -440,7 +440,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disable the field"
+          "text": ""
         },
         "attribute": "disabled",
         "reflect": false,
@@ -458,7 +458,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "input \"name\" value. e.g.: 'phone', 'email', 'firstname', 'lastname'"
+          "text": ""
         },
         "attribute": "field-name",
         "reflect": false,
@@ -476,7 +476,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Eloqua Data Name (for the eloqua)"
+          "text": ""
         },
         "attribute": "ptc-data-eloqua-name",
         "reflect": false
@@ -493,7 +493,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Eloqua Target Data Name (for the eloqua)"
+          "text": ""
         },
         "attribute": "ptc-data-target-eloqua-name",
         "reflect": false
@@ -532,7 +532,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Custom Validation - String"
+          "text": ""
         }
       },
       "ignoreBlindSubmit": {
@@ -547,7 +547,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Ignore Blind Submit?"
+          "text": ""
         },
         "attribute": "ignore-blind-submit",
         "reflect": false,
@@ -565,7 +565,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Place holder Text"
+          "text": ""
         },
         "attribute": "placeholder-text",
         "reflect": false
@@ -582,7 +582,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Inject styles for customization"
+          "text": ""
         },
         "attribute": "styles",
         "reflect": false
@@ -599,7 +599,7 @@ export class PtcTextfield {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text Field Form"
+          "text": ""
         },
         "attribute": "textfield-form",
         "reflect": false,

package/dist/collection/components/ptc-theater-video/ptc-theater-video.css

@@ -82,14 +82,8 @@ ptc-link, ptc-square-card,
   position: relative;
   border-radius: 12px;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.24);
-  margin-top: 5px;
   cursor: pointer;
 }
-:host .img-wrap:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 :host .img-wrap img {
   max-width: 100%;
   border-radius: 12px;

package/dist/collection/components/ptc-theater-video/ptc-theater-video.js

@@ -21,7 +21,7 @@ export class PtcTheaterVideo {
     });
   }
   render() {
-    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap mf-listen", onClick: () => this.showCardDetails(), tabIndex: 0 }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
+    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap", onClick: () => this.showCardDetails() }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
   }
   static get is() { return "ptc-theater-video"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.css

@@ -5712,11 +5712,6 @@ Credits to Dave Berning
   padding: 8px;
   transform: translateX(8px);
 }
-.modal .modal-container .vm-close:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 @media only screen and (min-width: 1200px) {
   .modal .modal-container .vm-close {
     right: -10px;
@@ -5745,11 +5740,6 @@ Credits to Dave Berning
 .modal .modal-container .v-nav button:disabled {
   color: var(--color-gray-06);
 }
-.modal .modal-container .v-nav button:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 .modal .modal-container .card-description-content p {
   color: var(--color-white);
 }
@@ -5800,11 +5790,6 @@ Credits to Dave Berning
   margin-right: var(--ptc-element-spacing-04);
   margin-top: var(--ptc-element-spacing-04);
 }
-.modal.modal-only-video .modal-wrapper .vm-close:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 .modal.modal-only-video .modal-wrapper .aspect-ratio-container {
   width: 100%;
   height: 100%;

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.js

@@ -1,5 +1,4 @@
 import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
 export class PtcTheaterVideoModal {
   constructor() {
     this.cards = undefined;
@@ -7,48 +6,22 @@ export class PtcTheaterVideoModal {
     this.currentCardIndex = 0;
     this.filteredTagName = undefined;
     this.modalType = undefined;
-    this.focusCardElement = undefined;
   }
-  async updateData(data, currentModalIndex, cardElement) {
+  // @Listen('filterCliked', { target: 'document' })
+  // handleFilterClick(event: CustomEvent) {
+  //   const filters = event.detail;
+  //   this.filteredTagName = filters['selected-tag'].trim();
+  // }
+  async updateData(data, currentModalIndex) {
     // debugger
     this.cards = data;
-    this.focusCardElement = cardElement;
     this.currentCardIndex = currentModalIndex;
     this.modalType = this.cards[this.currentCardIndex].modalType;
     this.showModal = true;
-    setTimeout(() => {
-      const closebtn = this.hostEl.querySelector('.vm-close');
-      closebtn === null || closebtn === void 0 ? void 0 : closebtn.focus();
-      const modalDescWrap = this.hostEl.querySelector('.video-modal-description');
-      if (modalDescWrap) {
-        modalDescWrap.scrollHeight > modalDescWrap.clientHeight
-          ? modalDescWrap.setAttribute('tabindex', '0')
-          : modalDescWrap.removeAttribute('tabindex');
-      }
-    }, 200);
-    setTimeout(() => {
-      this.trap = createFocusTrap(this.modalPopUpRef, {
-        escapeDeactivates: true,
-        clickOutsideDeactivates: true,
-        returnFocusOnDeactivate: true,
-        onActivate: () => {
-          this.trap.pause();
-        },
-        onDeactivate: () => {
-          this.closeCardModal();
-          this.trap.deactivate();
-        }
-      });
-      this.trap.activate();
-    }, 200);
   }
   closeCardModal() {
     this.showModal = false;
     this.cards = [];
-    setTimeout(() => {
-      let focusDiv = this.focusCardElement.querySelector('.img-wrap');
-      focusDiv === null || focusDiv === void 0 ? void 0 : focusDiv.focus();
-    }, 200);
   }
   showNextCard() {
     if (this.currentCardIndex < this.cards.length - 1) {
@@ -89,13 +62,7 @@ export class PtcTheaterVideoModal {
   }
   render() {
     return (h(Host, null, h("slot", null), this.showModal &&
-      (this.modalType != 'only-video' ? (h("div", { class: "modal", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
-            this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this.currentCardIndex].cardDescription })))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
-            this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
+      (this.modalType != 'only-video' ? (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this.currentCardIndex].cardDescription })))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video" }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
   }
   static get is() { return "ptc-theater-video-modal"; }
   static get encapsulation() { return "scoped"; }
@@ -115,49 +82,24 @@ export class PtcTheaterVideoModal {
       "showModal": {},
       "currentCardIndex": {},
       "filteredTagName": {},
-      "modalType": {},
-      "focusCardElement": {}
+      "modalType": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "modalClosed",
-        "name": "modalClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
   static get methods() {
     return {
       "updateData": {
         "complexType": {
-          "signature": "(data: any, currentModalIndex: any, cardElement?: HTMLElement) => Promise<void>",
+          "signature": "(data: any, currentModalIndex: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
             }, {
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.js

@@ -52,12 +52,7 @@ export class PtcTheaterVideoPlaylist {
     this.cardElements.forEach((cardElement, index) => {
       this.cards.push(this.setCardData(cardElement, index));
       cardElement.addEventListener('click', () => {
-        this.showCardDetails(index, cardElement);
-      });
-      cardElement.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-          this.showCardDetails(index, cardElement);
-        }
+        this.showCardDetails(index);
       });
     });
   }
@@ -92,12 +87,12 @@ export class PtcTheaterVideoPlaylist {
     };
     return cardData;
   }
-  showCardDetails(index, cardElement) {
+  showCardDetails(index) {
     this.currentCardIndex = index;
     // this.showModal = true;
     const modalElement = document.querySelector('ptc-theater-video-modal');
     if (modalElement) {
-      modalElement.updateData(this.cards, this.currentCardIndex, cardElement);
+      modalElement.updateData(this.cards, this.currentCardIndex);
     }
   }
   render() {

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

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

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css

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

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

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

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

@@ -28,7 +28,6 @@ export class PtcWhitePaper {
       window.scrollTo(0, 0);
       if (newPage == 2) {
         let modalForm = document.querySelector("#modal-form");
-        modalForm.focusBackElement = this.el.shadowRoot.querySelectorAll('.pagination button')[2];
         if (modalForm) {
           modalForm.setAttribute("show", "true");
           setTimeout(() => {
@@ -84,9 +83,14 @@ export class PtcWhitePaper {
   }
   renderContent(item, index) {
     const components = Object.values(item);
-    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (this.currentPage == 1
-      ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))
-      : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i))))));
+    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => {
+      var _a, _b;
+      let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
+      let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
+      return h("div", { key: i }, (heading && heading.innerText && ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== '') ? (this.currentPage == 1
+        ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))
+        : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : "", (subHeading && subHeading.innerText && ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== '') ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i));
+    })));
   }
   renderTwoColumnText(comp, index) {
     return (h("div", null, comp.leftColumnContent && (h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));
@@ -106,7 +110,7 @@ export class PtcWhitePaper {
     const startIndex = (this.currentPage - 1) * this.itemsPerPage;
     const endIndex = startIndex + this.itemsPerPage;
     const currentItems = JSON.parse(this.items).slice(startIndex, endIndex);
-    return (h(Host, null, h("div", { class: "hero-image" }, h("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h("div", { class: "ptc-container " }, h("div", { class: "content-container" }, h("div", { class: "pagination-wrap" }, h("div", { class: "pagination" }, h("button", { class: "mf-listen", id: "prevPageBtnID", onClick: () => this.handlePrevPage(), onKeyPress: () => this.handlePrevPage(), tabIndex: 0, disabled: this.currentPage === 1 }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_left_mini" }, h("path", { d: "M12 12.833L8.304 9 12 5.167 10.821 4 6 9l4.821 5L12 12.833z", class: "icon_chevron_left" }))))), this.renderPaginationButtons(), h("button", { class: "mf-listen", id: "nextPageBtnID", onClick: () => this.handleNextPage(), onKeyPress: () => this.handleNextPage(), tabIndex: 0, disabled: this.currentPage === this.totalPages }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_right_mini" }, h("path", { d: "M6 5.167L9.696 9 6 12.833 7.179 14 12 9 7.179 4 6 5.167z", class: "icon_chevron_right" })))))), h("div", { class: "mf-listen dl-btn-wrapper", id: "downloadBtnID" }, h("a", { class: "dl-btn", tabindex: 0, onKeyPress: (e) => this.downloadCtaClicked.emit(e), onClick: (e) => { this.downloadCtaClicked.emit(e); } }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" })))), h("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
+    return (h(Host, null, h("div", { class: "hero-image" }, h("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h("div", { class: "ptc-container " }, h("div", { class: "content-container" }, h("div", { class: "pagination-wrap" }, h("div", { class: "pagination" }, h("button", { class: "mf-listen", id: "prevPageBtnID", onClick: () => this.handlePrevPage(), onKeyPress: () => this.handlePrevPage(), tabIndex: 0, disabled: this.currentPage === 1 }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_left_mini" }, h("path", { d: "M12 12.833L8.304 9 12 5.167 10.821 4 6 9l4.821 5L12 12.833z", class: "icon_chevron_left" }))))), this.renderPaginationButtons(), h("button", { class: "mf-listen", id: "nextPageBtnID", onClick: () => this.handleNextPage(), onKeyPress: () => this.handleNextPage(), tabIndex: 0, disabled: this.currentPage === this.totalPages }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_right_mini" }, h("path", { d: "M6 5.167L9.696 9 6 12.833 7.179 14 12 9 7.179 4 6 5.167z", class: "icon_chevron_right" })))))), h("div", { class: "mf-listen dl-btn-wrapper", id: "downloadBtnID" }, h("a", { class: "dl-btn", tabindex: 0, onKeyPress: () => this.downloadCtaClicked.emit(), onClick: () => { this.downloadCtaClicked.emit(); } }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" })))), h("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
   }
   static get is() { return "ptc-white-paper"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.js

@@ -28,7 +28,7 @@ export class PtcNavLink {
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "tracker-div" }, h("a", { id: this.trackerId, href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
+    return (h(Host, null, h("div", { class: "tracker-div", id: this.trackerId }, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
         this.handleClick(event);
       } }, h("slot", null), !this.href.startsWith('#') && (h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))))));
   }

package/dist/collection/components/tab-header/tab-header.js

@@ -63,7 +63,7 @@ export class TabHeader {
       'tab-header-selected': this.isSelected
     };
     return [
-      h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
+      h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
     ];
   }
   static get is() { return "tab-header"; }