@internetarchive/collection-browser 4.6.0 → 4.7.1-alpha-webdev9189.0

package/.github/workflows/ci.yml

@@ -12,15 +12,17 @@ jobs:
 
     steps:
     - uses: actions/checkout@v6
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v6
       with:
-        node-version: latest
+        node-version: 24
+        cache: pnpm
 
     - name: Install dependencies
-      run: yarn install
+      run: pnpm install --frozen-lockfile
 
     - name: Run tests
-      run: yarn run test
+      run: pnpm run test
 
     - uses: codecov/codecov-action@v6
       with:

package/.github/workflows/gh-pages-main.yml

@@ -17,15 +17,17 @@ jobs:
         with:
           persist-credentials: false
 
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
-          node-version: latest
+          node-version: 24
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn install
+        run: pnpm install --frozen-lockfile
 
       - name: Create build files for gh-pages deploy
-        run: yarn prepare:ghpages
+        run: pnpm run prepare:ghpages
 
       # Reference: https://github.com/JamesIves/github-pages-deploy-action
       - name: Deploy 🚀

package/.github/workflows/npm-publish.yml

@@ -17,23 +17,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-      - run: npm ci
-      - run: npm prepare
-      - run: npm test
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run test
 
   publish-npm:
     needs: build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: 24
+          cache: pnpm
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
+      - run: pnpm install --frozen-lockfile
       - run: npm publish --tag next
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/pr-preview.yml

@@ -21,14 +21,16 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v6
 
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
-          node-version: latest
+          node-version: 24
+          cache: pnpm
 
       - name: Install and Build
         run: |
-          yarn install
-          yarn prepare:ghpages
+          pnpm install --frozen-lockfile
+          pnpm run prepare:ghpages
 
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview

package/README.md

@@ -17,48 +17,32 @@ import '@internetarchive/collection-browser';
 
 ## Local Demo with `web-dev-server`
 ```bash
-yarn install
-yarn start
+pnpm install
+pnpm start
 ```
 To run a local development server that serves the basic demo located in `index.html`
 
 ## Testing with Web Test Runner
 To run the suite of Web Test Runner tests, run
 ```bash
-yarn run test
+pnpm run test
 ```
 
 To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
 
 ```bash
-yarn run test:watch
+pnpm run test:watch
 ```
 
 ## Linting with ESLint, Prettier, and Types
 To scan the project for linting errors, run
 ```bash
-yarn run lint
-```
-
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
-```
-```bash
-yarn run lint:prettier
+pnpm run lint
 ```
 
 To automatically fix many linting errors, run
 ```bash
-yarn run format
-```
-
-You can format using ESLint and Prettier individually as well
-```bash
-yarn run format:eslint
-```
-```bash
-yarn run format:prettier
+pnpm run format
 ```
 
 ## Tooling configs
@@ -72,7 +56,7 @@ If you customize the configuration a lot, you can consider moving them to indivi
 Live demo app from current main branch: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
 
 ```
