@ucd-lib/theme-elements 0.0.1 → 0.0.5

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

@@ -0,0 +1,78 @@
+/**
+ * `ucdlib-icons` is a utility import that includes the definition for the
+ * `ucdlib-icon` element, `ucdlib-iconset` element, as well as an import for the
+ * default icon set.
+ * 
+ * NOTE: These are just placeholder icons.
+ */
+
+import { html } from "lit";
+import { renderIconSet } from "./utils";
+
+const template = html`
+  <svg>
+    <defs>
+    <g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"></path></g>
+    <g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path></g>
+    <g id="accessible"><circle cx="12" cy="4" r="2"></circle><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"></path></g>
+    <g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"></path></g>
+    <g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g>
+    <g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path></g>
+    <g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path></g>
+    <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
+    <g id="add-alert"><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z"></path></g>
+    <g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
+    <g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
+    <g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></g>
+    <g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"></path></g>
+    <g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path></g>
+    <g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"></path></g>
+    <g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"></path></g>
+    <g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"></path></g>
+    <g id="all-out"><path d="M16.21 4.16l4 4v-4zm4 12l-4 4h4zm-12 4l-4-4v4zm-4-12l4-4h-4zm12.95-.95c-2.73-2.73-7.17-2.73-9.9 0s-2.73 7.17 0 9.9 7.17 2.73 9.9 0 2.73-7.16 0-9.9zm-1.1 8.8c-2.13 2.13-5.57 2.13-7.7 0s-2.13-5.57 0-7.7 5.57-2.13 7.7 0 2.13 5.57 0 7.7z"></path></g>
+    <g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"></path></g>
+    <g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"></path></g>
+    <g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path></g>
+    <g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"></path></g>
+    <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
+    <g id="arrow-downward"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></g>
+    <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
+    <g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"></path></g>
+    <g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g>
+    <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g>
+    <g id="arrow-upward"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></g>
+    <g id="aspect-ratio"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"></path></g>
+    <g id="assessment"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"></path></g>
+    <g id="assignment"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></g>
+    <g id="assignment-ind"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></g>
+    <g id="assignment-late"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-6 15h-2v-2h2v2zm0-4h-2V8h2v6zm-1-9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></g>
+    <g id="assignment-return"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4 12h-4v3l-5-5 5-5v3h4v4z"></path></g>
+    <g id="assignment-returned"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 15l-5-5h3V9h4v4h3l-5 5z"></path></g>
+    <g id="assignment-turned-in"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></g>
+    <g id="attachment"><path d="M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z"></path></g>
+    <g id="autorenew"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"></path></g>
+    <g id="backspace"><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z"></path></g>
+    <g id="backup"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path></g>
+    <g id="block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"></path></g>
+    <g id="book"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"></path></g>
+    <g id="bookmark"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path></g>
+    <g id="bookmark-border"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"></path></g>
+    <g id="bug-report"><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"></path></g>
+    <g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path></g>
+    <g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"></path></g>
+    <g id="camera-enhance"><path d="M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-1l1.25-2.75L16 13l-2.75-1.25L12 9l-1.25 2.75L8 13l2.75 1.25z"></path></g>
+    <g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g>
+    <g id="card-giftcard"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"></path></g>
+    <g id="card-membership"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path></g>
+    <g id="card-travel"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"></path></g>
+    <g id="change-history"><path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"></path></g>
+    <g id="award"><path d="M7.74,16.79c-.39-.39-.19-.28-1.13-.53a3.37,3.37,0,0,1-1.14-.6l-2,5a.72.72,0,0,0,.69,1l2.37-.09,1.63,1.72a.71.71,0,0,0,1.18-.23l2.34-5.73a3.22,3.22,0,0,1-3.9-.53Zm12.83,3.87-2-5a3.37,3.37,0,0,1-1.14.6c-.95.25-.74.14-1.13.53a3.22,3.22,0,0,1-3.9.53l2.34,5.73a.71.71,0,0,0,1.18.23l1.63-1.72,2.37.09A.72.72,0,0,0,20.57,20.66Zm-5.38-4.89c.69-.7.76-.63,1.74-.9a1.83,1.83,0,0,0,1.28-1.3,2.91,2.91,0,0,1,1.17-2.06,1.87,1.87,0,0,0,.46-1.78,3,3,0,0,1,0-2.37,1.88,1.88,0,0,0-.46-1.78,2.89,2.89,0,0,1-1.17-2.05,1.81,1.81,0,0,0-1.28-1.3,2.87,2.87,0,0,1-2-1.19A1.76,1.76,0,0,0,13.17.56a2.81,2.81,0,0,1-2.34,0A1.76,1.76,0,0,0,9.09,1a2.87,2.87,0,0,1-2,1.19,1.81,1.81,0,0,0-1.28,1.3A2.89,2.89,0,0,1,4.62,5.58a1.88,1.88,0,0,0-.46,1.78,3,3,0,0,1,0,2.37,1.87,1.87,0,0,0,.46,1.78,2.91,2.91,0,0,1,1.17,2.06,1.83,1.83,0,0,0,1.28,1.3c1,.27,1.08.23,1.74.9A1.76,1.76,0,0,0,11,16,1.8,1.8,0,0,1,13,16,1.76,1.76,0,0,0,15.19,15.77ZM7.76,8.4A4.24,4.24,0,1,1,12,12.72,4.28,4.28,0,0,1,7.76,8.4Z"></path></g>
+    <g id="chalkboard-teacher"><path d="M7.8,15.6a.75.75,0,0,0-.26,0A4.93,4.93,0,0,1,6,15.9a4.93,4.93,0,0,1-1.54-.26.75.75,0,0,0-.26,0A4.2,4.2,0,0,0,0,19.82,1.79,1.79,0,0,0,1.8,21.6h8.4A1.79,1.79,0,0,0,12,19.82,4.2,4.2,0,0,0,7.8,15.6ZM6,14.4a3.6,3.6,0,1,0-3.6-3.6A3.6,3.6,0,0,0,6,14.4Zm16.2-12H7.8A1.83,1.83,0,0,0,6,4.26V6a4.68,4.68,0,0,1,2.4.67V4.8H21.6V15.6H19.2V13.2H14.4v2.4H11.54A4.79,4.79,0,0,1,13,18H22.2A1.83,1.83,0,0,0,24,16.14V4.26A1.83,1.83,0,0,0,22.2,2.4Z"></path></g>
+    <g id="hand-holding-usd"><path d="M11.29,7.35l2.27.59a.36.36,0,0,1,.27.34.37.37,0,0,1-.38.35H12a1.27,1.27,0,0,1-.47-.09.61.61,0,0,0-.64.08l-.79.73a.48.48,0,0,0-.09.11.46.46,0,0,0,.16.65h0a3.66,3.66,0,0,0,1.44.48v.73a.69.69,0,0,0,.72.67H13a.7.7,0,0,0,.72-.67V10.6A2.39,2.39,0,0,0,16,8,2.52,2.52,0,0,0,14,6l-2.26-.6a.36.36,0,0,1-.28-.34.37.37,0,0,1,.38-.35h1.49a1.23,1.23,0,0,1,.46.1.59.59,0,0,0,.64-.09L15.26,4a.28.28,0,0,0,.09-.1.48.48,0,0,0-.15-.66h0a3.37,3.37,0,0,0-1.44-.48V2A.69.69,0,0,0,13,1.33h-.72a.7.7,0,0,0-.73.67v.73A2.4,2.4,0,0,0,9.35,5.36,2.54,2.54,0,0,0,11.29,7.35ZM23.55,15a1.39,1.39,0,0,0-1.77,0l-3.85,3.08a2.68,2.68,0,0,1-1.67.59H11.33a.67.67,0,0,1,0-1.34H14.6A1.38,1.38,0,0,0,16,16.22,1.64,1.64,0,0,0,16,16a1.33,1.33,0,0,0-1.33-1.33H8a4.92,4.92,0,0,0-3.09,1.09L3,17.33H.67A.67.67,0,0,0,0,18v4a.67.67,0,0,0,.67.67H15.53a2.66,2.66,0,0,0,1.67-.59l6.3-5a1.33,1.33,0,0,0,.21-1.87,1.29,1.29,0,0,0-.16-.17Z"></path></g>
+    <g id="lightbulb"><path d="M4.78,6.4a2.62,2.62,0,0,1-.49-.19L2.39,5.12a.87.87,0,1,1,.85-1.51l2,1.17a.85.85,0,0,1,.36,1A1,1,0,0,1,4.78,6.4Z"/><path d="M2.5,8.81H3.61a.86.86,0,0,1,.9.82.83.83,0,0,1-.86.9c-.76,0-1.52,0-2.29,0A.83.83,0,0,1,.5,9.64a.85.85,0,0,1,.91-.83Z"/><path d="M21.18,15.88a3.66,3.66,0,0,1-.46-.18q-1-.54-1.92-1.11a.86.86,0,0,1-.34-1.17.83.83,0,0,1,1.14-.34c.7.38,1.39.78,2.08,1.19a.83.83,0,0,1,.35,1A.92.92,0,0,1,21.18,15.88Z"/><path d="M21.51,8.81h1.08a.84.84,0,0,1,.91.83.83.83,0,0,1-.87.89c-.76,0-1.51,0-2.27,0a.83.83,0,0,1-.87-.88.87.87,0,0,1,.91-.84Z"/><path d="M5.62,14a.82.82,0,0,1-.43.64c-.67.39-1.33.78-2,1.15a.86.86,0,0,1-.88-1.47c.67-.41,1.35-.81,2-1.18A.87.87,0,0,1,5.62,14Z"/><path d="M18.37,5.35a.8.8,0,0,1,.41-.59l2-1.14a.86.86,0,0,1,1.2.29.85.85,0,0,1-.33,1.21c-.65.38-1.3.76-2,1.13A.88.88,0,0,1,18.37,5.35Z"/><path d="M9.13,19.14a1.2,1.2,0,0,0,.19.64l.62.93a1.14,1.14,0,0,0,1,.51h2.22a1.14,1.14,0,0,0,1-.51l.62-.93a1.2,1.2,0,0,0,.19-.64V17.76H9.13Zm-3.46-10a6.29,6.29,0,0,0,1.57,4.17,10.61,10.61,0,0,1,1.88,3.29v0h5.77v0a10.23,10.23,0,0,1,1.88-3.29A6.34,6.34,0,1,0,5.67,9.12ZM12,6.24A2.88,2.88,0,0,0,9.13,9.12a.57.57,0,0,1-.58.57A.56.56,0,0,1,8,9.12a4,4,0,0,1,4-4,.57.57,0,0,1,.58.57A.58.58,0,0,1,12,6.24Z"></path></g>
+    <g id="book-open"><path d="M22.15,3.06c-2.19.12-6.54.57-9.22,2.22a.59.59,0,0,0-.29.52V20.33a.63.63,0,0,0,.93.54c2.76-1.39,6.76-1.77,8.73-1.87a1.25,1.25,0,0,0,1.2-1.23V4.28A1.25,1.25,0,0,0,22.15,3.06ZM11.07,5.28C8.39,3.63,4,3.18,1.85,3.06A1.25,1.25,0,0,0,.5,4.28V17.77A1.25,1.25,0,0,0,1.7,19c2,.1,6,.48,8.73,1.87a.63.63,0,0,0,.93-.53V5.8A.58.58,0,0,0,11.07,5.28Z"></path></g>
+    <g id="users"><path d="M3.6,10.8A2.4,2.4,0,1,0,1.2,8.4,2.41,2.41,0,0,0,3.6,10.8Zm16.8,0A2.4,2.4,0,1,0,18,8.4,2.41,2.41,0,0,0,20.4,10.8ZM21.6,12H19.2a2.39,2.39,0,0,0-1.69.7,5.47,5.47,0,0,1,2.81,4.1H22.8A1.2,1.2,0,0,0,24,15.6V14.4A2.41,2.41,0,0,0,21.6,12ZM12,12A4.2,4.2,0,1,0,7.8,7.8,4.2,4.2,0,0,0,12,12Zm2.88,1.2h-.31a5.8,5.8,0,0,1-5.14,0H9.12A4.33,4.33,0,0,0,4.8,17.52V18.6a1.81,1.81,0,0,0,1.8,1.8H17.4a1.81,1.81,0,0,0,1.8-1.8V17.52A4.33,4.33,0,0,0,14.88,13.2Zm-8.39-.5A2.39,2.39,0,0,0,4.8,12H2.4A2.41,2.41,0,0,0,0,14.4v1.2a1.2,1.2,0,0,0,1.2,1.2H3.67a5.51,5.51,0,0,1,2.82-4.1Z"></path></g>
+    </defs>
+  </svg>
+`;
+renderIconSet(template, "ucdlib", 24);

