@internetarchive/elements 1.1.3-webdev-9240.0 → 1.1.3-webdev-9241.0

package/dist/src/elements/ia-topnav/lib/keyboard-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-topnav/lib/keyboard-navigation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,WAAW,EAAE,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;gBACS,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM;IAY9D;;;OAGG;IACH,oBAAoB,IAAI,WAAW,EAAE;IA8CrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa;IA6BlC;;;OAGG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM;IAS1B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,aAAa;IAWjC;;OAEG;IACH,aAAa;IAQb;;OAEG;IACH,SAAS;IAMT;;;OAGG;IACH,yBAAyB,CAAC,UAAU,GAAE,OAAe;CAYtD"}

package/dist/src/elements/ia-topnav/lib/keyboard-navigation.js

@@ -0,0 +1,136 @@
+export default class KeyboardNavigation {
+    /**
+     * Constructor for the KeyboardNavigation class.
+     * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.
+     * @param {string} menuOption - The type of menu option ('web' or 'usermenu').
+     */
+    constructor(elementsContainer, menuOption) {
+        this.elementsContainer = elementsContainer;
+        this.menuOption = menuOption;
+        this.focusableElements = this.getFocusableElements();
+        this.focusedIndex = 0; // always start from first element
+        if (menuOption !== 'search') {
+            this.focusableElements[this.focusedIndex]?.focus();
+        }
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    /**
+     * Gets an array of focusable elements within the container.
+     * @returns {HTMLElement[]} An array of focusable elements.
+     */
+    getFocusableElements() {
+        const focusableTagSelectors = 'a[href], button, input, [tabindex]';
+        const isFocusable = (el) => !el.hasAttribute('disabled') &&
+            el.getAttribute('aria-hidden') !== 'true' &&
+            el.getAttribute('tabindex') !== '-1';
+        let elements;
+        if (this.menuOption === 'web') {
+            // wayback focusable elements
+            const waybackSlider = this.elementsContainer.querySelector('ia-topnav-wayback-slider')?.shadowRoot;
+            const waybackSearch = waybackSlider?.querySelector('ia-topnav-wayback-search');
+            const waybackSearchElements = Array.from(waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??
+                []);
+            const normalElements = Array.from(waybackSlider?.querySelectorAll(focusableTagSelectors) ?? []);
+            // wayback save-form focusable elements
+            const savePageForm = waybackSlider?.querySelector('ia-topnav-save-page-form');
+            const savePageFormElements = Array.from(savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? []);
+            elements = [
+                ...waybackSearchElements,
+                ...normalElements,
+                ...savePageFormElements,
+            ];
+        }
+        else {
+            elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);
+        }
+        return Array.from(elements ?? []).filter(isFocusable);
+    }
+    /**
+     * Handles keyboard events and focuses the appropriate element.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleKeyDown(event) {
+        const target = event.composedPath()[0];
+        // Ignore events from editable fields
+        if (target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement ||
+            target.isContentEditable) {
+            return;
+        }
+        const { key } = event;
+        const isArrowKey = [
+            'ArrowDown',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowLeft',
+        ].includes(key);
+        const isTabKey = key === 'Tab';
+        if (isArrowKey) {
+            this.handleArrowKey(key);
+            event.preventDefault();
+        }
+        else if (isTabKey) {
+            this.handleTabKey(event);
+        }
+    }
+    /**
+     * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu
+     * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
+     */
+    handleArrowKey(key) {
+        const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
+        if (isDownOrRight) {
+            this.focusNext();
+        }
+        else {
+            this.focusPrevious();
+        }
+    }
+    /**
+     * Handles the Tab key event and focuses the next or previous menu item.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleTabKey(event) {
+        const isShiftPressed = event.shiftKey;
+        this.emitFocusToOtherMenuItems(isShiftPressed);
+        this.focusableElements[this.focusedIndex]?.blur();
+        if (!['search'].includes(this.menuOption)) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Focuses the previous focusable element in the container.
+     */
+    focusPrevious() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.focusedIndex =
+            (this.focusedIndex - 1 + this.focusableElements.length) %
+                this.focusableElements.length;
+        this.focusableElements[this.focusedIndex]?.focus();
+    }
+    /**
+     * Focuses the next focusable element in the container.
+     */
+    focusNext() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;
+        this.focusableElements[this.focusedIndex]?.focus();
+    }
+    /**
+     * Focuses the other parent menu items based on the provided flag.
+     * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+     */
+    emitFocusToOtherMenuItems(isPrevious = false) {
+        this.elementsContainer.dispatchEvent(new CustomEvent('focusToOtherMenuItem', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                mediatype: this.menuOption,
+                moveTo: isPrevious ? 'prev' : 'next',
+            },
+        }));
+    }
+}
+//# sourceMappingURL=keyboard-navigation.js.map

