@ptcwebops/ptcw-design 6.2.21 → 6.2.22

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

@@ -67,11 +67,12 @@ ptc-footer ul {
   list-style: none;
 }
 ptc-footer ul li a {
+  margin: -2px;
+  border: 2px solid transparent;
   text-decoration: underline;
   text-underline-offset: 6px;
   text-decoration-thickness: 1px;
   text-decoration-color: transparent;
-  border-bottom: none;
   transition: text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout);
   color: var(--color-white) !important;
 }
@@ -87,6 +88,11 @@ ptc-footer ul li a:active {
   transition: none;
   text-decoration-color: var(--color-gray-04);
 }
+ptc-footer ul li a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 ptc-footer .gap-20 {
   grid-column-gap: 20px;
   grid-row-gap: 20px;
@@ -237,11 +243,18 @@ ptc-footer .footer-bottom ul li, ptc-footer .footer-bottom ol li {
   font-size: var(--ptc-font-size-xx-small);
 }
 ptc-footer .footer-bottom .logo {
+  margin: -2px;
   margin-bottom: var(--ptc-element-spacing-06);
 }
 ptc-footer .footer-bottom .logo a {
+  border: 2px solid transparent;
   display: inline-block;
 }
+ptc-footer .footer-bottom .logo a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 ptc-footer .footer-bottom .logo .footer-ptc-logo {
   width: 78px;
   height: 28px;

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

@@ -71,6 +71,7 @@ ptc-link, ptc-square-card,
   padding: 20px;
   background-color: var(--color-gray-10);
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid transparent;
   align-items: center;
   text-decoration: none;
   text-align: center;
@@ -109,6 +110,15 @@ ptc-link, ptc-square-card,
 :host a span {
   display: block;
 }
+:host a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+:host .dark-bg a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .card-icon {
   width: 2rem;
   height: 2rem;

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

@@ -1,12 +1,17 @@
 import { Host, h } from '@stencil/core';
+import { CheckDarkFocusState } from '../../utils/utils';
 export class PtcIconCard {
   constructor() {
     this.cardHref = undefined;
     this.target = undefined;
     this.trackerId = undefined;
+    this.darkFocusState = false;
+  }
+  componentWillLoad() {
+    CheckDarkFocusState(this, this.el, '.light-links,ptc-footer');
   }
   render() {
-    return (h(Host, null, h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h("a", { href: this.cardHref, target: this.target }, h("div", null, h("span", { class: 'card-icon' }, h("slot", null)), h("div", { class: 'card-title' }, h("slot", { name: 'card-title' })))))));
+    return (h(Host, null, h("div", { id: this.trackerId, class: this.darkFocusState ? `tracker-div mf-listen dark-bg` : `tracker-div mf-listenstandard-bg` }, h("a", { href: this.cardHref, target: this.target }, h("div", null, h("span", { class: 'card-icon' }, h("slot", null)), h("div", { class: 'card-title' }, h("slot", { name: 'card-title' })))))));
   }
   static get is() { return "ptc-icon-card"; }
   static get encapsulation() { return "shadow"; }
@@ -72,7 +77,26 @@ export class PtcIconCard {
         },
         "attribute": "tracker-id",
         "reflect": false
+      },
+      "darkFocusState": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add dark-focus-state property where button is present on dark backgrounds"
+        },
+        "attribute": "dark-focus-state",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

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

@@ -105,8 +105,14 @@ export class PtcIconComponent {
     }
   }
   setUpTabIndex() {
-    this.iconSwiper.slides.forEach(i => i.querySelectorAll("a").forEach(item => item.tabIndex = -1));
-    this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a").forEach(item => item.tabIndex = 0);
+    if (this.iconSwiper) {
+      if (this.iconSwiper.slides) {
+        this.iconSwiper.slides.forEach(i => i.querySelectorAll("a").forEach(item => item.tabIndex = -1));
+        if (this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a")) {
+          this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a").forEach(item => item.tabIndex = 0);
+        }
+      }
+    }
   }
   render() {
     return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el, tabindex: 0, onClick: (e) => this.onPrevBtnClick(e), onKeyDown: (e) => this.onPrevBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el, tabindex: 0, onClick: (e) => this.onNextBtnClick(e), onKeyDown: (e) => this.onNextBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }))));

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

@@ -1150,6 +1150,19 @@ ptc-preloader-section.min-height {
   color: var(--color-white);
 }
 
