@internetarchive/ia-topnav 1.3.9 → 1.3.10-webdev-7394.1

package/dist/test/wayback-slider.test.js

@@ -0,0 +1,80 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/wayback-slider';
+const component = ({ archiveItLinks, browserExtensionsLinks, config, mobileAppsLinks, }) => html `
+  <wayback-slider
+    baseHost="archive.org"
+    .config=${config}
+    .archiveItLinks=${archiveItLinks}
+    .browserExtensionsLinks=${browserExtensionsLinks}
+    .mobileAppsLinks=${mobileAppsLinks}
+  ></wayback-slider>
+`;
+const buildDefaults = () => ({
+    config: {},
+    archiveItLinks: [
+        {
+            url: '1',
+            title: 'first',
+        },
+        {
+            url: '2',
+            title: 'second',
+        },
+    ],
+    browserExtensionsLinks: [
+        {
+            url: '3',
+            title: 'third',
+        },
+        {
+            url: '4',
+            title: 'fourth',
+        },
+    ],
+    mobileAppsLinks: [
+        {
+            url: '5',
+            title: 'fifth',
+        },
+        {
+            url: '6',
+            title: 'sixth',
+        },
+    ],
+});
+describe('<wayback-slider>', () => {
+    it('renders the links passed in via the archiveItLinks prop', async () => {
+        var _a, _b;
+        const options = buildDefaults();
+        const el = await fixture(component(options));
+        const anchors = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.archive-it a')) !== null && _b !== void 0 ? _b : [];
+        options.archiveItLinks.forEach((link, i) => {
+            const anchor = anchors[i];
+            expect(anchor.innerText).to.equal(link.title);
+            expect(anchor.getAttribute('href')).to.contain(link.url);
+        });
+    });
+    it('renders the links passed in via the browserExtensionsLinks prop', async () => {
+        var _a, _b;
+        const options = buildDefaults();
+        const el = await fixture(component(options));
+        const anchors = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.browser-extensions a')) !== null && _b !== void 0 ? _b : [];
+        options.browserExtensionsLinks.forEach((link, i) => {
+            const anchor = anchors[i];
+            expect(anchor.innerText).to.equal(link.title);
+            expect(anchor.getAttribute('href')).to.contain(link.url);
+        });
+    });
+    it('renders the links passed in via the mobileAppsLinks prop', async () => {
+        var _a, _b;
+        const options = buildDefaults();
+        const el = await fixture(component(options));
+        const anchors = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.mobile-apps a')) !== null && _b !== void 0 ? _b : [];
+        options.mobileAppsLinks.forEach((link, i) => {
+            const anchor = anchors[i];
+            expect(anchor.innerText).to.equal(link.title);
+            expect(anchor.getAttribute('href')).to.contain(link.url);
+        });
+    });
+});
+//# sourceMappingURL=wayback-slider.test.js.map

