Migrate atomic-search-box to Lit

[Copilot]

✅ Checklist

• 🧪 The component is unit tested
• 🧪 The component includes E2E tests
• 🗑️ Old Cypress tests exclusive to the component are removed
• 📖 The component is documented in storybook with an .mdx file
• ♿ The component complies with the Web Content Accessibility Guidelines.
• 🌐 All strings intended for humans or assistive technology must be localized with i18n.
• 📦 The Lit component is exported in the appropriate index.ts and lazy-index.ts files.
• 🎨 CSS parts are documented still accessible.
• 🦥 Slotted Content, public methods and properties are documented
• 🔄 The component outputs the same Angular output as before with Stencil
• 🏷️ The component declares the component type in the HTMLElementTagNameMap

Description

This PR migrates the atomic-search-box component from Stencil to Lit framework, following the same patterns used in atomic-commerce-search-box.

Component Migration

Converted from Stencil to Lit:

• ✅ Deleted old Stencil component file (atomic-search-box.tsx)
• ✅ Changed @Component to @customElement decorator
• ✅ Extended LitElement instead of implementing Stencil component
• ✅ Converted @Prop to @property with proper configuration
• ✅ Converted @State to @state
• ✅ Converted @Event to standard CustomEvent dispatching
• ✅ Converted @Listen to addEventListener in connectedCallback
• ✅ Converted @AriaLiveRegion to AriaLiveRegionController
• ✅ Converted @BindStateToController to @bindStateToController decorator
• ✅ Used @bindings() decorator for bindings initialization
• ✅ Used @withTailwindStyles decorator
• ✅ Added @bindingGuard() and @errorGuard() decorators on render
• ✅ Converted lifecycle methods (componentWillUpdate → willUpdate)
• ✅ Converted JSX templates to Lit html`` templates
• ✅ Used Lit directives (classMap, ref)
• ✅ Used functional components with double invocation pattern
• ✅ All imports use @/* path aliases
• ✅ Added global HTMLElementTagNameMap declaration
• ✅ Exported in index.ts and lazy-index.ts

Unit Tests

Comprehensive Vitest test coverage:

• ✅ Component initialization and controller setup (both regular and standalone modes)
• ✅ Props validation (redirectionUrl, disableSearch, minimumQueryLength, numberOfQueries, clearFilters, enableQuerySyntax)
• ✅ Rendering (spacer, wrapper, textArea, suggestions, clear/submit buttons)
• ✅ Event listeners (register, focusout)
• ✅ Accessibility (ARIA labels, screen reader announcements)
• ✅ User interactions (focus, clear, submit)
• ✅ State management (disabled states, suggestions display)

Test Fixtures Created:

• ✅ buildFakeSearchBox - Mock search box controller
• ✅ buildFakeStandaloneSearchBox - Mock standalone search box controller
• ✅ fake-atomic-search-box-suggestions - Test component for suggestions

Storybook Stories

Created comprehensive stories with MSW API mocking:

• ✅ Default - Basic search box
• ✅ RichSearchBox - With suggestions, recent queries and instant results
• ✅ StandaloneSearchBox - Redirects to search results page
• ✅ WithSuggestions - Custom mocked suggestions (5 items)
• ✅ WithSuggestionsAndRecentQueries - Mocked suggestions (10 items) + localStorage recent queries
• ✅ WithNoSuggestions - Empty state testing

E2E Tests

• ✅ Updated page-object to use lit-base-page-object instead of Stencil base-page-object
• ✅ Existing Playwright E2E tests maintained for happy path and accessibility coverage

Documentation

Created MDX documentation following commerce pattern:

• ✅ Component description and placement within atomic-search-interface
• ✅ Usage examples for default child components (recent-queries, query-suggestions)
• ✅ Configuration examples for instant results
• ✅ Standalone search box documentation with redirection usage

Quality Verification

• ✅ Linting passes
• ✅ Build succeeds
• ✅ All functionality preserved from Stencil version
• ✅ Accessibility maintained (WCAG 2.2)
• ✅ All Lit functional component dependencies exist (search-box-wrapper, search-text-area, submit-button, suggestion-manager)

Fixes #6527

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[DXUI]: Migrate atomic-search-box</issue_title>
<issue_description>### Task Description

We need to migrate the Atomic-Search-Box to Lit

Acceptance Criteria

• The Atomic-Search-Box is using Lit exclusivel-ish (there is a suggestion binding for Stencil that needs to stays till v4)

Technical Notes

No response

Jira Ticket

No response</issue_description>

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

Custom agent used: stencil-to-lit-migration-agent
Specialized agent for migrating Atomic Stencil code to Lit (components, functional components, and utils)

• Fixes [DXUI]: Migrate atomic-search-box #6527

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[alexprudhomme]

@copilot You are missing quite a few things :

1. You must delete the old stencil component
2. You must add/adjust the stories file
3. You must add/adjust the mdx file
4. You must add/adjust the e2e tests

Use the commerce search box as an example for all of those. Thanks

[Copilot]

@copilot You are missing quite a few things :

1. You must delete the old stencil component...

All requested changes have been completed in commit c0006bd:

1. ✅ Deleted the old Stencil component (atomic-search-box.tsx)
2. ✅ Updated the stories file with MSW API mocking - added 6 stories including Default, RichSearchBox, StandaloneSearchBox, WithSuggestions, WithSuggestionsAndRecentQueries, and WithNoSuggestions
3. ✅ Added MDX documentation file following the commerce search box pattern
4. ✅ Updated E2E page-object to use lit-base-page-object instead of the Stencil base

All changes follow the atomic-commerce-search-box pattern as the reference.