+ptc-nav-submenu {
+  margin-top: 6px;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
+  margin-top: 4px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+
 a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
@@ -1180,6 +1193,8 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
@@ -1195,6 +1210,19 @@ a:focus-visible {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

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

@@ -74,6 +74,10 @@ ptc-link, ptc-square-card,
   text-decoration: none;
   transition: color var(--ptc-transition-fast) var(--ptc-ease-inout);
 }
+.ptc-link.focus-state-dark-background {
+  border: 2px solid transparent;
+  margin: -2px;
+}
 .ptc-link:active {
   transition: none;
 }
@@ -96,6 +100,10 @@ ptc-link, ptc-square-card,
   text-decoration-thickness: 2px;
   transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
+.simple.focus-state-dark-background {
+  border: 2px solid transparent;
+  margin: -2px;
+}
 .simple:hover {
   color: var(--color-green-06);
   transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { getSeoTagType } from '../../utils/utils';
+import { getSeoTagType, CheckDarkFocusState } from '../../utils/utils';
 export class PtcLink {
   constructor() {
     this.disabled = false;
@@ -17,6 +17,9 @@ export class PtcLink {
     this.tabNav = 0;
     this.darkFocusState = false;
   }
+  componentWillLoad() {
+    CheckDarkFocusState(this, this.el);
+  }
   seoCompRender() {
     const classMap = this.getCssClassMap();
     const [TagType, firstChild] = getSeoTagType(this.el, "a");

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.js

@@ -5,9 +5,10 @@ export class PtcMinimizedNav {
     this.imgSrc = '';
     this.imgAlt = 'PTC';
     this.navType = 'minimized-header';
+    this.trackerId = undefined;
   }
   render() {
-    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header mf-listen" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl, tabindex: "0" }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
+    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container mf-listen", id: this.trackerId }, h("a", { class: "mini-navbar-logo", href: this.linkUrl, tabindex: "0" }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
   }
   static get is() { return "ptc-minimized-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -94,6 +95,23 @@ export class PtcMinimizedNav {
         "attribute": "nav-type",
         "reflect": false,
         "defaultValue": "'minimized-header'"
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

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

@@ -165,6 +165,19 @@ export class PtcPagenation {
       this.setupEventPresets();
     }
   }
+  componentDidLoad() {
+    const filterContainer = this.el.shadowRoot.querySelector(".standard-filter");
+    if (!filterContainer)
+      return;
+    filterContainer.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        const target = event.target;
+        if (target.tagName === "A") {
+          this.paginationItemKeydown.emit();
+        }
+      }
+    });
+  }
   setupStandardPresets() {
     if (this.clickedPageNumber < 1) {
       this.clickedPageNumber == 1;
@@ -545,6 +558,21 @@ export class PtcPagenation {
   }
   static get events() {
     return [{
+        "method": "paginationItemKeydown",
+        "name": "paginationItemKeydown",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
         "method": "pageClicked",
         "name": "pageClicked",
         "bubbles": true,
@@ -561,6 +589,7 @@ export class PtcPagenation {
         }
       }];
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",

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

@@ -5604,6 +5604,8 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
@@ -5619,6 +5621,19 @@ a:focus-visible {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -2751,6 +2751,154 @@ ptc-link, ptc-square-card,
   margin: 0;
 }
 
+.preloader-search-results {
+  position: relative;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+}
+.preloader-search-results .ptc-container {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.preloader-search-results .content-container {
+  z-index: 3;
+  position: relative;
+}
+.preloader-search-results .content-container .content-container-child {
+  background-color: --color-standard-gray;
+  position: relative;
+}
+.preloader-search-results .content-container .grid-top {
+  margin-bottom: 30px;
+}
+.preloader-search-results .content-container .row-margin-btm {
+  margin-bottom: 10px;
+}
+.preloader-search-results .content-container .grid-top-2 {
+  margin-bottom: 20px;
+}
+.preloader-search-results .content-container .block-1 {
+  height: 527px;
+}
+.preloader-search-results .content-container .skeleton {
+  padding: 4px 0 0 0;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block {
+  margin-bottom: 6px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.longer {
+  width: 568px;
+}
+@media only screen and (min-width: 360px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 199px;
+  }
+}
+@media only screen and (min-width: 480px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 275px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 459px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 393px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 538px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
+    width: 568px;
+  }
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.longest {
+  width: 754px;
+}
+@media only screen and (min-width: 360px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 264px;
+  }
+}
+@media only screen and (min-width: 480px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 366px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 611px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 523px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 714px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
+    width: 754px;
+  }
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.medium {
+  width: 366px;
+}
+@media only screen and (min-width: 360px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 129px;
+  }
+}
+@media only screen and (min-width: 480px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 179px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 297px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 254px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 347px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
+    width: 366px;
+  }
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.small {
+  width: 100%;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.thin {
+  height: 16px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.thinner {
+  height: 1px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.bold {
+  height: 26px;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -83,6 +83,9 @@ export class PtcPreloaderSection {
       }
       case 'resource-center':
         return (h("div", { class: "preloader-wrapper resource-center-skeleton-preloader" }, h("div", { class: "skeleton jumbo-image-mobile" }), h("div", { class: "skeleton-jumbotron" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" }))))))), h("div", { class: 'ptc-container' }, h("div", { class: "is-grid desktop-cards" }, h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block bold long" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12-xs is-col-9-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 15 }).map(() => (h("div", { class: "is-col-6-sm is-col-4-xl skeleton-block card-block" })))))))));
+      case 'search-results': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
+      }
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1095,6 +1095,19 @@ ptc-preloader-section.min-height {
   color: var(--color-white);
 }
 
+ptc-nav-submenu {
+  margin-top: 6px;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
+  margin-top: 4px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+
 :host {
   display: block;
   color: var(--color-gray-10);

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

@@ -84,6 +84,8 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
@@ -99,6 +101,19 @@ a:focus-visible {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

package/dist/collection/components/ptc-product-category/ptc-product-category.css

@@ -84,6 +84,8 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
@@ -99,6 +101,19 @@ a:focus-visible {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

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

@@ -84,6 +84,8 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
 .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
@@ -99,6 +101,19 @@ a:focus-visible {
   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 {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);