@internetarchive/ia-topnav 1.1.19 → 1.1.21-alpha

package/src/styles/search-menu.js

@@ -1,103 +1,104 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  :host {
-    --topOffset: -800px;
-  }
-
-  .menu-wrapper {
-    position: relative;
-  }
-
-  button:focus,
-  input:focus {
-    outline-color: var(--linkColor);
-    outline-width: 0.16rem;
-    outline-style: auto;
-  }
-  .search-menu-inner {
-    position: absolute;
-    right: 0;
-    left: 0;
-    z-index: 2;
-    padding: 0 4.5rem;
-    font-size: 1.6rem;
-    background-color: var(--searchMenuBg);
-  }
-  .tx-slide {
-    overflow: hidden;
-    transition-property: top;
-    transition-duration: 0.2s;
-    transition-timing-function: ease;
-  }
-  .initial,
-  .closed {
-    top: var(--topOffset);
-  }
-  .closed {
-    transition-duration: 0.2s;
-  }
-
-  label,
-  a {
-    padding: 1rem;
-    display: block;
-  }
-
-  .advanced-search {
-    text-decoration: none;
-    color: var(--linkColor);
-  }
-
-  @media (min-width: 890px) {
-    .search-menu-inner {
-      overflow: visible;
-      right: 2rem;
-      left: auto;
-      z-index: 5;
-      padding: 1rem 2rem;
-      transition: opacity 0.2s ease-in-out;
-      font-size: 1.4rem;
-      color: var(--inverseTextColor);
-      border-radius: 2px;
-      background: var(--primaryTextColor);
-      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
-    }
-
-    .search-menu-inner:after {
-      position: absolute;
-      right: 7px;
-      top: -7px;
-      width: 12px;
-      height: 7px;
-      box-sizing: border-box;
-      color: #fff;
-      content: '';
-      border-bottom: 7px solid currentColor;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    .initial,
-    .closed {
-      opacity: 0;
-      transition-duration: 0.2s;
-    }
-
-    .open {
-      opacity: 1;
-    }
-
-    label {
-      padding: 0;
-    }
-
-    label + label {
-      padding-top: 7px;
-    }
-
-    a {
-      padding: 1rem 0 0 0;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  :host {
+    --topOffset: 1200px;
+  }
+
+  .menu-wrapper {
+    position: relative;
+  }
+
+  button:focus,
+  input:focus {
+    outline-color: var(--linkColor);
+    outline-width: 0.16rem;
+    outline-style: auto;
+  }
+  .search-menu-inner {
+    position: absolute;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    padding: 0 4.5rem;
+    font-size: 1.6rem;
+    background-color: var(--searchMenuBg);
+  }
+  .tx-slide {
+    overflow: hidden;
+    transition-property: top;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+  .initial,
+  .closed {
+    top: var(--topOffset);
+  }
+  .closed {
+    transition-duration: 0.2s;
+    z-index: -1;
+  }
+
+  label,
+  a {
+    padding: 1rem;
+    display: block;
+  }
+
+  .advanced-search {
+    text-decoration: none;
+    color: var(--linkColor);
+  }
+
+  @media (min-width: 890px) {
+    .search-menu-inner {
+      overflow: visible;
+      right: 2rem;
+      left: auto;
+      z-index: 5;
+      padding: 1rem 2rem;
+      transition: opacity 0.2s ease-in-out;
+      font-size: 1.4rem;
+      color: var(--inverseTextColor);
+      border-radius: 2px;
+      background: var(--primaryTextColor);
+      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    .search-menu-inner:after {
+      position: absolute;
+      right: 7px;
+      top: -7px;
+      width: 12px;
+      height: 7px;
+      box-sizing: border-box;
+      color: #fff;
+      content: '';
+      border-bottom: 7px solid currentColor;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    .initial,
+    .closed {
+      opacity: 0;
+      transition-duration: 0.2s;
+    }
+
+    .open {
+      opacity: 1;
+    }
+
+    label {
+      padding: 0;
+    }
+
+    label + label {
+      padding-top: 7px;
+    }
+
+    a {
+      padding: 1rem 0 0 0;
+    }
+  }
+`;

package/src/styles/signed-out-dropdown.js

@@ -1,31 +1,31 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  @media (min-width: 890px) {
-    .initial,
-    .closed,
-    .open {
-      right: 34rem;
-    }
-
-    .search-hidden.initial,
-    .search-hidden.closed,
-    .search-hidden.open {
-      right: 18.5rem;
-    }
-  }
-
-  @media (min-width: 990px) {
-    .initial,
-    .closed,
-    .open {
-      right: 40rem;
-    }
-
-    .search-hidden.initial,
-    .search-hidden.closed,
-    .search-hidden.open {
-      right: 24.5rem;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  @media (min-width: 890px) {
+    .initial,
+    .closed,
+    .open {
+      right: 34rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 18.5rem;
+    }
+  }
+
+  @media (min-width: 990px) {
+    .initial,
+    .closed,
+    .open {
+      right: 40rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 24.5rem;
+    }
+  }
+`;

package/src/styles/user-menu.js

@@ -1,31 +1,31 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  @media (min-width: 890px) {
-    .initial,
-    .closed,
-    .open {
-      right: 21.3rem;
-    }
-
-    .search-hidden.initial,
-    .search-hidden.closed,
-    .search-hidden.open {
-      right: 5.8rem;
-    }
-  }
-
-  @media (min-width: 990px) {
-    .initial,
-    .closed,
-    .open {
-      right: 27.5rem;
-    }
-
-    .search-hidden.initial,
-    .search-hidden.closed,
-    .search-hidden.open {
-      right: 12rem;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  @media (min-width: 890px) {
+    .initial,
+    .closed,
+    .open {
+      right: 21.3rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 5.8rem;
+    }
+  }
+
+  @media (min-width: 990px) {
+    .initial,
+    .closed,
+    .open {
+      right: 27.5rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 12rem;
+    }
+  }
+`;

package/src/styles/wayback-search.js

@@ -1,48 +1,48 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  form {
-  }
-
-  p {
-    margin-bottom: 1rem;
-    font-size: 1.6rem;
-    text-align: center;
-  }
-
-  fieldset {
-    padding: .5rem;
-    border-radius: 5px;
-    box-shadow: none;
-  }
-
-  input {
-    padding-left: 3rem;
-    margin-top: .3rem;
-    font-size: 1.4rem;
-    border-color: #bca38e;
-    background: #fff;
-  }
-
-  input::placeholder,
-  input::-webkit-input-placeholder {
-    color: #8e8e8e;
-  }
-
-  .search-field svg {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  @media (min-width: 890px) {
-    fieldset a,
-    .search-field {
-      display: block;
-      width: auto;
-    }
-
-    fieldset a {
-      margin: 0 1.5rem;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  form {
+  }
+
+  p {
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    text-align: center;
+  }
+
+  fieldset {
+    padding: .5rem;
+    border-radius: 5px;
+    box-shadow: none;
+  }
+
+  input {
+    padding-left: 3rem;
+    margin-top: .3rem;
+    font-size: 1.4rem;
+    border-color: #bca38e;
+    background: #fff;
+  }
+
+  input::placeholder,
+  input::-webkit-input-placeholder {
+    color: #8e8e8e;
+  }
+
+  .search-field svg {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @media (min-width: 890px) {
+    fieldset a,
+    .search-field {
+      display: block;
+      width: auto;
+    }
+
+    fieldset a {
+      margin: 0 1.5rem;
+    }
+  }
+`;

package/src/styles/wayback-slider.js

@@ -1,30 +1,30 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-import { subnavListCSS } from './base.js';
-
-export default [subnavListCSS, css`
-  @media (min-width: 890px) {
-    :host {
-      display: block;
-      grid-column: 1 / 4;
-      padding: 0 1.5rem;
-    }
-
-    h4 {
-      margin-top: 0;
-      font: normal 100 1.6rem var(--themeFontFamily);
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
-      /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
-      grid-column-gap: 2.5rem;
-    }
-
-    .link-lists {
-      display: grid;
-      grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
-      grid-column-gap: 2.5rem;
-    }
-  }
-`];
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+import { subnavListCSS } from './base.js';
+
+export default [subnavListCSS, css`
+  @media (min-width: 890px) {
+    :host {
+      display: block;
+      grid-column: 1 / 4;
+      padding: 0 1.5rem;
+    }
+
+    h4 {
+      margin-top: 0;
+      font: normal 100 1.6rem var(--themeFontFamily);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
+      /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
+      grid-column-gap: 2.5rem;
+    }
+
+    .link-lists {
+      display: grid;
+      grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
+      grid-column-gap: 2.5rem;
+    }
+  }
+`];

package/src/tracked-element.js

@@ -1,27 +1,27 @@
-import { LitElement } from 'https://offshoot.ux.archive.org/lit.js';
-
-class TrackedElement extends LitElement {
-  trackClick(e) {
-    const event = e.currentTarget.dataset.eventClickTracking;
-    this.dispatchEvent(new CustomEvent('trackClick', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        event
-      },
-    }));
-  }
-
-  trackSubmit(e) {
-    const event = e.currentTarget.dataset.eventSubmitTracking;
-    this.dispatchEvent(new CustomEvent('trackSubmit', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        event
-      },
-    }));
-  }
-}
-
-export default TrackedElement;
+import { LitElement } from 'https://offshoot.ux.archive.org/lit.js';
+
+class TrackedElement extends LitElement {
+  trackClick(e) {
+    const event = e.currentTarget.dataset.eventClickTracking;
+    this.dispatchEvent(new CustomEvent('trackClick', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        event
+      },
+    }));
+  }
+
+  trackSubmit(e) {
+    const event = e.currentTarget.dataset.eventSubmitTracking;
+    this.dispatchEvent(new CustomEvent('trackSubmit', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        event
+      },
+    }));
+  }
+}
+
+export default TrackedElement;

