@ptcwebops/ptcw-design 5.0.2 → 5.0.3

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

@@ -1313,29 +1313,9 @@ ptc-link, ptc-square-card,
   overflow: hidden;
   background: var(--color-white);
   border-radius: var(--ptc-border-radius-standard);
-  width: 312px;
+  width: 100%;
   height: 100%;
 }
-@media (min-width: 1200px) and (max-width: 1439) {
-  :host(.featured-horizontal-card) .card-border {
-    margin-left: 16px;
-  }
-}
-@media (min-width: 480px) {
-  :host(.featured-horizontal-card) .card-border {
-    width: 432px;
-  }
-}
-@media (min-width: 768px) {
-  :host(.featured-horizontal-card) .card-border {
-    width: 718px;
-  }
-}
-@media (min-width: 992px) {
-  :host(.featured-horizontal-card) .card-border {
-    width: 100%;
-  }
-}
 :host(.featured-horizontal-card) .card-layout {
   display: flex;
   flex-direction: column;
@@ -1361,49 +1341,24 @@ ptc-link, ptc-square-card,
   transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
   transition-delay: var(--ptc-delay-medium);
   display: block;
-  width: 312px;
-  height: 296px;
-}
-@media (min-width: 480px) {
-  :host(.featured-horizontal-card) .card-media {
-    width: 432px;
-    height: 300px;
-  }
-}
-@media (min-width: 768px) {
-  :host(.featured-horizontal-card) .card-media {
-    width: 718px;
-    height: 441px;
-  }
+  width: 100%;
+  height: 440px;
+  max-height: 440px;
 }
 @media (min-width: 992px) {
   :host(.featured-horizontal-card) .card-media {
-    width: 524px;
-    height: 547px;
-  }
-}
-@media (min-width: 1200px) {
-  :host(.featured-horizontal-card) .card-media {
-    width: 650px;
-    height: 547px;
-  }
-}
-@media (min-width: 1200px) {
-  :host(.featured-horizontal-card) .card-media {
-    width: 685px;
+    width: 50%;
     height: 547px;
+    max-height: 547px;
   }
 }
 :host(.featured-horizontal-card) .card-body {
-  padding: 24px 24px 44px 24px;
-}
-@media (min-width: 768px) {
-  :host(.featured-horizontal-card) .card-body {
-    padding: 24px 48px 44px 48px;
-  }
+  padding: 20px;
 }
 @media (min-width: 992px) {
   :host(.featured-horizontal-card) .card-body {
+    width: 50%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1457,7 +1412,6 @@ ptc-link, ptc-square-card,
   font-size: var(--ptc-font-size-x-small) !important;
   line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
-  margin-bottom: 19px;
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
@@ -1476,38 +1430,14 @@ ptc-link, ptc-square-card,
   }
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-  width: 312px;
-  height: 296px;
-  display: block;
-}
-@media (min-width: 480px) {
-  :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-    width: 432px;
-    height: 300px;
-  }
-}
-@media (min-width: 768px) {
-  :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-    width: 718px;
-    height: 441px;
-  }
+  width: 100%;
+  height: 100%;
+  max-height: 440px;
 }
 @media (min-width: 992px) {
   :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-    width: 524px;
-    height: 547px;
-  }
-}
-@media (min-width: 1200px) {
-  :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-    width: 650px;
-    height: 547px;
-  }
-}
-@media (min-width: 1200px) {
-  :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {
-    width: 685px;
     height: 547px;
+    max-height: 547px;
   }
 }
 

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

