@internetarchive/ia-topnav 2.1.0-alpha-webdev8170.0 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../../src/styles/primary-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAmNqB,wBAAwB;;;;;;;;;;;;uBAYxC,wBAAwB,GAAG,CAAC;;;;;;;;;;;;;uBAa5B,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  button:focus,\n  input:focus {\n    outline: none;\n  }\n\n  nav {\n    position: relative;\n    display: flex;\n    height: 4rem;\n    grid-template-areas: 'hamburger empty heart search user';\n    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;\n    grid-template-columns: 4rem auto 4rem 4rem 4rem;\n    -ms-grid-rows: 100%;\n    grid-template-rows: 100%;\n    background: var(--primaryNavBg);\n    border-bottom: 1px solid var(--primaryNavBottomBorder);\n  }\n\n  nav.hide-search {\n    grid-template-areas: 'hamburger empty heart user';\n    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;\n    grid-template-columns: 4rem auto 4rem 4rem;\n  }\n\n  .right-side-section {\n    display: flex;\n    margin-left: auto;\n    user-select: none;\n  }\n  button {\n    background: none;\n    color: inherit;\n    border: none;\n    font: inherit;\n    cursor: pointer;\n  }\n\n  .branding {\n    position: static;\n    float: left;\n    margin: 0 !important;\n    padding: 0 5px 0 10px;\n    -webkit-transform: translate(0, 0);\n    -ms-transform: translate(0, 0);\n    transform: translate(0, 0);\n  }\n\n  slot,\n  .branding {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n  }\n\n  media-menu {\n    flex: 1;\n    justify-self: stretch;\n  }\n\n  .ia-logo {\n    height: 3rem;\n    width: 2.7rem;\n    display: inline-block;\n  }\n  .ia-wordmark {\n    height: 3rem;\n    width: 9.5rem;\n  }\n  .ia-logo,\n  .ia-wordmark {\n    margin-right: 5px;\n  }\n\n  .hamburger {\n    -ms-grid-row: 1;\n    -ms-grid-column: 1;\n    grid-area: hamburger;\n    padding: 0;\n  }\n  .hamburger svg {\n    height: 4rem;\n    width: 4rem;\n    fill: var(--activeColor);\n  }\n\n  .mobile-donate-link {\n    display: inline-block;\n  }\n  .mobile-donate-link svg {\n    height: 4rem;\n    width: 4rem;\n  }\n  .mobile-donate-link .fill-color {\n    fill: rgb(255, 0, 0);\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(1px, 1px, 1px, 1px);\n    -webkit-clip-path: inset(50%);\n    clip-path: inset(50%);\n    user-select: none;\n  }\n\n  .search-trigger {\n    padding: 0;\n  }\n  .search-trigger svg {\n    height: 4rem;\n    width: 4rem;\n  }\n  .search-trigger .fill-color {\n    fill: var(--iconFill);\n  }\n\n  .search-container {\n    display: none;\n  }\n\n  .search-container.open {\n    display: flex;\n    position: absolute;\n    top: 0;\n    right: 4rem;\n    bottom: 0;\n    left: 4rem;\n    z-index: 3;\n    padding: 0.5rem;\n    border-radius: 1rem 1rem 0 0;\n    background: var(--primaryNavBg);\n    align-items: center;\n    animation: fade-in 0.2s forwards;\n  }\n\n  .search-container ::slotted(*) {\n    display: block;\n  }\n\n  .search-container slot {\n    width: 100%;\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .upload {\n    display: none;\n  }\n\n  .upload span {\n    display: none;\n  }\n\n  .upload svg {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .screen-name {\n    display: none;\n    font-size: 1.3rem;\n    vertical-align: middle;\n    text-transform: uppercase;\n  }\n\n  .user-menu {\n    color: var(--lightTextColor);\n    padding: 0.5rem;\n    height: 100%;\n  }\n\n  button.user-menu:hover,\n  button.user-menu:focus {\n    color: var(--linkHoverColor);\n    outline: none;\n  }\n\n  .user-menu.active {\n    border-radius: 1rem 1rem 0 0;\n    background: var(--activeButtonBg);\n  }\n\n  .user-menu img {\n    display: block;\n    width: 3rem;\n    height: 3rem;\n  }\n\n  .link-home {\n    text-decoration: none;\n    display: inline-flex;\n  }\n  a.link-home:focus,\n  a.link-home:focus-visible {\n    outline-offset: 1px;\n  }\n\n  @media only screen and (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) and (max-device-width: 905px) {\n    .branding.second-logo {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: 906px) {\n    .branding.second-logo {\n      padding-right: 20px;\n    }\n  }\n\n  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n    slot[name='opt-sec-logo'] {\n      display: none;\n    }\n\n    .right-side-section {\n      display: initial;\n    }\n    .right-side-section .user-info {\n      float: right;\n    }\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    :host {\n      --userIconWidth: 3.2rem;\n      --userIconHeight: 3.2rem;\n    }\n\n    nav {\n      display: flex;\n      z-index: 4;\n      height: 5rem;\n      padding-right: 1.5rem;\n    }\n\n    slot[name='opt-sec-logo-mobile'] {\n      display: none;\n    }\n\n    .ia-logo,\n    .ia-wordmark {\n      margin-right: 10px;\n    }\n\n    .hamburger,\n    .search-trigger,\n    .mobile-donate-link {\n      display: none;\n    }\n\n    .user-info {\n      display: block;\n      float: right;\n      vertical-align: middle;\n      height: 100%;\n    }\n\n    .user-info .user-menu img {\n      height: 3rem;\n      width: 3rem;\n      margin-right: 0.5rem;\n    }\n\n    .user-menu {\n      padding: 1rem 0.5rem;\n    }\n    .user-menu.active {\n      background: transparent;\n    }\n\n    .user-menu img {\n      display: inline-block;\n      vertical-align: middle;\n      margin-right: 0.5rem;\n    }\n\n    .upload {\n      display: block;\n      padding: 1rem 0.5rem;\n      float: right;\n      font-size: 1.4rem;\n      text-transform: uppercase;\n      text-decoration: none;\n      color: var(--lightTextColor);\n    }\n    .upload:active,\n    .upload:focus,\n    .upload:hover {\n      color: var(--linkHoverColor);\n    }\n    .upload:focus-visible {\n      outline: none;\n    }\n\n    .upload svg {\n      vertical-align: middle;\n      fill: var(--iconFill);\n    }\n\n    .upload:hover svg,\n    .upload:focus svg,\n    .upload:active svg {\n      fill: var(--linkHoverColor);\n    }\n\n    .search-container,\n    .search-container.open {\n      display: flex;\n      position: static;\n      top: auto;\n      right: auto;\n      bottom: auto;\n      left: auto;\n      align-items: center;\n      padding: 0 0 0 1rem;\n      background: transparent;\n      border-radius: 0;\n      z-index: auto;\n    }\n\n    .search-container slot {\n      width: auto;\n    }\n  }\n\n  @media (min-width: 990px) {\n    .screen-name {\n      display: inline-block;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 165px;\n    }\n\n    .upload span {\n      display: inline-block;\n      vertical-align: middle;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../../src/styles/primary-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAmNqB,wBAAwB;;;;;;;;;;;;uBAYxC,wBAAwB,GAAG,CAAC;;;;;;;;;;;;;uBAa5B,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n  button:focus,\r\n  input:focus {\r\n    outline: none;\r\n  }\r\n\r\n  nav {\r\n    position: relative;\r\n    display: flex;\r\n    height: 4rem;\r\n    grid-template-areas: 'hamburger empty heart search user';\r\n    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;\r\n    grid-template-columns: 4rem auto 4rem 4rem 4rem;\r\n    -ms-grid-rows: 100%;\r\n    grid-template-rows: 100%;\r\n    background: var(--primaryNavBg);\r\n    border-bottom: 1px solid var(--primaryNavBottomBorder);\r\n  }\r\n\r\n  nav.hide-search {\r\n    grid-template-areas: 'hamburger empty heart user';\r\n    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;\r\n    grid-template-columns: 4rem auto 4rem 4rem;\r\n  }\r\n\r\n  .right-side-section {\r\n    display: flex;\r\n    margin-left: auto;\r\n    user-select: none;\r\n  }\r\n  button {\r\n    background: none;\r\n    color: inherit;\r\n    border: none;\r\n    font: inherit;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .branding {\r\n    position: static;\r\n    float: left;\r\n    margin: 0 !important;\r\n    padding: 0 5px 0 10px;\r\n    -webkit-transform: translate(0, 0);\r\n    -ms-transform: translate(0, 0);\r\n    transform: translate(0, 0);\r\n  }\r\n\r\n  slot,\r\n  .branding {\r\n    display: flex;\r\n    justify-content: left;\r\n    align-items: center;\r\n  }\r\n\r\n  media-menu {\r\n    flex: 1;\r\n    justify-self: stretch;\r\n  }\r\n\r\n  .ia-logo {\r\n    height: 3rem;\r\n    width: 2.7rem;\r\n    display: inline-block;\r\n  }\r\n  .ia-wordmark {\r\n    height: 3rem;\r\n    width: 9.5rem;\r\n  }\r\n  .ia-logo,\r\n  .ia-wordmark {\r\n    margin-right: 5px;\r\n  }\r\n\r\n  .hamburger {\r\n    -ms-grid-row: 1;\r\n    -ms-grid-column: 1;\r\n    grid-area: hamburger;\r\n    padding: 0;\r\n  }\r\n  .hamburger svg {\r\n    height: 4rem;\r\n    width: 4rem;\r\n    fill: var(--activeColor);\r\n  }\r\n\r\n  .mobile-donate-link {\r\n    display: inline-block;\r\n  }\r\n  .mobile-donate-link svg {\r\n    height: 4rem;\r\n    width: 4rem;\r\n  }\r\n  .mobile-donate-link .fill-color {\r\n    fill: rgb(255, 0, 0);\r\n  }\r\n\r\n  .sr-only {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    margin: -1px;\r\n    padding: 0;\r\n    border: 0;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    clip: rect(1px, 1px, 1px, 1px);\r\n    -webkit-clip-path: inset(50%);\r\n    clip-path: inset(50%);\r\n    user-select: none;\r\n  }\r\n\r\n  .search-trigger {\r\n    padding: 0;\r\n  }\r\n  .search-trigger svg {\r\n    height: 4rem;\r\n    width: 4rem;\r\n  }\r\n  .search-trigger .fill-color {\r\n    fill: var(--iconFill);\r\n  }\r\n\r\n  .search-container {\r\n    display: none;\r\n  }\r\n\r\n  .search-container.open {\r\n    display: flex;\r\n    position: absolute;\r\n    top: 0;\r\n    right: 4rem;\r\n    bottom: 0;\r\n    left: 4rem;\r\n    z-index: 3;\r\n    padding: 0.5rem;\r\n    border-radius: 1rem 1rem 0 0;\r\n    background: var(--primaryNavBg);\r\n    align-items: center;\r\n    animation: fade-in 0.2s forwards;\r\n  }\r\n\r\n  .search-container ::slotted(*) {\r\n    display: block;\r\n  }\r\n\r\n  .search-container slot {\r\n    width: 100%;\r\n  }\r\n\r\n  @keyframes fade-in {\r\n    0% {\r\n      opacity: 0;\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .upload {\r\n    display: none;\r\n  }\r\n\r\n  .upload span {\r\n    display: none;\r\n  }\r\n\r\n  .upload svg {\r\n    height: 3rem;\r\n    width: 3rem;\r\n  }\r\n\r\n  .screen-name {\r\n    display: none;\r\n    font-size: 1.3rem;\r\n    vertical-align: middle;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .user-menu {\r\n    color: var(--lightTextColor);\r\n    padding: 0.5rem;\r\n    height: 100%;\r\n  }\r\n\r\n  button.user-menu:hover,\r\n  button.user-menu:focus {\r\n    color: var(--linkHoverColor);\r\n    outline: none;\r\n  }\r\n\r\n  .user-menu.active {\r\n    border-radius: 1rem 1rem 0 0;\r\n    background: var(--activeButtonBg);\r\n  }\r\n\r\n  .user-menu img {\r\n    display: block;\r\n    width: 3rem;\r\n    height: 3rem;\r\n  }\r\n\r\n  .link-home {\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n  }\r\n  a.link-home:focus,\r\n  a.link-home:focus-visible {\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  @media only screen and (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) and (max-device-width: 905px) {\r\n    .branding.second-logo {\r\n      padding-right: 0;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 906px) {\r\n    .branding.second-logo {\r\n      padding-right: 20px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\r\n    slot[name='opt-sec-logo'] {\r\n      display: none;\r\n    }\r\n\r\n    .right-side-section {\r\n      display: initial;\r\n    }\r\n    .right-side-section .user-info {\r\n      float: right;\r\n    }\r\n  }\r\n\r\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n    :host {\r\n      --userIconWidth: 3.2rem;\r\n      --userIconHeight: 3.2rem;\r\n    }\r\n\r\n    nav {\r\n      display: flex;\r\n      z-index: 4;\r\n      height: 5rem;\r\n      padding-right: 1.5rem;\r\n    }\r\n\r\n    slot[name='opt-sec-logo-mobile'] {\r\n      display: none;\r\n    }\r\n\r\n    .ia-logo,\r\n    .ia-wordmark {\r\n      margin-right: 10px;\r\n    }\r\n\r\n    .hamburger,\r\n    .search-trigger,\r\n    .mobile-donate-link {\r\n      display: none;\r\n    }\r\n\r\n    .user-info {\r\n      display: block;\r\n      float: right;\r\n      vertical-align: middle;\r\n      height: 100%;\r\n    }\r\n\r\n    .user-info .user-menu img {\r\n      height: 3rem;\r\n      width: 3rem;\r\n      margin-right: 0.5rem;\r\n    }\r\n\r\n    .user-menu {\r\n      padding: 1rem 0.5rem;\r\n    }\r\n    .user-menu.active {\r\n      background: transparent;\r\n    }\r\n\r\n    .user-menu img {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      margin-right: 0.5rem;\r\n    }\r\n\r\n    .upload {\r\n      display: block;\r\n      padding: 1rem 0.5rem;\r\n      float: right;\r\n      font-size: 1.4rem;\r\n      text-transform: uppercase;\r\n      text-decoration: none;\r\n      color: var(--lightTextColor);\r\n    }\r\n    .upload:active,\r\n    .upload:focus,\r\n    .upload:hover {\r\n      color: var(--linkHoverColor);\r\n    }\r\n    .upload:focus-visible {\r\n      outline: none;\r\n    }\r\n\r\n    .upload svg {\r\n      vertical-align: middle;\r\n      fill: var(--iconFill);\r\n    }\r\n\r\n    .upload:hover svg,\r\n    .upload:focus svg,\r\n    .upload:active svg {\r\n      fill: var(--linkHoverColor);\r\n    }\r\n\r\n    .search-container,\r\n    .search-container.open {\r\n      display: flex;\r\n      position: static;\r\n      top: auto;\r\n      right: auto;\r\n      bottom: auto;\r\n      left: auto;\r\n      align-items: center;\r\n      padding: 0 0 0 1rem;\r\n      background: transparent;\r\n      border-radius: 0;\r\n      z-index: auto;\r\n    }\r\n\r\n    .search-container slot {\r\n      width: auto;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 990px) {\r\n    .screen-name {\r\n      display: inline-block;\r\n      text-overflow: ellipsis;\r\n      overflow: hidden;\r\n      white-space: nowrap;\r\n      max-width: 165px;\r\n    }\r\n\r\n    .upload span {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    }\r\n  }\r\n`;\r\n"]}

package/dist/src/styles/save-page-form.js

@@ -1,55 +1,55 @@
 import { css } from 'lit';
 import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-export default css `
-  div {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-column-gap: 0.8rem;
-    margin: 0;
-    padding: 0;
-    border: none;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    height: 3rem;
-    box-sizing: border-box;
-    border: 1px solid var(--savePageInputBorder);
-    border-radius: 0.5rem;
-    color: var(--grey13);
-    font-size: inherit;
-  }
-
-  input[type='submit'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding: 0.4rem 0.8rem;
-    font: normal 1.3rem var(--themeFontFamily);
-    text-transform: uppercase;
-    color: var(--savePageSubmitText);
-    border: none;
-    border-radius: 16px;
-    background: var(--savePageSubmitBg);
-    cursor: pointer;
-  }
-
-  .error {
-    display: none;
-    margin-top: 0.5rem;
-    font-weight: bold;
-    color: var(--savePageErrorText);
-  }
-
-  .visible {
-    display: block;
-  }
-
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    h3 {
-      margin-top: 0;
-      font: normal 100 1.6rem var(--themeFontFamily);
-    }
-  }
+export default css `
+  div {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-column-gap: 0.8rem;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    height: 3rem;
+    box-sizing: border-box;
+    border: 1px solid var(--savePageInputBorder);
+    border-radius: 0.5rem;
+    color: var(--grey13);
+    font-size: inherit;
+  }
+
+  input[type='submit'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0.4rem 0.8rem;
+    font: normal 1.3rem var(--themeFontFamily);
+    text-transform: uppercase;
+    color: var(--savePageSubmitText);
+    border: none;
+    border-radius: 16px;
+    background: var(--savePageSubmitBg);
+    cursor: pointer;
+  }
+
+  .error {
+    display: none;
+    margin-top: 0.5rem;
+    font-weight: bold;
+    color: var(--savePageErrorText);
+  }
+
+  .visible {
+    display: block;
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    h3 {
+      margin-top: 0;
+      font: normal 100 1.6rem var(--themeFontFamily);
+    }
+  }
 `;
 //# sourceMappingURL=save-page-form.js.map

package/dist/src/styles/save-page-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"save-page-form.js","sourceRoot":"","sources":["../../../src/styles/save-page-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6CK,wBAAwB;;;;;;CAM9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  div {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-column-gap: 0.8rem;\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n\n  input[type='text'] {\n    width: 100%;\n    height: 3rem;\n    box-sizing: border-box;\n    border: 1px solid var(--savePageInputBorder);\n    border-radius: 0.5rem;\n    color: var(--grey13);\n    font-size: inherit;\n  }\n\n  input[type='submit'] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    padding: 0.4rem 0.8rem;\n    font: normal 1.3rem var(--themeFontFamily);\n    text-transform: uppercase;\n    color: var(--savePageSubmitText);\n    border: none;\n    border-radius: 16px;\n    background: var(--savePageSubmitBg);\n    cursor: pointer;\n  }\n\n  .error {\n    display: none;\n    margin-top: 0.5rem;\n    font-weight: bold;\n    color: var(--savePageErrorText);\n  }\n\n  .visible {\n    display: block;\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    h3 {\n      margin-top: 0;\n      font: normal 100 1.6rem var(--themeFontFamily);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"save-page-form.js","sourceRoot":"","sources":["../../../src/styles/save-page-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6CK,wBAAwB;;;;;;CAM9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n  div {\r\n    display: grid;\r\n    grid-template-columns: 1fr auto;\r\n    grid-column-gap: 0.8rem;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n  }\r\n\r\n  input[type='text'] {\r\n    width: 100%;\r\n    height: 3rem;\r\n    box-sizing: border-box;\r\n    border: 1px solid var(--savePageInputBorder);\r\n    border-radius: 0.5rem;\r\n    color: var(--grey13);\r\n    font-size: inherit;\r\n  }\r\n\r\n  input[type='submit'] {\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    appearance: none;\r\n    padding: 0.4rem 0.8rem;\r\n    font: normal 1.3rem var(--themeFontFamily);\r\n    text-transform: uppercase;\r\n    color: var(--savePageSubmitText);\r\n    border: none;\r\n    border-radius: 16px;\r\n    background: var(--savePageSubmitBg);\r\n    cursor: pointer;\r\n  }\r\n\r\n  .error {\r\n    display: none;\r\n    margin-top: 0.5rem;\r\n    font-weight: bold;\r\n    color: var(--savePageErrorText);\r\n  }\r\n\r\n  .visible {\r\n    display: block;\r\n  }\r\n\r\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n    h3 {\r\n      margin-top: 0;\r\n      font: normal 100 1.6rem var(--themeFontFamily);\r\n    }\r\n  }\r\n`;\r\n"]}

package/dist/src/styles/wayback-search.js

@@ -1,49 +1,49 @@
 import { css } from 'lit';
 import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-export default css `
-  form {
-  }
-
-  p {
-    margin-bottom: 1rem;
-    font-size: 1.6rem;
-    text-align: center;
-  }
-
-  fieldset {
-    padding: 0.5rem;
-    border-radius: 5px;
-    box-shadow: none;
-  }
-
-  input {
-    padding-left: 3rem;
-    margin-top: 0.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: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    fieldset a,
-    .search-field {
-      display: block;
-      width: auto;
-    }
-
-    fieldset a {
-      margin: 0 1.5rem;
-    }
-  }
+export default css `
+  form {
+  }
+
+  p {
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    text-align: center;
+  }
+
+  fieldset {
+    padding: 0.5rem;
+    border-radius: 5px;
+    box-shadow: none;
+  }
+
+  input {
+    padding-left: 3rem;
+    margin-top: 0.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: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    fieldset a,
+    .search-field {
+      display: block;
+      width: auto;
+    }
+
+    fieldset a {
+      margin: 0 1.5rem;
+    }
+  }
 `;
 //# sourceMappingURL=wayback-search.js.map

package/dist/src/styles/wayback-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"wayback-search.js","sourceRoot":"","sources":["../../../src/styles/wayback-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCK,wBAAwB;;;;;;;;;;;CAW9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  form {\n  }\n\n  p {\n    margin-bottom: 1rem;\n    font-size: 1.6rem;\n    text-align: center;\n  }\n\n  fieldset {\n    padding: 0.5rem;\n    border-radius: 5px;\n    box-shadow: none;\n  }\n\n  input {\n    padding-left: 3rem;\n    margin-top: 0.3rem;\n    font-size: 1.4rem;\n    border-color: #bca38e;\n    background: #fff;\n  }\n\n  input::placeholder,\n  input::-webkit-input-placeholder {\n    color: #8e8e8e;\n  }\n\n  .search-field svg {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    fieldset a,\n    .search-field {\n      display: block;\n      width: auto;\n    }\n\n    fieldset a {\n      margin: 0 1.5rem;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"wayback-search.js","sourceRoot":"","sources":["../../../src/styles/wayback-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCK,wBAAwB;;;;;;;;;;;CAW9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n  form {\r\n  }\r\n\r\n  p {\r\n    margin-bottom: 1rem;\r\n    font-size: 1.6rem;\r\n    text-align: center;\r\n  }\r\n\r\n  fieldset {\r\n    padding: 0.5rem;\r\n    border-radius: 5px;\r\n    box-shadow: none;\r\n  }\r\n\r\n  input {\r\n    padding-left: 3rem;\r\n    margin-top: 0.3rem;\r\n    font-size: 1.4rem;\r\n    border-color: #bca38e;\r\n    background: #fff;\r\n  }\r\n\r\n  input::placeholder,\r\n  input::-webkit-input-placeholder {\r\n    color: #8e8e8e;\r\n  }\r\n\r\n  .search-field svg {\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n    fieldset a,\r\n    .search-field {\r\n      display: block;\r\n      width: auto;\r\n    }\r\n\r\n    fieldset a {\r\n      margin: 0 1.5rem;\r\n    }\r\n  }\r\n`;\r\n"]}

package/dist/src/styles/wayback-slider.js

@@ -3,32 +3,32 @@ import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 import { subnavListCSS } from './base';
 export default [
     subnavListCSS,
-    css `
-    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-      :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;
-      }
-    }
+    css `
+    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+      :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;
+      }
+    }
   `,
 ];
 //# sourceMappingURL=wayback-slider.js.map

package/dist/src/styles/wayback-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"wayback-slider.js","sourceRoot":"","sources":["../../../src/styles/wayback-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;yBACoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;GAyB9C;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\nimport { subnavListCSS } from './base';\n\nexport default [\n  subnavListCSS,\n  css`\n    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n      :host {\n        display: block;\n        grid-column: 1 / 4;\n        padding: 0 1.5rem;\n      }\n\n      h4 {\n        margin-top: 0;\n        font: normal 100 1.6rem var(--themeFontFamily);\n      }\n\n      .grid {\n        display: grid;\n        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);\n        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */\n        grid-column-gap: 2.5rem;\n      }\n\n      .link-lists {\n        display: grid;\n        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);\n        grid-column-gap: 2.5rem;\n      }\n    }\n  `,\n];\n"]}
+{"version":3,"file":"wayback-slider.js","sourceRoot":"","sources":["../../../src/styles/wayback-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;yBACoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;GAyB9C;CACF,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\nimport { subnavListCSS } from './base';\r\n\r\nexport default [\r\n  subnavListCSS,\r\n  css`\r\n    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n      :host {\r\n        display: block;\r\n        grid-column: 1 / 4;\r\n        padding: 0 1.5rem;\r\n      }\r\n\r\n      h4 {\r\n        margin-top: 0;\r\n        font: normal 100 1.6rem var(--themeFontFamily);\r\n      }\r\n\r\n      .grid {\r\n        display: grid;\r\n        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);\r\n        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */\r\n        grid-column-gap: 2.5rem;\r\n      }\r\n\r\n      .link-lists {\r\n        display: grid;\r\n        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);\r\n        grid-column-gap: 2.5rem;\r\n      }\r\n    }\r\n  `,\r\n];\r\n"]}

package/index.ts

@@ -1,3 +1,3 @@
-export { IATopNav } from './src/ia-topnav';
-
-export { TOPNAV_MOBILE_BREAKPOINT } from './src/models';
+export { IATopNav } from './src/ia-topnav';
+
+export { TOPNAV_MOBILE_BREAKPOINT } from './src/models';

package/package.json

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

package/src/models.ts

@@ -1,68 +1,68 @@
-/**
- * The pixel width at which ia-topnav switches from mobile to desktop layout.
- * Desktop styles apply at `min-width: TOPNAV_MOBILE_BREAKPOINT px`.
- * Mobile styles apply at `max-width: (TOPNAV_MOBILE_BREAKPOINT - 1) px`.
- *
- * Exported so that host applications can derive their own media queries from
- * this value rather than hard-coding it independently.
- */
-export const TOPNAV_MOBILE_BREAKPOINT = 890;
-
-export interface IATopNavConfig {
-  /**
-   * Google Analytics event category
-   */
-  eventCategory?: string;
-
-  /**
-   * Copy to display for number of pages archived at the top of the Wayback search form
-   *
-   * ie. "425 billion"
-   */
-  waybackPagesArchived?: string;
-
-  /**
-   * Map from dropdown item ids to any callout text that should be applied beside them
-   */
-  callouts?: Record<string, string>;
-}
-
-export interface IATopNavLink {
-  title: string;
-
-  url?: string;
-
-  class?: string;
-
-  icon?: string;
-
-  analyticsEvent?: string;
-
-  external?: boolean;
-}
-
-export interface IATopNavMediaMenu {
-  heading: string;
-  iconLinks: IATopNavLink[];
-  featuredLinks: IATopNavLink[];
-  links: IATopNavLink[];
-  mobileAppsLinks: IATopNavLink[];
-  browserExtensionsLinks: IATopNavLink[];
-  archiveItLinks: IATopNavLink[];
-}
-
-export interface IATopNavMenuConfig {
-  audio: IATopNavMediaMenu;
-  images: IATopNavMediaMenu;
-  more: IATopNavMediaMenu;
-  signedOut: IATopNavLink[];
-  software: IATopNavMediaMenu;
-  texts: IATopNavMediaMenu;
-  user: IATopNavLink[];
-  userAdmin: IATopNavLink[];
-  userAdminFlags: IATopNavLink[];
-  video: IATopNavMediaMenu;
-  web: IATopNavMediaMenu;
-}
-
-export type IATopNavSecondIdentitySlotMode = 'allow' | '';
+/**
+ * The pixel width at which ia-topnav switches from mobile to desktop layout.
+ * Desktop styles apply at `min-width: TOPNAV_MOBILE_BREAKPOINT px`.
+ * Mobile styles apply at `max-width: (TOPNAV_MOBILE_BREAKPOINT - 1) px`.
+ *
+ * Exported so that host applications can derive their own media queries from
+ * this value rather than hard-coding it independently.
+ */
+export const TOPNAV_MOBILE_BREAKPOINT = 890;
+
+export interface IATopNavConfig {
+  /**
+   * Google Analytics event category
+   */
+  eventCategory?: string;
+
+  /**
+   * Copy to display for number of pages archived at the top of the Wayback search form
+   *
+   * ie. "425 billion"
+   */
+  waybackPagesArchived?: string;
+
+  /**
+   * Map from dropdown item ids to any callout text that should be applied beside them
+   */
+  callouts?: Record<string, string>;
+}
+
+export interface IATopNavLink {
+  title: string;
+
+  url?: string;
+
+  class?: string;
+
+  icon?: string;
+
+  analyticsEvent?: string;
+
+  external?: boolean;
+}
+
+export interface IATopNavMediaMenu {
+  heading: string;
+  iconLinks: IATopNavLink[];
+  featuredLinks: IATopNavLink[];
+  links: IATopNavLink[];
+  mobileAppsLinks: IATopNavLink[];
+  browserExtensionsLinks: IATopNavLink[];
+  archiveItLinks: IATopNavLink[];
+}
+
+export interface IATopNavMenuConfig {
+  audio: IATopNavMediaMenu;
+  images: IATopNavMediaMenu;
+  more: IATopNavMediaMenu;
+  signedOut: IATopNavLink[];
+  software: IATopNavMediaMenu;
+  texts: IATopNavMediaMenu;
+  user: IATopNavLink[];
+  userAdmin: IATopNavLink[];
+  userAdminFlags: IATopNavLink[];
+  video: IATopNavMediaMenu;
+  web: IATopNavMediaMenu;
+}
+
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';

package/src/styles/base.ts

@@ -1,49 +1,49 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export const subnavListCSS = css`
-  h4 {
-    font-size: 1.6rem;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--activeColor);
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  li + li {
-    padding-top: 1.5rem;
-  }
-
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    h4 {
-      margin: 0 0 1rem 0;
-      font-weight: 100;
-    }
-
-    ul {
-      font-size: 1.3rem;
-    }
-
-    li {
-      padding-bottom: 0.5rem;
-    }
-
-    li + li {
-      padding-top: 0;
-    }
-
-    li a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export const subnavListCSS = css`
+  h4 {
+    font-size: 1.6rem;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--activeColor);
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li + li {
+    padding-top: 1.5rem;
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    h4 {
+      margin: 0 0 1rem 0;
+      font-weight: 100;
+    }
+
+    ul {
+      font-size: 1.3rem;
+    }
+
+    li {
+      padding-bottom: 0.5rem;
+    }
+
+    li + li {
+      padding-top: 0;
+    }
+
+    li a {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+`;