@ucd-lib/theme-elements 0.0.4 → 0.0.5

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

@@ -1,7 +1,10 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { 
+  IntersectionObserverController,
+  MutationObserverController, 
+  WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeHeader
@@ -15,6 +18,7 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * @property {String} figureSrc - Site logo/icon to display next to site name
  * @property {String} siteUrl - Url to use for links around site name and figure
  * @property {Boolean} opened - Whether header is open in the mobile view
+ * @property {Boolean} preventFixed - Navbar will not be fixed to top of screen in desktop view
  * 
  * @example
  *  <ucd-theme-header site-name="A UC Davis Website">
@@ -35,8 +39,10 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  *  </ucd-theme-header>
  * 
  */
-export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+export default class UcdThemeHeader extends LitElement {
+  
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -45,11 +51,13 @@ export default class UcdThemeHeader extends Mixin(LitElement)
       figureSrc: {type: String, attribute: "figure-src"},
       siteUrl: {type: String, attribute: "site-url"},
       opened: {type: Boolean},
+      preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
-      _hasSearch: {type: Boolean, state: true}
+      _hasSearch: {type: Boolean, state: true},
+      _brandingBarInView: {type: Boolean, state: true}
     };
   }
 
@@ -73,9 +81,40 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
+    this._brandingBarInView = false;
 
   }
 
+  connectedCallback(){
+    super.connectedCallback();
+    if ( !this.preventFixed ) {
+      this.intersectionObserver = new IntersectionObserverController(this, {}, "_onBrandingBarIntersection", false);
+    }
+  }
+
+  firstUpdated(){
+    if ( !this.preventFixed ) {
+      let aboveNav = this.renderRoot.getElementById('branding-bar-container');
+      this.intersectionObserver.observer.observe(aboveNav);
+    }
+  }
+
+  _onBrandingBarIntersection(entries){
+    let offSetValue = 0;
+    try {
+      offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
+    } catch (error) {}
+    if ( offSetValue > 150 ) offSetValue = 0;
+    entries.forEach(entry => {
+      this._brandingBarInView = entry.isIntersecting;
+      if (this._brandingBarInView) {
+        this.style.marginBottom = '0px';
+      } else {
+        this.style.marginBottom = offSetValue + "px";
+      }
+    })
+  }
+
   /**
    * @method open
    * @description Opens header menu in mobile
@@ -86,7 +125,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = true;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -102,7 +141,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = false;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -149,6 +188,24 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     return classes;
   }
 
+  /**
+   * @method _getHeaderClasses
+   * @description Get classes to be assigned to the header element
+   * @private
+   * @returns {Object}
+   */
+  _getHeaderClasses(){
+    let classes = {
+      "l-header": true,
+      "header": true
+    };
+
+    classes['fixed-mobile'] = !this.preventFixed;
+    classes['fixed-desktop'] = !this.preventFixed && !this._brandingBarInView;
+    
+    return classes;
+  }
+
   /**
    * @method _ucdLogo
    * @description Returns URI-encoded svg string of UC Davis logo

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

@@ -23,6 +23,36 @@ export function styles() {
     ::slotted(ucdlib-branding-bar){
       width: 100%;
     }
+
+    @media (max-width: 991px) {
+      .fixed-mobile .mobile-bar {
+        position: fixed;
+        width: 100%;
+        z-index: 1000;
+        top: 0;
+      }
+      .fixed-mobile .off-canvas {
+        position: fixed;
+        overflow: auto;
+        z-index: 1000;
+        top: 55px;
+      }
+      .fixed-mobile .l-header__branding {
+        margin-top: 55px;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .fixed-desktop .l-navbar {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+
   `;
 
   return [
@@ -44,7 +74,7 @@ ${this.isDemo ? html`
     .l-navbar { top: auto !important}
   </style>
 ` : html``}
-<header class="l-header header">
+<header class=${classMap(this._getHeaderClasses())}>
   <div class="mobile-bar">
     <div class="mobile-bar__nav-toggle">
       <button 
@@ -64,32 +94,34 @@ ${this.isDemo ? html`
     </div>
   </div>
 
-  <div class="header__bar">
-      <div class="header__university">
-        <a href="https://www.ucdavis.edu/">
-          <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
-        </a>
-      </div>
-  </div>
-  <div class="l-header__branding">
-    ${this._hasSlottedBranding ? html`
-      <slot name="branding-bar"></slot>
-    ` : html`
-      <div class="site-branding">
-        <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
-          <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></a>
+  <div id="branding-bar-container">
+    <div class="header__bar">
+        <div class="header__university">
+          <a href="https://www.ucdavis.edu/">
+            <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
+          </a>
         </div>
-        <div class="site-branding__body">
-        <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
-          <a href=${this.siteUrl}>${this.siteName}</a>
-        </h1>
-        <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+    </div>
+    <div class="l-header__branding">
+      ${this._hasSlottedBranding ? html`
+        <slot name="branding-bar"></slot>
+      ` : html`
+        <div class="site-branding">
+          <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
+            <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></a>
+          </div>
+          <div class="site-branding__body">
+          <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
+            <a href=${this.siteUrl}>${this.siteName}</a>
+          </h1>
+          <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+          </div>
         </div>
-      </div>
-    `}
+      `}
+    </div>
   </div>
 
-  <div class="${classMap(this._getNavbarClasses())}">
+  <div class="${classMap(this._getNavbarClasses())}" id="nav-bar">
     <div class="l-container--navigation off-canvas off-canvas--left">
       <div class="off-canvas__container l-nav-horizontal">
         ${this._hasSearch ? html`

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

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 //import { Page } from 'puppeteer';
 import {render, styles} from "./ucd-theme-pagination.tpl.js";
-import { Mixin, BreakPoints } from "../../utils/index.js";
+
+import { BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePagination
@@ -33,8 +34,8 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * </ucd-theme-pagination>
  * 
  */
