@ptcwebops/ptcw-design 6.4.3 → 6.4.4-beta

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ResponsiveBgVariables } from "../../utils/interfaces";
 export class PtcImg {
   constructor() {
@@ -11,26 +11,95 @@ export class PtcImg {
     this.borderRadius = "";
     this.loadMode = "lazy-bg";
     this.styles = undefined;
+    this.enableLazyLoad = false;
+    this.delay = 2000;
+    this.bgSrcLazy = undefined;
+    this.bgSrcMedium = undefined;
+    this.bgSrcHigh = undefined;
+    this.isInViewport = false;
+    this.isImageUpgraded = false;
   }
-  /**
-   * Image Z Index
-   */
-  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
   WindowResize() {
     this.setResponsiveBg();
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": `${this.imgUrl}`, "data-sm": `${this.imgUrl}`, "data-md": `${this.imgUrl}`, "data-lg": `${this.imgUrl}` }, this.imageType == "smart-bg" ? h("slot", null) : null)));
+    if (this.enableLazyLoad && this.imgUrl) {
+      // Lazy loading functionality
+      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h("div", { class: "low-quality", style: {
+          backgroundImage: `url(${this.bgSrcLazy})`,
+          opacity: "1",
+          transition: "opacity 0.5s ease-in-out",
+        } }), h("div", { class: "medium-quality", style: {
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
+        } }), h("div", { class: "high-quality", style: {
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
+        } }), this.imageType == "smart-bg" ? h("slot", null) : null)));
+    }
+    else {
+      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": this.bgSrcLazy || this.imgUrl, "data-sm": this.bgSrcLazy || this.imgUrl, "data-md": this.bgSrcLazy || this.imgUrl, "data-lg": this.bgSrcLazy || this.imgUrl, style: {
+          backgroundImage: `url(${this.bgSrcLazy || this.imgUrl})`,
+        } }, this.imageType == "smart-bg" ? h("slot", null) : null)));
+    }
+  }
+  componentWillLoad() {
+    if (this.enableLazyLoad) {
+      this.isInViewport = false;
+    }
+    if (this.enableLazyLoad && this.imgUrl) {
+      this.bgSrcLazy = this.getImageUrl("lq");
+      this.bgSrcMedium = this.getImageUrl("mq");
+      this.bgSrcHigh = this.getImageUrl("hq");
+    }
+    else {
+      console.warn("Image URL is undefined or invalid.");
+      this.bgSrcLazy = "";
+      this.bgSrcMedium = "";
+      this.bgSrcHigh = "";
+    }
   }
   componentDidLoad() {
     this.addIntersectionObserver();
     this.setResponsiveBg();
+    if (this.enableLazyLoad && this.imgUrl) {
+      const that = this;
+      setTimeout(() => {
+        that.upgradeImageQuality();
+      }, that.delay);
+    }
   }
   componentWillUpdate() {
     this.addIntersectionObserver();
     this.setResponsiveBg();
   }
+  upgradeImageQuality() {
+    if (this.isInViewport && !this.isImageUpgraded) {
+      console.log("Low-quality image is visible.");
+      this.isImageUpgraded = true;
+      setTimeout(() => {
+        const mediumLayer = this.el.querySelector(".medium-quality");
+        if (mediumLayer) {
+          mediumLayer.style.backgroundImage = `url(${this.bgSrcMedium})`;
+          mediumLayer.style.opacity = "1";
+          console.log("Medium-quality image is now visible.");
+        }
+        setTimeout(() => {
+          const highLayer = this.el.querySelector(".high-quality");
+          if (highLayer) {
+            highLayer.style.backgroundImage = `url(${this.bgSrcHigh})`;
+            highLayer.style.opacity = "1";
+            console.log("High-quality image is now visible.");
+          }
+          if (mediumLayer) {
+            mediumLayer.style.opacity = "0";
+            console.log("Medium-quality image is hidden.");
+          }
+        }, this.delay);
+      }, this.delay / 2);
+    }
+  }
   //responsive image
   setResponsiveBg() {
     // Define local variables
@@ -68,6 +137,8 @@ export class PtcImg {
             const image = entry.target;
             image.classList.remove("lazy-bg");
             bgObserver.unobserve(image);
+            this.isInViewport = true;
+            this.upgradeImageQuality();
           }
         });
       });
