feat(atomic): migrate atomic-tab-manager from Stencil to Lit

- Create new Lit component (atomic-tab-manager.ts)
- Rename original Stencil component with stencil- prefix
- Fix import paths after moving from tabs/ subdirectory
- Add component exports to search/index.ts and lazy-index.ts
- Convert Tailwind @apply directives to plain CSS for compatibility

Co-authored-by: alexprudhomme <78121423+alexprudhomme@users.noreply.github.com>

Author: Copilot

packages/atomic/src/components/search/atomic-tab-manager/atomic-tab-manager.pcss

@@ -0,0 +1,15 @@
+@import '../../../global/global.pcss';
+
+:host {
+  atomic-tab-bar::part(popover-button) {
+    @apply m-0 px-2 pb-1 text-left text-xl font-normal text-black sm:px-6;
+  }
+
+  atomic-tab-bar::part(value-label) {
+    @apply font-normal;
+  }
+
+  ::part(popover-tab) {
+    @apply font-normal;
+  }
+}

packages/atomic/src/components/search/atomic-tab-manager/atomic-tab-manager.ts

@@ -49,15 +49,30 @@ export class AtomicTabManager
 {
   static styles: CSSResultGroup = css`
     atomic-tab-bar::part(popover-button) {
-      @apply m-0 px-2 pb-1 text-left text-xl font-normal text-black sm:px-6;
+      margin: 0;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      padding-bottom: 0.25rem;
+      text-align: left;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 400;
+      color: black;
+    }
+
+    @media (min-width: 640px) {
+      atomic-tab-bar::part(popover-button) {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
     }
 
     atomic-tab-bar::part(value-label) {
-      @apply font-normal;
+      font-weight: 400;
     }
 
     ::part(popover-tab) {
-      @apply font-normal;
+      font-weight: 400;
     }
   `;
 
@@ -145,9 +160,3 @@ export class AtomicTabManager
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'atomic-tab-manager': AtomicTabManager;
-  }
-}

packages/atomic/src/components/search/atomic-tab-manager/stencil-atomic-tab-manager.tsx

@@ -9,8 +9,8 @@ import {Component, h, Element, State, Prop, Host} from '@stencil/core';
 import {
   BindStateToController,
   InitializeBindings,
-} from '../../../../utils/initialization-utils';
-import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
+} from '../../../utils/initialization-utils';
+import {Bindings} from '../atomic-search-interface/atomic-search-interface';
 
 /**
  * The `atomic-tab-manager` component manages a collection of tabs,

packages/atomic/src/components/search/index.ts

@@ -39,4 +39,5 @@ export {AtomicSearchLayout} from './atomic-search-layout/atomic-search-layout.js
 export {AtomicSegmentedFacetScrollable} from './atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.js';
 export {AtomicSortDropdown} from './atomic-sort-dropdown/atomic-sort-dropdown.js';
 export {AtomicTab} from './atomic-tab/atomic-tab.js';
+export {AtomicTabManager} from './atomic-tab-manager/atomic-tab-manager.js';
 export {AtomicText} from './atomic-text/atomic-text.js';

packages/atomic/src/components/search/lazy-index.ts

@@ -107,6 +107,8 @@ export default {
   'atomic-sort-dropdown': async () =>
     await import('./atomic-sort-dropdown/atomic-sort-dropdown.js'),
   'atomic-tab': async () => await import('./atomic-tab/atomic-tab.js'),
+  'atomic-tab-manager': async () =>
+    await import('./atomic-tab-manager/atomic-tab-manager.js'),
   'atomic-text': async () => await import('./atomic-text/atomic-text.js'),
 } as Record<string, () => Promise<unknown>>;
 

packages/atomic/src/utils/custom-element-tags.ts

@@ -108,6 +108,7 @@ export const ATOMIC_CUSTOM_ELEMENT_TAGS = new Set<string>([
   'atomic-segmented-facet-scrollable',
   'atomic-sort-dropdown',
   'atomic-tab',
+  'atomic-tab-manager',
   'atomic-text',
 ]);