@ptcwebops/ptcw-design 6.3.25 → 6.3.26-beta

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.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-related-card-rail/ptc-related-card-rail.css

@@ -125,7 +125,8 @@ ptc-link, ptc-square-card,
   display: none;
 }
 :host .card-rail-content .content-container .content {
-  flex: 1 0 calc(100% - 10px);
+  width: 100%;
+  flex: 1 0 100%;
   display: flex;
   padding: 5px;
 }

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

@@ -1,40 +1,12 @@
 import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
 export class PtcRelatedCardRail {
   constructor() {
-    //lastFocusElement: HTMLElement;
-    this.setFocusTrap = () => {
-      //console.log('this.focusTrap: ' + this.focusTrap)
-      if (!this.focusTrap) {
-        this.focusTrap = createFocusTrap(this.el, {
-          escapeDeactivates: true,
-          returnFocusOnDeactivate: true,
-          onActivate: () => {
-            if (!this.openedByKeyboard) {
-              this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
-            }
-          },
-          onDeactivate: () => {
-            setTimeout(() => {
-              this.closed = true;
-            }, 0);
-          },
-          tabbableOptions: {
-            getShadowRoot: true,
-          },
-        });
-      }
-      if (this.isVisible === true && this.openedByKeyboard === true) {
-        this.focusTrap && this.focusTrap.activate();
-        //console.log('activate focus trap');
-      }
-    };
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
         contentContainerMargin: undefined,
         contentCards: undefined,
-        parahFontSize: undefined,
+        parahFontSize: undefined
       };
       if (windowWidth >= 2600) {
         props.contentCards = 3;
@@ -77,7 +49,7 @@ export class PtcRelatedCardRail {
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth"
         });
       }
     };
@@ -87,12 +59,12 @@ export class PtcRelatedCardRail {
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
       let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < contentCards.length - this.screenBasedProps.contentCards) {
+      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
         this.cardInView += 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth"
         });
       }
     };
@@ -102,18 +74,12 @@ export class PtcRelatedCardRail {
         let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
         let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
         let trackLength = documentHeight - windowHeight;
-        let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
+        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
         if (percentageSrolled >= 50) {
           this.el.style.display = 'block';
-          this.isVisible = true;
         }
         else {
-          if (this.focusTrap && this.closed === true) {
-            this.focusTrap.deactivate();
-            this.focusTrap = undefined;
-          }
           this.el.style.display = 'none';
-          this.isVisible = false;
         }
         let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
         let pageFooter = document.querySelector(this.footerQuerySelector);
@@ -126,12 +92,6 @@ export class PtcRelatedCardRail {
           }
         }
       }
-      else {
-        if (this.focusTrap) {
-          this.focusTrap.deactivate();
-          this.focusTrap = undefined;
-        }
-      }
     };
     this.handleOnResizeBehaviour = () => {
       var _a, _b;
@@ -145,47 +105,44 @@ export class PtcRelatedCardRail {
       });
       this.cardInView = 0;
     };
-    this.handleKeyPress = (event) => {
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
-        this.openedByKeyboard = true;
-        if (this.focusTrap && this.closed === true) {
-          this.focusTrap.deactivate();
-          this.focusTrap = undefined;
-          //console.log('flag');
+    // Redirect focus to the target element
+    this.redirectFocus = (event) => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        const marker = document.getElementById('hidden-rail-marker');
+        const activeElement = document.activeElement;
+        if (marker && activeElement === marker) {
+          event.preventDefault();
+          setTimeout(() => {
+            if (this.targetElement) {
+              this.targetElement.focus();
+            }
+            else {
+              console.log('target ele reference not found');
+            }
+          }, 100);
         }
       }
     };
-    this.handleMouseDown = () => {
-      this.openedByKeyboard = false;
-    };
     this.footerQuerySelector = undefined;
-    this.railTitle = 'Read More Case Studies';
-    this.isVisible = false;
+    this.railTitle = "Read More Case Studies";
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
     this.screenBasedProps = {
       contentContainerMargin: undefined,
       contentCards: undefined,
-      parahFontSize: undefined,
+      parahFontSize: undefined
     };