-export default class UcdThemePagination extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemePagination extends LitElement {
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -101,8 +102,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
     this.xs_screen = false;
     this.size = '';
 
-    this.screen_check = (window.innerWidth <= this._mobileBreakPoint)  ? true : false;
-    console.log(this.screen_check);
+    this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
 
     this.render = render.bind(this);
   }

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

@@ -4,7 +4,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { Mixin, MutationObserverElement, BreakPoints, NavElement } from "../../utils/index.js";
+import { Mixin, NavElement } from "../../utils/mixins";
+import { MutationObserverController, BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePrimaryNav
@@ -33,7 +34,10 @@ import { Mixin, MutationObserverElement, BreakPoints, NavElement } from "../../u
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement, BreakPoints) {
+  .with(NavElement) {
+
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -97,7 +101,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // Open on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -160,7 +164,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // close on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -263,7 +267,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){
@@ -345,7 +349,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       this.isMegaMenu() && 
       depth > 0 && 
       !this._megaIsOpen &&
-      this.isDesktop()
+      this.breakPoints.isDesktop()
     ) i = -1;
 
     return i;
@@ -375,7 +379,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Array} navLocation - Array coordinates of corresponding nav item
    */
   async _toggleMobileMenu(navLocation){
-    if ( this.isDesktop() ) return;
+    if ( this.breakPoints.isDesktop() ) return;
     let navItem = this.getNavItem(navLocation);
     if ( navItem.isOpen ) {
       this.closeSubNav(navLocation);
@@ -391,7 +395,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseenter(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -408,7 +412,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseleave(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -426,7 +430,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavFocusin(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
     
@@ -447,7 +451,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseenter(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     this.openSubNav(e.target.key);
   }
 
@@ -458,7 +462,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemFocus(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     const LI = e.target.parentElement.parentElement;
 
     if (LI.hasnav) {
@@ -511,7 +515,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseleave(e){
-    if ( this.isMobile() || this.isMegaMenu() ) return;
+    if ( this.breakPoints.isMobile() || this.isMegaMenu() ) return;
     this.closeSubNav(e.target.key);
   }
 
@@ -521,7 +525,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @description Attached to the top-level nav element. Closes subnav if it doesn't contain focused link.
    */
   _onNavFocusout(){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     if ( this.isMegaMenu() ) {
       if ( this._megaTimeout ) clearTimeout(this._megaTimeout);
       requestAnimationFrame(() => {
@@ -574,7 +578,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @returns {Object} - Style map
    */
   _getItemMobileStyles(location) {
-    if ( this.isDesktop() ) return {};
+    if ( this.breakPoints.isDesktop() ) return {};
     let navItem = this.getNavItem(location);
     if ( !navItem.inlineStyles ) return {};
     return navItem.inlineStyles;

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import {render, styles} from "./ucd-theme-quick-links.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeQuickLinks
@@ -17,8 +17,10 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * @property {Boolean} opened - Menu is open
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
-export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+export default class UcdThemeQuickLinks extends LitElement {
+
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -67,7 +69,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     this._transitioning = false;
     this.opened = true;
     return true;
@@ -84,11 +86,11 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
 
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
-    await this.waitForFrames(2);
+    await this.wait.waitForFrames(2);
     this._openedHeight = 0;
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
 
     this._transitioning = false;
     this.opened = false;
@@ -229,7 +231,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
    * @method _onChildListMutation
    * @param {Array} mutationsList - List of mutation records
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the '_links' property.
    */
   _onChildListMutation(mutationsList){

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

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-search-popup.tpl.js";
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSearchPopup
@@ -24,8 +24,8 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  *   <input placeholder="A custom search element">
  * </ucd-theme-search-popup>
  */
-export default class UcdThemeSearchPopup extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSearchPopup extends LitElement {
+  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {

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

@@ -3,7 +3,7 @@ import {render, styles} from "./ucd-theme-slim-select.tpl.js";
 
 import SlimSelect from 'slim-select';
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSlimSelect
@@ -12,8 +12,12 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  * Patternlab URL:
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
  */
-export default class UcdThemeSlimSelect extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSlimSelect extends LitElement {
+  mutationObserver = new MutationObserverController(
+    this, 
+    {subtree: true, childList: true, attributes: true, characterData: true},
+    "_onLightDomMutation"
+  );
 
   static get properties() {
     return {
@@ -29,23 +33,13 @@ export default class UcdThemeSlimSelect extends Mixin(LitElement)
     super();
     this.render = render.bind(this);
   }
-  /**
-   * @method connectedCallback
-   * @private
-   * @description Native lifecycle method called when element is connected
-   */
-  connectedCallback(){
-    super.connectedCallback();
-    this._childListObserver.disconnect();
-    this._childListObserver.observe(this, {subtree: true, childList: true, attributes: true, characterData: true});
-  }
 
   /**
-   * @method _onChildListMutation
+   * @method _onLightDomMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
    */
-  _onChildListMutation(){
+  _onLightDomMutation(){
     const children = Array.from(this.children);
     if (children.length == 0 || children[0].tagName != "SELECT") return;
     const select = children[0].cloneNode(true);

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

@@ -4,7 +4,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {Mixin, MutationObserverElement, NavElement, Wait} from "../../utils";
+import {Mixin, NavElement} from "../../utils/mixins";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSubnav
@@ -29,7 +30,10 @@ import {Mixin, MutationObserverElement, NavElement, Wait} from "../../utils";
  *  </ucd-theme-subnav>
  */
 export default class UcdThemeSubnav extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement, Wait) {
+  .with(NavElement) {
+  
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -72,15 +76,15 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     // Get expanded height
     navItem.inlineStyles.display = "block";
     navItem.inlineStyles.height = "0px";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
     const expandedHeight = navUL.scrollHeight + "px";   
     
     // Set expanded height
     navItem.inlineStyles.height = expandedHeight;
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Complete animation
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     navItem.inlineStyles = {};
     navItem.isOpen = true;
     navItem.isTransitioning = false;
@@ -108,15 +112,15 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     // Set expanded height
     navItem.inlineStyles.height = navUL.scrollHeight + "px";
     navItem.inlineStyles.display = "block";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Set height to zero
-    await this.waitForFrames(2);
+    await this.wait.waitForFrames(2);
     navItem.inlineStyles.height = "0px";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Complete animation
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     navItem.inlineStyles = {};
     navItem.isOpen = false;
     navItem.isTransitioning = false;
@@ -129,7 +133,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@ucd-lib/theme-sass": "^5.0.11",
-    "lit": "^2.0.0-rc.4",
+    "lit": "^2.0.2",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

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

@@ -1,7 +1,8 @@
 import { LitElement, svg } from 'lit';
 import {render, styles} from "./ucdlib-branding-bar.tpl.js";
 
-import {Mixin, MutationObserverElement, NavElement} from "../../utils";
+import {Mixin, NavElement} from "../../utils/mixins";
+import { MutationObserverController } from '../../utils/controllers';
 import logo from "./logo.js";
 import bookLogo from "./book.js";
 
@@ -22,7 +23,12 @@ import bookLogo from "./book.js";
  *  </ucdlib-branding-bar>
  */
 export default class UcdlibBrandingBar extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement) {
+  .with(NavElement) {
+
+  mutationObserver = new MutationObserverController(
+    this,
+    {childList: true, characterData: true, attributes: true}
+  );
 
   static get properties() {
     return {
@@ -82,7 +88,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){

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

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
-import { Mixin, MutationObserverElement, MainDomElement} from "../../utils";
+import { Mixin, MainDomElement} from "../../utils/mixins";
+import { MutationObserverController } from '../../utils/controllers';
+
 
 /**
  * @class UcdlibIconset
@@ -18,7 +20,8 @@ import { Mixin, MutationObserverElement, MainDomElement} from "../../utils";
   </ucdlib-iconset>
  */
 export default class UcdlibIconset extends Mixin(LitElement)
-  .with(MutationObserverElement, MainDomElement) {
+  .with(MainDomElement) {
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
   static get properties() {
     return {

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import {Mixin, MutationObserverElement} from '../../utils/index.js';
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdlibPages
@@ -16,8 +16,8 @@ import {Mixin, MutationObserverElement} from '../../utils/index.js';
  *   <div id="page2">Test 2</div>
  * </ucdlib-pages>
  */
-export default class UcdlibPages extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdlibPages extends LitElement {
+  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {
@@ -55,7 +55,7 @@ export default class UcdlibPages extends Mixin(LitElement)
   
   /**
    * @method _onChildListMutation
-   * @description called when children change via MutationObserverElement
+   * @description called when children change via MutationObserverController
    */
   _onChildListMutation() {
     this._onChange();

package/utils/{break-points.js → controllers/break-points.js}

@@ -1,8 +1,9 @@
-const BreakPoints = (superClass) => class extends superClass {
+export class BreakPointsController{
 
-  constructor() {
-    super();
-    this._mobileBreakPoint = 992;
+  mobileBreakPoint = 992;
+  
+  constructor(host){
+    (this.host = host).addController(this);
   }
 
   /**
@@ -10,8 +11,8 @@ const BreakPoints = (superClass) => class extends superClass {
   * @description Is the desktop view currently active?
   * @returns {Boolean}
   */
-  isDesktop(){
-    return window.innerWidth >= this._mobileBreakPoint;
+   isDesktop(){
+    return window.innerWidth >= this.mobileBreakPoint;
   }
 
   /**
@@ -22,6 +23,4 @@ const BreakPoints = (superClass) => class extends superClass {
   isMobile(){
     return !this.isDesktop();
   }  
-};
-
-export {BreakPoints};
+}

package/utils/controllers/index.js

@@ -0,0 +1,11 @@
+import { BreakPointsController } from "./break-points";
+import { IntersectionObserverController } from "./intersection-observer";
+import { MutationObserverController } from "./mutation-observer";
+import { WaitController } from "./wait";
+
+export {
+  BreakPointsController,
+  IntersectionObserverController,
+  MutationObserverController,
+  WaitController,
+};

package/utils/controllers/intersection-observer.js

@@ -0,0 +1,58 @@
+/**
+ * @class IntersectionObserverController
+ * @classdesc Lit controller that attaches an IntersectionObserver to an element
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {Object} options - IntersectionObserver options. Default: {}
+ * @property {String} callback - Name of element method called on intersection. Default: '_onIntersection'
+ * @property {Boolean} observeSelf - Automatically observes host element on connected. Default: true
+ * 
+ * @examples
+ * // To watch for element's intersection with viewport, instantiate class in element constructor:
+ * new IntersectionObserverController(this)
+ * 
+ * // Or watch for a specific element within your Lit element:
+ * // In constructor:
+ * this.intersectionObserver = new IntersectionObserverController(this, {}, "_onMyDivIntersection", false);
+ * // In firstUpdated:
+ * let myDiv = this.renderRoot.getElementById('my-div');
+ * this.intersectionObserver.observer.observe(my-div);
+ * 
+ */
+export class IntersectionObserverController{
+  host;
+  options;
+  callback;
+  observer;
+  observeSelf;
+
+  constructor(host, options = {}, callback = "_onIntersection", observeSelf = true){
+    (this.host = host).addController(this);
+    this.options = options;
+    this.callback = callback;
+    this.observeSelf = observeSelf;
+  }
+
+  hostConnected(){
+    this.observer = new IntersectionObserver(this._callback.bind(this), this.options);
+    if ( this.observeSelf ) {
+      this.observer.observe(this.host);
+    }
+  }
+
+  hostDisconnected(){
+    this.observer.disconnect();
+  }
+
+  _callback(entries, observer){
+    if ( !this.host[this.callback]){
+      console.warn(
+        `Element has no '${this.callback}' method. 
+        Either add this method, or change the 'callback' argument on controller instantiation.`
+      );
+      return;
+    }
+    this.host[this.callback](entries, observer);
+
+  }
+}

package/utils/controllers/mutation-observer.js

@@ -0,0 +1,52 @@
+/**
+ * @class MutationObserverController
+ * @classdesc Lit controller that attaches a MutationObserver to an element
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {Object} options - MutationObserver.observe options. Default: {childList: true}
+ * @property {String} callback - Name of element method called on mutation. Default: '_onChildListMutation'
+ * 
+ * @examples
+ * // For a basic childlist observer, instantiate this class in your element:
+ *  mutationObserver = new MutationObserverController(this);
+ * 
+ * // or customize the options/callback:
+ *  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);
+    this.options = options;
+    this.callback = callback;
+  }
+
+  hostConnected(){
+
+    this._observer = new MutationObserver(
+      (mutationsList, observer) => this._onMutation(mutationsList, observer)
+    );
+    this._observer.observe(this.host, this.options);
+    this._onMutation();
+  }
+
+  hostDisconnected(){
+    this._observer.disconnect();
+  }
+
+  _onMutation(mutationsList, observer){
+    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;
+    }
+    this.host[this.callback](mutationsList, observer);
+  }
+}

package/utils/controllers/wait.js

@@ -0,0 +1,43 @@
+export class WaitController{
+  host;
+
+  constructor(host){
+    (this.host = host).addController(this);
+  }
+
+  /**
+   * @method wait
+   * @description Wait for the specified amount of time
+   * @param {Number} time - Time to wait (ms)
+   * @returns 
+   */
+  async wait(time){
+    return new Promise(resolve => {
+      setTimeout(resolve, time);
+    });
+  }
+
+  /**
+   * @method waitForUpdate
+   * @description Requests and waits for Lit update.
+   */
+   async waitForUpdate(){
+    this.host.requestUpdate();
+    await this.host.updateComplete;
+  }
+
+  /**
+   * @method waitForFrames
+   * @description Wait for specified number of animation frames
+   * @param {Number} ct Number of frames
+   */
+   async waitForFrames(ct=1) {
+    for (let i = 0; i < ct; i++) {
+      await new Promise(resolve => {
+        requestAnimationFrame(resolve);
+      });
+    }
+  }
+
+
+}

package/utils/mixins/index.js

@@ -0,0 +1,8 @@
+import Mixin from './mixin.js';
+import { MainDomElement } from './main-dom-element.js';
+import { NavElement } from './nav-element.js';
+
+export {
+  Mixin, 
+  MainDomElement, 
+  NavElement};

package/utils/{nav-element.js → mixins/nav-element.js}

@@ -45,6 +45,7 @@ const NavElement = (superClass) => class extends superClass {
     } else if ( ele.tagName === 'OL' || ele.tagName === 'UL' ) {
       linkText = ele.getAttribute('link-text');
       href = ele.getAttribute('href');
+      isOpen = ele.hasAttribute('is-open');
 
       for (const child of Array.from(ele.children)) {
         let childItem = this._makeNavItemTree(child);

package/utils/index.js

@@ -1,14 +0,0 @@
-import Mixin from './mixin.js';
-import { MutationObserverElement } from './mutation-observer.js';
-import { MainDomElement } from './main-dom-element.js';
-import { BreakPoints } from './break-points.js';
-import { NavElement } from './nav-element.js';
-import { Wait } from './wait.js';
-
-export {
-  Mixin, 
-  MutationObserverElement, 
-  MainDomElement, 
-  BreakPoints,
-  Wait,
-  NavElement};

package/utils/mutation-observer.js

@@ -1,51 +0,0 @@
-/**
- * @function MutationObserverElement
- * @param {Class} superClass - LitElement or child class.
- * @description add default functionality for mutation observer
- * 
- * @returns {Class} LitElement with mutation observer attached.
- */
-const MutationObserverElement = (superClass) => class extends superClass {
-
-  constructor() {
-    super();
-    this._childListObserver = null;
-  }
-
-  /**
-   * @method firstUpdated
-   * @description called on first DOM render.  Call the _onChildListMutation method
-   * 
-   * @param {Set} props 
-   */
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this._onChildListMutation();
-  }
-
-  /**
-   * @method connectedCallback
-   * @description Native lifecycle method called when element is connected
-   */
-  connectedCallback(){
-    super.connectedCallback();
-    this._childListObserver = new MutationObserver(
-      (mutationsList, observer) => this._onChildListMutation(mutationsList, observer));
-    this._childListObserver.observe(this, {childList: true});
-  }
-
-  /**
-   * @method disconnectedCallback
-   * @description Native lifecycle method called when element is disconnected
-   */
-  disconnectedCallback(){
-    this._childListObserver.disconnect();
-    super.disconnectedCallback();
-  }
-
-  _onChildListMutation(){
-    console.warn("You must create a '_onChildListMutation' method in your element to use the MutationObserverElement mixin");
-  }
-};
-
-export {MutationObserverElement};

package/utils/wait.js

@@ -1,65 +0,0 @@
-/**
- * @function Wait
- * @param {Class} superClass - LitElement or child class.
- * @description Adds wait methods to Lit element
- * 
- * @returns {Class} LitElement with Wait methods
- */
-const Wait = (superClass) => class extends superClass {
-
-  /**
-   * @method wait
-   * @description Wait for the specified amount of time
-   * @param {Number} time - Time to wait (ms)
-   * @returns 
-   */
-  async wait(time){
-    return new Promise(resolve => {
-      setTimeout(resolve, time);
-    });
-  }
-
-  /**
-   * @method waitForUpdate
-   * @description Requests and waits for Lit update.
-   */
-  async waitForUpdate(){
-    this.requestUpdate();
-    await this.updateComplete;
-  }
-
-  /**
-   * @method waitForFrames
-   * @description Wait for specified number of animation frames
-   * @param {Number} ct Number of frames
-   */
-  async waitForFrames(ct=1) {
-    for (let i = 0; i < ct; i++) {
-      await new Promise(resolve => {
-        requestAnimationFrame(resolve);
-      });
-    }
-  }
-
-  /**
-   * @method waitForAnimation
-   * @description Wait for animation time designated by element
-   * @returns {Promise}
-   */
-  async waitForAnimation() {
-
-    let animationDuration = 0;
-    if ( this.animationDuration ) {
-      animationDuration = this.animationDuration;
-    } else if (this._animationDuration) {
-      animationDuration = this._animationDuration;
-    } else {
-      console.warn("animationDuration property not set!");
-    }
-
-    return new Promise(resolve => {
-      setTimeout(resolve, animationDuration);
-    });
-  }
-};
-export {Wait};