@internetarchive/collection-browser 0.4.11 → 0.4.13-alpha.1

package/src/collection-facets/more-facets-content.ts

@@ -37,6 +37,7 @@ import {
   analyticsActions,
   analyticsCategories,
 } from '../utils/analytics-events';
+import './toggle-switch';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {
@@ -59,7 +60,8 @@ export class MoreFacetsContent extends LitElement {
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
-  @property({ type: String }) sortedBy: 'count' | 'alpha' = 'count';
+  @property({ type: String }) sortedBy: AggregationSortType =
+    AggregationSortType.COUNT;
 
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
@@ -253,9 +255,7 @@ export class MoreFacetsContent extends LitElement {
 
       // sort facets in specific order
       let castedBuckets = aggregation.getSortedBuckets(
-        this.sortedBy === 'alpha'
-          ? AggregationSortType.ALPHABETICAL
-          : AggregationSortType.COUNT
+        this.sortedBy
       ) as Bucket[];
 
       if (option === 'collection') {
@@ -369,28 +369,28 @@ export class MoreFacetsContent extends LitElement {
     return nothing;
   }
 
-  private sortFacetAggregation() {
-    this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
+  private sortFacetAggregation(facetSortType: AggregationSortType) {
+    this.sortedBy = facetSortType;
     this.dispatchEvent(
       new CustomEvent('sortedFacets', { detail: this.sortedBy })
     );
   }
 
   private get getModalHeaderTemplate(): TemplateResult {
-    const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by value';
-
     return html`<span class="sr-only">More facets for:</span>
       <span class="title">
         ${this.facetGroupTitle}
-        <button
-          class="sort-button"
-          @click=${(e: Event) => {
-            e.preventDefault();
-            this.sortFacetAggregation();
+        <label class="sort-label">Sort by:</label>
+        <toggle-switch
+          class="sort-toggle"
+          leftValue=${AggregationSortType.COUNT}
+          leftLabel="Count"
+          rightValue=${AggregationSortType.ALPHABETICAL}
+          rightLabel=${this.facetGroupTitle}
+          @change=${(e: CustomEvent<string>) => {
+            this.sortFacetAggregation(Number(e.detail) as AggregationSortType);
           }}
-        >
-          ${title}
-        </button>
+        ></toggle-switch>
       </span>`;
   }
 
@@ -447,7 +447,7 @@ export class MoreFacetsContent extends LitElement {
       }
       section#more-facets {
         overflow: auto;
-        padding: 10px; // leaves room for scroll bar to appear without overlaying on content
+        padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
       }
       .header-content .title {
         display: block;
@@ -456,40 +456,22 @@ export class MoreFacetsContent extends LitElement {
         padding: 0 10px;
         font-weight: bold;
       }
-      .sort-button {
-        margin-left: 0.7rem;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: var(--ia-theme-link-color, #4b64ff);
+
+      .sort-label {
+        margin-left: 20px;
         font-size: 1.3rem;
-        font-weight: normal;
-        cursor: pointer;
       }
-      .sort-button:hover {
-        text-decoration: underline;
+
+      .sort-toggle {
+        font-weight: normal;
       }
+
       .facets-content {
         font-size: 1.2rem;
         max-height: 300px;
         overflow: auto;
         padding: 10px;
       }
-      .page-number {
-        background: none;
-        border: 0;
-        cursor: pointer;
-        border-radius: 100%;
-        width: 25px;
-        height: 25px;
-        margin: 10px;
-        font-size: 1.4rem;
-        vertical-align: middle;
-      }
-      .current-page {
-        background: black;
-        color: white;
-      }
       .facets-loader {
         margin-bottom: 20px;
         width: 70px;
@@ -506,7 +488,7 @@ export class MoreFacetsContent extends LitElement {
         cursor: pointer;
       }
       .btn-cancel {
-        background-color: #000;
+        background-color: #2c2c2c;
         color: white;
       }
       .btn-submit {
@@ -528,11 +510,6 @@ export class MoreFacetsContent extends LitElement {
         clip: rect(0, 0, 0, 0);
         border: 0;
       }
-      .sorting-icon {
-        height: 15px;
-        vertical-align: baseline;
-        cursor: pointer;
-      }
     `;
   }
 }

package/src/collection-facets/more-facets-pagination.ts

@@ -257,17 +257,19 @@ export class MoreFacetsPagination extends LitElement {
       }
       .facets-pagination .arrow-icon svg {
         height: 14px;
+        fill: #2c2c2c;
       }
       .facets-pagination button,
       .facets-pagination i {
         background: none;
         border: 0;
         cursor: pointer;
-        border-radius: 100%;
+        border-radius: 4px;
         margin: 10px 5px;
         padding: 5px;
         font-size: 1.4rem;
-        vertical-align: middle;
+        color: inherit;
+        vertical-align: baseline;
         display: inline-block;
         min-width: 2.5rem;
       }
@@ -276,7 +278,7 @@ export class MoreFacetsPagination extends LitElement {
         display: inline;
       }
       .facets-pagination button.current {
-        background: black;
+        background: #2c2c2c;
         color: white;
       }
       .page-numbers {

package/src/collection-facets/toggle-switch.ts

@@ -0,0 +1,184 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+export type Side = 'left' | 'right';
+
+@customElement('toggle-switch')
+export class ToggleSwitch extends LitElement {
+  /**
+   * The value this switch should have when toggled to the left.
+   */
+  @property({ type: String, attribute: true }) leftValue: string = '';
+
+  /**
+   * The human-readable label to display on the left side of this switch.
+   * If none is provided, `leftValue` is used.
+   */
+  @property({ type: String, attribute: true }) leftLabel?: string;
+
+  /**
+   * The value this switch should have when toggled to the right.
+   */
+  @property({ type: String, attribute: true }) rightValue: string = '';
+
+  /**
+   * The human-readable label to display on the right side of this switch.
+   * If none is provided, `rightValue` is used.
+   */
+  @property({ type: String, attribute: true }) rightLabel?: string;
+
+  /**
+   * Which side of the switch is selected (`'left'` or `'right'`).
+   */
+  @property({ type: String, attribute: true }) side: Side = 'left';
+
+  @query('#switch-left')
+  private leftRadio!: HTMLInputElement;
+
+  render() {
+    return html`
+      <div id="container">
+        <label for="switch-left">${this.leftLabel ?? this.leftValue}</label>
+        <input
+          type="radio"
+          id="switch-left"
+          class="sr-only"
+          name="switch"
+          .value=${this.leftValue}
+          .checked=${this.side === 'left'}
+          @change=${this.handleRadioChange}
+        />
+        <input
+          type="radio"
+          id="switch-right"
+          class="sr-only"
+          name="switch"
+          .value=${this.rightValue}
+          .checked=${this.side === 'right'}
+          @change=${this.handleRadioChange}
+        />
+        <button
+          id="switch-button"
+          class=${this.side}
+          aria-hidden="true"
+          @click=${this.handleClick}
+        >
+          <div id="knob"></div>
+        </button>
+        <label for="switch-right">${this.rightLabel ?? this.rightValue}</label>
+      </div>
+    `;
+  }
+
+  /**
+   * The currently selected value of this switch.
+   */
+  get value(): string {
+    return this.side === 'left' ? this.leftValue : this.rightValue;
+  }
+
+  /**
+   * The label for the currently selected value of this switch.
+   * Falls back to the current value if its label is not defined.
+   */
+  get selectedLabel(): string {
+    return this.side === 'left'
+      ? this.leftLabel ?? this.leftValue
+      : this.rightLabel ?? this.rightValue;
+  }
+
+  private handleClick(): void {
+    this.side = this.side === 'left' ? 'right' : 'left';
+    this.emitChangeEvent();
+  }
+
+  private handleRadioChange(): void {
+    this.side = this.leftRadio.checked ? 'left' : 'right';
+    this.emitChangeEvent();
+  }
+
+  private emitChangeEvent(): void {
+    const event = new CustomEvent<string>('change', {
+      detail: this.value,
+    });
+    this.dispatchEvent(event);
+  }
+
+  static get styles(): CSSResultGroup {
+    const switchWidth = css`var(--switchWidth, 30px)`;
+    const switchHeight = css`var(--switchHeight, 14px)`;
+    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;
+    const switchMarginRight = css`var(--switchMarginRight, 5px)`;
+    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;
+    const switchBgColor = css`var(--switchBgColor, #194880)`;
+    const switchBorderColor = css`var(--switchBorderColor, #194880)`;
+    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;
+    const knobColor = css`var(--knobColor, white)`;
+    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;
+    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;
+
+    return css`
+      #container {
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        font-size: ${labelFontSize};
+      }
+
+      #switch-button {
+        width: ${switchWidth};
+        height: ${switchHeight};
+        margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
+        padding: 0;
+        border: ${switchBorderWidth} solid ${switchBorderColor};
+        border-radius: ${switchHeight};
+        box-sizing: content-box;
+        background: ${switchBgColor};
+        appearance: none;
+        cursor: pointer;
+      }
+
+      #switch-button.left #knob {
+        transform: translateX(0);
+      }
+
+      #switch-button.right #knob {
+        transform: translateX(calc(${switchWidth} - ${switchHeight}));
+      }
+
+      #switch-button:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+      }
+
+      #knob {
+        display: block;
+        width: ${switchHeight};
+        height: ${switchHeight};
+        border-radius: 50%;
+        background: ${knobColor};
+        transition: transform ${knobTransitionDuration} ${knobTransitionFn};
+      }
+
+      .sr-only {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        padding: 0 !important;
+        border: 0 !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #knob {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+    `;
+  }
+}

package/src/collection-facets.ts

@@ -126,16 +126,7 @@ export class CollectionFacets extends LitElement {
         (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)
           ? html`
               <div class="facet-group">
-                <h1>
-                  Year Published
-                  <feature-feedback
-                    featureIdentifier="HistogramDatePicker"
-                    prompt="What do you think of the Histogram Date Picker?"
-                    .featureFeedbackService=${this.featureFeedbackService}
-                    .resizeObserver=${this.resizeObserver}
-                    .recaptchaManager=${this.recaptchaManager}
-                  ></feature-feedback>
-                </h1>
+                <h1>Year Published</h1>
                 ${this.histogramTemplate}
               </div>
             `

package/src/empty-placeholder.ts

@@ -1,22 +1,35 @@
-import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  CSSResultGroup,
+  nothing,
+  TemplateResult,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
 import emptyQueryIcon from './assets/img/icons/empty-query';
 import nullResultIcon from './assets/img/icons/null-result';
 
-export type PlaceholderType = 'empty-query' | 'null-result' | null;
+export type PlaceholderType =
+  | 'empty-query'
+  | 'null-result'
+  | 'query-error'
+  | null;
 @customElement('empty-placeholder')
 export class EmptyPlaceholder extends LitElement {
   @property({ type: String }) placeholderType: PlaceholderType = null;
 
   @property({ type: Boolean }) isMobileView?: false;
 
+  @property({ type: String }) detailMessage?: string = '';
+
   render() {
     return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;
   }
 
-  private get placeholderTemplate() {
+  private get placeholderTemplate(): TemplateResult {
     return html`
       <div
         class="placeholder ${this.placeholderType} ${this.isMobileView
@@ -26,12 +39,13 @@ export class EmptyPlaceholder extends LitElement {
         ${choose(this.placeholderType, [
           ['empty-query', () => this.emptyQueryTemplate],
           ['null-result', () => this.nullResultTemplate],
+          ['query-error', () => this.queryErrorTemplate],
         ])}
       </div>
     `;
   }
 
-  private get emptyQueryTemplate() {
+  private get emptyQueryTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         To begin searching, enter a search term in the box above and hit "Go".
@@ -40,7 +54,7 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
-  private get nullResultTemplate() {
+  private get nullResultTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         Your search did not match any items in the Archive. Try different
@@ -50,6 +64,22 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
+  private get queryErrorTemplate(): TemplateResult {
+    return html`
+      <h2 class="title">
+        The search engine encountered an error, which might be related to your
+        search query.
+        <a
+          href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+        >
+          Tips for constructing search queries.
+        </a>
+      </h2>
+      <div>${nullResultIcon}</div>
+      <p class="error-details">Error details: ${this.detailMessage}</p>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -57,6 +87,16 @@ export class EmptyPlaceholder extends LitElement {
         width: 100%;
       }
 
+      a {
+        text-decoration: none;
+      }
+      a:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
       .placeholder {
         display: block;
       }
@@ -64,16 +104,22 @@ export class EmptyPlaceholder extends LitElement {
       .desktop svg {
         max-height: 40rem;
       }
-      .desktop .title {
+      .desktop .title,
+      .desktop .error-details {
         margin: 4rem 0;
       }
 
       .mobile svg {
         max-height: 20rem;
       }
-      .mobile .title {
+      .mobile .title,
+      .mobile .error-details {
         margin: 2rem 0.5;
       }
+
+      .error-details {
+        font-size: 1.2rem;
+      }
     `;
   }
 }

package/src/models.ts

@@ -1,4 +1,5 @@
 import type { MediaType } from '@internetarchive/field-parsers';
+import type { SortDirection } from '@internetarchive/search-service';
 
 export interface TileModel {
   averageRating?: number;
@@ -55,8 +56,8 @@ export enum SortField {
   'alltimeview' = 'alltimeview',
   'weeklyview' = 'weeklyview',
   'title' = 'title',
-  'datearchived' = 'datearchived',
   'date' = 'date',
+  'datearchived' = 'datearchived',
   'datereviewed' = 'datereviewed',
   'dateadded' = 'dateadded',
   'creator' = 'creator',
@@ -79,16 +80,30 @@ export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
   relevance: 'Relevance',
-  alltimeview: 'All-time Views',
-  weeklyview: 'Weekly Views',
+  alltimeview: 'All-time views',
+  weeklyview: 'Weekly views',
   title: 'Title',
-  datearchived: 'Date Archived',
-  date: 'Date Published',
-  datereviewed: 'Date Reviewed',
-  dateadded: 'Date Added',
+  date: 'Date published',
+  datearchived: 'Date archived',
+  datereviewed: 'Date reviewed',
+  dateadded: 'Date added',
   creator: 'Creator',
 };
 
+export const DefaultSortDirection: {
+  [key in SortField]: SortDirection;
+} = {
+  relevance: 'desc', // Can't actually change the sort direction for relevance
+  alltimeview: 'desc',
+  weeklyview: 'desc',
+  title: 'asc',
+  date: 'desc',
+  datearchived: 'desc',
+  datereviewed: 'desc',
+  dateadded: 'desc',
+  creator: 'asc',
+};
+
 /**
  * Maps the SortField above to the corresponding Metadata field in the API.
  */
@@ -99,8 +114,8 @@ export const SortFieldToMetadataField: {
   alltimeview: 'downloads',
   weeklyview: 'week',
   title: 'titleSorter',
-  datearchived: 'publicdate',
   date: 'date',
+  datearchived: 'publicdate',
   datereviewed: 'reviewdate',
   dateadded: 'addeddate',
   creator: 'creatorSorter',

package/src/sort-filter-bar/alpha-bar-tooltip.ts

@@ -24,12 +24,11 @@ export class AlphaBarTooltip extends LitElement {
       #tooltip-container {
         width: max-content;
         max-width: 200px;
-        padding-top: ${arrowSize};
         pointer-events: none;
       }
 
       #arrow {
-        position: absolute;
+        position: relative;
         left: calc(50% + ${arrowOffset});
         top: 0;
         width: 0;

package/src/sort-filter-bar/img/list.ts

@@ -1,5 +1,5 @@
 import { svg } from 'lit';
 
 export const listIcon = svg`
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="nonzero"><path d="m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z"/><path d="m97.8975061 61h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 19h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 74h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 32h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 87h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 45h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m0 0h25v25h-25z"/><path d="m0 55h25v25h-25z"/></g></svg>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z"/><path d="m97.8975061 61h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 19h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 74h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 32h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 87h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 45h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m0 0h25v25h-25z"/><path d="m0 55h25v25h-25z"/></g></svg>
 `;

package/src/sort-filter-bar/img/sort-toggle-disabled.ts

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+
+export const sortDisabledIcon = html`
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#bbb" fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;

package/src/sort-filter-bar/img/sort-toggle-down.ts

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+
+export const sortDownIcon = html`
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#bbb"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#2c2c2c"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;

package/src/sort-filter-bar/img/sort-toggle-up.ts

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+
+export const sortUpIcon = html`
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#2c2c2c"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#bbb"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;