@ptcwebops/ptcw-design 5.8.9 → 5.9.1

package/dist/esm/ptc-ellipsis-dropdown.entry.js

@@ -1,11 +1,14 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c83db688.js';
 
-const ptcEllipsisDropdownCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.ellipsis-icon{box-sizing:border-box;border:1px solid var(--color-gray-08);border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block;width:10px !important;height:10px !important}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-11px}@media only screen and (min-width: 1440px){.ellipsis-icon.active::after{bottom:-17px}}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:2px 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown.default{padding:0px;border-bottom:none;margin:0;height:44px;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0 16px 0;margin:0 1rem -2.5px 1rem}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0px 1rem 0px;border-bottom:none;margin:0;height:100%;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner .ellipsis-icon.active::after{bottom:-2px}.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{right:0;left:auto;top:50%;margin-top:22px}}.ptc-ellipsis-dropdown.tab-with-banner.show .dropdown-container{display:inline-block}@media only screen and (min-width: 1440px){.ptc-ellipsis-dropdown{height:34px;width:34px}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 12px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto;margin-top:48px}}@media only screen and (min-width: 1440px){.dropdown-container{margin-top:45px}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}";
+const ptcEllipsisDropdownCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.ellipsis-icon{box-sizing:border-box;border:1px solid var(--color-gray-08);border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block;width:10px !important;height:10px !important}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-11px}@media only screen and (min-width: 1440px){.ellipsis-icon.active::after{bottom:-17px}}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:2px 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown.default{padding:0px;border-bottom:none;margin:0;height:44px;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0 16px 0;margin:0 1rem -2.5px 1rem}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0px 1rem 0px;border-bottom:none;margin:0;height:100%;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner .ellipsis-icon.active::after{bottom:-2px}.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{right:0;left:auto;top:50%;margin-top:22px}}.ptc-ellipsis-dropdown.tab-with-banner.show .dropdown-container{display:inline-block}@media only screen and (min-width: 1440px){.ptc-ellipsis-dropdown{height:34px;width:34px}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 12px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto;margin-top:48px}}@media only screen and (min-width: 1440px){.dropdown-container{margin-top:45px}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}dropdown-item:focus-visible{outline:none}dropdown-item:focus-visible .dropdown-item{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 
 const PtcEllipsisDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.menuitemNodes = [];
+    this.firstMenuitem = false;
+    this.lastMenuitem = false;
     this.dataItems = [];
     this.selectedTab = undefined;
     this.isDropdownOpen = false;
@@ -13,6 +16,7 @@ const PtcEllipsisDropdown = class {
     this.isIPad = undefined;
     this.dropdownType = "default";
   }
+  //firstChars = [];
   dropdownToggle(e) {
     e.currentTarget.classList.toggle("show");
     this.isDropdownOpen = e.currentTarget.classList.contains("show");
@@ -31,20 +35,141 @@ const PtcEllipsisDropdown = class {
     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) ;
+    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;
+      }
+    }
+    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)));

package/dist/esm/ptc-tab-list.entry.js

@@ -1,15 +1,20 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
 
