@internetarchive/ia-topnav 1.4.1-alpha-webdev8259.10 → 1.4.1

package/src/ia-topnav.ts

@@ -11,9 +11,11 @@ import {
   IATopNavSecondIdentitySlotMode,
 } from './models';
 import './primary-nav';
+import './search-menu';
 import './signed-out-dropdown';
 import iaTopNavCSS from './styles/ia-topnav';
 import './user-menu';
+import KeyboardNavigation from './lib/keyboard-navigation';
 
 @customElement('ia-topnav')
 export class IATopNav extends LitElement {
@@ -41,6 +43,10 @@ export class IATopNav extends LitElement {
 
   @property({ type: String }) screenName: string = '';
 
+  @property({ type: String }) searchIn = '';
+
+  @property({ type: String }) searchQuery = '';
+
   @property({ type: String }) selectedMenuOption = '';
 
   @property({ type: String }) username: string = '';
@@ -57,10 +63,10 @@ export class IATopNav extends LitElement {
   };
 
   @state() private menus: IATopNavMenuConfig = buildTopNavMenus();
+  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;
 
-  private boundHandleKeydown = this.handleDocumentKeydown.bind(this);
-
-  private boundHandleClick = this.handleDocumentClick.bind(this);
+  private keyboardNavigation?: KeyboardNavigation;
 
   private get normalizedBaseHost() {
     return !this.localLinks ? this.baseHost : '';
@@ -80,32 +86,37 @@ export class IATopNav extends LitElement {
     ) {
       this.menuSetup();
     }
-  }
 
-  firstUpdated() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-    document.addEventListener('click', this.boundHandleClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-    document.removeEventListener('click', this.boundHandleClick);
-  }
-
-  private handleDocumentKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      this.openMenu = '';
-      this.mediaSliderOpen = false;
+    if (this.openMenu === 'search') {
+      const targetElement =
+        this.renderRoot.querySelector('search-menu')?.shadowRoot;
+      if (targetElement) {
+        this.keyboardNavigation = new KeyboardNavigation(
+          targetElement as unknown as HTMLElement,
+          this.openMenu,
+        );
+
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);
+        this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;
+      }
     }
   }
 
