@ptcwebops/ptcw-design 6.0.12 → 6.1.1

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

@@ -16,6 +16,7 @@ export class PtcDropdown {
     this.listItems = undefined;
     this.toggle = false;
     this.selectedItem = undefined;
+    this.trackerId = undefined;
   }
   offClick(e) {
     if (e && !this.host.contains(e.target) && this.toggle) {
@@ -44,13 +45,13 @@ export class PtcDropdown {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("div", { class: classMap }, h("header", { class: "dropdown__header", onClick: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
-      h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
-        let cssClass = "dropdown__item";
+    return (h("div", { class: classMap }, h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
+      h("ul", { id: this.trackerId + `ul`, tabIndex: -1, class: "dropdown__list mf-listen", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
+        let cssClass = "dropdown__item mf-listen";
         if (item.selected) {
           cssClass += " selected";
         }
-        return (h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
+        return (h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
       }))));
   }
   getCssClassMap() {
@@ -122,6 +123,23 @@ export class PtcDropdown {
           "tags": [],
           "text": ""
         }
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.css

@@ -60,6 +60,10 @@ ptc-link, ptc-square-card,
   position: relative;
   margin: 0.25rem;
 }
+.ptc-filter-tag:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .ptc-filter-tag.bubble {
   margin: 0 0.25rem;
   display: inline-block;

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js

@@ -4,6 +4,17 @@ export class PtcFilterTag {
     this.handleClick = () => {
       this.clicked.emit(this);
     };
+    this.handleKeyDown = (e) => {
+      switch (e.key) {
+        case "Enter": {
+          this.clicked.emit(this);
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    };
     this.theme = 'bubble';
     this.iconColorMap = undefined;
     this.styles = undefined;

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: calc((34px - 18px) / 2);
+  padding: 8px;
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: calc((34px - 34px) / 2);
+  margin: 0px;
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: calc((34px - 18px) / 2);
+  top: 8px;
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: calc((34px - 18px) / 2);
+  left: 8px;
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: calc((34px - 34px) / 2);
+  top: 0px;
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: calc((34px - 34px) / 2);
+  right: 0px;
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: calc((34px - 34px) / 2);
+  left: 0px;
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

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

@@ -104,4 +104,8 @@ ptc-link, ptc-square-card,
 .ptc-icon-minimize .header .icon icon-asset svg.xxx-small.sc-icon-asset {
   width: 0.5rem;
   height: 0.5rem;
+}
+.ptc-icon-minimize .header .icon:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }

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

@@ -1,11 +1,17 @@
 import { h } from '@stencil/core';
 export class PtcIconMinimize {
   constructor() {
+    this.handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        this.dropdownToggle();
+      }
+    };
     this.heading = undefined;
     this.opened = true;
     this.timeStamp = undefined;
     this.listType = "default";
     this.dataRefineValue = undefined;
+    this.trackerId = undefined;
   }
   componentWillLoad() {
     this.timeStamp = Date.now().toString();
@@ -18,6 +24,17 @@ export class PtcIconMinimize {
   }
   dropdownToggle() {
     this.opened = !this.opened;
+    var checkList = this.host.querySelector(".fitler-check-list");
+    if (checkList) {
+      var checkBoxesList = checkList.querySelectorAll("ptc-checkbox");
+      if (checkBoxesList) {
+        checkBoxesList.forEach(item => {
+          if (item.shadowRoot.querySelector("label")) {
+            item.shadowRoot.querySelector("label").tabIndex = this.opened ? 0 : -1;
+          }
+        });
+      }
+    }
   }
   getScrollHeight() {
     let result = undefined;
@@ -63,9 +80,9 @@ export class PtcIconMinimize {
     let scrollHeight = this.getScrollHeight();
     let icon = this.opened ? 'minus' : 'plus';
     return (h("div", { class: 'ptc-icon-minimize' }, this.listType == "default" ?
-      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon", onClick: () => this.dropdownToggle() }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
       : this.listType == "checkbox" ?
-        h("div", { class: "header" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading }, this.heading)), h("div", { class: "icon", onClick: () => this.dropdownToggle() }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+        h("div", { class: "header" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
         : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
   }
   static get is() { return "ptc-icon-minimize"; }
@@ -151,6 +168,23 @@ export class PtcIconMinimize {
         },
         "attribute": "data-refine-value",
         "reflect": false
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

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

@@ -311,9 +311,7 @@ ptc-link, ptc-square-card,
   text-decoration: none;
 }
 :host .bottom-inline-cta-container .link-wrapper:focus-visible {
-  padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 768px) {

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

@@ -94,15 +94,15 @@ export class PtcInlineCta {
   render() {
     const Small = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
+      return h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
     };
     const Big = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t};\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 200))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'xx-large' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-large' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'x-small' }), h("ptc-spacer", { breakpoint: 'small', size: 'xx-small' }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
+      return h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t};\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 200))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'xx-large' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-large' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'x-small' }), h("ptc-spacer", { breakpoint: 'small', size: 'xx-small' }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
     };
     const Bottom = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" })), h("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h2", null, this.truncate(this.heading, 70))), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))));
+      return h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" })), h("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h2", null, this.truncate(this.heading, 70))), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))));
     };
     const InlineCta = () => {
       switch (this.type) {

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

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 
@@ -1261,8 +1261,7 @@ a:focus-visible {
   background-color: var(--color-black);
   height: auto;
   min-height: 640px !important;
-  max-height: fit-content;
-  max-height: -webkit-fit-content;
+  max-height: -webkit-fill-available;
 }
 @media (min-height: 640px) {
   .hp-adjustments {

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

@@ -66,7 +66,7 @@ export class PtcJumbotron {
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), h("p", { style: { margin: '0' } }, h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), h("p", { style: { margin: '0' } }, h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
   }
   getCssClassMap() {
     return {

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

@@ -14,6 +14,7 @@ export class PtcLink {
     this.seoCompatibilityMode = false;
     this.styles = undefined;
     this.trackerId = undefined;
+    this.tabNav = 0;
     this.darkFocusState = false;
   }
   seoCompRender() {
@@ -23,11 +24,11 @@ export class PtcLink {
     if (this.el == firstChild) {
       this.el.innerHTML = '';
     }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h(TagType, { class: classMap, innerHTML: html, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle, tabindex: '0' }, h("slot", null)))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h(TagType, Object.assign({ class: classMap, innerHTML: html, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("slot", null)))));
   }
   standardRender() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle, tabindex: '0' }, h("slot", null)))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tracker-div" }, h("a", Object.assign({ class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("slot", null)))));
   }
   // render() {
   //   const classMap = this.getCssClassMap();
@@ -303,6 +304,24 @@ export class PtcLink {
         "attribute": "tracker-id",
         "reflect": false
       },
+      "tabNav": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) tab-nav.\r\nindicates that its element can be focused, and where it participates in sequential keyboard navigation.\r\nA negative value (usually tabindex=\"-1\") means that the element is not reachable via sequential keyboard navigation"
+        },
+        "attribute": "tab-nav",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "darkFocusState": {
         "type": "boolean",
         "mutable": false,

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

@@ -98,8 +98,8 @@ ptc-link, ptc-square-card,
 }
 .standard-filter .standard-filter-item:focus {
   text-decoration: none;
-  outline: 3px solid var(--color-blue-07);
-  outline-offset: 2px;
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 .standard-filter .standard-filter-item:active {
   background-color: var(--color-gray-05);
@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard)/2);
+  border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
 .standard-filter .next-button:hover, .standard-filter .previous-button:hover {
@@ -142,8 +142,8 @@ ptc-link, ptc-square-card,
 }
 .standard-filter .next-button:focus, .standard-filter .previous-button:focus {
   text-decoration: none;
-  outline: 3px solid var(--color-blue-07);
-  outline-offset: 2px;
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 .standard-filter .next-button.disabled, .standard-filter .previous-button.disabled {
   cursor: default;

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

@@ -216,19 +216,19 @@ export class PtcPagenation {
     switch (this.theme) {
       case "standard":
         let allowSkip = pageCountValue > 6;
-        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { href: "#", class: this.clickedPageNumber == 1 ? "previous-button disabled" : "previous-button", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
-          h("a", { href: "#", "data-url": "first", "data-page": 1, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
+        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { id: "lastPageArrowId", href: "#", class: this.clickedPageNumber == 1 ? "previous-button mf-listen disabled" : "previous-button mf-listen", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
+          h("a", { href: "#", id: "pagebtn1Id", "data-url": "first", "data-page": 1, class: "standard-filter-item mf-listen", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
           h("span", { class: "standard-filter-dots" }, "...")
         ] : null, this.pageNumbers.map(anchoritem => {
-          return (h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "standard-filter-item active" : "standard-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "standard-filter-item  mf-listen active" : "standard-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
         }), allowSkip && pageCountValue > this.maxPageNumber ? [
           h("span", { class: "standard-filter-dots" }, "..."),
-          h("a", { href: "#", "data-url": "last", "data-page": pageCountValue, class: "standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
-        ] : null, h("a", { href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button disabled" : "next-button", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
+          h("a", { href: "#", "data-url": "last", id: `pagebtn` + pageCountValue + `id`, "data-page": pageCountValue, class: "mf-listen standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
+        ] : null, h("a", { id: "nextPageArrowId", href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button mf-listen disabled" : "next-button mf-listen", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
       case "events":
       default:
         return (h("div", { class: "events-filter" }, this.styles && h("style", null, this.styles), h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), h("img", { src: this.prevArrowImg, onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }), this.pageNumbers.map(anchoritem => {
-          return (h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item mf-listen active" : "events-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
         }), pageCountValue > this.maxPageNumber ? (h("span", { class: "events-filter-dots" }, ". . .")) : null, h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
     }
   }

package/dist/collection/components/ptc-pricing-add-on-card/ptc-pricing-add-on-card.js

@@ -11,7 +11,7 @@ export class PtcPricingAddOnCard {
   render() {
     return (h(Host, null, h("div", { class: "add-on-card" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", { name: "card-pricing" })), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.el.querySelector('[slot="card-body"]').innerHTML.toString().length <= 300) ?
       h("slot", { name: "card-body" }) :
-      h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-body" })), h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.cardDisclaimer.length <= 150) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-disclaimer" })))))));
+      h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-body" })), h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("ptc-button", { class: "mf-listen", type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.cardDisclaimer.length <= 150) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-disclaimer" })))))));
   }
   static get is() { return "ptc-pricing-add-on-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-pricing-add-on-section/ptc-pricing-add-on-section.js

@@ -33,7 +33,7 @@ export class PtcPricingAddOnSection {
     }
   }
   render() {
-    return (h(Host, null, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.sectionTitle), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, h("ptc-pricing-add-on-card", { "card-title": data.title, "card-pricing-text": data.pricing, "card-cta-href": data.cta.linkHref, "card-cta-text": data.cta.linkText, "card-cta-target": data.cta.linkTarget, "card-disclaimer": data.disclaimer }, h("span", { slot: "card-pricing" }, h("slot", { name: `card-pricing-${ind + 1}` })), h("div", { slot: "card-body" }, h("slot", { name: `card-body-${ind + 1}` })), h("span", { slot: "card-disclaimer" }, h("slot", { name: `card-disclaimer-${ind + 1}` }))))))));
+    return (h(Host, null, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.sectionTitle), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, h("ptc-pricing-add-on-card", { id: `pricing-add-on-${ind + 1}`, "card-title": data.title, "card-pricing-text": data.pricing, "card-cta-href": data.cta.linkHref, "card-cta-text": data.cta.linkText, "card-cta-target": data.cta.linkTarget, "card-disclaimer": data.disclaimer }, h("span", { slot: "card-pricing" }, h("slot", { name: `card-pricing-${ind + 1}` })), h("div", { slot: "card-body" }, h("slot", { name: `card-body-${ind + 1}` })), h("span", { slot: "card-disclaimer" }, h("slot", { name: `card-disclaimer-${ind + 1}` }))))))));
   }
   static get is() { return "ptc-pricing-add-on-section"; }
   static get originalStyleUrls() {

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js

@@ -394,7 +394,7 @@ export class PtcPricingPackagingTable {
           h("div", { class: "desktop-sticky-row-header" })
           : null, ([...Array(this.dataCols).keys()]).map(col => {
           return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}` }, (this.ctaButtons[col]) ?
-            h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: `${this.ctaButtons[col].linkTarget}`, "link-title": this.ctaButtons[col].linkTitle }, this.isDesktopView ?
+            h("ptc-button", { id: `pricing-cta-${col}`, type: "link", color: "ptc-tertiary", "link-href": this.ctaButtons[col].linkHref, target: `${this.ctaButtons[col].linkTarget}`, "link-title": this.ctaButtons[col].linkTitle }, this.isDesktopView ?
               h("ptc-tooltip", { class: (col === (this.dataCols - 1)) ? "last-column-tooltip" : "", "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.ctaButtons[col].linkText, position: "top" })
               : this.ctaButtons[col].linkText) : null);
         }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })) : null;

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

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-search-field/ptc-search-field.css

@@ -86,10 +86,12 @@ ptc-link, ptc-square-card,
   width: 100%;
   box-sizing: border-box;
   margin-right: 0px;
+  z-index: -1;
 }
 :host .search-div input:focus-visible {
-  border-radius: var(--ptc-border-radius-standard) 0 0 var(--ptc-border-radius-standard);
-  outline: none;
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  z-index: 0;
 }
 :host .search-div input::placeholder {
   font-family: var(--ptc-font-latin);
@@ -117,9 +119,11 @@ ptc-link, ptc-square-card,
 :host .search-div .search-btn:hover {
   background-color: var(--color-gray-10);
 }
-:host .search-div .search-btn:focus {
-  outline: 3px solid var(--color-blue-07);
-  outline-offset: 2px;
+:host .search-div .search-btn:focus-visible {
+  z-index: 2;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 :host(.dark) {
@@ -242,4 +246,7 @@ ptc-link, ptc-square-card,
   .cls {
     display: none;
   }
+}
+.tracker-div {
+  display: inline;
 }

package/dist/collection/components/ptc-search-field/ptc-search-field.js

@@ -59,7 +59,7 @@ export class PtcSearchField {
   render() {
     const classMap = this.getCssClassMap();
     const clearIconColor = this.darkTheme ? "white" : "black";
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div", tabindex: "0" }, h("div", { class: 'input-wrap' }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } }))), h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); }, tabindex: "-1" }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" })))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap mf-listen', id: "searchTextID" }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } }))), h("div", { class: "tracker-div mf-listen", id: "searchBtnID" }, h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))))));
   }
   getCssClassMap() {
     return {

package/dist/collection/components/ptc-social-icons/ptc-social-icons.css

@@ -73,6 +73,5 @@ ptc-link, ptc-square-card,
 }
 :host div a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }

package/dist/collection/components/ptc-social-icons/ptc-social-icons.js

@@ -14,7 +14,7 @@ export class PtcSocialIcons {
     this.target = '_blank';
   }
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.trackerId }, this.facebookUrl && h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG, target: this.target, "aria-label": "Social share - Facebook" }), this.linkedinUrl && h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG, target: this.target, "aria-label": "Social share - LinkedIn" }), this.xUrl && h("a", { href: this.xUrl, title: 'X', innerHTML: xSVG, target: this.target, "aria-label": "Social share - X" }), this.emailTo && h("a", { href: `mailto:${this.emailTo}`, title: 'Email', innerHTML: emailSVG, target: this.target, "aria-label": "Social share - Email" }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.trackerId }, this.facebookUrl && h("a", { class: "mf-listen", href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG, target: this.target, "aria-label": "Social share - Facebook" }), this.linkedinUrl && h("a", { class: "mf-listen", href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG, target: this.target, "aria-label": "Social share - LinkedIn" }), this.xUrl && h("a", { class: "mf-listen", href: this.xUrl, title: 'X', innerHTML: xSVG, target: this.target, "aria-label": "Social share - X" }), this.emailTo && h("a", { class: "mf-listen", href: `mailto:${this.emailTo}`, title: 'Email', innerHTML: emailSVG, target: this.target, "aria-label": "Social share - Email" }))));
   }
   static get is() { return "ptc-social-icons"; }
   static get encapsulation() { return "shadow"; }