-const ptcTabListCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:var(--color-white);padding:24px 16px 16px 16px;border-radius:4px}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner{padding:24px}}ptc-tab-list.tab-with-banner .tabs-content{padding:16px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p:not(video-js p),ptc-tab-list.tab-with-banner .tabs-content span:not(video-js span),ptc-tab-list.tab-with-banner .tabs-content h1:not(video-js h1),ptc-tab-list.tab-with-banner .tabs-content h2:not(video-js h2),ptc-tab-list.tab-with-banner .tabs-content h3:not(video-js h3),ptc-tab-list.tab-with-banner .tabs-content h4:not(video-js h4),ptc-tab-list.tab-with-banner .tabs-content h5:not(video-js h5),ptc-tab-list.tab-with-banner .tabs-content h6:not(video-js h6),ptc-tab-list.tab-with-banner .tabs-content ul:not(video-js ul),ptc-tab-list.tab-with-banner .tabs-content li:not(video-js li),ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table){color:var(--color-gray-12)}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-content{padding:24px 0 0 0}}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-header{align-items:stretch;padding-left:0rem;width:calc(100% - 44px);display:flex;justify-content:space-between;align-items:center;flex-direction:row;padding-right:0}ptc-tab-list.tab-with-banner tab-header{padding:0 16px;display:flex;align-items:center;flex:1 0 0;align-self:stretch;text-align:center;flex-direction:column;align-items:center}}ptc-tab-list.tab-with-banner .tab-header{padding:0 0 1rem 0}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px;white-space:normal;height:100%;align-content:center;transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}ptc-tab-list.tab-with-banner .tab-header:hover{color:var(--color-gray-10)}}@media (min-width: 1080px){ptc-tab-list.tab-with-banner .tab-header{min-width:230px}}@media only screen and (min-width: 1200px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px}}@media only screen and (min-width: 1440px){ptc-tab-list.tab-with-banner .tab-header{min-width:175px}}ptc-tab-list.tab-with-banner .tabs-header-container{display:flex}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px;min-height:300px}.ellipsis-btn{display:none}@media only screen and (min-width: 768px){.ellipsis-btn.default{position:absolute;top:auto;right:0;bottom:9px}}@media only screen and (min-width: 1440px){.ellipsis-btn.default{bottom:15px}}@media only screen and (min-width: 1440px){.ellipsis-btn{bottom:15px}}.ellipsis-btn.active{display:block}tab-header{padding-right:48px}";
+const ptcTabListCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:var(--color-white);padding:24px 16px 16px 16px;border-radius:4px}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner{padding:24px}}ptc-tab-list.tab-with-banner .tabs-content{padding:16px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p:not(video-js p),ptc-tab-list.tab-with-banner .tabs-content span:not(video-js span),ptc-tab-list.tab-with-banner .tabs-content h1:not(video-js h1),ptc-tab-list.tab-with-banner .tabs-content h2:not(video-js h2),ptc-tab-list.tab-with-banner .tabs-content h3:not(video-js h3),ptc-tab-list.tab-with-banner .tabs-content h4:not(video-js h4),ptc-tab-list.tab-with-banner .tabs-content h5:not(video-js h5),ptc-tab-list.tab-with-banner .tabs-content h6:not(video-js h6),ptc-tab-list.tab-with-banner .tabs-content ul:not(video-js ul),ptc-tab-list.tab-with-banner .tabs-content li:not(video-js li),ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table){color:var(--color-gray-12)}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-content{padding:24px 0 0 0}}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tabs-header{align-items:stretch;padding-left:0rem;width:calc(100% - 44px);display:flex;justify-content:space-between;align-items:center;flex-direction:row;padding-right:0}ptc-tab-list.tab-with-banner tab-header{padding:0 16px;display:flex;align-items:center;flex:1 0 0;align-self:stretch;text-align:center;flex-direction:column;align-items:center}}ptc-tab-list.tab-with-banner .tab-header{padding:0 0 1rem 0}@media only screen and (min-width: 992px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px;white-space:normal;height:100%;align-content:center;transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}ptc-tab-list.tab-with-banner .tab-header:hover{color:var(--color-gray-10)}}@media (min-width: 1080px){ptc-tab-list.tab-with-banner .tab-header{min-width:230px}}@media only screen and (min-width: 1200px){ptc-tab-list.tab-with-banner .tab-header{min-width:200px}}@media only screen and (min-width: 1440px){ptc-tab-list.tab-with-banner .tab-header{min-width:175px}}ptc-tab-list.tab-with-banner .tabs-header-container{display:flex}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px;min-height:300px}.ellipsis-btn{display:none}@media only screen and (min-width: 768px){.ellipsis-btn.default{position:absolute;top:auto;right:0;bottom:9px}}@media only screen and (min-width: 1440px){.ellipsis-btn.default{bottom:15px}}@media only screen and (min-width: 1440px){.ellipsis-btn{bottom:15px}}.ellipsis-btn.active{display:inline-block}.ellipsis-btn:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}tab-header{padding-right:48px}";
 
 const PtcTabList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.tabChange = createEvent(this, "tabChange", 7);
+    this.escClicked = createEvent(this, "escClicked", 7);
     this.type = undefined;
     this.isMobile = undefined;
     this.isMobileTabWithBanner = undefined;
     this.selectedValue = undefined;
+    this.dropdownItemsCount = 0;
+  }
+  closeDropdown() {
+    this.escClicked.emit();
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
@@ -20,6 +25,14 @@ const PtcTabList = class {
     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;
@@ -27,6 +40,14 @@ const PtcTabList = class {
       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');
         }
       });
     });
@@ -74,6 +95,7 @@ const PtcTabList = class {
     if (activateDropDown) {
       dropdown.classList.add('active');
       dropdown.dataItems = hiddenTabs.reverse();
+      this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
       dropdown.classList.remove('active');
@@ -94,7 +116,7 @@ const PtcTabList = class {
       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'));
@@ -120,6 +142,92 @@ const PtcTabList = class {
         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;

package/dist/esm/ptc-value-led-layout.entry.js

@@ -50,12 +50,13 @@ const PtcValueLedLayout = class {
       }
     });
   }
-  handleScroll() {
-    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
-    if (activeListItem) {
-      activeListItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-    }
-  }
+  // @Listen('scroll', { target: 'window' })
+  // handleScroll() {
+  //   const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+  //   if (activeListItem) {
+  //     activeListItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+  //   }
+  // }
   handleWheel( /*event: WheelEvent*/) {
     //console.log(event);
     this.setActiveItem();