package/src/user-menu.js

@@ -1,42 +1,42 @@
-import { html } from 'https://offshoot.ux.archive.org/lit.js';
-import DropdownMenu from './dropdown-menu.js';
-import userMenuCSS from './styles/user-menu.js';
-
-class UserMenu extends DropdownMenu {
-  static get styles() {
-    return [DropdownMenu.styles, userMenuCSS];
-  }
-
-  static get properties() {
-    const props = {
-      ...DropdownMenu.properties,
-      username: { type: String },
-      screenName: { type: String },
-    };
-    return props;
-  }
-
-  constructor() {
-    super();
-    this.username = '';
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${this.ariaHidden}"
-          aria-expanded="${this.ariaExpanded}"
-        >
-          <h3>${this.screenName}</h3>
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
-
-customElements.define('user-menu', UserMenu);
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
+import DropdownMenu from './dropdown-menu.js';
+import userMenuCSS from './styles/user-menu.js';
+
+class UserMenu extends DropdownMenu {
+  static get styles() {
+    return [DropdownMenu.styles, userMenuCSS];
+  }
+
+  static get properties() {
+    const props = {
+      ...DropdownMenu.properties,
+      username: { type: String },
+      screenName: { type: String },
+    };
+    return props;
+  }
+
+  constructor() {
+    super();
+    this.username = '';
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${this.ariaHidden}"
+          aria-expanded="${this.ariaExpanded}"
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}
+
+customElements.define('user-menu', UserMenu);

package/src/wayback-search.js

@@ -1,18 +1,18 @@
-// NOTE: for fully local testing, you can toggle these two lines
-import WaybackSearch from '@internetarchive/ia-wayback-search';
-// import WaybackSearch from '../../../packages/ia-wayback-search/index.js';
-
-// future way we could move to:
-// import WaybackSearch from 'https://esm.archive.org/@internetarchive/ia-wayback-search@^0.2.3';
-
-import waybackSearchCSS from './styles/wayback-search.js';
-
-class NavWaybackSearch extends WaybackSearch {
-  static get styles() {
-    return [WaybackSearch.styles, waybackSearchCSS];
-  }
-}
-
-customElements.define('wayback-search', NavWaybackSearch);
-
-export default NavWaybackSearch;
+// NOTE: for fully local testing, you can toggle these two lines
+import WaybackSearch from '@internetarchive/ia-wayback-search';
+// import WaybackSearch from '../../../packages/ia-wayback-search/index.js';
+
+// future way we could move to:
+// import WaybackSearch from 'https://esm.archive.org/@internetarchive/ia-wayback-search@^0.2.3';
+
+import waybackSearchCSS from './styles/wayback-search.js';
+
+class NavWaybackSearch extends WaybackSearch {
+  static get styles() {
+    return [WaybackSearch.styles, waybackSearchCSS];
+  }
+}
+
+customElements.define('wayback-search', NavWaybackSearch);
+
+export default NavWaybackSearch;