@ucd-lib/theme-elements 0.0.5 → 0.0.9

package/brand/ucd-theme-header/ucd-theme-header.js

@@ -4,6 +4,7 @@ import {render, styles} from "./ucd-theme-header.tpl.js";
 import { 
   IntersectionObserverController,
   MutationObserverController, 
+  PopStateObserverController,
   WaitController } from '../../utils/controllers';
 
 /**
@@ -40,9 +41,6 @@ import {
  * 
  */
 export default class UcdThemeHeader extends LitElement {
-  
-  mutationObserver = new MutationObserverController(this);
-  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -54,10 +52,12 @@ export default class UcdThemeHeader extends LitElement {
       preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
+      _hasPrimaryNav: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
-      _brandingBarInView: {type: Boolean, state: true}
+      _brandingBarInView: {type: Boolean, state: true},
+      _components: {type: Object, state: true}
     };
   }
 
@@ -69,6 +69,10 @@ export default class UcdThemeHeader extends LitElement {
     super();
     this.render = render.bind(this);
 
+    this.mutationObserver = new MutationObserverController(this);
+    this.wait = new WaitController(this);
+    new PopStateObserverController(this, "_onLocationChange");
+
     this.siteName = "";
     this.siteUrl = "/";
     this.slogan = "";
@@ -77,14 +81,21 @@ export default class UcdThemeHeader extends LitElement {
     this.isDemo = false;
 
     this._transitioning = false;
+    this._hasPrimaryNav = false;
     this._hasSlottedBranding = false;
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
     this._brandingBarInView = false;
+    this._slottedComponents = {};
 
   }
 
+  /**
+   * @method connectedCallback
+   * @private
+   * @description Custom element lifecycle method
+   */
   connectedCallback(){
     super.connectedCallback();
     if ( !this.preventFixed ) {
@@ -92,6 +103,11 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method firstUpdated
+   * @private
+   * @description Lit lifecycle hook
+   */
   firstUpdated(){
     if ( !this.preventFixed ) {
       let aboveNav = this.renderRoot.getElementById('branding-bar-container');
@@ -99,11 +115,33 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method _onLocationChange
+   * @description Called when url changes by popstate controller
+   */
+  _onLocationChange(){
+    this.close();
+    if ( this._hasQuickLinks ){
+      this._slottedComponents.quickLinks.close();
+    }
+    if ( this._hasSearch ){
+      this._slottedComponents.search.close();
+    }
+  }
+
+  /**
+   * @method _onBrandingBarIntersection
+   * @private
+   * @description Called by intersection observer when branding bar enters/exits screen
+   * @param {*} entries 
+   */
   _onBrandingBarIntersection(entries){
     let offSetValue = 0;
     try {
       offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
-    } catch (error) {}
+    } catch (error) {
+      //
+    }
     if ( offSetValue > 150 ) offSetValue = 0;
     entries.forEach(entry => {
       this._brandingBarInView = entry.isIntersecting;
@@ -112,7 +150,7 @@ export default class UcdThemeHeader extends LitElement {
       } else {
         this.style.marginBottom = offSetValue + "px";
       }
-    })
+    });
   }
 
   /**
@@ -232,14 +270,18 @@ export default class UcdThemeHeader extends LitElement {
     let primaryNav = this.querySelector('ucd-theme-primary-nav');
     if ( primaryNav ) {
       primaryNav.setAttribute('slot', 'primary-nav');
+      this._hasPrimaryNav = true;
+      this._slottedComponents.primaryNav = primaryNav;
     } else {
       console.warn("No 'ucd-theme-primary-nav' child element found!");
+      this._hasPrimaryNav = false;
     }
 
     let quickLinks = this.querySelector('ucd-theme-quick-links');
     if ( quickLinks ) {
       quickLinks.setAttribute('slot', 'quick-links');
       this._hasQuickLinks = true;
+      this._slottedComponents.quickLinks = quickLinks;
     } else {
       this._hasQuickLinks = false;
     }
@@ -248,6 +290,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( search ) {
       search.setAttribute('slot', 'search');
       this._hasSearch = true;
+      this._slottedComponents.search = search;
     } else {
       this._hasSearch = false;
     }
@@ -256,6 +299,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( UcdlibBrandingBar ) {
       UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
       this._hasSlottedBranding = true;
+      this._slottedComponents.brandingBar = UcdlibBrandingBar;
     } else if ( this.querySelector("*[slot='branding-bar']") ){
       this._hasSlottedBranding = true;
     } else {

package/brand/ucd-theme-pagination/ucd-theme-pagination.js

@@ -12,6 +12,7 @@ import { BreakPointsController } from '../../utils/controllers';
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-pagination
  * 
  * @property {String} base-path - for anchor tag href
+ * @property {String} queryParams - Append query parameters if constructing an anchor tag
  * @property {String} current-page - Page to show and highlight
  * @property {String} max-pages - Max number of total pages
  * @property {String} visible-link-count - How many page links to show
@@ -35,7 +36,6 @@ import { BreakPointsController } from '../../utils/controllers';
  * 
  */
 export default class UcdThemePagination extends LitElement {
-  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -43,6 +43,10 @@ export default class UcdThemePagination extends LitElement {
         type: String, 
         attribute: 'base-path'
       },
+      queryParams: {
+        type: String,
+        attribute: 'query-params'
+      },
       useHash : {
         type: Boolean, 
         attribute: 'use-hash'
@@ -90,11 +94,14 @@ export default class UcdThemePagination extends LitElement {
   constructor() {
     super();
 
+    this.breakPoints = new BreakPointsController(this);
+
     this._pages = [];
     this.useHash = false;
     this.disableLabel = false;
     this.type = 'virtual';
     this.basePath = '';
+    this.queryParams = '';
     this.visibleLinkCount = 7;
     this.currentPage = 1;
     this.maxPages = 1;
@@ -190,7 +197,7 @@ export default class UcdThemePagination extends LitElement {
         </li>`;            
     }
 
-    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page;
+    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
     return html`<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
           html` <a style="pointer-events: none; cursor: default; color:#999999; background:white;" href="${href}">${args.label || page}</a>`: 

package/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js

@@ -36,9 +36,6 @@ import { MutationObserverController, BreakPointsController } from '../../utils/c
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
   .with(NavElement) {
 
-  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
-  breakPoints = new BreakPointsController(this);
-
   static get properties() {
     return {
       navType: {type: String, attribute: "nav-type"},
@@ -58,6 +55,9 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+    this.breakPoints = new BreakPointsController(this);
+
     this.navType = "superfish";
     this.styleModifiers = "";
     this.hoverDelay = 300;

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.js

@@ -19,9 +19,6 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  */
 export default class UcdThemeQuickLinks extends LitElement {
 
-  mutationObserver = new MutationObserverController(this);
-  wait = new WaitController(this);
-
   static get properties() {
     return {
       title: {type: String},
@@ -42,6 +39,8 @@ export default class UcdThemeQuickLinks extends LitElement {
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this);
+    this.wait = new WaitController(this);
 
     this.title = "Quick Links";
     this.styleModifiers = "";

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.tpl.js

@@ -84,7 +84,7 @@ return html`
       aria-controls="quick-links" 
       aria-expanded="${this.opened}" 
       aria-label="Toggle ${this.title} Menu">
-      ${this.title}<span class="submenu-toggle"><span class="submenu-toggle__icon">+</span></span>
+      ${this.title}<span class="submenu-toggle ${this.opened ? 'submenu-toggle--open' : ''}"><span class="submenu-toggle__icon">+</span></span>
     </button>
     <nav 
       id="quick-links" 

package/brand/ucd-theme-search-form/ucd-theme-search-form.js

@@ -11,6 +11,8 @@ import {render, styles } from "./ucd-theme-search-form.tpl.js";
  * @property {String} value - The search string
  * @property {String} placeholder - The input placeholder
  * @property {String} formAction - The action to be taken on form submit (optional)
+ * @property {String} formMethod - The http method used on submit (default=POST)
+ * @property {String} queryParam - The URL query parameter to use (default=searchterm)
  * 
  * @example
  *  <ucd-theme-form-search form-action="/url/to/post/to"></ucd-theme-form-search>
@@ -23,9 +25,11 @@ export default class UcdThemeSearchForm extends LitElement {
       value: {type: String},
       placeholder: {type: String, attribute: "placeholder"},
       formAction: {type: String, attribute: "form-action"},
+      formMethod: {type: String, attribute: "form-method"},
       formClass: {type: String, attribute: "form-class"},
       labelText: {type: String, attribute: "label-text"},
-      inputClass: {type: String, attribute: "input-class"}
+      inputClass: {type: String, attribute: "input-class"},
+      queryParam: {type: String, attribute: "query-param"}
     };
   }
 
@@ -37,11 +41,13 @@ export default class UcdThemeSearchForm extends LitElement {
     super();
     this.render = render.bind(this);
     this.formAction = "";
+    this.formMethod = "POST";
     this.formClass = "";
     this.labelText = "Search";
     this.placeholder = "Search...";
     this.inputClass = "";
     this.value = "";
+    this.queryParam = "searchterm";
   }
 
   /**

package/brand/ucd-theme-search-form/ucd-theme-search-form.tpl.js

@@ -14,6 +14,10 @@ export function styles() {
     [hidden] {
       display: none !important;
     }
+    .search-form__submit {
+      line-height: 1.9;
+      text-indent: .2em;
+    }
   `;
   return [
     normalizeCss,
@@ -29,7 +33,7 @@ return html`
 <form 
   @submit="${this._onSubmit}"
   action="${this.formAction}" 
-  method="POST" 
+  method=${this.formMethod} 
   class="search-form ${this.formClass}">
 
   <label for="search" class="u-hidden--visually">${this.labelText}</label>
@@ -38,10 +42,11 @@ return html`
     placeholder="${this.placeholder}" 
     id="search" 
     class="search-form__input ${this.inputClass}" 
-    name="searchterm" 
+    name=${this.queryParam} 
     @input="${this._onInput}"
     value="${this.value}">
-  <input type="submit" class="search-form__submit" name="search" alt="Search" value="&#xf002; Submit">
+  <button type="submit" class="search-form__submit">&#xf002; Submit
+  </button>
 
 </form>
 `;}

package/brand/ucd-theme-search-popup/ucd-theme-search-popup.js

@@ -25,7 +25,6 @@ import { MutationObserverController } from '../../utils/controllers';
  * </ucd-theme-search-popup>
  */
 export default class UcdThemeSearchPopup extends LitElement {
-  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {
@@ -42,6 +41,7 @@ export default class UcdThemeSearchPopup extends LitElement {
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this);
     this.buttonText = "Toggle Search";
     this.opened = false;
     this._defaultForm = false;

package/brand/ucd-theme-slim-select/ucd-theme-slim-select.js

@@ -13,11 +13,6 @@ import { MutationObserverController } from '../../utils/controllers';
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
  */
 export default class UcdThemeSlimSelect extends LitElement {
-  mutationObserver = new MutationObserverController(
-    this, 
-    {subtree: true, childList: true, attributes: true, characterData: true},
-    "_onLightDomMutation"
-  );
 
   static get properties() {
     return {
@@ -32,6 +27,11 @@ export default class UcdThemeSlimSelect extends LitElement {
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(
+      this, 
+      {subtree: true, childList: true, attributes: true, characterData: true},
+      "_onLightDomMutation"
+    );
   }
 
   /**
@@ -43,7 +43,11 @@ export default class UcdThemeSlimSelect extends LitElement {
     const children = Array.from(this.children);
     if (children.length == 0 || children[0].tagName != "SELECT") return;
     const select = children[0].cloneNode(true);
-    this.renderRoot.innerHTML= "";
+    if ( this.slimSelect ){
+      this.slimSelect.destroy();
+      this.renderRoot.querySelector('.ss-main').remove();
+      this.renderRoot.querySelector('select').remove();
+    }
     this.renderRoot.appendChild(select);
 
     this.slimSelect = new SlimSelect({

package/brand/ucd-theme-subnav/ucd-theme-subnav.js

@@ -31,9 +31,6 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  */
 export default class UcdThemeSubnav extends Mixin(LitElement)
   .with(NavElement) {
-  
-  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
-  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -51,6 +48,8 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+    this.wait = new WaitController(this);
 
     this.navTitle = "";
     this.titleHref = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -9,7 +9,7 @@
   "author": "jrmerz@ucdavis.edu",
   "license": "MIT",
   "dependencies": {
-    "@ucd-lib/theme-sass": "^5.0.11",
+    "@ucd-lib/theme-sass": "^5.0.15",
     "lit": "^2.0.2",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -25,11 +25,6 @@ import bookLogo from "./book.js";
 export default class UcdlibBrandingBar extends Mixin(LitElement)
   .with(NavElement) {
 
-  mutationObserver = new MutationObserverController(
-    this,
-    {childList: true, characterData: true, attributes: true}
-  );
-
   static get properties() {
     return {
       figure: {type: String},
@@ -47,6 +42,10 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(
+      this,
+      {childList: true, characterData: true, attributes: true}
+    );
 
     this.figure = "book";
     this.siteName = "UC Davis Library";

package/ucdlib/ucdlib-icon/ucdlib-icon.tpl.js

@@ -9,6 +9,8 @@ export function styles() {
       stroke: var(--ucdlib-icon-stroke-color, none);
       width: var(--ucdlib-icon-width, 24px);
       height: var(--ucdlib-icon-height, 24px);
+      min-width: var(--ucdlib-icon-width, 24px);
+      min-height: var(--ucdlib-icon-height, 24px);
     }
   `;
 

package/ucdlib/ucdlib-icons/sitefarm.js

@@ -0,0 +1,108 @@
+import { html } from "lit";
+import { renderIconSet } from "@ucd-lib/theme-elements/ucdlib/ucdlib-icons/utils.js";
+
+const template = html`
+  <!-- All icons prefixed with 'fa' by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0) -->
+  <svg><defs>
+    <g id="fa-chevron-right" viewBox="0 0 320 512">
+  <path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>
+</g>
+<g id="fa-angle-double-right" viewBox="0 0 448 512">
+  <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"/>
+</g>
+<g id="fa-chevron-circle-right" viewBox="0 0 512 512">
+  <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm113.9 231L234.4 103.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L285.1 256 183.5 357.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L369.9 273c9.4-9.4 9.4-24.6 0-34z"/>
+</g>
+<g id="fa-times" viewBox="0 0 352 512">
+  <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
+</g>
+<g id="fa-chevron-down" viewBox="0 0 448 512">
+  <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/>
+</g>
+<g id="fa-plus" viewBox="0 0 448 512">
+  <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/>
+</g>
+<g id="fa-calendar" viewBox="0 0 448 512">
+  <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/>
+</g>
+<g id="fa-map-marker-alt" viewBox="0 0 384 512">
+  <path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/>
+</g>
+<g id="fa-phone-alt" viewBox="0 0 512 512">
+  <path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"/>
+</g>
+<g id="fa-envelope" viewBox="0 0 512 512">
+  <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/>
+</g>
+<g id="fa-network-wired" viewBox="0 0 640 512">
+  <path d="M640 264v-16c0-8.84-7.16-16-16-16H344v-40h72c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32H224c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h72v40H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h104v40H64c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h160c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32h-56v-40h304v40h-56c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h160c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32h-56v-40h104c8.84 0 16-7.16 16-16zM256 128V64h128v64H256zm-64 320H96v-64h96v64zm352 0h-96v-64h96v64z"/>
+</g>
+<g id="fa-map" viewBox="0 0 576 512">
+  <path d="M0 117.66v346.32c0 11.32 11.43 19.06 21.94 14.86L160 416V32L20.12 87.95A32.006 32.006 0 0 0 0 117.66zM192 416l192 64V96L192 32v384zM554.06 33.16L416 96v384l139.88-55.95A31.996 31.996 0 0 0 576 394.34V48.02c0-11.32-11.43-19.06-21.94-14.86z"/>
+</g>
+<g id="fa-cloud-download-alt" viewBox="0 0 640 512">
+  <path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zm-132.9 88.7L299.3 420.7c-6.2 6.2-16.4 6.2-22.6 0L171.3 315.3c-10.1-10.1-2.9-27.3 11.3-27.3H248V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v112h65.4c14.2 0 21.4 17.2 11.3 27.3z"/>
+</g>
+<g id="fa-clock" viewBox="0 0 512 512">
+  <path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"/>
+</g>
+<g id="fa-plus-circle" viewBox="0 0 512 512">
+  <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
+</g>
+<g id="fa-arrow-circle-right" viewBox="0 0 512 512">
+  <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/>
+</g>
+<g id="fa-user-alt" viewBox="0 0 512 512">
+  <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"/>
+</g>
+<g id="fa-check-circle" viewBox="0 0 512 512">
+  <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
+</g>
+<g id="fa-gift" viewBox="0 0 512 512">
+  <path d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm256 32h160c17.7 0 32-14.3 32-32V320H288v160zm192-320h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40z"/>
+</g>
+<g id="fa-chevron-left" viewBox="0 0 320 512">
+  <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/>
+</g>
+<g id="fa-long-arrow-alt-left" viewBox="0 0 448 512">
+  <path d="M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z"/>
+</g>
+<g id="fa-long-arrow-alt-right" viewBox="0 0 448 512">
+  <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"/>
+</g>
+<g id="fa-flask" viewBox="0 0 448 512">
+  <path d="M437.2 403.5L320 215V64h8c13.3 0 24-10.7 24-24V24c0-13.3-10.7-24-24-24H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h8v151L10.8 403.5C-18.5 450.6 15.3 512 70.9 512h306.2c55.7 0 89.4-61.5 60.1-108.5zM137.9 320l48.2-77.6c3.7-5.2 5.8-11.6 5.8-18.4V64h64v160c0 6.9 2.2 13.2 5.8 18.4l48.2 77.6h-172z"/>
+</g>
+<g id="fa-bullhorn" viewBox="0 0 576 512">
+  <path d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"/>
+</g>
+<g id="fa-rss" viewBox="0 0 448 512">
+  <path d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"/>
+</g>
+<g id="fa-twitter" viewBox="0 0 512 512">
+  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
+</g>
+<g id="fa-horse-head" viewBox="0 0 512 512">
+  <path d="M509.8 332.5l-69.9-164.3c-14.9-41.2-50.4-71-93-79.2 18-10.6 46.3-35.9 34.2-82.3-1.3-5-7.1-7.9-12-6.1L166.9 76.3C35.9 123.4 0 238.9 0 398.8V480c0 17.7 14.3 32 32 32h236.2c23.8 0 39.3-25 28.6-46.3L256 384v-.7c-45.6-3.5-84.6-30.7-104.3-69.6-1.6-3.1-.9-6.9 1.6-9.3l12.1-12.1c3.9-3.9 10.6-2.7 12.9 2.4 14.8 33.7 48.2 57.4 87.4 57.4 17.2 0 33-5.1 46.8-13.2l46 63.9c6 8.4 15.7 13.3 26 13.3h50.3c8.5 0 16.6-3.4 22.6-9.4l45.3-39.8c8.9-9.1 11.7-22.6 7.1-34.4zM328 224c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24z"/>
+</g>
+<g id="fa-chart-line" viewBox="0 0 512 512">
+  <path d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"/>
+</g>
+<g id="fa-instagram" viewBox="0 0 448 512">
+  <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
+</g>
+<g id="fa-lightbulb" viewBox="0 0 352 512">
+  <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"/>
+</g>
+<g id="fa-exclamation-triangle" viewBox="0 0 576 512">
+  <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
+</g>
+<g id="fa-search" viewBox="0 0 512 512">
+  <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+</g>
+<g id="fa-arrow-alt-circle-right" viewBox="0 0 512 512">
+  <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"/>
+</g>
+  </defs></svg>`;
+
+renderIconSet(template, "sitefarm", 24);

package/ucdlib/ucdlib-icons/ucdlib-icons.js

@@ -7,7 +7,7 @@
  */
 
 import { html } from "lit";
-import { renderIconSet } from "./utils";
+import { renderIconSet } from "@ucd-lib/theme-elements/ucdlib/ucdlib-icons/utils.js";
 
 const template = html`
   <svg>

package/ucdlib/ucdlib-icons/utils.js

@@ -1,5 +1,5 @@
-import "../ucdlib-iconset/ucdlib-iconset";
-import "../ucdlib-icon/ucdlib-icon";
+import "@ucd-lib/theme-elements/ucdlib/ucdlib-iconset/ucdlib-iconset";
+import "@ucd-lib/theme-elements/ucdlib/ucdlib-icon/ucdlib-icon";
 
 import { html, render } from "lit-html";
 
@@ -8,8 +8,9 @@ import { html, render } from "lit-html";
  * @param {TemplateResult} icons - SVG html string of icons
  * @param {String} name - name of iconset. 
  * @param {Number} size  - size of icons
+ * @param {String} label - Friendly name of iconset 
  */
-function renderIconSet(icons, name, size=24){
+function renderIconSet(icons, name, size=24, label=""){
   const containerId = `ucdlib-icons--${name}`;
   let container = document.getElementById(containerId);
   if ( !container ){
@@ -19,7 +20,7 @@ function renderIconSet(icons, name, size=24){
     document.head.appendChild(container); 
   } 
   const template = html`
-    <ucdlib-iconset name=${name} size=${size}>
+    <ucdlib-iconset name=${name} size=${size} label=${label}>
       ${icons}
     </ucdlib-iconset>
   `;

package/ucdlib/ucdlib-iconset/ucdlib-iconset.js

@@ -9,6 +9,7 @@ import { MutationObserverController } from '../../utils/controllers';
  * 
  * @property {String} name - Name of the icon set. Usage: <ucdlib-icon icon="{thisProperty}:{icon}"></ucdlib-icon>
  * @property {Number} size - The size of an individual icon. Note that icons must be square. 
+ * @property {String} label - Optional friendly label for iconset.
  * @example
  * <ucdlib-iconset name="arrows">
     <svg>
@@ -21,20 +22,22 @@ import { MutationObserverController } from '../../utils/controllers';
  */
 export default class UcdlibIconset extends Mixin(LitElement)
   .with(MainDomElement) {
-  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
   static get properties() {
     return {
       name: {type: String},
       size: {type: Number},
+      label: {type: String},
       _iconMap: {type: Object, state: true}
     };
   }
 
   constructor() {
     super();
+    this.mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
     this.name = "";
+    this.label = "";
     this.size = 24;
     this._iconMap = {};
     this.style.display = "none";
@@ -63,6 +66,17 @@ export default class UcdlibIconset extends Mixin(LitElement)
     return Object.keys(this._iconMap);
   }
 
+  /**
+   * @method getLabel
+   * @description Returns a friendly label of iconset
+   * @returns {String}
+   */
+  getLabel(){
+    if ( this.label ) return this.label;
+
+    return this.name.replace(/-/g, " ");
+  }
+
   /**
    * @method applyIcon
    * @description Adds icon to ucdlib-icon element from iconset

package/ucdlib/ucdlib-pages/ucdlib-pages.js

@@ -17,7 +17,6 @@ import { MutationObserverController } from '../../utils/controllers';
  * </ucdlib-pages>
  */
 export default class UcdlibPages extends LitElement {
-  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {
@@ -35,6 +34,7 @@ export default class UcdlibPages extends LitElement {
 
   constructor() {
     super();
+    this.mutationObserver = new MutationObserverController(this);
   }
 
   /**

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.js

@@ -0,0 +1,138 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucdlib-sils-search-redirect.tpl.js";
+
+import { SilsPrimoController } from '../../utils/controllers';
+
+/**
+ * @class UcdlibSilsSearchRedirect
+ * @classdesc Search widget that redirects a user's query to SILS Primo
+ * @property {String} query - The search query
+ * @property {Boolean} ucdOnly - Limits search to UC Davis libraries only
+ * @property {Boolean} darkBackground - Adjusts colors for display on a dark background
+ * @property {Boolean} preventRedirect - Will not send user to Primo on form submission
+ * @property {String} headingText - Text to display above main text input
+ * @property {String} inputPlaceholder - Placeholder for main text input
+ * @property {String} host - Primo host
+ */
+export default class UcdlibSilsSearchRedirect extends LitElement {
+
+  static get properties() {
+    return {
+      query: {type: String},
+      ucdOnly: {type: Boolean, attribute: "ucd-only"},
+      darkBackground: {type: Boolean, attribute: "dark-background"},
+      preventRedirect: {type: Boolean, attribute: "prevent-redirect"},
+      headingText: {type: String, attribute: "heading-text"},
+      inputPlaceholder: {type: String, attribute: "input-placeholder"},
+      host: {type: String},
+      role: {type: String, reflect: true},
+      ariaLabel: {type: String, attribute: "aria-label", reflect: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.query = "";
+    this.ucdOnly = false;
+    this.darkBackground = false;
+    this.headingText = "Search UC Library Materials";
+    this.inputPlaceholder = "All UC books, journals, articles + more";
+    this.role = "form";
+    this.ariaLabel = "Search UC Library Materials";
+    this.host = "";
+    this._updatePrimoController();
+  }
+
+  /**
+   * @method willUpdate
+   * @description Lit lifecycle hook
+   * @private
+   * @param {Map} props - Properties that have changed
+   */
+  willUpdate(props){
+    this._updatePrimoController(props);
+  }
+
+  /**
+   * @method _onQueryChange
+   * @private
+   * @description Attached to primary text input
+   * @param {Event} e - Input event
+   */
+  _onQueryChange(e){
+    let text = e.target.value ? e.target.value : "";
+    this.query = text;
+  }
+
+  /**
+   * @method _onCorpusChange
+   * @private
+   * @description Attached to ucd-only checkbox
+   * @param {Event} e - Input event
+   */
+  _onCorpusChange(e){
+    this.ucdOnly = e.target.checked;
+  }
+
+  /**
+   * @method _onSubmit
+   * @description Called on form submit
+   * @private
+   * @param {Event} e - submit event
+   */
+  _onSubmit(e){
+    e.preventDefault();
+    let corpus = this.ucdOnly ? "ucd" : "everything";
+    let advanced = e.submitter.id == "advanced-search";
+
+    let url = this.primo.makeSearchUrl(this.query, corpus, advanced);
+    if ( this.preventRedirect ) {
+      this.dispatchEvent(new CustomEvent('search', {
+        detail : {url}
+      }));
+    } else {
+      window.location = url;
+    }
+  }
+
+
+  /**
+   * @method _updatePrimoController
+   * @description Updates the config values of the Primo controller based on ele attributes
+   * @private
+   * @param {Map} props - Properties that have changed in current lifecycle
+   */
+  _updatePrimoController(props){
+    let primoConfig = {};
+    
+    // Get primo config values from ele attributes
+    const attrs = [
+      {ele: 'host', ctl: 'host'}
+    ];
+    if ( props ){
+      attrs.forEach(attr => {
+        if ( props.has(attr.ele) && this[attr.ele] ) {
+          primoConfig[attr.ctl] = this[attr.ele];
+        }
+      });
+    }
+
+    // instantiate or update controller
+    if ( !this.primo ) {
+      this.primo = new SilsPrimoController(
+        this,
+        primoConfig
+      );
+    } else {
+      this.primo.updateConfig(primoConfig);
+    }
+  }
+
+}
+
+customElements.define('ucdlib-sils-search-redirect', UcdlibSilsSearchRedirect);

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.tpl.js

@@ -0,0 +1,108 @@
+import { html, css, unsafeCSS } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import headingCss from "@ucd-lib/theme-sass/1_base_html/_headings.css";
+import headingClassesCss from "@ucd-lib/theme-sass/2_base_class/_headings.css";
+import formsCss from "@ucd-lib/theme-sass/1_base_html/_forms.css";
+import formsClassesCss from "@ucd-lib/theme-sass/2_base_class/_forms.css";
+import buttonCss from "@ucd-lib/theme-sass/2_base_class/_buttons.css";
+import spacingUtilityCss from "@ucd-lib/theme-sass/6_utility/_u-space.css";
+import { categoryBrands } from "@ucd-lib/theme-sass/colors";
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+      max-width: 500px;
+      margin: auto;
+    }
+    h2 {
+      text-align: center;
+    }
+    .search-bar {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+    .search-bar button {
+      font-family: "Font Awesome 5 Free";
+      min-width: unset;
+      font-size: 1.2rem;
+      padding: 0 .75rem;
+      min-height: 0;
+    }
+    .search-bar button:hover {
+      padding-right: .75rem;
+      padding-left: .75rem;
+    }
+    .search-bar input {
+      flex-grow: 1;
+    }
+    .search-options {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .search-options label {
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      padding-bottom: 0;
+    }
+    input[type=checkbox] {
+      margin-right: 0;
+    }
+    .search-options button {
+      border: none;
+      background-color: inherit;
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      text-decoration: underline;
+      padding: 0;
+      font-family: inherit;
+    }
+    .dark h2 {
+      color: ${unsafeCSS(categoryBrands.secondary.hex)}
+    }
+    .dark .search-options label {
+      color: #fff;
+    }
+    .dark .search-options button {
+      color: #fff;
+    }
+
+  `;
+
+  return [
+    normalizeCss,
+    headingCss,
+    headingClassesCss,
+    formsCss,
+    formsClassesCss,
+    buttonCss,
+    spacingUtilityCss,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+  <form 
+    @submit=${this._onSubmit}
+    aria-label=${this.ariaLabel}
+    class="${this.darkBackground ? 'dark' : 'light'}">
+
+    ${this.headingText ? html`
+      <h2 class="heading--highlight u-space-mb">${this.headingText}</h2>
+    ` : html``}
+
+    <div class="search-bar">
+      <input type="text" .value=${this.query} @input=${this._onQueryChange} placeholder=${this.inputPlaceholder}>
+      <button id="simple-search" type="submit" class="btn btn--primary-input"> &#xf002</button>
+    </div>
+
+    <div class="search-options">
+      <div class="checkbox u-space-mr--small u-space-mt--small">
+        <input id="corpus" type="checkbox" ?checked=${this.ucdOnly} @input=${this._onCorpusChange}><label for="corpus">UC Davis libraries only</label>
+      </div>
+      <button id="advanced-search" class="u-space-mt--small" type="submit">Advanced Search</button>
+    </div>
+</form>
+
+`;}

package/utils/controllers/break-points.js

@@ -1,9 +1,9 @@
 export class BreakPointsController{
-
-  mobileBreakPoint = 992;
   
   constructor(host){
     (this.host = host).addController(this);
+
+    this.mobileBreakPoint = 992;
   }
 
   /**

package/utils/controllers/index.js

@@ -1,11 +1,16 @@
 import { BreakPointsController } from "./break-points";
 import { IntersectionObserverController } from "./intersection-observer";
 import { MutationObserverController } from "./mutation-observer";
+import { PopStateObserverController } from "./popstate-observer";
+import { SilsPrimoController } from "./sils-primo";
 import { WaitController } from "./wait";
 
+
 export {
   BreakPointsController,
   IntersectionObserverController,
   MutationObserverController,
+  PopStateObserverController,
+  SilsPrimoController,
   WaitController,
 };

package/utils/controllers/intersection-observer.js

@@ -20,11 +20,6 @@
  * 
  */
 export class IntersectionObserverController{
-  host;
-  options;
-  callback;
-  observer;
-  observeSelf;
 
   constructor(host, options = {}, callback = "_onIntersection", observeSelf = true){
     (this.host = host).addController(this);

package/utils/controllers/mutation-observer.js

@@ -14,11 +14,6 @@
  *  mutationObserver = new MutationObserverController(this, {childList: true, attributes: true}, 'aDifferentCallbackMethod');
  */
 export class MutationObserverController {
-  host;
-  options;
-  callback;
-
-  _observer;
 
   constructor(host, options = {childList: true}, callback = "_onChildListMutation"){
     (this.host = host).addController(this);

package/utils/controllers/popstate-observer.js

@@ -0,0 +1,51 @@
+/**
+ * @class PopStateObserverController
+ * @classdesc Controller for attaching a popstate event listener to a Lit element.
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {String} callback - Name of element method called on popstate. Default: '_onPopstate'
+ * 
+ * @examples
+ * // Instantiate this controller in the constructor of your element
+ * new PopStateObserverController(this, "_onLocationChange");
+ */
+export class PopStateObserverController{
+
+  constructor(host, callback="_onPopstate"){
+    (this.host = host).addController(this);
+    this.callback = callback;
+    this._onPopstate = this._onPopstate.bind(this);
+  }
+
+  hostConnected(){
+    window.addEventListener('popstate', this._onPopstate);
+  }
+
+  hostDisconnected(){
+    window.removeEventListener('popstate', this._onPopstate);
+  }
+
+  _onPopstate(e){
+    if ( !this.host[this.callback]){
+      console.warn(
+        `Element has no '${this.callback}' method. 
+        Either add this method, or change the 'callback' argument on instantiation.`
+      );
+      return;
+    }
+    let locationObject = this._getLocationObject();
+    this.host[this.callback](locationObject, e);
+
+  }
+
+  _getLocationObject(){
+    let location = {
+      fullpath : window.location.href.replace(window.location.origin, '').replace(/^\/+/, '/'),
+      pathname : window.location.pathname.replace(/^\/+/, '/'),
+      path : window.location.pathname.replace(/(^\/+|\/+$)/g, '').split('/'),
+      query : new URLSearchParams(window.location.search),
+      hash : window.location.hash.replace(/^#/, '')
+    };
+    return location;
+  }
+}

package/utils/controllers/sils-primo.js

@@ -0,0 +1,124 @@
+/**
+ * @class SilsPrimoController
+ * @classdesc Utility for interacting with UC Libraries' discovery tool
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {Object} config - Basic Primo configuration values (host, uris, etc)
+ */
+export class SilsPrimoController{
+
+  /**
+   * @method constructor
+   * @description Called on instantiation
+   * @param {LitElement} host - Element
+   * @param {Object} config - Config values
+   */
+  constructor(host, config={}){
+    (this.host = host).addController(this);
+    this.updateConfig(config);
+  }
+
+  /**
+   * @method updateConfig
+   * @description Updates the config property.
+   * @param {Object} config - Values to overide the default.
+   */
+  updateConfig(config){
+    const UCD_TAB = "LibraryCatalog";
+    let _config = {
+      host: "https://search.library.ucdavis.edu",
+      paths: {
+        search: "discovery/search",
+        browse: "discovery/browse"
+      },
+      defaultParams: {
+        vid: "01UCD_INST:UCD"
+      },
+      corpora: {
+        everything: {
+          tab: "UCSILSDefaultSearch",
+          scope: "DN_and_CI"
+        },
+        uc: {
+          tab: "UCSDiscoveryNetwork",
+          scope: "UCSDiscoveryNetwork"
+        },
+        ucd: {
+          tab: UCD_TAB,
+          scope: "MyInstitution",
+        },
+        specialCollections: {
+          tab: UCD_TAB,
+          scope: "SSPEC"
+        },
+        medical: {
+          tab: UCD_TAB,
+          scope: "BLAISDELL"
+        },
+        healthSciences: {
+          tab: UCD_TAB,
+          scope: "CARLSON"
+        },
+        law: {
+          tab: UCD_TAB,
+          scope: "Mabie"
+        }
+      }
+    };
+
+    this.config = Object.assign(_config, config);
+  }
+
+  /**
+   * @method makeSearchUrl
+   * @description Makes a Primo Search URL
+   * @param {String} query - A search term or phrase
+   * @param {String} corpus - The bib corpus to search against. 
+   *   Sets 'tab' and 'search_scope' params. Must be a recognized keyword in the corpora config object:
+   *  everything, uc, ucd, specialCollections, medical, healthSciences, law
+   * @param {Boolean} advanced - Expands the advanced search interface
+   * @param {Object} additionalParams - Any additional url params. Has the final say.
+   * @returns 
+   */
+  makeSearchUrl( query, corpus="everything", advanced=false, additionalParams={} ){
+    let url = `${this._trailingSlashIt(this.config.host)}${this.config.paths.search}`;
+
+    let params = Object.assign({}, this.config.defaultParams);
+
+    if ( advanced ) {
+      params['mode'] = 'advanced';
+    }
+
+    if ( query ) {
+      params['query'] = 'any,contains,' + query.replace(/,/g, ' ');
+    }
+
+    if ( this.config.corpora[corpus] ) {
+      params['tab'] = this.config.corpora[corpus].tab;
+      params['search_scope'] = this.config.corpora[corpus].scope;
+    } else {
+      console.warn(`${corpus} is not a recognized corpus`);
+    }
+
+    if ( additionalParams ){
+      Object.assign(params, additionalParams);
+    } 
+
+    params = new URLSearchParams(params);
+    return `${url}?${params.toString()}`;
+  }
+
+  /**
+   * @method _trailingSlashIt
+   * @description Adds trailing slash to string if not already present
+   * @private 
+   * @param {String} str 
+   * @returns 
+   */
+  _trailingSlashIt(str){
+    if ( str.endsWith('/') ){
+      return str;
+    }
+    return str + "/";
+  }
+}

package/utils/controllers/wait.js

@@ -1,5 +1,4 @@
 export class WaitController{
-  host;
 
   constructor(host){
     (this.host = host).addController(this);