@ptcwebops/ptcw-design 6.1.13 → 6.1.15

package/dist/collection/components/icon-asset/icon-asset.js

@@ -4,7 +4,7 @@ export class IconAsset {
     this.regularSprite = getAssetPath('./media/regular.svg');
     this.solidSprite = getAssetPath('./media/solid.svg');
     this.brandSprite = getAssetPath('./media/brands.svg');
-    this.ptcSprite = getAssetPath('./media/designer-v6.0.4.svg');
+    this.ptcSprite = getAssetPath('./media/designer-v6.0.5.svg');
     this.name = undefined;
     this.size = 'xx-small';
     this.type = 'regular';
@@ -14,6 +14,14 @@ export class IconAsset {
     this.isMobileSelect = undefined;
     this.injectedStyle = undefined;
   }
+  componentDidLoad() {
+    this.ready.emit({
+      'regular-icons': this.regularSprite,
+      'sold-icons': this.solidSprite,
+      'brand-icons': this.brandSprite,
+      'ptc-icons': this.ptcSprite
+    });
+  }
   render() {
     const classMap = this.getCssClassMap();
     if (this.type == 'brands') {
@@ -196,4 +204,22 @@ export class IconAsset {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "ready",
+        "name": "ready",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

package/dist/collection/components/icon-asset/media/{designer-v6.0.4.svg → designer-v6.0.5.svg}

@@ -593,8 +593,73 @@
       </clipPath>
     </defs>
   </symbol>
-
-    <symbol id="lang-drop-arrow" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M11.6213 1.88062L6.49986 7.12103L1.37839 1.88061" stroke="white" stroke-width="3" stroke-linecap="round" />
-    </symbol>
+  <symbol id="lang-drop-arrow" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6213 1.88062L6.49986 7.12103L1.37839 1.88061" stroke="white" stroke-width="3" stroke-linecap="round" />
+  </symbol>
+  <symbol id="cloud" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2229_2058)">
+      <path
+        d="M27.4 15.5C32 15.5 36.2 18 38.3 22L39.6 24.3L42.1 23.3C43 22.9 44 22.8 44.9 22.8C49.1 22.8 52.6 26.2 52.6 30.5C52.6 30.9 52.6 31.3 52.5 31.7L52 34.7L55.1 35.1C58.5 35.5 61 38.3 61 41.7C61 45.4 58 48.4 54.3 48.4C54.3 48.4 13.8 48.5 13.7 48.5C7.8 48.5 3 43.7 3 37.7C3 32.2 7.3 27.5 12.8 27L14.9 26.8L15.4 24.8C16.8 19.3 21.7 15.5 27.4 15.5ZM27.4 12.5C20.2 12.5 14.2 17.4 12.5 24C5.5 24.6 0 30.5 0 37.7C0 45.3 6.2 51.5 13.7 51.5C13.8 51.5 54.3 51.4 54.3 51.4C59.7 51.4 64 47.1 64 41.7C64 36.7 60.3 32.6 55.4 32.1C55.5 31.6 55.5 31 55.5 30.5C55.5 24.6 50.7 19.8 44.8 19.8C43.4 19.8 42.1 20.1 40.9 20.6C38.4 15.8 33.3 12.5 27.4 12.5Z"
+        ></path>
+      <path
+        d="M19.3 27.1L17.3 27C17.5 24 18.9 21.4 21.1 19.6C23.4001 17.8 26.4 17.2 29.4 17.7L29 19.7C26.5 19.2 24.1 19.8 22.3 21.2C20.6 22.5 19.5 24.6 19.3 27.1Z"
+        ></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_2229_2058">
+        <rect width="64" height="64" ></rect>
+      </clipPath>
+    </defs>
+  </symbol>
+  <symbol id="new-window" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <path d="M58 58H6V6H27.9V0H0V2.2V6V64H0.2H58H64V36.8H58V58Z"></path>
+    <path d="M40.2999 0L47.5999 7.4L24.8999 30.7L33.3999 39.2L55.9999 15.8L63.9999 24V0H40.2999Z"></path>
+  </symbol>
+  <symbol id="chip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <g>
+      <path class="st0" d="M23.4,42.6h17.1c0.9,0,1.7-0.8,1.7-1.7V23.8c0-0.9-0.8-1.7-1.7-1.7H23.4c-0.9,0-1.7,0.8-1.7,1.7v17.1
+        C21.7,41.8,22.5,42.6,23.4,42.6z"></path>
+      <path class="st0" d="M64.1,27.8v-3H52.7v-2.6h6v-3h-6v-2c0-3.2-2.6-5.8-5.8-5.8h-1.7V5.4h-3v5.9h-2.9V0h-3v11.3h-2.7V5.4h-3v5.9
+        h-2.8V0h-3v11.3h-2.6V5.4h-3v5.9h-2c-3.2,0-5.8,2.6-5.8,5.8v2H5.4v3h5.9v2.9H0v3h11.3v2.7H5.4v3h5.9v2.8H0v3h11.3v2.6H5.4v3h5.9
+        v1.6c0,3.2,2.6,5.8,5.8,5.8H19v5.9h3v-5.9h2.9V64h3V52.7h2.7v5.9h3v-5.9h2.8V64h3V52.7H42v5.9h3v-5.9h1.8c3.2,0,5.8-2.6,5.8-5.8
+        v-1.6h6v-3h-6v-2.9h11.4v-3H52.7v-2.7h6v-3h-6v-2.8H64.1z M46.7,46.7H17.3V17.3h29.3V46.7z"></path>
+    </g>
+  </symbol>
+  <symbol id="digital-thread" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <g>
+      <polygon class="st0" points="16.9,51.1 9.2,55.4 9.2,63.9 55.8,63.9 55.8,55.4 48.1,51.1 	"></polygon>
+      <polygon class="st0" points="48.1,12.7 55.9,8.5 55.9,0.2 9.1,0.2 9.1,8.5 16.9,12.7 	"></polygon>
+      <path class="st0" d="M13.5,18.8h32.6v2.9H23.3v3h22.9v2.9H23.3v3h22.9v2.9H23.3v3h22.9v3H23.3v3h25.9V15.8H13.6
+        c-0.6-1.9-2.4-3.4-4.5-3.4c-2.6,0-4.7,2.1-4.7,4.7c0,2.6,2.1,4.7,4.7,4.7C11.2,21.8,12.9,20.6,13.5,18.8z M9.1,18.8
+        c-0.9,0-1.7-0.8-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7s1.7,0.8,1.7,1.7C10.8,18.1,10.1,18.8,9.1,18.8z"></path>
+      <path class="st0" d="M55.8,42c-2.2,0-4,1.5-4.5,3.5H20.1V21.7h-3v26.8h34.3c0.7,1.7,2.4,2.9,4.4,2.9c2.6,0,4.7-2.1,4.7-4.7
+        S58.4,42,55.8,42z M55.8,48.4c-0.9,0-1.7-0.8-1.7-1.7s0.8-1.7,1.7-1.7s1.7,0.8,1.7,1.7S56.7,48.4,55.8,48.4z"></path>
+    </g>
+  </symbol>
+  <symbol id="digital-twin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <g>
+      <path class="st0" d="M43.6,8.4L23.2,20.2v23.6l20.4,11.8L64,43.8V20.2L43.6,8.4z M58,40.3l-14.4,8.3l-14.4-8.3V23.7l14.4-8.3
+        L58,23.7V40.3z"></path>
+      <polygon class="st0" points="20.2,45.7 20.2,43.9 20.2,20.3 20.2,18.6 21.7,17.7 29.1,13.4 20.4,8.4 0,20.2 0,43.8 20.4,55.6 
+        28.9,50.7 21.7,46.5 	"></polygon>
+    </g>
+  </symbol>
+  <symbol id="error-hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <g>
+      <path class="st0" d="M45.2,0H18.8L0,18.8v26.5L18.8,64h26.5L64,45.2V18.8L45.2,0z M35.7,51.7C34.8,52.5,33.6,53,32,53
+        c-1.6,0-2.8-0.4-3.7-1.3c-0.9-0.8-1.3-2-1.3-3.6c0-1.6,0.4-2.8,1.3-3.6c0.9-0.8,2.1-1.2,3.7-1.2c1.6,0,2.8,0.4,3.7,1.3
+        c0.9,0.8,1.3,2,1.3,3.6C37,49.6,36.6,50.8,35.7,51.7z M35.5,38.4h-7l-1.5-27.9H37L35.5,38.4z"></path>
+    </g>
+  </symbol>
+  <symbol id="fire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <g>
+      <polygon class="st0" points="38.2,56.4 32.5,56.4 31.1,61.5 38.2,63.2 41,59 	"></polygon>
+      <polygon class="st0" points="36.6,51.3 36.7,47.1 33.9,46.1 30.3,48.1 31.5,52.4 	"></polygon>
+      <path class="st0" d="M22.8,52.6l-5.2,3.6l1.4,4.3l5.7,2.8l2.6-3.2c0.1,0.2,0.1,0.3,0.2,0.5c0,0,0,0,0,0c-0.1-0.2-0.1-0.3-0.2-0.5
+        l1.6-2L22.8,52.6z"></path>
+      <path class="st0" d="M56.2,23.1c1.6,7.9-3.9,12-8.3,9.7C36,26.7,60.4,17.8,24.8,0C36.5,14.8,0,26,0,41.6C0,52,9.6,59.7,18.2,63
+        c-7.2-6.1-6.9-14.4-1.6-19.2c0.8,3.5,5.3,7.3,9.7,4.5c7.3-4.7-10.3-9,7-18.9c-3,12.4,13.3,12.5,13.3,22.3c0,4.3-1.9,9.3-6.5,12.4
+        C61.6,58.4,72.4,37.3,56.2,23.1z"></path>
+    </g>
+  </symbol>
 </svg>

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js

@@ -107,7 +107,6 @@ export class HomepageToggledContent {
     const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const tabs = this.getTabs();
     return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map(tab => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map(tab => (h("div", { class: `dropdown-item ${tab.index === this.activeTab ? 'active-tab' : ''}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? 'active-tab' : ''}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index && this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
-        console.log('yes');
         this.onCardMouseUp(e);
       } }))))) : null)))))));
   }

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

@@ -40,7 +40,7 @@ export class PtcAnnouncement {
     return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: "content-wrapper ptc-container" }, h("div", { class: "left-content", part: "part-left-content" }, h("slot", { name: "seo-content" }), !!this.barTitle ? (h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (
     // <ptc-tooltip text-display="inline" max-length="60" z-index="z-2" description={this.barTitle} position="bottom"></ptc-tooltip>
     h("ptc-tooltip-v2", { "max-length": "60", "z-index": "2" }, this.barTitle)))) : null, this.windowSize === 'mobile' ? ( //mobile view
-    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, h("div", { style: { display: 'inline' } }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText, console.log('rending link'))) : null))) : null))) : (
+    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, h("div", { style: { display: 'inline' } }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null))) : null))) : (
     //desktop view
     h("div", { class: "description" }, !!this.description ? (
     // <ptc-tooltip text-display="inline" max-length="165" z-index="z-2" description={this.description + ' '} position="bottom"></ptc-tooltip>

package/dist/collection/components/ptc-footer/ptc-footer-v2.css

@@ -155,21 +155,22 @@ ptc-footer .footer-top .f-menu {
   }
 }
 @media only screen and (min-width: 992px) {
-  ptc-footer .footer-top .f-menu ul {
+  ptc-footer .footer-top .f-menu ul, ptc-footer .footer-top .f-menu ol {
     width: 50%;
     max-width: initial;
   }
 }
-ptc-footer .footer-top .f-menu ul li {
+ptc-footer .footer-top .f-menu ul li, ptc-footer .footer-top .f-menu ol li {
   padding: 6px 0;
+  font-size: var(--ptc-font-size-x-small);
 }
-ptc-footer .footer-top .f-menu ul li:first-child {
+ptc-footer .footer-top .f-menu ul li:first-child, ptc-footer .footer-top .f-menu ol li:first-child {
   padding-top: 0;
 }
-ptc-footer .footer-top .f-menu ul li:last-child {
+ptc-footer .footer-top .f-menu ul li:last-child, ptc-footer .footer-top .f-menu ol li:last-child {
   padding-bottom: 0;
 }
-ptc-footer .footer-top .f-menu ul li a {
+ptc-footer .footer-top .f-menu ul li a, ptc-footer .footer-top .f-menu ol li a {
   display: inline-block;
   font-weight: var(--ptc-font-weight-medium);
   line-height: var(--ptc-line-height-p);
@@ -228,6 +229,9 @@ ptc-footer .footer-bottom {
     max-width: 1200px;
   }
 }
+ptc-footer .footer-bottom ul li, ptc-footer .footer-bottom ol li {
+  font-size: var(--ptc-font-size-xx-small);
+}
 ptc-footer .footer-bottom .logo {
   margin-bottom: var(--ptc-element-spacing-06);
 }

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

@@ -37,8 +37,8 @@ export class PtcMediaCard {
   }
   setTabNavigatedState() {
     this.el.parentElement.tagName === 'DYNAMIC-PRODUCT-DRIVERS' ? this.isTabNavigated = false : this.isTabNavigated = true;
-    console.log('parent ele tag name: ' + this.el.parentElement.tagName);
-    console.log('isTabNavigated value: ' + this.isTabNavigated);
+    //console.log('parent ele tag name: ' + this.el.parentElement.tagName)
+    //console.log('isTabNavigated value: ' + this.isTabNavigated)
   }
   componentWillLoad() {
     this.setTabNavigatedState();

package/dist/collection/components/ptc-multi-select/ptc-multi-select.css

@@ -121,7 +121,15 @@ ptc-link, ptc-square-card,
   align-items: center;
 }
 .ptc-multi-select .selected-items:focus-visible {
-  outline: 2px solid #007bff;
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  outline-offset: -4px;
+}
+.ptc-multi-select .selected-items:focus {
+  border: 2px solid var(--color-blue-07);
+}
+.ptc-multi-select .selected-items[aria-expanded] {
+  border: 2px solid var(--color-blue-07);
 }
 .ptc-multi-select .selected-items .input-text {
   width: calc(100% - 18px);

package/dist/collection/components/ptc-multi-select/ptc-multi-select.js

@@ -238,7 +238,7 @@ export class PtcMultiSelect {
     if (selectedItemsCount === 1) {
       displayText = selectedItems[0].text;
     }
-    return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid, 'mf-listen': true } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), h("div", { class: "selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: 'dropdown' + (this.showDropdown ? ' show' : ''), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
+    return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid, 'mf-listen': true } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), h("div", { class: "selected-items multi-selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: 'dropdown' + (this.showDropdown ? ' show' : ''), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
         event.preventDefault();
         event.stopPropagation();
         buttonAction(event);

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

@@ -6177,6 +6177,20 @@ ptc-link, ptc-square-card,
 .ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing {
   border-color: var(--color-hyperlink);
 }
+.ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused.keyboard-focus .mdc-notched-outline .mdc-notched-outline__leading,
+.ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused.keyboard-focus .mdc-notched-outline .mdc-notched-outline__notch,
+.ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused.keyboard-focus .mdc-notched-outline .mdc-notched-outline__trailing {
+  border-color: var(--keyboard-nav-outline);
+  border-width: 5px;
+}
+.ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused.keyboard-focus .mdc-notched-outline .mdc-notched-outline__leading {
+  border-top-left-radius: var(--ptc-border-radius-standard) !important;
+  border-bottom-left-radius: var(--ptc-border-radius-standard) !important;
+}
+.ptc-select .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused.keyboard-focus .mdc-notched-outline .mdc-notched-outline__trailing {
+  border-top-right-radius: var(--ptc-border-radius-standard) !important;
+  border-bottom-right-radius: var(--ptc-border-radius-standard) !important;
+}
 .ptc-select .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon {
   fill: var(--color-hyperlink);
 }

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

@@ -5,6 +5,7 @@ import { ValidationMessages } from '../../utils/validation-messages';
 import { getLanguageFromURL } from '../../utils/utils';
 export class PtcSelect {
   constructor() {
+    this.lastInteraction = 'mouse';
     this.map = {
       'Afghanistan': 'AF',
       'Albania': 'AL',
@@ -265,11 +266,6 @@ export class PtcSelect {
     this.language = 'en';
   }
   async setValue() {
-    //const userCountry = await this.getUserCountry(); // Function to get user's country
-    // if (userCountry) {
-    //     console.log("country by IP: " + userCountry)
-    //     this.defaultSelect.value = userCountry;
-    // }
     this.defaultSelect.value = this.defaultValue;
   }
   componentWillLoad() {
@@ -296,17 +292,8 @@ export class PtcSelect {
       }
     });
     this.addKeyboardAccessibility();
+    this.setupFocusHandlers();
   }
-  // async getUserCountry() {
-  //   try {
-  //     const response = await fetch('https://ipapi.co/json/'); // Example API
-  //     const data = await response.json();
-  //     return data.country_name; // or data.country_code, depending on your dropdown values
-  //   } catch (error) {
-  //     console.error('Error fetching user country:', error);
-  //     return null;
-  //   }
-  // }
   addKeyboardAccessibility() {
     const selectAnchor = this.el.querySelector('.mdc-select__anchor');
     const menu = this.el.querySelector('.mdc-select__menu');
@@ -374,6 +361,36 @@ export class PtcSelect {
     }
     return className;
   }
+  setupFocusHandlers() {
+    // Track the last interaction type
+    document.addEventListener('mousedown', () => {
+      this.lastInteraction = 'mouse';
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        this.lastInteraction = 'keyboard';
+      }
+    });
+    const selectFields = document.querySelectorAll('.mdc-select');
+    selectFields.forEach((selectField) => {
+      const select = selectField.querySelector('.mdc-select__anchor');
+      if (select) {
+        select.addEventListener('focus', () => {
+          if (this.lastInteraction === 'keyboard') {
+            selectField.classList.add('keyboard-focus');
+            selectField.classList.remove('mouse-focus');
+          }
+          else {
+            selectField.classList.add('mouse-focus');
+            selectField.classList.remove('keyboard-focus');
+          }
+        });
+        select.addEventListener('blur', () => {
+          selectField.classList.remove('keyboard-focus', 'mouse-focus');
+        });
+      }
+    });
+  }
   render() {
     return (h(Host, { class: "ptc-select mf-listen" }, h("div", { class: this.getSelectClassName() }, h("label", { class: "ptc-label-select", htmlFor: this.fieldId }, this.label), h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { 'ariaRequired': true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth", role: "listbox", "aria-label": this.label }, h("slot", null)), h("p", { id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText) : null)));
   }

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

@@ -3632,11 +3632,25 @@ ptc-link, ptc-square-card,
 .ptc-text-field .field-with-counter {
   position: relative;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing {
   border-color: var(--color-blue-07);
 }
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+  border-color: var(--keyboard-nav-outline);
+  border-width: 5px;
+}
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading {
+  border-top-left-radius: var(--ptc-border-radius-standard) !important;
+  border-bottom-left-radius: var(--ptc-border-radius-standard) !important;
+}
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+  border-top-right-radius: var(--ptc-border-radius-standard) !important;
+  border-bottom-right-radius: var(--ptc-border-radius-standard) !important;
+}
 .ptc-text-field .mdc-text-field--outlined {
   height: 34px;
   width: 273px;
@@ -3726,6 +3740,11 @@ ptc-link, ptc-square-card,
   padding-left: 0px;
   z-index: 3;
 }
+.ptc-text-field .intl-phone-adjustments .iti__selected-flag:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  outline-offset: -4px;
+}
 .ptc-text-field .intl-phone-adjustments ul {
   width: 273px;
 }

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

@@ -5,6 +5,7 @@ import { ValidationMessages } from '../../utils/validation-messages';
 import { getLanguageFromURL } from '../../utils/utils';
 export class PtcTextfield {
   constructor() {
+    this.lastInteraction = 'mouse';
     this.phoneValidity = 'validating';
     this.matchStatus = true;
     this.fieldId = undefined;
@@ -85,13 +86,6 @@ export class PtcTextfield {
     if (this.type !== 'hidden') {
       this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
     }
-    // try{
-    //   // debugger;
-    //   this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
-    // }catch(error){
-    //   debugger;
-    //   console.error('An error found here!', error.message);
-    // }
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
       this.iti = intlTelInput(this.customInput, {
         separateDialCode: true,
@@ -106,6 +100,7 @@ export class PtcTextfield {
         utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
       });
     }
+    this.setupFocusHandlers();
   }
   getValidationMessage(type) {
     return ValidationMessages[this.language][type];
@@ -220,6 +215,37 @@ export class PtcTextfield {
       }
     }
   }
+  setupFocusHandlers() {
+    // Track the last interaction type
+    document.addEventListener('mousedown', () => {
+      this.lastInteraction = 'mouse';
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        this.lastInteraction = 'keyboard';
+      }
+    });
+    // Select all elements with the class `mdc-text-field`
+    const textFields = document.querySelectorAll('.mdc-text-field');
+    textFields.forEach((textField) => {
+      const input = textField.querySelector('input');
+      if (input) {
+        input.addEventListener('focus', () => {
+          if (this.lastInteraction === 'keyboard') {
+            textField.classList.add('keyboard-focus');
+            textField.classList.remove('mouse-focus');
+          }
+          else {
+            textField.classList.add('mouse-focus');
+            textField.classList.remove('keyboard-focus');
+          }
+        });
+        input.addEventListener('blur', () => {
+          textField.classList.remove('keyboard-focus', 'mouse-focus');
+        });
+      }
+    });
+  }
   render() {
     return (h(Host, { class: `ptc-text-field 
         ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.js

@@ -50,7 +50,7 @@ export class PtcTheaterVideoPlaylist {
     });
   }
   setupCards() {
-    console.log('Setup called');
+    //console.log('Setup called');
     // const cardElements = this.host.querySelectorAll('ptc-theater-video');
     // console.log(this.cardElements);
     this.cardElements.forEach((cardElement, index) => {
@@ -61,7 +61,7 @@ export class PtcTheaterVideoPlaylist {
     });
   }
   updateCardData(cardNumber) {
-    console.log('updateCard called');
+    //console.log('updateCard called');
     // debugger
     this.cards = [];
     // const cardElements = this.host.querySelectorAll('ptc-theater-video');