@ptcwebops/ptcw-design 6.1.9 → 6.1.11

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

@@ -9,6 +9,7 @@ export class PtcJumbotron {
     this.pngImgStyles = "";
     this.gifSrc = undefined;
     this.bgVideoSrc = undefined;
+    this.bgVideoPosterSrc = undefined;
     this.bgSrc = undefined;
     this.isIframe = false;
     this.isHomepage = false;
@@ -27,6 +28,7 @@ export class PtcJumbotron {
     this.blogAuthorQueryHref = "";
     this.blogAuthorQueryTarget = "";
     this.styles = undefined;
+    this.defer = undefined;
     this.hasCtaSlot = undefined;
   }
   componentWillLoad() {
@@ -57,7 +59,7 @@ export class PtcJumbotron {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
+        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
       case 'dark':
       case 'light':
@@ -288,6 +290,23 @@ export class PtcJumbotron {
         "attribute": "bg-video-src",
         "reflect": false
       },
+      "bgVideoPosterSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-video-poster-src",
+        "reflect": false
+      },
       "bgSrc": {
         "type": "string",
         "mutable": false,
@@ -534,6 +553,23 @@ export class PtcJumbotron {
         "attribute": "styles",
         "reflect": false
       },
+      "defer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "delay loading of video to improve perfomance"
+        },
+        "attribute": "defer",
+        "reflect": false
+      },
       "hasCtaSlot": {
         "type": "boolean",
         "mutable": true,

package/dist/custom-elements/index.js

@@ -1413,30 +1413,68 @@ const FlTabContent$1 = class extends HTMLElement$1 {
   static get style() { return flTabContentCss; }
 };
 
-const flTabHeaderCss = "h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.sc-fl-tab-header-h{display:block}.sc-fl-tab-header-h p.sc-fl-tab-header{color:var(--color-gray-10);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin:0;padding:0}@media only screen and (min-width: 992px){.sc-fl-tab-header-h p.sc-fl-tab-header{font-size:var(--ptc-font-size-small);padding:4px 8px;border-radius:var(--ptc-border-radius-standard);display:inline-block}.sc-fl-tab-header-h p.sc-fl-tab-header:hover{background-color:var(--color-gray-02)}.sc-fl-tab-header-h p.selected-p.sc-fl-tab-header,.sc-fl-tab-header-h p.selected-p-init.sc-fl-tab-header{background-color:var(--color-gray-03)}}";
+const flTabHeaderCss = "h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.sc-fl-tab-header-h{display:block}.sc-fl-tab-header-h p.sc-fl-tab-header{color:var(--color-gray-10);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin:0;padding:0}@media only screen and (min-width: 992px){.sc-fl-tab-header-h p.sc-fl-tab-header{font-size:var(--ptc-font-size-small);padding:4px 8px;border-radius:var(--ptc-border-radius-standard);display:inline-block}.sc-fl-tab-header-h p.sc-fl-tab-header:hover{background-color:var(--color-gray-02)}.sc-fl-tab-header-h p.selected-p.sc-fl-tab-header,.sc-fl-tab-header-h p.selected-p-init.sc-fl-tab-header{background-color:var(--color-gray-03)}}.sc-fl-tab-header-h p.sc-fl-tab-header:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 
 const FlTabHeader$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.flTabClicked = createEvent(this, "flTabClicked", 7);
+    this.flHeaderArrowFocus = createEvent(this, "flHeaderArrowFocus", 7);
+    this.flHeaderTabFocus = createEvent(this, "flHeaderTabFocus", 7);
+    this.handleKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          this.flHeaderArrowFocus.emit({
+            'event': e,
+            'valueKey': this.valueKey,
+            'direction': 1
+          });
+          break;
+        }
+        case "ArrowUp": {
+          this.flHeaderArrowFocus.emit({
+            'event': e,
+            'valueKey': this.valueKey,
+            'direction': -1
+          });
+          break;
+        }
+        case "Enter": {
+          this.handleClick(e);
+          break;
+        }
+        case "Tab":
+          {
+            this.flHeaderTabFocus.emit({
+              'sender': this,
+              'event': e,
+              'valueKey': this.valueKey
+            });
+          }
+          break;
+      }
+    };
     this.tabTitle = undefined;
     this.nameKey = undefined;