package/dist/test/wayback-slider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wayback-slider.test.js","sourceRoot":"","sources":["../../test/wayback-slider.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,uBAAuB,CAAC;AAG/B,MAAM,SAAS,GAAG,CAAC,EACjB,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,eAAe,GAMhB,EAAE,EAAE,CAAC,IAAI,CAAA;;;cAGI,MAAM;sBACE,cAAc;8BACN,sBAAsB;uBAC7B,eAAe;;CAErC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAAC;IAC3B,MAAM,EAAE,EAAE;IACV,cAAc,EAAE;QACd;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,OAAO;SACf;QACD;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,sBAAsB,EAAE;QACtB;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,OAAO;SACf;QACD;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,OAAO;SACf;QACD;YACE,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,OAAO;SACf;KACF;CACF,CAAC,CAAC;AAEH,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;;QACvE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;QAChC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7C,MAAM,OAAO,GAAG,MAAA,MAAA,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC;QAEvE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACzC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAsB,CAAC;YAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;;QAC/E,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;QAChC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7C,MAAM,OAAO,GACX,MAAA,MAAA,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,uBAAuB,CAAC,mCAAI,EAAE,CAAC;QAEjE,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACjD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAsB,CAAC;YAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;;QACxE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;QAChC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7C,MAAM,OAAO,GAAG,MAAA,MAAA,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,gBAAgB,CAAC,mCAAI,EAAE,CAAC;QAExE,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAsB,CAAC;YAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\n\nimport '../src/wayback-slider';\nimport type { IATopNavLink } from '../src/models';\n\nconst component = ({\n  archiveItLinks,\n  browserExtensionsLinks,\n  config,\n  mobileAppsLinks,\n}: {\n  archiveItLinks: IATopNavLink[];\n  browserExtensionsLinks: IATopNavLink[];\n  config: Record<string, unknown>;\n  mobileAppsLinks: IATopNavLink[];\n}) => html`\n  <wayback-slider\n    baseHost=\"archive.org\"\n    .config=${config}\n    .archiveItLinks=${archiveItLinks}\n    .browserExtensionsLinks=${browserExtensionsLinks}\n    .mobileAppsLinks=${mobileAppsLinks}\n  ></wayback-slider>\n`;\n\nconst buildDefaults = () => ({\n  config: {},\n  archiveItLinks: [\n    {\n      url: '1',\n      title: 'first',\n    },\n    {\n      url: '2',\n      title: 'second',\n    },\n  ],\n  browserExtensionsLinks: [\n    {\n      url: '3',\n      title: 'third',\n    },\n    {\n      url: '4',\n      title: 'fourth',\n    },\n  ],\n  mobileAppsLinks: [\n    {\n      url: '5',\n      title: 'fifth',\n    },\n    {\n      url: '6',\n      title: 'sixth',\n    },\n  ],\n});\n\ndescribe('<wayback-slider>', () => {\n  it('renders the links passed in via the archiveItLinks prop', async () => {\n    const options = buildDefaults();\n    const el = await fixture(component(options));\n    const anchors = el.shadowRoot?.querySelectorAll('.archive-it a') ?? [];\n\n    options.archiveItLinks.forEach((link, i) => {\n      const anchor = anchors[i] as HTMLAnchorElement;\n      expect(anchor.innerText).to.equal(link.title);\n      expect(anchor.getAttribute('href')).to.contain(link.url);\n    });\n  });\n\n  it('renders the links passed in via the browserExtensionsLinks prop', async () => {\n    const options = buildDefaults();\n    const el = await fixture(component(options));\n    const anchors =\n      el.shadowRoot?.querySelectorAll('.browser-extensions a') ?? [];\n\n    options.browserExtensionsLinks.forEach((link, i) => {\n      const anchor = anchors[i] as HTMLAnchorElement;\n      expect(anchor.innerText).to.equal(link.title);\n      expect(anchor.getAttribute('href')).to.contain(link.url);\n    });\n  });\n\n  it('renders the links passed in via the mobileAppsLinks prop', async () => {\n    const options = buildDefaults();\n    const el = await fixture(component(options));\n    const anchors = el.shadowRoot?.querySelectorAll('.mobile-apps a') ?? [];\n\n    options.mobileAppsLinks.forEach((link, i) => {\n      const anchor = anchors[i] as HTMLAnchorElement;\n      expect(anchor.innerText).to.equal(link.title);\n      expect(anchor.getAttribute('href')).to.contain(link.url);\n    });\n  });\n});\n"]}

package/eslint.config.mjs

@@ -0,0 +1,53 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import html from 'eslint-plugin-html';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends('plugin:@typescript-eslint/recommended'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      html,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx'],
+          moduleDirectory: ['node_modules', 'src', 'demo'],
+        },
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-unsafe-function-type': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+  {
+    ignores: ['**/*.js', '**/*.mjs'],
+  },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+  },
+];

package/package.json