@@ -38,7 +38,7 @@ export class PtcCard {
       || (!!this.ribbonText && this.cardType == 'listing-card') ? (h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, h("div", { class: "card-body", part: "body-wrapper" }, h(BodyContainerTag, Object.assign({ class: "link-wrapper" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {})), !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (h("div", { class: "card-date-text" }, !!this.eventType ? (h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
       ? Object.assign({}, (!!this.cardLogo ? (h("div", { class: "card-logo-container" }, h("ptc-picture", { alt: "", "object-fit": "contain", src: this.cardLogo, height: "40" }))) : (h("div", { class: "card-logo-none" })))) : null, h("slot", { name: "slot-before-heading" }), !!this.heading
       ? [
-        this.cardType === 'listing-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": this.maxLines, "max-length": this.maxChars, description: this.heading, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "true", "no-overflow": "true" }))) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
+        this.cardType === 'listing-card' ? (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": this.maxLines, "max-length": this.maxChars, description: this.heading, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "true", "no-overflow": "true" }))) : this.cardType === 'hightlight-card' ? (h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : this.cardType === 'featured-horizontal-card' ? (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, h("h2", null, this.heading))) : (h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
         h("slot", { name: "slot-after-heading" }),
       ]
       : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null))))));

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.css

@@ -97,6 +97,12 @@ ptc-link, ptc-square-card,
   outline: none;
   text-decoration: none;
 }
+:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible {
+  padding: 2px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
+}
 @media only screen and (min-width: 768px) {
   :host .small-inline-cta-container .cta-bg {
     display: block;
@@ -169,6 +175,12 @@ ptc-link, ptc-square-card,
   outline: none;
   text-decoration: none;
 }
+:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible {
+  padding: 2px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
+}
 @media only screen and (min-width: 480px) {
   :host .big-inline-cta-container .cta-content .cta-body {
     margin-top: var(--ptc-element-spacing-04);
@@ -265,6 +277,12 @@ ptc-link, ptc-square-card,
   outline: none;
   text-decoration: none;
 }
+:host .bottom-inline-cta-container .cta-body.link-wrapper:focus-visible {
+  padding: 2px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
+}
 @media only screen and (min-width: 768px) {
   :host .bottom-inline-cta-container {
     flex-direction: row;

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

@@ -1369,6 +1369,29 @@ a.disabled {
 .content-layout.hp-container .gap-adjustment {
   margin-bottom: unset;
 }
+.content-layout.blog-container {
+  padding-bottom: 48px;
+}
+@media only screen and (min-width: 768px) {
+  .content-layout.blog-container {
+    padding-bottom: 80px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .content-layout.blog-container {
+    gap: 43px;
+  }
+  .content-layout.blog-container max-width-container {
+    width: 50%;
+  }
+  .content-layout.blog-container div.desktop-media-image {
+    width: 50%;
+  }
+}
+.content-layout.blog-container .gap-adjustment {
+  gap: var(--ptc-element-spacing-07);
+  margin-bottom: unset;
+}
 
 .gap-adjustment {
   gap: var(--ptc-element-spacing-04);
@@ -1464,6 +1487,92 @@ a.disabled {
   }
 }
 
+:host(.blog-jumbotron) #header-blog-author {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: var(--ptc-layout-spacing-04);
+}
+:host(.blog-jumbotron) #header-blog-author .image {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--ptc-border-radius-circle);
+}
+:host(.blog-jumbotron) #header-blog-author .image img {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--ptc-border-radius-circle);
+  object-fit: cover;
+  object-position: center;
+}
+:host(.blog-jumbotron) .blog-author-name {
+  color: inherit;
+  text-decoration: none;
+  font-size: inherit;
+  font-weight: inherit;
+}
+:host(.blog-jumbotron) .blog-author-name:hover {
+  color: inherit;
+  cursor: pointer;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: var(--color-green-07);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+:host(.blog-jumbotron) .blog-author-name:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
+}
+:host(.blog-jumbotron) .image-container {
+  background: white;
+}
+:host(.blog-jumbotron) .desktop-media-image,
+:host(.blog-jumbotron) .mobile-media-image {
+  position: relative;
+}
+:host(.blog-jumbotron) .desktop-media-image .media-image-wrapper,
+:host(.blog-jumbotron) .mobile-media-image .media-image-wrapper {
+  height: 100%;
+  max-height: 360px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host(.blog-jumbotron) .desktop-media-image .media-image-wrapper ptc-picture,
+:host(.blog-jumbotron) .mobile-media-image .media-image-wrapper ptc-picture {
+  width: 100%;
+  border-radius: var(--ptc-border-radius-standard);
+}
+:host(.blog-jumbotron) .desktop-media-image {
+  display: none;
+}
+:host(.blog-jumbotron) .desktop-media-image ptc-picture {
+  height: 100%;
+  max-height: 360px;
+}
+@media only screen and (min-width: 992px) {
+  :host(.blog-jumbotron) .desktop-media-image {
+    padding-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+}
+:host(.blog-jumbotron) .mobile-media-image {
+  margin: 76px 24px 12px 24px;
+  display: flex;
+}
+:host(.blog-jumbotron) .mobile-media-image ptc-picture {
+  height: 360px;
+}
+@media only screen and (min-width: 992px) {
+  :host(.blog-jumbotron) .mobile-media-image {
+    display: none;
+  }
+}
+
 .dl-img-wrap {
   position: relative;
   width: 100%;

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

@@ -12,7 +12,6 @@ export class PtcJumbotron {
     this.bgSrc = undefined;
     this.isIframe = false;
     this.isHomepage = false;
-    this.isBlogDetail = false;
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.buttonLocation = undefined;
@@ -22,6 +21,11 @@ export class PtcJumbotron {
     this.textAlign = 'left';
     this.isMobile = undefined;
     this.isTransitioning = undefined;
+    this.blogAuthorImage = "";
+    this.blogAuthorImageAlt = "";
+    this.blogAuthorName = "";
+    this.blogAuthorQueryHref = "";
+    this.blogAuthorQueryTarget = "";
     this.styles = undefined;
     this.hasCtaSlot = undefined;
   }
@@ -45,6 +49,9 @@ export class PtcJumbotron {
       case 'png':
         mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { src: this.pngSrc }), this.hasPopupVideo && this.isMobile ? h("slot", { name: "video" }) : null)));
         break;
+      case 'blog':
+        mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" }))));
+        break;
       case 'gif':
         mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
         break;
@@ -59,13 +66,14 @@ export class PtcJumbotron {
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle }), this.jumbotronType === 'png' && this.isBlogDetail && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("slot", { name: "blog-author" })))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === ('text' || 'blog') ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
   }
   getCssClassMap() {
     return {
       // [this.imageZIndex] : true
       'text-jumbotron': this.jumbotronType === 'text' ? true : false,
       'png-jumbotron': this.jumbotronType === 'png' ? true : false,
+      'blog-jumbotron': this.jumbotronType === 'blog' ? true : false,
       'gif-jumbotron': this.jumbotronType === 'gif' ? true : false,
       'dark-video-jumbotron light-links': this.jumbotronType === 'dark-video' ? true : false,
       'light-video-jumbotron': this.jumbotronType === 'light-video' ? true : false,
@@ -87,6 +95,10 @@ export class PtcJumbotron {
           this.contentBackground = 'var(--color-gray-09)';
           this.contentColor = 'var(--color-gray-01)';
           break;
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
         default:
           this.contentBackground = 'transparent';
           this.contentColor = 'var(--color-gray-10)';
@@ -110,6 +122,10 @@ export class PtcJumbotron {
           this.contentBackground = '#F3F3F3';
           this.contentColor = 'var(--color-gray-10)';
           break;
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
         default:
           this.contentBackground = 'transparent';
           this.contentColor = 'var(--color-gray-10)';
@@ -325,24 +341,6 @@ export class PtcJumbotron {
         "reflect": false,
         "defaultValue": "false"
       },
-      "isBlogDetail": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-blog-detail",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "playButtonTitle": {
         "type": "string",
         "mutable": false,
@@ -429,6 +427,96 @@ export class PtcJumbotron {
         "attribute": "is-transitioning",
         "reflect": false
       },
+      "blogAuthorImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blog-author-image",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "blogAuthorImageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blog-author-image-alt",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "blogAuthorName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blog-author-name",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "blogAuthorQueryHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blog-author-query-href",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "blogAuthorQueryTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blog-author-query-target",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "styles": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.js

@@ -6,7 +6,12 @@ export class PtcNavSkipToContent {
       let skipLink = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a.skip-link');
       skipLink === null || skipLink === void 0 ? void 0 : skipLink.blur();
     };
+    this.escalateOnDom = () => {
+      const body = document.querySelector('body');
+      body.insertAdjacentElement('afterbegin', this.hostEle);
+    };
     this.componentWillLoad = () => {
+      this.escalateOnDom();
       window.addEventListener('scroll', this.hideOnScroll);
     };
     this.disconnectedCallback = () => {