refactor(atomic): migrate tab-button to Lit functional component

[Copilot]

Migration Plan: atomic-tab-button to Lit Functional Component

Migration Type: Functional Component Migration

Analysis

• atomic-tab-button is currently a Stencil component (class-based with @Component decorator)
• Issue requests refactoring into a Lit functional component
• Pattern matches other migrations like Button → renderButton
• Component uses Stencil Button functional component internally
• Currently used in atomic-tab-manager (still Stencil)

Migration Steps

• Analyze current implementation and dependencies
• Rename original Stencil file to stencil-tab-button.tsx
• Create new Lit functional component tab-button.ts with renderTabButton
• Implement functional component using Lit directives and Tailwind CSS
• Create comprehensive unit tests in tab-button.spec.ts
• Update tests to use renderFunctionFixture helper (PR feedback)
• Run linting (passed)
• Run unit tests (blocked by pre-existing build issues)
• Build the package (blocked by pre-existing Tailwind CSS errors)

Implementation Details

• Created renderTabButton functional component with proper TypeScript types
• Used tw and multiClassMap for Tailwind CSS classes
• Preserved all functionality from Stencil version:
  • Active/inactive states
  • Proper aria attributes (role, aria-current, aria-label)
  • Shadow parts (button-container, button-container-active, tab-button, tab-button-active)
  • Click handlers
  • Responsive styling
• Created comprehensive unit tests covering:
  • Basic rendering
  • Active/inactive states
  • ARIA attributes
  • Shadow parts
  • Click interactions
  • Styling classes
• Updated tests to use renderFunctionFixture helper (standard pattern for functional component tests)

Changes Made

Commit 1: Initial migration from Stencil to Lit functional component
Commit 2: Updated tests to use renderFunctionFixture helper per PR feedback

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate atomic-tab-button</issue_title>
<issue_description>

Jira Issue: KIT-5024

Type: User Story
Status: New
Priority: Medium

---

Description

Refactor into a Lit functional component.

Comments on the Issue (you are @copilot in this section)

Custom agent used: StencilToLitMigrationV2
Specialized agent for migrating Atomic Stencil code to Lit with visual regression testing

• Fixes Migrate atomic-tab-button #6377
  KIT-5024

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR migrates atomic-tab-button from a Stencil class-based component to a Lit functional component, following the pattern used in other recent migrations. The original Stencil component is renamed to stencil-tab-button.tsx for backward compatibility, while a new renderTabButton functional component is created using Lit directives and Tailwind CSS.

Key Changes:

• Creates functional component with TypeScript types and proper Tailwind CSS styling
• Preserves all functionality including active/inactive states, ARIA attributes, shadow parts, and click handlers
• Implements comprehensive unit tests using renderFunctionFixture helper

Issues Identified:

• Incorrect functional component type (accepts children but doesn't use them)
• Accessibility concerns with ARIA attributes and roles
• Test coverage gaps related to implementation issues

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 8 comments.

File	Description
tab-button.ts	New Lit functional component implementation with Tailwind CSS styling
tab-button.spec.ts	Comprehensive unit tests for the functional component
stencil-tab-button.tsx	Original Stencil component renamed for backward compatibility

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Missing import for ifDefined directive. The suggestion in the previous comments to use ifDefined(props.active ? 'true' : undefined) for the aria-current attribute requires importing this directive from lit/directives/if-defined.js.

Add to imports:

import {ifDefined} from 'lit/directives/if-defined.js';

This follows the pattern used in button.ts and other functional components.

[fbeaudoincoveo]

My overall assessment: we should fix the component type right now. It doesn't deal with children, so it should not be a FunctionalComponentWithChildren.

We should also do the ifDefined thing with aria-selected and use the correct optional attribute pattern.

The rest of the accessibility-related comments seem correct after verification, but I would personally defer and do them in a subsequent tab accessibility improvement PR.

[fbeaudoincoveo]

(my conclusion is "request changes")