package/ucdlib/ucdlib-icons/utils.js

@@ -0,0 +1,29 @@
+import "../ucdlib-iconset/ucdlib-iconset";
+import "../ucdlib-icon/ucdlib-icon";
+
+import { html, render } from "lit-html";
+
+/**
+ * @description Creates iconset and moves to document head
+ * @param {TemplateResult} icons - SVG html string of icons
+ * @param {String} name - name of iconset. 
+ * @param {Number} size  - size of icons
+ */
+function renderIconSet(icons, name, size=24){
+  const containerId = `ucdlib-icons--${name}`;
+  let container = document.getElementById(containerId);
+  if ( !container ){
+    container = document.createElement("div");
+    container.style.display = "none";
+    container.id = containerId;
+    document.head.appendChild(container); 
+  } 
+  const template = html`
+    <ucdlib-iconset name=${name} size=${size}>
+      ${icons}
+    </ucdlib-iconset>
+  `;
+  render(template, container);
+}
+
+export { renderIconSet };

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

@@ -0,0 +1,170 @@
+import { LitElement } from 'lit';
+import { Mixin, MainDomElement} from "../../utils/mixins";
+import { MutationObserverController } from '../../utils/controllers';
+
+
+/**
+ * @class UcdlibIconset
+ * @classdesc Component for creating svg iconsets to be consumed by the 'icon' attribute of ucdlib-icon
+ * 
+ * @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. 
+ * @example
+ * <ucdlib-iconset name="arrows">
+    <svg>
+      <defs>
+        <g id="back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
+        <g id="downward"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></g>
+      </defs>
+    </svg>
+  </ucdlib-iconset>
+ */
+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},
+      _iconMap: {type: Object, state: true}
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.name = "";
+    this.size = 24;
+    this._iconMap = {};
+    this.style.display = "none";
+  }
+
+  /**
+   * @method updated
+   * @description Lit lifecyle method called after element updates
+   * @param {Map} props - Updated properties
+   * @private
+   */
+  updated( props ){
+    if (props.has('name') && this.name ) {
+      this.dispatchEvent(
+        new CustomEvent('ucdlib-iconset-added', {bubbles: true, composed: true})
+      );
+    }
+  }
+
+  /**
+   * @method getIconNames
+   * @description Returns a list of icon names for this set
+   * @returns {Array} 
+   */
+  getIconNames(){
+    return Object.keys(this._iconMap);
+  }
+
+  /**
+   * @method applyIcon
+   * @description Adds icon to ucdlib-icon element from iconset
+   * @param {Element} element - A ucdlib-icon element
+   * @param {String} iconName - The icon identifier
+   * @returns {Boolean}
+   */
+  applyIcon(element, iconName){
+    this.removeIcon(element);
+    let svg = this._cloneIcon(iconName);
+    if ( svg ) {
+      let eleRoot = this._getElementRoot(element);
+      eleRoot.insertBefore(svg, eleRoot.childNodes[0]);
+      return element._svgIcon = svg;
+    }
+    return null;
+  }
+
+  /**
+   * @method removeIcon
+   * @description Remove an icon from the given element by undoing the changes effected by `applyIcon`.
+   * 
+   * @param {Element} element The element from which the icon is removed.
+   */
+  removeIcon(element){
+    if (element._svgIcon) {
+      this._getElementRoot(element).removeChild(element._svgIcon);
+      element._svgIcon = null;
+    }
+  }
+
+  /**
+   * @method _cloneIcon
+   * @description Produce installable clone of the SVG element matching `id` in this
+   * iconset, or `undefined` if there is no matching element.
+   * @param {String} id - Icon id
+   * @returns {Element} - an SVG element
+   * @private
+   */
+  _cloneIcon(id){
+    if ( !this._iconMap ) this._updateIconMap();
+    if ( this._iconMap[id] ){
+      let content = this._iconMap[id].cloneNode(true), 
+        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+        viewBox =
+          content.getAttribute('viewBox') || '0 0 ' + this.size + ' ' + this.size,
+        cssText =
+          'pointer-events: none; display: block; width: 100%; height: 100%;';
+      svg.setAttribute('viewBox', viewBox);
+      svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      svg.setAttribute('focusable', 'false');
+      svg.style.cssText = cssText;
+      svg.appendChild(content).removeAttribute('id');
+      return svg;
+    }
+
+    return null;
+  }
+
+  /**
+   * @method _getElementRoot
+   * @description Returns shadowroot if exists
+   * @param {Element} element
+   * @returns {Object}
+   * @private
+   */
+  _getElementRoot(element){
+    if ( element.renderRoot ) {
+      return element.renderRoot;
+    }
+    if ( element.shadowRoot ) {
+      return element.shadowRoot;
+    }
+    return element;
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @description Fires when element child list changes
+   * @private
+   */
+  _onChildListMutation(){
+    this._updateIconMap();
+  }
+
+  /**
+   * @method _updateIconMap
+   * @description Sets the _iconMap property with object: {icon_id: icon}
+   * @private
+   */
+  _updateIconMap(){
+    let iconMap = {};
+    this.querySelectorAll('g[id]').forEach(icon => {
+      iconMap[icon.id] = icon;
+    });
+
+    if ( !Object.keys(iconMap).length ) {
+      console.warn('No g elements with an id attribute found!.');
+    }
+    this._iconMap = iconMap;
+  }
+
+}
+
+customElements.define('ucdlib-iconset', UcdlibIconset);

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