@@ -81,12 +152,21 @@ export class PtcImg {
       // }, 5000);
     }
   }
+  getImageUrl(quality) {
+    if (this.imgUrl && this.imgUrl.includes("?")) {
+      return `${this.imgUrl}&t=ptcjumbdesk${quality}`;
+    }
+    else {
+      return `${this.imgUrl}?t=ptcjumbdesk${quality}`;
+    }
+  }
   getCssClassMap() {
     return {
       [this.imageType]: true,
-      "ptc-img": true,
+      'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      [this.enableLazyLoad ? 'ptc-img--lazy' : '']: true,
       // [this.imageZIndex] : true
     };
   }
@@ -298,9 +378,54 @@ export class PtcImg {
         },
         "attribute": "styles",
         "reflect": false
+      },
+      "enableLazyLoad": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) enable lazy loading"
+        },
+        "attribute": "enable-lazy-load",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) setTimeout delay fro Lazy loading"
+        },
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "2000"
       }
     };
   }
+  static get states() {
+    return {
+      "bgSrcLazy": {},
+      "bgSrcMedium": {},
+      "bgSrcHigh": {},
+      "isInViewport": {},
+      "isImageUpgraded": {}
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -1204,14 +1204,17 @@ a: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),
 .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);
@@ -1220,38 +1223,47 @@ ptc-modal inline-form a,
 }
 .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,
+.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 {
@@ -1260,24 +1272,30 @@ ptc-modal inline-form a,
 }
 .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 {
@@ -1285,14 +1303,17 @@ ptc-modal inline-form a,
 }
 .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;
@@ -1300,14 +1321,17 @@ ptc-modal inline-form a,
 }
 .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);

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

@@ -30,6 +30,7 @@ export class PtcJumbotron {
     this.hasCountdown = false;
     this.logo = "";
     this.styles = undefined;
+    this.enableLazy = false;
     this.defer = undefined;
     this.hasCtaSlot = undefined;
   }