-  private handleDocumentClick(e: MouseEvent) {
-    if (!this.openMenu) return;
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      this.closeMenus();
-    }
+  firstUpdated() {
+    // close open menu on `esc` click
+    document.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key === 'Escape') {
+          this.openMenu = '';
+          this.mediaSliderOpen = false;
+        }
+      },
+      false,
+    );
   }
 
   menuSetup() {
@@ -128,6 +139,23 @@ export class IATopNav extends LitElement {
     this.closeMediaSlider();
   }
 
+  navSearchBlurEvent(e: CustomEvent) {
+    if (this.previousKeydownListener) {
+      this.removeEventListener('keydown', this.previousKeydownListener);
+    }
+
+    const isUploadButton = e.detail?.isUploadButton;
+    if (!isUploadButton) {
+      const searchMenu = this.renderRoot.querySelector(
+        'search-menu',
+      ) as HTMLElement;
+      const elements = this.keyboardNavigation?.getFocusableElements();
+      if (searchMenu && elements?.length) {
+        elements[0].focus();
+      }
+    }
+  }
+
   openMediaSlider() {
     this.mediaSliderOpen = true;
   }
@@ -142,6 +170,10 @@ export class IATopNav extends LitElement {
     this.closeMediaSlider();
   }
 
+  searchInChanged(e: CustomEvent) {
+    this.searchIn = e.detail.searchIn;
+  }
+
   trackClick(e: CustomEvent) {
     this.dispatchEvent(
       new CustomEvent('analyticsClick', {
@@ -171,6 +203,10 @@ export class IATopNav extends LitElement {
     this.openMediaSlider();
   }
 
+  get searchMenuOpened() {
+    return this.openMenu === 'search';
+  }
+
   get signedOutOpened() {
     return this.openMenu === 'login';
   }
@@ -179,6 +215,10 @@ export class IATopNav extends LitElement {
     return this.openMenu === 'user';
   }
 
+  get searchMenuTabIndex() {
+    return this.searchMenuOpened ? '' : '-1';
+  }
+
   get userMenuTabIndex() {
     return this.userMenuOpened ? '' : '-1';
   }
@@ -251,10 +291,6 @@ export class IATopNav extends LitElement {
     return this.secondIdentitySlotMode === 'allow';
   }
 
-  get searchSlot() {
-    return html`<slot name="search" slot="search"></slot>`;
-  }
-
   get secondLogoSlot() {
     return this.allowSecondaryIcon
       ? html`
@@ -277,6 +313,8 @@ export class IATopNav extends LitElement {
           .config=${this.config}
           .openMenu=${this.openMenu}
           .screenName=${this.screenName}
+          .searchIn=${this.searchIn}
+          .searchQuery=${this.searchQuery}
           .secondIdentitySlotMode=${this.secondIdentitySlotMode}
           .selectedMenuOption=${this.selectedMenuOption}
           .username=${this.username}
@@ -287,8 +325,9 @@ export class IATopNav extends LitElement {
           @trackClick=${this.trackClick}
           @trackSubmit=${this.trackSubmit}
           @menuToggled=${this.menuToggled}
+          @navSearchBlur=${this.navSearchBlurEvent}
         >
-          ${this.secondLogoSlot} ${this.searchSlot}
+          ${this.secondLogoSlot}
         </primary-nav>
         <media-slider
           .baseHost=${this.normalizedBaseHost}
@@ -302,6 +341,16 @@ export class IATopNav extends LitElement {
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}
+      <search-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .openMenu=${this.openMenu}
+        tabindex="${this.searchMenuTabIndex}"
+        ?hideSearch=${this.hideSearch}
+        @searchInChanged=${this.searchInChanged}
+        @trackClick=${this.trackClick}
+        @trackSubmit=${this.trackSubmit}
+      ></search-menu>
       <desktop-subnav
         .baseHost=${this.normalizedBaseHost}
         .menuItems=${this.menus.more.links}

package/src/login-button.ts

@@ -21,7 +21,7 @@ export class LoginButton extends TrackedElement {
   }
 
   get signupPath() {
-    return formatUrl('/account/signup', this.baseHost);
+    return formatUrl('/signup', this.baseHost);
   }
 
   get loginPath() {

package/src/primary-nav.ts

@@ -3,9 +3,11 @@ import TrackedElement from './tracked-element';
 import icons from './assets/img/icons';
 import './assets/img/hamburger';
 import './login-button';
+import './nav-search';
 import './media-menu';
 import logoWordmarkStacked from './assets/img/wordmark-stacked';
 import primaryNavCSS from './styles/primary-nav';
+import locationHandler from './lib/location-handler';
 import formatUrl from './lib/format-url';
 import { customElement, property } from 'lit/decorators.js';
 import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
@@ -19,6 +21,8 @@ export class PrimaryNav extends TrackedElement {
   @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
   @property({ type: String }) openMenu = '';
   @property({ type: String }) screenName = '';
+  @property({ type: String }) searchIn = '';
+  @property({ type: String }) searchQuery = '';
   @property({ type: String })
   secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';
   @property({ type: String }) selectedMenuOption = '';
@@ -162,19 +166,6 @@ export class PrimaryNav extends TrackedElement {
     return this.secondIdentitySlotMode === 'allow';
   }
 
-  /**
-   * The search slot container, rendered between media-menu and
-   * right-side-section so it sits left of the Upload button on desktop.
-   */
-  get searchSlotContainer() {
-    if (this.hideSearch) return nothing;
-    return html`
-      <div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
-        <slot name="search"></slot>
-      </div>
-    `;
-  }
-
   get searchMenu() {
     if (this.hideSearch) return nothing;
 
@@ -186,9 +177,38 @@ export class PrimaryNav extends TrackedElement {
       >
         ${icons.search}
       </button>
+      <nav-search
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .locationHandler=${locationHandler}
+        .open=${this.searchMenuOpen}
+        .openMenu=${this.openMenu}
+        .searchIn=${this.searchIn}
+        .searchQuery=${this.searchQuery}
+        @blur=${this.emitNavSearchBlurEvent}
+      ></nav-search>
     `;
   }
 
+  private emitNavSearchBlurEvent(e: FocusEvent) {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const isUploadButton = relatedTarget?.classList.contains('upload');
+
+    if (isUploadButton) {
+      (this.shadowRoot?.querySelector('a.upload') as HTMLElement).focus();
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('navSearchBlur', {
+        detail: {
+          isUploadButton: !!isUploadButton,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   get mobileDonateHeart() {
     return html`
       <a
@@ -266,7 +286,6 @@ export class PrimaryNav extends TrackedElement {
           .openMenu=${this.openMenu}
           .currentTab=${this.currentTab}
         ></media-menu>
-        ${this.searchSlotContainer}
         <div class="right-side-section">
           ${this.mobileDonateHeart} ${this.userStateTemplate}
           ${this.uploadButtonTemplate} ${this.searchMenu}

package/src/styles/ia-topnav.ts

@@ -24,6 +24,11 @@ export default css`
     --activeButtonBg: var(--grey20);
     --iconFill: var(--grey60);
 
+    --searchActiveBg: var(--grey20);
+    --searchActiveInputBg: var(--white);
+    --searchMenuBg: var(--grey20);
+    --desktopSearchIconFill: var(--grey20);
+
     --mediaMenuBg: var(--grey13);
     --mediaLabelDesktopColor: var(--grey60);
     --activeDesktopMenuIcon: var(--grey28);

package/src/styles/primary-nav.ts

@@ -128,42 +128,6 @@ export default css`
     z-index: 3;
   }
 
-  .search-container {
-    display: none;
-  }
-
-  .search-container.open {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 4rem;
-    bottom: 0;
-    left: 4rem;
-    z-index: 3;
-    padding: 0.5rem;
-    border-radius: 1rem 1rem 0 0;
-    background: var(--primaryNavBg);
-    align-items: center;
-    animation: fade-in 0.2s forwards;
-  }
-
-  .search-container ::slotted(*) {
-    display: block;
-  }
-
-  .search-container slot {
-    width: 100%;
-  }
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
   .upload {
     display: none;
   }
@@ -328,25 +292,6 @@ export default css`
       float: right;
       margin-left: 1rem;
     }
-
-    .search-container,
-    .search-container.open {
-      display: flex;
-      position: static;
-      top: auto;
-      right: auto;
-      bottom: auto;
-      left: auto;
-      align-items: center;
-      padding: 0 0 0 1rem;
-      background: transparent;
-      border-radius: 0;
-      z-index: auto;
-    }
-
-    .search-container slot {
-      width: auto;
-    }
   }
 
   @media (min-width: 990px) {

package/ssl/server.key

@@ -1,28 +1,28 @@
------BEGIN PRIVATE KEY-----
-MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
-A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
-DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
-CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
-lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
-xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
-c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
-C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
-iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
-kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
-pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
-rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
-0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
-FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
-0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
-fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
-WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
-hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
-GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
-kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
-0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
-xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
-qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
-iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
-/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
-iJhLoxX5SJlJc0RXMhgHGQ==
------END PRIVATE KEY-----
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
+A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
+DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
+CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
+lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
+xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
+c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
+C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
+iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
+kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
+pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
+rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
+0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
+FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
+0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
+fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
+WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
+hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
+GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
+kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
+0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
+xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
+qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
+iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
+/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
+iJhLoxX5SJlJc0RXMhgHGQ==
+-----END PRIVATE KEY-----

package/test/ia-topnav.test.ts

@@ -9,9 +9,35 @@ import {
 
 import '../src/ia-topnav';
 import { IATopNav } from '../src/ia-topnav';
+import { SearchMenu } from '../src/search-menu';
 import { SignedOutDropdown } from '../src/signed-out-dropdown';
 import UserMenu from '../src/user-menu';
 
+// const container = (
+//   {
+//     username = '',
+//     screenName = '',
+//     config = {},
+//     localLinks = true,
+//     secondIdentitySlotMode = '',
+//   }: {
+//     username?: string;
+//     screenName?: string;
+//     config?: IATopNavConfig;
+//     localLinks: boolean;
+//     secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
+//   } = {
+//     localLinks: true,
+//   },
+// ) =>
+//   html`<ia-topnav
+//     .screenName=${screenName}
+//     username=${username}
+//     ?localLinks=${localLinks}
+//     .config=${config}
+//     .secondIdentitySlotMode=${secondIdentitySlotMode}
+//   ></ia-topnav>`;
+
 const verifyClosed = (instance: IATopNav) => {
   expect(instance.mediaSliderOpen).to.be.false;
   expect(instance.selectedMenuOption).to.equal('');
@@ -27,6 +53,25 @@ afterEach(() => {
 });
 
 describe('<ia-topnav>', () => {
+  it('assigns a value to "search in" from outside event', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const query = 'atari';
+    const searchMenu = el.shadowRoot?.querySelector(
+      'search-menu',
+    ) as SearchMenu;
+
+    const inputEvent = new InputEvent('input');
+    Object.defineProperty(inputEvent, 'target', {
+      value: { value: query },
+      writable: false,
+    });
+
+    searchMenu?.searchInChanged(inputEvent);
+    await el.updateComplete;
+
+    expect(el.searchIn).to.equal(query);
+  });
+
   it('dispatches an analyticsClick event when trackClick event fired', async () => {
     const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
     const clickEvent = new MouseEvent('click');
@@ -42,6 +87,22 @@ describe('<ia-topnav>', () => {
     expect(response).to.exist;
   });
 
+  it('dispatches an analyticsSubmit event when trackSubmit event fired', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const submitEvent = new Event('submit');
+    const form = el.shadowRoot
+      ?.querySelector('primary-nav')
+      ?.shadowRoot?.querySelector('nav-search')
+      ?.shadowRoot?.querySelector('form');
+
+    form?.addEventListener('submit', (e) => e.preventDefault());
+    (form?.querySelector('[name=query]') as HTMLInputElement).value = 'atari';
+    setTimeout(() => form?.dispatchEvent(submitEvent));
+    const response = await oneEvent(el, 'trackSubmit');
+
+    expect(response).to.exist;
+  });
+
   it('closes all menus when close-layer clicked', async () => {
     const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
 
@@ -129,6 +190,17 @@ describe('<ia-topnav>', () => {
     expect(el.selectedMenuOption).to.equal('');
   });
 
+  it('toggles search menu tabindex when dropdown open', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.openMenu = 'search';
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('search-menu')?.getAttribute('tabindex'),
+    ).to.equal('');
+  });
+
   it('toggles user menu tabindex when dropdown open', async () => {
     const el = await fixture<IATopNav>(
       html` <ia-topnav username="shaneriley" ?localLinks=${false}></ia-topnav>`,
@@ -174,6 +246,11 @@ describe('<ia-topnav>', () => {
         screenName="shaneriley"
         ?localLinks=${false}
       ></ia-topnav>`,
+      // container({
+      //   username: 'shaneriley',
+      //   screenName: 'shaneriley',
+      //   localLinks: false,
+      // }),
     );
 
     (
@@ -205,6 +282,7 @@ describe('<ia-topnav>', () => {
         'primary-nav',
         'media-slider',
         'desktop-subnav',
+        'search-menu',
       ];
       componentSelectors.forEach((selector) => {
         const component = el.shadowRoot?.querySelector(selector) as unknown as {
@@ -235,24 +313,6 @@ describe('<ia-topnav>', () => {
     });
   });
 
-  describe('search slot', () => {
-    it('forwards search slot to primary-nav', async () => {
-      const el = await fixture<IATopNav>(html`<ia-topnav></ia-topnav>`);
-      await el.updateComplete;
-
-      const primaryNav = el.shadowRoot?.querySelector('primary-nav');
-      const slot = primaryNav?.querySelector('slot[name="search"]');
-      expect(slot).to.exist;
-    });
-
-    it('does not render search-menu', async () => {
-      const el = await fixture<IATopNav>(html`<ia-topnav></ia-topnav>`);
-      await el.updateComplete;
-
-      expect(el.shadowRoot?.querySelector('search-menu')).to.not.exist;
-    });
-  });
-
   describe('slot pass throughs', () => {
     describe('slot for <primary-nav>', () => {
       it('opens a slot with `secondIdentitySlotMode`', async () => {
@@ -267,14 +327,15 @@ describe('<ia-topnav>', () => {
 
         const slot = el.shadowRoot
           ?.querySelector('primary-nav')
-          ?.querySelector('slot[name="opt-sec-logo"]');
+          ?.querySelector('slot');
         expect(slot).to.exist;
+        expect(slot?.getAttribute('name')).to.equal('opt-sec-logo');
 
         el.secondIdentitySlotMode = '';
         await elementUpdated(el);
         const noSlot = el.shadowRoot
           ?.querySelector('primary-nav')
-          ?.querySelector('slot[name="opt-sec-logo"]');
+          ?.querySelector('slot');
         expect(noSlot).to.not.exist;
       });
     });

package/test/primary-nav.test.ts

@@ -50,7 +50,7 @@ describe('<primary-nav>', () => {
     expect(el.shadowRoot?.querySelector('login-button')).to.not.be.undefined;
   });
 
-  it('does not render search trigger or search slot if hideSearch true', async () => {
+  it('does not render search menu toggle and search form if hideSearch true', async () => {
     const el = await fixture<PrimaryNav>(
       component({
         baseHost: 'archive.org',
@@ -61,48 +61,7 @@ describe('<primary-nav>', () => {
     );
 
     expect(el.shadowRoot?.querySelector('.search-trigger')).to.equal(null);
-    expect(el.shadowRoot?.querySelector('.search-container')).to.not.exist;
-  });
-
-  it('renders search slot container', async () => {
-    const el = await fixture<PrimaryNav>(
-      component({
-        baseHost: 'archive.org',
-        username: 'testuser',
-        screenName: 'testuser',
-      }),
-    );
-
-    expect(el.shadowRoot?.querySelector('.search-container')).to.exist;
-
-    const slot = el.shadowRoot?.querySelector<HTMLSlotElement>(
-      'slot[name="search"]',
-    );
-    expect(slot).to.exist;
-  });
-
-  it('renders search trigger button for mobile toggle', async () => {
-    const el = await fixture<PrimaryNav>(
-      component({
-        baseHost: 'archive.org',
-        username: 'testuser',
-        screenName: 'testuser',
-      }),
-    );
-
-    expect(el.shadowRoot?.querySelector('.search-trigger')).to.exist;
-  });
-
-  it('does not render nav-search', async () => {
-    const el = await fixture<PrimaryNav>(
-      component({
-        baseHost: 'archive.org',
-        username: 'testuser',
-        screenName: 'testuser',
-      }),
-    );
-
-    expect(el.shadowRoot?.querySelector('nav-search')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('nav-search')).to.equal(null);
   });
 
   it('opens a slot with `secondIdentitySlotMode`', async () => {