@ptcwebops/ptcw-design 6.1.20 → 6.1.22

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

@@ -73,12 +73,6 @@ ptc-link, ptc-square-card,
   background-color: var(--color-gray-12);
   overflow: hidden;
 }
-:host(.sequential) .card.hide {
-  display: none;
-}
-:host(.sequential) .card.show {
-  display: block;
-}
 :host(.sequential) .card-mobile, :host(.sequential) .card-dt-open {
   display: block;
 }
@@ -176,6 +170,7 @@ ptc-link, ptc-square-card,
   border-top: 5px solid var(--color-green-05);
   display: flex;
   max-width: 790px;
+  height: 480px;
   transition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);
 }
 @media only screen and (min-width: 1440px) {
@@ -183,9 +178,6 @@ ptc-link, ptc-square-card,
     max-width: 825px;
   }
 }
-:host(.sequential) .card-dt-open:not([hidden]) {
-  height: 480px;
-}
 :host(.sequential):host(.active) .card-mobile::before {
   background-color: var(--color-green-05);
 }

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

@@ -70,57 +70,24 @@ export class PtcDynamicCard {
   /**
    * Get desktop card based on expansion state
    */
-  // getDesktopCard() {
-  //   if (this.cardScreen === 'desktop' && this.isExpanded) {
-  //     return [
-  //       <div class="card card-dt-open mf-listen" id={this.trackerId}>
-  //         <ptc-card-content card-type="card-dynamic">
-  //           <div class="card-title">
-  //             <h3>{this.cardTitle}</h3>
-  //           </div>
-  //           <div class="card-content">
-  //             <slot></slot>
-  //           </div>
-  //         </ptc-card-content>
-  //         <ptc-picture
-  //           alt={this.cardImgAlt}
-  //           src={this.cardImgSrc}
-  //           is-full-width="true"
-  //           is-full-height="true"
-  //           image-alignment="center"
-  //         ></ptc-picture>
-  //       </div>,
-  //     ];
-  //   } else if (this.cardScreen === 'desktop' && !this.isExpanded) {
-  //     return [
-  //       <div class="card card-dt-closed mf-listen" id={this.trackerId}>
-  //         <ptc-picture
-  //           alt={this.cardImgAlt}
-  //           src={this.cardImgSrc}
-  //           image-position="relative"
-  //           is-full-width
-  //           height="424"
-  //         >
-  //           {this.overlayExists ? (
-  //             <ptc-overlay filter-color="solid-black-1"></ptc-overlay>
-  //           ) : (
-  //             <ptc-overlay filter-color="solid-black-2"></ptc-overlay>
-  //           )}
-  //         </ptc-picture>
-  //         <div class="closed-content" card-type="card-dynamic">
-  //           <div class="card-title">
-  //             <h2>{this.cardTitle}</h2>
-  //           </div>
-  //         </div>
-  //       </div>,
-  //     ];
-  //   } else {
-  //     return null;
-  //   }
-  // }
+  getDesktopCard() {
+    if (this.cardScreen === 'desktop' && this.isExpanded) {
+      return [
+        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
+      ];
+    }
+    else if (this.cardScreen === 'desktop' && !this.isExpanded) {
+      return [
+        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
+      ];
+    }
+    else {
+      return null;
+    }
+  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (h("div", null, h("div", Object.assign({}, !this.isExpanded && { hidden: 'until-found' }, { onBeforeMatch: this.openCard.bind(this), class: `card card-dt-open mf-listen`, id: this.trackerId }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? 'hide' : 'show'}`, id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle))))))), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get is() { return "ptc-dynamic-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-featured-list/fl-tab-content/fl-tab-content.css

@@ -52,4 +52,16 @@ ptc-link, ptc-square-card,
     -ms-hyphenate-limit-chars: 12 3 3;
     -ms-hyphenate-limit-lines: 2;
   }
+}
+
+:host {
+  display: none;
+}
+
+:host(.init-active) {
+  display: block;
+}
+
+:host(.selected) {
+  display: block;
 }

package/dist/collection/components/ptc-featured-list/fl-tab-content/fl-tab-content.js

@@ -3,10 +3,9 @@ export class FlTabContent {
   constructor() {
     this.nameKey = undefined;
     this.selected = false;
-    this.onbeforematch = undefined;
   }
   render() {
-    return (h(Host, { class: `featured-content ${this.selected ? 'selected' : ''}` }, h("div", Object.assign({ class: "fl-content-wrap" }, !this.selected && { hidden: 'until-found' }, { onBeforeMatch: this.onbeforematch }), h("slot", null))));
+    return (h(Host, { class: `featured-content ${this.selected ? 'selected' : ''}` }, h("div", { class: "fl-content-wrap" }, h("slot", null))));
   }
   static get is() { return "fl-tab-content"; }
   static get encapsulation() { return "shadow"; }
@@ -56,21 +55,6 @@ export class FlTabContent {
         "attribute": "selected",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "onbeforematch": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "() => void",
-          "resolved": "() => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
       }
     };
   }

package/dist/collection/components/ptc-featured-list/fl-tab-header/fl-tab-header.css

@@ -75,7 +75,7 @@ ptc-link, ptc-square-card,
   :host p:hover {
     background-color: var(--color-gray-02);
   }
-  :host p.selected-p {
+  :host p.selected-p, :host p.selected-p-init {
     background-color: var(--color-gray-03);
   }
 }

package/dist/collection/components/ptc-featured-list/fl-tab-header/fl-tab-header.js

@@ -49,8 +49,11 @@ export class FlTabHeader {
       '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), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''} 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" }))));
+    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" }))));
   }
   static get is() { return "fl-tab-header"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ptc-featured-list/fl-tab-image/fl-tab-image.css

@@ -74,6 +74,10 @@ ptc-link, ptc-square-card,
   }
 }
 
+:host(.init-active) {
+  display: block;
+}
+
 :host(.selected) {
   display: block;
 }

package/dist/collection/components/ptc-featured-list/ptc-featured-list.js

@@ -2,38 +2,124 @@ import { Host, h } from '@stencil/core';
 export class PtcFeaturedList {
   constructor() {
     this.isMobile = undefined;
-    this.selectedTab = 'tab-01';
+    this.selectedTabGloble = 'tab-01';
   }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
+    this.holdTabOnResize(this.selectedTabGloble);
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 992;
   }
   handleflTabClicked(event) {
-    this.selectedTab = event.detail.name;
-    this.updateReadMoreInTabContents();
+    this.selectedTabGloble = event.detail.name;
+    this.selectTab(this.selectedTabGloble);
   }
-  updateReadMoreInTabContents() {
+  handleflTabFocusHeader(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();
+    }
+  }
+  handleflTabFocusContent(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"])');
+    // console.log(tabContent, focusable);
+    let firstFocusable = focusable[0];
+    console.log(firstFocusable);
+    // let lastFocusable = focusable[focusable.length - 1];
+    firstFocusable.focus();
+  }
+  // @Listen('flTabFocusOut', { target: 'document' })
+  // handleflTabFocusOut(event: CustomEvent) {
+  //   // console.log(event);
+  //   event.preventDefault();
+  //   const link = this.hostElement?.shadowRoot?.querySelector<HTMLAnchorElement>('.content-wrap fl-tab-content a');
+  //   console.log(link)
+  //   // link.focus();
+  // }
+  holdTabOnResize(name) {
+    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    contentBlocks.forEach(content => {
+      if (content.classList.contains("init-active")) {
+        content.classList.remove("init-active");
+      }
+      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
+    });
+    headerBlocks.forEach(header => {
+      if (header.classList.contains("init-active")) {
+        header.classList.remove("init-active");
+        if (header.querySelector('p')) {
+          header.querySelector('p').classList.remove('selected-p-init');
+        }
+      }
+      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
+    });
+  }
+  selectTab(name) {
+    const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    featuredImages.forEach(image => {
+      if (image.classList.contains("init-active")) {
+        image.classList.remove("init-active");
+      }
+      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
+    });
     contentBlocks.forEach(content => {
+      this.updateActiveTab(name, content);
       //  Added code to recall readmore for hidden tabs
-      if (content.getAttribute('name-key') === this.selectedTab) {
+      if (content.getAttribute('name-key') === name) {
         const readMoreComp = content.querySelector('ptc-readmore');
         if (readMoreComp) {
           readMoreComp.updateReadmoreStatus();
         }
       }
     });
+    headerBlocks.forEach(header => {
+      this.updateActiveTab(name, header);
+    });
+  }
+  updateActiveTab(name, tabName) {
+    if (this.isMobile) {
+      if (tabName.getAttribute('name-key') === name) {
+        if (tabName.classList.contains("init-active")) {
+          tabName.removeAttribute('selected');
+        }
+        else {
+          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
+        }
+      }
+      else {
+        tabName.removeAttribute('selected');
+      }
+    }
+    else {
+      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
+    }
+    if (tabName.classList.contains("init-active")) {
+      tabName.classList.remove("init-active");
+      if (tabName.querySelector('p')) {
+        tabName.querySelector('p').classList.remove('selected-p-init');
+      }
+    }
   }
   render() {
-    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", selected: this.selectedTab === 'tab-01' }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02", selected: this.selectedTab === 'tab-02' }, h("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("fl-tab-image", { "name-key": "tab-03", selected: this.selectedTab === 'tab-03' }, h("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("fl-tab-image", { "name-key": "tab-04", selected: this.selectedTab === 'tab-04' }, h("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 ? (
+    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02" }, h("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("fl-tab-image", { "name-key": "tab-03" }, h("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("fl-tab-image", { "name-key": "tab-04" }, h("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("div", { class: "mobile-wrapper" }, h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "value-key": 1, "name-key": "tab-01", class: "init-active" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "value-key": 2, "name-key": "tab-02" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "value-key": 3, "name-key": "tab-03" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "value-key": 4, "name-key": "tab-04" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))
       :
         (
         // Code for Desktop only
-        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", selected: this.selectedTab === 'tab-01' }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive", selected: this.selectedTab === 'tab-02' }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech", selected: this.selectedTab === 'tab-03' }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products", selected: this.selectedTab === 'tab-04' })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", selected: this.selectedTab === 'tab-01', onbeforematch: () => this.selectedTab = 'tab-01' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02", selected: this.selectedTab === 'tab-02', onbeforematch: () => this.selectedTab = 'tab-02' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03", selected: this.selectedTab === 'tab-03', onbeforematch: () => this.selectedTab = 'tab-03' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04", selected: this.selectedTab === 'tab-04', onbeforematch: () => this.selectedTab = 'tab-04' }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))));
+        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "value-key": 1, "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-header", { "value-key": 2, "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "value-key": 3, "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "value-key": 4, "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "value-key": 1, "name-key": "tab-01", class: "init-active" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "value-key": 2, "name-key": "tab-02" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "value-key": 3, "name-key": "tab-03" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")), h("fl-tab-content", { "value-key": 4, "name-key": "tab-04" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, h("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("a", { href: 'https://www.google.com', tabIndex: 0 }, "See More about Aerospace & Defense")))))));
   }
   static get is() { return "ptc-featured-list"; }
   static get encapsulation() { return "shadow"; }
@@ -50,7 +136,7 @@ export class PtcFeaturedList {
   static get states() {
     return {
       "isMobile": {},
-      "selectedTab": {}
+      "selectedTabGloble": {}
     };
   }
   static get elementRef() { return "hostElement"; }
@@ -67,6 +153,18 @@ export class PtcFeaturedList {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "flTabFocusHeader",
+        "method": "handleflTabFocusHeader",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "flTabFocusContent",
+        "method": "handleflTabFocusContent",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -1,7 +1,6 @@
 import { Host, h } from '@stencil/core';
 export class PtcProductCard {
   constructor() {
-    this.cardTitle = undefined;
     this.cardImage = undefined;
     this.cardImageAltText = undefined;
     this.cardDescription = undefined;
@@ -15,7 +14,7 @@ export class PtcProductCard {
   }
   render() {
     return (h(Host, null, h("div", { class: "card-wrap" }, this.cardImage &&
-      h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h("div", { class: "content" }, h("div", null, h("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block", "title-height": "densest" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h("div", null, h("slot", { name: "content" }))), h("div", { class: 'cta-wrap' }, h("slot", { name: "cta" })))), this.toggleCtaTitle &&
+      h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h("div", { class: "content" }, h("div", null, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h("div", null, h("slot", { name: "content" }))), h("div", { class: 'cta-wrap' }, h("slot", { name: "cta" })))), this.toggleCtaTitle &&
       h("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h("span", { class: 'toggleText' }, this.toggleCtaTitle)), h("div", { class: 'product-highlights-container' }, h("slot", null))));
   }
   static get is() { return "ptc-product-card"; }
@@ -32,23 +31,6 @@ export class PtcProductCard {
   }
   static get properties() {
     return {
-      "cardTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "\r\ncardTitle"
-        },
-        "attribute": "card-title",
-        "reflect": false
-      },
       "cardImage": {
         "type": "string",
         "mutable": false,

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

@@ -1,11 +1,10 @@
 import { Host, h } from '@stencil/core';
 export class PtcProductCategory {
   constructor() {
-    this.categoryTitle = undefined;
     this.categoryDescription = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "category-header" }, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large", "title-height": "densest" }, this.categoryTitle), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' }))), h("slot", null)));
+    return (h(Host, null, h("div", { class: "category-header" }, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' }))), h("slot", null)));
   }
   static get is() { return "ptc-product-category"; }
   static get encapsulation() { return "shadow"; }
@@ -21,23 +20,6 @@ export class PtcProductCategory {
   }
   static get properties() {
     return {
-      "categoryTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "category-title",
-        "reflect": false
-      },
       "categoryDescription": {
         "type": "string",
         "mutable": false,

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

@@ -112,6 +112,13 @@ ptc-link, ptc-square-card,
   text-align: center;
   margin-right: 0;
 }
+.box label:focus-visible {
+  outline: none;
+}
+.box label:focus-visible span {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .box .z-auto {
   z-index: auto;
 }

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

@@ -180,7 +180,7 @@ export class PtcRelatedCardRail {
   }
   render() {
     return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => { this.closed = true; }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => { event.key === 'Enter' && window.open(item.href); }, onClick: () => { window.open(item.href); }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+      h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => { this.closed = true; }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => { event.key === 'Enter' && window.open(item.href); }, onClick: () => { window.open(item.href); }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }