@internetarchive/collection-browser 2.18.2 → 2.18.3-alpha-webdev7768.0

package/dist/src/sort-filter-bar/sort-filter-bar.js

@@ -70,36 +70,36 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         };
     }
     render() {
-        return html `
-      <div id="container">
-        <section id="sort-bar" aria-label="Sorting options">
-          <slot name="sort-options-left"></slot>
-          <div id="sort-options">
+        return html `
+      <div id="container">
+        <section id="sort-bar" aria-label="Sorting options">
+          <slot name="sort-options-left"></slot>
+          <div id="sort-options">
             ${!this.enableSortOptionsSlot
-            ? html `
-                  <div class="sort-direction-container">
-                    ${this.sortDirectionSelectorTemplate}
-                  </div>
-                  <span class="sort-by-text">${msg('Sort by:')}</span>
-                  <div id="sort-selector-container">
-                    ${this.mobileSortSelectorTemplate}
-                    ${this.desktopSortSelectorTemplate}
-                  </div>
+            ? html `
+                  <div class="sort-direction-container">
+                    ${this.sortDirectionSelectorTemplate}
+                  </div>
+                  <span class="sort-by-text">${msg('Sort by:')}</span>
+                  <div id="sort-selector-container">
+                    ${this.mobileSortSelectorTemplate}
+                    ${this.desktopSortSelectorTemplate}
+                  </div>
                 `
-            : html `<slot name="sort-options"></slot>`}
-          </div>
-          <slot name="sort-options-right"></slot>
-
+            : html `<slot name="sort-options"></slot>`}
+          </div>
+          <slot name="sort-options-right"></slot>
+
           ${this.suppressDisplayModes
             ? nothing
-            : html `<div id="display-style-selector">
-                ${this.displayOptionTemplate}
-              </div>`}
-        </section>
-
-        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
-        ${this.alphaBarTemplate}
-      </div>
+            : html `<div id="display-style-selector">
+                ${this.displayOptionTemplate}
+              </div>`}
+        </section>
+
+        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
+        ${this.alphaBarTemplate}
+      </div>
     `;
     }
     willUpdate(changed) {
@@ -233,15 +233,15 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     get sortDirectionSelectorTemplate() {
         const oppositeSortDirectionReadable = this.sortDirection === 'asc' ? 'descending' : 'ascending';
         const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;
-        return html `
-      <button
-        class="sort-direction-selector"
-        ?disabled=${!this.canChangeSortDirection}
-        @click=${this.handleSortDirectionClicked}
-      >
-        <span class="sr-only">${srLabel}</span>
-        ${this.sortDirectionIcon}
-      </button>
+        return html `
+      <button
+        class="sort-direction-selector"
+        ?disabled=${!this.canChangeSortDirection}
+        @click=${this.handleSortDirectionClicked}
+      >
+        <span class="sr-only">${srLabel}</span>
+        ${this.sortDirectionIcon}
+      </button>
     `;
     }
     /** Template to render the sort direction button's icon in the correct current state */
@@ -251,22 +251,22 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             return html `<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
         }
         // For all other sorts, show the ascending/descending direction
-        return html `
-      <div class="sort-direction-icon">
-        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
-      </div>
+        return html `
+      <div class="sort-direction-icon">
+        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
+      </div>
     `;
     }
     /** The template to render all the sort options in desktop view */
     get desktopSortSelectorTemplate() {
-        return html `
-      <div
-        id="desktop-sort-container"
-        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
-      >
-        <ul id="desktop-sort-selector">
+        return html `
+      <div
+        id="desktop-sort-container"
+        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
+      >
+        <ul id="desktop-sort-selector">
           ${this.showRelevance
-            ? html `<li>
+            ? html `<li>
                 ${this.getSortDisplayOption(SortField.relevance, {
                 onClick: () => {
                     this.dropdownBackdropVisible = false;
@@ -275,11 +275,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                         this.setSelectedSort(SortField.relevance);
                     }
                 },
-            })}
+            })}
               </li>`
-            : nothing}
-          <li>${this.viewsDropdownTemplate}</li>
-          <li>
+            : nothing}
+          <li>${this.viewsDropdownTemplate}</li>
+          <li>
             ${this.getSortDisplayOption(SortField.title, {
             onClick: () => {
                 this.dropdownBackdropVisible = false;
@@ -290,10 +290,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                     this.emitCreatorLetterChangedEvent();
                 }
             },
-        })}
-          </li>
-          <li>${this.dateDropdownTemplate}</li>
-          <li>
+        })}
+          </li>
+          <li>${this.dateDropdownTemplate}</li>
+          <li>
             ${this.getSortDisplayOption(SortField.creator, {
             onClick: () => {
                 this.dropdownBackdropVisible = false;
@@ -304,10 +304,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                     this.emitTitleLetterChangedEvent();
                 }
             },
-        })}
-          </li>
-        </ul>
-      </div>
+        })}
+          </li>
+        </ul>
+      </div>
     `;
     }
     /** The template to render all the sort options in mobile view */
@@ -316,11 +316,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             .filter(opt => opt.shownInSortBar)
             .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
             .filter(opt => this.showDateFavorited || opt.field !== SortField.datefavorited);
-        return html `
-      <div
-        id="mobile-sort-container"
-        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
-      >
+        return html `
+      <div
+        id="mobile-sort-container"
+        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
+      >
         ${this.getSortDropdown({
             displayName: html `${SORT_OPTIONS[this.finalizedSortField].displayName}`,
             id: 'mobile-dropdown',
@@ -332,8 +332,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                 this.dropdownBackdropVisible = this.mobileDropdown.open;
                 this.mobileDropdown.classList.toggle('open', this.mobileDropdown.open);
             },
-        })}
-      </div>
+        })}
+      </div>
     `;
     }
     /**
@@ -353,18 +353,18 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         var _a, _b;
         const isSelected = (_a = options === null || options === void 0 ? void 0 : options.selected) !== null && _a !== void 0 ? _a : this.finalizedSortField === sortField;
         const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SORT_OPTIONS[sortField].displayName;
-        return html `
-      <button
-        class=${isSelected ? 'selected' : nothing}
-        data-title="${displayName}"
+        return html `
+      <button
+        class=${isSelected ? 'selected' : nothing}
+        data-title="${displayName}"
         @click=${(e) => {
             var _a;
             e.preventDefault();
             (_a = options === null || options === void 0 ? void 0 : options.onClick) === null || _a === void 0 ? void 0 : _a.call(options, e);
-        }}
-      >
-        ${displayName}
-      </button>
+        }}
+      >
+        ${displayName}
+      </button>
     `;
     }
     /**
@@ -383,24 +383,24 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      */
     getSortDropdown(options) {
         var _a, _b, _c, _d, _e;
-        return html `
-      <ia-dropdown
-        id=${(_a = options.id) !== null && _a !== void 0 ? _a : nothing}
-        class=${options.selected ? 'selected' : nothing}
-        displayCaret
-        closeOnSelect
-        includeSelectedOption
-        .openViaButton=${options.selected}
-        .options=${options.dropdownOptions}
-        .selectedOption=${(_b = options.selectedOption) !== null && _b !== void 0 ? _b : ''}
-        @optionSelected=${(_c = options.onOptionSelected) !== null && _c !== void 0 ? _c : nothing}
-        @click=${(_d = options.onDropdownClick) !== null && _d !== void 0 ? _d : nothing}
-      >
-        <span
-          class="dropdown-label"
-          slot="dropdown-label"
-          data-title="${options.displayName.values}"
-          @click=${(_e = options.onLabelInteraction) !== null && _e !== void 0 ? _e : nothing}
+        return html `
+      <ia-dropdown
+        id=${(_a = options.id) !== null && _a !== void 0 ? _a : nothing}
+        class=${options.selected ? 'selected' : nothing}
+        displayCaret
+        closeOnSelect
+        includeSelectedOption
+        .openViaButton=${options.selected}
+        .options=${options.dropdownOptions}
+        .selectedOption=${(_b = options.selectedOption) !== null && _b !== void 0 ? _b : ''}
+        @optionSelected=${(_c = options.onOptionSelected) !== null && _c !== void 0 ? _c : nothing}
+        @click=${(_d = options.onDropdownClick) !== null && _d !== void 0 ? _d : nothing}
+      >
+        <span
+          class="dropdown-label"
+          slot="dropdown-label"
+          data-title="${options.displayName.values}"
+          @click=${(_e = options.onLabelInteraction) !== null && _e !== void 0 ? _e : nothing}
           @keydown=${options.onLabelInteraction
             ? (e) => {
                 var _a;
@@ -408,11 +408,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                     (_a = options.onLabelInteraction) === null || _a === void 0 ? void 0 : _a.call(options, e);
                 }
             }
-            : nothing}
-        >
-          ${options.displayName}
-        </span>
-      </ia-dropdown>
+            : nothing}
+        >
+          ${options.displayName}
+        </span>
+      </ia-dropdown>
     `;
     }
     /** Generates a single dropdown option object for the given sort field */
@@ -422,10 +422,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             selectedHandler: () => {
                 this.selectDropdownSortField(sortField);
             },
-            label: html `
-        <span class="dropdown-option-label">
-          ${SORT_OPTIONS[sortField].displayName}
-        </span>
+            label: html `
+        <span class="dropdown-option-label">
+          ${SORT_OPTIONS[sortField].displayName}
+        </span>
       `,
         };
     }
@@ -517,48 +517,48 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     /** Template for rendering the three display mode options */
     /** Added data-testid for Playwright testing * */
     get displayOptionTemplate() {
-        return html `
-      <ul>
-        <li>
-          <button
-            id="grid-button"
+        return html `
+      <ul>
+        <li>
+          <button
+            id="grid-button"
             @click=${() => {
             this.displayMode = 'grid';
-        }}
-            class=${this.displayMode === 'grid' ? 'active' : ''}
-            title="Tile view"
-            data-testid="grid-button"
-          >
-            ${tileIcon}
-          </button>
-        </li>
-        <li>
-          <button
-            id="list-detail-button"
+        }}
+            class=${this.displayMode === 'grid' ? 'active' : ''}
+            title="Tile view"
+            data-testid="grid-button"
+          >
+            ${tileIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-detail-button"
             @click=${() => {
             this.displayMode = 'list-detail';
-        }}
-            class=${this.displayMode === 'list-detail' ? 'active' : ''}
-            title="List view"
-            data-testid="list-detail-button"
-          >
-            ${listIcon}
-          </button>
-        </li>
-        <li>
-          <button
-            id="list-compact-button"
+        }}
+            class=${this.displayMode === 'list-detail' ? 'active' : ''}
+            title="List view"
+            data-testid="list-detail-button"
+          >
+            ${listIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-compact-button"
             @click=${() => {
             this.displayMode = 'list-compact';
-        }}
-            class=${this.displayMode === 'list-compact' ? 'active' : ''}
-            title="Compact list view"
-            data-testid="list-compact-button"
-          >
-            ${compactIcon}
-          </button>
-        </li>
-      </ul>
+        }}
+            class=${this.displayMode === 'list-compact' ? 'active' : ''}
+            title="Compact list view"
+            data-testid="list-compact-button"
+          >
+            ${compactIcon}
+          </button>
+        </li>
+      </ul>
     `;
     }
     /**
@@ -566,12 +566,12 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      * dropdown menu while it is open.
      */
     get dropdownBackdrop() {
-        return html `
-      <div
-        id="sort-selector-backdrop"
-        @keyup=${this.closeDropdowns}
-        @click=${this.closeDropdowns}
-      ></div>
+        return html `
+      <div
+        id="sort-selector-backdrop"
+        @keyup=${this.closeDropdowns}
+        @click=${this.closeDropdowns}
+      ></div>
     `;
     }
     /** Closes all of the sorting dropdown components' menus */
@@ -710,20 +710,20 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     }
     get titleSelectorBar() {
         var _a;
-        return html ` <alpha-bar
-      .selectedLetter=${this.selectedTitleFilter}
-      .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.title}
-      ariaLandmarkLabel="Filter by title letter"
-      @letterChanged=${this.titleLetterChanged}
+        return html ` <alpha-bar
+      .selectedLetter=${this.selectedTitleFilter}
+      .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.title}
+      ariaLandmarkLabel="Filter by title letter"
+      @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
     }
     get creatorSelectorBar() {
         var _a;
-        return html ` <alpha-bar
-      .selectedLetter=${this.selectedCreatorFilter}
-      .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.creator}
-      ariaLandmarkLabel="Filter by creator letter"
-      @letterChanged=${this.creatorLetterChanged}
+        return html ` <alpha-bar
+      .selectedLetter=${this.selectedCreatorFilter}
+      .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.creator}
+      ariaLandmarkLabel="Filter by creator letter"
+      @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
     }
     titleLetterChanged(e) {
@@ -766,236 +766,236 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     static get styles() {
         return [
             srOnlyStyle,
-            css `
-        #container {
-          position: relative;
-        }
-
-        #sort-bar {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          border-bottom: 1px solid #2c2c2c;
-          font-size: 1.4rem;
-        }
-
-        #sort-options {
-          display: flex;
-          align-items: center;
-          flex-grow: 1;
-        }
-
-        ul {
-          list-style: none;
-          display: flex;
-          align-items: center;
-          margin: 0;
-          padding: 0;
-        }
-
-        li {
-          padding: 0;
-        }
-
-        .sort-by-text {
-          margin-right: 5px;
-          font-weight: bold;
-          white-space: nowrap;
-        }
-
-        .sort-direction-container {
-          display: flex;
-          align-self: stretch;
-          flex: 0;
-          margin: 0 5px;
-        }
-
-        .sort-direction-selector {
-          padding: 0;
-          border: none;
-          appearance: none;
-          background: transparent;
-          cursor: pointer;
-        }
-
-        .sort-direction-selector:disabled {
-          cursor: default;
-        }
-
-        .sort-direction-icon {
-          display: flex;
-          align-items: center;
-          background: none;
-          color: inherit;
-          border: none;
-          padding: 0;
-          outline: inherit;
-          width: 14px;
-          height: 14px;
-        }
-
-        .sort-direction-icon > svg {
-          flex: 1;
-        }
-
-        #date-sort-selector,
-        #view-sort-selector {
-          position: absolute;
-          left: 150px;
-          top: 45px;
-
-          z-index: 1;
-          padding: 1rem;
-          background-color: white;
-          border-radius: 2.5rem;
-          border: 1px solid #404142;
-        }
-
-        #sort-selector-container {
-          flex: 1;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-
-        #desktop-sort-container,
-        #mobile-sort-container {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-
-        /*
-          we move the desktop sort selector offscreen instead of display: none
-          because we need to observe the width of it vs its container to determine
-          if it's wide enough to display the desktop version and if you display: none,
-          the width becomes 0
-        */
-        #desktop-sort-container.hidden {
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-          visibility: hidden;
-        }
-
-        #mobile-sort-container.hidden {
-          display: none;
-        }
-
-        #sort-selector-backdrop {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100vw;
-          height: 100vh;
-          z-index: 1;
-          background-color: transparent;
-        }
-
-        #desktop-sort-selector {
-          display: inline-flex;
-        }
-
-        #desktop-sort-selector li {
-          display: flex;
-          align-items: center;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
-
-        #desktop-sort-selector li a {
-          padding: 0 5px;
-          text-decoration: none;
-          color: #333;
-          line-height: 2;
-        }
-
-        #desktop-sort-selector li button {
-          padding: 0px 5px;
-          border: none;
-          background: none;
-          font-family: inherit;
-          font-size: inherit;
-          color: #333;
-          line-height: 2;
-          cursor: pointer;
-          appearance: none;
-        }
-
-        #desktop-sort-selector li button.selected {
-          font-weight: bold;
-        }
-
-        /**
-         * Fix to not shift the sort-bar options when get selected
-         */
-        #desktop-sort-selector li button::before,
-        #desktop-sort-selector .dropdown-label::before {
-          display: block;
-          content: attr(data-title);
-          font-weight: bold;
-          height: 0;
-          overflow: hidden;
-          visibility: hidden;
-        }
-
-        #display-style-selector {
-          flex: 0;
-        }
-
-        #display-style-selector button {
-          background: none;
-          color: inherit;
-          border: none;
-          appearance: none;
-          cursor: pointer;
-          -webkit-appearance: none;
-          fill: #bbbbbb;
-        }
-
-        #display-style-selector button.active {
-          fill: var(--ia-theme-primary-text-color, #2c2c2c);
-        }
-
-        #display-style-selector button svg {
-          width: 24px;
-          height: 24px;
-        }
-
-        ia-dropdown {
-          --dropdownTextColor: white;
-          --dropdownOffsetTop: 0;
-          --dropdownBorderTopWidth: 0;
-          --dropdownBorderTopLeftRadius: 0;
-          --dropdownBorderTopRightRadius: 0;
-          --dropdownWhiteSpace: nowrap;
-          --dropdownListZIndex: 2;
-          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
-          --dropdownSelectedTextColor: white;
-          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
-          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
-          --caretHeight: 9px;
-          --caretWidth: 12px;
-          --caretPadding: 0 5px 0 0;
-        }
-        ia-dropdown.selected .dropdown-label {
-          font-weight: bold;
-        }
-        ia-dropdown.open {
-          z-index: 2;
-        }
-
-        .dropdown-label {
-          display: inline-block;
-          height: 100%;
-          padding-left: 5px;
-          font-size: 1.4rem;
-          font-family: var(--ia-theme-base-font-family);
-          line-height: 2;
-          color: var(--ia-theme-primary-text-color, #2c2c2c);
-          white-space: nowrap;
-          user-select: none;
-        }
+            css `
+        #container {
+          position: relative;
+        }
+
+        #sort-bar {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          border-bottom: 1px solid #2c2c2c;
+          font-size: 1.4rem;
+        }
+
+        #sort-options {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        ul {
+          list-style: none;
+          display: flex;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+        }
+
+        li {
+          padding: 0;
+        }
+
+        .sort-by-text {
+          margin-right: 5px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .sort-direction-container {
+          display: flex;
+          align-self: stretch;
+          flex: 0;
+          margin: 0 5px;
+        }
+
+        .sort-direction-selector {
+          padding: 0;
+          border: none;
+          appearance: none;
+          background: transparent;
+          cursor: pointer;
+        }
+
+        .sort-direction-selector:disabled {
+          cursor: default;
+        }
+
+        .sort-direction-icon {
+          display: flex;
+          align-items: center;
+          background: none;
+          color: inherit;
+          border: none;
+          padding: 0;
+          outline: inherit;
+          width: 14px;
+          height: 14px;
+        }
+
+        .sort-direction-icon > svg {
+          flex: 1;
+        }
+
+        #date-sort-selector,
+        #view-sort-selector {
+          position: absolute;
+          left: 150px;
+          top: 45px;
+
+          z-index: 1;
+          padding: 1rem;
+          background-color: white;
+          border-radius: 2.5rem;
+          border: 1px solid #404142;
+        }
+
+        #sort-selector-container {
+          flex: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        #desktop-sort-container,
+        #mobile-sort-container {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        /*
+          we move the desktop sort selector offscreen instead of display: none
+          because we need to observe the width of it vs its container to determine
+          if it's wide enough to display the desktop version and if you display: none,
+          the width becomes 0
+        */
+        #desktop-sort-container.hidden {
+          position: absolute;
+          top: -9999px;
+          left: -9999px;
+          visibility: hidden;
+        }
+
+        #mobile-sort-container.hidden {
+          display: none;
+        }
+
+        #sort-selector-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 1;
+          background-color: transparent;
+        }
+
+        #desktop-sort-selector {
+          display: inline-flex;
+        }
+
+        #desktop-sort-selector li {
+          display: flex;
+          align-items: center;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+
+        #desktop-sort-selector li a {
+          padding: 0 5px;
+          text-decoration: none;
+          color: #333;
+          line-height: 2;
+        }
+
+        #desktop-sort-selector li button {
+          padding: 0px 5px;
+          border: none;
+          background: none;
+          font-family: inherit;
+          font-size: inherit;
+          color: #333;
+          line-height: 2;
+          cursor: pointer;
+          appearance: none;
+        }
+
+        #desktop-sort-selector li button.selected {
+          font-weight: bold;
+        }
+
+        /**
+         * Fix to not shift the sort-bar options when get selected
+         */
+        #desktop-sort-selector li button::before,
+        #desktop-sort-selector .dropdown-label::before {
+          display: block;
+          content: attr(data-title);
+          font-weight: bold;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+
+        #display-style-selector {
+          flex: 0;
+        }
+
+        #display-style-selector button {
+          background: none;
+          color: inherit;
+          border: none;
+          appearance: none;
+          cursor: pointer;
+          -webkit-appearance: none;
+          fill: #bbbbbb;
+        }
+
+        #display-style-selector button.active {
+          fill: var(--ia-theme-primary-text-color, #2c2c2c);
+        }
+
+        #display-style-selector button svg {
+          width: 24px;
+          height: 24px;
+        }
+
+        ia-dropdown {
+          --dropdownTextColor: white;
+          --dropdownOffsetTop: 0;
+          --dropdownBorderTopWidth: 0;
+          --dropdownBorderTopLeftRadius: 0;
+          --dropdownBorderTopRightRadius: 0;
+          --dropdownWhiteSpace: nowrap;
+          --dropdownListZIndex: 2;
+          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
+          --dropdownSelectedTextColor: white;
+          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
+          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
+          --caretHeight: 9px;
+          --caretWidth: 12px;
+          --caretPadding: 0 5px 0 0;
+        }
+        ia-dropdown.selected .dropdown-label {
+          font-weight: bold;
+        }
+        ia-dropdown.open {
+          z-index: 2;
+        }
+
+        .dropdown-label {
+          display: inline-block;
+          height: 100%;
+          padding-left: 5px;
+          font-size: 1.4rem;
+          font-family: var(--ia-theme-base-font-family);
+          line-height: 2;
+          color: var(--ia-theme-primary-text-color, #2c2c2c);
+          white-space: nowrap;
+          user-select: none;
+        }
       `,
         ];
     }