@@ -1,44 +1,60 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.9",
+  "version": "1.3.10-webdev-7394.1",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
-  "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "start": "cd ../../www/ && web-dev-server --app-index ./index.html --node-resolve --watch --open",
-    "lint:eslint": "eslint --ext .js . --ignore-path .gitignore",
-    "format:eslint": "eslint --ext .js . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "lint": "npm run lint:eslint",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "test": "ulimit -v unlimited;  web-test-runner  'test/**/*.test.js' --node-resolve --coverage --puppeteer"
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "prepare": "rimraf dist && tsc && husky install",
+    "build": "tsc",
+    "lint": "eslint . && prettier \"**/*.ts\" --check",
+    "format": "eslint . --fix && prettier \"**/*.ts\" --write",
+    "circular": "madge --circular --extensions ts .",
+    "test": "tsc && npm run lint && npm run circular && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "ghpages:build": "rimraf ghpages && npm run prepare && vite build",
+    "ghpages:publish": "npm run ghpages:prepare -e $(git branch --show-current)",
+    "ghpages:prepare": "npm run ghpages:build && touch ghpages/.nojekyll && npm run ghpages:generate",
+    "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
-    "@internetarchive/ia-wayback-search": "0.2.5"
+    "@internetarchive/ia-wayback-search": "0.2.6-webdev-7393.6",
+    "lit": "^2.8.0"
   },
   "devDependencies": {
-    "@open-wc/demoing-storybook": "^2.4.7",
-    "@open-wc/eslint-config": "^8.0.2",
-    "@open-wc/polyfills-loader": "^0.3.3",
-    "@open-wc/prettier-config": "^1.1.0",
-    "@open-wc/testing": "^3.1.6",
-    "@storybook/react": "^6.5.12",
-    "@web/dev-server": "^0.3.6",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-puppeteer": "^0.10.5",
-    "eslint": "^8.24.0",
-    "eslint-plugin-lit": "^1.6.1",
-    "gulp": "^4.0.2",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "sinon": "^14.0.1"
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.20.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-lit": "^2.0.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-wc": "^3.0.0",
+    "gh-pages": "^6.3.0",
+    "husky": "^9.1.7",
+    "madge": "^8.0.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "sinon": "^20.0.0",
+    "ts-lit-plugin": "^2.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
   },
   "husky": {
     "hooks": {
@@ -46,16 +62,10 @@
     }
   },
   "lint-staged": {
-    "*.js": [
+    "*.ts": [
       "eslint --fix",
+      "prettier --write",
       "git add"
     ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
-    ]
-  },
-  "prettier": "@open-wc/prettier-config"
+  }
 }

package/prettier.config.js

@@ -0,0 +1,9 @@
+/**
+  * @see https://prettier.io/docs/configuration
+  * @type {import("prettier").Config}
+  */
+ const config = {
+   singleQuote: true,
+ };
+
+ export default config;

package/src/assets/img/hamburger.ts

@@ -0,0 +1,49 @@
+import { html, css } from 'lit';
+import Icon from './icon';
+import icons from './icons';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('icon-hamburger')
+export class HamBurger extends Icon {
+  static get styles() {
+    return css`
+      svg {
+        display: block;
+        height: 4rem;
+        width: 4rem;
+      }
+      .fill-color {
+        fill: var(--activeColor);
+      }
+    `;
+  }
+
+  static get closed() {
+    return html`
+      <svg
+        viewBox="0 0 40 40"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby="hamburgerTitleID hamburgerDescID"
+      >
+        <title id="hamburgerTitleID">Hamburger icon</title>
+        <desc id="hamburgerDescID">
+          An icon used to represent a menu that can be toggled by interacting
+          with this icon.
+        </desc>
+        <path
+          d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z"
+          fill="#999"
+          fill-rule="evenodd"
+        />
+      </svg>
+    `;
+  }
+
+  static get opened() {
+    return icons.close;
+  }
+
+  render() {
+    return this.active ? HamBurger.opened : HamBurger.closed;
+  }
+}

package/src/assets/img/{ia-icon.js → ia-icon.ts}

@@ -1,19 +1,12 @@
-import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
-import './icons.js';
+import { LitElement, TemplateResult, html } from 'lit';
+import './icons';
+import { customElement, property } from 'lit/decorators.js';
 