package/dist/src/elements/ia-topnav/lib/keyboard-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-navigation.js","sourceRoot":"","sources":["../../../../../src/elements/ia-topnav/lib/keyboard-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["export default class KeyboardNavigation {\n  elementsContainer: HTMLElement;\n  menuOption: string;\n  focusableElements: HTMLElement[];\n  focusedIndex: number;\n\n  /**\n   * Constructor for the KeyboardNavigation class.\n   * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.\n   * @param {string} menuOption - The type of menu option ('web' or 'usermenu').\n   */\n  constructor(elementsContainer: HTMLElement, menuOption: string) {\n    this.elementsContainer = elementsContainer;\n    this.menuOption = menuOption;\n    this.focusableElements = this.getFocusableElements();\n    this.focusedIndex = 0; // always start from first element\n\n    if (menuOption !== 'search') {\n      this.focusableElements[this.focusedIndex]?.focus();\n    }\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Gets an array of focusable elements within the container.\n   * @returns {HTMLElement[]} An array of focusable elements.\n   */\n  getFocusableElements(): HTMLElement[] {\n    const focusableTagSelectors = 'a[href], button, input, [tabindex]';\n\n    const isFocusable = (el: Element) =>\n      !el.hasAttribute('disabled') &&\n      el.getAttribute('aria-hidden') !== 'true' &&\n      el.getAttribute('tabindex') !== '-1';\n\n    let elements;\n    if (this.menuOption === 'web') {\n      // wayback focusable elements\n      const waybackSlider = this.elementsContainer.querySelector(\n        'ia-topnav-wayback-slider',\n      )?.shadowRoot;\n      const waybackSearch = waybackSlider?.querySelector(\n        'ia-topnav-wayback-search',\n      );\n      const waybackSearchElements = Array.from(\n        waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??\n          [],\n      );\n\n      const normalElements = Array.from(\n        waybackSlider?.querySelectorAll(focusableTagSelectors) ?? [],\n      );\n\n      // wayback save-form focusable elements\n      const savePageForm = waybackSlider?.querySelector(\n        'ia-topnav-save-page-form',\n      );\n      const savePageFormElements = Array.from(\n        savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? [],\n      );\n\n      elements = [\n        ...waybackSearchElements,\n        ...normalElements,\n        ...savePageFormElements,\n      ];\n    } else {\n      elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);\n    }\n\n    return Array.from(elements ?? []).filter(isFocusable) as HTMLElement[];\n  }\n\n  /**\n   * Handles keyboard events and focuses the appropriate element.\n   * @param {KeyboardEvent} event - The keyboard event object.\n   */\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.composedPath()[0] as HTMLElement;\n\n    // Ignore events from editable fields\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const { key } = event;\n    const isArrowKey = [\n      'ArrowDown',\n      'ArrowRight',\n      'ArrowUp',\n      'ArrowLeft',\n    ].includes(key);\n    const isTabKey = key === 'Tab';\n\n    if (isArrowKey) {\n      this.handleArrowKey(key);\n      event.preventDefault();\n    } else if (isTabKey) {\n      this.handleTabKey(event);\n    }\n  }\n\n  /**\n   * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu\n   * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').\n   */\n  handleArrowKey(key: string) {\n    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);\n    if (isDownOrRight) {\n      this.focusNext();\n    } else {\n      this.focusPrevious();\n    }\n  }\n\n  /**\n   * Handles the Tab key event and focuses the next or previous menu item.\n   * @param {KeyboardEvent} event - The keyboard event object.\n   */\n  handleTabKey(event: KeyboardEvent) {\n    const isShiftPressed = event.shiftKey;\n\n    this.emitFocusToOtherMenuItems(isShiftPressed);\n\n    this.focusableElements[this.focusedIndex]?.blur();\n    if (!['search'].includes(this.menuOption)) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Focuses the previous focusable element in the container.\n   */\n  focusPrevious() {\n    if (this.focusableElements.length === 0) return;\n    this.focusedIndex =\n      (this.focusedIndex - 1 + this.focusableElements.length) %\n      this.focusableElements.length;\n    this.focusableElements[this.focusedIndex]?.focus();\n  }\n\n  /**\n   * Focuses the next focusable element in the container.\n   */\n  focusNext() {\n    if (this.focusableElements.length === 0) return;\n    this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;\n    this.focusableElements[this.focusedIndex]?.focus();\n  }\n\n  /**\n   * Focuses the other parent menu items based on the provided flag.\n   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.\n   */\n  emitFocusToOtherMenuItems(isPrevious: boolean = false) {\n    this.elementsContainer.dispatchEvent(\n      new CustomEvent('focusToOtherMenuItem', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          mediatype: this.menuOption,\n          moveTo: isPrevious ? 'prev' : 'next',\n        },\n      }),\n    );\n  }\n}\n"]}