-yarn run deploy
+pnpm run deploy
 ```
 
 ## Automatic Deploy of Demo App

package/dist/src/app-root.d.ts

@@ -35,7 +35,7 @@ export declare class AppRoot extends LitElement {
     protected updated(changed: PropertyValues): void;
     private queryUpdated;
     private get getClass();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     private setPlaceholderType;
     private baseQueryChanged;
     /** Handler for search type changes coming from collection browser */

package/dist/src/assets/img/icons/arrow-left.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/arrow-right.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/chevron.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/close-circle-dark.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/contract.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<1>;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/src/assets/img/icons/empty-query.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/expand.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<1>;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/src/assets/img/icons/eye-closed.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/eye.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/favorite-filled.d.ts

@@ -1 +1 @@
-export declare const favoriteFilledIcon: import("lit-html").TemplateResult<1>;
+export declare const favoriteFilledIcon: import("lit").TemplateResult<1>;

package/dist/src/assets/img/icons/favorite-unfilled.d.ts

@@ -1 +1 @@
-export declare const favoriteUnfilledIcon: import("lit-html").TemplateResult<1>;
+export declare const favoriteUnfilledIcon: import("lit").TemplateResult<1>;

package/dist/src/assets/img/icons/filter.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<1>;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/src/assets/img/icons/login-required.d.ts

@@ -1 +1 @@
-export declare const loginRequiredIcon: import("lit-html").TemplateResult<2>;
+export declare const loginRequiredIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/account.d.ts

@@ -1 +1 @@
-export declare const accountIcon: import("lit-html").TemplateResult<2>;
+export declare const accountIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/audio.d.ts

@@ -1 +1 @@
-export declare const audioIcon: import("lit-html").TemplateResult<2>;
+export declare const audioIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/collection.d.ts

@@ -1 +1 @@
-export declare const collectionIcon: import("lit-html").TemplateResult<2>;
+export declare const collectionIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/data.d.ts

@@ -1 +1 @@
-export declare const dataIcon: import("lit-html").TemplateResult<2>;
+export declare const dataIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/etree.d.ts

@@ -1 +1 @@
-export declare const etreeIcon: import("lit-html").TemplateResult<2>;
+export declare const etreeIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/film.d.ts

@@ -1 +1 @@
-export declare const filmIcon: import("lit-html").TemplateResult<2>;
+export declare const filmIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/images.d.ts

@@ -1 +1 @@
-export declare const imagesIcon: import("lit-html").TemplateResult<2>;
+export declare const imagesIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/radio.d.ts

@@ -1 +1 @@
-export declare const radioIcon: import("lit-html").TemplateResult<2>;
+export declare const radioIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/search.d.ts

@@ -1 +1 @@
-export declare const searchIcon: import("lit-html").TemplateResult<2>;
+export declare const searchIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/software.d.ts

@@ -1 +1 @@
-export declare const softwareIcon: import("lit-html").TemplateResult<2>;
+export declare const softwareIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/texts.d.ts

@@ -1 +1 @@
-export declare const textsIcon: import("lit-html").TemplateResult<2>;
+export declare const textsIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/tv-commercial.d.ts

@@ -1 +1 @@
-export declare const tvCommercialIcon: import("lit-html").TemplateResult<1>;
+export declare const tvCommercialIcon: import("lit").TemplateResult<1>;

package/dist/src/assets/img/icons/mediatype/tv-fact-check.d.ts

@@ -1 +1 @@
-export declare const tvFactCheckIcon: import("lit-html").TemplateResult<1>;
+export declare const tvFactCheckIcon: import("lit").TemplateResult<1>;

package/dist/src/assets/img/icons/mediatype/tv-quote.d.ts

@@ -1 +1 @@
-export declare const tvQuoteIcon: import("lit-html").TemplateResult<1>;
+export declare const tvQuoteIcon: import("lit").TemplateResult<1>;

package/dist/src/assets/img/icons/mediatype/tv.d.ts

@@ -1 +1 @@
-export declare const tvIcon: import("lit-html").TemplateResult<2>;
+export declare const tvIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/video.d.ts

@@ -1 +1 @@
-export declare const videoIcon: import("lit-html").TemplateResult<2>;
+export declare const videoIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/web.d.ts

@@ -1 +1 @@
-export declare const webIcon: import("lit-html").TemplateResult<2>;
+export declare const webIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/null-result.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit-html").TemplateResult<2>;
+declare const _default: import("lit").TemplateResult<2>;
 export default _default;

package/dist/src/assets/img/icons/quote.d.ts

@@ -1 +1 @@
-export declare const quoteIcon: import("lit-html").TemplateResult<2>;
+export declare const quoteIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/restricted.d.ts

@@ -1 +1 @@
-export declare const restrictedIcon: import("lit-html").TemplateResult<2>;
+export declare const restrictedIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/reviews.d.ts

@@ -1 +1 @@
-export declare const reviewsIcon: import("lit-html").TemplateResult<2>;
+export declare const reviewsIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/upload.d.ts

@@ -1 +1 @@
-export declare const uploadIcon: import("lit-html").TemplateResult<2>;
+export declare const uploadIcon: import("lit").TemplateResult<2>;

package/dist/src/assets/img/icons/views.d.ts

@@ -1 +1 @@
-export declare const viewsIcon: import("lit-html").TemplateResult<2>;
+export declare const viewsIcon: import("lit").TemplateResult<2>;

package/dist/src/circular-activity-indicator.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement } from 'lit';
 export declare class CircularActivityIndicator extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static get styles(): CSSResultGroup;
 }

package/dist/src/collection-browser.js

@@ -649,10 +649,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
           <slot name="cb-results"></slot>
-          ${this.displayMode === `list-compact` && this.totalResults
+          <div id="results-body">
+            <div id="results-main">
+              ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
             : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+              ${this.suppressResultTiles
+            ? nothing
+            : this.infiniteScrollerTemplate}
+            </div>
+            <slot name="results-aside"></slot>
+          </div>
         </section>
       </div>
     `;
@@ -747,6 +754,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
         <slot name="sort-options-right" slot="sort-options-right"></slot>
+        <slot name="sort-bar-end" slot="sort-bar-end"></slot>
       </sort-filter-bar>
     `;
     }
@@ -2219,6 +2227,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           padding: 5px 5px 0;
         }
 
+        /*
+         * The results sit in a row with the optional results-aside slot, which
+         * lays out beside them as a flex item and takes its own width and spacing
+         */
+        #results-body {
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #results-main {
+          flex: 1;
+          min-width: 0;
+        }
+
         #left-column {
           width: var(--leftColumnWidth, 18rem);
           /* Prevents Safari from shrinking col at first draw */