@internetarchive/collection-browser 4.8.0 → 4.8.1-alpha-webdev9189.1

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">
+            <slot name="results-aside"></slot>
+            <div id="results-main">
+              ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
             : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+              ${this.suppressResultTiles
+            ? nothing
+            : this.infiniteScrollerTemplate}
+            </div>
+          </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,23 @@ 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.
+         * The aside comes first in the DOM so keyboard and screen reader users
+         * reach it before the infinitely scrolling tiles, but it shows on the right.
+         */
+        #results-body {
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #results-main {
+          order: -1;
+          flex: 1;
+          min-width: 0;
+        }
+
         #left-column {
           width: var(--leftColumnWidth, 18rem);
           /* Prevents Safari from shrinking col at first draw */