package/dist/src/elements/ia-topnav/models.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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 declare 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[];
+    userAdminBiblio: IATopNavLink[];
+    userAdminUploader: IATopNavLink[];
+    video: IATopNavMediaMenu;
+    web: IATopNavMediaMenu;
+}
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';
+//# sourceMappingURL=models.d.ts.map

package/dist/src/elements/ia-topnav/models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/models.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IAEd,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,eAAe,EAAE,YAAY,EAAE,CAAC;IAChC,sBAAsB,EAAE,YAAY,EAAE,CAAC;IACvC,cAAc,EAAE,YAAY,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,KAAK,EAAE,iBAAiB,CAAC;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAC;IAChC,iBAAiB,EAAE,YAAY,EAAE,CAAC;IAClC,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,iBAAiB,CAAC;CACxB;AAED,MAAM,MAAM,8BAA8B,GAAG,OAAO,GAAG,EAAE,CAAC"}

package/dist/src/elements/ia-topnav/models.js

@@ -0,0 +1,10 @@
+/**
+ * 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;
+//# sourceMappingURL=models.js.map

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

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

package/dist/src/elements/ia-topnav/subnav-list-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const subnavListCSS: import("lit").CSSResult;
+//# sourceMappingURL=subnav-list-styles.d.ts.map

package/dist/src/elements/ia-topnav/subnav-list-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subnav-list-styles.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/subnav-list-styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,yBA6CzB,CAAC"}

package/dist/src/elements/ia-topnav/subnav-list-styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from './models.js';
+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;
+    }
+  }
+`;
+//# sourceMappingURL=subnav-list-styles.js.map

package/dist/src/elements/ia-topnav/subnav-list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subnav-list-styles.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/subnav-list-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBT,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;CAyB9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from './models';\n\nexport const subnavListCSS = css`\n  h4 {\n    font-size: 1.6rem;\n  }\n\n  a {\n    text-decoration: none;\n    color: var(--activeColor);\n  }\n\n  ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  li + li {\n    padding-top: 1.5rem;\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    h4 {\n      margin: 0 0 1rem 0;\n      font-weight: 100;\n    }\n\n    ul {\n      font-size: 1.3rem;\n    }\n\n    li {\n      padding-bottom: 0.5rem;\n    }\n\n    li + li {\n      padding-top: 0;\n    }\n\n    li a {\n      display: block;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n  }\n`;\n"]}

package/dist/src/elements/ia-topnav/tracked-element.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export default class TrackedElement extends LitElement {
+    trackClick(e: Event): void;
+    trackSubmit(e: Event): void;
+}
+//# sourceMappingURL=tracked-element.d.ts.map

package/dist/src/elements/ia-topnav/tracked-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracked-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/tracked-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,UAAU;IACpD,UAAU,CAAC,CAAC,EAAE,KAAK;IAcnB,WAAW,CAAC,CAAC,EAAE,KAAK;CAcrB"}

package/dist/src/elements/ia-topnav/tracked-element.js

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export default class TrackedElement extends LitElement {
+    trackClick(e) {
+        const event = e.currentTarget?.dataset?.eventClickTracking;
+        if (event === undefined)
+            return;
+        this.dispatchEvent(new CustomEvent('trackClick', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                event,
+            },
+        }));
+    }
+    trackSubmit(e) {
+        const event = e.currentTarget?.dataset
+            ?.eventSubmitTracking;
+        if (event === undefined)
+            return;
+        this.dispatchEvent(new CustomEvent('trackSubmit', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                event,
+            },
+        }));
+    }
+}
+//# sourceMappingURL=tracked-element.js.map

package/dist/src/elements/ia-topnav/tracked-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracked-element.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/tracked-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,UAAU;IACpD,UAAU,CAAC,CAAQ;QACjB,MAAM,KAAK,GAAI,CAAC,CAAC,aAA6B,EAAE,OAAO,EAAE,kBAAkB,CAAC;QAC5E,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,MAAM,KAAK,GAAI,CAAC,CAAC,aAA6B,EAAE,OAAO;YACrD,EAAE,mBAAmB,CAAC;QACxB,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { LitElement } from 'lit';\n\nexport default class TrackedElement extends LitElement {\n  trackClick(e: Event) {\n    const event = (e.currentTarget as HTMLElement)?.dataset?.eventClickTracking;\n    if (event === undefined) return;\n    this.dispatchEvent(\n      new CustomEvent('trackClick', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          event,\n        },\n      }),\n    );\n  }\n\n  trackSubmit(e: Event) {\n    const event = (e.currentTarget as HTMLElement)?.dataset\n      ?.eventSubmitTracking;\n    if (event === undefined) return;\n    this.dispatchEvent(\n      new CustomEvent('trackSubmit', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          event,\n        },\n      }),\n    );\n  }\n}\n"]}

package/dist/src/elements/ia-wayback-search-form/ia-wayback-search-form.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, LitElement } from 'lit';
+/**
+ * A Wayback Machine search form: a line about how many pages the Wayback
+ * Machine holds, its logo, and a URL or keyword field.
+ *
+ * Submitting calls `queryHandler.performQuery` with what was typed, which by
+ * default goes to the Wayback Machine's results for it, and fires
+ * `waybackSearchSubmitted`.
+ */
+export declare class IAWaybackSearchForm extends LitElement {
+    queryHandler: {
+        performQuery: (query: string) => void;
+    };
+    /** How many pages the Wayback Machine holds. Blank shows a localized default. */
+    waybackPagesArchived: string;
+    private urlInput;
+    render(): import("lit").TemplateResult<1>;
+    handleSubmit(e: Event): void;
+    emitWaybackSearchSubmitted(query: string): void;
+    emitWaybackMachineStatsLinkClicked(): void;
+    emitWaybackMachineLogoLinkClicked(): void;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-wayback-search-form.d.ts.map

package/dist/src/elements/ia-wayback-search-form/ia-wayback-search-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-wayback-search-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-wayback-search-form/ia-wayback-search-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAa5D;;;;;;;GAOG;AACH,qBAEa,mBAAoB,SAAQ,UAAU;IACrB,YAAY,EAAE;QACxC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,CAGC;IAEF,iFAAiF;IACrD,oBAAoB,SAAM;IAEvC,OAAO,CAAC,QAAQ,CAAoB;IAEnD,MAAM;IAuCN,YAAY,CAAC,CAAC,EAAE,KAAK;IAOrB,0BAA0B,CAAC,KAAK,EAAE,MAAM;IAUxC,kCAAkC;IAIlC,iCAAiC;IAIjC,MAAM,KAAK,MAAM,IAAI,cAAc,CA6IlC;CACF"}

package/dist/src/elements/ia-wayback-search-form/ia-wayback-search-form.js

@@ -0,0 +1,240 @@
+import { __decorate } from "tslib";
+import { css, LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { localized, msg } from '@lit/localize';
+import searchIcon from '../../elements/ia-topnav/assets/img/icon-search.js';
+import logo from '../../elements/ia-topnav/assets/img/wayback-logo.js';
+import themeStyles from '../../themes/theme-styles.js';
+/** Desktop styles apply at `min-width: WAYBACK_SEARCH_DESKTOP_BREAKPOINT px`. */
+const WAYBACK_SEARCH_DESKTOP_BREAKPOINT = 890;
+/**
+ * A Wayback Machine search form: a line about how many pages the Wayback
+ * Machine holds, its logo, and a URL or keyword field.
+ *
+ * Submitting calls `queryHandler.performQuery` with what was typed, which by
+ * default goes to the Wayback Machine's results for it, and fires
+ * `waybackSearchSubmitted`.
+ */
+let IAWaybackSearchForm = class IAWaybackSearchForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.queryHandler = {
+            performQuery: (query) => (window.location.href = `https://web.archive.org/web/*/${query}`),
+        };
+        /** How many pages the Wayback Machine holds. Blank shows a localized default. */
+        this.waybackPagesArchived = '';
+    }
+    render() {
+        const pagesArchived = this.waybackPagesArchived || msg('1 trillion');
+        return html `
+      <form method="post" @submit=${this.handleSubmit}>
+        <p>
+          ${msg(html `Search the history of more than ${pagesArchived}
+              <a
+                @click=${this.emitWaybackMachineStatsLinkClicked}
+                data-event-click-tracking="TopNav|WaybackMachineStatsLink"
+                href="https://blog.archive.org/2016/10/23/defining-web-pages-web-sites-and-web-captures/"
+                >web pages</a
+              >
+              on the Internet.`)}
+        </p>
+        <fieldset>
+          <a
+            @click=${this.emitWaybackMachineLogoLinkClicked}
+            data-event-click-tracking="TopNav|WaybackMachineLogoLink"
+            aria-label=${msg('Visit the Wayback Machine')}
+            href="https://web.archive.org"
+            >${logo}</a
+          >
+          <div class="search-field">
+            <input
+              type="text"
+              aria-label=${msg('Search the Wayback Machine')}
+              name="url"
+              id="url"
+              placeholder=${msg('Enter URL or keywords')}
+            />
+            ${searchIcon}
+          </div>
+        </fieldset>
+      </form>
+    `;
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        const query = this.urlInput.value;
+        this.emitWaybackSearchSubmitted(query);
+        this.queryHandler.performQuery(query);
+    }
+    emitWaybackSearchSubmitted(query) {
+        this.dispatchEvent(new CustomEvent('waybackSearchSubmitted', {
+            detail: {
+                query,
+            },
+        }));
+    }
+    emitWaybackMachineStatsLinkClicked() {
+        this.dispatchEvent(new CustomEvent('waybackMachineStatsLinkClicked'));
+    }
+    emitWaybackMachineLogoLinkClicked() {
+        this.dispatchEvent(new CustomEvent('waybackMachineLogoLink'));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --wayback-search-input-text-color--: var(
+            --ia-theme-secondary-text-color,
+            #666
+          );
+          --wayback-search-input-bg--: var(
+            --ia-theme-secondary-background-color,
+            #fff
+          );
+          /*
+           * Darker than the mobile glyph, which follows --iconFill. The topnav
+           * declares this alongside its other color knobs. The literal covers
+           * mounting this search on its own, where none of those greys exist,
+           * and it has to be a literal because fill inherits: an unresolved
+           * value paints black rather than falling through to another rule.
+           */
+          --wayback-search-desktop-icon-fill--: var(
+            --desktopSearchIconFill,
+            #333
+          );
+
+          font: normal 1.2rem/1.5 var(--themeFontFamily);
+        }
+
+        form {
+          max-width: 600px;
+        }
+
+        p {
+          margin-top: 0;
+          font-weight: 200;
+        }
+
+        a {
+          font-weight: 500;
+          text-decoration: none;
+          color: var(--activeColor);
+        }
+
+        fieldset {
+          padding: 0.7rem 2rem;
+          margin: 1.5rem 0;
+          box-sizing: border-box;
+          text-align: center;
+          border: none;
+          border-radius: 7px;
+          background-color: #fcf5e6;
+          box-shadow: 3px 3px 0 0 #c3ad97;
+        }
+
+        fieldset a {
+          font-size: 0;
+        }
+
+        img {
+          width: 100%;
+          max-width: 215px;
+          max-height: 60px;
+          margin-bottom: 1.3rem;
+          vertical-align: middle;
+        }
+
+        input {
+          display: block;
+          width: 100%;
+          height: 3rem;
+          padding: 0.5rem 1rem 0.5rem 3rem;
+          font: normal 1.2rem/1.5 var(--themeFontFamily);
+          color: var(--wayback-search-input-text-color--);
+          box-sizing: border-box;
+          border: 1px solid var(--grey80);
+          border-radius: 2rem;
+          background: var(--wayback-search-input-bg--);
+        }
+
+        input:focus {
+          border-color: #66afe9;
+          outline: none;
+        }
+
+        .search-field {
+          position: relative;
+          overflow: hidden;
+        }
+
+        .search-field svg {
+          position: absolute;
+          top: 3px;
+          left: 3px;
+          width: 2.4rem;
+          height: 2.4rem;
+        }
+
+        .search-field .fill-color {
+          fill: var(--iconFill);
+        }
+
+        @media (min-width: ${WAYBACK_SEARCH_DESKTOP_BREAKPOINT}px) {
+          form {
+            margin: 0 auto;
+          }
+
+          p {
+            margin-bottom: 3rem;
+            font-size: 1.6rem;
+            text-align: center;
+          }
+
+          img {
+            margin: 0;
+          }
+
+          fieldset {
+            margin: 0 auto;
+          }
+
+          fieldset a,
+          .search-field {
+            display: inline-block;
+            width: 49%;
+            vertical-align: middle;
+          }
+
+          fieldset a {
+            text-align: center;
+          }
+
+          .search-field svg {
+            top: 2px;
+          }
+
+          .search-field .fill-color {
+            fill: var(--wayback-search-desktop-icon-fill--);
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], IAWaybackSearchForm.prototype, "queryHandler", void 0);
+__decorate([
+    property({ type: String })
+], IAWaybackSearchForm.prototype, "waybackPagesArchived", void 0);
+__decorate([
+    query('#url')
+], IAWaybackSearchForm.prototype, "urlInput", void 0);
+IAWaybackSearchForm = __decorate([
+    customElement('ia-wayback-search-form'),
+    localized()
+], IAWaybackSearchForm);
+export { IAWaybackSearchForm };
+//# sourceMappingURL=ia-wayback-search-form.js.map

package/dist/src/elements/ia-wayback-search-form/ia-wayback-search-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-wayback-search-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-wayback-search-form/ia-wayback-search-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,UAAU,MAAM,gDAAgD,CAAC;AACxE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,iFAAiF;AACjF,MAAM,iCAAiC,GAAG,GAAG,CAAC;AAE9C;;;;;;;GAOG;AAGI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACuB,iBAAY,GAEpC;YACF,YAAY,EAAE,CAAC,KAAa,EAAE,EAAE,CAC9B,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iCAAiC,KAAK,EAAE,CAAC;SACpE,CAAC;QAEF,iFAAiF;QACrD,yBAAoB,GAAG,EAAE,CAAC;IAkNxD,CAAC;IA9MC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QACrE,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,YAAY;;YAEzC,GAAG,CACH,IAAI,CAAA,mCAAmC,aAAa;;yBAEvC,IAAI,CAAC,kCAAkC;;;;;+BAKjC,CACpB;;;;qBAIU,IAAI,CAAC,iCAAiC;;yBAElC,GAAG,CAAC,2BAA2B,CAAC;;eAE1C,IAAI;;;;;2BAKQ,GAAG,CAAC,4BAA4B,CAAC;;;4BAGhC,GAAG,CAAC,uBAAuB,CAAC;;cAE1C,UAAU;;;;KAInB,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,0BAA0B,CAAC,KAAa;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;YACxC,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,kCAAkC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gCAAgC,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,iCAAiC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAkGoB,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCvD;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA1N6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAKzB;AAG0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA2B;AAE/B;IAAtB,KAAK,CAAC,MAAM,CAAC;qDAAqC;AAXxC,mBAAmB;IAF/B,aAAa,CAAC,wBAAwB,CAAC;IACvC,SAAS,EAAE;GACC,mBAAmB,CA2N/B","sourcesContent":["import { css, CSSResultGroup, LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport { localized, msg } from '@lit/localize';\n\nimport searchIcon from '@src/elements/ia-topnav/assets/img/icon-search';\nimport logo from '@src/elements/ia-topnav/assets/img/wayback-logo';\nimport themeStyles from '@src/themes/theme-styles';\n\n/** Desktop styles apply at `min-width: WAYBACK_SEARCH_DESKTOP_BREAKPOINT px`. */\nconst WAYBACK_SEARCH_DESKTOP_BREAKPOINT = 890;\n\n/**\n * A Wayback Machine search form: a line about how many pages the Wayback\n * Machine holds, its logo, and a URL or keyword field.\n *\n * Submitting calls `queryHandler.performQuery` with what was typed, which by\n * default goes to the Wayback Machine's results for it, and fires\n * `waybackSearchSubmitted`.\n */\n@customElement('ia-wayback-search-form')\n@localized()\nexport class IAWaybackSearchForm extends LitElement {\n  @property({ type: Object }) queryHandler: {\n    performQuery: (query: string) => void;\n  } = {\n    performQuery: (query: string) =>\n      (window.location.href = `https://web.archive.org/web/*/${query}`),\n  };\n\n  /** How many pages the Wayback Machine holds. Blank shows a localized default. */\n  @property({ type: String }) waybackPagesArchived = '';\n\n  @query('#url') private urlInput!: HTMLInputElement;\n\n  render() {\n    const pagesArchived = this.waybackPagesArchived || msg('1 trillion');\n    return html`\n      <form method=\"post\" @submit=${this.handleSubmit}>\n        <p>\n          ${msg(\n            html`Search the history of more than ${pagesArchived}\n              <a\n                @click=${this.emitWaybackMachineStatsLinkClicked}\n                data-event-click-tracking=\"TopNav|WaybackMachineStatsLink\"\n                href=\"https://blog.archive.org/2016/10/23/defining-web-pages-web-sites-and-web-captures/\"\n                >web pages</a\n              >\n              on the Internet.`,\n          )}\n        </p>\n        <fieldset>\n          <a\n            @click=${this.emitWaybackMachineLogoLinkClicked}\n            data-event-click-tracking=\"TopNav|WaybackMachineLogoLink\"\n            aria-label=${msg('Visit the Wayback Machine')}\n            href=\"https://web.archive.org\"\n            >${logo}</a\n          >\n          <div class=\"search-field\">\n            <input\n              type=\"text\"\n              aria-label=${msg('Search the Wayback Machine')}\n              name=\"url\"\n              id=\"url\"\n              placeholder=${msg('Enter URL or keywords')}\n            />\n            ${searchIcon}\n          </div>\n        </fieldset>\n      </form>\n    `;\n  }\n\n  handleSubmit(e: Event) {\n    e.preventDefault();\n    const query = this.urlInput.value;\n    this.emitWaybackSearchSubmitted(query);\n    this.queryHandler.performQuery(query);\n  }\n\n  emitWaybackSearchSubmitted(query: string) {\n    this.dispatchEvent(\n      new CustomEvent('waybackSearchSubmitted', {\n        detail: {\n          query,\n        },\n      }),\n    );\n  }\n\n  emitWaybackMachineStatsLinkClicked() {\n    this.dispatchEvent(new CustomEvent('waybackMachineStatsLinkClicked'));\n  }\n\n  emitWaybackMachineLogoLinkClicked() {\n    this.dispatchEvent(new CustomEvent('waybackMachineLogoLink'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --wayback-search-input-text-color--: var(\n            --ia-theme-secondary-text-color,\n            #666\n          );\n          --wayback-search-input-bg--: var(\n            --ia-theme-secondary-background-color,\n            #fff\n          );\n          /*\n           * Darker than the mobile glyph, which follows --iconFill. The topnav\n           * declares this alongside its other color knobs. The literal covers\n           * mounting this search on its own, where none of those greys exist,\n           * and it has to be a literal because fill inherits: an unresolved\n           * value paints black rather than falling through to another rule.\n           */\n          --wayback-search-desktop-icon-fill--: var(\n            --desktopSearchIconFill,\n            #333\n          );\n\n          font: normal 1.2rem/1.5 var(--themeFontFamily);\n        }\n\n        form {\n          max-width: 600px;\n        }\n\n        p {\n          margin-top: 0;\n          font-weight: 200;\n        }\n\n        a {\n          font-weight: 500;\n          text-decoration: none;\n          color: var(--activeColor);\n        }\n\n        fieldset {\n          padding: 0.7rem 2rem;\n          margin: 1.5rem 0;\n          box-sizing: border-box;\n          text-align: center;\n          border: none;\n          border-radius: 7px;\n          background-color: #fcf5e6;\n          box-shadow: 3px 3px 0 0 #c3ad97;\n        }\n\n        fieldset a {\n          font-size: 0;\n        }\n\n        img {\n          width: 100%;\n          max-width: 215px;\n          max-height: 60px;\n          margin-bottom: 1.3rem;\n          vertical-align: middle;\n        }\n\n        input {\n          display: block;\n          width: 100%;\n          height: 3rem;\n          padding: 0.5rem 1rem 0.5rem 3rem;\n          font: normal 1.2rem/1.5 var(--themeFontFamily);\n          color: var(--wayback-search-input-text-color--);\n          box-sizing: border-box;\n          border: 1px solid var(--grey80);\n          border-radius: 2rem;\n          background: var(--wayback-search-input-bg--);\n        }\n\n        input:focus {\n          border-color: #66afe9;\n          outline: none;\n        }\n\n        .search-field {\n          position: relative;\n          overflow: hidden;\n        }\n\n        .search-field svg {\n          position: absolute;\n          top: 3px;\n          left: 3px;\n          width: 2.4rem;\n          height: 2.4rem;\n        }\n\n        .search-field .fill-color {\n          fill: var(--iconFill);\n        }\n\n        @media (min-width: ${WAYBACK_SEARCH_DESKTOP_BREAKPOINT}px) {\n          form {\n            margin: 0 auto;\n          }\n\n          p {\n            margin-bottom: 3rem;\n            font-size: 1.6rem;\n            text-align: center;\n          }\n\n          img {\n            margin: 0;\n          }\n\n          fieldset {\n            margin: 0 auto;\n          }\n\n          fieldset a,\n          .search-field {\n            display: inline-block;\n            width: 49%;\n            vertical-align: middle;\n          }\n\n          fieldset a {\n            text-align: center;\n          }\n\n          .search-field svg {\n            top: 2px;\n          }\n\n          .search-field .fill-color {\n            fill: var(--wayback-search-desktop-icon-fill--);\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}