-    this.openedByKeyboard = false;
-  }
-  onVisibleChanged(newValue) {
-    if (newValue) {
-      this.setFocusTrap();
-      //console.log('isVisible: ' + this.isVisible);
-    }
   }
   handleKeyClose(event) {
-    if (event.key === 'Enter' || event.key === 'Esc') {
+    if (event.key === 'Enter') {
       event.preventDefault();
       this.closed = true;
     }
   }
   connectedCallback() {
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    document.addEventListener('mousedown', this.handleMouseDown, true);
+    // Attach event listener to the marker
+    document.addEventListener('keydown', this.redirectFocus);
   }
   componentWillLoad() {
     const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
@@ -196,7 +153,7 @@ export class PtcRelatedCardRail {
           image: undefined,
           text: undefined,
           href: undefined,
-          altText: undefined,
+          altText: undefined
         };
         let cardImage = card.querySelector('img');
         let cardLink = card.querySelector('a');
@@ -209,31 +166,19 @@ export class PtcRelatedCardRail {
       }
     }
     this.handleOnScrollBehaviour();
-    this.setScreenBasedProps();
   }
   componentDidLoad() {
+    this.setScreenBasedProps();
     window.addEventListener('scroll', this.handleOnScrollBehaviour);
     window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
   disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    document.removeEventListener('mousedown', this.handleMouseDown, true);
-    if (this.focusTrap) {
-      this.focusTrap.deactivate();
-      this.focusTrap = undefined;
-    }
+    // Clean up the event listener when the component is removed
+    document.removeEventListener('keydown', this.redirectFocus);
   }
   render() {
-    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: el => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: event => this.handleKeyClose(event), onClick: () => {
-        if (this.focusTrap) {
-          this.focusTrap.deactivate();
-        }
-        this.closed = true;
-      }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => (h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => {
-        event.key === 'Enter' && window.open(item.href);
-      }, onClick: () => {
-        window.open(item.href);
-      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
+    return (this.closed ? null :
+      h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => { this.closed = true; }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => { event.key === 'Enter' && window.open(item.href); }, onClick: () => { window.open(item.href); }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }
@@ -282,25 +227,7 @@ export class PtcRelatedCardRail {
         },
         "attribute": "rail-title",
         "reflect": false,
-        "defaultValue": "'Read More Case Studies'"
-      },
-      "isVisible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-visible",
-        "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"Read More Case Studies\""
       }
     };
   }
@@ -309,15 +236,8 @@ export class PtcRelatedCardRail {
       "closed": {},
       "cardInView": {},
       "data": {},
-      "screenBasedProps": {},
-      "openedByKeyboard": {}
+      "screenBasedProps": {}
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "isVisible",
-        "methodName": "onVisibleChanged"
-      }];
-  }
 }

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js

@@ -11,7 +11,6 @@ export class PtcStickyIcons {
   }
   setHostLocation() {
     let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-    const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
     const element = document.querySelector("ptc-sticky-icons");
@@ -20,14 +19,6 @@ export class PtcStickyIcons {
       if (width < 992) {
         currEle.parentElement.appendChild(currEle);
         currEle.parentElement.style.paddingRight = "0px";
-        // Code for case study page only
-        // Moving sticky icon in the last ptc-section div
-        if (detailSection) {
-          const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
-          if (lastSection && !lastSection.contains(element)) {
-            lastSection.appendChild(currEle);
-          }
-        }
       }
       else {
         currEle.parentElement.prepend(currEle);

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -11,12 +11,6 @@ export class PtcTextCopyWithBackground {
     this.disableLightLinks = false;
     this.styles = undefined;
   }
-  componentDidLoad() {
-    var _a;
-    if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
-      (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
-    }
-  }
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
@@ -222,5 +216,4 @@ export class PtcTextCopyWithBackground {
       }
     };
   }
-  static get elementRef() { return "hostEle"; }
 }

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