@ptcwebops/ptcw-design 5.9.0 → 5.9.1

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

@@ -1,6 +1,9 @@
 import { h } from '@stencil/core';
 export class PtcEllipsisDropdown {
   constructor() {
+    this.menuitemNodes = [];
+    this.firstMenuitem = false;
+    this.lastMenuitem = false;
     this.dataItems = [];
     this.selectedTab = undefined;
     this.isDropdownOpen = false;
@@ -8,6 +11,7 @@ export class PtcEllipsisDropdown {
     this.isIPad = undefined;
     this.dropdownType = "default";
   }
+  //firstChars = [];
   dropdownToggle(e) {
     e.currentTarget.classList.toggle("show");
     this.isDropdownOpen = e.currentTarget.classList.contains("show");
@@ -26,20 +30,146 @@ export class PtcEllipsisDropdown {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onEscClicked() {
+    var _a;
+    let container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ptc-ellipsis-dropdown');
+    //this.host.focus();
+    if (container) {
+      container.classList.remove('show');
+      this.isDropdownOpen = false;
+    }
+  }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onMenuitemKeydown(event) {
+    var tgt = event.currentTarget, key = event.key, flag = false;
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+    if (event.shiftKey) {
+      if (event.key === 'Tab') {
+      }
+    }
+    else {
+      switch (key) {
+        case 'Up':
+        case 'ArrowUp':
+          this.setFocusToPreviousMenuitem(tgt);
+          flag = true;
+          break;
+        case 'ArrowDown':
+        case 'Down':
+          this.setFocusToNextMenuitem(tgt);
+          flag = true;
+          break;
+        case 'Home':
+        case 'PageUp':
+          this.setFocusToFirstMenuitem();
+          flag = true;
+          break;
+        case 'End':
+        case 'PageDown':
+          this.setFocusToLastMenuitem();
+          flag = true;
+          break;
+        case 'Tab':
+          this.onEscClicked();
+          break;
+        default:
+          break;
+      }
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  setFocusToMenuitem(newMenuitem) {
+    this.menuitemNodes.forEach(function (item) {
+      if (item === newMenuitem) {
+        item.tabIndex = 0;
+        newMenuitem.focus();
+      }
+      else {
+        item.tabIndex = -1;
+      }
+    });
+  }
+  setFocusToFirstMenuitem() {
+    this.setFocusToMenuitem(this.firstMenuitem);
+  }
+  setFocusToLastMenuitem() {
+    this.setFocusToMenuitem(this.lastMenuitem);
+  }
+  setFocusToPreviousMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.firstMenuitem) {
+      newMenuitem = this.lastMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index - 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  setFocusToNextMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.lastMenuitem) {
+      newMenuitem = this.firstMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index + 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.menuitems = this.host.shadowRoot.querySelectorAll('dropdown-item');
+      for (var i = 0; i < this.menuitems.length; i++) {
+        var menuitem = this.menuitems[i];
+        this.menuitemNodes.push(menuitem);
+        menuitem.tabIndex = -1;
+        menuitem.addEventListener('keydown', this.onMenuitemKeydown.bind(this));
+        if (!this.firstMenuitem) {
+          this.firstMenuitem = menuitem;
+        }
+        this.lastMenuitem = menuitem;
+      }
+    }, 100);
+    const ellp = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    this.host.addEventListener('keydown', (event) => {
+      // Open dropdown on 'Enter' key press
+      if (event.key === 'Enter') {
+        ellp.click();
+      }
+      if (event.key === 'ArrowDown') {
+        this.host.shadowRoot.querySelectorAll('dropdown-item')[0].focus();
+      }
+    });
+    if (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) {
+      this.host.setAttribute('tabindex', '0');
+    }
+  }
   render() {
     let activeTab = this.dataItems.find(z => z.isSelected == true);
     let isActive = false;
     if (activeTab) {
       isActive = true;
     }
-    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
       let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
       let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
-      return (h("dropdown-item", { class: activeClass + activeDropdown + 'mf-listen' }, h("span", { onClick: (e) => {
+      return (h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + 'mf-listen', onKeyDown: (e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            this.onItemSelected(dataItem);
+          }
+        } }, h("span", { onClick: (e) => {
           e.preventDefault();
           this.onItemSelected(dataItem);
         } }, dataItem.text)));
@@ -155,6 +285,12 @@ export class PtcEllipsisDropdown {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "escClicked",
+        "method": "onEscClicked",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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: 8px;
+  padding: calc((34px - 18px) / 2);
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: 0px;
+  margin: calc((34px - 34px) / 2);
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: 8px;
+  top: calc((34px - 18px) / 2);
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: 8px;
+  left: calc((34px - 18px) / 2);
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: 0px;
+  top: calc((34px - 34px) / 2);
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: 0px;
+  right: calc((34px - 34px) / 2);
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: 0px;
+  left: calc((34px - 34px) / 2);
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

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.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 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.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 
@@ -1259,6 +1259,13 @@ a:focus-visible {
 
 .hp-adjustments {
   background-color: var(--color-black);
+  height: auto;
+  min-height: 640px !important;
+}
+@media (min-height: 640px) {
+  .hp-adjustments {
+    min-height: 72vh !important;
+  }
 }
 .hp-adjustments .div1 {
   grid-area: 1/1/3/2;
@@ -1292,11 +1299,6 @@ a:focus-visible {
   opacity: 0;
 }
 
-@media screen and (min-width: 992.01px) {
-  .hp-adjustments {
-    height: 90vh;
-  }
-}
 .div1 {
   grid-area: 1/1/2/2;
   min-height: 300px;

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

@@ -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 {

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.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 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.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

@@ -193,7 +193,11 @@ ptc-tab-list.tab-with-banner .tabs-header-container {
   }
 }
 .ellipsis-btn.active {
-  display: block;
+  display: inline-block;
+}
+.ellipsis-btn:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 tab-header {

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

@@ -6,6 +6,10 @@ export class PtcTabList {
     this.isMobile = undefined;
     this.isMobileTabWithBanner = undefined;
     this.selectedValue = undefined;
+    this.dropdownItemsCount = 0;
+  }
+  closeDropdown() {
+    this.escClicked.emit();
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
@@ -16,6 +20,14 @@ export class PtcTabList {
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
+    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
+    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    tabsHeaderEl.forEach((tab, i) => {
+      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
+        this.lastVisibleTab = tab;
+      }
+    });
   }
   onSelectedTab(event) {
     let self = this;
@@ -23,6 +35,14 @@ export class PtcTabList {
       event.detail.then(res => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
+          // Set the selected tab's tabindex to 0
+          group.header.el.setAttribute('tabindex', '0');
+          // Focus the selected tab
+          group.header.el.focus();
+        }
+        else {
+          // Set other tabs' tabindex to -1
+          group.header.el.setAttribute('tabindex', '-1');
         }
       });
     });
@@ -70,6 +90,7 @@ export class PtcTabList {
     if (activateDropDown) {
       dropdown.classList.add('active');
       dropdown.dataItems = hiddenTabs.reverse();
+      this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
       dropdown.classList.remove('active');
@@ -90,7 +111,7 @@ export class PtcTabList {
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
       }
-      headerData.push(res);
+      headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
     const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
@@ -116,6 +137,92 @@ export class PtcTabList {
         self.selectGroup(group);
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
+    tabsHeaderEl.forEach((header, index) => {
+      //  console.log(header);
+      header.setAttribute('id', 'tab-' + (index + 1));
+      header.setAttribute('role', 'tab');
+      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
+      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
+      header.addEventListener('keydown', this.onKeydown.bind(this));
+      if (!this.firstTab) {
+        this.firstTab = header;
+      }
+      this.lastTab = header;
+    });
+    tabsContentEl.forEach((panel, index) => {
+      panel.setAttribute('id', 'tabpanel-' + (index + 1));
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
+    });
+  }
+  moveFocusToTab(currentTab) {
+    currentTab.focus();
+  }
+  moveFocusToPreviousTab(currentTab) {
+    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute('tabindex', '-1');
+      if (this.dropdownItemsCount == 0) {
+        this.moveFocusToTab(this.lastTab);
+      }
+      else if (currentTab == this.ellipsisDropdown) {
+        this.moveFocusToTab(this.lastVisibleTab);
+      }
+      else {
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.focus();
+      }
+    }
+    else {
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      this.moveFocusToTab(this.tabsHeader[index - 1].el);
+    }
+  }
+  moveFocusToNextTab(currentTab) {
+    this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
+      if (this.dropdownItemsCount == 0) {
+        this.moveFocusToTab(this.firstTab);
+      }
+      else {
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.focus();
+      }
+    }
+    else {
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      this.moveFocusToTab(this.tabsHeader[index + 1].el);
+    }
+  }
+  onKeydown(event) {
+    const currentTab = event.currentTarget;
+    let flag = false;
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.moveFocusToPreviousTab(currentTab);
+        flag = true;
+        break;
+      case 'ArrowRight':
+        this.moveFocusToNextTab(currentTab);
+        flag = true;
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        flag = true;
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  async toggleTabGroup(name) {
+    let self = this;
+    this.tabGroup.forEach(group => {
+      if (group.header.name === name) {
+        self.selectGroup(group);
+      }
+    });
   }
   selectGroup(group) {
     let self = this;
@@ -178,7 +285,8 @@ export class PtcTabList {
     return {
       "isMobile": {},
       "isMobileTabWithBanner": {},
-      "selectedValue": {}
+      "selectedValue": {},
+      "dropdownItemsCount": {}
     };
   }
   static get events() {
@@ -197,8 +305,46 @@ export class PtcTabList {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "escClicked",
+        "name": "escClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
+  static get methods() {
+    return {
+      "toggleTabGroup": {
+        "complexType": {
+          "signature": "(name: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{

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

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input.iti__tel-input,
-.iti input.iti__tel-input[type=text],
-.iti input.iti__tel-input[type=tel] {
+.iti input,
+.iti input[type=text],
+.iti input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,35 +2256,26 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__dropdown-content {
+.iti__country-list {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
+  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__dropdown-content--dropup {
+.iti__country-list--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
-.iti__search-input {
-  width: 100%;
-  border-width: 0;
-}
-.iti__country-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.iti--flexible-dropdown-width .iti__country-list {
-  white-space: nowrap;
-}
 @media (max-width: 500px) {
-  .iti--flexible-dropdown-width .iti__country-list {
+  .iti__country-list {
     white-space: normal;
   }
 }
@@ -2316,20 +2307,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
+.iti--allow-dropdown input,
+.iti--allow-dropdown input[type=text],
+.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
+.iti--separate-dial-code input[type=text],
+.iti--separate-dial-code input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input,
+[dir=rtl] .iti--allow-dropdown input[type=text],
+[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
+[dir=rtl] .iti--separate-dial-code input[type=text],
+[dir=rtl] .iti--separate-dial-code input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2348,12 +2339,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
   cursor: default;
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2377,26 +2368,18 @@
   cursor: pointer;
 }
 
-.iti--fullscreen-popup.iti--container {
-  background-color: rgba(0, 0, 0, 0.5);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.iti-mobile .iti--container {
+  top: 30px;
+  bottom: 30px;
+  left: 30px;
+  right: 30px;
   position: fixed;
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
-  justify-content: flex-start;
 }
-.iti--fullscreen-popup .iti__dropdown-content {
+.iti-mobile .iti__country-list {
   max-height: 100%;
-  position: relative;
+  width: 100%;
 }
-.iti--fullscreen-popup .iti__country {
+.iti-mobile .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2422,7 +2405,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3488,7 +3471,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }

package/dist/collection/components/tab-content/tab-content.css

@@ -54,18 +54,11 @@ ptc-link, ptc-square-card,
   }
 }
 
-.tab-content {
-  display: none;
-}
 .tab-content p, .tab-content ul, .tab-content ol, .tab-content span, .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
   max-width: 720px;
   font-weight: var(--ptc-font-weight-normal);
 }
 
-.tab-content-selected {
-  display: block;
-}
-
 .tab-content h3 {
   font-size: var(--ptc-font-size-medium);
   font-weight: var(--ptc-font-weight-bold);