@@ -68,10 +69,10 @@ export class PtcJumbotron {
         break;
       case "dark":
       case "light":
-        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
+        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
         break;
       default:
-        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }));
+        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }));
     }
     return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: {
         parent: true,
@@ -92,14 +93,19 @@ export class PtcJumbotron {
       !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" || this.jumbotronType === "blog" ? "margin-flush" : "margin-bottom-6"}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === "text"
+        : "small", "font-weight": "w-4", "para-margin": `${this.jumbotronType === "text" ||
+        this.jumbotronType === "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" } }), h("p", { style: { margin: "0" } }, h("slot", { name: "blog-date" })), 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 mf-listen", tabindex: "0", href: this
         .blogAuthorQueryHref, target: this
         .blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, 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 &&
+      .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.hasCountdown ? (h("slot", { name: "countdown" })) : 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() {
@@ -623,6 +629,24 @@ export class PtcJumbotron {
         "attribute": "styles",
         "reflect": false
       },
+      "enableLazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) to enable lazy loading"
+        },
+        "attribute": "enable-lazy",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "defer": {
         "type": "boolean",
         "mutable": false,

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

@@ -1,11 +1,36 @@
 import { Host, h } from "@stencil/core";
 import { getFileExtension } from "../../utils/utils";
+import { isReducedMotion, onReducedMotionChange } from "../../utils/utils";
 export class PtcMediaCard {
   constructor() {
     /**
      * ref video element
      */
     this.videoEle = undefined;
+    // ---------- Reduced motion helpers ----------
+    this.showFirstFrame = (v) => {
+      v.preload = "auto";
+      v.removeAttribute("autoplay");
+      v.loop = false;
+      const paint = () => {
+        try {
+          v.currentTime = 1;
+        }
+        catch (_a) { }
+        v.pause();
+      };
+      if (v.readyState >= 2 /* HAVE_CURRENT_DATA */) {
+        paint();
+      }
+      else {
+        const onLoaded = () => {
+          v.removeEventListener("loadeddata", onLoaded);
+          paint();
+        };
+        v.addEventListener("loadeddata", onLoaded, { once: true });
+        v.load();
+      }
+    };
     this.cardType = "media-card";
     this.cardHref = undefined;
     this.target = "_self";
@@ -22,10 +47,28 @@ export class PtcMediaCard {
     this.trackerId = undefined;
     this.isHovered = false;
     this.isTabNavigated = true;
+    this.reducedMotion = false;
+    this.paused = false;
   }
-  WatchStateHandler(newValue) {
-    if (this.videoEle) {
-      newValue ? this.videoEle.play() : this.videoEle.pause();
+  async onHoverChange(hover) {
+    const v = this.videoEle;
+    if (!v)
+      return;
+    if (this.reducedMotion) {
+      if (hover)
+        this.showFirstFrame(v);
+      else
+        v.pause();
+      return;
+    }
+    // Animations ON
+    if (hover) {
+      v.loop = true;
+      v.setAttribute("autoplay", "");
+      v.play().catch(() => { });
+    }
+    else {
+      v.pause();
     }
   }
   getCardText() {
@@ -40,11 +83,37 @@ export class PtcMediaCard {
       ? (this.isTabNavigated = false)
       : (this.isTabNavigated = true);
   }
+  syncPlaybackWithPreference() {
+    const v = this.videoEl;
+    if (!v)
+      return;
+    if (this.reducedMotion) {
+      this.showFirstFrame(v);
+    }
+    else {
+      // Resume autoplay if hovered; otherwise stay paused
+      v.preload = "auto";
+      v.loop = true;
+      if (this.isHovered && !this.paused) {
+        v.setAttribute("autoplay", "");
+        v.play().catch(() => { });
+      }
+    }
+  }
   componentWillLoad() {
     this.setTabNavigatedState();
+    this.reducedMotion = isReducedMotion();
+    this.ariaLabel = this.getLastStringAfterSlash(this.cardHref);
   }
   componentDidLoad() {
-    this.ariaLabel = this.getLastStringAfterSlash(this.cardHref);
+    this.offPRM = onReducedMotionChange((reduced) => {
+      this.reducedMotion = reduced;
+      setTimeout(() => this.syncPlaybackWithPreference(), 10);
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.offPRM) === null || _a === void 0 ? void 0 : _a.call(this);
   }
   getLastStringAfterSlash(url) {
     const parts = url.split("/");
@@ -276,7 +345,7 @@ export class PtcMediaCard {
       },
       "ariaLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -347,14 +416,16 @@ export class PtcMediaCard {
   static get states() {
     return {
       "isHovered": {},
-      "isTabNavigated": {}
+      "isTabNavigated": {},
+      "reducedMotion": {},
+      "paused": {}
     };
   }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "isHovered",
-        "methodName": "WatchStateHandler"
+        "methodName": "onHoverChange"
       }];
   }
 }

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

@@ -86,6 +86,7 @@ ptc-footer {
   align-content: flex-end;
   z-index: 50020;
   transform: translateY(-100%);
+  position: relative;
 }
 @media only screen and (min-width: 992px) {
   .wrapper .modal-popup {
@@ -101,6 +102,9 @@ ptc-footer {
 .wrapper .modal-popup.xl {
   max-width: 64.0625rem;
 }
+.wrapper .modal-popup.fit-content {
+  max-width: fit-content;
+}
 .wrapper .modal-popup.max {
   width: calc(100% - 4rem);
   max-width: 75rem;

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

@@ -3,33 +3,19 @@ import { createFocusTrap } from "focus-trap";
 export class PtcModal {
   constructor() {
     this.setReturnFocus = () => {
-      var _a, _b;
-      if (!this.lastFocusElement)
-        return;
-      // Try focusing the last focused element directly
-      if (this.lastFocusElement.tabIndex === 0) {
+      if (this.lastFocusElement instanceof HTMLElement) {
         this.lastFocusElement.focus();
-        return;
-      }
-      // If it's inside a shadow DOM, try finding a focusable child
-      const shadowRoot = this.lastFocusElement.shadowRoot;
-      if (shadowRoot) {
-        const focusableElementList = shadowRoot.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
-        if (focusableElementList) {
-          let focusableElement = focusableElementList[focusableElementList.length - 1];
-          focusableElement.focus();
-          return;
-        }
-      }
-      // As a fallback, try to find a focusable child within the element
-      const fallbackElement = (_b = (_a = this.lastFocusElement).querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, 'button, [tabindex]:not([tabindex="-1"])');
-      if (fallbackElement instanceof HTMLElement) {
-        fallbackElement.focus();
       }
     };
     this.handleKeyPress = (event) => {
       if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
         this.openedByKeyboard = true;
+        // if (event.key === 'Enter') {
+        //   if (!this.show) {
+        //     const id= (event.target as HTMLElement).getAttribute('id');
+        //     localStorage.setItem('modalId', id);
+        //   }
+        // }
       }
     };
     this.handleMouseDown = () => {
@@ -62,7 +48,7 @@ export class PtcModal {
   }
   onShowChange(newValue) {
     if (newValue) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     else {
@@ -159,7 +145,7 @@ export class PtcModal {
   }
   componentDidLoad() {
     if (this.show) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     if (this.showHeaderFooter) {
@@ -240,6 +226,20 @@ export class PtcModal {
         if (this.trap) {
           this.trap.deactivate();
         }
+        // // Code for returning the focus to the element which opened the modal
+        // const modalId = localStorage.getItem('modalId');
+        // if (!modalId) return;
+        // const focusItem = document.querySelector<HTMLElement>(`#${modalId}`);
+        // if (!focusItem || focusItem.id !== modalId) return;
+        // // Focus the host element
+        // focusItem.focus();
+        // // If it's a PTC-BUTTON, try focusing the internal native <button>
+        // if (focusItem.tagName === 'PTC-BUTTON' && focusItem.shadowRoot) {
+        //   const innerButton = focusItem.shadowRoot.querySelector<HTMLElement>('button');
+        //   innerButton?.focus();
+        // }
+        // // Clean up localStorage
+        // localStorage.removeItem('modalId');
       } })));
     let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: (e) => {
         e.preventDefault();
@@ -355,8 +355,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "| \"sm\"\r\n\t\t| \"md\"\r\n\t\t| \"lg\"\r\n\t\t| \"xl\"\r\n\t\t| \"max\"\r\n\t\t| \"sm-modal\"",
-          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "| \"sm\"\r\n\t\t| \"md\"\r\n\t\t| \"lg\"\r\n\t\t| \"xl\"\r\n\t\t| \"fit-content\"\r\n\t\t| \"max\"\r\n\t\t| \"sm-modal\"",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.js

@@ -144,7 +144,10 @@ export class PtcModalQuiz {
   render() {
     const ProgressDots = () => {
       return (h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map((questionNumber) => {
-        return (h("div", null, h("div", { class: `dot-progress-circle ${questionNumber === this.currentQuestion - 1 ? "active" : ""}` }), questionNumber <
+        return (h("div", null, h("div", { class: `dot-progress-circle ${questionNumber ===
+            this.currentQuestion - 1
+            ? "active"
+            : ""}` }), questionNumber <
           this.totalQuestions - 1 ? (h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" }))) : null));
       })));
     };

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

@@ -108,6 +108,9 @@ p.main {
 p.primary-grey {
   color: var(--color-gray-10);
 }
+p.primary-green {
+  color: var(--color-green-06);
+}
 p.gray-darker {
   color: var(--color-gray-11);
 }

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

@@ -196,8 +196,8 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary-grey\" | \"white\" | \"gray-darker\"",
-          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
+          "original": "| \"primary-grey\"\r\n\t\t| \"primary-green\"\r\n\t\t| \"white\"\r\n\t\t| \"gray-darker\"",
+          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,