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

package/dist/src/ia-topnav.js

@@ -6,9 +6,11 @@ import './desktop-subnav';
 import './dropdown-menu';
 import './media-slider';
 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';
 let IATopNav = class IATopNav extends LitElement {
     constructor() {
         super(...arguments);
@@ -24,13 +26,13 @@ let IATopNav = class IATopNav extends LitElement {
         this.mediaSliderOpen = false;
         this.openMenu = '';
         this.screenName = '';
+        this.searchIn = '';
+        this.searchQuery = '';
         this.selectedMenuOption = '';
         this.username = '';
         this.userProfileImagePath = '/services/img/user/profile';
         this.secondIdentitySlotMode = '';
         this.menus = buildTopNavMenus();
-        this.boundHandleKeydown = this.handleDocumentKeydown.bind(this);
-        this.boundHandleClick = this.handleDocumentClick.bind(this);
     }
     get normalizedBaseHost() {
         return !this.localLinks ? this.baseHost : '';
@@ -39,6 +41,7 @@ let IATopNav = class IATopNav extends LitElement {
         return iaTopNavCSS;
     }
     updated(props) {
+        var _a;
         if (props.has('username') ||
             props.has('waybackPagesArchived') ||
             props.has('itemIdentifier') ||
@@ -46,29 +49,26 @@ let IATopNav = class IATopNav extends LitElement {
             props.has('baseHost')) {
             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);
-    }
-    handleDocumentKeydown(e) {
-        if (e.key === 'Escape') {
-            this.openMenu = '';
-            this.mediaSliderOpen = false;
+        if (this.openMenu === 'search') {
+            const targetElement = (_a = this.renderRoot.querySelector('search-menu')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+            if (targetElement) {
+                this.keyboardNavigation = new KeyboardNavigation(targetElement, this.openMenu);
+                if (this.previousKeydownListener) {
+                    this.removeEventListener('keydown', this.previousKeydownListener);
+                }
+                this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);
+                this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;
+            }
         }
     }
-    handleDocumentClick(e) {
-        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() {
         // re/build the nav
@@ -83,6 +83,20 @@ let IATopNav = class IATopNav extends LitElement {
         }
         this.closeMediaSlider();
     }
+    navSearchBlurEvent(e) {
+        var _a, _b;
+        if (this.previousKeydownListener) {
+            this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        const isUploadButton = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.isUploadButton;
+        if (!isUploadButton) {
+            const searchMenu = this.renderRoot.querySelector('search-menu');
+            const elements = (_b = this.keyboardNavigation) === null || _b === void 0 ? void 0 : _b.getFocusableElements();
+            if (searchMenu && (elements === null || elements === void 0 ? void 0 : elements.length)) {
+                elements[0].focus();
+            }
+        }
+    }
     openMediaSlider() {
         this.mediaSliderOpen = true;
     }
@@ -94,6 +108,9 @@ let IATopNav = class IATopNav extends LitElement {
         this.openMenu = '';
         this.closeMediaSlider();
     }
+    searchInChanged(e) {
+        this.searchIn = e.detail.searchIn;
+    }
     trackClick(e) {
         this.dispatchEvent(new CustomEvent('analyticsClick', {
             bubbles: true,
@@ -116,12 +133,18 @@ let IATopNav = class IATopNav extends LitElement {
         this.selectedMenuOption = e.detail.mediatype;
         this.openMediaSlider();
     }
+    get searchMenuOpened() {
+        return this.openMenu === 'search';
+    }
     get signedOutOpened() {
         return this.openMenu === 'login';
     }
     get userMenuOpened() {
         return this.openMenu === 'user';
     }
+    get searchMenuTabIndex() {
+        return this.searchMenuOpened ? '' : '-1';
+    }
     get userMenuTabIndex() {
         return this.userMenuOpened ? '' : '-1';
     }
@@ -183,9 +206,6 @@ let IATopNav = class IATopNav extends LitElement {
     get allowSecondaryIcon() {
         return this.secondIdentitySlotMode === 'allow';
     }
-    get searchSlot() {
-        return html `<slot name="search" slot="search"></slot>`;
-    }
     get secondLogoSlot() {
         return this.allowSecondaryIcon
             ? html `
@@ -206,6 +226,8 @@ let IATopNav = 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}
@@ -216,8 +238,9 @@ let IATopNav = 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}
@@ -230,6 +253,16 @@ let IATopNav = 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}
@@ -279,6 +312,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], IATopNav.prototype, "screenName", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "searchIn", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "searchQuery", void 0);
 __decorate([
     property({ type: String })
 ], IATopNav.prototype, "selectedMenuOption", void 0);

package/dist/src/ia-topnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../src/ia-topnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\nimport './desktop-subnav';\nimport './dropdown-menu';\nimport './media-slider';\nimport {\n  IATopNavConfig,\n  IATopNavMenuConfig,\n  IATopNavSecondIdentitySlotMode,\n} from './models';\nimport './primary-nav';\nimport './signed-out-dropdown';\nimport iaTopNavCSS from './styles/ia-topnav';\nimport './user-menu';\n\n@customElement('ia-topnav')\nexport class IATopNav extends LitElement {\n  @property({ type: Boolean }) localLinks = false;\n\n  @property({ type: String }) waybackPagesArchived = '';\n\n  @property({ type: String }) baseHost = 'https://archive.org';\n\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n\n  @property({ type: Boolean }) admin = false;\n\n  @property({ type: Boolean }) canManageFlags = false;\n\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n\n  @property({ type: Boolean }) hideSearch = false;\n\n  @property({ type: String }) itemIdentifier = '';\n\n  @property({ type: Boolean }) mediaSliderOpen = false;\n\n  @property({ type: String }) openMenu = '';\n\n  @property({ type: String }) screenName: string = '';\n\n  @property({ type: String }) selectedMenuOption = '';\n\n  @property({ type: String }) username: string = '';\n\n  @property({ type: String }) userProfileImagePath =\n    '/services/img/user/profile';\n\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n\n  @property({ type: Object }) currentTab?: {\n    mediatype: string;\n    moveTo: string;\n  };\n\n  @state() private menus: IATopNavMenuConfig = buildTopNavMenus();\n\n  private boundHandleKeydown = this.handleDocumentKeydown.bind(this);\n\n  private boundHandleClick = this.handleDocumentClick.bind(this);\n\n  private get normalizedBaseHost() {\n    return !this.localLinks ? this.baseHost : '';\n  }\n\n  static get styles() {\n    return iaTopNavCSS;\n  }\n\n  updated(props: PropertyValues) {\n    if (\n      props.has('username') ||\n      props.has('waybackPagesArchived') ||\n      props.has('itemIdentifier') ||\n      props.has('localLinks') ||\n      props.has('baseHost')\n    ) {\n      this.menuSetup();\n    }\n  }\n\n  firstUpdated() {\n    document.addEventListener('keydown', this.boundHandleKeydown);\n    document.addEventListener('click', this.boundHandleClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this.boundHandleKeydown);\n    document.removeEventListener('click', this.boundHandleClick);\n  }\n\n  private handleDocumentKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      this.openMenu = '';\n      this.mediaSliderOpen = false;\n    }\n  }\n\n  private handleDocumentClick(e: MouseEvent) {\n    if (!this.openMenu) return;\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this.closeMenus();\n    }\n  }\n\n  menuSetup() {\n    // re/build the nav\n    this.menus = buildTopNavMenus(\n      this.username,\n      this.normalizedBaseHost,\n      this.waybackPagesArchived,\n      this.itemIdentifier,\n    );\n  }\n\n  menuToggled(e: CustomEvent) {\n    const currentMenu = this.openMenu;\n    this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;\n    // Keeps media slider open if media menu is open\n    if (this.openMenu === 'media') {\n      return;\n    }\n    this.closeMediaSlider();\n  }\n\n  openMediaSlider() {\n    this.mediaSliderOpen = true;\n  }\n\n  closeMediaSlider() {\n    this.mediaSliderOpen = false;\n    this.selectedMenuOption = '';\n  }\n\n  closeMenus() {\n    this.openMenu = '';\n    this.closeMediaSlider();\n  }\n\n  trackClick(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsClick', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  trackSubmit(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsSubmit', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  mediaTypeSelected(e: CustomEvent) {\n    if (this.selectedMenuOption === e.detail.mediatype) {\n      this.closeMediaSlider();\n      return;\n    }\n    this.selectedMenuOption = e.detail.mediatype;\n    this.openMediaSlider();\n  }\n\n  get signedOutOpened() {\n    return this.openMenu === 'login';\n  }\n\n  get userMenuOpened() {\n    return this.openMenu === 'user';\n  }\n\n  get userMenuTabIndex() {\n    return this.userMenuOpened ? '' : '-1';\n  }\n\n  get signedOutTabIndex() {\n    return this.signedOutOpened ? '' : '-1';\n  }\n\n  get closeLayerClass() {\n    return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';\n  }\n\n  get userMenu() {\n    return html`\n      <user-menu\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .menuItems=${this.userMenuItems}\n        ?open=${this.openMenu === 'user'}\n        .username=${this.username}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.userMenuTabIndex}\"\n        @menuToggled=${this.menuToggled}\n        @trackClick=${this.trackClick}\n        @focusToOtherMenuItem=${(e: CustomEvent) =>\n          (this.currentTab = e.detail)}\n      ></user-menu>\n    `;\n  }\n\n  get signedOutDropdown() {\n    return html`\n      <signed-out-dropdown\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .open=${this.signedOutOpened}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.signedOutTabIndex}\"\n        .menuItems=${this.signedOutMenuItems}\n        @focusToOtherMenuItem=${(e: CustomEvent) => {\n          this.currentTab = e.detail;\n        }}\n      ></signed-out-dropdown>\n    `;\n  }\n\n  get signedOutMenuItems() {\n    return this.menus.signedOut;\n  }\n\n  /**\n   * Most users just get the basic menu items.\n   * For users with `/items` priv, additional admin menu items are included too.\n   * Having the `/flags` priv adds a further admin item for managing flags.\n   */\n  get userMenuItems() {\n    const basicItems = this.menus.user;\n\n    let adminItems = this.menus.userAdmin;\n    if (this.canManageFlags) {\n      adminItems = adminItems.concat(this.menus.userAdminFlags);\n    }\n\n    return this.itemIdentifier && this.admin\n      ? [basicItems, adminItems]\n      : [basicItems];\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  get searchSlot() {\n    return html`<slot name=\"search\" slot=\"search\"></slot>`;\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\" slot=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\" slot=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get separatorTemplate() {\n    return html`<li class=\"divider\" role=\"presentation\"></li>`;\n  }\n\n  render() {\n    return html`\n      <div class=\"topnav\">\n        <primary-nav\n          .baseHost=${this.normalizedBaseHost}\n          .mediaBaseHost=${this.mediaBaseHost}\n          .config=${this.config}\n          .openMenu=${this.openMenu}\n          .screenName=${this.screenName}\n          .secondIdentitySlotMode=${this.secondIdentitySlotMode}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .username=${this.username}\n          .userProfileImagePath=${this.userProfileImagePath}\n          .currentTab=${this.currentTab}\n          ?hideSearch=${this.hideSearch}\n          @mediaTypeSelected=${this.mediaTypeSelected}\n          @trackClick=${this.trackClick}\n          @trackSubmit=${this.trackSubmit}\n          @menuToggled=${this.menuToggled}\n        >\n          ${this.secondLogoSlot} ${this.searchSlot}\n        </primary-nav>\n        <media-slider\n          .baseHost=${this.normalizedBaseHost}\n          .config=${this.config}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .mediaSliderOpen=${this.mediaSliderOpen}\n          .menus=${this.menus}\n          tabindex=\"${this.mediaSliderOpen ? '1' : '-1'}\"\n          @focusToOtherMenuItem=${(e: CustomEvent) =>\n            (this.currentTab = e.detail)}\n        ></media-slider>\n      </div>\n      ${this.username ? this.userMenu : this.signedOutDropdown}\n      <desktop-subnav\n        .baseHost=${this.normalizedBaseHost}\n        .menuItems=${this.menus.more.links}\n        @focus=${this.closeMenus}\n      ></desktop-subnav>\n      <div\n        id=\"close-layer\"\n        class=\"${this.closeLayerClass}\"\n        @click=${this.closeMenus}\n      ></div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../src/ia-topnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\nimport './desktop-subnav';\nimport './dropdown-menu';\nimport './media-slider';\nimport {\n  IATopNavConfig,\n  IATopNavMenuConfig,\n  IATopNavSecondIdentitySlotMode,\n} from './models';\nimport './primary-nav';\nimport './search-menu';\nimport './signed-out-dropdown';\nimport iaTopNavCSS from './styles/ia-topnav';\nimport './user-menu';\nimport KeyboardNavigation from './lib/keyboard-navigation';\n\n@customElement('ia-topnav')\nexport class IATopNav extends LitElement {\n  @property({ type: Boolean }) localLinks = false;\n\n  @property({ type: String }) waybackPagesArchived = '';\n\n  @property({ type: String }) baseHost = 'https://archive.org';\n\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n\n  @property({ type: Boolean }) admin = false;\n\n  @property({ type: Boolean }) canManageFlags = false;\n\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n\n  @property({ type: Boolean }) hideSearch = false;\n\n  @property({ type: String }) itemIdentifier = '';\n\n  @property({ type: Boolean }) mediaSliderOpen = false;\n\n  @property({ type: String }) openMenu = '';\n\n  @property({ type: String }) screenName: string = '';\n\n  @property({ type: String }) searchIn = '';\n\n  @property({ type: String }) searchQuery = '';\n\n  @property({ type: String }) selectedMenuOption = '';\n\n  @property({ type: String }) username: string = '';\n\n  @property({ type: String }) userProfileImagePath =\n    '/services/img/user/profile';\n\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n\n  @property({ type: Object }) currentTab?: {\n    mediatype: string;\n    moveTo: string;\n  };\n\n  @state() private menus: IATopNavMenuConfig = buildTopNavMenus();\n  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;\n\n  private keyboardNavigation?: KeyboardNavigation;\n\n  private get normalizedBaseHost() {\n    return !this.localLinks ? this.baseHost : '';\n  }\n\n  static get styles() {\n    return iaTopNavCSS;\n  }\n\n  updated(props: PropertyValues) {\n    if (\n      props.has('username') ||\n      props.has('waybackPagesArchived') ||\n      props.has('itemIdentifier') ||\n      props.has('localLinks') ||\n      props.has('baseHost')\n    ) {\n      this.menuSetup();\n    }\n\n    if (this.openMenu === 'search') {\n      const targetElement =\n        this.renderRoot.querySelector('search-menu')?.shadowRoot;\n      if (targetElement) {\n        this.keyboardNavigation = new KeyboardNavigation(\n          targetElement as unknown as HTMLElement,\n          this.openMenu,\n        );\n\n        if (this.previousKeydownListener) {\n          this.removeEventListener('keydown', this.previousKeydownListener);\n        }\n        this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);\n        this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;\n      }\n    }\n  }\n\n  firstUpdated() {\n    // close open menu on `esc` click\n    document.addEventListener(\n      'keydown',\n      (e) => {\n        if (e.key === 'Escape') {\n          this.openMenu = '';\n          this.mediaSliderOpen = false;\n        }\n      },\n      false,\n    );\n  }\n\n  menuSetup() {\n    // re/build the nav\n    this.menus = buildTopNavMenus(\n      this.username,\n      this.normalizedBaseHost,\n      this.waybackPagesArchived,\n      this.itemIdentifier,\n    );\n  }\n\n  menuToggled(e: CustomEvent) {\n    const currentMenu = this.openMenu;\n    this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;\n    // Keeps media slider open if media menu is open\n    if (this.openMenu === 'media') {\n      return;\n    }\n    this.closeMediaSlider();\n  }\n\n  navSearchBlurEvent(e: CustomEvent) {\n    if (this.previousKeydownListener) {\n      this.removeEventListener('keydown', this.previousKeydownListener);\n    }\n\n    const isUploadButton = e.detail?.isUploadButton;\n    if (!isUploadButton) {\n      const searchMenu = this.renderRoot.querySelector(\n        'search-menu',\n      ) as HTMLElement;\n      const elements = this.keyboardNavigation?.getFocusableElements();\n      if (searchMenu && elements?.length) {\n        elements[0].focus();\n      }\n    }\n  }\n\n  openMediaSlider() {\n    this.mediaSliderOpen = true;\n  }\n\n  closeMediaSlider() {\n    this.mediaSliderOpen = false;\n    this.selectedMenuOption = '';\n  }\n\n  closeMenus() {\n    this.openMenu = '';\n    this.closeMediaSlider();\n  }\n\n  searchInChanged(e: CustomEvent) {\n    this.searchIn = e.detail.searchIn;\n  }\n\n  trackClick(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsClick', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  trackSubmit(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsSubmit', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  mediaTypeSelected(e: CustomEvent) {\n    if (this.selectedMenuOption === e.detail.mediatype) {\n      this.closeMediaSlider();\n      return;\n    }\n    this.selectedMenuOption = e.detail.mediatype;\n    this.openMediaSlider();\n  }\n\n  get searchMenuOpened() {\n    return this.openMenu === 'search';\n  }\n\n  get signedOutOpened() {\n    return this.openMenu === 'login';\n  }\n\n  get userMenuOpened() {\n    return this.openMenu === 'user';\n  }\n\n  get searchMenuTabIndex() {\n    return this.searchMenuOpened ? '' : '-1';\n  }\n\n  get userMenuTabIndex() {\n    return this.userMenuOpened ? '' : '-1';\n  }\n\n  get signedOutTabIndex() {\n    return this.signedOutOpened ? '' : '-1';\n  }\n\n  get closeLayerClass() {\n    return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';\n  }\n\n  get userMenu() {\n    return html`\n      <user-menu\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .menuItems=${this.userMenuItems}\n        ?open=${this.openMenu === 'user'}\n        .username=${this.username}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.userMenuTabIndex}\"\n        @menuToggled=${this.menuToggled}\n        @trackClick=${this.trackClick}\n        @focusToOtherMenuItem=${(e: CustomEvent) =>\n          (this.currentTab = e.detail)}\n      ></user-menu>\n    `;\n  }\n\n  get signedOutDropdown() {\n    return html`\n      <signed-out-dropdown\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .open=${this.signedOutOpened}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.signedOutTabIndex}\"\n        .menuItems=${this.signedOutMenuItems}\n        @focusToOtherMenuItem=${(e: CustomEvent) => {\n          this.currentTab = e.detail;\n        }}\n      ></signed-out-dropdown>\n    `;\n  }\n\n  get signedOutMenuItems() {\n    return this.menus.signedOut;\n  }\n\n  /**\n   * Most users just get the basic menu items.\n   * For users with `/items` priv, additional admin menu items are included too.\n   * Having the `/flags` priv adds a further admin item for managing flags.\n   */\n  get userMenuItems() {\n    const basicItems = this.menus.user;\n\n    let adminItems = this.menus.userAdmin;\n    if (this.canManageFlags) {\n      adminItems = adminItems.concat(this.menus.userAdminFlags);\n    }\n\n    return this.itemIdentifier && this.admin\n      ? [basicItems, adminItems]\n      : [basicItems];\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\" slot=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\" slot=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get separatorTemplate() {\n    return html`<li class=\"divider\" role=\"presentation\"></li>`;\n  }\n\n  render() {\n    return html`\n      <div class=\"topnav\">\n        <primary-nav\n          .baseHost=${this.normalizedBaseHost}\n          .mediaBaseHost=${this.mediaBaseHost}\n          .config=${this.config}\n          .openMenu=${this.openMenu}\n          .screenName=${this.screenName}\n          .searchIn=${this.searchIn}\n          .searchQuery=${this.searchQuery}\n          .secondIdentitySlotMode=${this.secondIdentitySlotMode}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .username=${this.username}\n          .userProfileImagePath=${this.userProfileImagePath}\n          .currentTab=${this.currentTab}\n          ?hideSearch=${this.hideSearch}\n          @mediaTypeSelected=${this.mediaTypeSelected}\n          @trackClick=${this.trackClick}\n          @trackSubmit=${this.trackSubmit}\n          @menuToggled=${this.menuToggled}\n          @navSearchBlur=${this.navSearchBlurEvent}\n        >\n          ${this.secondLogoSlot}\n        </primary-nav>\n        <media-slider\n          .baseHost=${this.normalizedBaseHost}\n          .config=${this.config}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .mediaSliderOpen=${this.mediaSliderOpen}\n          .menus=${this.menus}\n          tabindex=\"${this.mediaSliderOpen ? '1' : '-1'}\"\n          @focusToOtherMenuItem=${(e: CustomEvent) =>\n            (this.currentTab = e.detail)}\n        ></media-slider>\n      </div>\n      ${this.username ? this.userMenu : this.signedOutDropdown}\n      <search-menu\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .openMenu=${this.openMenu}\n        tabindex=\"${this.searchMenuTabIndex}\"\n        ?hideSearch=${this.hideSearch}\n        @searchInChanged=${this.searchInChanged}\n        @trackClick=${this.trackClick}\n        @trackSubmit=${this.trackSubmit}\n      ></search-menu>\n      <desktop-subnav\n        .baseHost=${this.normalizedBaseHost}\n        .menuItems=${this.menus.more.links}\n        @focus=${this.closeMenus}\n      ></desktop-subnav>\n      <div\n        id=\"close-layer\"\n        class=\"${this.closeLayerClass}\"\n        @click=${this.closeMenus}\n      ></div>\n    `;\n  }\n}\n"]}

package/dist/src/login-button.js

@@ -19,7 +19,7 @@ let LoginButton = class LoginButton extends TrackedElement {
         return loginButtonCSS;
     }
     get signupPath() {
-        return formatUrl('/account/signup', this.baseHost);
+        return formatUrl('/signup', this.baseHost);
     }
     get loginPath() {
         return formatUrl('/login', this.baseHost);

package/dist/src/login-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAEzB,qBAAgB,GAAG,EAAE,CAAC;IA6DzC,CAAC;IA3DC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,eAAe,CAAC;IACtD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,kBAAkB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9D,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,OAAO;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mCAGoB,IAAI,CAAC,WAAW;mBAChC,IAAI,CAAC,cAAc;uCACC,IAAI,CAAC,cAAc;;2BAE/B,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEjD,KAAK,CAAC,IAAI;;;qBAGD,IAAI,CAAC,UAAU;;qBAEf,IAAI,CAAC,SAAS;;;KAG9B,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEzB;IAAhB,KAAK,EAAE;qDAA+B;AAL5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkEvB","sourcesContent":["import { html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport loginButtonCSS from './styles/login-button';\nimport formatUrl from './lib/format-url';\nimport { makeBooleanString } from './lib/make-boolean-string';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('login-button')\nexport class LoginButton extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n\n  @state() private dropdownTabIndex = '';\n\n  static get styles() {\n    return loginButtonCSS;\n  }\n\n  get signupPath() {\n    return formatUrl('/account/signup', this.baseHost);\n  }\n\n  get loginPath() {\n    return formatUrl('/login', this.baseHost);\n  }\n\n  get analyticsEvent() {\n    return `${this.config?.eventCategory}|NavLoginIcon`;\n  }\n\n  get menuOpened(): boolean {\n    return this.openMenu === 'login';\n  }\n\n  get avatarClass() {\n    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;\n  }\n\n  toggleDropdown(e: Event) {\n    e.preventDefault();\n    this.trackClick(e);\n    this.dropdownTabIndex = this.menuOpened ? '' : '-1';\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          menuName: 'login',\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"logged-out-toolbar\">\n        <button\n          class=\"logged-out-menu ${this.avatarClass}\"\n          @click=${this.toggleDropdown}\n          data-event-click-tracking=\"${this.analyticsEvent}\"\n          aria-label=\"Toggle login menu\"\n          aria-expanded=\"${makeBooleanString(this.menuOpened)}\"\n        >\n          ${icons.user}\n        </button>\n        <span>\n          <a href=\"${this.signupPath}\">Sign up</a>\n          |\n          <a href=\"${this.loginPath}\">Log in</a>\n        </span>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAEzB,qBAAgB,GAAG,EAAE,CAAC;IA6DzC,CAAC;IA3DC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,eAAe,CAAC;IACtD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,kBAAkB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9D,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,OAAO;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mCAGoB,IAAI,CAAC,WAAW;mBAChC,IAAI,CAAC,cAAc;uCACC,IAAI,CAAC,cAAc;;2BAE/B,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEjD,KAAK,CAAC,IAAI;;;qBAGD,IAAI,CAAC,UAAU;;qBAEf,IAAI,CAAC,SAAS;;;KAG9B,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEzB;IAAhB,KAAK,EAAE;qDAA+B;AAL5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkEvB","sourcesContent":["import { html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport loginButtonCSS from './styles/login-button';\nimport formatUrl from './lib/format-url';\nimport { makeBooleanString } from './lib/make-boolean-string';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('login-button')\nexport class LoginButton extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n\n  @state() private dropdownTabIndex = '';\n\n  static get styles() {\n    return loginButtonCSS;\n  }\n\n  get signupPath() {\n    return formatUrl('/signup', this.baseHost);\n  }\n\n  get loginPath() {\n    return formatUrl('/login', this.baseHost);\n  }\n\n  get analyticsEvent() {\n    return `${this.config?.eventCategory}|NavLoginIcon`;\n  }\n\n  get menuOpened(): boolean {\n    return this.openMenu === 'login';\n  }\n\n  get avatarClass() {\n    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;\n  }\n\n  toggleDropdown(e: Event) {\n    e.preventDefault();\n    this.trackClick(e);\n    this.dropdownTabIndex = this.menuOpened ? '' : '-1';\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          menuName: 'login',\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"logged-out-toolbar\">\n        <button\n          class=\"logged-out-menu ${this.avatarClass}\"\n          @click=${this.toggleDropdown}\n          data-event-click-tracking=\"${this.analyticsEvent}\"\n          aria-label=\"Toggle login menu\"\n          aria-expanded=\"${makeBooleanString(this.menuOpened)}\"\n        >\n          ${icons.user}\n        </button>\n        <span>\n          <a href=\"${this.signupPath}\">Sign up</a>\n          |\n          <a href=\"${this.loginPath}\">Log in</a>\n        </span>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/primary-nav.d.ts

@@ -2,6 +2,7 @@ import { nothing, PropertyValues } from 'lit';
 import TrackedElement from './tracked-element';
 import './assets/img/hamburger';
 import './login-button';
+import './nav-search';
 import './media-menu';
 import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
 export declare class PrimaryNav extends TrackedElement {
@@ -11,6 +12,8 @@ export declare class PrimaryNav extends TrackedElement {
     config: IATopNavConfig;
     openMenu: string;
     screenName: string;
+    searchIn: string;
+    searchQuery: string;
     secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
     selectedMenuOption: string;
     signedOutMenuOpen: boolean;
@@ -32,12 +35,8 @@ export declare class PrimaryNav extends TrackedElement {
     get loginIcon(): import("lit").TemplateResult<1>;
     get searchMenuOpen(): boolean;
     get allowSecondaryIcon(): boolean;
-    /**
-     * The search slot container, rendered between media-menu and
-     * right-side-section so it sits left of the Upload button on desktop.
-     */
-    get searchSlotContainer(): import("lit").TemplateResult<1> | typeof nothing;
     get searchMenu(): import("lit").TemplateResult<1> | typeof nothing;
+    private emitNavSearchBlurEvent;
     get mobileDonateHeart(): import("lit").TemplateResult<1>;
     get uploadButtonTemplate(): import("lit").TemplateResult<1>;
     get userStateTemplate(): import("lit").TemplateResult<1>;

package/dist/src/primary-nav.js

@@ -4,9 +4,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 { defaultTopNavConfig } from './data/menus';
@@ -19,6 +21,8 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
         this.config = defaultTopNavConfig;
         this.openMenu = '';
         this.screenName = '';
+        this.searchIn = '';
+        this.searchQuery = '';
         this.secondIdentitySlotMode = '';
         this.selectedMenuOption = '';
         this.signedOutMenuOpen = false;
@@ -126,19 +130,6 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
     get allowSecondaryIcon() {
         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() {
         var _a;
         if (this.hideSearch)
@@ -151,8 +142,33 @@ let PrimaryNav = 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>
     `;
     }
+    emitNavSearchBlurEvent(e) {
+        var _a;
+        const relatedTarget = e.relatedTarget;
+        const isUploadButton = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.classList.contains('upload');
+        if (isUploadButton) {
+            ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a.upload')).focus();
+        }
+        this.dispatchEvent(new CustomEvent('navSearchBlur', {
+            detail: {
+                isUploadButton: !!isUploadButton,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     get mobileDonateHeart() {
         return html `
       <a
@@ -223,7 +239,6 @@ let PrimaryNav = 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}
@@ -250,6 +265,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], PrimaryNav.prototype, "screenName", void 0);
+__decorate([
+    property({ type: String })
+], PrimaryNav.prototype, "searchIn", void 0);
+__decorate([
+    property({ type: String })
+], PrimaryNav.prototype, "searchQuery", void 0);
 __decorate([
     property({ type: String })
 ], PrimaryNav.prototype, "secondIdentitySlotMode", void 0);

package/dist/src/primary-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport formatUrl from './lib/format-url';\nimport { customElement, property } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('primary-nav')\nexport class PrimaryNav extends TrackedElement {\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n  @property({ type: String }) baseHost = '';\n  @property({ type: Boolean }) hideSearch = false;\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n  @property({ type: String }) screenName = '';\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n  @property({ type: String }) selectedMenuOption = '';\n  @property({ type: Boolean }) signedOutMenuOpen = false;\n  @property({ type: Boolean }) userMenuOpen = false;\n  @property({ type: Boolean }) mediaMenuAnimate = false;\n  @property({ type: String }) username = '';\n  @property({ type: String }) userProfileImagePath = '';\n  @property({ type: Object }) currentTab:\n    | { mediatype: string; moveTo: string }\n    | undefined;\n  signedOutMenuToggled: unknown;\n\n  static get styles() {\n    return primaryNavCSS;\n  }\n\n  toggleMediaMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'media',\n        },\n      }),\n    );\n  }\n\n  toggleSearchMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'search',\n        },\n      }),\n    );\n  }\n\n  toggleUserMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'user',\n        },\n      }),\n    );\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('currentTab')) {\n      // early return\n      if (!this.currentTab || Object.keys(this.currentTab).length === 0)\n        return nothing;\n\n      const isUserMenuTab =\n        this.currentTab && this.currentTab.mediatype === 'usermenu';\n      if (isUserMenuTab) {\n        const mediaButtons = Array.from(\n          this.shadowRoot\n            ?.querySelector('media-menu')\n            ?.shadowRoot?.querySelectorAll('media-button') ?? [],\n        );\n        const lastMediaButton = mediaButtons.filter((element) => {\n          return element.shadowRoot\n            ?.querySelector('a')\n            ?.classList.contains('images');\n        });\n\n        let nextElement;\n        if (this.username) {\n          nextElement = this.shadowRoot?.querySelector('a.upload');\n        } else {\n          nextElement = this.shadowRoot\n            ?.querySelector('login-button')\n            ?.shadowRoot?.querySelector('span a');\n        }\n\n        const menuItemElement =\n          lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\n\n        const focusElement =\n          this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\n\n        if (focusElement) {\n          (focusElement as HTMLElement).focus();\n        }\n      } else if (this.currentTab.moveTo === 'next') {\n        if (this.shadowRoot?.querySelector('.user-menu')) {\n          (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\n        } else {\n          (\n            this.shadowRoot\n              ?.querySelector('login-button')\n              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n          )?.focus();\n        }\n      }\n    }\n  }\n\n  get userIcon() {\n    const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n    const userMenuToolTip =\n      this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\n\n    return html`\n      <button\n        class=\"user-menu ${userMenuClass}\"\n        title=\"${userMenuToolTip}\"\n        @click=\"${this.toggleUserMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\n      >\n        <img\n          src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\n          alt=\"Profile picture for ${this.screenName}\"\n        />\n        <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\n      </button>\n    `;\n  }\n\n  get loginIcon() {\n    return html`\n      <login-button\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .dropdownOpen=${this.signedOutMenuOpen}\n        .openMenu=${this.openMenu}\n        @signedOutMenuToggled=${this.signedOutMenuToggled}\n      ></login-button>\n    `;\n  }\n\n  get searchMenuOpen() {\n    return this.openMenu === 'search';\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  /**\n   * The search slot container, rendered between media-menu and\n   * right-side-section so it sits left of the Upload button on desktop.\n   */\n  get searchSlotContainer() {\n    if (this.hideSearch) return nothing;\n    return html`\n      <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\n        <slot name=\"search\"></slot>\n      </div>\n    `;\n  }\n\n  get searchMenu() {\n    if (this.hideSearch) return nothing;\n\n    return html`\n      <button\n        class=\"search-trigger\"\n        @click=\"${this.toggleSearchMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\n      >\n        ${icons.search}\n      </button>\n    `;\n  }\n\n  get mobileDonateHeart() {\n    return html`\n      <a\n        class=\"mobile-donate-link\"\n        .href=${formatUrl(\n          '/donate/?origin=iawww-mbhrt' as string & Location,\n          this.baseHost,\n        )}\n      >\n        ${icons.donateUnpadded}\n        <span class=\"sr-only\">\"Donate to the archive\"</span>\n      </a>\n    `;\n  }\n\n  get uploadButtonTemplate() {\n    return html` <a\n      .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\n      class=\"upload\"\n      @focus=${this.toggleMediaMenu}\n    >\n      ${icons.upload}\n      <span>Upload</span>\n    </a>`;\n  }\n\n  get userStateTemplate() {\n    return html`<div class=\"user-info\">\n      ${this.username ? this.userIcon : this.loginIcon}\n    </div>`;\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get secondLogoClass() {\n    return this.allowSecondaryIcon ? 'second-logo' : '';\n  }\n\n  render() {\n    // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\n    return html`\n      <nav class=${this.hideSearch ? 'hide-search' : ''}>\n        <button\n          class=\"hamburger\"\n          @click=\"${this.toggleMediaMenu}\"\n          data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\n          title=\"Open main menu\"\n        >\n          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\n        </button>\n\n        <div class=${`branding ${this.secondLogoClass}`}>\n          <a\n            .href=${formatUrl('/' as string & Location, this.baseHost)}\n            @click=${this.trackClick}\n            data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\n            title=\"Go home\"\n            class=\"link-home\"\n            >${icons.iaLogo}${logoWordmarkStacked}</a\n          >\n          ${this.secondLogoSlot}\n        </div>\n        <media-menu\n          .baseHost=${this.baseHost}\n          .config=${this.config}\n          ?mediaMenuAnimate=${this.mediaMenuAnimate}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .openMenu=${this.openMenu}\n          .currentTab=${this.currentTab}\n        ></media-menu>\n        ${this.searchSlotContainer}\n        <div class=\"right-side-section\">\n          ${this.mobileDonateHeart} ${this.userStateTemplate}\n          ${this.uploadButtonTemplate} ${this.searchMenu}\n        </div>\n      </nav>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport './nav-search';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport locationHandler from './lib/location-handler';\nimport formatUrl from './lib/format-url';\nimport { customElement, property } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('primary-nav')\nexport class PrimaryNav extends TrackedElement {\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n  @property({ type: String }) baseHost = '';\n  @property({ type: Boolean }) hideSearch = false;\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n  @property({ type: String }) screenName = '';\n  @property({ type: String }) searchIn = '';\n  @property({ type: String }) searchQuery = '';\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n  @property({ type: String }) selectedMenuOption = '';\n  @property({ type: Boolean }) signedOutMenuOpen = false;\n  @property({ type: Boolean }) userMenuOpen = false;\n  @property({ type: Boolean }) mediaMenuAnimate = false;\n  @property({ type: String }) username = '';\n  @property({ type: String }) userProfileImagePath = '';\n  @property({ type: Object }) currentTab:\n    | { mediatype: string; moveTo: string }\n    | undefined;\n  signedOutMenuToggled: unknown;\n\n  static get styles() {\n    return primaryNavCSS;\n  }\n\n  toggleMediaMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'media',\n        },\n      }),\n    );\n  }\n\n  toggleSearchMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'search',\n        },\n      }),\n    );\n  }\n\n  toggleUserMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'user',\n        },\n      }),\n    );\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('currentTab')) {\n      // early return\n      if (!this.currentTab || Object.keys(this.currentTab).length === 0)\n        return nothing;\n\n      const isUserMenuTab =\n        this.currentTab && this.currentTab.mediatype === 'usermenu';\n      if (isUserMenuTab) {\n        const mediaButtons = Array.from(\n          this.shadowRoot\n            ?.querySelector('media-menu')\n            ?.shadowRoot?.querySelectorAll('media-button') ?? [],\n        );\n        const lastMediaButton = mediaButtons.filter((element) => {\n          return element.shadowRoot\n            ?.querySelector('a')\n            ?.classList.contains('images');\n        });\n\n        let nextElement;\n        if (this.username) {\n          nextElement = this.shadowRoot?.querySelector('a.upload');\n        } else {\n          nextElement = this.shadowRoot\n            ?.querySelector('login-button')\n            ?.shadowRoot?.querySelector('span a');\n        }\n\n        const menuItemElement =\n          lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\n\n        const focusElement =\n          this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\n\n        if (focusElement) {\n          (focusElement as HTMLElement).focus();\n        }\n      } else if (this.currentTab.moveTo === 'next') {\n        if (this.shadowRoot?.querySelector('.user-menu')) {\n          (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\n        } else {\n          (\n            this.shadowRoot\n              ?.querySelector('login-button')\n              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n          )?.focus();\n        }\n      }\n    }\n  }\n\n  get userIcon() {\n    const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n    const userMenuToolTip =\n      this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\n\n    return html`\n      <button\n        class=\"user-menu ${userMenuClass}\"\n        title=\"${userMenuToolTip}\"\n        @click=\"${this.toggleUserMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\n      >\n        <img\n          src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\n          alt=\"Profile picture for ${this.screenName}\"\n        />\n        <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\n      </button>\n    `;\n  }\n\n  get loginIcon() {\n    return html`\n      <login-button\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .dropdownOpen=${this.signedOutMenuOpen}\n        .openMenu=${this.openMenu}\n        @signedOutMenuToggled=${this.signedOutMenuToggled}\n      ></login-button>\n    `;\n  }\n\n  get searchMenuOpen() {\n    return this.openMenu === 'search';\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  get searchMenu() {\n    if (this.hideSearch) return nothing;\n\n    return html`\n      <button\n        class=\"search-trigger\"\n        @click=\"${this.toggleSearchMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\n      >\n        ${icons.search}\n      </button>\n      <nav-search\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .locationHandler=${locationHandler}\n        .open=${this.searchMenuOpen}\n        .openMenu=${this.openMenu}\n        .searchIn=${this.searchIn}\n        .searchQuery=${this.searchQuery}\n        @blur=${this.emitNavSearchBlurEvent}\n      ></nav-search>\n    `;\n  }\n\n  private emitNavSearchBlurEvent(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const isUploadButton = relatedTarget?.classList.contains('upload');\n\n    if (isUploadButton) {\n      (this.shadowRoot?.querySelector('a.upload') as HTMLElement).focus();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('navSearchBlur', {\n        detail: {\n          isUploadButton: !!isUploadButton,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  get mobileDonateHeart() {\n    return html`\n      <a\n        class=\"mobile-donate-link\"\n        .href=${formatUrl(\n          '/donate/?origin=iawww-mbhrt' as string & Location,\n          this.baseHost,\n        )}\n      >\n        ${icons.donateUnpadded}\n        <span class=\"sr-only\">\"Donate to the archive\"</span>\n      </a>\n    `;\n  }\n\n  get uploadButtonTemplate() {\n    return html` <a\n      .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\n      class=\"upload\"\n      @focus=${this.toggleMediaMenu}\n    >\n      ${icons.upload}\n      <span>Upload</span>\n    </a>`;\n  }\n\n  get userStateTemplate() {\n    return html`<div class=\"user-info\">\n      ${this.username ? this.userIcon : this.loginIcon}\n    </div>`;\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get secondLogoClass() {\n    return this.allowSecondaryIcon ? 'second-logo' : '';\n  }\n\n  render() {\n    // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\n    return html`\n      <nav class=${this.hideSearch ? 'hide-search' : ''}>\n        <button\n          class=\"hamburger\"\n          @click=\"${this.toggleMediaMenu}\"\n          data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\n          title=\"Open main menu\"\n        >\n          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\n        </button>\n\n        <div class=${`branding ${this.secondLogoClass}`}>\n          <a\n            .href=${formatUrl('/' as string & Location, this.baseHost)}\n            @click=${this.trackClick}\n            data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\n            title=\"Go home\"\n            class=\"link-home\"\n            >${icons.iaLogo}${logoWordmarkStacked}</a\n          >\n          ${this.secondLogoSlot}\n        </div>\n        <media-menu\n          .baseHost=${this.baseHost}\n          .config=${this.config}\n          ?mediaMenuAnimate=${this.mediaMenuAnimate}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .openMenu=${this.openMenu}\n          .currentTab=${this.currentTab}\n        ></media-menu>\n        <div class=\"right-side-section\">\n          ${this.mobileDonateHeart} ${this.userStateTemplate}\n          ${this.uploadButtonTemplate} ${this.searchMenu}\n        </div>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/src/styles/ia-topnav.js

@@ -23,6 +23,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/dist/src/styles/ia-topnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --white: #fff;\n    --grey13: #222;\n    --grey20: #333;\n    --grey40: #666;\n    --grey28: #474747;\n    --grey60: #999;\n    --grey66: #aaa;\n    --grey80: #ccc;\n    --greya0: #a0a0a0;\n    --grey6f: #6f6f6f;\n    --errorYellow: #ffcd27;\n\n    --linkColor: #4b64ff;\n    --linkHoverColor: var(--white);\n    --subnavLinkColor: var(--grey66);\n    --primaryTextColor: var(--white);\n    --inverseTextColor: var(--grey20);\n    --lightTextColor: var(--grey60);\n    --activeColor: var(--white);\n    --activeButtonBg: var(--grey20);\n    --iconFill: var(--grey60);\n\n    --mediaMenuBg: var(--grey13);\n    --mediaLabelDesktopColor: var(--grey60);\n    --activeDesktopMenuIcon: var(--grey28);\n\n    --mediaSliderBg: var(--grey20);\n    --mediaSliderDesktopBg: var(--grey28);\n\n    --primaryNavBg: var(--grey13);\n    --primaryNavBottomBorder: var(--grey20);\n\n    --desktopSubnavBg: var(--grey20);\n\n    --dropdownMenuBg: var(--grey20);\n    --dropdownMenuInfoItem: var(--greya0);\n    --dropdownMenuDivider: var(--grey40);\n    --inverseDropdownMenuInfoItem: var(--grey6f);\n\n    --loginTextColor: var(--grey60);\n\n    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --logoWidthTablet: 263px;\n\n    --savePageSubmitBg: var(--grey13);\n    --savePageSubmitText: var(--white);\n    --savePageInputBorder: var(--grey60);\n    --savePageErrorText: var(--errorYellow);\n\n    color: var(--primaryTextColor);\n    font-family: var(--themeFontFamily);\n  }\n\n  primary-nav:focus {\n    outline: none !important;\n  }\n\n  #close-layer {\n    display: none;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 3;\n  }\n  #close-layer.visible {\n    display: block;\n  }\n\n  .topnav {\n    position: relative;\n    z-index: 4;\n  }\n\n  @media (max-width: 889px) {\n    desktop-subnav {\n      display: none;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --white: #fff;\n    --grey13: #222;\n    --grey20: #333;\n    --grey40: #666;\n    --grey28: #474747;\n    --grey60: #999;\n    --grey66: #aaa;\n    --grey80: #ccc;\n    --greya0: #a0a0a0;\n    --grey6f: #6f6f6f;\n    --errorYellow: #ffcd27;\n\n    --linkColor: #4b64ff;\n    --linkHoverColor: var(--white);\n    --subnavLinkColor: var(--grey66);\n    --primaryTextColor: var(--white);\n    --inverseTextColor: var(--grey20);\n    --lightTextColor: var(--grey60);\n    --activeColor: var(--white);\n    --activeButtonBg: var(--grey20);\n    --iconFill: var(--grey60);\n\n    --searchActiveBg: var(--grey20);\n    --searchActiveInputBg: var(--white);\n    --searchMenuBg: var(--grey20);\n    --desktopSearchIconFill: var(--grey20);\n\n    --mediaMenuBg: var(--grey13);\n    --mediaLabelDesktopColor: var(--grey60);\n    --activeDesktopMenuIcon: var(--grey28);\n\n    --mediaSliderBg: var(--grey20);\n    --mediaSliderDesktopBg: var(--grey28);\n\n    --primaryNavBg: var(--grey13);\n    --primaryNavBottomBorder: var(--grey20);\n\n    --desktopSubnavBg: var(--grey20);\n\n    --dropdownMenuBg: var(--grey20);\n    --dropdownMenuInfoItem: var(--greya0);\n    --dropdownMenuDivider: var(--grey40);\n    --inverseDropdownMenuInfoItem: var(--grey6f);\n\n    --loginTextColor: var(--grey60);\n\n    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --logoWidthTablet: 263px;\n\n    --savePageSubmitBg: var(--grey13);\n    --savePageSubmitText: var(--white);\n    --savePageInputBorder: var(--grey60);\n    --savePageErrorText: var(--errorYellow);\n\n    color: var(--primaryTextColor);\n    font-family: var(--themeFontFamily);\n  }\n\n  primary-nav:focus {\n    outline: none !important;\n  }\n\n  #close-layer {\n    display: none;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 3;\n  }\n  #close-layer.visible {\n    display: block;\n  }\n\n  .topnav {\n    position: relative;\n    z-index: 4;\n  }\n\n  @media (max-width: 889px) {\n    desktop-subnav {\n      display: none;\n    }\n  }\n`;\n"]}

package/dist/src/styles/primary-nav.js

@@ -127,42 +127,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;
   }
@@ -327,25 +291,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) {