@ptcwebops/ptcw-design 5.9.0 → 5.9.1

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

@@ -4,6 +4,9 @@ export class TabContent {
     this.name = undefined;
     this.isSelected = false;
   }
+  componentWillLoad() {
+    this.parentReference = this.el.closest('ptc-tab-list');
+  }
   async getChild() {
     return {
       select: this.select.bind(this),
@@ -17,12 +20,18 @@ export class TabContent {
   select() {
     this.isSelected = true;
   }
+  beforeMatch() {
+    this.parentReference.toggleTabGroup(this.name);
+  }
   render() {
     const classes = {
       'tab-content': true,
       'tab-content-selected': this.isSelected
     };
-    return (h("div", { class: classes }, h("slot", null)));
+    const hidden = (this.isSelected ? false : 'until-found');
+    return (
+    //@ts-ignore
+    h("div", { class: classes, hidden: hidden, onBeforeMatch: () => { this.beforeMatch(); } }, h("slot", null)));
   }
   static get is() { return "tab-content"; }
   static get originalStyleUrls() {
@@ -81,4 +90,5 @@ export class TabContent {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

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

@@ -93,6 +93,18 @@ ptc-link, ptc-square-card,
   color: var(--color-gray-10);
 }
 
+tab-header:focus-visible {
+  outline: none;
+}
+tab-header:focus-visible .tab-header {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  transition: none;
+}
+tab-header:focus-visible .tab-header::after {
+  background-color: var(--keyboard-nav-outline);
+}
+
 .tab-header-selected {
   color: var(--color-gray-10);
   font-weight: var(--ptc-font-weight-bold);

package/dist/collection/components/tab-header/tab-header.js

@@ -51,6 +51,11 @@ export class TabHeader {
   }
   componentDidLoad() {
     this.updateMaxLength(window.innerWidth);
+    this.el.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        this.onClick();
+      }
+    });
   }
   render() {
     const classes = {
@@ -171,6 +176,7 @@ export class TabHeader {
       }
     };
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",