reset redundant files

Author: alionazherdetska

packages/components/src/components/post-tab-header/post-tab-header.tsx

@@ -4,7 +4,7 @@ import { checkRequiredAndType } from '@/utils';
 import { nanoid } from 'nanoid';
 
 /**
- * @slot default - Slot for the content of the tab header. Can contain text or an <a> element for navigation mode.
+ * @slot default - Slot for the content of the tab header.
  */
 
 @Component({
@@ -16,53 +16,34 @@ export class PostTabHeader {
   @Element() host: HTMLPostTabHeaderElement;
 
   @State() tabId: string;
-  @State() isNavigationMode = false;
 
   /**
-   * The name of the tab, used to associate it with a tab panel or identify the active tab in navigation mode.
+   * The name of the panel controlled by the tab header.
    */
-  @Prop({ reflect: true }) readonly name!: string;
+  @Prop({ reflect: true }) readonly panel!: string;
 
-  @Watch('name')
-  validateName() {
-    checkRequiredAndType(this, 'name', 'string');
+  @Watch('panel')
+  validateFor() {
+    checkRequiredAndType(this, 'panel', 'string');
   }
 
   componentWillLoad() {
     this.tabId = `tab-${this.host.id || nanoid(6)}`;
-    this.checkNavigationMode();
-  }
-
-  componentDidLoad() {
-    // Re-check navigation mode after content is loaded
-    this.checkNavigationMode();
-  }
-
-  private checkNavigationMode() {
-    const hasAnchor = this.host.querySelector('a') !== null;
-    this.isNavigationMode = hasAnchor;
-    
-    // Expose mode to parent post-tabs via data-attribute (as per requirements)
-    this.host.setAttribute('data-navigation-mode', this.isNavigationMode.toString());
   }
 
   render() {
-    const role = this.isNavigationMode ? undefined : 'tab';
-    const ariaSelected = this.isNavigationMode ? undefined : 'false';
-    const tabindex = this.isNavigationMode ? undefined : '-1';
-    
     return (
       <Host
         id={this.tabId}
-        role={role}
+        role="tab"
         data-version={version}
-        aria-selected={ariaSelected}
-        tabindex={tabindex}
+        aria-selected="false"
+        tabindex="-1"
         class="tab-title"
         slot="tabs"
       >
         <slot />
       </Host>
     );
   }
-}
+}

packages/components/src/components/post-tab-panel/post-tab-panel.tsx

@@ -18,16 +18,16 @@ export class PostTabPanel {
   @State() panelId: string;
 
   /**
-   * The name of the tab that this panel is associated with.
+   * The name of the panel, used to associate it with a tab header.
    */
-  @Prop({ reflect: true }) readonly for!: string;
+  @Prop({ reflect: true }) readonly name!: string;
 
-  @Watch('for')
-  validateFor() {
-    checkRequiredAndType(this, 'for', 'string');
+  @Watch('name')
+  validateName() {
+    checkRequiredAndType(this, 'name', 'string');
   }
   componentWillLoad() {
-    this.validateFor();
+    this.validateName();
     // get the id set on the host element or use a random id by default
     this.panelId = `panel-${this.host.id || nanoid(6)}`;
   }
@@ -39,4 +39,4 @@ export class PostTabPanel {
       </Host>
     );
   }
-}
+}

packages/components/src/components/post-tabs/post-tabs.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
 import { version } from '@root/package.json';
 import { fadeIn, fadeOut } from '@/animations';
 import { componentOnReady } from '@/utils';
@@ -16,34 +16,26 @@ import { componentOnReady } from '@/utils';
   shadow: true,
 })
 export class PostTabs {
-  private currentActiveTab: HTMLPostTabHeaderElement;
+  private activeTab: HTMLPostTabHeaderElement;
   private showing: Animation;
   private hiding: Animation;
   private isLoaded = false;
 
-  @State() isNavigationMode: boolean = false;
-
   private get tabs(): HTMLPostTabHeaderElement[] {
     return Array.from(
       this.host.querySelectorAll<HTMLPostTabHeaderElement>('post-tab-header'),
     ).filter(tab => tab.closest('post-tabs') === this.host);
   }
 
-  private get panels(): HTMLPostTabPanelElement[] {
-    return Array.from(
-      this.host.querySelectorAll<HTMLPostTabPanelElement>('post-tab-panel'),
-    ).filter(panel => panel.closest('post-tabs') === this.host);
-  }
-
   @Element() host: HTMLPostTabsElement;
 
   /**
-   * The name of the tab that is initially active.
-   * If not specified, it defaults to the first tab.
+   * The name of the panel that is initially shown.
+   * If not specified, it defaults to the panel associated with the first tab.
    *
    * **Changing this value after initialization has no effect.**
    */
-  @Prop() readonly activeTab?: string;
+  @Prop() readonly activePanel?: HTMLPostTabPanelElement['name'];
 
   /**
    * When set to true, this property allows the tabs container to span the
@@ -53,78 +45,45 @@ export class PostTabs {
 
   /**
    * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
-   * The payload is the name of the newly active tab.
+   * The payload is the name of the newly shown panel.
    */
   @Event() postChange: EventEmitter<string>;
 
   componentDidLoad() {
-    this.detectMode();
     this.moveMisplacedTabs();
     this.enableTabs();
 
-    const initiallyActiveTab = this.activeTab || this.tabs[0]?.getAttribute('name');
-    void this.show(initiallyActiveTab);
+    const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
+    void this.show(initiallyActivePanel);
 
     this.isLoaded = true;
   }
 
-  private detectMode() {
-    // Check if any tab headers contain anchor elements (via data-attribute exposure)
-    const hasNavigationTabs = this.tabs.some(tab => 
-      tab.getAttribute('data-navigation-mode') === 'true'
-    );
-    
-    // Check if there are any panels
-    const hasPanels = this.panels.length > 0;
-    
-    // Validate for mixed mode (error condition)
-    if (hasNavigationTabs && hasPanels) {
-      console.error('PostTabs: Mixed mode detected. Cannot use both navigation mode (anchor elements) and panel mode (post-tab-panel elements) at the same time.');
-      return;
-    }
-    
-    this.isNavigationMode = hasNavigationTabs;
-  }
-
   /**
    * Shows the panel with the given name and selects its associated tab.
-   * In navigation mode, only updates the active tab state.
    * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
    */
   @Method()
-  async show(tabName: string) {
+  async show(panelName: string) {
     // do nothing if the tab is already active
-    if (tabName === this.currentActiveTab?.getAttribute('name')) {
+    if (panelName === this.activeTab?.panel) {
       return;
     }
 
-    const previousTab = this.currentActiveTab;
+    const previousTab = this.activeTab;
     const newTab: HTMLPostTabHeaderElement = this.host.querySelector(
-      `post-tab-header[name=${tabName}]`,
+      `post-tab-header[panel=${panelName}]`,
     );
-    
-    if (!newTab) {
-      console.warn(`PostTabs: No tab found with name "${tabName}"`);
-      return;
-    }
-    
-    await this.activateTab(newTab);
+    this.activateTab(newTab);
 
-    // In navigation mode, we don't need to handle panels
-    if (this.isNavigationMode) {
-      if (this.isLoaded) this.postChange.emit(this.currentActiveTab.getAttribute('name'));
-      return;
-    }
-
-    // Panel mode logic
     // if a panel is currently being displayed, remove it from the view and complete the associated animation
     if (this.showing) {
       this.showing.effect['target'].style.display = 'none';
       this.showing.finish();
     }
 
     // hide the currently visible panel only if no other animation is running
-    if (previousTab && !this.showing && !this.hiding) this.hidePanel(previousTab.getAttribute('name'));
+    if (previousTab && !this.showing && !this.hiding) this.hidePanel(previousTab.panel);
 
     // wait for any hiding animation to complete before showing the selected tab
     if (this.hiding) await this.hiding.finished;
@@ -134,7 +93,7 @@ export class PostTabs {
     // wait for any display animation to complete for the returned promise to fully resolve
     if (this.showing) await this.showing.finished;
 
-    if (this.isLoaded) this.postChange.emit(this.currentActiveTab.getAttribute('name'));
+    if (this.isLoaded) this.postChange.emit(this.activeTab.panel);
   }
 
   private moveMisplacedTabs() {
@@ -152,29 +111,21 @@ export class PostTabs {
     this.tabs.forEach(async tab => {
       await componentOnReady(tab);
 
-      // Skip tab setup in navigation mode - anchors handle their own navigation
-      if (this.isNavigationMode) {
-        return;
-      }
-
-      // Panel mode: set up tab-panel relationships
       // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
       if (tab.getAttribute('aria-controls')) return;
 
-      const tabPanel = this.getPanel(tab.getAttribute('name'));
-      if (tabPanel) {
-        tab.setAttribute('aria-controls', tabPanel.id);
-        tabPanel.setAttribute('aria-labelledby', tab.id);
-      }
+      const tabPanel = this.getPanel(tab.panel);
+      tab.setAttribute('aria-controls', tabPanel.id);
+      tabPanel.setAttribute('aria-labelledby', tab.id);
 
       tab.addEventListener('click', () => {
-        void this.show(tab.getAttribute('name'));
+        void this.show(tab.panel);
       });
 
       tab.addEventListener('keydown', (e: KeyboardEvent) => {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
-          void this.show(tab.getAttribute('name'));
+          void this.show(tab.panel);
         }
       });
 
@@ -184,37 +135,23 @@ export class PostTabs {
     });
 
     // if the currently active tab was removed from the DOM then select the first one
-    if (this.currentActiveTab && !this.currentActiveTab.isConnected) {
-      void this.show(this.tabs[0]?.getAttribute('name'));
+    if (this.activeTab && !this.activeTab.isConnected) {
+      void this.show(this.tabs[0]?.panel);
     }
   }
 
-  private async activateTab(tab: HTMLPostTabHeaderElement) {
-    // Deactivate previous tab
-    if (this.currentActiveTab) {
-      this.currentActiveTab.setAttribute('aria-selected', 'false');
-      this.currentActiveTab.setAttribute('tabindex', '-1');
-      this.currentActiveTab.classList.remove('active');
-      
-      // Remove aria-current from previous tab's anchor (navigation mode)
-      const previousAnchor = this.currentActiveTab.querySelector('a');
-      if (previousAnchor) {
-        previousAnchor.removeAttribute('aria-current');
-      }
+  private activateTab(tab: HTMLPostTabHeaderElement) {
+    if (this.activeTab) {
+      this.activeTab.setAttribute('aria-selected', 'false');
+      this.activeTab.setAttribute('tabindex', '-1');
+      this.activeTab.classList.remove('active');
     }
 
-    // Activate new tab
     tab.setAttribute('aria-selected', 'true');
     tab.setAttribute('tabindex', '0');
     tab.classList.add('active');
-    
-    // Set aria-current on new tab's anchor (navigation mode)
-    const newAnchor = tab.querySelector('a');
-    if (newAnchor) {
-      newAnchor.setAttribute('aria-current', 'page');
-    }
 
-    this.currentActiveTab = tab;
+    this.activeTab = tab;
   }
 
   private hidePanel(panelName: HTMLPostTabPanelElement['name']) {
@@ -230,7 +167,7 @@ export class PostTabs {
   }
 
   private showSelectedPanel() {
-    const panel = this.getPanel(this.currentActiveTab.getAttribute('name'));
+    const panel = this.getPanel(this.activeTab.panel);
     panel.style.display = 'block';
 
     // prevent the initially selected panel from fading in
@@ -243,7 +180,7 @@ export class PostTabs {
   }
 
   private getPanel(name: string): HTMLPostTabPanelElement {
-    return this.host.querySelector(`post-tab-panel[for=${name}]`);
+    return this.host.querySelector(`post-tab-panel[name=${name}]`);
   }
 
   private navigateTabs(tab: HTMLPostTabHeaderElement, key: 'ArrowRight' | 'ArrowLeft') {
@@ -262,28 +199,17 @@ export class PostTabs {
   }
 
   render() {
-    const tabsRole = this.isNavigationMode ? undefined : 'tablist';
-    const ariaLabel = this.isNavigationMode ? 'Tabs navigation' : undefined;
-
     return (
       <Host data-version={version}>
         <div class="tabs-wrapper" part="tabs">
-          {this.isNavigationMode ? (
-            <nav class="tabs" role={tabsRole} aria-label={ariaLabel}>
-              <slot name="tabs" onSlotchange={() => this.enableTabs()} />
-            </nav>
-          ) : (
-            <div class="tabs" role={tabsRole} aria-label={ariaLabel}>
-              <slot name="tabs" onSlotchange={() => this.enableTabs()} />
-            </div>
-          )}
-        </div>
-        {!this.isNavigationMode && (
-          <div class="tab-content" part="content">
-            <slot onSlotchange={() => this.moveMisplacedTabs()} />
+          <div class="tabs" role="tablist">
+            <slot name="tabs" onSlotchange={() => this.enableTabs()} />
           </div>
-        )}
+        </div>
+        <div class="tab-content" part="content">
+          <slot onSlotchange={() => this.moveMisplacedTabs()} />
+        </div>
       </Host>
     );
   }
-}
+}