@@ -0,0 +1,150 @@
+import { LitElement } from 'lit';
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @class UcdlibPages
+ * @description similar to the old iron-pages element, allows you to control which element is visible
+ * based on child index or tag attribute
+ * @property {String} selected - Denotes which child is currently displayed.
+ *  If numeric, refers to index of child. Else, refers to child id.
+ *  If attrForSelected is used, refers to the value of that attribute instead of id.
+ * @property {String} attrForSelected - Use a custom attribute instead of id for matching 'selected'
+ * @property {String} selectedAttribute - Will assign attribute to selected child.
+ * 
+ * <ucdlib-pages selected="page2" attr-for-selected="id">
+ *   <div id="page1">Test 1</div>
+ *   <div id="page2">Test 2</div>
+ * </ucdlib-pages>
+ */
+export default class UcdlibPages extends LitElement {
+  mutationObserver = new MutationObserverController(this);
+
+  static get properties() {
+    return {
+      selected : {type: String},
+      attrForSelected : {
+        attribute: 'attr-for-selected',
+        type: String
+      },
+      selectedAttribute : {
+        attribute: 'selected-attribute',
+        type: String
+      }
+    };
+  }
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * @method createRenderRoot
+   * @description override createRenderRoot, no need for shadowdom
+   * 
+   * @returns {Element}
+   */
+  createRenderRoot() {
+    return this;
+  }
+
+  updated(props) {
+    if( props.has('attrForSelected') || props.has('selectedAttribute') || props.has('selected') ) {
+      this._onChange();
+    }
+  }
+  
+  /**
+   * @method _onChildListMutation
+   * @description called when children change via MutationObserverController
+   */
+  _onChildListMutation() {
+    this._onChange();
+  }
+
+  /**
+   * @method _onChange
+   * @description update visibility 
+   */
+  _onChange() {
+    let attr = this.attrForSelected || 'id';
+    let selected = 0;
+
+    // find what the selected attribute is
+    if( this.selected !== undefined || this.selected !== null ) {
+      if( typeof this.selected === 'string' && /^\d+$/.test(this.selected) ) {
+        selected = parseInt(this.selected);
+      } else {
+        selected = this.selected;
+      }
+    }
+
+    // loop through and hide/show children
+    let found = this._updateVisibility(selected, attr);
+
+    // if nothing found, check fallback selection
+    if( !found && this.fallbackSelection ) {
+      if( typeof this.selected === 'string' && this.selected.match(/\d+/) ) {
+        selected = parseInt(this.fallbackSelection);
+      } else {
+        selected = this.fallbackSelection;
+      }
+
+      found = this._updateVisibility(selected, attr);
+    } 
+
+    if( !found ) {
+      console.warn('ucdlib-pages was unable match: ', selected);
+    }
+  }
+
+  /**
+   * @method _updateVisibility
+   * @description run update loop based on selected value and attribute to use if
+   * selected is not a number.
+   * 
+   * @param {String|Number} selected 
+   * @param {String} attr 
+   * @returns {Boolean}
+   */
+  _updateVisibility(selected, attr) {
+    let children = [... this.children];
+    let found = false;
+    let useIndex = (typeof selected === 'number');
+    let val;
+
+    for( let i = 0; i < children.length; i++ ) {
+      if( useIndex ) {
+        this._select((i === selected), children[i], this.selectedAttribute);
+        if( !found ) found = (i === selected);
+        continue;
+      }
+
+      val = children[i].getAttribute(attr);
+      this._select((val === selected), children[i], this.selectedAttribute);
+      if( !found ) found = (val === selected);
+    }
+
+    return found;
+  }
+
+  /**
+   * @method _select
+   * @description select attributes
+   * 
+   * @param {Boolean} value 
+   * @param {Element} child 
+   * @param {String} attribute 
+   */
+  _select(value, child, attribute) {
+    if( value ) {
+      if( attribute ) child.setAttribute(attribute, attribute);
+      else child.style.display = 'block';
+    } else {
+      if( attribute ) child.removeAttribute(attribute, attribute);
+      else child.style.display = 'none';
+    }
+  }
+
+}
+
+customElements.define('ucdlib-pages', UcdlibPages);

package/utils/controllers/break-points.js

@@ -0,0 +1,26 @@
+export class BreakPointsController{
+
+  mobileBreakPoint = 992;
+  
+  constructor(host){
+    (this.host = host).addController(this);
+  }
+
+  /**
+  * @method isDesktop
+  * @description Is the desktop view currently active?
+  * @returns {Boolean}
+  */
+   isDesktop(){
+    return window.innerWidth >= this.mobileBreakPoint;
+  }
+
+  /**
+   * @method isMobile
+   * @description Is the mobile view currently active?
+   * @returns {Boolean}
+   */
+  isMobile(){
+    return !this.isDesktop();
+  }  
+}

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/directives/motion-collapse.js

@@ -1,4 +1,4 @@
-import {nothing} from 'lit/html.js';
+import {nothing} from 'lit';
 import {AsyncDirective} from 'lit/async-directive.js';
 import {directive, PartType} from 'lit/directive.js';
 

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};