+    this.valueKey = -1;
     this.selected = false;
+    this.trackerId = "";
     this.initialHeader = false;
   }
   handleClick(event) {
     this.flTabClicked.emit({
       'sender': this,
       'event': event,
-      'name': this.nameKey
+      'name': this.nameKey,
+      'valueKey': this.valueKey
     });
   }
   componentWillLoad() {
     this.initialHeader = this.el.classList.contains('init-active');
   }
   render() {
-    return (h$1(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this) }, h$1("slot", null), h$1("p", { class: `${this.selected ? 'selected-p' : ''}  ${this.initialHeader ? 'selected-p-init' : ''}` }, h$1("ptc-tooltip", { "text-display": "inline", "text-lines": "2", description: this.tabTitle, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "false" }))));
+    return (h$1(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h$1("slot", null), h$1("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''}  ${this.initialHeader ? 'selected-p-init' : ''} mf-listen`, tabindex: (this.selected || window.innerWidth < 992) ? 0 : -1 }, h$1("ptc-tooltip", { "text-display": "inline", "text-lines": "2", description: this.tabTitle, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "false" }))));
   }
   get el() { return this; }
   static get style() { return flTabHeaderCss; }
@@ -8373,8 +8411,10 @@ const PtcBackgroundVideo$1 = class extends HTMLElement$1 {
   }
   render() {
     const videoContent = this.isIframe ? (h$1("div", { class: "iframe-wrapper" }, h$1("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h$1("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (h$1(Host, { class: this.type }, this.loadedTrue &&
-      videoContent, !!this.videoSrc && this.playButtonTitle && (h$1("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h$1("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h$1("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h$1("button", { class: 'bg-svg-play', type: "button", tabindex: this.buttonTabIndex, onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Play button" })))), !this.paused && !!this.pauseButtonTitle && (h$1("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h$1("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h$1("button", { class: "bg-svg-pause", tabindex: this.buttonTabIndex, type: "button", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" })))))), this.overlay ? h$1("div", { class: `video-overlay ${this.overlayType}`, style: this.posterSrc ? { backgroundImage: 'url(\'' + this.posterSrc + '\')' } : { backgroundImage: 'linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)' } }) : '', this.type == 'default' ? h$1("slot", null) : ''));
+    const placeholderContent = h$1("video", { poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true });
+    return (h$1(Host, { class: this.type }, this.loadedTrue
+      ? videoContent
+      : placeholderContent, !!this.videoSrc && this.playButtonTitle && (h$1("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h$1("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h$1("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h$1("button", { class: 'bg-svg-play', type: "button", tabindex: this.buttonTabIndex, onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Play button" })))), !this.paused && !!this.pauseButtonTitle && (h$1("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h$1("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h$1("button", { class: "bg-svg-pause", tabindex: this.buttonTabIndex, type: "button", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" })))))), this.overlay ? h$1("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h$1("slot", null) : ''));
   }
   toggleVideoPlay(e) {
     e.preventDefault();
@@ -17434,6 +17474,25 @@ const PtcFeaturedList$1 = class extends HTMLElement$1 {
     this.selectedTabGloble = event.detail.name;
     this.selectTab(this.selectedTabGloble);
   }
+  handleFlHeaderArrowFocus(event) {
+    var _a, _b;
+    const tabHeaders = (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('fl-tab-header');
+    const currentValueKey = event.detail.valueKey;
+    const tabDirection = event.detail.direction;
+    const ind = currentValueKey - 1 + tabDirection;
+    if (ind > -1 && ind < tabHeaders.length) {
+      let nextToFocus = tabHeaders[ind].querySelector('p.sc-fl-tab-header');
+      nextToFocus.focus();
+    }
+  }
+  handleFlHeaderTabFocus(event) {
+    var _a, _b;
+    event.preventDefault();
+    const tabContent = (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`fl-tab-content[value-key="${event.detail.valueKey}"]`);
+    let focusable = tabContent.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    let firstFocusable = focusable[0];
+    firstFocusable.focus();
+  }
   holdTabOnResize(name) {
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
     const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
@@ -17504,11 +17563,11 @@ const PtcFeaturedList$1 = class extends HTMLElement$1 {
   render() {
     return (h$1(Host, null, h$1("div", { class: "featured-image-wrap" }, h$1("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, h$1("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h$1("fl-tab-image", { "name-key": "tab-02" }, h$1("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h$1("fl-tab-image", { "name-key": "tab-03" }, h$1("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h$1("fl-tab-image", { "name-key": "tab-04" }, h$1("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
     // Code for mobile only
-    h$1("div", { class: "mobile-wrapper" }, h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h$1("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: '#' }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h$1("fl-tab-content", { "name-key": "tab-02" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: '#' }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h$1("fl-tab-content", { "name-key": "tab-03" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: '#' }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h$1("fl-tab-content", { "name-key": "tab-04" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: '#' }, "See More about Aerospace & Defense")))))
+    h$1("div", { class: "mobile-wrapper" }, h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h$1("fl-tab-content", { "value-key": 1, "name-key": "tab-01", class: "init-active" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive" }), h$1("fl-tab-content", { "value-key": 2, "name-key": "tab-02" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h$1("fl-tab-content", { "value-key": 3, "name-key": "tab-03" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h$1("div", { class: 'acc-item' }, h$1("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h$1("fl-tab-content", { "value-key": 4, "name-key": "tab-04" }, h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))
       :
         (
         // Code for Desktop only
-        h$1("div", { class: "non-mobile-wrapper" }, h$1("div", { class: "header-list-wrap" }, h$1("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h$1("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h$1("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h$1("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h$1("div", { class: "content-wrap" }, h$1("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: '#' }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "name-key": "tab-02" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: '#' }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "name-key": "tab-03" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h$1("a", { href: '#' }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "name-key": "tab-04" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: '#' }, "See More about Aerospace & Defense")))))));
+        h$1("div", { class: "non-mobile-wrapper" }, h$1("div", { class: "header-list-wrap" }, h$1("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h$1("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive" }), h$1("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h$1("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h$1("div", { class: "content-wrap" }, h$1("fl-tab-content", { "value-key": 1, "name-key": "tab-01", class: "init-active" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "value-key": 2, "name-key": "tab-02" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "value-key": 3, "name-key": "tab-03" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h$1("fl-tab-content", { "value-key": 4, "name-key": "tab-04" }, h$1("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h$1("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h$1("ptc-readmore", { "visible-lines-custom": "7", "more-text": "Read More", "less-text": "Read Less", "read-more-position": "left", class: "inline" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization. Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization.")), h$1("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))));
   }
   get hostElement() { return this; }
   static get style() { return ptcFeaturedListCss; }
@@ -19028,7 +19087,7 @@ const PtcHomepageVideoBackground$1 = class extends HTMLElement$1 {
     });
   }
   render() {
-    return (h$1(Host, null, h$1("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark', "tracker-id": this.playButtonTrackerId, defer: this.defer }), h$1("div", { class: "ptc-container" }, h$1("div", { class: "primary-content-wrapper" }, h$1("slot", { name: "primary-content" })), h$1("div", { class: "card-links" }, h$1("div", { class: "secondary-content-wrapper" }, h$1("slot", { name: "secondary-content" })), h$1("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
+    return (h$1(Host, null, h$1("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark', "tracker-id": this.playButtonTrackerId, defer: this.defer, "poster-src": this.posterSrc }), h$1("div", { class: "ptc-container" }, h$1("div", { class: "primary-content-wrapper" }, h$1("slot", { name: "primary-content" })), h$1("div", { class: "card-links" }, h$1("div", { class: "secondary-content-wrapper" }, h$1("slot", { name: "secondary-content" })), h$1("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
       const trackerId = link.getAttribute('data-tracker-id');
       const icon = link.getAttribute('data-icon');
       const target = link.getAttribute('target');
@@ -19639,6 +19698,7 @@ const PtcJumbotron$1 = class extends HTMLElement$1 {
     this.pngImgStyles = "";
     this.gifSrc = undefined;
     this.bgVideoSrc = undefined;
+    this.bgVideoPosterSrc = undefined;
     this.bgSrc = undefined;
     this.isIframe = false;
     this.isHomepage = false;
@@ -19657,6 +19717,7 @@ const PtcJumbotron$1 = class extends HTMLElement$1 {
     this.blogAuthorQueryHref = "";
     this.blogAuthorQueryTarget = "";
     this.styles = undefined;
+    this.defer = undefined;
     this.hasCtaSlot = undefined;
   }
   componentWillLoad() {
@@ -19687,7 +19748,7 @@ const PtcJumbotron$1 = class extends HTMLElement$1 {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = (h$1("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex }, ' ', this.hasPopupVideo && this.isMobile ? (h$1("div", { class: "mobile-modal-play-btn" }, ' ', h$1("slot", { name: "video" }))) : null));
+        mediaElement = (h$1("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, ' ', this.hasPopupVideo && this.isMobile ? (h$1("div", { class: "mobile-modal-play-btn" }, ' ', h$1("slot", { name: "video" }))) : null));
         break;
       case 'dark':
       case 'light':
@@ -31319,7 +31380,7 @@ const DynamicBoxBundle = /*@__PURE__*/proxyCustomElement(DynamicBoxBundle$1, [1,
 const EmbeddedForm = /*@__PURE__*/proxyCustomElement(EmbeddedForm$1, [0,"embedded-form",{"formData":[32],"isSubmitted":[32]}]);
 const FeaturedList = /*@__PURE__*/proxyCustomElement(FeaturedList$1, [1,"featured-list",{"isMobile":[32],"selectedTabGloble":[32]},[[9,"resize","handleResize"],[4,"flTabClicked","handleflTabClicked"]]]);
 const FlTabContent = /*@__PURE__*/proxyCustomElement(FlTabContent$1, [1,"fl-tab-content",{"nameKey":[1,"name-key"],"selected":[4]}]);
-const FlTabHeader = /*@__PURE__*/proxyCustomElement(FlTabHeader$1, [6,"fl-tab-header",{"tabTitle":[1,"tab-title"],"nameKey":[1,"name-key"],"selected":[4],"initialHeader":[32]}]);
+const FlTabHeader = /*@__PURE__*/proxyCustomElement(FlTabHeader$1, [6,"fl-tab-header",{"tabTitle":[1,"tab-title"],"nameKey":[1,"name-key"],"valueKey":[2,"value-key"],"selected":[4],"trackerId":[1,"tracker-id"],"initialHeader":[32]}]);
 const FlTabImage = /*@__PURE__*/proxyCustomElement(FlTabImage$1, [1,"fl-tab-image",{"nameKey":[1,"name-key"],"selected":[4]}]);
 const FooterForm = /*@__PURE__*/proxyCustomElement(FooterForm$1, [1,"footer-form",{"formData":[32]}]);
 const HomepageClickableTab = /*@__PURE__*/proxyCustomElement(HomepageClickableTab$1, [1,"homepage-clickable-tab",{"active":[4],"label":[1],"activeColor":[1,"active-color"],"styles":[1],"trackerId":[1,"tracker-id"],"isHovered":[32]}]);
@@ -31360,7 +31421,7 @@ const PtcDropdown = /*@__PURE__*/proxyCustomElement(PtcDropdown$1, [1,"ptc-dropd
 const PtcDynamicCard = /*@__PURE__*/proxyCustomElement(PtcDynamicCard$1, [1,"ptc-dynamic-card",{"cardType":[1,"card-type"],"cardTitle":[1,"card-title"],"cardImgSrc":[1,"card-img-src"],"cardImgAlt":[1,"card-img-alt"],"cardScreen":[1,"card-screen"],"isExpanded":[1028,"is-expanded"],"styles":[1],"trackerId":[1,"tracker-id"],"overlayExists":[32]},[[4,"cardOpened","handleCardOpened"]]]);
 const PtcEllipsisDropdown = /*@__PURE__*/proxyCustomElement(PtcEllipsisDropdown$1, [1,"ptc-ellipsis-dropdown",{"dataItems":[16],"selectedTab":[1,"selected-tab"],"dropdownType":[1,"dropdown-type"],"isDropdownOpen":[32],"isMobile":[32],"isIPad":[32]},[[4,"click","offClick"],[9,"resize","handleResize"],[8,"escClicked","onEscClicked"]]]);
 const PtcEmbeddedQuiz = /*@__PURE__*/proxyCustomElement(PtcEmbeddedQuiz$1, [1,"ptc-embedded-quiz",{"getQuizEndpoint":[1,"get-quiz-endpoint"],"restartQuizText":[1,"restart-quiz-text"],"previousButtonText":[1,"previous-button-text"],"startButtonText":[1,"start-button-text"],"quiz":[32],"slide":[32],"traversal":[32]}]);
-const PtcFeaturedList = /*@__PURE__*/proxyCustomElement(PtcFeaturedList$1, [1,"ptc-featured-list",{"isMobile":[32],"selectedTabGloble":[32]},[[9,"resize","handleResize"],[4,"flTabClicked","handleflTabClicked"]]]);
+const PtcFeaturedList = /*@__PURE__*/proxyCustomElement(PtcFeaturedList$1, [1,"ptc-featured-list",{"isMobile":[32],"selectedTabGloble":[32]},[[9,"resize","handleResize"],[4,"flTabClicked","handleflTabClicked"],[4,"flHeaderArrowFocus","handleFlHeaderArrowFocus"],[4,"flHeaderTabFocus","handleFlHeaderTabFocus"]]]);
 const PtcFilterDropdown = /*@__PURE__*/proxyCustomElement(PtcFilterDropdown$1, [1,"ptc-filter-dropdown",{"placeholder":[1],"selectedTag":[1,"selected-tag"],"styles":[1],"internalOptions":[32],"selectedOptions":[32],"isOpen":[32]}]);
 const PtcFilterLevelTheater = /*@__PURE__*/proxyCustomElement(PtcFilterLevelTheater$1, [2,"ptc-filter-level-theater",{"enableFilters":[4,"enable-filters"],"backButtonText":[1,"back-button-text"],"selectedTab":[32],"lastSelectedTab":[32],"lastSelectedTabGroup":[32],"selectedTabGroup":[32]}]);
 const PtcFilterTag = /*@__PURE__*/proxyCustomElement(PtcFilterTag$1, [1,"ptc-filter-tag",{"theme":[1],"styles":[1],"iconColorMap":[32]}]);
@@ -31381,7 +31442,7 @@ const PtcImageDownloadStrip = /*@__PURE__*/proxyCustomElement(PtcImageDownloadSt
 const PtcImg = /*@__PURE__*/proxyCustomElement(PtcImg$1, [4,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"],"styles":[1]},[[9,"resize","WindowResize"]]]);
 const PtcInfoTile = /*@__PURE__*/proxyCustomElement(PtcInfoTile$1, [1,"ptc-info-tile",{"link":[1],"variant":[1],"styles":[1],"trackerId":[1,"tracker-id"],"accessibilityIndex":[2,"accessibility-index"]}]);
 const PtcInlineCta = /*@__PURE__*/proxyCustomElement(PtcInlineCta$1, [1,"ptc-inline-cta",{"type":[1],"containerSelector":[1,"container-selector"],"containerIsShadow":[4,"container-is-shadow"],"trackerId":[1,"tracker-id"],"rte":[1],"image":[32],"heading":[32],"description":[32],"cta":[32]}]);
-const PtcJumbotron = /*@__PURE__*/proxyCustomElement(PtcJumbotron$1, [1,"ptc-jumbotron",{"jumbotronType":[1,"jumbotron-type"],"hasPopupVideo":[4,"has-popup-video"],"mainTitle":[1,"main-title"],"subTitle":[1,"sub-title"],"pngSrc":[1,"png-src"],"pngImgStyles":[1,"png-img-styles"],"gifSrc":[1,"gif-src"],"bgVideoSrc":[1,"bg-video-src"],"bgSrc":[1,"bg-src"],"isIframe":[4,"is-iframe"],"isHomepage":[4,"is-homepage"],"playButtonTitle":[1,"play-button-title"],"pauseButtonTitle":[1,"pause-button-title"],"buttonLocation":[1,"button-location"],"buttonTabIndex":[2,"button-tab-index"],"isTransitioning":[4,"is-transitioning"],"blogAuthorImage":[1,"blog-author-image"],"blogAuthorImageAlt":[1,"blog-author-image-alt"],"blogAuthorName":[1,"blog-author-name"],"blogAuthorQueryHref":[1,"blog-author-query-href"],"blogAuthorQueryTarget":[1,"blog-author-query-target"],"styles":[1],"hasCtaSlot":[1028,"has-cta-slot"],"contentBackground":[32],"contentColor":[32],"textAlign":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
+const PtcJumbotron = /*@__PURE__*/proxyCustomElement(PtcJumbotron$1, [1,"ptc-jumbotron",{"jumbotronType":[1,"jumbotron-type"],"hasPopupVideo":[4,"has-popup-video"],"mainTitle":[1,"main-title"],"subTitle":[1,"sub-title"],"pngSrc":[1,"png-src"],"pngImgStyles":[1,"png-img-styles"],"gifSrc":[1,"gif-src"],"bgVideoSrc":[1,"bg-video-src"],"bgVideoPosterSrc":[1,"bg-video-poster-src"],"bgSrc":[1,"bg-src"],"isIframe":[4,"is-iframe"],"isHomepage":[4,"is-homepage"],"playButtonTitle":[1,"play-button-title"],"pauseButtonTitle":[1,"pause-button-title"],"buttonLocation":[1,"button-location"],"buttonTabIndex":[2,"button-tab-index"],"isTransitioning":[4,"is-transitioning"],"blogAuthorImage":[1,"blog-author-image"],"blogAuthorImageAlt":[1,"blog-author-image-alt"],"blogAuthorName":[1,"blog-author-name"],"blogAuthorQueryHref":[1,"blog-author-query-href"],"blogAuthorQueryTarget":[1,"blog-author-query-target"],"styles":[1],"defer":[4],"hasCtaSlot":[1028,"has-cta-slot"],"contentBackground":[32],"contentColor":[32],"textAlign":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
 const PtcLink = /*@__PURE__*/proxyCustomElement(PtcLink$1, [1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"linkArea":[1,"link-area"],"seoCompatibilityMode":[4,"seo-compatibility-mode"],"styles":[1],"trackerId":[1,"tracker-id"],"tabNav":[2,"tab-nav"],"darkFocusState":[4,"dark-focus-state"]}]);
 const PtcList = /*@__PURE__*/proxyCustomElement(PtcList$1, [1,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]);
 const PtcMediaCard = /*@__PURE__*/proxyCustomElement(PtcMediaCard$1, [1,"ptc-media-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"activeBackgroundImage":[1025,"active-background-image"],"activeBackgroundImageAlt":[1025,"active-background-image-alt"],"hoverBackgroundImage":[1025,"hover-background-image"],"heading":[1025],"headingTransform":[1025,"heading-transform"],"category":[1025],"ariaLabel":[1,"aria-label"],"iconImage":[1025,"icon-image"],"iconImageAlt":[1025,"icon-image-alt"],"trackerId":[1,"tracker-id"],"isHovered":[32],"isTabNavigated":[32]}]);

package/dist/esm/fl-tab-content_3.entry.js

@@ -14,29 +14,67 @@ const FlTabContent = class {
 };
 FlTabContent.style = flTabContentCss;
 
-const flTabHeaderCss = "h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.sc-fl-tab-header-h{display:block}.sc-fl-tab-header-h p.sc-fl-tab-header{color:var(--color-gray-10);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin:0;padding:0}@media only screen and (min-width: 992px){.sc-fl-tab-header-h p.sc-fl-tab-header{font-size:var(--ptc-font-size-small);padding:4px 8px;border-radius:var(--ptc-border-radius-standard);display:inline-block}.sc-fl-tab-header-h p.sc-fl-tab-header:hover{background-color:var(--color-gray-02)}.sc-fl-tab-header-h p.selected-p.sc-fl-tab-header,.sc-fl-tab-header-h p.selected-p-init.sc-fl-tab-header{background-color:var(--color-gray-03)}}";
+const flTabHeaderCss = "h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-fl-tab-header,h2.sc-fl-tab-header,h3.sc-fl-tab-header,h4.sc-fl-tab-header,h5.sc-fl-tab-header,h6.sc-fl-tab-header,p.sc-fl-tab-header,ul.sc-fl-tab-header,li.sc-fl-tab-header,ptc-subnav.sc-fl-tab-header,ptc-tab-list.sc-fl-tab-header,ptc-link.sc-fl-tab-header,ptc-square-card.sc-fl-tab-header,.hyphenate-text.sc-fl-tab-header,ptc-footer.sc-fl-tab-header{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.sc-fl-tab-header-h{display:block}.sc-fl-tab-header-h p.sc-fl-tab-header{color:var(--color-gray-10);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin:0;padding:0}@media only screen and (min-width: 992px){.sc-fl-tab-header-h p.sc-fl-tab-header{font-size:var(--ptc-font-size-small);padding:4px 8px;border-radius:var(--ptc-border-radius-standard);display:inline-block}.sc-fl-tab-header-h p.sc-fl-tab-header:hover{background-color:var(--color-gray-02)}.sc-fl-tab-header-h p.selected-p.sc-fl-tab-header,.sc-fl-tab-header-h p.selected-p-init.sc-fl-tab-header{background-color:var(--color-gray-03)}}.sc-fl-tab-header-h p.sc-fl-tab-header:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 
 const FlTabHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.flTabClicked = createEvent(this, "flTabClicked", 7);
+    this.flHeaderArrowFocus = createEvent(this, "flHeaderArrowFocus", 7);
+    this.flHeaderTabFocus = createEvent(this, "flHeaderTabFocus", 7);
+    this.handleKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          this.flHeaderArrowFocus.emit({
+            'event': e,
+            'valueKey': this.valueKey,
+            'direction': 1
+          });
+          break;
+        }
+        case "ArrowUp": {
+          this.flHeaderArrowFocus.emit({
+            'event': e,
+            'valueKey': this.valueKey,
+            'direction': -1
+          });
+          break;
+        }
+        case "Enter": {
+          this.handleClick(e);
+          break;
+        }
+        case "Tab":
+          {
+            this.flHeaderTabFocus.emit({
+              'sender': this,
+              'event': e,
+              'valueKey': this.valueKey
+            });
+          }
+          break;
+      }
+    };
     this.tabTitle = undefined;
     this.nameKey = undefined;
+    this.valueKey = -1;
     this.selected = false;
+    this.trackerId = "";
     this.initialHeader = false;
   }
   handleClick(event) {
     this.flTabClicked.emit({
       'sender': this,
       'event': event,
-      'name': this.nameKey
+      'name': this.nameKey,
+      'valueKey': this.valueKey
     });
   }
   componentWillLoad() {
     this.initialHeader = this.el.classList.contains('init-active');
   }
   render() {
-    return (h(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this) }, h("slot", null), h("p", { class: `${this.selected ? 'selected-p' : ''}  ${this.initialHeader ? 'selected-p-init' : ''}` }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", description: this.tabTitle, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "false" }))));
+    return (h(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''}  ${this.initialHeader ? 'selected-p-init' : ''} mf-listen`, tabindex: (this.selected || window.innerWidth < 992) ? 0 : -1 }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", description: this.tabTitle, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "false" }))));
   }
   get el() { return getElement(this); }
 };