@internetarchive/ia-topnav 2.0.1-alpha-webdev8396.0 → 2.0.1

package/dist/src/styles/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  .nav-container {\n    position: relative;\n  }\n\n  nav {\n    position: absolute;\n    right: 0;\n    z-index: 4;\n    overflow: hidden;\n    font-size: 1.6rem;\n    background-color: var(--dropdownMenuBg);\n    transition-property: top;\n    transition-duration: 0.2s;\n    transition-timing-function: ease;\n  }\n\n  .initial,\n  .closed {\n    top: var(--topOffset, -1500px);\n  }\n\n  .closed {\n    transition-duration: 0.5s;\n  }\n\n  .open {\n    max-width: 100vw;\n    overflow: auto;\n  }\n\n  h3 {\n    padding: 0.6rem 2rem;\n    margin: 0;\n    font-size: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ul {\n    padding: 0.4rem 0 0.7rem 0;\n    margin: 0;\n    list-style: none;\n    /* viewport height - nav height + bottom nav border */\n    max-height: calc(100vh - 7.2rem + 1px);\n    overflow: auto;\n    box-sizing: border-box;\n  }\n\n  .divider {\n    margin: 0.5rem 0;\n    border-bottom: 1px solid var(--dropdownMenuDivider);\n  }\n\n  a,\n  .info-item {\n    display: block;\n    color: var(--primaryTextColor);\n    text-decoration: none;\n    padding: 1rem 2rem;\n  }\n\n  .info-item {\n    font-size: 0.8em;\n    color: var(--dropdownMenuInfoItem);\n  }\n\n  .callout {\n    position: absolute;\n    margin-left: 10px;\n    padding: 0 5px;\n    border-radius: 2px;\n    background: #fee257;\n    color: #2c2c2c;\n    font-size: 1.4rem;\n    font-weight: bold;\n  }\n\n  a.mobile-upload {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n  }\n  a.mobile-upload svg {\n    fill: var(--white);\n    margin-right: 1rem;\n    height: 1.4rem;\n    width: 1.4rem;\n  }\n\n  @media (min-width: 890px) {\n    nav {\n      display: flex;\n      overflow: visible;\n      top: 0;\n      left: auto;\n      right: var(--dropdownMenuRight, 0);\n      z-index: 5;\n      transition: opacity 0.2s ease-in-out;\n      font-size: 1.4rem;\n      border-radius: 2px;\n      background: var(--primaryTextColor);\n      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    nav:after {\n      position: absolute;\n      right: 7px;\n      top: -7px;\n      width: 12px;\n      height: 7px;\n      box-sizing: border-box;\n      color: var(--white);\n      content: '';\n      border-bottom: 7px solid currentColor;\n      border-left: 6px solid transparent;\n      border-right: 6px solid transparent;\n    }\n\n    h3 {\n      display: none;\n    }\n\n    ul {\n      /* viewport height - nav height + bottom nav border */\n      max-height: calc(100vh - 8.5rem + 1px);\n    }\n\n    .divider {\n      border-bottom-color: var(--dropdownMenuDivider);\n    }\n\n    a {\n      padding: 0.5rem 2rem;\n      color: var(--inverseTextColor);\n      transition:\n        background 0.1s ease-out,\n        color 0.1s ease-out;\n    }\n\n    .info-item {\n      padding: 0.5rem 2rem;\n      font-size: 0.8em;\n      color: var(--inverseDropdownMenuInfoItem);\n    }\n\n    a:hover,\n    a:active,\n    a:focus {\n      color: var(--linkHoverColor);\n      background: var(--linkColor);\n      outline: none;\n    }\n\n    .initial,\n    .closed {\n      opacity: 0;\n      transition-duration: 0.2s;\n    }\n\n    .open {\n      opacity: 1;\n      overflow: visible;\n    }\n\n    a.mobile-upload {\n      display: none;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKjB,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nexport default css`\r\n  .nav-container {\r\n    position: relative;\r\n  }\r\n\r\n  nav {\r\n    position: absolute;\r\n    right: 0;\r\n    z-index: 4;\r\n    overflow: hidden;\r\n    font-size: 1.6rem;\r\n    background-color: var(--dropdownMenuBg);\r\n    transition-property: top;\r\n    transition-duration: 0.2s;\r\n    transition-timing-function: ease;\r\n  }\r\n\r\n  .initial,\r\n  .closed {\r\n    top: var(--topOffset, -1500px);\r\n  }\r\n\r\n  .closed {\r\n    transition-duration: 0.5s;\r\n  }\r\n\r\n  .open {\r\n    max-width: 100vw;\r\n    overflow: auto;\r\n  }\r\n\r\n  h3 {\r\n    padding: 0.6rem 2rem;\r\n    margin: 0;\r\n    font-size: inherit;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  ul {\r\n    padding: 0.4rem 0 0.7rem 0;\r\n    margin: 0;\r\n    list-style: none;\r\n    /* viewport height - nav height + bottom nav border */\r\n    max-height: calc(100vh - 7.2rem + 1px);\r\n    overflow: auto;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .divider {\r\n    margin: 0.5rem 0;\r\n    border-bottom: 1px solid var(--dropdownMenuDivider);\r\n  }\r\n\r\n  a,\r\n  .info-item {\r\n    display: block;\r\n    color: var(--primaryTextColor);\r\n    text-decoration: none;\r\n    padding: 1rem 2rem;\r\n  }\r\n\r\n  .info-item {\r\n    font-size: 0.8em;\r\n    color: var(--dropdownMenuInfoItem);\r\n  }\r\n\r\n  .callout {\r\n    position: absolute;\r\n    margin-left: 10px;\r\n    padding: 0 5px;\r\n    border-radius: 2px;\r\n    background: #fee257;\r\n    color: #2c2c2c;\r\n    font-size: 1.4rem;\r\n    font-weight: bold;\r\n  }\r\n\r\n  a.mobile-upload {\r\n    display: flex;\r\n    justify-content: left;\r\n    align-items: center;\r\n  }\r\n  a.mobile-upload svg {\r\n    fill: var(--white);\r\n    margin-right: 1rem;\r\n    height: 1.4rem;\r\n    width: 1.4rem;\r\n  }\r\n\r\n  @media (min-width: 890px) {\r\n    nav {\r\n      display: flex;\r\n      overflow: visible;\r\n      top: 0;\r\n      left: auto;\r\n      right: var(--dropdownMenuRight, 0);\r\n      z-index: 5;\r\n      transition: opacity 0.2s ease-in-out;\r\n      font-size: 1.4rem;\r\n      border-radius: 2px;\r\n      background: var(--primaryTextColor);\r\n      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    nav:after {\r\n      position: absolute;\r\n      right: 7px;\r\n      top: -7px;\r\n      width: 12px;\r\n      height: 7px;\r\n      box-sizing: border-box;\r\n      color: var(--white);\r\n      content: '';\r\n      border-bottom: 7px solid currentColor;\r\n      border-left: 6px solid transparent;\r\n      border-right: 6px solid transparent;\r\n    }\r\n\r\n    h3 {\r\n      display: none;\r\n    }\r\n\r\n    ul {\r\n      /* viewport height - nav height + bottom nav border */\r\n      max-height: calc(100vh - 8.5rem + 1px);\r\n    }\r\n\r\n    .divider {\r\n      border-bottom-color: var(--dropdownMenuDivider);\r\n    }\r\n\r\n    a {\r\n      padding: 0.5rem 2rem;\r\n      color: var(--inverseTextColor);\r\n      transition:\r\n        background 0.1s ease-out,\r\n        color 0.1s ease-out;\r\n    }\r\n\r\n    .info-item {\r\n      padding: 0.5rem 2rem;\r\n      font-size: 0.8em;\r\n      color: var(--inverseDropdownMenuInfoItem);\r\n    }\r\n\r\n    a:hover,\r\n    a:active,\r\n    a:focus {\r\n      color: var(--linkHoverColor);\r\n      background: var(--linkColor);\r\n      outline: none;\r\n    }\r\n\r\n    .initial,\r\n    .closed {\r\n      opacity: 0;\r\n      transition-duration: 0.2s;\r\n    }\r\n\r\n    .open {\r\n      opacity: 1;\r\n      overflow: visible;\r\n    }\r\n\r\n    a.mobile-upload {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\n"]}

package/dist/src/user-menu.d.ts

@@ -1,7 +1,8 @@
+import { CSSResultGroup } from 'lit';
 import DropdownMenu from './dropdown-menu';
 export default class UserMenu extends DropdownMenu {
     username: string;
     screenName: string;
-    static get styles(): import("lit").CSSResult;
+    static get styles(): CSSResultGroup;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/src/user-menu.js

@@ -13,19 +13,19 @@ let UserMenu = class UserMenu extends DropdownMenu {
         return dropdownStyles;
     }
     render() {
-        return html `
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden=${!this.open}
-          aria-expanded=${this.open}
-        >
-          <h3>${this.screenName}</h3>
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
+        return html `
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden=${!this.open}
+          aria-expanded=${this.open}
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
     `;
     }
 };

package/dist/src/user-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IAsB9C,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AAvB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAwB5B;eAxBoB,QAAQ","sourcesContent":["import { html } from 'lit';\nimport DropdownMenu from './dropdown-menu';\nimport dropdownStyles from './styles/dropdown-menu';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('user-menu')\nexport default class UserMenu extends DropdownMenu {\n  @property({ type: String }) username = '';\n  @property({ type: String }) screenName = '';\n\n  static get styles() {\n    return dropdownStyles;\n  }\n\n  render() {\n    return html`\n      <div class=\"nav-container\">\n        <nav\n          class=\"${this.menuClass}\"\n          aria-hidden=${!this.open}\n          aria-expanded=${this.open}\n        >\n          <h3>${this.screenName}</h3>\n          <ul>\n            ${this.dropdownItems}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IAsB9C,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AAvB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAwB5B;eAxBoB,QAAQ","sourcesContent":["import { CSSResultGroup, html } from 'lit';\r\nimport DropdownMenu from './dropdown-menu';\r\nimport dropdownStyles from './styles/dropdown-menu';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\n@customElement('user-menu')\r\nexport default class UserMenu extends DropdownMenu {\r\n  @property({ type: String }) username = '';\r\n  @property({ type: String }) screenName = '';\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return dropdownStyles;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"nav-container\">\r\n        <nav\r\n          class=\"${this.menuClass}\"\r\n          aria-hidden=${!this.open}\r\n          aria-expanded=${this.open}\r\n        >\r\n          <h3>${this.screenName}</h3>\r\n          <ul>\r\n            ${this.dropdownItems}\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "2.0.1-alpha-webdev8396.0",
+  "version": "2.0.1",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/dropdown-menu.ts

@@ -1,126 +1,132 @@
-import { html, nothing, PropertyValues, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-
-import icons from './assets/img/icons';
-import { defaultTopNavConfig } from './data/menus';
-import formatUrl from './lib/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { IATopNavConfig, IATopNavLink } from './models';
-import dropdownMenuCSS from './styles/dropdown-menu';
-import TrackedElement from './tracked-element';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import KeyboardNavigation from './lib/keyboard-navigation';
-
-export default class DropdownMenu extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
-  @property({ type: Boolean }) animated = false;
-  @property({ type: Boolean }) open = false;
-
-  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (this: HTMLElement, ev: KeyboardEvent) => any;
-
-  static get styles() {
-    return dropdownMenuCSS;
-  }
-
-  updated(props: PropertyValues) {
-    if (props.has('open') && this.open) {
-      const container = this.shadowRoot?.querySelector(
-        '.nav-container',
-      ) as HTMLElement;
-
-      if (container) {
-        const keyboardNavigation = new KeyboardNavigation(
-          container,
-          'usermenu',
-        );
-        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
-        if (this.previousKeydownListener) {
-          this.removeEventListener('keydown', this.previousKeydownListener);
-        }
-        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
-      }
-    }
-  }
-
-  get dropdownItems() {
-    if (!this.menuItems) return nothing;
-
-    if (!Array.isArray(this.menuItems[0])) {
-      const submenu = this.menuItems as IATopNavLink[];
-      return this.dropdownSection(submenu);
-    }
-    return this.menuItems.map((submenu, i) => {
-      const joiner = i ? DropdownMenu.dropdownDivider : html``;
-      if (!Array.isArray(submenu)) {
-        return;
-      }
-      return [joiner, ...this.dropdownSection(submenu)];
-    });
-  }
-
-  static get dropdownDivider() {
-    return html`<li class="divider"></li>`;
-  }
-
-  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
-    return submenu.map(
-      (item) => html`
-        <li>
-          ${item.url
-            ? this.dropdownLink(item)
-            : DropdownMenu.dropdownText(item)}
-        </li>
-      `,
-    );
-  }
-
-  dropdownLink(link: IATopNavLink): TemplateResult {
-    const calloutText = this.config?.callouts?.[link.title];
-    const isMobileUpload = link.class === 'mobile-upload';
-    const isTabbable = this.open && !isMobileUpload;
-
-    return html`<a
-      href="${formatUrl(link.url, this.baseHost)}"
-      class=${ifDefined(link.class)}
-      tabindex="${isTabbable ? '' : '-1'}"
-      @click=${this.trackClick}
-      data-event-click-tracking="${this.config
-        ?.eventCategory}|Nav${link.analyticsEvent}"
-      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
-    >
-      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
-      ${calloutText
-        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
-        : nothing}
-    </a>`;
-  }
-
-  static dropdownText(item: IATopNavLink) {
-    return html`<span class="info-item">${item.title}</span>`;
-  }
-
-  get menuClass() {
-    if (this.open) return 'open';
-    if (this.animated) return 'closed';
-    return 'initial';
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${makeBooleanString(!this.open)}"
-          aria-expanded="${makeBooleanString(this.open)}"
-        >
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
+import {
+  CSSResultGroup,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+
+import icons from './assets/img/icons';
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { IATopNavConfig, IATopNavLink } from './models';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import TrackedElement from './tracked-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import KeyboardNavigation from './lib/keyboard-navigation';
+
+export default class DropdownMenu extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
+  @property({ type: Boolean }) animated = false;
+  @property({ type: Boolean }) open = false;
+
+  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (this: HTMLElement, ev: KeyboardEvent) => any;
+
+  static get styles(): CSSResultGroup {
+    return dropdownMenuCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector(
+        '.nav-container',
+      ) as HTMLElement;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container,
+          'usermenu',
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  get dropdownItems() {
+    if (!this.menuItems) return nothing;
+
+    if (!Array.isArray(this.menuItems[0])) {
+      const submenu = this.menuItems as IATopNavLink[];
+      return this.dropdownSection(submenu);
+    }
+    return this.menuItems.map((submenu, i) => {
+      const joiner = i ? DropdownMenu.dropdownDivider : html``;
+      if (!Array.isArray(submenu)) {
+        return;
+      }
+      return [joiner, ...this.dropdownSection(submenu)];
+    });
+  }
+
+  static get dropdownDivider() {
+    return html`<li class="divider"></li>`;
+  }
+
+  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
+    return submenu.map(
+      (item) => html`
+        <li>
+          ${item.url
+            ? this.dropdownLink(item)
+            : DropdownMenu.dropdownText(item)}
+        </li>
+      `,
+    );
+  }
+
+  dropdownLink(link: IATopNavLink): TemplateResult {
+    const calloutText = this.config?.callouts?.[link.title];
+    const isMobileUpload = link.class === 'mobile-upload';
+    const isTabbable = this.open && !isMobileUpload;
+
+    return html`<a
+      href="${formatUrl(link.url, this.baseHost)}"
+      class=${ifDefined(link.class)}
+      tabindex="${isTabbable ? '' : '-1'}"
+      @click=${this.trackClick}
+      data-event-click-tracking="${this.config
+        ?.eventCategory}|Nav${link.analyticsEvent}"
+      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
+    >
+      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
+      ${calloutText
+        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
+        : nothing}
+    </a>`;
+  }
+
+  static dropdownText(item: IATopNavLink) {
+    return html`<span class="info-item">${item.title}</span>`;
+  }
+
+  get menuClass() {
+    if (this.open) return 'open';
+    if (this.animated) return 'closed';
+    return 'initial';
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanString(!this.open)}"
+          aria-expanded="${makeBooleanString(this.open)}"
+        >
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}