fix(atomic): add separate part name for active tab (#4868)

This PR adds distinct part names for active tab button and active tab
button container. This makes it possible to style them differently from
other buttons.

https://coveord.atlassian.net/browse/CDX-1604

packages/atomic/src/components/common/tab-manager/tab-button.tsx

@@ -40,11 +40,11 @@ export class AtomicTabButton {
         class={`${this.activeTabClass}`}
         aria-current={this.active ? 'true' : 'false'}
         aria-label={'tab for ' + this.label}
-        part="button-container"
+        part={'button-container' + (this.active ? '-active' : '')}
       >
         <Button
           class={`w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`}
-          part="tab-button"
+          part={'tab-button' + (this.active ? '-active' : '')}
           onClick={this.select}
           style="text-transparent"
         >

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

@@ -18,7 +18,9 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
  * individual tab within the manager.
  *
  * @part button-container - The container for the tab button.
- * @part button - The tab button.
+ * @part button-container-active - The container for the active tab button.
+ * @part tab-button - The tab button.
+ * @part tab-button-active - The container for the active tab button.
  * @part dropdown-area - The dropdown area.
  * @part tab-area - The tab area.
  * @slot default