-class IAIcon extends LitElement {
-  constructor() {
-    super();
-    this.icon = '';
-  }
-
-  static get properties() {
-    return {
-      icon: { type: String },
-    };
-  }
+@customElement('ia-icon')
+export class IAIcon extends LitElement {
+  @property({ type: String }) icon = '';
 
-  static get icons() {
+  static get icons(): Record<string, TemplateResult> {
     return {
       audio: html`<icon-audio></icon-audio>`,
       ellipses: html`<icon-ellipses></icon-ellipses>`,
@@ -29,5 +22,3 @@ class IAIcon extends LitElement {
     return IAIcon.icons[this.icon];
   }
 }
-
-customElements.define('ia-icon', IAIcon);

package/src/assets/img/{icon-audio.js → icon-audio.ts}

@@ -1,4 +1,4 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import { html } from 'lit';
 
 export default html`
   <svg
@@ -16,7 +16,12 @@ export default html`
         <path
           d="M19.4264564,11.8585048 L19.4264564,20.7200433 C19.4264564,22.3657576 18.8838179,23.2519114 16.8489237,23.2519114 C12.2364969,23.125318 7.75972977,23.125318 3.14730298,23.2519114 C1.24806842,23.2519114 0.569770368,22.492351 0.569770368,20.7200433 L0.569770368,2.74377955 C0.569770368,1.09806526 1.11240881,0.211911416 3.14730298,0.211911416 C7.75972977,0.338504822 12.2364969,0.338504822 16.8489237,0.211911416 C18.7481583,0.211911416 19.4264564,0.971471855 19.4264564,2.74377955 C19.2907967,5.78202131 19.4264564,8.82026306 19.4264564,11.8585048 L19.4264564,11.8585048 Z M10.0659432,2.74377955 C8.16670861,2.74377955 6.67445288,4.13630702 6.67445288,5.90861471 C6.67445288,7.6809224 8.16670861,9.07344988 10.0659432,9.07344988 C11.9651777,9.07344988 13.4574335,7.6809224 13.4574335,5.90861471 C13.4574335,4.13630702 11.8295181,2.74377955 10.0659432,2.74377955 L10.0659432,2.74377955 Z M10.0659432,11.4787246 C7.21709133,11.4787246 5.04653754,13.6308125 5.04653754,16.1626806 C5.04653754,18.8211422 7.35275094,20.8466367 10.0659432,20.8466367 C12.914795,20.8466367 15.0853488,18.6945488 15.0853488,16.1626806 C15.0853488,13.6308125 12.7791354,11.4787246 10.0659432,11.4787246 L10.0659432,11.4787246 Z"
         ></path>
-        <ellipse cx="10.2016028" cy="16.5690777" rx="1.35659611" ry="1.34075134"></ellipse>
+        <ellipse
+          cx="10.2016028"
+          cy="16.5690777"
+          rx="1.35659611"
+          ry="1.34075134"
+        ></ellipse>
       </g>
     </g>
   </svg>

package/src/assets/img/icon-close.ts

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="closeTitleID closeDescID"
+  >
+    <title id="closeTitleID">Close icon</title>
+    <desc id="closeDescID">A line drawing of an X</desc>
+    <path
+      d="m29.1923882 10.8076118c.5857864.5857865.5857864 1.535534 0 2.1213204l-7.0711162 7.0703398 7.0711162 7.0717958c.5857864.5857864.5857864 1.5355339 0 2.1213204-.5857865.5857864-1.535534.5857864-2.1213204 0l-7.0717958-7.0711162-7.0703398 7.0711162c-.5857864.5857864-1.5355339.5857864-2.1213204 0-.5857864-.5857865-.5857864-1.535534 0-2.1213204l7.0706602-7.0717958-7.0706602-7.0703398c-.5857864-.5857864-.5857864-1.5355339 0-2.1213204.5857865-.5857864 1.535534-.5857864 2.1213204 0l7.0703398 7.0706602 7.0717958-7.0706602c.5857864-.5857864 1.5355339-.5857864 2.1213204 0z"
+      class="fill-color"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icon-donate-unpadded.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path
+      class="fill-color"
+      d="m32.6,8.12c-1.57,-1.51 -3.46,-2.21 -5.65,-2.11c-1,0.03 -2.14,0.51 -3.42,1.44c-1.28,0.92 -2.28,2.09 -3.03,3.51c-0.71,-1.41 -1.72,-2.59 -3,-3.51c-1.29,-0.93 -2.43,-1.41 -3.41,-1.44c-1.46,-0.07 -2.8,0.23 -4.02,0.88c-1.23,0.65 -2.21,1.6 -2.94,2.83c-0.74,1.24 -1.11,2.63 -1.12,4.17c-0.05,2.56 0.85,5.01 2.68,7.37c1.46,1.88 3.52,4.21 6.19,7.04c2.66,2.81 4.53,4.71 5.62,5.69c1,-0.88 2.85,-2.75 5.55,-5.6s4.81,-5.23 6.31,-7.13c1.81,-2.36 2.71,-4.81 2.66,-7.37c-0.04,-2.35 -0.83,-4.28 -2.4,-5.77z"
+    />
+  </svg>
+`;

package/src/assets/img/icon-donate.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path
+      class="fill-color"
+      d="m30.0120362 11.0857287c-1.2990268-1.12627221-2.8599641-1.65258786-4.682812-1.57894699-.8253588.02475323-1.7674318.3849128-2.8262192 1.08047869-1.0587873.6955659-1.89622 1.5724492-2.512298 2.63065-.591311-1.0588196-1.4194561-1.9357029-2.4844351-2.63065-1.0649791-.69494706-2.0039563-1.05510663-2.8169316-1.08047869-1.2067699-.04950647-2.318187.17203498-3.3342513.66462439-1.0160643.4925893-1.82594378 1.2002224-2.42963831 2.1228992-.60369453.9226769-.91173353 1.9629315-.92411701 3.1207641-.03715043 1.9202322.70183359 3.7665141 2.21695202 5.5388457 1.2067699 1.4035084 2.912594 3.1606786 5.1174721 5.2715107 2.2048782 2.1108321 3.7565279 3.5356901 4.6549492 4.2745742.8253588-.6646243 2.355647-2.0647292 4.5908647-4.2003145s3.9747867-3.9171994 5.218707-5.3448422c1.502735-1.7723316 2.2355273-3.6186135 2.1983769-5.5388457-.0256957-1.7608832-.6875926-3.2039968-1.9866194-4.3302689z"
+    />
+  </svg>
+`;

package/src/assets/img/icon-ellipses.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="ellipsesTitleID ellipsesDescID"
+  >
+    <title id="ellipsesTitleID">Ellipses icon</title>
+    <desc id="ellipsesDescID">An illustration of text ellipses.</desc>
+    <path
+      class="fill-color"
+      d="m10.5 17.5c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5c-1.38071187 0-2.5-1.1192881-2.5-2.5s1.11928813-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icon-ia-logo.ts

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    class="ia-logo"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/assets/img/icon-images.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="imagesTitleID imagesDescID"
+  >
+    <title id="imagesTitleID">Images icon</title>
+    <desc id="imagesDescID">An illustration of two photographs.</desc>
+    <path
+      class="fill-color"
+      d="m20.8219178 15.3769871c0 1.1136708-.8767123 1.8932404-1.8630137 1.8932404s-1.9726027-.8909367-1.9726027-1.8932404c0-1.0023038.8767123-1.8932404 1.9726027-1.8932404.9863014 0 1.8630137.8909366 1.8630137 1.8932404zm-5.9178082-3.7864808h15.4520548v6.0138225l-1.9726028-3.3410125-2.6301369 6.3479237-2.1917809-2.67281-6.1369863 5.1228859h-2.5205479zm-1.7534247-1.6705063v14.9231892h18.8493151v-14.9231892zm-2.9589041 7.2388604c.2191781 0 1.9726028-.3341012 1.9726028-.3341012v-2.0046075l-4.1643836.5568354c.43835616 4.7887846.87671233 9.9116704 1.31506849 14.700455 6.02739731-.5568354 13.26027401-1.5591391 19.39726031-2.1159746-.1095891-.5568354-.1095891-2.0046075-.2191781-2.67281-.4383562.1113671-1.4246575 0-1.8630137.1113671v.8909367c-5.1506849.4454683-10.3013699 1.1136708-15.4520548 1.6705062.109589-.111367-.5479452-7.0161262-.9863014-10.8026071z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icon-search.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="searchTitleID searchDescID"
+  >
+    <title id="searchTitleID">Search icon</title>
+    <desc id="searchDescID">An illustration of a magnifying glass.</desc>
+    <path
+      class="fill-color"
+      d="m32.4526364 29.8875889-8.1719472-7.9751279c1.1046135-1.4876138 1.7652549-3.3102407 1.7652549-5.2846451 0-.101185-.0142895-.1981539-.030573-.2944743.0166158-.0976175.0309053-.196208.0309053-.2990145 0-4.9814145-4.152935-9.0343271-9.2572866-9.0343271-.0907218 0-.1781206.01394537-.2655193.02594487-.0880633-.0119995-.1747974-.02594487-.2655193-.02594487-5.1046839 0-9.25761889 4.0529126-9.25761889 9.0343271 0 .1011849.01395722.1981539.03057294.2947985-.01694804.0976176-.03090525.1958838-.03090525.2986903 0 4.9814145 4.1526027 9.0346514 9.2572866 9.0346514.0907218 0 .1777882-.0139454.2658516-.0262692.0873987.0123238.1741328.0262692.265187.0262692 1.7306942 0 3.3467399-.4747911 4.7338208-1.2852439l8.2882574 8.0886366c.3652137.3564177.843082.53414 1.3212826.53414.4782007 0 .9567336-.1780467 1.3212827-.53414.7294304-.7118622.7294304-1.8660845-.0003323-2.5782711zm-15.9526364-7.8875889c-.0832667-.0118703-.1652765-.0253024-.2513711-.0253024-2.8781993 0-5.2197212-2.3278242-5.2197212-5.1891862 0-.0974612-.013197-.1908615-.0289077-.2836371.0160249-.0940251.0292219-.1889874.0292219-.2880105 0-2.861362 2.3418361-5.1891861 5.2200354-5.1891861.0854662 0 .1677902-.0131198.2510569-.0246777.0826383.0115579.1649623.0246777.2510569.0246777 2.8781993 0 5.2197212 2.3278241 5.2197212 5.1891861 0 .0974612.0135112.1908616.0289077.2839496-.0157107.0940251-.0295361.1886749-.0295361.287698 0 2.861362-2.3415219 5.1891862-5.2197212 5.1891862-.0860946 0-.1684187.0134321-.2507427.0253024z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icon-software.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="softwareTitleID softwareDescID"
+  >
+    <title id="softwareTitleID">Software icon</title>
+    <desc id="softwareDescID">An illustration of a 3.5" floppy disk.</desc>
+    <path
+      class="fill-color"
+      d="m32 30.6900373v-21.44521088c0-.82988428-.4156786-1.24482642-1.2470357-1.24482642h-21.50592858c-.83135715 0-1.24703572.4221795-1.24703572 1.26653851v21.44521089c0 .8588337.41567857 1.2882506 1.24703572 1.2882506h21.48327168c.8458575 0 1.2687863-.4366542 1.2687863-1.3099627zm-5.9950155-20.4410268v6.114667c0 .6694561-.3428744 1.0041841-1.0286232 1.0041841h-10.1294464c-.2622159 0-.4773054-.0802141-.6452685-.2406423s-.2519447-.3642806-.2519447-.6115572v-6.1363791l.0217506-.1311772h12.0326259zm-4.9437353.8295827v5.0010178h3.0405558v-5.0010178zm-9.7134658 18.8035735v-7.753025c0-.5241057.1604108-.9025595.4812325-1.1353613.1897138-.1453504.4011782-.2180256.6343932-.2180256h14.7451099c.3208217 0 .5905898.1091636.8093044.3274907s.3280719.5023936.3280719.8521995v7.8181612l-.0217506.1094652h-16.9772676z"
+    />
+  </svg>
+`;

package/src/assets/img/icon-texts.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="textsTitleID textsDescID"
+  >
+    <title id="textsTitleID">Texts icon</title>
+    <desc id="textsDescID">An illustration of an open book.</desc>
+    <path
+      class="fill-color"
+      d="m10.3323235 11.0007023h6.9060825c.8851083 0 1.5847122.3064258 2.0988114.9192774v14.4324451h-.6460032c-.1435563-.120323-.3528315-.2434552-.6278257-.3693964-.2749942-.1259413-.5201585-.2191097-.7354929-.2795053l-.3048241-.1081503h-5.7042647c-.3108832 0-.5621067-.0601615-.7536705-.1804846-.0717781-.0599274-.1256117-.1439663-.1615008-.2521166-.0358891-.1081502-.0598928-.2043619-.0720112-.2886348v-13.8741368zm19.1752505 0v13.603761c-.0717781.3361555-.2211606.5943584-.4481473.7746089-.0717781.0599274-.1733862.1079162-.304824.1439663-.1314379.0360501-.2451643.0601615-.3411793.0723343h-5.5965975c-.9568865.2640552-1.5068748.5164059-1.649965.757052h-.6634817v-14.4324451c.5140992-.6128516 1.2076439-.9192774 2.0806339-.9192774h6.92426zm1.3814961.6489017-.1796783 15.2976474c-.0955489 0-1.0342578.0119386-2.8161268.035816-1.7818691.0238773-3.3006293.0898911-4.5562806.1980414-1.2556514.1081503-1.9613144.2884008-2.1169891.5407514-.0955488.1924233-.5439291.273419-1.345141.2429871-.8012118-.0304319-1.3155441-.1776755-1.5429969-.4417308-.334654-.3843783-3.4558378-.5765674-9.36355164-.5765674v-15.3875385l-.96830576.3960828v16.2702977c6.4096947-.2041278 9.7760429-.0840388 10.0990445.3602669.2391051.276228.9864833.414342 2.2421347.414342.1915638 0 .4187835-.0210682.6816593-.0632047s.4810068-.0870821.6543929-.1348367c.1733862-.0477547.2719646-.0838048.2957353-.1081503.0838965-.1563732.9599161-.2675666 2.6280587-.3335805 1.6681426-.0660138 3.3213703-.0931684 4.9596831-.0814638l2.4392915.0182591v-16.2344816z"
+    />
+  </svg>
+`;

package/src/assets/img/{icon-upload-unpadded.js → icon-upload-unpadded.ts}

@@ -1,4 +1,4 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import { html } from 'lit';
 
 export default html`
   <svg
@@ -9,6 +9,10 @@ export default html`
     aria-labelledby="uploadTitleID uploadDescID"
   >
     <title id="uploadTitleID">Upload files</title>
-    <path class="fill-color" d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z" fill-rule="evenodd"/>
+    <path
+      class="fill-color"
+      d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z"
+      fill-rule="evenodd"
+    />
   </svg>
 `;

package/src/assets/img/icon-upload.ts

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="uploadTitleID uploadDescID"
+  >
+    <title id="uploadTitleID">Upload icon</title>
+    <desc id="uploadDescID">
+      An illustration of a horizontal line over an up pointing arrow.
+    </desc>
+    <path
+      class="fill-color"
+      d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icon-user.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="userTitleID userDescID"
+  >
+    <title id="userTitleID">User icon</title>
+    <desc id="userDescID">An illustration of a person's head and chest.</desc>
+    <path
+      class="fill-color"
+      d="m20.7130435 18.0434783c-3.5658385 0-6.4565218-2.9198821-6.4565218-6.5217392 0-3.60185703 2.8906833-6.5217391 6.4565218-6.5217391s6.4565217 2.91988207 6.4565217 6.5217391c0 3.6018571-2.8906832 6.5217392-6.4565217 6.5217392zm-12.9130435 16.9565217c0-7.9240855 5.7813665-14.3478261 12.9130435-14.3478261s12.9130435 6.4237406 12.9130435 14.3478261z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;