diff --git a/dist/calcite.js b/dist/calcite.js
new file mode 100644
index 00000000000..3cd8645ffc0
--- /dev/null
+++ b/dist/calcite.js
@@ -0,0 +1,27 @@
+
+(function(doc){
+  var scriptElm = doc.scripts[doc.scripts.length - 1];
+  var warn = ['[calcite] Deprecated script, please remove: ' + scriptElm.outerHTML];
+
+  warn.push('To improve performance it is recommended to set the differential scripts in the head as follows:')
+
+  var parts = scriptElm.src.split('/');
+  parts.pop();
+  parts.push('calcite');
+  var url = parts.join('/');
+
+  var scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('type', 'module');
+  scriptElm.src = url + '/calcite.esm.js';
+  doc.head.appendChild(scriptElm);
+  warn.push(scriptElm.outerHTML);
+
+  scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('nomodule', '');
+  scriptElm.src = url + '/calcite.js';
+  doc.head.appendChild(scriptElm);
+  warn.push(scriptElm.outerHTML);
+
+  console.warn(warn.join('\n'));
+
+})(document);
\ No newline at end of file
diff --git a/dist/calcite/calcite.css b/dist/calcite/calcite.css
new file mode 100644
index 00000000000..28746d71126
--- /dev/null
+++ b/dist/calcite/calcite.css
@@ -0,0 +1 @@
+@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}
\ No newline at end of file
diff --git a/dist/calcite/calcite.esm.js b/dist/calcite/calcite.esm.js
new file mode 100644
index 00000000000..73d996756fb
--- /dev/null
+++ b/dist/calcite/calcite.esm.js
@@ -0,0 +1 @@
+import{a as e,b as t}from"./p-6baed856.js";e().then(e=>t([["p-xwf9iwah",[[1,"calcite-alert",{currentAlert:[1,"current-alert"],dismiss:[4],icon:[4],id:[1],queueLength:[2,"queue-length"],color:[513],theme:[513],duration:[513],isActive:[32],close:[64]}],[1,"calcite-alerts",{id:[1],currentAlert:[32],isActive:[32],queue:[32],open:[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{isActive:[4,"is-active"],text:[1]}],[1,"calcite-modal",{first:[1],middle:[1],last:[1]}],[1,"calcite-tab",{id:[1537],tab:[1537],isActive:[1540,"is-active"],labeledBy:[32],getTabIndex:[64],registerLabeledBy:[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{id:[1537],selectedTab:[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{id:[1537],tab:[1537],isActive:[1540,"is-active"],controls:[32],getTabIndex:[64],setControledBy:[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{theme:[513],tabs:[32],tabTitles:[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["p-7fxfqsv7",[[0,"context-consumer",{context:[16],renderer:[16],subscribe:[16],unsubscribe:[32]}]]]],{resourcesUrl:e}));
\ No newline at end of file
diff --git a/dist/calcite/calcite.js b/dist/calcite/calcite.js
new file mode 100644
index 00000000000..1d82465bd2e
--- /dev/null
+++ b/dist/calcite/calcite.js
@@ -0,0 +1,810 @@
+
+/*!
+Array.prototype.fill
+*/
+Array.prototype.fill||Object.defineProperty(Array.prototype,"fill",{value:function(t){var r,e,i,n,o,a,l;if(null==this)throw new TypeError("this is null or not defined");for(e=(r=Object(this)).length>>>0,n=(i=arguments[1]>>0)<0?Math.max(e+i,0):Math.min(i,e),l=(a=void 0===(o=arguments[2])?e:o>>0)<0?Math.max(e+a,0):Math.min(a,e);n<l;)r[n]=t,n++;return r}});
+
+/*!
+Array.prototype.find
+*/
+Array.prototype.find||Object.defineProperty(Array.prototype,"find",{writable:!0,configurable:!0,value:function(c,e){if(null==this)throw new TypeError('"this" is null or not defined');var b=Object(this),f=b.length>>>0;if("function"!==typeof c)throw new TypeError("predicate must be a function");for(var a=0;a<f;){var d=b[a];if(c.call(e,d,a,b))return d;a++}}});
+/*!
+Array.prototype.findIndex
+*/
+Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(c,d){if(null==this)throw new TypeError('"this" is null or not defined');var b=Object(this),e=b.length>>>0;if("function"!==typeof c)throw new TypeError("predicate must be a function");for(var a=0;a<e;){if(c.call(d,b[a],a,b))return a;a++}return-1},configurable:!0,writable:!0});
+/*!
+Array.from
+*/
+Array.from||(Array.from=function(){var l=Object.prototype.toString,h=function(c){return"function"===typeof c||"[object Function]"===l.call(c)},m=Math.pow(2,53)-1;return function(c){var k=Object(c);if(null==c)throw new TypeError("Array.from requires an array-like object - not null or undefined");var d=1<arguments.length?arguments[1]:void 0,f;if("undefined"!==typeof d){if(!h(d))throw new TypeError("Array.from: when provided, the second argument must be a function");2<arguments.length&&(f=arguments[2])}var a=
+Number(k.length);a=isNaN(a)?0:0!==a&&isFinite(a)?(0<a?1:-1)*Math.floor(Math.abs(a)):a;a=Math.min(Math.max(a,0),m);for(var g=h(this)?Object(new this(a)):Array(a),b=0,e;b<a;)e=k[b],g[b]=d?"undefined"===typeof f?d(e,b):d.call(f,e,b):e,b+=1;g.length=a;return g}}());
+/*!
+Array.prototype.includes
+*/
+Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{writable:!0,configurable:!0,value:function(r,e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if(0===n)return!1;var i,o,a=0|e,u=Math.max(0<=a?a:n-Math.abs(a),0);for(;u<n;){if((i=t[u])===(o=r)||"number"==typeof i&&"number"==typeof o&&isNaN(i)&&isNaN(o))return!0;u++}return!1}});
+
+/*!
+Object.assign
+*/
+"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(d,f){if(null==d)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(d),b=1;b<arguments.length;b++){var a=arguments[b];if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(e[c]=a[c])}return e},writable:!0,configurable:!0});
+/*!
+Object.entries
+*/
+Object.entries||(Object.entries=function(c){for(var b=Object.keys(c),a=b.length,d=Array(a);a--;)d[a]=[b[a],c[b[a]]];return d});
+/*!
+Object.values
+*/
+Object.values||(Object.values=function(n){return Object.keys(n).map(function(r){return n[r]})});
+
+/*!
+Number
+*/
+void 0===Number.isFinite&&(Number.isFinite=function(a){return"number"===typeof a&&isFinite(a)});
+Number.isNaN=Number.isNaN||function(a){return a!==a};
+Number.isInteger=Number.isInteger||function(a){return"number"===typeof a&&isFinite(a)&&Math.floor(a)===a};
+
+/*!
+String.prototype.endsWith
+*/
+String.prototype.endsWith||Object.defineProperty(String.prototype,"endsWith",{writable:!0,configurable:!0,value:function(b,a){if(void 0===a||a>this.length)a=this.length;return this.substring(a-b.length,a)===b}});
+/*!
+String.prototype.includes
+*/
+String.prototype.includes||(String.prototype.includes=function(b,a){"number"!==typeof a&&(a=0);return a+b.length>this.length?!1:-1!==this.indexOf(b,a)});
+/*!
+String.prototype.startsWith
+*/
+String.prototype.startsWith||Object.defineProperty(String.prototype,"startsWith",{writable:!0,configurable:!0,value:function(b,a){return this.substr(!a||0>a?0:+a,b.length)===b}});
+/*
+  Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){"use strict";var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return!(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var l=a.localName;if("link"===l&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===l){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n)}r=r.firstChild?r.firstChild:o(t,r)}}function r(t,e,n){t[e]=n}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1}function l(t,e){t.b=!0,t.c.push(e)}function c(t,e){t.b&&i(e,function(e){return s(t,e)})}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e)}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o)}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o)}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r})}})}else a.push(e)},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e])}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop()}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null)}n(e)&&t.connectedCallback(e)}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}))}function m(t){t.b&&t.b.disconnect()}function w(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a)})}function b(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0)}function y(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t)}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t)},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t)},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i)},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o])},y.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),l=i("disconnectedCallback"),c=i("adoptedCallback"),s=i("attributeChangedCallback"),h=n.observedAttributes||[]}catch(t){return}finally{this.c=!1}n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:l,adoptedCallback:c,attributeChangedCallback:s,observedAttributes:h,constructionStack:[]},function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n)}(this.a,t,n),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e)}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&b(i)}}}(o)}))},y.prototype.h=function(t){p(this.a,t)},y.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},y.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new w,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&b(n),n.c)},y.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})}},window.CustomElementRegistry=y,y.prototype.define=y.prototype.l,y.prototype.upgrade=y.prototype.h,y.prototype.get=y.prototype.get,y.prototype.whenDefined=y.prototype.m,y.prototype.polyfillWrapFlushCallback=y.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,j=window.Node.prototype.replaceChild,L=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),M=window.Element.prototype.attachShadow,H=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),x=window.Element.prototype.getAttribute,O=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,U=window.Element.prototype.append,V=window.Element.prototype.before,X=window.Element.prototype.after,$=window.Element.prototype.replaceWith,q=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c)}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a)}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append))}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):c(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C})}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var l=0;l<a;l++)i[l]=r[l]}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)u(e,i[t])}}})}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)h(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&u(e,t),n(this)&&h(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)h(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&u(e,t),n(this)&&h(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):c(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&u(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=j.call(this,t,o),n(this))for(u(e,o),o=0;o<i.length;o++)h(e,i[o]);return t}i=n(t);var r=j.call(this,t,o),a=n(this);return a&&u(e,o),i&&u(e,t),a&&h(e,t),r}),L&&L.get?t(Node.prototype,L):l(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t))}})})}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t)})),e.set.call(this,t),r)for(var l=0;l<r.length;l++){var s=r[l];1===s.__CE_state&&a.disconnectedCallback(s)}return this.ownerDocument.__CE_hasRegistry?p(a,this):c(a,this),t}})}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&u(a,o),n(t)&&h(a,o),t})}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e])}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this)}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i)}})}var a=nt;M&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=M.call(this,t)}),H&&H.get?t(Element.prototype,H):J&&J.get?t(HTMLElement.prototype,J):l(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0])}})}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return O.call(this,t,e);var n=x.call(this,t);O.call(this,t,e),e=x.call(this,t),a.attributeChangedCallback(this,t,n,e,null)}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t)}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=x.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null)}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t)}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:U}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c)}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a)}}var o=Element.prototype;void 0!==V&&(o.before=e(V)),void 0!==V&&(o.after=e(X)),void 0!==$&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var l=o[a];if(l instanceof Element&&n(l)&&r.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)i.push(l);else i.push(l)}for(a=n(this),$.apply(this,o),o=0;o<r.length;o++)u(t,r[o]);if(a)for(u(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&h(t,r)}),void 0!==q&&r(o,"remove",function(){var e=n(this);q.call(this),e&&u(t,this)})}(a)}(),document.__CE_hasRegistry=!0;var ot=new y(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot})}}).call(self);
+
+// Polyfill CustomEvent
+if (typeof window.CustomEvent !== 'function') {
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+}
+
+/*!
+Element.closest and Element.matches
+https://github.com/jonathantneal/closest
+Creative Commons Zero v1.0 Universal
+*/
+(function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return!!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode}return null})})(window.Element.prototype);
+/*!
+Element.getRootNode()
+*/
+(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+/*!
+Element.remove()
+*/
+(function(b){b.forEach(function(a){a.hasOwnProperty("remove")||Object.defineProperty(a,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this)}})})})([Element.prototype,CharacterData.prototype,DocumentType.prototype]);
+
+(function() {
+  if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+    window.customElements === undefined
+  ) {
+    return;
+  }
+  const BuiltInHTMLElement = HTMLElement;
+  window.HTMLElement = /** @this {!Object} */ function HTMLElement() {
+    return Reflect.construct(
+        BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
+  };
+  HTMLElement.prototype = BuiltInHTMLElement.prototype;
+  HTMLElement.prototype.constructor = HTMLElement;
+  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
+})();
+
+/*!
+es6-promise - a tiny implementation of Promises/A+.
+Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+Licensed under MIT license
+See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+v4.2.4+314e4831
+*/
+(window.ES6Promise=function(){function t(){var t=setTimeout;return function(){return t(r,1)}}function r(){for(var t=0;t<y;t+=2)(0,C[t])(C[t+1]),C[t]=void 0,C[t+1]=void 0;y=0}function e(t,r){var e=this,n=new this.constructor(o);void 0===n[O]&&_(n);var i=e._state;if(i){var s=arguments[i-1];g(function(){return v(i,n,s,e._result)})}else l(e,n,t,r);return n}function n(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var r=new this(o);return u(r,t),r}function o(){}function i(t){try{return t.then}catch(t){return q.error=t,q}}function s(t,r,o){r.constructor===t.constructor&&o===e&&r.constructor.resolve===n?function(t,r){r._state===x?a(t,r._result):r._state===F?f(t,r._result):l(r,void 0,function(r){return u(t,r)},function(r){return f(t,r)})}(t,r):o===q?(f(t,q.error),q.error=null):void 0===o?a(t,r):"function"==typeof o?function(t,r,e){g(function(t){var n=!1,o=function(t,r,e,n){try{t.call(r,e,n)}catch(t){return t}}(e,r,function(e){n||(n=!0,r!==e?u(t,e):a(t,e))},function(r){n||(n=!0,f(t,r))},t._label);!n&&o&&(n=!0,f(t,o))},t)}(t,r,o):a(t,r)}function u(t,r){if(t===r)f(t,new TypeError("cannot resolve promise w/ itself"));else{var e=typeof r;null===r||"object"!==e&&"function"!==e?a(t,r):s(t,r,i(r))}}function c(t){t._onerror&&t._onerror(t._result),h(t)}function a(t,r){t._state===P&&(t._result=r,t._state=x,0!==t._subscribers.length&&g(h,t))}function f(t,r){t._state===P&&(t._state=F,t._result=r,g(c,t))}function l(t,r,e,n){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=r,o[i+x]=e,o[i+F]=n,0===i&&t._state&&g(h,t)}function h(t){var r=t._subscribers,e=t._state;if(0!==r.length){for(var n,o,i=t._result,s=0;s<r.length;s+=3)n=r[s],o=r[s+e],n?v(e,n,o,i):o(i);t._subscribers.length=0}}function v(t,r,e,n){var o="function"==typeof e,i=void 0,s=void 0,c=void 0,l=void 0;if(o){try{i=e(n)}catch(t){q.error=t,i=q}if(i===q?(l=!0,s=i.error,i.error=null):c=!0,r===i)return void f(r,new TypeError("Cannot return same promise"))}else i=n,c=!0;r._state===P&&(o&&c?u(r,i):l?f(r,s):t===x?a(r,i):t===F&&f(r,i))}function _(t){t[O]=U++,t._state=void 0,t._result=void 0,t._subscribers=[]}var p,d=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},y=0,w=void 0,m=void 0,g=function(t,e){C[y]=t,C[y+1]=e,2===(y+=2)&&(m?m(r):T())},b=(p="undefined"!=typeof window?window:void 0)||{},A=b.MutationObserver||b.WebKitMutationObserver;b="undefined"==typeof self;var E,S,M,j="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,C=Array(1e3),T=void 0;T=A?(E=0,S=new A(r),M=document.createTextNode(""),S.observe(M,{characterData:!0}),function(){M.data=E=++E%2}):j?function(){var t=new MessageChannel;return t.port1.onmessage=r,function(){return t.port2.postMessage(0)}}():void 0===p&&"function"==typeof require?function(){try{var e=Function("return this")().require("vertx");return void 0!==(w=e.runOnLoop||e.runOnContext)?function(){w(r)}:t()}catch(r){return t()}}():t();var O=Math.random().toString(36).substring(2),P=void 0,x=1,F=2,q={error:null},U=0,D=function(){function t(t,r){this._instanceConstructor=t,this.promise=new t(o),this.promise[O]||_(this.promise),d(r)?(this._remaining=this.length=r.length,this._result=Array(this.length),0===this.length?a(this.promise,this._result):(this.length=this.length||0,this._enumerate(r),0===this._remaining&&a(this.promise,this._result))):f(this.promise,Error("Array Methods must be provided an Array"))}return t.prototype._enumerate=function(t){for(var r=0;this._state===P&&r<t.length;r++)this._eachEntry(t[r],r)},t.prototype._eachEntry=function(t,r){var u=this._instanceConstructor,c=u.resolve;c===n?(c=i(t))===e&&t._state!==P?this._settledAt(t._state,r,t._result):"function"!=typeof c?(this._remaining--,this._result[r]=t):u===K?(s(u=new u(o),t,c),this._willSettleAt(u,r)):this._willSettleAt(new u(function(r){return r(t)}),r):this._willSettleAt(c(t),r)},t.prototype._settledAt=function(t,r,e){var n=this.promise;n._state===P&&(this._remaining--,t===F?f(n,e):this._result[r]=e),0===this._remaining&&a(n,this._result)},t.prototype._willSettleAt=function(t,r){var e=this;l(t,void 0,function(t){return e._settledAt(x,r,t)},function(t){return e._settledAt(F,r,t)})},t}(),K=function(){function t(r){if(this[O]=U++,this._result=this._state=void 0,this._subscribers=[],o!==r){if("function"!=typeof r)throw new TypeError("Must pass a resolver fn as 1st arg");if(!(this instanceof t))throw new TypeError("Failed to construct 'Promise': Use the 'new' operator.");!function(t,r){try{r(function(r){u(t,r)},function(r){f(t,r)})}catch(r){f(t,r)}}(this,r)}}return t.prototype.catch=function(t){return this.then(null,t)},t.prototype.finally=function(t){var r=this.constructor;return this.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})})},t}();return K.prototype.then=e,K.all=function(t){return new D(this,t).promise},K.race=function(t){var r=this;return d(t)?new r(function(e,n){for(var o=t.length,i=0;i<o;i++)r.resolve(t[i]).then(e,n)}):new r(function(t,r){return r(new TypeError("Must pass array to race"))})},K.resolve=n,K.reject=function(t){var r=new this(o);return f(r,t),r},K._setScheduler=function(t){m=t},K._setAsap=function(t){g=t},K._asap=g,K.polyfill=function(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(t){throw Error("polyfill failed")}var r=t.Promise;if(r){var e=null;try{e=Object.prototype.toString.call(r.resolve())}catch(t){}if("[object Promise]"===e&&!r.cast)return}t.Promise=K},K.Promise=K,K.polyfill(),K}());
+/*! https://github.com/WebReflection/es6-collections
+(C) Andrea Giammarchi - @WebReflection - Mit Style License */
+(function(e){function d(a,b){function c(a){if(!this||this.constructor!==c)return new c(a);this._keys=[];this._values=[];this._itp=[];this.objectOnly=b;a&&v.call(this,a)}b||w(a,"size",{get:x});a.constructor=c;c.prototype=a;return c}function v(a){this.add?a.forEach(this.add,this):a.forEach(function(a){this.set(a[0],a[1])},this)}function f(a){this.has(a)&&(this._keys.splice(c,1),this._values.splice(c,1),this._itp.forEach(function(a){c<a[0]&&a[0]--}));return-1<c}function m(a){return this.has(a)?this._values[c]:
+  void 0}function n(a,b){if(this.objectOnly&&b!==Object(b))throw new TypeError("Invalid value used as weak collection key");if(b!=b||0===b)for(c=a.length;c--&&!y(a[c],b););else c=a.indexOf(b);return-1<c}function p(a){return n.call(this,this._values,a)}function q(a){return n.call(this,this._keys,a)}function r(a,b){this.has(a)?this._values[c]=b:this._values[this._keys.push(a)-1]=b;return this}function t(a){this.has(a)||this._values.push(a);return this}function h(){(this._keys||0).length=this._values.length=
+  0}function z(){return k(this._itp,this._keys)}function l(){return k(this._itp,this._values)}function A(){return k(this._itp,this._keys,this._values)}function B(){return k(this._itp,this._values,this._values)}function k(a,b,c){var g=[0],e=!1;a.push(g);return{next:function(){var d=g[0];if(!e&&d<b.length){var f=c?[b[d],c[d]]:b[d];g[0]++}else e=!0,a.splice(a.indexOf(g),1);return{done:e,value:f}}}}function x(){return this._values.length}function u(a,b){for(var c=this.entries();;){var d=c.next();if(d.done)break;
+  a.call(b,d.value[1],d.value[0],this)}}var c,w=Object.defineProperty,y=function(a,b){return a===b||a!==a&&b!==b};"undefined"==typeof WeakMap&&(e.WeakMap=d({"delete":f,clear:h,get:m,has:q,set:r},!0));"undefined"!=typeof Map&&"function"===typeof(new Map).values&&(new Map).values().next||(e.Map=d({"delete":f,has:q,get:m,set:r,keys:z,values:l,entries:A,forEach:u,clear:h}));"undefined"!=typeof Set&&"function"===typeof(new Set).values&&(new Set).values().next||(e.Set=d({has:p,add:t,"delete":f,clear:h,keys:l,
+  values:l,entries:B,forEach:u}));"undefined"==typeof WeakSet&&(e.WeakSet=d({"delete":f,add:t,clear:h,has:p},!0))})(window);
+/*!
+whatwg-fetch, 2.0.3
+https://github.com/github/fetch
+Copyright (c) 2014-2016 GitHub, Inc. - MIT License
+*/
+(function(e){function l(a){"string"!==typeof a&&(a=String(a));if(/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(a))throw new TypeError("Invalid character in header field name");return a.toLowerCase()}function q(a){"string"!==typeof a&&(a=String(a));return a}function n(a){var b={next:function(){var b=a.shift();return{done:void 0===b,value:b}}};g.iterable&&(b[Symbol.iterator]=function(){return b});return b}function d(a){this.map={};a instanceof d?a.forEach(function(a,c){this.append(c,a)},this):Array.isArray(a)?
+a.forEach(function(a){this.append(a[0],a[1])},this):a&&Object.getOwnPropertyNames(a).forEach(function(b){this.append(b,a[b])},this)}function p(a){if(a.bodyUsed)return Promise.reject(new TypeError("Already read"));a.bodyUsed=!0}function r(a){return new Promise(function(b,c){a.onload=function(){b(a.result)};a.onerror=function(){c(a.error)}})}function w(a){var b=new FileReader,c=r(b);b.readAsArrayBuffer(a);return c}function x(a){a=new Uint8Array(a);for(var b=Array(a.length),c=0;c<a.length;c++)b[c]=String.fromCharCode(a[c]);
+return b.join("")}function t(a){if(a.slice)return a.slice(0);var b=new Uint8Array(a.byteLength);b.set(new Uint8Array(a));return b.buffer}function u(){this.bodyUsed=!1;this._initBody=function(a){if(this._bodyInit=a)if("string"===typeof a)this._bodyText=a;else if(g.blob&&Blob.prototype.isPrototypeOf(a))this._bodyBlob=a;else if(g.formData&&FormData.prototype.isPrototypeOf(a))this._bodyFormData=a;else if(g.searchParams&&URLSearchParams.prototype.isPrototypeOf(a))this._bodyText=a.toString();else if(g.arrayBuffer&&
+g.blob&&y(a))this._bodyArrayBuffer=t(a.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer]);else if(g.arrayBuffer&&(ArrayBuffer.prototype.isPrototypeOf(a)||z(a)))this._bodyArrayBuffer=t(a);else throw Error("unsupported BodyInit type");else this._bodyText="";this.headers.get("content-type")||("string"===typeof a?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):g.searchParams&&URLSearchParams.prototype.isPrototypeOf(a)&&
+this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))};g.blob&&(this.blob=function(){var a=p(this);if(a)return a;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?p(this)||Promise.resolve(this._bodyArrayBuffer):
+this.blob().then(w)});this.text=function(){var a=p(this);if(a)return a;if(this._bodyBlob){a=this._bodyBlob;var b=new FileReader,c=r(b);b.readAsText(a);return c}if(this._bodyArrayBuffer)return Promise.resolve(x(this._bodyArrayBuffer));if(this._bodyFormData)throw Error("could not read FormData body as text");return Promise.resolve(this._bodyText)};g.formData&&(this.formData=function(){return this.text().then(A)});this.json=function(){return this.text().then(JSON.parse)};return this}function k(a,b){b=
+b||{};var c=b.body;if(a instanceof k){if(a.bodyUsed)throw new TypeError("Already read");this.url=a.url;this.credentials=a.credentials;b.headers||(this.headers=new d(a.headers));this.method=a.method;this.mode=a.mode;c||null==a._bodyInit||(c=a._bodyInit,a.bodyUsed=!0)}else this.url=String(a);this.credentials=b.credentials||this.credentials||"omit";if(b.headers||!this.headers)this.headers=new d(b.headers);var v=b.method||this.method||"GET",g=v.toUpperCase();this.method=-1<B.indexOf(g)?g:v;this.mode=
+b.mode||this.mode||null;this.referrer=null;if(("GET"===this.method||"HEAD"===this.method)&&c)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(c)}function A(a){var b=new FormData;a.trim().split("&").forEach(function(a){if(a){var c=a.split("=");a=c.shift().replace(/\+/g," ");c=c.join("=").replace(/\+/g," ");b.append(decodeURIComponent(a),decodeURIComponent(c))}});return b}function C(a){var b=new d;a.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(a){var c=
+a.split(":");if(a=c.shift().trim())c=c.join(":").trim(),b.append(a,c)});return b}function h(a,b){b||(b={});this.type="default";this.status=void 0===b.status?200:b.status;this.ok=200<=this.status&&300>this.status;this.statusText="statusText"in b?b.statusText:"OK";this.headers=new d(b.headers);this.url=b.url||"";this._initBody(a)}if(!e.fetch){var D="Symbol"in e&&"iterator"in Symbol,m;if(m="FileReader"in e&&"Blob"in e)try{new Blob,m=!0}catch(a){m=!1}var g={searchParams:"URLSearchParams"in e,iterable:D,
+blob:m,formData:"FormData"in e,arrayBuffer:"ArrayBuffer"in e};if(g.arrayBuffer){var E="[object Int8Array];[object Uint8Array];[object Uint8ClampedArray];[object Int16Array];[object Uint16Array];[object Int32Array];[object Uint32Array];[object Float32Array];[object Float64Array]".split(";");var y=function(a){return a&&DataView.prototype.isPrototypeOf(a)};var z=ArrayBuffer.isView||function(a){return a&&-1<E.indexOf(Object.prototype.toString.call(a))}}d.prototype.append=function(a,b){a=l(a);b=q(b);var c=
+this.map[a];this.map[a]=c?c+","+b:b};d.prototype["delete"]=function(a){delete this.map[l(a)]};d.prototype.get=function(a){a=l(a);return this.has(a)?this.map[a]:null};d.prototype.has=function(a){return this.map.hasOwnProperty(l(a))};d.prototype.set=function(a,b){this.map[l(a)]=q(b)};d.prototype.forEach=function(a,b){for(var c in this.map)this.map.hasOwnProperty(c)&&a.call(b,this.map[c],c,this)};d.prototype.keys=function(){var a=[];this.forEach(function(b,c){a.push(c)});return n(a)};d.prototype.values=
+function(){var a=[];this.forEach(function(b){a.push(b)});return n(a)};d.prototype.entries=function(){var a=[];this.forEach(function(b,c){a.push([c,b])});return n(a)};g.iterable&&(d.prototype[Symbol.iterator]=d.prototype.entries);var B="DELETE GET HEAD OPTIONS POST PUT".split(" ");k.prototype.clone=function(){return new k(this,{body:this._bodyInit})};u.call(k.prototype);u.call(h.prototype);h.prototype.clone=function(){return new h(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new d(this.headers),
+url:this.url})};h.error=function(){var a=new h(null,{status:0,statusText:""});a.type="error";return a};var F=[301,302,303,307,308];h.redirect=function(a,b){if(-1===F.indexOf(b))throw new RangeError("Invalid status code");return new h(null,{status:b,headers:{location:a}})};e.Headers=d;e.Request=k;e.Response=h;e.fetch=function(a,b){return new Promise(function(c,d){var e=new k(a,b),f=new XMLHttpRequest;f.onload=function(){var a={status:f.status,statusText:f.statusText,headers:C(f.getAllResponseHeaders()||
+"")};a.url="responseURL"in f?f.responseURL:a.headers.get("X-Request-URL");c(new h("response"in f?f.response:f.responseText,a))};f.onerror=function(){d(new TypeError("Network request failed"))};f.ontimeout=function(){d(new TypeError("Network request failed"))};f.open(e.method,e.url,!0);"include"===e.credentials?f.withCredentials=!0:"omit"===e.credentials&&(f.withCredentials=!1);"responseType"in f&&g.blob&&(f.responseType="blob");e.headers.forEach(function(a,b){f.setRequestHeader(b,a)});f.send("undefined"===
+typeof e._bodyInit?null:e._bodyInit)})};e.fetch.polyfill=!0}})("undefined"!==typeof self?self:window);
+/*!
+url-polyfill, 1.1.5
+https://github.com/lifaon74/url-polyfill
+MIT Licensed
+*/
+(function(t){var e=function(){try{return!!Symbol.iterator}catch(e){return false}};var r=e();var n=function(t){var e={next:function(){var e=t.shift();return{done:e===void 0,value:e}}};if(r){e[Symbol.iterator]=function(){return e}}return e};var i=function(e){return encodeURIComponent(e).replace(/%20/g,"+")};var o=function(e){return decodeURIComponent(String(e).replace(/\+/g," "))};var a=function(){var a=function(e){Object.defineProperty(this,"_entries",{writable:true,value:{}});var t=typeof e;if(t==="undefined"){}else if(t==="string"){if(e!==""){this._fromString(e)}}else if(e instanceof a){var r=this;e.forEach(function(e,t){r.append(t,e)})}else if(e!==null&&t==="object"){if(Object.prototype.toString.call(e)==="[object Array]"){for(var n=0;n<e.length;n++){var i=e[n];if(Object.prototype.toString.call(i)==="[object Array]"||i.length!==2){this.append(i[0],i[1])}else{throw new TypeError("Expected [string, any] as entry at index "+n+" of URLSearchParams's input")}}}else{for(var o in e){if(e.hasOwnProperty(o)){this.append(o,e[o])}}}}else{throw new TypeError("Unsupported input's type for URLSearchParams")}};var e=a.prototype;e.append=function(e,t){if(e in this._entries){this._entries[e].push(String(t))}else{this._entries[e]=[String(t)]}};e.delete=function(e){delete this._entries[e]};e.get=function(e){return e in this._entries?this._entries[e][0]:null};e.getAll=function(e){return e in this._entries?this._entries[e].slice(0):[]};e.has=function(e){return e in this._entries};e.set=function(e,t){this._entries[e]=[String(t)]};e.forEach=function(e,t){var r;for(var n in this._entries){if(this._entries.hasOwnProperty(n)){r=this._entries[n];for(var i=0;i<r.length;i++){e.call(t,r[i],n,this)}}}};e.keys=function(){var r=[];this.forEach(function(e,t){r.push(t)});return n(r)};e.values=function(){var t=[];this.forEach(function(e){t.push(e)});return n(t)};e.entries=function(){var r=[];this.forEach(function(e,t){r.push([t,e])});return n(r)};if(r){e[Symbol.iterator]=e.entries}e.toString=function(){var r=[];this.forEach(function(e,t){r.push(i(t)+"="+i(e))});return r.join("&")};t.URLSearchParams=a};if(!("URLSearchParams"in t)||new t.URLSearchParams("?a=1").toString()!=="a=1"){a()}var s=t.URLSearchParams.prototype;if(typeof s.sort!=="function"){s.sort=function(){var r=this;var n=[];this.forEach(function(e,t){n.push([t,e]);if(!r._entries){r.delete(t)}});n.sort(function(e,t){if(e[0]<t[0]){return-1}else if(e[0]>t[0]){return+1}else{return 0}});if(r._entries){r._entries={}}for(var e=0;e<n.length;e++){this.append(n[e][0],n[e][1])}}}if(typeof s._fromString!=="function"){Object.defineProperty(s,"_fromString",{enumerable:false,configurable:false,writable:false,value:function(e){if(this._entries){this._entries={}}else{var r=[];this.forEach(function(e,t){r.push(t)});for(var t=0;t<r.length;t++){this.delete(r[t])}}e=e.replace(/^\?/,"");var n=e.split("&");var i;for(var t=0;t<n.length;t++){i=n[t].split("=");this.append(o(i[0]),i.length>1?o(i[1]):"")}}})}})(typeof global!=="undefined"?global:typeof window!=="undefined"?window:typeof self!=="undefined"?self:this);(function(h){var e=function(){try{var e=new h.URL("b","http://a");e.pathname="c%20d";return e.href==="http://a/c%20d"&&e.searchParams}catch(e){return false}};var t=function(){var t=h.URL;var e=function(e,t){if(typeof e!=="string")e=String(e);var r=document,n;if(t&&(h.location===void 0||t!==h.location.href)){r=document.implementation.createHTMLDocument("");n=r.createElement("base");n.href=t;r.head.appendChild(n);try{if(n.href.indexOf(t)!==0)throw new Error(n.href)}catch(e){throw new Error("URL unable to set base "+t+" due to "+e)}}var i=r.createElement("a");i.href=e;if(n){r.body.appendChild(i);i.href=i.href}if(i.protocol===":"||!/:/.test(i.href)){throw new TypeError("Invalid URL")}Object.defineProperty(this,"_anchorElement",{value:i});var o=new h.URLSearchParams(this.search);var a=true;var s=true;var c=this;["append","delete","set"].forEach(function(e){var t=o[e];o[e]=function(){t.apply(o,arguments);if(a){s=false;c.search=o.toString();s=true}}});Object.defineProperty(this,"searchParams",{value:o,enumerable:true});var f=void 0;Object.defineProperty(this,"_updateSearchParams",{enumerable:false,configurable:false,writable:false,value:function(){if(this.search!==f){f=this.search;if(s){a=false;this.searchParams._fromString(this.search);a=true}}}})};var r=e.prototype;var n=function(t){Object.defineProperty(r,t,{get:function(){return this._anchorElement[t]},set:function(e){this._anchorElement[t]=e},enumerable:true})};["hash","host","hostname","port","protocol"].forEach(function(e){n(e)});Object.defineProperty(r,"search",{get:function(){return this._anchorElement["search"]},set:function(e){this._anchorElement["search"]=e;this._updateSearchParams()},enumerable:true});Object.defineProperties(r,{toString:{get:function(){var e=this;return function(){return e.href}}},href:{get:function(){return this._anchorElement.href.replace(/\?$/,"")},set:function(e){this._anchorElement.href=e;this._updateSearchParams()},enumerable:true},pathname:{get:function(){return this._anchorElement.pathname.replace(/(^\/?)/,"/")},set:function(e){this._anchorElement.pathname=e},enumerable:true},origin:{get:function(){var e={"http:":80,"https:":443,"ftp:":21}[this._anchorElement.protocol];var t=this._anchorElement.port!=e&&this._anchorElement.port!=="";return this._anchorElement.protocol+"//"+this._anchorElement.hostname+(t?":"+this._anchorElement.port:"")},enumerable:true},password:{get:function(){return""},set:function(e){},enumerable:true},username:{get:function(){return""},set:function(e){},enumerable:true}});e.createObjectURL=function(e){return t.createObjectURL.apply(t,arguments)};e.revokeObjectURL=function(e){return t.revokeObjectURL.apply(t,arguments)};h.URL=e};if(!e()){t()}if(h.location!==void 0&&!("origin"in h.location)){var r=function(){return h.location.protocol+"//"+h.location.hostname+(h.location.port?":"+h.location.port:"")};try{Object.defineProperty(h.location,"origin",{get:r,enumerable:true})}catch(e){setInterval(function(){h.location.origin=r()},100)}}})(typeof global!=="undefined"?global:typeof window!=="undefined"?window:typeof self!=="undefined"?self:this);
+
+/*
+* SystemJS 3.1.3
+*/
+!function(){const e="undefined"!=typeof self,n=e?self:global;let t;if("undefined"!=typeof location){const e=(t=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==e&&(t=t.slice(0,e+1))}const r=/\\/g,i="undefined"!=typeof Symbol,o=i&&Symbol.toStringTag,c=i?Symbol():"@";function l(){this[c]={}}const s=l.prototype;let u;s.import=function(e,n){const t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){const n=function e(n,t,r){let i=n[c][t];if(i)return i;const l=[],s=Object.create(null);o&&Object.defineProperty(s,o,{value:"Module"});let u=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw new Error("Module "+t+" did not instantiate");const r=e[1](function(e,n){i.h=!0;let t=!1;if("object"!=typeof e)e in s&&s[e]===n||(s[e]=n,t=!0);else for(let n in e){let r=e[n];n in s&&s[n]===r||(s[n]=r,t=!0)}if(t)for(let e=0;e<l.length;e++)l[e](s);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return i.e=r.execute||function(){},[e[0],r.setters||[]]});const f=u.then(function(r){return Promise.all(r[0].map(function(i,o){const c=r[1][o];return Promise.resolve(n.resolve(i,t)).then(function(r){const i=e(n,r,t);return Promise.resolve(i.I).then(function(){return c&&(i.i.push(c),!i.h&&i.I||c(i.n)),i})})})).then(function(e){i.d=e})});return f.catch(function(e){i.e=null,i.er=e}),i=n[c][t]={id:t,i:l,n:s,I:u,L:f,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(r[t.id])return;if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}let i;return t.d.forEach(function(t){{const o=e(n,t,r);o&&(i=i||[]).push(o)}}),i?Promise.all(i).then(o):o();function o(){try{let e=t.e.call(f);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){u=[e,n]},s.getRegister=function(){const e=u;return u=void 0,e};const f=Object.freeze(Object.create(null));let d;n.System=new l,"undefined"!=typeof window&&window.addEventListener("error",function(e){d=e.error});const h=s.register;s.register=function(e,n){d=void 0,h.call(this,e,n)},s.instantiate=function(e,n){const t=this;return new Promise(function(r,i){const o=document.createElement("script");o.charset="utf-8",o.async=!0,o.crossOrigin="anonymous",o.addEventListener("error",function(){i(new Error("Error loading "+e+(n?" from "+n:"")))}),o.addEventListener("load",function(){if(document.head.removeChild(o),d)return i(d),d=void 0;r(t.getRegister())}),o.src=e,document.head.appendChild(o)})},e&&"function"==typeof importScripts&&(s.instantiate=function(e){const n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(e,n){const i=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(r,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){const t=n.slice(0,n.indexOf(":")+1);let r;if(r="/"===n[t.length+1]?"file:"!==t?(r=n.slice(t.length+2)).slice(r.indexOf("/")+1):n.slice(8):n.slice(t.length+("/"===n[t.length])),"/"===e[0])return n.slice(0,n.length-r.length-1)+e;const i=r.slice(0,r.lastIndexOf("/")+1)+e,o=[];let c=-1;for(let e=0;e<i.length;e++)-1!==c?"/"===i[e]&&(o.push(i.slice(c,e+1)),c=-1):"."===i[e]?"."!==i[e+1]||"/"!==i[e+2]&&e+2!==i.length?"/"===i[e+1]||e+1===i.length?e+=1:c=e:(o.pop(),e+=2):c=e;return-1!==c&&o.push(i.slice(c)),n.slice(0,n.length-r.length)+o.join("")}}(e,n||t);if(!i){if(-1!==e.indexOf(":"))return Promise.resolve(e);throw new Error('Cannot resolve "'+e+(n?'" from '+n:'"'))}return Promise.resolve(i)}}();
+
+/*
+Extremely simple css parser. Intended to be not more than what we need
+and definitely not necessarily correct =).
+*/
+/** @unrestricted */
+var StyleNode = /** @class */ (function () {
+    function StyleNode() {
+        this.start = 0;
+        this.end = 0;
+        this.previous = null;
+        this.parent = null;
+        this.rules = null;
+        this.parsedCssText = '';
+        this.cssText = '';
+        this.atRule = false;
+        this.type = 0;
+        this.keyframesName = '';
+        this.selector = '';
+        this.parsedSelector = '';
+    }
+    return StyleNode;
+}());
+// given a string of css, return a simple rule tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+}
+// remove stuff we don't care about that may hinder parsing
+/**
+ * @param {string} cssText
+ * @return {string}
+ */
+function clean(cssText) {
+    return cssText.replace(RX.comments, '').replace(RX.port, '');
+}
+// super simple {...} lexer that returns a node tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function lex(text) {
+    var root = new StyleNode();
+    root['start'] = 0;
+    root['end'] = text.length;
+    var n = root;
+    for (var i = 0, l = text.length; i < l; i++) {
+        if (text[i] === OPEN_BRACE) {
+            if (!n['rules']) {
+                n['rules'] = [];
+            }
+            var p = n;
+            var previous = p['rules'][p['rules'].length - 1] || null;
+            n = new StyleNode();
+            n['start'] = i + 1;
+            n['parent'] = p;
+            n['previous'] = previous;
+            p['rules'].push(n);
+        }
+        else if (text[i] === CLOSE_BRACE) {
+            n['end'] = i + 1;
+            n = n['parent'] || root;
+        }
+    }
+    return root;
+}
+// add selectors/cssText to node tree
+/**
+ * @param {StyleNode} node
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parseCss(node, text) {
+    var t = text.substring(node['start'], node['end'] - 1);
+    node['parsedCssText'] = node['cssText'] = t.trim();
+    if (node.parent) {
+        var ss = node.previous ? node.previous['end'] : node.parent['start'];
+        t = text.substring(ss, node['start'] - 1);
+        t = _expandUnicodeEscapes(t);
+        t = t.replace(RX.multipleSpaces, ' ');
+        // TODO(sorvell): ad hoc; make selector include only after last ;
+        // helps with mixin syntax
+        t = t.substring(t.lastIndexOf(';') + 1);
+        var s = node['parsedSelector'] = node['selector'] = t.trim();
+        node['atRule'] = (s.indexOf(AT_START) === 0);
+        // note, support a subset of rule types...
+        if (node['atRule']) {
+            if (s.indexOf(MEDIA_START) === 0) {
+                node['type'] = types.MEDIA_RULE;
+            }
+            else if (s.match(RX.keyframesRule)) {
+                node['type'] = types.KEYFRAMES_RULE;
+                node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop();
+            }
+        }
+        else {
+            if (s.indexOf(VAR_START) === 0) {
+                node['type'] = types.MIXIN_RULE;
+            }
+            else {
+                node['type'] = types.STYLE_RULE;
+            }
+        }
+    }
+    var r$ = node['rules'];
+    if (r$) {
+        for (var i = 0, l = r$.length, r = void 0; (i < l) && (r = r$[i]); i++) {
+            parseCss(r, text);
+        }
+    }
+    return node;
+}
+/**
+ * conversion of sort unicode escapes with spaces like `\33 ` (and longer) into
+ * expanded form that doesn't require trailing space `\000033`
+ * @param {string} s
+ * @return {string}
+ */
+function _expandUnicodeEscapes(s) {
+    return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () {
+        var code = arguments[1], repeat = 6 - code.length;
+        while (repeat--) {
+            code = '0' + code;
+        }
+        return '\\' + code;
+    });
+}
+/** @enum {number} */
+var types = {
+    STYLE_RULE: 1,
+    KEYFRAMES_RULE: 7,
+    MEDIA_RULE: 4,
+    MIXIN_RULE: 1000
+};
+var OPEN_BRACE = '{';
+var CLOSE_BRACE = '}';
+// helper regexp's
+var RX = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
+    keyframesRule: /^@[^\s]*keyframes/,
+    multipleSpaces: /\s+/g
+};
+var VAR_START = '--';
+var MEDIA_START = '@media';
+var AT_START = '@';
+function findRegex(regex, cssText, offset) {
+    regex['lastIndex'] = 0;
+    var r = cssText.substring(offset).match(regex);
+    if (r) {
+        var start = offset + r['index'];
+        return {
+            start: start,
+            end: start + r[0].length
+        };
+    }
+    return null;
+}
+var VAR_USAGE_START = /\bvar\(/;
+var VAR_ASSIGN_START = /\B--[\w-]+\s*:/;
+var COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim;
+var TRAILING_LINES = /^[\t ]+\n/gm;
+function resolveVar(props, prop, fallback) {
+    if (props[prop]) {
+        return props[prop];
+    }
+    if (fallback) {
+        return executeTemplate(fallback, props);
+    }
+    return '';
+}
+function findVarEndIndex(cssText, offset) {
+    var count = 0;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (c === '(') {
+            count++;
+        }
+        else if (c === ')') {
+            count--;
+            if (count <= 0) {
+                return i + 1;
+            }
+        }
+    }
+    return i;
+}
+function parseVar(cssText, offset) {
+    var varPos = findRegex(VAR_USAGE_START, cssText, offset);
+    if (!varPos) {
+        return null;
+    }
+    var endVar = findVarEndIndex(cssText, varPos.start);
+    var varContent = cssText.substring(varPos.end, endVar - 1);
+    var _a = varContent.split(','), propName = _a[0], fallback = _a.slice(1);
+    return {
+        start: varPos.start,
+        end: endVar,
+        propName: propName.trim(),
+        fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined
+    };
+}
+function compileVar(cssText, template, offset) {
+    var varMeta = parseVar(cssText, offset);
+    if (!varMeta) {
+        template.push(cssText.substring(offset, cssText.length));
+        return cssText.length;
+    }
+    var propName = varMeta.propName;
+    var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined;
+    template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); });
+    return varMeta.end;
+}
+function executeTemplate(template, props) {
+    var final = '';
+    for (var i = 0; i < template.length; i++) {
+        var s = template[i];
+        final += (typeof s === 'string')
+            ? s
+            : s(props);
+    }
+    return final;
+}
+function findEndValue(cssText, offset) {
+    var onStr = false;
+    var double = false;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (onStr) {
+            if (double && c === '"') {
+                onStr = false;
+            }
+            if (!double && c === '\'') {
+                onStr = false;
+            }
+        }
+        else {
+            if (c === '"') {
+                onStr = true;
+                double = true;
+            }
+            else if (c === '\'') {
+                onStr = true;
+                double = false;
+            }
+            else if (c === ';') {
+                return i + 1;
+            }
+            else if (c === '}') {
+                return i;
+            }
+        }
+    }
+    return i;
+}
+function removeCustomAssigns(cssText) {
+    var final = '';
+    var offset = 0;
+    while (true) {
+        var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset);
+        var start = assignPos ? assignPos.start : cssText.length;
+        final += cssText.substring(offset, start);
+        if (assignPos) {
+            offset = findEndValue(cssText, start);
+        }
+        else {
+            break;
+        }
+    }
+    return final;
+}
+function compileTemplate(cssText) {
+    var index = 0;
+    cssText = cssText.replace(COMMENTS, '');
+    cssText = removeCustomAssigns(cssText)
+        .replace(TRAILING_LINES, '');
+    var segments = [];
+    while (index < cssText.length) {
+        index = compileVar(cssText, segments, index);
+    }
+    return segments;
+}
+function resolveValues(selectors) {
+    var props = {};
+    selectors.forEach(function (selector) {
+        selector.declarations.forEach(function (dec) {
+            props[dec.prop] = dec.value;
+        });
+    });
+    var propsValues = {};
+    var entries = Object.entries(props);
+    var _loop_1 = function (i) {
+        var dirty = false;
+        entries.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var propValue = executeTemplate(value, propsValues);
+            if (propValue !== propsValues[key]) {
+                propsValues[key] = propValue;
+                dirty = true;
+            }
+        });
+        if (!dirty) {
+            return "break";
+        }
+    };
+    for (var i = 0; i < 10; i++) {
+        var state_1 = _loop_1(i);
+        if (state_1 === "break")
+            break;
+    }
+    return propsValues;
+}
+function getSelectors(root, index) {
+    if (index === void 0) { index = 0; }
+    if (!root.rules) {
+        return [];
+    }
+    var selectors = [];
+    root.rules
+        .filter(function (rule) { return rule.type === types.STYLE_RULE; })
+        .forEach(function (rule) {
+        var declarations = getDeclarations(rule.cssText);
+        if (declarations.length > 0) {
+            rule.parsedSelector.split(',').forEach(function (selector) {
+                selector = selector.trim();
+                selectors.push({
+                    selector: selector,
+                    declarations: declarations,
+                    specificity: computeSpecificity(selector),
+                    nu: index
+                });
+            });
+        }
+        index++;
+    });
+    return selectors;
+}
+function computeSpecificity(_selector) {
+    return 1;
+}
+var IMPORTANT = '!important';
+var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;
+function getDeclarations(cssText) {
+    var declarations = [];
+    var xArray;
+    while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) {
+        var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important;
+        declarations.push({
+            prop: xArray[1].trim(),
+            value: compileTemplate(value),
+            important: important,
+        });
+    }
+    return declarations;
+}
+function normalizeValue(value) {
+    var regex = /\s+/gim;
+    value = value.replace(regex, ' ').trim();
+    var important = value.endsWith(IMPORTANT);
+    if (important) {
+        value = value.substr(0, value.length - IMPORTANT.length).trim();
+    }
+    return {
+        value: value,
+        important: important
+    };
+}
+function getActiveSelectors(hostEl, hostScopeMap, globalScopes) {
+    // computes the css scopes that might affect this particular element
+    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // each scope might have an array of associated selectors
+    // let's flatten the complete array of selectors from all the scopes
+    var selectorSet = getSelectorsForScopes(scopes);
+    // we filter to only the selectors that matches the hostEl
+    var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); });
+    // sort selectors by specifity
+    return sortSelectors(activeSelectors);
+}
+function getScopesForElement(hostTemplateMap, node) {
+    var scopes = [];
+    while (node) {
+        var scope = hostTemplateMap.get(node);
+        if (scope) {
+            scopes.push(scope);
+        }
+        node = node.parentElement;
+    }
+    return scopes;
+}
+function getSelectorsForScopes(scopes) {
+    var selectors = [];
+    scopes.forEach(function (scope) {
+        selectors.push.apply(selectors, scope.selectors);
+    });
+    return selectors;
+}
+function sortSelectors(selectors) {
+    selectors.sort(function (a, b) {
+        if (a.specificity === b.specificity) {
+            return a.nu - b.nu;
+        }
+        return a.specificity - b.specificity;
+    });
+    return selectors;
+}
+function matches(el, selector) {
+    return el.matches(selector);
+}
+function parseCSS(original) {
+    var ast = parse(original);
+    var template = compileTemplate(original);
+    var selectors = getSelectors(ast);
+    return {
+        original: original,
+        template: template,
+        selectors: selectors,
+        isDynamic: template.length > 1
+    };
+}
+function addGlobalStyle(globalScopes, styleEl) {
+    var css = parseCSS(styleEl.innerHTML);
+    css.styleEl = styleEl;
+    globalScopes.push(css);
+}
+function updateGlobalScopes(scopes) {
+    var selectors = getSelectorsForScopes(scopes);
+    var props = resolveValues(selectors);
+    scopes.forEach(function (scope) {
+        if (scope.isDynamic) {
+            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+        }
+    });
+}
+function reScope(scope, cssScopeId) {
+    var template = scope.template.map(function (segment) {
+        return (typeof segment === 'string')
+            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            : segment;
+    });
+    var selectors = scope.selectors.map(function (sel) {
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+    });
+    return Object.assign({}, scope, { template: template,
+        selectors: selectors,
+        cssScopeId: cssScopeId });
+}
+function replaceScope(original, oldScopeId, newScopeId) {
+    original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId);
+    return original;
+}
+function replaceAll(input, find, replace) {
+    return input.replace(new RegExp(find, 'g'), replace);
+}
+function loadDocument(doc, globalScopes) {
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        loadDocumentStyles(doc, globalScopes);
+    });
+}
+function loadDocumentLinks(doc, globalScopes) {
+    var promises = [];
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    for (var i = 0; i < linkElms.length; i++) {
+        promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
+    }
+    return Promise.all(promises);
+}
+function loadDocumentStyles(doc, globalScopes) {
+    var styleElms = doc.querySelectorAll('style');
+    for (var i = 0; i < styleElms.length; i++) {
+        addGlobalStyle(globalScopes, styleElms[i]);
+    }
+}
+function addGlobalLink(doc, globalScopes, linkElm) {
+    var url = linkElm.href;
+    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
+        if (hasCssVariables(text) && linkElm.parentNode) {
+            if (hasRelativeUrls(text)) {
+                text = fixRelativeUrls(text, url);
+            }
+            var styleEl = doc.createElement('style');
+            styleEl.innerHTML = text;
+            addGlobalStyle(globalScopes, styleEl);
+            linkElm.parentNode.insertBefore(styleEl, linkElm);
+            linkElm.remove();
+        }
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+// This regexp tries to determine when a variable is declared, for example:
+//
+// .my-el { --highlight-color: green; }
+//
+// but we don't want to trigger when a classname uses "--" or a pseudo-class is
+// used. We assume that the only characters that can preceed a variable
+// declaration are "{", from an opening block, ";" from a preceeding rule, or a
+// space. This prevents the regexp from matching a word in a selector, since
+// they would need to start with a "." or "#". (We assume element names don't
+// start with "--").
+var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m;
+function hasCssVariables(css) {
+    return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css);
+}
+// This regexp find all url() usages with relative urls
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+function hasRelativeUrls(css) {
+    CSS_URL_REGEXP.lastIndex = 0;
+    return CSS_URL_REGEXP.test(css);
+}
+function fixRelativeUrls(css, originalUrl) {
+    // get the basepath from the original import url
+    var basePath = originalUrl.replace(/[^/]*$/, '');
+    // replace the relative url, with the new relative url
+    return css.replace(CSS_URL_REGEXP, function (fullMatch, url) {
+        // rhe new relative path is the base path + uri
+        // TODO: normalize relative URL
+        var relativeUrl = basePath + url;
+        return fullMatch.replace(url, relativeUrl);
+    });
+}
+var CustomStyle = /** @class */ (function () {
+    function CustomStyle(win, doc) {
+        this.win = win;
+        this.doc = doc;
+        this.count = 0;
+        this.hostStyleMap = new WeakMap();
+        this.hostScopeMap = new WeakMap();
+        this.globalScopes = [];
+        this.scopesMap = new Map();
+    }
+    CustomStyle.prototype.initShim = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.win.requestAnimationFrame(function () {
+                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+            });
+        });
+    };
+    CustomStyle.prototype.addLink = function (linkEl) {
+        var _this = this;
+        return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () {
+            _this.updateGlobal();
+        });
+    };
+    CustomStyle.prototype.addGlobalStyle = function (styleEl) {
+        addGlobalStyle(this.globalScopes, styleEl);
+        this.updateGlobal();
+    };
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+        if (this.hostScopeMap.has(hostEl)) {
+            throw new Error('host style already created');
+        }
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
+        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
+        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var styleEl = this.doc.createElement('style');
+        if (!needStyleEl) {
+            styleEl.innerHTML = cssText;
+        }
+        else {
+            if (isDynamicScoped) {
+                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
+                styleEl.innerHTML = '/*needs update*/';
+                this.hostStyleMap.set(hostEl, styleEl);
+                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+                this.count++;
+            }
+            else {
+                baseScope.styleEl = styleEl;
+                if (!baseScope.isDynamic) {
+                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                }
+                this.globalScopes.push(baseScope);
+                this.updateGlobal();
+                this.hostScopeMap.set(hostEl, baseScope);
+            }
+        }
+        return styleEl;
+    };
+    CustomStyle.prototype.removeHost = function (hostEl) {
+        var css = this.hostStyleMap.get(hostEl);
+        if (css) {
+            css.remove();
+        }
+        this.hostStyleMap.delete(hostEl);
+        this.hostScopeMap.delete(hostEl);
+    };
+    CustomStyle.prototype.updateHost = function (hostEl) {
+        var scope = this.hostScopeMap.get(hostEl);
+        if (scope && scope.isDynamic && scope.cssScopeId) {
+            var styleEl = this.hostStyleMap.get(hostEl);
+            if (styleEl) {
+                var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
+                var props = resolveValues(selectors);
+                styleEl.innerHTML = executeTemplate(scope.template, props);
+            }
+        }
+    };
+    CustomStyle.prototype.updateGlobal = function () {
+        updateGlobalScopes(this.globalScopes);
+    };
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+        var scope = this.scopesMap.get(scopeId);
+        if (!scope) {
+            scope = parseCSS(cssText);
+            scope.cssScopeId = scopeId;
+            this.scopesMap.set(scopeId, scope);
+        }
+        return scope;
+    };
+    return CustomStyle;
+}());
+var win = window;
+function needsShim() {
+    return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'));
+}
+if (!win.__stencil_cssshim && needsShim()) {
+    win.__stencil_cssshim = new CustomStyle(win, document);
+}
+
+var doc = document;
+var allScripts = doc.querySelectorAll('script');
+var scriptElm;
+for (var x = allScripts.length - 1; x >= 0; x--) {
+  scriptElm = allScripts[x];
+  if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) {
+    break;
+  }
+}
+var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
+var start = function() {
+  var url = new URL('./p-df79bf9d.system.js', resourcesUrl);
+  System.import(url.href);
+};
+
+if (win.__stencil_cssshim) {
+  win.__stencil_cssshim.initShim().then(start);
+} else {
+  start();
+}
diff --git a/dist/calcite/p-1563a874.system.js b/dist/calcite/p-1563a874.system.js
new file mode 100644
index 00000000000..55abebc06c2
--- /dev/null
+++ b/dist/calcite/p-1563a874.system.js
@@ -0,0 +1 @@
+System.register([],function(t){"use strict";return{execute:function(){t("scopeCss",function(t,r,o){return(new e).shimCssText(t,r,r+"-h",r+"-s",o)});var e=function(){function t(){this.strictStyling=!0}return t.prototype.shimCssText=function(t,e,r,o,n){void 0===r&&(r=""),void 0===o&&(o=""),void 0===n&&(n=!1);var s=t.match(m)||[];t=t.replace(S,"");var c=[];if(n){var i=function(t){var e="/*!@___"+c.length+"___*/";return c.push({placeholder:e,comment:"/*!@"+t.selector+"*/"}),t.selector=e+t.selector,t};t=O(t,function(t){return"@"!==t.selector[0]?i(t):t.selector.startsWith("@media")||t.selector.startsWith("@supports")||t.selector.startsWith("@page")||t.selector.startsWith("@document")?(t.content=O(t.content,i),t):t})}var p=this._scopeCssText(t,e,r,o,n);return t=[p].concat(s).join("\n"),n&&c.forEach(function(e){t=t.replace(e.placeholder,e.comment)}),t},t.prototype._scopeCssText=function(t,e,r,o,n){return t=this._insertPolyfillHostInCssText(t),t=this._convertColonHost(t),t=this._convertColonHostContext(t),t=this._convertColonSlotted(t,o),t=this._convertShadowDOMSelectors(t),e&&(t=this._scopeSelectors(t,e,r,o,n)),(t=(t=t.replace(/-shadowcsshost-no-combinator/g,"."+r)).replace(/>\s*\*\s+([^{, ]+)/gm," $1 ")).trim()},t.prototype._convertColonHost=function(t){return this._convertColonRule(t,i,this._colonHostPartReplacer)},t.prototype._convertColonSlotted=function(t,e){return t.replace(l,function(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];if(t[2]){var o=t[2].trim();return"."+e+" > "+o+t[3]}return a+t[3]})},t.prototype._convertColonHostContext=function(t){return this._convertColonRule(t,p,this._colonHostContextPartReplacer)},t.prototype._convertColonRule=function(t,e,r){return t.replace(e,function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];if(t[2]){for(var o=t[2].split(","),n=[],s=0;s<o.length;s++){var c=o[s].trim();if(!c)break;n.push(r(a,c,t[3]))}return n.join(",")}return a+t[3]})},t.prototype._colonHostContextPartReplacer=function(t,e,r){return e.indexOf(o)>-1?this._colonHostPartReplacer(t,e,r):t+e+r+", "+e+" "+t+r},t.prototype._colonHostPartReplacer=function(t,e,r){return t+e.replace(o,"")+r},t.prototype._convertShadowDOMSelectors=function(t){return h.reduce(function(t,e){return t.replace(e," ")},t)},t.prototype._scopeSelectors=function(t,e,r,o,n){var s=this;return O(t,function(t){var c=t.selector,i=t.content;return"@"!==t.selector[0]?c=s._scopeSelector(t.selector,e,r,o,s.strictStyling):(t.selector.startsWith("@media")||t.selector.startsWith("@supports")||t.selector.startsWith("@page")||t.selector.startsWith("@document"))&&(i=s._scopeSelectors(t.content,e,r,o,n)),c=c.replace(/\s{2,}/g," ").trim(),new H(c,i)})},t.prototype._scopeSelector=function(t,e,r,o,n){var s=this;return t.split(",").map(function(t){return o&&t.indexOf("."+o)>-1?t.trim():s._selectorNeedsScoping(t,e)?n?s._applyStrictSelectorScope(t,e,r).trim():s._applySelectorScope(t,e,r).trim():t.trim()}).join(", ")},t.prototype._selectorNeedsScoping=function(t,e){return!this._makeScopeMatcher(e).test(t)},t.prototype._makeScopeMatcher=function(t){return t=t.replace(/\[/g,"\\[").replace(/\]/g,"\\]"),new RegExp("^("+t+")"+f,"m")},t.prototype._applySelectorScope=function(t,e,r){return this._applySimpleSelectorScope(t,e,r)},t.prototype._applySimpleSelectorScope=function(t,e,r){if(_.lastIndex=0,_.test(t)){var o=this.strictStyling?"."+r:e;return t.replace(u,function(t,e){return e.replace(/([^:]*)(:*)(.*)/,function(t,e,r,n){return e+o+r+n})}).replace(_,o+" ")}return e+" "+t},t.prototype._applyStrictSelectorScope=function(t,e,o){for(var n,s=this,c="."+(e=e.replace(/\[is=([^\]]*)\]/g,function(t){for(var e=[],r=1;r<arguments.length;r++)e[r-1]=arguments[r];return e[0]})),i=function(t){var r=t.trim();if(!r)return"";if(t.indexOf(a)>-1)r=s._applySimpleSelectorScope(t,e,o);else{var n=t.replace(_,"");if(n.length>0){var i=n.match(/([^:]*)(:*)(.*)/);i&&(r=i[1]+c+i[2]+i[3])}}return r},p=new r(t),l="",u=0,h=/( |>|\+|~(?!=))\s*/g,f=!((t=p.content()).indexOf(a)>-1);null!==(n=h.exec(t));){var g=n[1],v=t.slice(u,n.index).trim();l+=((f=f||v.indexOf(a)>-1)?i(v):v)+" "+g+" ",u=h.lastIndex}var d=t.substring(u);return l+=(f=f||d.indexOf(a)>-1)?i(d):d,p.restore(l)},t.prototype._insertPolyfillHostInCssText=function(t){return t.replace(d,s).replace(g,o).replace(v,n)},t}();t("ShadowCss",e);var r=function(){function t(t){var e=this;this.placeholders=[],this.index=0,t=t.replace(/(\[[^\]]*\])/g,function(t,r){var o="__ph-"+e.index+"__";return e.placeholders.push(r),e.index++,o}),this._content=t.replace(/(:nth-[-\w]+)(\([^)]+\))/g,function(t,r,o){var n="__ph-"+e.index+"__";return e.placeholders.push(o),e.index++,r+n})}return t.prototype.restore=function(t){var e=this;return t.replace(/__ph-(\d+)__/g,function(t,r){return e.placeholders[+r]})},t.prototype.content=function(){return this._content},t}(),o="-shadowcsshost",n="-shadowcssslotted",s="-shadowcsscontext",c=")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)",i=new RegExp("("+o+c,"gim"),p=new RegExp("("+s+c,"gim"),l=new RegExp("("+n+c,"gim"),a=o+"-no-combinator",u=/-shadowcsshost-no-combinator([^\s]*)/,h=[/::shadow/g,/::content/g],f="([>\\s~+[.,{:][\\s\\S]*)?$",_=/-shadowcsshost/gim,g=/:host/gim,v=/::slotted/gim,d=/:host-context/gim,S=/\/\*\s*[\s\S]*?\*\//g,m=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g,x=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g,y=/([{}])/g,C="{",w="}",R="%BLOCK%",H=function(t,e){this.selector=t,this.content=e};function O(t,e){var r=function(t){for(var e=t.split(y),r=[],o=[],n=0,s=[],c=0;c<e.length;c++){var i=e[c];i===w&&n--,n>0?s.push(i):(s.length>0&&(o.push(s.join("")),r.push(R),s=[]),r.push(i)),i===C&&n++}return s.length>0&&(o.push(s.join("")),r.push(R)),new W(r.join(""),o)}(t),o=0;return r.escapedString.replace(x,function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var s=t[2],c="",i=t[4],p="";i&&i.startsWith("{"+R)&&(c=r.blocks[o++],i=i.substring(R.length+1),p="{");var l=e(new H(s,c));return""+t[1]+l.selector+t[3]+p+l.content+i})}var W=function(t,e){this.escapedString=t,this.blocks=e}}}});
\ No newline at end of file
diff --git a/dist/calcite/p-229ebf7a.js b/dist/calcite/p-229ebf7a.js
new file mode 100644
index 00000000000..fdc8a4c1193
--- /dev/null
+++ b/dist/calcite/p-229ebf7a.js
@@ -0,0 +1 @@
+var t=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};var e={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},r="{",n="}",s={comments:/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},i="--",o="@media",a="@";function c(t,e,r){t.lastIndex=0;var n=e.substring(r).match(t);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var l=/\bvar\(/,u=/\B--[\w-]+\s*:/,p=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//gim,f=/^[\t ]+\n/gm;function h(t,e,r){var n=function(t,e){var r=c(l,t,e);if(!r)return null;var n=function(t){for(var e=0,n=r.start;n<t.length;n++){var s=t[n];if("("===s)e++;else if(")"===s&&--e<=0)return n+1}return n}(t),s=t.substring(r.end,n-1).split(","),i=s[0],o=s.slice(1);return{start:r.start,end:n,propName:i.trim(),fallback:o.length>0?o.join(",").trim():void 0}}(t,r);if(!n)return e.push(t.substring(r,t.length)),t.length;var s=n.propName,i=null!=n.fallback?g(n.fallback):void 0;return e.push(t.substring(r,n.start),function(t){return function(e,r,n){return t[s]?t[s]:n?v(n,t):""}(0,0,i)}),n.end}function v(t,e){for(var r="",n=0;n<t.length;n++){var s=t[n];r+="string"==typeof s?s:s(e)}return r}function m(t,e){for(var r=!1,n=!1,s=e;s<t.length;s++){var i=t[s];if(r)n&&'"'===i&&(r=!1),n||"'"!==i||(r=!1);else if('"'===i)r=!0,n=!0;else if("'"===i)r=!0,n=!1;else{if(";"===i)return s+1;if("}"===i)return s}}return s}function g(t){var e=0;t=function(t){for(var e="",r=0;;){var n=c(u,t,r),s=n?n.start:t.length;if(e+=t.substring(r,s),!n)break;r=m(t,s)}return e}(t=t.replace(p,"")).replace(f,"");for(var r=[];e<t.length;)e=h(t,r,e);return r}function d(t){var e={};t.forEach(function(t){t.declarations.forEach(function(t){e[t.prop]=t.value})});for(var r={},n=Object.entries(e),s=function(){var t=!1;if(n.forEach(function(e){var n=e[0],s=v(e[1],r);s!==r[n]&&(r[n]=s,t=!0)}),!t)return"break"},i=0;i<10&&"break"!==s();i++);return r}function y(t,r){if(void 0===r&&(r=0),!t.rules)return[];var n=[];return t.rules.filter(function(t){return t.type===e.STYLE_RULE}).forEach(function(t){var e=function(t){for(var e,r=[];e=E.exec(t.trim());){var n=b(e[2]),s=n.value,i=n.important;r.push({prop:e[1].trim(),value:g(s),important:i})}return r}(t.cssText);e.length>0&&t.parsedSelector.split(",").forEach(function(t){t=t.trim(),n.push({selector:t,declarations:e,specificity:1,nu:r})}),r++}),n}var S="!important",E=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function b(t){var e=(t=t.replace(/\s+/gim," ").trim()).endsWith(S);return e&&(t=t.substr(0,t.length-S.length).trim()),{value:t,important:e}}function M(t){var e=[];return t.forEach(function(t){e.push.apply(e,t.selectors)}),e}function L(c){var l,u=function t(r,n){var c=n.substring(r.start,r.end-1);if(r.parsedCssText=r.cssText=c.trim(),r.parent){c=(c=(c=(c=n.substring(r.previous?r.previous.end:r.parent.start,r.start-1)).replace(/\\([0-9a-f]{1,6})\s/gi,function(){for(var t=arguments[1],e=6-t.length;e--;)t="0"+t;return"\\"+t})).replace(s.multipleSpaces," ")).substring(c.lastIndexOf(";")+1);var l=r.parsedSelector=r.selector=c.trim();r.atRule=0===l.indexOf(a),r.atRule?0===l.indexOf(o)?r.type=e.MEDIA_RULE:l.match(s.keyframesRule)&&(r.type=e.KEYFRAMES_RULE,r.keyframesName=r.selector.split(s.multipleSpaces).pop()):r.type=0===l.indexOf(i)?e.MIXIN_RULE:e.STYLE_RULE}var u=r.rules;if(u)for(var p=0,f=u.length,h=void 0;p<f&&(h=u[p]);p++)t(h,n);return r}(function(e){var s=new t;s.start=0,s.end=e.length;for(var i=s,o=0,a=e.length;o<a;o++)if(e[o]===r){i.rules||(i.rules=[]);var c=i,l=c.rules[c.rules.length-1]||null;(i=new t).start=o+1,i.parent=c,i.previous=l,c.rules.push(i)}else e[o]===n&&(i.end=o+1,i=i.parent||s);return s}(l=(l=c).replace(s.comments,"").replace(s.port,"")),l),p=g(c);return{original:c,template:p,selectors:y(u),isDynamic:p.length>1}}function x(t,e){var r=L(e.innerHTML);r.styleEl=e,t.push(r)}function R(t,e,r){var n;return n="."+r,t.replace(new RegExp("\\."+e,"g"),n)}function T(t,e,r){var n=r.href;return fetch(n).then(function(t){return t.text()}).then(function(s){if(((o=s).indexOf("var(")>-1||w.test(o))&&r.parentNode){(function(t){return I.lastIndex=0,I.test(t)})(s)&&(s=function(t){var e=n.replace(/[^\/]*$/,"");return t.replace(I,function(t,r){return t.replace(r,e+r)})}(s));var i=t.createElement("style");i.innerHTML=s,x(e,i),r.parentNode.insertBefore(i,r),r.remove()}var o}).catch(function(t){console.error(t)})}var w=/[\s;{]--[-a-zA-Z0-9]+\s*:/m,I=/url[\s]*\([\s]*['"]?(?![http|\/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim,k=function(){function t(t,e){this.win=t,this.doc=e,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map}return t.prototype.initShim=function(){var t=this;return new Promise(function(e){t.win.requestAnimationFrame(function(){var r,n;(r=t.doc,n=t.globalScopes,function(t,e){for(var r=[],n=t.querySelectorAll('link[rel="stylesheet"][href]'),s=0;s<n.length;s++)r.push(T(t,e,n[s]));return Promise.all(r)}(r,n).then(function(){!function(t,e){for(var r=t.querySelectorAll("style"),n=0;n<r.length;n++)x(e,r[n])}(r,n)})).then(function(){return e()})})})},t.prototype.addLink=function(t){var e=this;return T(this.doc,this.globalScopes,t).then(function(){e.updateGlobal()})},t.prototype.addGlobalStyle=function(t){x(this.globalScopes,t),this.updateGlobal()},t.prototype.createHostStyle=function(t,e,r){if(this.hostScopeMap.has(t))throw new Error("host style already created");var n=this.registerHostTemplate(r,e),s=!(!n.isDynamic||!n.cssScopeId),i=s||!n.styleEl,o=this.doc.createElement("style");return i?s?(o["s-sc"]=e=n.cssScopeId+"-"+this.count,o.innerHTML="/*needs update*/",this.hostStyleMap.set(t,o),this.hostScopeMap.set(t,function(t,e){var r=t.template.map(function(r){return"string"==typeof r?R(r,t.cssScopeId,e):r}),n=t.selectors.map(function(r){return Object.assign({},r,{selector:R(r.selector,t.cssScopeId,e)})});return Object.assign({},t,{template:r,selectors:n,cssScopeId:e})}(n,e)),this.count++):(n.styleEl=o,n.isDynamic||(o.innerHTML=v(n.template,{})),this.globalScopes.push(n),this.updateGlobal(),this.hostScopeMap.set(t,n)):o.innerHTML=r,o},t.prototype.removeHost=function(t){var e=this.hostStyleMap.get(t);e&&e.remove(),this.hostStyleMap.delete(t),this.hostScopeMap.delete(t)},t.prototype.updateHost=function(t){var e=this.hostScopeMap.get(t);if(e&&e.isDynamic&&e.cssScopeId){var r=this.hostStyleMap.get(t);if(r){var n=d(function(t,e,r){var n;return(n=M(r.concat(function(t,e){for(var r=[];e;){var n=t.get(e);n&&r.push(n),e=e.parentElement}return r}(e,t))).filter(function(e){return function(e,r){return t.matches(r)}(0,e.selector)})).sort(function(t,e){return t.specificity===e.specificity?t.nu-e.nu:t.specificity-e.specificity}),n}(t,this.hostScopeMap,this.globalScopes));r.innerHTML=v(e.template,n)}}},t.prototype.updateGlobal=function(){var t,e;e=d(M(t=this.globalScopes)),t.forEach(function(t){t.isDynamic&&(t.styleEl.innerHTML=v(t.template,e))})},t.prototype.registerHostTemplate=function(t,e){var r=this.scopesMap.get(e);return r||((r=L(t)).cssScopeId=e,this.scopesMap.set(e,r)),r},t}(),_=window;_.__stencil_cssshim||_.CSS&&_.CSS.supports&&_.CSS.supports("color","var(--c)")||(_.__stencil_cssshim=new k(_,document));
\ No newline at end of file
diff --git a/dist/calcite/p-258l18yq.system.entry.js b/dist/calcite/p-258l18yq.system.entry.js
new file mode 100644
index 00000000000..502fb04c544
--- /dev/null
+++ b/dist/calcite/p-258l18yq.system.entry.js
@@ -0,0 +1 @@
+var t=this&&this.__awaiter||function(t,e,i,n){return new(i||(i=Promise))(function(r,s){function a(t){try{c(n.next(t))}catch(t){s(t)}}function o(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){t.done?r(t.value):new i(function(e){e(t.value)}).then(a,o)}c((n=n.apply(t,e||[])).next())})},e=this&&this.__generator||function(t,e){var i,n,r,s,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return s={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function o(s){return function(o){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;a;)try{if(i=1,n&&(r=2&s[0]?n.return:s[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,s[1])).done)return r;switch(n=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(r=(r=a.trys).length>0&&r[r.length-1])&&(6===s[0]||2===s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,o])}}};System.register(["./p-5b1e6c1f.system.js"],function(i){"use strict";var n,r,s,a,o;return{setters:[function(t){n=t.d,r=t.e,s=t.f,a=t.g,o=t.h}],execute:function(){var c,l,u,h,d,f,b=(c={currentAlert:"",queueLength:0},l=function(t,e){return n("context-consumer",{subscribe:t,renderer:e})},u=new Map,h=c,d=function(t,e){Array.isArray(t)?t.slice().forEach(function(t){e[t]=h[t]}):e[t]=Object.assign({},h)},f=function(t,e){return u.has(t)||(u.set(t,e),d(e,t)),function(){u.has(t)&&u.delete(t)}},{Provider:function(t,e){return h=t.state,u.forEach(d),e},Consumer:function(t,e){return l(f,e[0])},injectProps:function(t,e){var i=t.prototype,n=i.connectedCallback,r=i.disconnectedCallback;i.connectedCallback=function(){if(f(this,e),n)return n.call(this)},i.disconnectedCallback=function(){u.delete(this),r&&r.call(this)}}}),p=function(){function i(t){r(this,t),this.currentAlert="",this.dismiss=!1,this.icon=!1,this.id="1",this.queueLength=0,this.color="blue",this.theme=null,this.duration=this.dismiss?"medium":null,this.isActive=this.id===this.currentAlert,this.alertClose=s(this,"alertClose",7),this.alertOpen=s(this,"alertOpen",7)}return i.prototype.close=function(){return t(this,void 0,void 0,function(){return e(this,function(){return this.isActive&&(this.isActive=!1,this.alertClose.emit(this.id)),[2]})})},i.prototype.componentWillUpdate=function(){var t=this;this.isActive=this.currentAlert===this.id,this.isActive&&this.alertOpen.emit(this.id),this.isActive&&this.dismiss&&setTimeout(function(){t.close()},"fast"===this.duration?6e3:"slow"===this.duration?14e3:1e4)},i.prototype.setIcon=function(){return n("div",{class:"alert-icon"},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24",width:"24",viewBox:"0 0 24 24"},n("path",{d:"green"===this.color?"M23 11.5A11.5 11.5 0 1 1 11.5 0 11.5 11.5 0 0 1 23 11.5zm-5.5-6.018l-8.5 8.5-3.5-3.5-2 2L9.018 18l.018-.018L11.018 16l8.5-8.5z":"red"===this.color||"yellow"===this.color?"M22.3 19.795l-9-17.901a1.5 1.5 0 0 0-2.597 0L1.7 19.795a1.502 1.502 0 0 0 0 1.502A1.456 1.456 0 0 0 2.998 22H21a1.458 1.458 0 0 0 1.299-.703 1.506 1.506 0 0 0 .001-1.502zM13 19h-2v-2h2zm0-3h-2V8h2z":"M11 13h1v4h-1zm3.895 5.45a.311.311 0 0 0-.12-.27l-.232-.18h-6.19l-.232.18a.312.312 0 0 0 .04.518l1.387.771-1.367.76a.311.311 0 0 0-.028.526l3.09 2.18a.356.356 0 0 0 .41 0l3.09-2.18a.311.311 0 0 0-.029-.527l-1.366-.759 1.388-.77a.312.312 0 0 0 .159-.25zM11.59 0l-.173.002L11.244 0a6.2 6.2 0 0 0-6.182 6.698c.31 2.575 2.784 5.207 2.939 6.134.13.78.116 1.844.199 2.472A2.542 2.542 0 0 0 9.088 17H10v-4.412L8.83 9.37l.94-.342L10.85 12h1.3l1.08-2.97.94.341L13 12.588V17h.745a2.542 2.542 0 0 0 .889-1.696c.083-.628.068-1.692.199-2.472.154-.927 2.628-3.559 2.938-6.134A6.2 6.2 0 0 0 11.59 0z"})))},i.prototype.render=function(){var t=this,e=n("button",{class:"alert-close","aria-label":"close",onClick:function(){return t.close()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"32",width:"32",viewBox:"0 0 32 32"},n("path",{d:"M16.707 16l10.607 10.606-.708.707L16 16.707 5.394 27.313l-.708-.707L15.293 16 4.686 5.394l.708-.707L16 15.293 26.606 4.687l.708.707z"}))),i=this.dismiss?"":e,r=this.icon?this.setIcon():"",s=n("div",{class:(this.queueLength>0?"is-active ":"")+"alert-count"},"+",this.queueLength>0?this.queueLength:1),o=this.isActive&&this.dismiss?n("div",{class:"alert-dismiss"}):"";return n(a,{theme:this.theme,"is-active":!!this.isActive,duration:this.duration},r,n("div",{class:"alert-content"},n("slot",{name:"alert-title"}),n("slot",{name:"alert-message"}),n("slot",{name:"alert-link"})),s,i,o)},Object.defineProperty(i.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(i,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:relative;-ms-flex-pack:center;justify-content:center;right:0;left:0;margin-right:auto;margin-left:auto;z-index:100;width:50em;max-width:90%;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,.15);box-shadow:0 0 12px 0 rgba(0,0,0,.15);height:0;opacity:0;overflow:visible;display:-ms-flexbox;display:flex;border-top:3px solid;-webkit-transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;-webkit-transform:translate3d(0,1.5rem,0);transform:translate3d(0,1.5rem,0);pointer-events:none;border-width:0}\@media only screen and (max-width:600px){:host{max-width:100%;border-radius:2px 2px 0 0;-webkit-box-shadow:0 -6px 12px 0 rgba(0,0,0,.15);box-shadow:0 -6px 12px 0 rgba(0,0,0,.15)}}:host([is-active]){visibility:visible;border-width:3px;opacity:1;height:100%;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto}:host slot[name=alert-title]::slotted(div){display:block;font-weight:500;font-size:16px}:host slot[name=alert-link]::slotted(a){display:inline-block;font-size:15px;color:#007ac2}:host slot[name=alert-message]::slotted(div){font-size:15px;color:#555;display:inline;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host([theme=dark]){background-color:#2b2b2b}:host([theme=dark]) slot[name=alert-title]::slotted(div){color:#f8f8f8}:host([theme=dark]) slot[name=alert-message]::slotted(div){color:#f3f3f3}.alert-content{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;word-wrap:break-word;-webkit-padding-before:.75rem;padding-block-start:.75rem;-webkit-padding-after:.75rem;padding-block-end:.75rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}\@media only screen and (max-width:600px){.alert-content{padding:1.5rem}}.alert-content svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-content:first-of-type{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}\@media only screen and (max-width:600px){.alert-content{-webkit-padding-before:1.5rem;padding-block-start:1.5rem;-webkit-padding-after:1.5rem;padding-block-end:1.5rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}}.alert-icon{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (max-width:600px){.alert-icon{padding:1.5rem}}.alert-icon svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-close{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-appearance:none;background-color:transparent;border:none;outline:none;cursor:pointer;border-radius:0 0 2px 0}\@media only screen and (max-width:600px){.alert-close{padding:1.5rem}}.alert-close svg{position:relative;vertical-align:top;height:16px;width:16px;fill:#151515}.alert-close:focus,.alert-close:hover{background-color:#f3f3f3}.alert-close:active{background-color:#eaeaea}.alert-close:last-child{border-radius:0 0 2px 0}:host([dir=rtl]) .alert-close:last-child{border-radius:0 0 0 2px}\@media only screen and (max-width:600px){.alert-close{border-radius:0}}:host([theme=dark]) .alert-close svg{fill:#d4d4d4}:host([theme=dark]) .alert-close:focus,:host([theme=dark]) .alert-close:hover{background-color:#202020}:host([theme=dark]) .alert-close:active{background-color:#151515}.alert-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:0;font-size:14px;visibility:hidden;padding:0;font-weight:500;text-align:center;background-color:transparent;color:#757575;opacity:0;border-left:1px solid transparent;border-right:1px solid transparent;cursor:default}.alert-count.is-active{visibility:visible;-webkit-transition-delay:.3s;transition-delay:.3s;opacity:1;padding:0 .375rem;width:3rem;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3}.alert-count.is-active:last-child{border-right-color:transparent}\@media only screen and (max-width:600px){.alert-count{border-radius:0}}:host([theme=dark]) .alert-count{color:#d4d4d4}:host([theme=dark]) .alert-count.is-active{border-left:1px solid #202020;border-right:1px solid #202020}.alert-dismiss{left:0;top:0;z-index:101}.alert-dismiss,.alert-dismiss:after{display:block;position:absolute;right:0;height:3px}.alert-dismiss:after{top:-3px;border-radius:2px 2px 0 0;content:\"\";width:50%;background-color:hsla(0,0%,100%,.6);-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;z-index:200}:host([theme=dark]) .alert-dismiss:after{background-color:rgba(43,43,43,.6)}:host([duration=fast]) .alert-dismiss:after{-webkit-animation:dismissProgress 6s linear;animation:dismissProgress 6s linear}:host([duration=medium]) .alert-dismiss:after{-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear}:host([duration=slow]) .alert-dismiss:after{-webkit-animation:dismissProgress 14s linear;animation:dismissProgress 14s linear}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([color=blue]){border-top-color:#007ac2}:host([color=blue]) .alert-icon svg{fill:#007ac2}:host([color=red]){border-top-color:#d83020}:host([color=red]) .alert-icon svg{fill:#d83020}:host([color=yellow]){border-top-color:#edd317}:host([color=yellow]) .alert-icon svg{fill:#edd317}:host([color=green]){border-top-color:#35ac46}:host([color=green]) .alert-icon svg{fill:#35ac46}"},enumerable:!0,configurable:!0}),i}();i("calcite_alert",p),b.injectProps(p,["currentAlert","queueLength"]);var v=function(){function i(t){r(this,t),this.id="1",this.currentAlert="",this.isActive=!1,this.queue=[],this.alertsClose=s(this,"alertsClose",7),this.alertsOpen=s(this,"alertsOpen",7)}return i.prototype.open=function(i){return t(this,void 0,void 0,function(){return e(this,function(){return this.queue.includes(i)||(this.isActive=!0,this.currentAlert=i,this.queue.push(i),this.alertsOpen.emit({id:this.id,currentAlert:this.currentAlert,queue:this.queue})),[2]})})},i.prototype.updateQueue=function(t){var e=this;this.queue.includes(t.detail)&&(this.queue=this.queue.filter(function(e){return e!==t.detail})),this.queue.length<1&&setTimeout(function(){e.isActive=!1},300),this.alertsClose.emit({id:this.id,currentAlert:this.currentAlert,queue:this.queue})},i.prototype.componentWillUpdate=function(){this.currentAlert=this.queue.length>0?this.queue[0]:""},i.prototype.render=function(){return n(a,{"is-active":!!this.isActive},n(b.Provider,{state:{currentAlert:this.currentAlert,queueLength:this.queue.length>=2?this.queue.length-1:0}},n("slot",null)))},Object.defineProperty(i.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(i,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:fixed;visibility:hidden;opacity:0;left:0;right:0;bottom:1.5rem;height:0;z-index:101;pointer-events:none;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s}\@media only screen and (max-width:600px){:host{bottom:0}}:host([is-active]){height:auto;visibility:visible;opacity:1}"},enumerable:!0,configurable:!0}),i}();i("calcite_alerts",v);var y=function(){function t(t){r(this,t),this.isActive=!1,this.text="Loading..."}return t.prototype.render=function(){return n(a,{"is-active":!!this.isActive},n("div",{class:"loader-bars"}),n("div",{class:"loader-text"},this.text))},Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(t,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host .loader-bars,:host .loader-bars:after,:host .loader-bars:before{background:#007ac2;-webkit-animation:load .8s ease-in-out infinite;animation:load .8s ease-in-out infinite;width:.85rem;height:2rem}:host .loader-bars:after,:host .loader-bars:before{position:absolute;top:0;content:\"\"}:host{position:relative;display:none;padding-bottom:4.5rem;padding-top:4.5rem}:host([is-active]){display:block}:host .loader-bars{text-indent:-9999em;margin:auto;position:absolute;right:calc(50% - .425rem);font-size:11px;-webkit-animation-delay:.16s;animation-delay:.16s}:host .loader-bars:before{left:-1.25rem}:host .loader-bars:after{left:1.25rem;-webkit-animation-delay:.32s;animation-delay:.32s}:host .loader-text{padding-top:4rem;text-align:center}\@-webkit-keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}\@keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}"},enumerable:!0,configurable:!0}),t}();i("calcite_loader",y);var g=function(){function t(t){r(this,t)}return t.prototype.getText=function(){return(this.first||"")+((t=this.middle)?" "+t:"")+((e=this.last)?" "+e:"");var t,e},t.prototype.render=function(){return n("div",{class:"example-class"},"Hello, World! I'm ",this.getText())},Object.defineProperty(t,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.example-class{padding:1.5rem;color:#d83020;-webkit-box-shadow:0 0 16px 0 rgba(0,0,0,.05);box-shadow:0 0 16px 0 rgba(0,0,0,.05);border:1px solid #007ac2}"},enumerable:!0,configurable:!0}),t}();function T(t){for(var e="",i=0;i<t;i++)e+=(65536*(1+window.crypto.getRandomValues(new Uint32Array(1))[0]/1e10)|0).toString(16).substring(1);return e}function m(){return[T(2),T(1),T(1),T(1),T(3)].join("-")}i("calcite_modal",g);var A=function(){function i(t){r(this,t),this.id="calite-tab-"+m(),this.isActive=!1,this.calciteRegisterTab=s(this,"calciteRegisterTab",7)}return i.prototype.tabChangeHandler=function(t){var e=this;this.tab?this.isActive=this.tab===t.detail.tab:this.getTabIndex().then(function(i){e.isActive=i===t.detail.tab})},i.prototype.componentDidLoad=function(){var t=this;this.getTabIndex().then(function(e){t.calciteRegisterTab.emit({id:t.id,index:e})})},i.prototype.getTabIndex=function(){return t(this,void 0,void 0,function(){return e(this,function(){return[2,Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"),this.el))]})})},i.prototype.registerLabeledBy=function(i){return t(this,void 0,void 0,function(){return e(this,function(){return this.labeledBy=i,[2]})})},i.prototype.render=function(){return n(a,{"aria-labeledby":this.labeledBy,"aria-expanded":this.isActive?"true":"false",role:"tabpanel"},n("section",null,n("slot",null)))},Object.defineProperty(i.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(i,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([is-active]) section{display:block}section{display:none}"},enumerable:!0,configurable:!0}),i}();i("calcite_tab",A);var L=function(){function t(t){r(this,t),this.id="calite-tab-nav-"+m(),this.selectedTab=0,this.calciteTabChange=s(this,"calciteTabChange",7)}return t.prototype.selectedTabChanged=function(){this.calciteTabChange.emit({tab:this.selectedTab})},t.prototype.focusPreviousTabHandler=function(t){var e=this.el.parentElement.querySelectorAll("calcite-tab-title");(e[this.getIndexOfTabTitle(t.target)-1]||e[e.length-1]).focus()},t.prototype.focusNextTabHandler=function(t){var e=this.el.parentElement.querySelectorAll("calcite-tab-title");(e[this.getIndexOfTabTitle(t.target)+1]||e[0]).focus()},t.prototype.tabTitleRegistationHandler=function(t){t.target.setControledBy(this.id)},t.prototype.activateTabHandler=function(t){this.selectedTab=t.detail.tab?t.detail.tab:this.getIndexOfTabTitle(t.target)},t.prototype.getIndexOfTabTitle=function(t){return this.el.parentElement.querySelectorAll("calcite-tab-title").slice().indexOf(t)},t.prototype.componentWillLoad=function(){this.selectedTabChanged()},t.prototype.render=function(){return n(a,{role:"tablist"},n("nav",{class:"tab-nav"},n("slot",null)))},Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(t,"watchers",{get:function(){return{selectedTab:["selectedTabChanged"]}},enumerable:!0,configurable:!0}),Object.defineProperty(t,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.tab-nav{display:-ms-flexbox;display:flex;padding:.5rem 0}::slotted(calcite-tab-title){margin-right:1.25rem}:host([dir=rtl]) ::slotted(calcite-tab-title){margin-right:0;margin-left:1.25rem}"},enumerable:!0,configurable:!0}),t}();i("calcite_tab_nav",L);var x=function(){function i(t){r(this,t),this.id="calite-tab-title-"+m(),this.isActive=!1,this.calciteActivateTab=s(this,"calciteActivateTab",7),this.calciteFocusNextTab=s(this,"calciteFocusNextTab",7),this.calciteFocusPreviousTab=s(this,"calciteFocusPreviousTab",7),this.calciteRegisterTabTitle=s(this,"calciteRegisterTabTitle",7)}return i.prototype.tabChangeHand=function(t){var e=this;this.tab?this.isActive=this.tab===t.detail.tab:this.getTabIndex().then(function(i){e.isActive=i===t.detail.tab})},i.prototype.onClick=function(){this.calciteActivateTab.emit({tab:this.tab})},i.prototype.keyDownHandler=function(t){switch(t.keyCode){case 32:case 13:this.onClick();break;case 39:this.calciteFocusNextTab.emit();break;case 37:this.calciteFocusPreviousTab.emit()}},i.prototype.componentDidLoad=function(){var t=this;this.getTabIndex().then(function(e){t.calciteRegisterTabTitle.emit({id:t.id,index:e})})},i.prototype.getTabIndex=function(){return t(this,void 0,void 0,function(){return e(this,function(){return[2,Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"),this.el))]})})},i.prototype.setControledBy=function(i){return t(this,void 0,void 0,function(){return e(this,function(){return this.controls=i,[2]})})},i.prototype.render=function(){return n(a,{"aria-controls":this.controls,"aria-expanded":this.isActive?"true":"false",role:"tab",tabindex:"0"},n("a",null,n("slot",null)))},Object.defineProperty(i.prototype,"el",{get:function(){return o(this)},enumerable:!0,configurable:!0}),Object.defineProperty(i,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{-ms-flex:0 1 auto;flex:0 1 auto;outline:none}:host(:active) a,:host(:focus) a,:host(:hover) a{outline:none;text-decoration:none;color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-hover)}:host([is-active]) a{color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-active)}a{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:.875rem;line-height:1.5;padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid transparent;cursor:pointer;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;color:var(--calcite-tabs-color);outline:none}"},enumerable:!0,configurable:!0}),i}();i("calcite_tab_title",x);var E=function(){function t(t){r(this,t),this.tabs={},this.tabTitles={},this.theme="light"}return t.prototype.tabTitleRegistationHandler=function(t){var e=t.detail,i=e.index,n=e.id;this.tabTitles[i]={id:n,title:t.target},this.tabs[i]&&this.tabs[i].tab.registerLabeledBy(n)},t.prototype.tabRegistationHandler=function(t){var e=t.detail,i=e.index;this.tabs[i]={id:e.id,tab:t.target},this.tabTitles[i]&&this.tabs[i].tab.registerLabeledBy(this.tabTitles[i].id)},t.prototype.render=function(){return n("div",null,n("slot",{name:"tab-nav"}),n("section",{class:"tab-contents"},n("slot",null)))},Object.defineProperty(t,"style",{get:function(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{--calcite-tabs-color:#2b2b2b;--calcite-tabs-border:#eaeaea;--calcite-tabs-border-hover:#dfdfdf;--calcite-tabs-color-active:#151515;--calcite-tabs-border-active:#007ac2}:host([theme=dark]){--calcite-tabs-color:#f3f3f3;--calcite-tabs-border:#404040;--calcite-tabs-border-hover:#757575;--calcite-tabs-color-active:#f8f8f8;--calcite-tabs-border-active:#fff}.tab-contents{margin-top:1px;border-top:1px solid var(--calcite-tabs-border)}"},enumerable:!0,configurable:!0}),t}();i("calcite_tabs",E)}}});
\ No newline at end of file
diff --git a/dist/calcite/p-549b16dd.js b/dist/calcite/p-549b16dd.js
new file mode 100644
index 00000000000..cdf262694d0
--- /dev/null
+++ b/dist/calcite/p-549b16dd.js
@@ -0,0 +1 @@
+function t(t,s,o){return(new e).shimCssText(t,s,s+"-h",s+"-s",o)}class e{constructor(){this.strictStyling=!0}shimCssText(t,e,s="",o="",r=!1){const n=t.match(f)||[];t=t.replace(x,"");const c=[];if(r){const e=t=>{const e=`/*!@___${c.length}___*/`;return c.push({placeholder:e,comment:`/*!@${t.selector}*/`}),t.selector=e+t.selector,t};t=H(t,t=>"@"!==t.selector[0]?e(t):t.selector.startsWith("@media")||t.selector.startsWith("@supports")||t.selector.startsWith("@page")||t.selector.startsWith("@document")?(t.content=H(t.content,e),t):t)}const l=this._scopeCssText(t,e,s,o,r);return t=[l,...n].join("\n"),r&&c.forEach(({placeholder:e,comment:s})=>{t=t.replace(e,s)}),t}_scopeCssText(t,e,s,o,r){return t=this._insertPolyfillHostInCssText(t),t=this._convertColonHost(t),t=this._convertColonHostContext(t),t=this._convertColonSlotted(t,o),t=this._convertShadowDOMSelectors(t),e&&(t=this._scopeSelectors(t,e,s,o,r)),(t=(t=t.replace(/-shadowcsshost-no-combinator/g,`.${s}`)).replace(/>\s*\*\s+([^{, ]+)/gm," $1 ")).trim()}_convertColonHost(t){return this._convertColonRule(t,l,this._colonHostPartReplacer)}_convertColonSlotted(t,e){return t.replace(p,function(...t){if(t[2]){const s=t[2].trim();return"."+e+" > "+s+t[3]}return h+t[3]})}_convertColonHostContext(t){return this._convertColonRule(t,i,this._colonHostContextPartReplacer)}_convertColonRule(t,e,s){return t.replace(e,function(...t){if(t[2]){const e=t[2].split(","),o=[];for(let r=0;r<e.length;r++){const n=e[r].trim();if(!n)break;o.push(s(h,n,t[3]))}return o.join(",")}return h+t[3]})}_colonHostContextPartReplacer(t,e,s){return e.indexOf(o)>-1?this._colonHostPartReplacer(t,e,s):t+e+s+", "+e+" "+t+s}_colonHostPartReplacer(t,e,s){return t+e.replace(o,"")+s}_convertShadowDOMSelectors(t){return u.reduce((t,e)=>t.replace(e," "),t)}_scopeSelectors(t,e,s,o,r){return H(t,t=>{let n=t.selector,c=t.content;return"@"!==t.selector[0]?n=this._scopeSelector(t.selector,e,s,o,this.strictStyling):(t.selector.startsWith("@media")||t.selector.startsWith("@supports")||t.selector.startsWith("@page")||t.selector.startsWith("@document"))&&(c=this._scopeSelectors(t.content,e,s,o,r)),n=n.replace(/\s{2,}/g," ").trim(),new v(n,c)})}_scopeSelector(t,e,s,o,r){return t.split(",").map(t=>o&&t.indexOf("."+o)>-1?t.trim():this._selectorNeedsScoping(t,e)?r?this._applyStrictSelectorScope(t,e,s).trim():this._applySelectorScope(t,e,s).trim():t.trim()).join(", ")}_selectorNeedsScoping(t,e){return!this._makeScopeMatcher(e).test(t)}_makeScopeMatcher(t){return t=t.replace(/\[/g,"\\[").replace(/\]/g,"\\]"),new RegExp("^("+t+")"+_,"m")}_applySelectorScope(t,e,s){return this._applySimpleSelectorScope(t,e,s)}_applySimpleSelectorScope(t,e,s){if(g.lastIndex=0,g.test(t)){const o=this.strictStyling?`.${s}`:e;return t.replace(a,(t,e)=>e.replace(/([^:]*)(:*)(.*)/,(t,e,s,r)=>e+o+s+r)).replace(g,o+" ")}return e+" "+t}_applyStrictSelectorScope(t,e,o){const r="."+(e=e.replace(/\[is=([^\]]*)\]/g,(t,...e)=>e[0])),n=t=>{let s=t.trim();if(!s)return"";if(t.indexOf(h)>-1)s=this._applySimpleSelectorScope(t,e,o);else{const e=t.replace(g,"");if(e.length>0){const t=e.match(/([^:]*)(:*)(.*)/);t&&(s=t[1]+r+t[2]+t[3])}}return s},c=new s(t);let l,i="",p=0;const a=/( |>|\+|~(?!=))\s*/g;let u=!((t=c.content()).indexOf(h)>-1);for(;null!==(l=a.exec(t));){const e=l[1],s=t.slice(p,l.index).trim();i+=`${(u=u||s.indexOf(h)>-1)?n(s):s} ${e} `,p=a.lastIndex}const _=t.substring(p);return i+=(u=u||_.indexOf(h)>-1)?n(_):_,c.restore(i)}_insertPolyfillHostInCssText(t){return t.replace(m,n).replace(d,o).replace(S,r)}}class s{constructor(t){this.placeholders=[],this.index=0,t=t.replace(/(\[[^\]]*\])/g,(t,e)=>{const s=`__ph-${this.index}__`;return this.placeholders.push(e),this.index++,s}),this._content=t.replace(/(:nth-[-\w]+)(\([^)]+\))/g,(t,e,s)=>{const o=`__ph-${this.index}__`;return this.placeholders.push(s),this.index++,e+o})}restore(t){return t.replace(/__ph-(\d+)__/g,(t,e)=>this.placeholders[+e])}content(){return this._content}}const o="-shadowcsshost",r="-shadowcssslotted",n="-shadowcsscontext",c=")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)",l=new RegExp("("+o+c,"gim"),i=new RegExp("("+n+c,"gim"),p=new RegExp("("+r+c,"gim"),h=o+"-no-combinator",a=/-shadowcsshost-no-combinator([^\s]*)/,u=[/::shadow/g,/::content/g],_="([>\\s~+[.,{:][\\s\\S]*)?$",g=/-shadowcsshost/gim,d=/:host/gim,S=/::slotted/gim,m=/:host-context/gim,x=/\/\*\s*[\s\S]*?\*\//g,f=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g,C=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g,w=/([{}])/g,$="{",R="}",y="%BLOCK%";class v{constructor(t,e){this.selector=t,this.content=e}}function H(t,e){const s=function(t){const e=t.split(w),s=[],o=[];let r=0,n=[];for(let t=0;t<e.length;t++){const c=e[t];c===R&&r--,r>0?n.push(c):(n.length>0&&(o.push(n.join("")),s.push(y),n=[]),s.push(c)),c===$&&r++}return n.length>0&&(o.push(n.join("")),s.push(y)),new O(s.join(""),o)}(t);let o=0;return s.escapedString.replace(C,function(...t){const r=t[2];let n="",c=t[4],l="";c&&c.startsWith("{"+y)&&(n=s.blocks[o++],c=c.substring(y.length+1),l="{");const i=e(new v(r,n));return`${t[1]}${i.selector}${t[3]}${l}${i.content}${c}`})}class O{constructor(t,e){this.escapedString=t,this.blocks=e}}export{e as ShadowCss,t as scopeCss};
\ No newline at end of file
diff --git a/dist/calcite/p-5b1e6c1f.system.js b/dist/calcite/p-5b1e6c1f.system.js
new file mode 100644
index 00000000000..b51d7a121b0
--- /dev/null
+++ b/dist/calcite/p-5b1e6c1f.system.js
@@ -0,0 +1 @@
+var n=this&&this.__extends||function(){var n=function(t,r){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var r in t)t.hasOwnProperty(r)&&(n[r]=t[r])})(t,r)};return function(t,r){function e(){this.constructor=t}n(t,r),t.prototype=null===r?Object.create(r):(e.prototype=r.prototype,new e)}}(),t=this&&this.__awaiter||function(n,t,r,e){return new(r||(r=Promise))(function(i,u){function o(n){try{f(e.next(n))}catch(n){u(n)}}function c(n){try{f(e.throw(n))}catch(n){u(n)}}function f(n){n.done?i(n.value):new r(function(t){t(n.value)}).then(o,c)}f((e=e.apply(n,t||[])).next())})},r=this&&this.__generator||function(n,t){var r,e,i,u,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return u={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function c(u){return function(c){return function(u){if(r)throw new TypeError("Generator is already executing.");for(;o;)try{if(r=1,e&&(i=2&u[0]?e.return:u[0]?e.throw||((i=e.return)&&i.call(e),0):e.next)&&!(i=i.call(e,u[1])).done)return i;switch(e=0,i&&(u=[2&u[0],i.value]),u[0]){case 0:case 1:i=u;break;case 4:return o.label++,{value:u[1],done:!1};case 5:o.label++,e=u[1],u=[0];continue;case 7:u=o.ops.pop(),o.trys.pop();continue;default:if(!(i=(i=o.trys).length>0&&i[i.length-1])&&(6===u[0]||2===u[0])){o=0;continue}if(3===u[0]&&(!i||u[1]>i[0]&&u[1]<i[3])){o.label=u[1];break}if(6===u[0]&&o.label<i[1]){o.label=i[1],i=u;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(u);break}i[2]&&o.ops.pop(),o.trys.pop();continue}u=t.call(n,o)}catch(n){u=[6,n],e=0}finally{r=i=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,c])}}};System.register([],function(e,i){"use strict";return{execute:function(){var u=this;e("d",A);var o=window,c=document,f={t:0,i:"",raf:function(n){return requestAnimationFrame(n)},ael:function(n,t,r,e){return n.addEventListener(t,r,e)},rel:function(n,t,r,e){return n.removeEventListener(t,r,e)}},a=!!c.documentElement.attachShadow,s=function(){var n=!1;try{c.addEventListener("e",null,Object.defineProperty({},"passive",{get:function(){n=!0}}))}catch(n){}return n}(),l=function(){try{return new CSSStyleSheet,!0}catch(n){}return!1}(),v=new WeakMap,h=function(n){return v.get(n)},d=(e("e",function(n,t){return v.set(t.u=n,t)}),function(n){var t={t:0,o:n};return t.s=new Promise(function(n){return t.l=n}),t.v=new Map,v.set(n,t)}),w=function(n,t){return t in n},y=function(n){return console.error(n)},$=function(n){return i.import("./"+n.h+".entry.js").then(function(t){return t[n.$.replace(/-/g,"_")]},y)},p=new Map,m=o.__stencil_cssshim,b=0,g=!1,j=[],k=[],S=[],O=function(n){return function(t){n.push(t),g||(g=!0,f.raf(_))}},R=function(n,t){for(var r=0,e=0;r<n.length&&(e=performance.now())<t;)try{n[r++](e)}catch(n){y(n)}r===n.length?n.length=0:0!==r&&n.splice(0,r)},_=function(){b++,function(n){for(var t=0;t<n.length;t++)try{n[t](performance.now())}catch(n){y(n)}n.length=0}(j);var n=2==(6&f.t)?performance.now()+7*Math.ceil(b*(1/22)):1/0;R(k,n),R(S,n),k.length>0&&(S.push.apply(S,k),k.length=0),(g=j.length+k.length+S.length>0)?f.raf(_):b=0},x=O(k),L={},M=function(n){return null!=n},U=function(n){return n.toLowerCase()};e("c",function(){return o.CSS&&o.CSS.supports&&o.CSS.supports("color","var(--c)")?Promise.resolve():i.import("./p-f57d4852.system.js")}),e("a",function(){return t(u,void 0,void 0,function(){var n,t,e;return r(this,function(r){switch(r.label){case 0:return""===(n=i.meta.url)?[3,1]:[2,Promise.resolve(new URL(".",n).href)];case 1:return t=Array.from(c.querySelectorAll("script")).find(function(n){return n.src.includes("/calcite.esm.js")||"calcite"===n.getAttribute("data-namespace")}),e=new URL(".",new URL(t.getAttribute("data-resources-url")||t.src,c.baseURI)),C(e.href),window.customElements?[3,3]:[4,i.import("./p-7889326c.system.js")];case 2:r.sent(),r.label=3;case 3:return[2,e.href]}})})});var C=function(n){var t="__sc_import_"+"calcite".replace(/\s|-/g,"_");try{o[t]=new Function("w","return import(w);")}catch(e){var r=new Map;o[t]=function(e){var i=new URL(e,n).href,u=r.get(i);if(!u){var f=c.createElement("script");f.type="module",f.src=URL.createObjectURL(new Blob(["import * as m from '"+i+"'; window."+t+".m = m;"],{type:"application/javascript"})),u=new Promise(function(n){f.onload=function(){n(o[t].m),f.remove()}}),r.set(i,u),c.head.appendChild(f)}return u}}},E="http://www.w3.org/1999/xlink",P=new WeakMap,T=function(n){return"sc-"+n},W=[];function A(n,t){for(var r,e,i=null,u=!1,o=!1,c=arguments.length;c-- >2;)W.push(arguments[c]);for(;W.length>0;){var f=W.pop();if(f&&void 0!==f.pop)for(c=f.length;c--;)W.push(f[c]);else"boolean"==typeof f&&(f=null),(o="function"!=typeof n)&&(null==f?f="":"number"==typeof f?f=String(f):"string"!=typeof f&&(o=!1)),o&&u?i[i.length-1].p+=f:null===i?i=[o?{t:0,p:f}:f]:i.push(o?{t:0,p:f}:f),u=o}if(null!=t){if(t.className&&(t.class=t.className),"object"==typeof t.class){for(c in t.class)t.class[c]&&W.push(c);t.class=W.join(" "),W.length=0}null!=t.key&&(r=t.key),null!=t.name&&(e=t.name)}if("function"==typeof n)return n(t,i||[],D);var a={g:n,j:i,k:void 0,t:0};return a.S=t,a.p=void 0,a.O=r,a.R=e,a}var F,N,q,B=e("g",{}),D={forEach:function(n,t){return n.map(G).forEach(t)},map:function(n,t){return n.map(G).map(t).map(H)}},G=function(n){return{vattrs:n.S,vchildren:n.j,vkey:n.O,vname:n.R,vtag:n.g,vtext:n.p}},H=function(n){return{t:0,S:n.vattrs,j:n.vchildren,O:n.vkey,R:n.vname,g:n.vtag,p:n.vtext}},z=function(n,t,r,e,i,u){if(r!==e)if("class"!==t||i)if("style"===t){for(var o in r)e&&null!=e[o]||(o.includes("-")?n.style.removeProperty(o):n.style[o]="");for(var o in e)r&&e[o]===r[o]||(o.includes("-")?n.style.setProperty(o,e[o]):n.style[o]=e[o])}else if("key"===t);else if("ref"===t)e&&e(n);else if(t.startsWith("on")&&!w(n,t))t=w(n,U(t))?U(t.substring(2)):U(t[2])+t.substring(3),r&&f.rel(n,t,r,!1),e&&f.ael(n,t,e,!1);else{var c=w(n,t),a=["object","function"].includes(typeof e);if((c||a&&null!==e)&&!i)try{n[t]=null==e&&-1===n.tagName.indexOf("-")?"":e}catch(n){}var s=!(!i||t===(t=t.replace(/^xlink\:?/,"")));null==e||!1===e?s?n.removeAttributeNS(E,U(t)):n.removeAttribute(t):(!c||4&u||i)&&!a&&(e=!0===e?"":e.toString(),s?n.setAttributeNS(E,U(t),e):n.setAttribute(t,e))}else{var l=I(r),v=I(n.className).filter(function(n){return!l.includes(n)});n.className=v.concat(I(e).filter(function(n){return!v.includes(n)})).join(" ")}},I=function(n){return n?n.split(" "):[]},J=function(n,t,r,e){var i=11===t.k.nodeType&&t.k.host?t.k.host:t.k,u=n&&n.S||L,o=t.S||L;for(e in u)null==o[e]&&null!=u[e]&&z(i,e,u[e],void 0,r,t.t);for(e in o)z(i,e,u[e],o[e],r,t.t)},K=!1,Q=!1,V=!1,X=!1,Y=function(n,t,r,e){var i,u,o,f=t.j[r],a=0;if(K||(V=!0,"slot"===f.g&&(F&&e.classList.add(F+"-s"),f.t|=f.j?2:1)),M(f.p))f.k=c.createTextNode(f.p);else if(1&f.t)f.k=c.createTextNode("");else{if(i=f.k=X||"svg"===f.g?c.createElementNS("http://www.w3.org/2000/svg",f.g):c.createElement(2&f.t?"slot-fb":f.g),J(null,f,X="svg"===f.g||"foreignObject"!==f.g&&X),M(F)&&i["s-si"]!==F&&i.classList.add(i["s-si"]=F),f.j)for(a=0;a<f.j.length;++a)(u=Y(n,f,a,i))&&i.appendChild(u);"svg"===f.g&&(X=!1)}return f.k["s-hn"]=q,3&f.t&&(f.k["s-sr"]=!0,f.k["s-cr"]=N,f.k["s-sn"]=f.R||"",(o=n&&n.j&&n.j[r])&&o.g===f.g&&n.k&&Z(n.k,!1)),f.k},Z=function(n,t){f.t|=1;for(var r=n.childNodes,e=r.length-1;e>=0;e--){var i=r[e];i["s-hn"]!==q&&i["s-ol"]&&(un(i).insertBefore(i,en(i)),i["s-ol"].remove(),i["s-ol"]=void 0,V=!0),t&&Z(i,t)}f.t&=-2},nn=function(n,t,r,e,i,u){var o,c=n["s-cr"]&&n["s-cr"].parentNode||n;for(c.shadowRoot&&U(c.tagName)===q&&(c=c.shadowRoot);i<=u;++i)e[i]&&(o=Y(null,r,i,n))&&(e[i].k=o,c.insertBefore(o,en(t)))},tn=function(n,t,r,e){for(;t<=r;++t)M(n[t])&&(e=n[t].k,sn(n[t],!0),Q=!0,e["s-ol"]?e["s-ol"].remove():Z(e,!0),e.remove())},rn=function(n,t){return n.g===t.g&&("slot"===n.g?n.R===t.R:n.O===t.O)},en=function(n){return n&&n["s-ol"]?n["s-ol"]:n},un=function(n){return(n["s-ol"]?n["s-ol"]:n).parentNode},on=function(n,t){var r,e=t.k=n.k,i=n.j,u=t.j;X=e&&M(e.parentNode)&&void 0!==e.ownerSVGElement,X="svg"===t.g||"foreignObject"!==t.g&&X,M(t.p)?(r=e["s-cr"])?r.parentNode.textContent=t.p:n.p!==t.p&&(e.textContent=t.p):("slot"===t.g||J(n,t,X),M(i)&&M(u)?function(n,t,r,e){for(var i,u,o=0,c=0,f=0,a=0,s=t.length-1,l=t[0],v=t[s],h=e.length-1,d=e[0],w=e[h];o<=s&&c<=h;)if(null==l)l=t[++o];else if(null==v)v=t[--s];else if(null==d)d=e[++c];else if(null==w)w=e[--h];else if(rn(l,d))on(l,d),l=t[++o],d=e[++c];else if(rn(v,w))on(v,w),v=t[--s],w=e[--h];else if(rn(l,w))"slot"!==l.g&&"slot"!==w.g||Z(l.k.parentNode,!1),on(l,w),n.insertBefore(l.k,v.k.nextSibling),l=t[++o],w=e[--h];else if(rn(v,d))"slot"!==l.g&&"slot"!==w.g||Z(v.k.parentNode,!1),on(v,d),n.insertBefore(v.k,l.k),v=t[--s],d=e[++c];else{for(f=-1,a=o;a<=s;++a)if(t[a]&&M(t[a].O)&&t[a].O===d.O){f=a;break}f>=0?((u=t[f]).g!==d.g?i=Y(t&&t[c],r,f,n):(on(u,d),t[f]=void 0,i=u.k),d=e[++c]):(i=Y(t&&t[c],r,c,n),d=e[++c]),i&&un(l.k).insertBefore(i,en(l.k))}o>s?nn(n,null==e[h+1]?null:e[h+1].k,r,e,c,h):c>h&&tn(t,o,s)}(e,i,t,u):M(u)?(M(n.p)&&(e.textContent=""),nn(e,null,t,u,0,u.length-1)):M(i)&&tn(i,0,i.length-1)),X&&"svg"===t.g&&(X=!1)},cn=function(n,t,r,e,i,u,o,c){for(e=0,i=(r=n.childNodes).length;e<i;e++)if(1===(t=r[e]).nodeType){if(t["s-sr"])for(o=t["s-sn"],t.hidden=!1,u=0;u<i;u++)if(r[u]["s-hn"]!==t["s-hn"])if(c=r[u].nodeType,""!==o){if(1===c&&o===r[u].getAttribute("slot")){t.hidden=!0;break}}else if(1===c||3===c&&""!==r[u].textContent.trim()){t.hidden=!0;break}cn(t)}},fn=[],an=function(n){var t,r,e,i,u,o=n.childNodes,c=0,f=0,a=0;for(t=o.length;c<t;c++){if((r=o[c])["s-sr"]&&(e=r["s-cr"]))for(u=r["s-sn"],f=(i=e.parentNode.childNodes).length-1;f>=0;f--)(e=i[f])["s-cn"]||e["s-nr"]||e["s-hn"]===r["s-hn"]||((3===(a=e.nodeType)||8===a)&&""===u||1===a&&null===e.getAttribute("slot")&&""===u||1===a&&e.getAttribute("slot")===u)&&(fn.some(function(n){return n.nodeToRelocate===e})||(Q=!0,e["s-sn"]=u,fn.push({slotRefNode:r,nodeToRelocate:e})));1===r.nodeType&&an(r)}},sn=function(n,t){n&&(n.S&&n.S.ref&&n.S.ref(t?null:n.k),n.j&&n.j.forEach(function(n){sn(n,t)}))},ln=function(n,e){return t(u,void 0,void 0,function(){var t;return r(this,function(r){switch(r.label){case 0:if(!n||!n[e])return[3,4];r.label=1;case 1:return r.trys.push([1,3,,4]),[4,n[e]()];case 2:return r.sent(),[3,4];case 3:return t=r.sent(),y(t),[3,4];case 4:return[2]}})})},vn=function(n,e,i,o){return t(u,void 0,void 0,function(){var t;return r(this,function(r){switch(r.label){case 0:return e.t|=16,t=e.u,o?[4,ln(t,"componentWillLoad")]:[3,2];case 1:return r.sent(),[3,4];case 2:return[4,ln(t,"componentWillUpdate")];case 3:r.sent(),r.label=4;case 4:return x(function(){return hn(n,e,i,o,t)}),[2]}})})},hn=function(n,t,r,e,i){t.t&=-17,n["s-lr"]=!1,e&&function(n,t){var r=function(n,r,e,i){var u=T(t.$),o=p.get(u);if(n=11===n.nodeType?n:c,o)if("string"==typeof o){var f=P.get(n=n.head||n),a=void 0;if(f||P.set(n,f=new Set),!f.has(u)){if(m){var s=(a=m.createHostStyle(i,u,o))["s-sc"];s&&(u=s,f=null)}else(a=c.createElement("style")).innerHTML=o;n.appendChild(a),f&&f.add(u)}}else n.adoptedStyleSheets.includes(o)||(n.adoptedStyleSheets=n.adoptedStyleSheets.concat([o]));return u}(a&&n.shadowRoot?n.shadowRoot:n.getRootNode(),0,0,n);10&t.t&&(n["s-sc"]=r,n.classList.add(r+"-h"))}(n,r),t.t|=4;try{!function(n,t,r,e){var i,u=t._||{t:0};if(q=U(n.tagName),(i=e)&&i.g===B?e.g=null:e=A(null,null,e),r.L&&(e.S=e.S||{},r.L.forEach(function(t){return e.S[t[1]]=n[t[0]]})),e.t|=4,t._=e,e.k=u.k=n.shadowRoot||n,F=n["s-sc"],N=n["s-cr"],K=a&&0!=(1&r.t),V=Q=!1,on(u,e),V){an(e.k);for(var o=0;o<fn.length;o++)(s=fn[o]).nodeToRelocate["s-ol"]||((h=c.createTextNode(""))["s-nr"]=s.nodeToRelocate,s.nodeToRelocate.parentNode.insertBefore(s.nodeToRelocate["s-ol"]=h,s.nodeToRelocate));for(f.t|=1,o=0;o<fn.length;o++){for(var s,l=(s=fn[o]).slotRefNode.parentNode,v=s.slotRefNode.nextSibling,h=s.nodeToRelocate["s-ol"];h=h.previousSibling;){var d=h["s-nr"];if(d&&d&&d["s-sn"]===s.nodeToRelocate["s-sn"]&&l===d.parentNode&&(d=d.nextSibling)&&d&&!d["s-nr"]){v=d;break}}(!v&&l!==s.nodeToRelocate.parentNode||s.nodeToRelocate.nextSibling!==v)&&s.nodeToRelocate!==v&&l.insertBefore(s.nodeToRelocate,v)}f.t&=-2}Q&&cn(e.k),fn.length=0}(n,t,r,i.render())}catch(n){y(n)}t.t&=-5,m&&m.updateHost(n),n["s-lr"]=!0,t.t|=2,n["s-rc"].length>0&&(n["s-rc"].forEach(function(n){return n()}),n["s-rc"].length=0),dn(n,t)},dn=function(n,t,r){if(!n["s-al"]){var e=t.u,i=t.M;512&t.t||(t.t|=512,n.classList.add("hydrated"),ln(e,"componentDidLoad"),t.l(n),i||(c.documentElement.classList.add("hydrated"),setTimeout(function(){return f.t|=2},999))),i&&((r=i["s-al"])&&(r.delete(n),0===r.size&&(i["s-al"]=void 0,i["s-init"]())),t.M=void 0)}},wn=function(n,t,r,e){if(t.U){n.watchers&&(t.C=n.watchers);var i=Object.entries(t.U);if(i.forEach(function(i){var u=i[0],o=i[1][0];31&o||e&&32&o?Object.defineProperty(n.prototype,u,{get:function(){return n=u,h(this).v.get(n);var n},set:function(n){!function(n,t,r,e){var i,u,o=h(n),c=o.o,f=o.v.get(t),a=o.t;if(u=e.U[t][0],!((r=null!=(i=r)&&"object"!=typeof i&&"function"!=typeof i?4&u?"false"!==i&&(""===i||!!i):2&u?parseFloat(i):1&u?String(i):i:i)===f||8&a&&void 0!==f)&&(o.v.set(t,r),o.u)){if(e.C&&1==(9&a)){var s=e.C[t];s&&s.forEach(function(n){try{o.u[n].call(o.u,r,f,t)}catch(n){y(n)}})}2==(22&a)&&vn(c,o,e,!1)}}(this,u,n,t)},configurable:!0,enumerable:!0}):r&&64&o&&Object.defineProperty(n.prototype,u,{value:function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];var r=h(this);return r.s.then(function(){var t;return(t=r.u)[u].apply(t,n)})}})}),r){var u=new Map;n.prototype.attributeChangedCallback=function(n,t,r){var e=u.get(n);this[e]=(null!==r||"boolean"!=typeof this[e])&&r},n.observedAttributes=i.filter(function(n){return 15&n[1][0]}).map(function(n){var r=n[0],e=n[1],i=e[1]||r;return u.set(i,r),512&e[0]&&t.L.push([r,i]),i})}}return n},yn=function(n,e,o,c,f){return t(u,void 0,void 0,function(){var t,u,c;return r(this,function(r){switch(r.label){case 0:return 0!=(256&e.t)?[3,4]:(e.t|=256,[4,$(o)]);case 1:(f=r.sent()).isProxied||(o.C=f.watchers,wn(f,o,0,1),f.isProxied=!0),e.t|=8;try{new f(e)}catch(n){y(n)}return e.t&=-9,$n(e.u),f.isStyleRegistered||!f.style?[3,4]:(t=f.style,u=T(o.$),8&o.t?[4,i.import("./p-1563a874.system.js").then(function(n){return n.scopeCss(t,u,!1)})]:[3,3]);case 2:t=r.sent(),r.label=3;case 3:s=t,v=p.get(a=u),l?(v=v||new CSSStyleSheet).replace(s):v=s,p.set(a,v),f.isStyleRegistered=!0,r.label=4;case 4:return(c=e.M)&&!c["s-lr"]&&c["s-rc"]?c["s-rc"].push(function(){return yn(n,e,o)}):vn(n,e,o,!0),[2]}var a,s,v})})},$n=function(n){ln(n,"connectedCallback")},pn=(e("b",function(t,r){void 0===r&&(r={});var e=[],i=r.exclude||[],u=c.head,l=o.customElements,v=u.querySelector("meta[charset]"),w=c.createElement("style");Object.assign(f,r),f.i=new URL(r.resourcesUrl||"/",c.baseURI).href,r.syncQueue&&(f.t|=4),t.forEach(function(t){return t[1].forEach(function(r){var u={t:r[0],$:r[1],U:r[2],P:r[3],L:[],C:{}};!a&&1&u.t&&(u.t|=8);var o=u.$,v=function(t){function r(n){var r=t.call(this,n)||this;return n=r,r["s-lr"]=!1,r["s-rc"]=[],d(n),1&u.t&&(a?n.attachShadow({mode:"open"}):"shadowRoot"in n||(n.shadowRoot=n)),r}return n(r,t),r.prototype.connectedCallback=function(){!function(n,t){if(0==(1&f.t)){var r=h(n);if(t.P&&(r.T=function(n,r){var e=t.P.map(function(t){var e=t[0],i=t[1],u=t[2],o=function(n,t){return 16&t?n.parentElement:n}(n,e),c=function(n,t){return function(r){return n.u?n.u[t](r):n.s.then(function(){return n.u[t](r)}).catch(y)}}(r,u),a=function(n){return s?{passive:0!=(1&n),capture:0!=(2&n)}:0!=(2&n)}(e);return f.ael(o,i,c,a),function(){return f.rel(o,i,c,a)}});return function(){return e.forEach(function(n){return n()})}}(n,r)),!(1&r.t)){r.t|=1,(4&t.t||8&t.t)&&function(n,t){(t=n["s-cr"]=c.createComment(""))["s-cn"]=!0,n.insertBefore(t,n.firstChild)}(n);for(var e=n;e=e.parentNode||e.host;)if(e["s-init"]&&!e["s-lr"]){r.M=e,(e["s-al"]=e["s-al"]||new Set).add(n);break}t.U&&Object.entries(t.U).forEach(function(t){var r=t[0];if(31&t[1][0]&&n.hasOwnProperty(r)){var e=n[r];delete n[r],n[r]=e}}),yn(n,r,t)}$n(r.u)}}(this,u)},r.prototype.disconnectedCallback=function(){!function(n){if(0==(1&f.t)){var t=h(n);t.T&&(t.T(),t.T=void 0),m&&m.removeHost(n),ln(t.u,"disconnectedCallback")}}(this)},r.prototype["s-init"]=function(){var n=h(this);n.u&&dn(this,n)},r.prototype["s-hmr"]=function(){},r.prototype.forceUpdate=function(){vn(this,h(this),u,!1)},r.prototype.componentOnReady=function(){return h(this).s},r}(HTMLElement);u.h=t[0],i.includes(o)||l.get(o)||(e.push(o),l.define(o,wn(v,u,1,0)))})}),w.innerHTML=e+"{visibility:hidden}.hydrated{visibility:inherit}",w.setAttribute("data-styles",""),u.insertBefore(w,v?v.nextSibling:u.firstChild)}),e("f",function(n,t,r){var e=pn(n);return{emit:function(n){return e.dispatchEvent(new CustomEvent(t,{bubbles:!!(4&r),composed:!!(2&r),cancelable:!!(1&r),detail:n}))}}}),e("h",function(n){return h(n).o}))}}});
\ No newline at end of file
diff --git a/dist/calcite/p-6baed856.js b/dist/calcite/p-6baed856.js
new file mode 100644
index 00000000000..999f0edc2cd
--- /dev/null
+++ b/dist/calcite/p-6baed856.js
@@ -0,0 +1 @@
+const t=window,e=document,n={t:0,l:"",raf:t=>requestAnimationFrame(t),ael:(t,e,n,l)=>t.addEventListener(e,n,l),rel:(t,e,n,l)=>t.removeEventListener(e,n,l)},l=!!e.documentElement.attachShadow,o=(()=>{let t=!1;try{e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=!0}}))}catch(t){}return t})(),s=(()=>{try{return new CSSStyleSheet,!0}catch(t){}return!1})(),i=new WeakMap,c=t=>i.get(t),r=(t,e)=>i.set(e.o=t,e),a=(t,e)=>e in t,f=t=>console.error(t),u=new Map,$=t.__stencil_cssshim;let p=0,d=!1;const h=[],m=[],w=[],y=t=>e=>{t.push(e),d||(d=!0,n.raf(g))},b=(t,e)=>{let n=0,l=0;for(;n<t.length&&(l=performance.now())<e;)try{t[n++](l)}catch(t){f(t)}n===t.length?t.length=0:0!==n&&t.splice(0,n)},g=()=>{p++,(t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){f(t)}t.length=0})(h);const t=2==(6&n.t)?performance.now()+7*Math.ceil(p*(1/22)):1/0;b(m,t),b(w,t),m.length>0&&(w.push(...m),m.length=0),(d=h.length+m.length+w.length>0)?n.raf(g):p=0},v=y(m),_={},j=t=>null!=t,k=t=>t.toLowerCase(),S=()=>t.CSS&&t.CSS.supports&&t.CSS.supports("color","var(--c)")?Promise.resolve():__sc_import_calcite("./p-229ebf7a.js"),R=async()=>{{const t=Array.from(e.querySelectorAll("script")).find(t=>t.src.includes("/calcite.esm.js")||"calcite"===t.getAttribute("data-namespace")),n=new URL(".",new URL(t.getAttribute("data-resources-url")||t.src,e.baseURI));return O(n.href),window.customElements||await __sc_import_calcite("./p-7eb7509a.js"),n.href}},O=n=>{const l=`__sc_import_${"calcite".replace(/\s|-/g,"_")}`;try{t[l]=new Function("w","return import(w);")}catch(o){const s=new Map;t[l]=(o=>{const i=new URL(o,n).href;let c=s.get(i);if(!c){const n=e.createElement("script");n.type="module",n.src=URL.createObjectURL(new Blob([`import * as m from '${i}'; window.${l}.m = m;`],{type:"application/javascript"})),c=new Promise(e=>{n.onload=(()=>{e(t[l].m),n.remove()})}),s.set(i,c),e.head.appendChild(n)}return c})}},x="http://www.w3.org/1999/xlink",L=new WeakMap,M=t=>"sc-"+t,U=[];function C(t,e){let n,l,o=null,s=!1,i=!1,c=arguments.length;for(;c-- >2;)U.push(arguments[c]);for(;U.length>0;){let e=U.pop();if(e&&void 0!==e.pop)for(c=e.length;c--;)U.push(e[c]);else"boolean"==typeof e&&(e=null),(i="function"!=typeof t)&&(null==e?e="":"number"==typeof e?e=String(e):"string"!=typeof e&&(i=!1)),i&&s?o[o.length-1].s+=e:null===o?o=[i?{t:0,s:e}:e]:o.push(i?{t:0,s:e}:e),s=i}if(null!=e){if(e.className&&(e.class=e.className),"object"==typeof e.class){for(c in e.class)e.class[c]&&U.push(c);e.class=U.join(" "),U.length=0}null!=e.key&&(n=e.key),null!=e.name&&(l=e.name)}if("function"==typeof t)return t(e,o||[],T);const r={i:t,u:o,$:void 0,t:0};return r.p=e,r.s=void 0,r.h=n,r.g=l,r}const E={},T={forEach:(t,e)=>t.map(W).forEach(e),map:(t,e)=>t.map(W).map(e).map(F)},W=t=>({vattrs:t.p,vchildren:t.u,vkey:t.h,vname:t.g,vtag:t.i,vtext:t.s}),F=t=>({t:0,p:t.vattrs,u:t.vchildren,h:t.vkey,g:t.vname,i:t.vtag,s:t.vtext}),P=(t,e,l,o,s,i)=>{if(l!==o)if("class"!==e||s)if("style"===e){for(const e in l)o&&null!=o[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in o)l&&o[e]===l[e]||(e.includes("-")?t.style.setProperty(e,o[e]):t.style[e]=o[e])}else if("key"===e);else if("ref"===e)o&&o(t);else if(e.startsWith("on")&&!a(t,e))e=a(t,k(e))?k(e.substring(2)):k(e[2])+e.substring(3),l&&n.rel(t,e,l,!1),o&&n.ael(t,e,o,!1);else{const n=a(t,e),l=["object","function"].includes(typeof o);if((n||l&&null!==o)&&!s)try{t[e]=null==o&&-1===t.tagName.indexOf("-")?"":o}catch(t){}const c=!(!s||e===(e=e.replace(/^xlink\:?/,"")));null==o||!1===o?c?t.removeAttributeNS(x,k(e)):t.removeAttribute(e):(!n||4&i||s)&&!l&&(o=!0===o?"":o.toString(),c?t.setAttributeNS(x,k(e),o):t.setAttribute(e,o))}else{const e=A(l),n=A(t.className).filter(t=>!e.includes(t));t.className=n.concat(A(o).filter(t=>!n.includes(t))).join(" ")}},A=t=>t?t.split(" "):[],N=(t,e,n,l)=>{const o=11===e.$.nodeType&&e.$.host?e.$.host:e.$,s=t&&t.p||_,i=e.p||_;for(l in s)null==i[l]&&null!=s[l]&&P(o,l,s[l],void 0,n,e.t);for(l in i)P(o,l,s[l],i[l],n,e.t)};let q,B,D,H=!1,z=!1,G=!1,I=!1;const J=(t,n,l,o)=>{const s=n.u[l];let i,c,r,a=0;if(H||(G=!0,"slot"===s.i&&(q&&o.classList.add(q+"-s"),s.t|=s.u?2:1)),j(s.s))s.$=e.createTextNode(s.s);else if(1&s.t)s.$=e.createTextNode("");else{if(i=s.$=I||"svg"===s.i?e.createElementNS("http://www.w3.org/2000/svg",s.i):e.createElement(2&s.t?"slot-fb":s.i),N(null,s,I="svg"===s.i||"foreignObject"!==s.i&&I),j(q)&&i["s-si"]!==q&&i.classList.add(i["s-si"]=q),s.u)for(a=0;a<s.u.length;++a)(c=J(t,s,a,i))&&i.appendChild(c);"svg"===s.i&&(I=!1)}return s.$["s-hn"]=D,3&s.t&&(s.$["s-sr"]=!0,s.$["s-cr"]=B,s.$["s-sn"]=s.g||"",(r=t&&t.u&&t.u[l])&&r.i===s.i&&t.$&&K(t.$,!1)),s.$},K=(t,e)=>{n.t|=1;const l=t.childNodes;for(let t=l.length-1;t>=0;t--){const n=l[t];n["s-hn"]!==D&&n["s-ol"]&&(Z(n).insertBefore(n,Y(n)),n["s-ol"].remove(),n["s-ol"]=void 0,G=!0),e&&K(n,e)}n.t&=-2},Q=(t,e,n,l,o,s)=>{let i,c=t["s-cr"]&&t["s-cr"].parentNode||t;for(c.shadowRoot&&k(c.tagName)===D&&(c=c.shadowRoot);o<=s;++o)l[o]&&(i=J(null,n,o,t))&&(l[o].$=i,c.insertBefore(i,Y(e)))},V=(t,e,n,l)=>{for(;e<=n;++e)j(t[e])&&(l=t[e].$,ot(t[e],!0),z=!0,l["s-ol"]?l["s-ol"].remove():K(l,!0),l.remove())},X=(t,e)=>t.i===e.i&&("slot"===t.i?t.g===e.g:t.h===e.h),Y=t=>t&&t["s-ol"]?t["s-ol"]:t,Z=t=>(t["s-ol"]?t["s-ol"]:t).parentNode,tt=(t,e)=>{const n=e.$=t.$,l=t.u,o=e.u;let s;I=n&&j(n.parentNode)&&void 0!==n.ownerSVGElement,I="svg"===e.i||"foreignObject"!==e.i&&I,j(e.s)?(s=n["s-cr"])?s.parentNode.textContent=e.s:t.s!==e.s&&(n.textContent=e.s):("slot"===e.i||N(t,e,I),j(l)&&j(o)?((t,e,n,l)=>{let o,s,i=0,c=0,r=0,a=0,f=e.length-1,u=e[0],$=e[f],p=l.length-1,d=l[0],h=l[p];for(;i<=f&&c<=p;)if(null==u)u=e[++i];else if(null==$)$=e[--f];else if(null==d)d=l[++c];else if(null==h)h=l[--p];else if(X(u,d))tt(u,d),u=e[++i],d=l[++c];else if(X($,h))tt($,h),$=e[--f],h=l[--p];else if(X(u,h))"slot"!==u.i&&"slot"!==h.i||K(u.$.parentNode,!1),tt(u,h),t.insertBefore(u.$,$.$.nextSibling),u=e[++i],h=l[--p];else if(X($,d))"slot"!==u.i&&"slot"!==h.i||K($.$.parentNode,!1),tt($,d),t.insertBefore($.$,u.$),$=e[--f],d=l[++c];else{for(r=-1,a=i;a<=f;++a)if(e[a]&&j(e[a].h)&&e[a].h===d.h){r=a;break}r>=0?((s=e[r]).i!==d.i?o=J(e&&e[c],n,r,t):(tt(s,d),e[r]=void 0,o=s.$),d=l[++c]):(o=J(e&&e[c],n,c,t),d=l[++c]),o&&Z(u.$).insertBefore(o,Y(u.$))}i>f?Q(t,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&V(e,i,f)})(n,l,e,o):j(o)?(j(t.s)&&(n.textContent=""),Q(n,null,e,o,0,o.length-1)):j(l)&&V(l,0,l.length-1)),I&&"svg"===e.i&&(I=!1)},et=(t,e,n,l,o,s,i,c)=>{for(l=0,o=(n=t.childNodes).length;l<o;l++)if(1===(e=n[l]).nodeType){if(e["s-sr"])for(i=e["s-sn"],e.hidden=!1,s=0;s<o;s++)if(n[s]["s-hn"]!==e["s-hn"])if(c=n[s].nodeType,""!==i){if(1===c&&i===n[s].getAttribute("slot")){e.hidden=!0;break}}else if(1===c||3===c&&""!==n[s].textContent.trim()){e.hidden=!0;break}et(e)}},nt=[],lt=t=>{let e,n,l,o,s=t.childNodes,i=s.length,c=0,r=0,a=0;for(i=s.length;c<i;c++){if((e=s[c])["s-sr"]&&(n=e["s-cr"]))for(o=e["s-sn"],r=(l=n.parentNode.childNodes).length-1;r>=0;r--)(n=l[r])["s-cn"]||n["s-nr"]||n["s-hn"]===e["s-hn"]||((3===(a=n.nodeType)||8===a)&&""===o||1===a&&null===n.getAttribute("slot")&&""===o||1===a&&n.getAttribute("slot")===o)&&(nt.some(t=>t.nodeToRelocate===n)||(z=!0,n["s-sn"]=o,nt.push({slotRefNode:e,nodeToRelocate:n})));1===e.nodeType&&lt(e)}},ot=(t,e)=>{t&&(t.p&&t.p.ref&&t.p.ref(e?null:t.$),t.u&&t.u.forEach(t=>{ot(t,e)}))},st=async(t,e)=>{if(t&&t[e])try{await t[e]()}catch(t){f(t)}},it=async(t,e,n,l)=>{e.t|=16;const o=e.o;l?await st(o,"componentWillLoad"):await st(o,"componentWillUpdate"),v(()=>ct(t,e,n,l,o))},ct=(t,o,s,i,c)=>{o.t&=-17,t["s-lr"]=!1,i&&((t,n)=>{const o=((t,l,o,s)=>{let i=M(n.v),c=u.get(i);if(t=11===t.nodeType?t:e,c)if("string"==typeof c){let n,l=L.get(t=t.head||t);if(l||L.set(t,l=new Set),!l.has(i)){if($){const t=(n=$.createHostStyle(s,i,c))["s-sc"];t&&(i=t,l=null)}else(n=e.createElement("style")).innerHTML=c;t.appendChild(n),l&&l.add(i)}}else t.adoptedStyleSheets.includes(c)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,c]);return i})(l&&t.shadowRoot?t.shadowRoot:t.getRootNode(),0,0,t);10&n.t&&(t["s-sc"]=o,t.classList.add(o+"-h"))})(t,s),o.t|=4;try{((t,o,s,i)=>{const c=o._||{t:0};if(D=k(t.tagName),(t=>t&&t.i===E)(i)?i.i=null:i=C(null,null,i),s.j&&(i.p=i.p||{},s.j.forEach(([e,n])=>i.p[n]=t[e])),i.t|=4,o._=i,i.$=c.$=t.shadowRoot||t,q=t["s-sc"],B=t["s-cr"],H=l&&0!=(1&s.t),G=z=!1,tt(c,i),G){lt(i.$);for(let t=0;t<nt.length;t++){const n=nt[t];if(!n.nodeToRelocate["s-ol"]){const t=e.createTextNode("");t["s-nr"]=n.nodeToRelocate,n.nodeToRelocate.parentNode.insertBefore(n.nodeToRelocate["s-ol"]=t,n.nodeToRelocate)}}n.t|=1;for(let t=0;t<nt.length;t++){const e=nt[t],n=e.slotRefNode.parentNode;let l=e.slotRefNode.nextSibling,o=e.nodeToRelocate["s-ol"];for(;o=o.previousSibling;){let t=o["s-nr"];if(t&&t&&t["s-sn"]===e.nodeToRelocate["s-sn"]&&n===t.parentNode&&(t=t.nextSibling)&&t&&!t["s-nr"]){l=t;break}}(!l&&n!==e.nodeToRelocate.parentNode||e.nodeToRelocate.nextSibling!==l)&&e.nodeToRelocate!==l&&n.insertBefore(e.nodeToRelocate,l)}n.t&=-2}z&&et(i.$),nt.length=0})(t,o,s,c.render())}catch(t){f(t)}o.t&=-5,$&&$.updateHost(t),t["s-lr"]=!0,o.t|=2,t["s-rc"].length>0&&(t["s-rc"].forEach(t=>t()),t["s-rc"].length=0),rt(t,o)},rt=(t,l,o)=>{if(!t["s-al"]){const s=l.o,i=l.k;512&l.t||(l.t|=512,t.classList.add("hydrated"),st(s,"componentDidLoad"),l.S(t),i||(e.documentElement.classList.add("hydrated"),setTimeout(()=>n.t|=2,999))),i&&((o=i["s-al"])&&(o.delete(t),0===o.size&&(i["s-al"]=void 0,i["s-init"]())),l.k=void 0)}},at=(t,e,n,l)=>{if(e.R){t.watchers&&(e.O=t.watchers);const o=Object.entries(e.R);if(o.forEach(([o,[s]])=>{31&s||l&&32&s?Object.defineProperty(t.prototype,o,{get(){return((t,e)=>c(t).L.get(e))(this,o)},set(t){((t,e,n,l)=>{const o=c(this),s=o.M,i=o.L.get(e),r=o.t;if(!((n=((t,e)=>null!=t&&"object"!=typeof t&&"function"!=typeof t?4&e?"false"!==t&&(""===t||!!t):2&e?parseFloat(t):1&e?String(t):t:t)(n,l.R[e][0]))===i||8&r&&void 0!==i)&&(o.L.set(e,n),o.o)){if(l.O&&1==(9&r)){const t=l.O[e];t&&t.forEach(t=>{try{o.o[t].call(o.o,n,i,e)}catch(t){f(t)}})}2==(22&r)&&it(s,o,l,!1)}})(0,o,t,e)},configurable:!0,enumerable:!0}):n&&64&s&&Object.defineProperty(t.prototype,o,{value(...t){const e=c(this);return e.U.then(()=>e.o[o](...t))}})}),n){const n=new Map;t.prototype.attributeChangedCallback=function(t,e,l){const o=n.get(t);this[o]=(null!==l||"boolean"!=typeof this[o])&&l},t.observedAttributes=o.filter(([t,e])=>15&e[0]).map(([t,l])=>{const o=l[1]||t;return n.set(o,t),512&l[0]&&e.j.push([t,o]),o})}}return t},ft=async(t,e,n,l,o)=>{if(0==(256&e.t)){e.t|=256,(o=await(t=>__sc_import_calcite(`./${t.C}.entry.js`).then(e=>e[t.v.replace(/-/g,"_")],f))(n)).isProxied||(n.O=o.watchers,at(o,n,0,1),o.isProxied=!0),e.t|=8;try{new o(e)}catch(t){f(t)}if(e.t&=-9,ut(e.o),!o.isStyleRegistered&&o.style){let t=o.style,e=M(n.v);8&n.t&&(t=await __sc_import_calcite("./p-549b16dd.js").then(n=>n.scopeCss(t,e,!1))),((t,e)=>{let n=u.get(t);s?(n=n||new CSSStyleSheet).replace(e):n=e,u.set(t,n)})(e,t),o.isStyleRegistered=!0}}const i=e.k;i&&!i["s-lr"]&&i["s-rc"]?i["s-rc"].push(()=>ft(t,e,n)):it(t,e,n,!0)},ut=t=>{st(t,"connectedCallback")},$t=(s,r={})=>{const a=[],u=r.exclude||[],p=e.head,d=t.customElements,h=p.querySelector("meta[charset]"),m=e.createElement("style");Object.assign(n,r),n.l=new URL(r.resourcesUrl||"/",e.baseURI).href,r.syncQueue&&(n.t|=4),s.forEach(t=>t[1].forEach(s=>{const r={t:s[0],v:s[1],R:s[2],T:s[3],j:[],O:{}};!l&&1&r.t&&(r.t|=8);const p=r.v;r.C=t[0],u.includes(p)||d.get(p)||(a.push(p),d.define(p,at(class extends HTMLElement{constructor(t){super(t),t=this,this["s-lr"]=!1,this["s-rc"]=[],(t=>{{const e={t:0,M:t};e.U=new Promise(t=>e.S=t),e.L=new Map,i.set(t,e)}})(t),1&r.t&&(l?t.attachShadow({mode:"open"}):"shadowRoot"in t||(t.shadowRoot=t))}connectedCallback(){((t,l)=>{if(0==(1&n.t)){const s=c(t);if(l.T&&(s.W=((t,e)=>{const s=l.T.map(([l,s,i])=>{const c=((t,e)=>16&e?t.parentElement:t)(t,l),r=((t,e)=>n=>t.o?t.o[e](n):t.U.then(()=>t.o[e](n)).catch(f))(e,i),a=(t=>o?{passive:0!=(1&t),capture:0!=(2&t)}:0!=(2&t))(l);return n.ael(c,s,r,a),()=>n.rel(c,s,r,a)});return()=>s.forEach(t=>t())})(t,s)),!(1&s.t)){let n;s.t|=1,n||(4&l.t||8&l.t)&&((t,n)=>{let l;l="",(n=t["s-cr"]=e.createComment(""))["s-cn"]=!0,t.insertBefore(n,t.firstChild)})(t);{let e=t;for(;e=e.parentNode||e.host;)if(e["s-init"]&&!e["s-lr"]){s.k=e,(e["s-al"]=e["s-al"]||new Set).add(t);break}}l.R&&Object.entries(l.R).forEach(([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}}),ft(t,s,l)}ut(s.o)}})(this,r)}disconnectedCallback(){(t=>{if(0==(1&n.t)){const e=c(t);e.W&&(e.W(),e.W=void 0),$&&$.removeHost(t),st(e.o,"disconnectedCallback")}})(this)}"s-init"(){const t=c(this);t.o&&rt(this,t)}"s-hmr"(t){}forceUpdate(){it(this,c(this),r,!1)}componentOnReady(){return c(this).U}},r,1,0)))})),m.innerHTML=a+"{visibility:hidden}.hydrated{visibility:inherit}",m.setAttribute("data-styles",""),p.insertBefore(m,h?h.nextSibling:p.firstChild)},pt=(t,e,n)=>{const l=dt(t);return{emit:t=>l.dispatchEvent(new CustomEvent(e,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:t}))}},dt=t=>c(t).M;export{R as a,$t as b,S as c,C as d,r as e,pt as f,E as g,dt as h};
\ No newline at end of file
diff --git a/dist/calcite/p-7889326c.system.js b/dist/calcite/p-7889326c.system.js
new file mode 100644
index 00000000000..c9f0aa7268b
--- /dev/null
+++ b/dist/calcite/p-7889326c.system.js
@@ -0,0 +1 @@
+System.register([],function(){"use strict";return{execute:function(){if(function(){var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return!(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var c=a.localName;if("link"===c&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===c){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n)}r=r.firstChild?r.firstChild:o(t,r)}}function r(t,e,n){t[e]=n}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1}function c(t,e){t.b=!0,t.c.push(e)}function l(t,e){t.b&&i(e,function(e){return s(t,e)})}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e)}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o)}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o)}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r})}})}else a.push(e)},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e])}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop()}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null)}n(e)&&t.connectedCallback(e)}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}))}function m(t){t.b&&t.b.disconnect()}function y(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a)})}function w(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0)}function b(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t)}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t)},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t)},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i)},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o])},b.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),c=i("disconnectedCallback"),l=i("adoptedCallback"),s=i("attributeChangedCallback"),u=n.observedAttributes||[]}catch(t){return}finally{this.c=!1}(function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n)})(this.a,t,n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:c,adoptedCallback:l,attributeChangedCallback:s,observedAttributes:u,constructionStack:[]}),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e)}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&w(i)}}}(o)}))},b.prototype.h=function(t){p(this.a,t)},b.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},b.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new y,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&w(n),n.c)},b.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})}},window.CustomElementRegistry=b,b.prototype.define=b.prototype.l,b.prototype.upgrade=b.prototype.h,b.prototype.get=b.prototype.get,b.prototype.whenDefined=b.prototype.m,b.prototype.polyfillWrapFlushCallback=b.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,M=window.Node.prototype.replaceChild,j=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),L=window.Element.prototype.attachShadow,x=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),H=window.Element.prototype.getAttribute,O=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,q=window.Element.prototype.append,U=window.Element.prototype.before,V=window.Element.prototype.after,X=window.Element.prototype.replaceWith,$=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],c=0;c<i.length;c++){var l=i[c];if(l instanceof Element&&n(l)&&a.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)r.push(l);else r.push(l)}for(e.apply(this,i),i=0;i<a.length;i++)h(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&u(t,a)}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append))}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):l(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C})}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var c=0;c<a;c++)i[c]=r[c]}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)h(e,i[t])}}})}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)u(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&h(e,t),n(this)&&u(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)u(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&h(e,t),n(this)&&u(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):l(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&h(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=M.call(this,t,o),n(this))for(h(e,o),o=0;o<i.length;o++)u(e,i[o]);return t}i=n(t);var r=M.call(this,t,o),a=n(this);return a&&h(e,o),i&&h(e,t),a&&u(e,t),r}),j&&j.get?t(Node.prototype,j):c(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t))}})})}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t)})),e.set.call(this,t),r)for(var c=0;c<r.length;c++){var s=r[c];1===s.__CE_state&&a.disconnectedCallback(s)}return this.ownerDocument.__CE_hasRegistry?p(a,this):l(a,this),t}})}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&h(a,o),n(t)&&u(a,o),t})}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e])}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this)}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i)}})}var a=nt;L&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=L.call(this,t)}),x&&x.get?t(Element.prototype,x):J&&J.get?t(HTMLElement.prototype,J):c(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0])}})}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return O.call(this,t,e);var n=H.call(this,t);O.call(this,t,e),e=H.call(this,t),a.attributeChangedCallback(this,t,n,e,null)}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t)}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=H.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null)}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t)}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:q}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],c=0;c<i.length;c++){var l=i[c];if(l instanceof Element&&n(l)&&a.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)r.push(l);else r.push(l)}for(e.apply(this,i),i=0;i<a.length;i++)h(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&u(t,a)}}var o=Element.prototype;void 0!==U&&(o.before=e(U)),void 0!==U&&(o.after=e(V)),void 0!==X&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var c=o[a];if(c instanceof Element&&n(c)&&r.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)i.push(c);else i.push(c)}for(a=n(this),X.apply(this,o),o=0;o<r.length;o++)h(t,r[o]);if(a)for(h(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&u(t,r)}),void 0!==$&&r(o,"remove",function(){var e=n(this);$.call(this),e&&h(t,this)})}(a)}(),document.__CE_hasRegistry=!0;var ot=new b(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot})}}.call(self),"function"!=typeof window.CustomEvent){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}t.prototype=window.Event.prototype,window.CustomEvent=t}var e;"function"!=typeof(e=window.Element.prototype).matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(t){t=(this.document||this.ownerDocument).querySelectorAll(t);for(var e=0;t[e]&&t[e]!==this;)++e;return!!t[e]}),"function"!=typeof e.closest&&(e.closest=function(t){for(var e=this;e&&1===e.nodeType;){if(e.matches(t))return e;e=e.parentNode}return null}),function(t){function e(t){return t.parentNode?e(t.parentNode):t}"function"!=typeof t.getRootNode&&(t.getRootNode=function(t){return t&&t.composed?function t(n){return 11===(n=e(n)).nodeType?t(n.host):n}(this):e(this)})}(Element.prototype),[Element.prototype,CharacterData.prototype,DocumentType.prototype].forEach(function(t){t.hasOwnProperty("remove")||Object.defineProperty(t,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this)}})})}}});
\ No newline at end of file
diff --git a/dist/calcite/p-7eb7509a.js b/dist/calcite/p-7eb7509a.js
new file mode 100644
index 00000000000..e2d080c45fa
--- /dev/null
+++ b/dist/calcite/p-7eb7509a.js
@@ -0,0 +1 @@
+if(function(){var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return!(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var c=a.localName;if("link"===c&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===c){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n)}r=r.firstChild?r.firstChild:o(t,r)}}function r(t,e,n){t[e]=n}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1}function c(t,e){t.b=!0,t.c.push(e)}function l(t,e){t.b&&i(e,function(e){return s(t,e)})}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e)}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o)}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o)}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r})}})}else a.push(e)},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e])}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop()}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null)}n(e)&&t.connectedCallback(e)}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}))}function m(t){t.b&&t.b.disconnect()}function y(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a)})}function w(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0)}function b(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t)}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t)},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t)},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i)},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o])},b.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),c=i("disconnectedCallback"),l=i("adoptedCallback"),s=i("attributeChangedCallback"),u=n.observedAttributes||[]}catch(t){return}finally{this.c=!1}(function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n)})(this.a,t,n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:c,adoptedCallback:l,attributeChangedCallback:s,observedAttributes:u,constructionStack:[]}),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e)}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&w(i)}}}(o)}))},b.prototype.h=function(t){p(this.a,t)},b.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},b.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new y,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&w(n),n.c)},b.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})}},window.CustomElementRegistry=b,b.prototype.define=b.prototype.l,b.prototype.upgrade=b.prototype.h,b.prototype.get=b.prototype.get,b.prototype.whenDefined=b.prototype.m,b.prototype.polyfillWrapFlushCallback=b.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,M=window.Node.prototype.replaceChild,j=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),L=window.Element.prototype.attachShadow,H=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),O=window.Element.prototype.getAttribute,x=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,q=window.Element.prototype.append,U=window.Element.prototype.before,V=window.Element.prototype.after,X=window.Element.prototype.replaceWith,$=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],c=0;c<i.length;c++){var l=i[c];if(l instanceof Element&&n(l)&&a.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)r.push(l);else r.push(l)}for(e.apply(this,i),i=0;i<a.length;i++)h(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&u(t,a)}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append))}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):l(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C})}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var c=0;c<a;c++)i[c]=r[c]}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)h(e,i[t])}}})}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)u(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&h(e,t),n(this)&&u(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)u(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&h(e,t),n(this)&&u(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):l(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&h(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=M.call(this,t,o),n(this))for(h(e,o),o=0;o<i.length;o++)u(e,i[o]);return t}i=n(t);var r=M.call(this,t,o),a=n(this);return a&&h(e,o),i&&h(e,t),a&&u(e,t),r}),j&&j.get?t(Node.prototype,j):c(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t))}})})}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t)})),e.set.call(this,t),r)for(var c=0;c<r.length;c++){var s=r[c];1===s.__CE_state&&a.disconnectedCallback(s)}return this.ownerDocument.__CE_hasRegistry?p(a,this):l(a,this),t}})}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&h(a,o),n(t)&&u(a,o),t})}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e])}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this)}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i)}})}var a=nt;L&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=L.call(this,t)}),H&&H.get?t(Element.prototype,H):J&&J.get?t(HTMLElement.prototype,J):c(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0])}})}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return x.call(this,t,e);var n=O.call(this,t);x.call(this,t,e),e=O.call(this,t),a.attributeChangedCallback(this,t,n,e,null)}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t)}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=O.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null)}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t)}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:q}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],c=0;c<i.length;c++){var l=i[c];if(l instanceof Element&&n(l)&&a.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)r.push(l);else r.push(l)}for(e.apply(this,i),i=0;i<a.length;i++)h(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&u(t,a)}}var o=Element.prototype;void 0!==U&&(o.before=e(U)),void 0!==U&&(o.after=e(V)),void 0!==X&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var c=o[a];if(c instanceof Element&&n(c)&&r.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)i.push(c);else i.push(c)}for(a=n(this),X.apply(this,o),o=0;o<r.length;o++)h(t,r[o]);if(a)for(h(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&u(t,r)}),void 0!==$&&r(o,"remove",function(){var e=n(this);$.call(this),e&&h(t,this)})}(a)}(),document.__CE_hasRegistry=!0;var ot=new b(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot})}}.call(self),"function"!=typeof window.CustomEvent){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}t.prototype=window.Event.prototype,window.CustomEvent=t}var e;"function"!=typeof(e=window.Element.prototype).matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(t){t=(this.document||this.ownerDocument).querySelectorAll(t);for(var e=0;t[e]&&t[e]!==this;)++e;return!!t[e]}),"function"!=typeof e.closest&&(e.closest=function(t){for(var e=this;e&&1===e.nodeType;){if(e.matches(t))return e;e=e.parentNode}return null}),function(t){function e(t){return t.parentNode?e(t.parentNode):t}"function"!=typeof t.getRootNode&&(t.getRootNode=function(t){return t&&t.composed?function t(n){return 11===(n=e(n)).nodeType?t(n.host):n}(this):e(this)})}(Element.prototype),[Element.prototype,CharacterData.prototype,DocumentType.prototype].forEach(function(t){t.hasOwnProperty("remove")||Object.defineProperty(t,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this)}})});
\ No newline at end of file
diff --git a/dist/calcite/p-7fxfqsv7.entry.js b/dist/calcite/p-7fxfqsv7.entry.js
new file mode 100644
index 00000000000..0dc5c585586
--- /dev/null
+++ b/dist/calcite/p-7fxfqsv7.entry.js
@@ -0,0 +1 @@
+import{e as s,h as e}from"./p-6baed856.js";class t{constructor(e){s(this,e),this.context={},this.renderer=(()=>null)}connectedCallback(){null!=this.subscribe&&(this.unsubscribe=this.subscribe(this.el,"context"))}disconnectedCallback(){null!=this.unsubscribe&&this.unsubscribe()}render(){return this.renderer(Object.assign({},this.context))}get el(){return e(this)}}export{t as context_consumer};
\ No newline at end of file
diff --git a/dist/calcite/p-df79bf9d.system.js b/dist/calcite/p-df79bf9d.system.js
new file mode 100644
index 00000000000..4a67e39dc76
--- /dev/null
+++ b/dist/calcite/p-df79bf9d.system.js
@@ -0,0 +1 @@
+System.register(["./p-5b1e6c1f.system.js"],function(){"use strict";var e,t;return{setters:[function(a){e=a.a,t=a.b}],execute:function(){e().then(function(e){return t([["p-258l18yq.system",[[1,"calcite-alert",{currentAlert:[1,"current-alert"],dismiss:[4],icon:[4],id:[1],queueLength:[2,"queue-length"],color:[513],theme:[513],duration:[513],isActive:[32],close:[64]}],[1,"calcite-alerts",{id:[1],currentAlert:[32],isActive:[32],queue:[32],open:[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{isActive:[4,"is-active"],text:[1]}],[1,"calcite-modal",{first:[1],middle:[1],last:[1]}],[1,"calcite-tab",{id:[1537],tab:[1537],isActive:[1540,"is-active"],labeledBy:[32],getTabIndex:[64],registerLabeledBy:[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{id:[1537],selectedTab:[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{id:[1537],tab:[1537],isActive:[1540,"is-active"],controls:[32],getTabIndex:[64],setControledBy:[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{theme:[513],tabs:[32],tabTitles:[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["p-s1sy5kvf.system",[[0,"context-consumer",{context:[16],renderer:[16],subscribe:[16],unsubscribe:[32]}]]]],{resourcesUrl:e})})}}});
\ No newline at end of file
diff --git a/dist/calcite/p-f57d4852.system.js b/dist/calcite/p-f57d4852.system.js
new file mode 100644
index 00000000000..f9e5d5b1961
--- /dev/null
+++ b/dist/calcite/p-f57d4852.system.js
@@ -0,0 +1 @@
+System.register([],function(){"use strict";return{execute:function(){var t=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};var e={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},r="{",n="}",s={comments:/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},i="--",o="@media",a="@";function c(t,e,r){t.lastIndex=0;var n=e.substring(r).match(t);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var u=/\bvar\(/,l=/\B--[\w-]+\s*:/,p=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//gim,f=/^[\t ]+\n/gm;function h(t,e,r){var n=function(t,e){var r=c(u,t,e);if(!r)return null;var n=function(t){for(var e=0,n=r.start;n<t.length;n++){var s=t[n];if("("===s)e++;else if(")"===s&&--e<=0)return n+1}return n}(t),s=t.substring(r.end,n-1).split(","),i=s[0],o=s.slice(1);return{start:r.start,end:n,propName:i.trim(),fallback:o.length>0?o.join(",").trim():void 0}}(t,r);if(!n)return e.push(t.substring(r,t.length)),t.length;var s=n.propName,i=null!=n.fallback?g(n.fallback):void 0;return e.push(t.substring(r,n.start),function(t){return function(e,r,n){return t[s]?t[s]:n?v(n,t):""}(0,0,i)}),n.end}function v(t,e){for(var r="",n=0;n<t.length;n++){var s=t[n];r+="string"==typeof s?s:s(e)}return r}function m(t,e){for(var r=!1,n=!1,s=e;s<t.length;s++){var i=t[s];if(r)n&&'"'===i&&(r=!1),n||"'"!==i||(r=!1);else if('"'===i)r=!0,n=!0;else if("'"===i)r=!0,n=!1;else{if(";"===i)return s+1;if("}"===i)return s}}return s}function g(t){var e=0;t=function(t){for(var e="",r=0;;){var n=c(l,t,r),s=n?n.start:t.length;if(e+=t.substring(r,s),!n)break;r=m(t,s)}return e}(t=t.replace(p,"")).replace(f,"");for(var r=[];e<t.length;)e=h(t,r,e);return r}function d(t){var e={};t.forEach(function(t){t.declarations.forEach(function(t){e[t.prop]=t.value})});for(var r={},n=Object.entries(e),s=function(){var t=!1;if(n.forEach(function(e){var n=e[0],s=v(e[1],r);s!==r[n]&&(r[n]=s,t=!0)}),!t)return"break"},i=0;i<10&&"break"!==s();i++);return r}function y(t,r){if(void 0===r&&(r=0),!t.rules)return[];var n=[];return t.rules.filter(function(t){return t.type===e.STYLE_RULE}).forEach(function(t){var e=function(t){for(var e,r=[];e=E.exec(t.trim());){var n=b(e[2]),s=n.value,i=n.important;r.push({prop:e[1].trim(),value:g(s),important:i})}return r}(t.cssText);e.length>0&&t.parsedSelector.split(",").forEach(function(t){t=t.trim(),n.push({selector:t,declarations:e,specificity:1,nu:r})}),r++}),n}var S="!important",E=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function b(t){var e=(t=t.replace(/\s+/gim," ").trim()).endsWith(S);return e&&(t=t.substr(0,t.length-S.length).trim()),{value:t,important:e}}function M(t){var e=[];return t.forEach(function(t){e.push.apply(e,t.selectors)}),e}function L(c){var u,l=function t(r,n){var c=n.substring(r.start,r.end-1);if(r.parsedCssText=r.cssText=c.trim(),r.parent){c=(c=(c=(c=n.substring(r.previous?r.previous.end:r.parent.start,r.start-1)).replace(/\\([0-9a-f]{1,6})\s/gi,function(){for(var t=arguments[1],e=6-t.length;e--;)t="0"+t;return"\\"+t})).replace(s.multipleSpaces," ")).substring(c.lastIndexOf(";")+1);var u=r.parsedSelector=r.selector=c.trim();r.atRule=0===u.indexOf(a),r.atRule?0===u.indexOf(o)?r.type=e.MEDIA_RULE:u.match(s.keyframesRule)&&(r.type=e.KEYFRAMES_RULE,r.keyframesName=r.selector.split(s.multipleSpaces).pop()):r.type=0===u.indexOf(i)?e.MIXIN_RULE:e.STYLE_RULE}var l=r.rules;if(l)for(var p=0,f=l.length,h=void 0;p<f&&(h=l[p]);p++)t(h,n);return r}(function(e){var s=new t;s.start=0,s.end=e.length;for(var i=s,o=0,a=e.length;o<a;o++)if(e[o]===r){i.rules||(i.rules=[]);var c=i,u=c.rules[c.rules.length-1]||null;(i=new t).start=o+1,i.parent=c,i.previous=u,c.rules.push(i)}else e[o]===n&&(i.end=o+1,i=i.parent||s);return s}(u=(u=c).replace(s.comments,"").replace(s.port,"")),u),p=g(c);return{original:c,template:p,selectors:y(l),isDynamic:p.length>1}}function x(t,e){var r=L(e.innerHTML);r.styleEl=e,t.push(r)}function R(t,e,r){var n;return n="."+r,t.replace(new RegExp("\\."+e,"g"),n)}function T(t,e,r){var n=r.href;return fetch(n).then(function(t){return t.text()}).then(function(s){if(((o=s).indexOf("var(")>-1||w.test(o))&&r.parentNode){(function(t){return I.lastIndex=0,I.test(t)})(s)&&(s=function(t){var e=n.replace(/[^\/]*$/,"");return t.replace(I,function(t,r){return t.replace(r,e+r)})}(s));var i=t.createElement("style");i.innerHTML=s,x(e,i),r.parentNode.insertBefore(i,r),r.remove()}var o}).catch(function(t){console.error(t)})}var w=/[\s;{]--[-a-zA-Z0-9]+\s*:/m,I=/url[\s]*\([\s]*['"]?(?![http|\/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim,k=function(){function t(t,e){this.win=t,this.doc=e,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map}return t.prototype.initShim=function(){var t=this;return new Promise(function(e){t.win.requestAnimationFrame(function(){var r,n;(r=t.doc,n=t.globalScopes,function(t,e){for(var r=[],n=t.querySelectorAll('link[rel="stylesheet"][href]'),s=0;s<n.length;s++)r.push(T(t,e,n[s]));return Promise.all(r)}(r,n).then(function(){!function(t,e){for(var r=t.querySelectorAll("style"),n=0;n<r.length;n++)x(e,r[n])}(r,n)})).then(function(){return e()})})})},t.prototype.addLink=function(t){var e=this;return T(this.doc,this.globalScopes,t).then(function(){e.updateGlobal()})},t.prototype.addGlobalStyle=function(t){x(this.globalScopes,t),this.updateGlobal()},t.prototype.createHostStyle=function(t,e,r){if(this.hostScopeMap.has(t))throw new Error("host style already created");var n=this.registerHostTemplate(r,e),s=!(!n.isDynamic||!n.cssScopeId),i=s||!n.styleEl,o=this.doc.createElement("style");return i?s?(o["s-sc"]=e=n.cssScopeId+"-"+this.count,o.innerHTML="/*needs update*/",this.hostStyleMap.set(t,o),this.hostScopeMap.set(t,function(t,e){var r=t.template.map(function(r){return"string"==typeof r?R(r,t.cssScopeId,e):r}),n=t.selectors.map(function(r){return Object.assign({},r,{selector:R(r.selector,t.cssScopeId,e)})});return Object.assign({},t,{template:r,selectors:n,cssScopeId:e})}(n,e)),this.count++):(n.styleEl=o,n.isDynamic||(o.innerHTML=v(n.template,{})),this.globalScopes.push(n),this.updateGlobal(),this.hostScopeMap.set(t,n)):o.innerHTML=r,o},t.prototype.removeHost=function(t){var e=this.hostStyleMap.get(t);e&&e.remove(),this.hostStyleMap.delete(t),this.hostScopeMap.delete(t)},t.prototype.updateHost=function(t){var e=this.hostScopeMap.get(t);if(e&&e.isDynamic&&e.cssScopeId){var r=this.hostStyleMap.get(t);if(r){var n=d(function(t,e,r){var n;return(n=M(r.concat(function(t,e){for(var r=[];e;){var n=t.get(e);n&&r.push(n),e=e.parentElement}return r}(e,t))).filter(function(e){return function(e,r){return t.matches(r)}(0,e.selector)})).sort(function(t,e){return t.specificity===e.specificity?t.nu-e.nu:t.specificity-e.specificity}),n}(t,this.hostScopeMap,this.globalScopes));r.innerHTML=v(e.template,n)}}},t.prototype.updateGlobal=function(){var t,e;e=d(M(t=this.globalScopes)),t.forEach(function(t){t.isDynamic&&(t.styleEl.innerHTML=v(t.template,e))})},t.prototype.registerHostTemplate=function(t,e){var r=this.scopesMap.get(e);return r||((r=L(t)).cssScopeId=e,this.scopesMap.set(e,r)),r},t}(),_=window;_.__stencil_cssshim||_.CSS&&_.CSS.supports&&_.CSS.supports("color","var(--c)")||(_.__stencil_cssshim=new k(_,document))}}});
\ No newline at end of file
diff --git a/dist/calcite/p-s1sy5kvf.system.entry.js b/dist/calcite/p-s1sy5kvf.system.entry.js
new file mode 100644
index 00000000000..1cd889cdd9c
--- /dev/null
+++ b/dist/calcite/p-s1sy5kvf.system.entry.js
@@ -0,0 +1 @@
+System.register(["./p-5b1e6c1f.system.js"],function(t){"use strict";var e,n;return{setters:[function(t){e=t.e,n=t.h}],execute:function(){var r=function(){function t(t){e(this,t),this.context={},this.renderer=function(){return null}}return t.prototype.connectedCallback=function(){null!=this.subscribe&&(this.unsubscribe=this.subscribe(this.el,"context"))},t.prototype.disconnectedCallback=function(){null!=this.unsubscribe&&this.unsubscribe()},t.prototype.render=function(){return this.renderer(Object.assign({},this.context))},Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:!0,configurable:!0}),t}();t("context_consumer",r)}}});
\ No newline at end of file
diff --git a/dist/calcite/p-xwf9iwah.entry.js b/dist/calcite/p-xwf9iwah.entry.js
new file mode 100644
index 00000000000..f28f41e67b9
--- /dev/null
+++ b/dist/calcite/p-xwf9iwah.entry.js
@@ -0,0 +1 @@
+import{d as t,e,f as i,g as s,h as a}from"./p-6baed856.js";const l="M23 11.5A11.5 11.5 0 1 1 11.5 0 11.5 11.5 0 0 1 23 11.5zm-5.5-6.018l-8.5 8.5-3.5-3.5-2 2L9.018 18l.018-.018L11.018 16l8.5-8.5z",r="M22.3 19.795l-9-17.901a1.5 1.5 0 0 0-2.597 0L1.7 19.795a1.502 1.502 0 0 0 0 1.502A1.456 1.456 0 0 0 2.998 22H21a1.458 1.458 0 0 0 1.299-.703 1.506 1.506 0 0 0 .001-1.502zM13 19h-2v-2h2zm0-3h-2V8h2z",c="M11 13h1v4h-1zm3.895 5.45a.311.311 0 0 0-.12-.27l-.232-.18h-6.19l-.232.18a.312.312 0 0 0 .04.518l1.387.771-1.367.76a.311.311 0 0 0-.028.526l3.09 2.18a.356.356 0 0 0 .41 0l3.09-2.18a.311.311 0 0 0-.029-.527l-1.366-.759 1.388-.77a.312.312 0 0 0 .159-.25zM11.59 0l-.173.002L11.244 0a6.2 6.2 0 0 0-6.182 6.698c.31 2.575 2.784 5.207 2.939 6.134.13.78.116 1.844.199 2.472A2.542 2.542 0 0 0 9.088 17H10v-4.412L8.83 9.37l.94-.342L10.85 12h1.3l1.08-2.97.94.341L13 12.588V17h.745a2.542 2.542 0 0 0 .889-1.696c.083-.628.068-1.692.199-2.472.154-.927 2.628-3.559 2.938-6.134A6.2 6.2 0 0 0 11.59 0z",n="M16.707 16l10.607 10.606-.708.707L16 16.707 5.394 27.313l-.708-.707L15.293 16 4.686 5.394l.708-.707L16 15.293 26.606 4.687l.708.707z",h=(()=>{let e=new Map,i={currentAlert:"",queueLength:0};const s=(t,e)=>{Array.isArray(t)?[...t].forEach(t=>{e[t]=i[t]}):e[t]=Object.assign({},i)},a=(t,i)=>(e.has(t)||(e.set(t,i),s(i,t)),()=>{e.has(t)&&e.delete(t)});return{Provider:({state:t},a)=>(i=t,e.forEach(s),a),Consumer:(e,i)=>((e,i)=>t("context-consumer",{subscribe:e,renderer:i}))(a,i[0]),injectProps:(t,i)=>{const s=t.prototype,l=s.connectedCallback,r=s.disconnectedCallback;s.connectedCallback=function(){if(a(this,i),l)return l.call(this)},s.disconnectedCallback=function(){e.delete(this),r&&r.call(this)}}}})();class o{constructor(t){e(this,t),this.currentAlert="",this.dismiss=!1,this.icon=!1,this.id="1",this.queueLength=0,this.color="blue",this.theme=null,this.duration=this.dismiss?"medium":null,this.isActive=this.id===this.currentAlert,this.alertClose=i(this,"alertClose",7),this.alertOpen=i(this,"alertOpen",7)}async close(){this.isActive&&(this.isActive=!1,this.alertClose.emit(this.id))}componentWillUpdate(){this.isActive=this.currentAlert===this.id,this.isActive&&this.alertOpen.emit(this.id),this.isActive&&this.dismiss&&setTimeout(()=>{this.close()},"fast"===this.duration?6e3:"slow"===this.duration?14e3:1e4)}setIcon(){return t("div",{class:"alert-icon"},t("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24",width:"24",viewBox:"0 0 24 24"},t("path",{d:"green"===this.color?l:"red"===this.color||"yellow"===this.color?r:c})))}render(){const e=t("button",{class:"alert-close","aria-label":"close",onClick:()=>this.close()},t("svg",{xmlns:"http://www.w3.org/2000/svg",height:"32",width:"32",viewBox:"0 0 32 32"},t("path",{d:n}))),i=this.dismiss?"":e,a=this.icon?this.setIcon():"",l=t("div",{class:`${this.queueLength>0?"is-active ":""}alert-count`},"+",this.queueLength>0?this.queueLength:1),r=this.isActive&&this.dismiss?t("div",{class:"alert-dismiss"}):"";return t(s,{theme:this.theme,"is-active":!!this.isActive,duration:this.duration},a,t("div",{class:"alert-content"},t("slot",{name:"alert-title"}),t("slot",{name:"alert-message"}),t("slot",{name:"alert-link"})),l,i,r)}get el(){return a(this)}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:relative;-ms-flex-pack:center;justify-content:center;right:0;left:0;margin-right:auto;margin-left:auto;z-index:100;width:50em;max-width:90%;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,.15);box-shadow:0 0 12px 0 rgba(0,0,0,.15);height:0;opacity:0;overflow:visible;display:-ms-flexbox;display:flex;border-top:3px solid;-webkit-transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;-webkit-transform:translate3d(0,1.5rem,0);transform:translate3d(0,1.5rem,0);pointer-events:none;border-width:0}\@media only screen and (max-width:600px){:host{max-width:100%;border-radius:2px 2px 0 0;-webkit-box-shadow:0 -6px 12px 0 rgba(0,0,0,.15);box-shadow:0 -6px 12px 0 rgba(0,0,0,.15)}}:host([is-active]){visibility:visible;border-width:3px;opacity:1;height:100%;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto}:host slot[name=alert-title]::slotted(div){display:block;font-weight:500;font-size:16px}:host slot[name=alert-link]::slotted(a){display:inline-block;font-size:15px;color:#007ac2}:host slot[name=alert-message]::slotted(div){font-size:15px;color:#555;display:inline;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host([theme=dark]){background-color:#2b2b2b}:host([theme=dark]) slot[name=alert-title]::slotted(div){color:#f8f8f8}:host([theme=dark]) slot[name=alert-message]::slotted(div){color:#f3f3f3}.alert-content{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;word-wrap:break-word;-webkit-padding-before:.75rem;padding-block-start:.75rem;-webkit-padding-after:.75rem;padding-block-end:.75rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}\@media only screen and (max-width:600px){.alert-content{padding:1.5rem}}.alert-content svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-content:first-of-type{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}\@media only screen and (max-width:600px){.alert-content{-webkit-padding-before:1.5rem;padding-block-start:1.5rem;-webkit-padding-after:1.5rem;padding-block-end:1.5rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}}.alert-icon{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (max-width:600px){.alert-icon{padding:1.5rem}}.alert-icon svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-close{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-appearance:none;background-color:transparent;border:none;outline:none;cursor:pointer;border-radius:0 0 2px 0}\@media only screen and (max-width:600px){.alert-close{padding:1.5rem}}.alert-close svg{position:relative;vertical-align:top;height:16px;width:16px;fill:#151515}.alert-close:focus,.alert-close:hover{background-color:#f3f3f3}.alert-close:active{background-color:#eaeaea}.alert-close:last-child{border-radius:0 0 2px 0}:host([dir=rtl]) .alert-close:last-child{border-radius:0 0 0 2px}\@media only screen and (max-width:600px){.alert-close{border-radius:0}}:host([theme=dark]) .alert-close svg{fill:#d4d4d4}:host([theme=dark]) .alert-close:focus,:host([theme=dark]) .alert-close:hover{background-color:#202020}:host([theme=dark]) .alert-close:active{background-color:#151515}.alert-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:0;font-size:14px;visibility:hidden;padding:0;font-weight:500;text-align:center;background-color:transparent;color:#757575;opacity:0;border-left:1px solid transparent;border-right:1px solid transparent;cursor:default}.alert-count.is-active{visibility:visible;-webkit-transition-delay:.3s;transition-delay:.3s;opacity:1;padding:0 .375rem;width:3rem;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3}.alert-count.is-active:last-child{border-right-color:transparent}\@media only screen and (max-width:600px){.alert-count{border-radius:0}}:host([theme=dark]) .alert-count{color:#d4d4d4}:host([theme=dark]) .alert-count.is-active{border-left:1px solid #202020;border-right:1px solid #202020}.alert-dismiss{left:0;top:0;z-index:101}.alert-dismiss,.alert-dismiss:after{display:block;position:absolute;right:0;height:3px}.alert-dismiss:after{top:-3px;border-radius:2px 2px 0 0;content:\"\";width:50%;background-color:hsla(0,0%,100%,.6);-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;z-index:200}:host([theme=dark]) .alert-dismiss:after{background-color:rgba(43,43,43,.6)}:host([duration=fast]) .alert-dismiss:after{-webkit-animation:dismissProgress 6s linear;animation:dismissProgress 6s linear}:host([duration=medium]) .alert-dismiss:after{-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear}:host([duration=slow]) .alert-dismiss:after{-webkit-animation:dismissProgress 14s linear;animation:dismissProgress 14s linear}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([color=blue]){border-top-color:#007ac2}:host([color=blue]) .alert-icon svg{fill:#007ac2}:host([color=red]){border-top-color:#d83020}:host([color=red]) .alert-icon svg{fill:#d83020}:host([color=yellow]){border-top-color:#edd317}:host([color=yellow]) .alert-icon svg{fill:#edd317}:host([color=green]){border-top-color:#35ac46}:host([color=green]) .alert-icon svg{fill:#35ac46}"}}h.injectProps(o,["currentAlert","queueLength"]);class u{constructor(t){e(this,t),this.id="1",this.currentAlert="",this.isActive=!1,this.queue=[],this.alertsClose=i(this,"alertsClose",7),this.alertsOpen=i(this,"alertsOpen",7)}async open(t){this.queue.includes(t)||(this.isActive=!0,this.currentAlert=t,this.queue.push(t),this.alertsOpen.emit({id:this.id,currentAlert:this.currentAlert,queue:this.queue}))}updateQueue(t){this.queue.includes(t.detail)&&(this.queue=this.queue.filter(e=>e!==t.detail)),this.queue.length<1&&setTimeout(()=>{this.isActive=!1},300),this.alertsClose.emit({id:this.id,currentAlert:this.currentAlert,queue:this.queue})}componentWillUpdate(){this.currentAlert=this.queue.length>0?this.queue[0]:""}render(){return t(s,{"is-active":!!this.isActive},t(h.Provider,{state:{currentAlert:this.currentAlert,queueLength:this.queue.length>=2?this.queue.length-1:0}},t("slot",null)))}get el(){return a(this)}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:fixed;visibility:hidden;opacity:0;left:0;right:0;bottom:1.5rem;height:0;z-index:101;pointer-events:none;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s}\@media only screen and (max-width:600px){:host{bottom:0}}:host([is-active]){height:auto;visibility:visible;opacity:1}"}}class d{constructor(t){e(this,t),this.isActive=!1,this.text="Loading..."}render(){return t(s,{"is-active":!!this.isActive},t("div",{class:"loader-bars"}),t("div",{class:"loader-text"},this.text))}get el(){return a(this)}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host .loader-bars,:host .loader-bars:after,:host .loader-bars:before{background:#007ac2;-webkit-animation:load .8s ease-in-out infinite;animation:load .8s ease-in-out infinite;width:.85rem;height:2rem}:host .loader-bars:after,:host .loader-bars:before{position:absolute;top:0;content:\"\"}:host{position:relative;display:none;padding-bottom:4.5rem;padding-top:4.5rem}:host([is-active]){display:block}:host .loader-bars{text-indent:-9999em;margin:auto;position:absolute;right:calc(50% - .425rem);font-size:11px;-webkit-animation-delay:.16s;animation-delay:.16s}:host .loader-bars:before{left:-1.25rem}:host .loader-bars:after{left:1.25rem;-webkit-animation-delay:.32s;animation-delay:.32s}:host .loader-text{padding-top:4rem;text-align:center}\@-webkit-keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}\@keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}"}}class b{constructor(t){e(this,t)}getText(){return(this.first||"")+((t=this.middle)?` ${t}`:"")+((e=this.last)?` ${e}`:"");var t,e}render(){return t("div",{class:"example-class"},"Hello, World! I'm ",this.getText())}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.example-class{padding:1.5rem;color:#d83020;-webkit-box-shadow:0 0 16px 0 rgba(0,0,0,.05);box-shadow:0 0 16px 0 rgba(0,0,0,.05);border:1px solid #007ac2}"}}function g(t){for(var e="",i=0;i<t;i++)e+=(65536*(1+window.crypto.getRandomValues(new Uint32Array(1))[0]/1e10)|0).toString(16).substring(1);return e}function T(){return[g(2),g(1),g(1),g(1),g(3)].join("-")}class v{constructor(t){e(this,t),this.id=`calite-tab-${T()}`,this.isActive=!1,this.calciteRegisterTab=i(this,"calciteRegisterTab",7)}tabChangeHandler(t){this.tab?this.isActive=this.tab===t.detail.tab:this.getTabIndex().then(e=>{this.isActive=e===t.detail.tab})}componentDidLoad(){this.getTabIndex().then(t=>{this.calciteRegisterTab.emit({id:this.id,index:t})})}async getTabIndex(){return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"),this.el))}async registerLabeledBy(t){this.labeledBy=t}render(){return t(s,{"aria-labeledby":this.labeledBy,"aria-expanded":this.isActive?"true":"false",role:"tabpanel"},t("section",null,t("slot",null)))}get el(){return a(this)}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([is-active]) section{display:block}section{display:none}"}}class A{constructor(t){e(this,t),this.id=`calite-tab-nav-${T()}`,this.selectedTab=0,this.calciteTabChange=i(this,"calciteTabChange",7)}selectedTabChanged(){this.calciteTabChange.emit({tab:this.selectedTab})}focusPreviousTabHandler(t){const e=this.el.parentElement.querySelectorAll("calcite-tab-title");(e[this.getIndexOfTabTitle(t.target)-1]||e[e.length-1]).focus()}focusNextTabHandler(t){const e=this.el.parentElement.querySelectorAll("calcite-tab-title");(e[this.getIndexOfTabTitle(t.target)+1]||e[0]).focus()}tabTitleRegistationHandler(t){t.target.setControledBy(this.id)}activateTabHandler(t){this.selectedTab=t.detail.tab?t.detail.tab:this.getIndexOfTabTitle(t.target)}getIndexOfTabTitle(t){return[...this.el.parentElement.querySelectorAll("calcite-tab-title")].indexOf(t)}componentWillLoad(){this.selectedTabChanged()}render(){return t(s,{role:"tablist"},t("nav",{class:"tab-nav"},t("slot",null)))}get el(){return a(this)}static get watchers(){return{selectedTab:["selectedTabChanged"]}}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.tab-nav{display:-ms-flexbox;display:flex;padding:.5rem 0}::slotted(calcite-tab-title){margin-right:1.25rem}:host([dir=rtl]) ::slotted(calcite-tab-title){margin-right:0;margin-left:1.25rem}"}}const m=13,L=32,p=37,y=39;class E{constructor(t){e(this,t),this.id=`calite-tab-title-${T()}`,this.isActive=!1,this.calciteActivateTab=i(this,"calciteActivateTab",7),this.calciteFocusNextTab=i(this,"calciteFocusNextTab",7),this.calciteFocusPreviousTab=i(this,"calciteFocusPreviousTab",7),this.calciteRegisterTabTitle=i(this,"calciteRegisterTabTitle",7)}tabChangeHand(t){this.tab?this.isActive=this.tab===t.detail.tab:this.getTabIndex().then(e=>{this.isActive=e===t.detail.tab})}onClick(){this.calciteActivateTab.emit({tab:this.tab})}keyDownHandler(t){switch(t.keyCode){case L:case m:this.onClick();break;case y:this.calciteFocusNextTab.emit();break;case p:this.calciteFocusPreviousTab.emit()}}componentDidLoad(){this.getTabIndex().then(t=>{this.calciteRegisterTabTitle.emit({id:this.id,index:t})})}async getTabIndex(){return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"),this.el))}async setControledBy(t){this.controls=t}render(){return t(s,{"aria-controls":this.controls,"aria-expanded":this.isActive?"true":"false",role:"tab",tabindex:"0"},t("a",null,t("slot",null)))}get el(){return a(this)}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{-ms-flex:0 1 auto;flex:0 1 auto;outline:none}:host(:active) a,:host(:focus) a,:host(:hover) a{outline:none;text-decoration:none;color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-hover)}:host([is-active]) a{color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-active)}a{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:.875rem;line-height:1.5;padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid transparent;cursor:pointer;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;color:var(--calcite-tabs-color);outline:none}"}}class x{constructor(t){e(this,t),this.tabs={},this.tabTitles={},this.theme="light"}tabTitleRegistationHandler(t){const{index:e,id:i}=t.detail;this.tabTitles[e]={id:i,title:t.target},this.tabs[e]&&this.tabs[e].tab.registerLabeledBy(i)}tabRegistationHandler(t){const{index:e,id:i}=t.detail;this.tabs[e]={id:i,tab:t.target},this.tabTitles[e]&&this.tabs[e].tab.registerLabeledBy(this.tabTitles[e].id)}render(){return t("div",null,t("slot",{name:"tab-nav"}),t("section",{class:"tab-contents"},t("slot",null)))}static get style(){return"body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{--calcite-tabs-color:#2b2b2b;--calcite-tabs-border:#eaeaea;--calcite-tabs-border-hover:#dfdfdf;--calcite-tabs-color-active:#151515;--calcite-tabs-border-active:#007ac2}:host([theme=dark]){--calcite-tabs-color:#f3f3f3;--calcite-tabs-border:#404040;--calcite-tabs-border-hover:#757575;--calcite-tabs-color-active:#f8f8f8;--calcite-tabs-border-active:#fff}.tab-contents{margin-top:1px;border-top:1px solid var(--calcite-tabs-border)}"}}export{o as calcite_alert,u as calcite_alerts,d as calcite_loader,b as calcite_modal,v as calcite_tab,A as calcite_tab_nav,E as calcite_tab_title,x as calcite_tabs};
\ No newline at end of file
diff --git a/dist/cjs/calcite-15323450.js b/dist/cjs/calcite-15323450.js
new file mode 100644
index 00000000000..de3bed9b11b
--- /dev/null
+++ b/dist/cjs/calcite-15323450.js
@@ -0,0 +1,1657 @@
+'use strict';
+
+const BUILD = {"allRenderFn":true,"cmpDidLoad":true,"cmpDidUnload":false,"cmpDidUpdate":false,"cmpDidRender":false,"cmpWillLoad":true,"cmpWillUpdate":true,"cmpWillRender":false,"connectedCallback":true,"disconnectedCallback":true,"element":false,"event":true,"hasRenderFn":true,"lifecycle":true,"hostListener":true,"hostListenerTargetWindow":false,"hostListenerTargetDocument":false,"hostListenerTargetBody":false,"hostListenerTargetParent":true,"hostListenerTarget":true,"member":true,"method":true,"mode":false,"noVdomRender":false,"observeAttribute":true,"prop":true,"propMutable":true,"reflect":true,"scoped":false,"shadowDom":true,"slot":true,"slotRelocation":true,"state":true,"style":true,"svg":true,"updatable":true,"vdomAttribute":true,"vdomClass":true,"vdomFunctional":true,"vdomKey":true,"vdomListener":true,"vdomRef":true,"vdomRender":true,"vdomStyle":true,"vdomText":true,"watchCallback":true,"taskQueue":true,"lazyLoad":true,"hydrateServerSide":false,"cssVarShim":true,"hydrateClientSide":false,"isDebug":false,"isDev":false,"lifecycleDOMEvents":false,"profile":false,"hotModuleReplacement":false,"constructableCSS":true,"cssAnnotations":true};
+const NAMESPACE = 'calcite';
+
+const win = window;
+const doc = document;
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+};
+const supportsShadowDom = !!doc.documentElement.attachShadow;
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() { supportsListenerOptions = true; }
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
+const supportsConstructibleStylesheets = (() => {
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (e) { }
+    return false;
+})();
+
+const hostRefs = new WeakMap();
+const getHostRef = (ref) => hostRefs.get(ref);
+const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+const registerHost = (elm) => {
+    // TODO: it's so ugly, but minifies really well
+    {
+        const hostRef = {
+            $flags$: 0,
+            $hostElement$: elm
+        };
+        hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r);
+        {
+            hostRef.$instanceValues$ = new Map();
+        }
+        return hostRefs.set(elm, hostRef);
+    }
+};
+const isMemberInElement = (elm, memberName) => memberName in elm;
+
+const consoleError = (e) => console.error(e);
+
+const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+    // loadModuleImport
+    const bundleId = cmpMeta.$lazyBundleIds$;
+    return Promise.resolve(require(
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.(system|cjs)\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    `./${bundleId}.entry.js${''}`)).then(importedModule => importedModule[cmpMeta.$tagName$.replace(/-/g, '_')], consoleError);
+};
+
+const styles = new Map();
+const cssVarShim = win.__stencil_cssshim;
+
+let queueCongestion = 0;
+let queuePending = false;
+const queueDomReads = [];
+const queueDomWrites = [];
+const queueDomWritesLow = [];
+const queueTask = (queue) => (cb) => {
+    // queue dom reads
+    queue.push(cb);
+    if (!queuePending) {
+        queuePending = true;
+        plt.raf(flush);
+    }
+};
+const consume = (queue) => {
+    for (let i = 0; i < queue.length; i++) {
+        try {
+            queue[i](performance.now());
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    queue.length = 0;
+};
+const consumeTimeout = (queue, timeout) => {
+    let i = 0;
+    let ts = 0;
+    while (i < queue.length && (ts = performance.now()) < timeout) {
+        try {
+            queue[i++](ts);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    if (i === queue.length) {
+        queue.length = 0;
+    }
+    else if (i !== 0) {
+        queue.splice(0, i);
+    }
+};
+const flush = () => {
+    queueCongestion++;
+    // always force a bunch of medium callbacks to run, but still have
+    // a throttle on how many can run in a certain time
+    // DOM READS!!!
+    consume(queueDomReads);
+    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
+        ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0)))
+        : Infinity;
+    // DOM WRITES!!!
+    consumeTimeout(queueDomWrites, timeout);
+    consumeTimeout(queueDomWritesLow, timeout);
+    if (queueDomWrites.length > 0) {
+        queueDomWritesLow.push(...queueDomWrites);
+        queueDomWrites.length = 0;
+    }
+    if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) {
+        // still more to do yet, but we've run out of time
+        // let's let this thing cool off and try again in the next tick
+        plt.raf(flush);
+    }
+    else {
+        queueCongestion = 0;
+    }
+};
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites);
+
+/**
+ * Default style mode id
+ */
+/**
+ * Reusable empty obj/array
+ * Don't add values to these!!
+ */
+const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+const isDef = (v) => v != null;
+const toLowerCase = (str) => str.toLowerCase();
+
+function getDynamicImportFunction(namespace) {
+    return `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+}
+
+const patchEsm = () => {
+    // @ts-ignore
+    if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return Promise.resolve(require('./css-shim-229ebf7a-56ba83b5.js'));
+    }
+    return Promise.resolve();
+};
+const patchBrowser = async () => {
+    // @ts-ignore
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('calcite-15323450.js', document.baseURI).href));
+    if (importMeta !== '') {
+        return Promise.resolve(new URL('.', importMeta).href);
+    }
+    else {
+        const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (s.src.includes(`/${NAMESPACE}.esm.js`) ||
+            s.getAttribute('data-namespace') === NAMESPACE));
+        const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, doc.baseURI));
+        patchDynamicImport(resourcesUrl.href);
+        if (!window.customElements) {
+            // @ts-ignore
+            await Promise.resolve(require('./dom-7eb7509a-4c879aea.js'));
+        }
+        return resourcesUrl.href;
+    }
+};
+const patchDynamicImport = (base) => {
+    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        win[importFunctionName] = new Function('w', 'return import(w);');
+    }
+    catch (e) {
+        const moduleMap = new Map();
+        win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = doc.createElement('script');
+                script.type = 'module';
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
+                mod = new Promise(resolve => {
+                    script.onload = () => {
+                        resolve(win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const HYDRATED_CLASS = 'hydrated';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+
+const rootAppliedStyles = new WeakMap();
+const registerStyle = (scopeId, cssText) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructibleStylesheets) {
+        style = (style || new CSSStyleSheet());
+        style.replace(cssText);
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, tagName, mode, hostElm) => {
+    let scopeId = getScopeId(tagName, mode);
+    let style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc);
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set());
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    if (cssVarShim) {
+                        styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style);
+                        const newScopeId = styleElm['s-sc'];
+                        if (newScopeId) {
+                            scopeId = newScopeId;
+                            // we don't want to add this styleID to the appliedStyles Set
+                            // since the cssVarShim might need to apply several different
+                            // stylesheets for the same component
+                            appliedStyles = null;
+                        }
+                    }
+                    else {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.appendChild(styleElm);
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [
+                ...styleContainerNode.adoptedStyleSheets,
+                style
+            ];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (elm, cmpMeta, mode) => {
+    const styleId = addStyle((supportsShadowDom && elm.shadowRoot)
+        ? elm.shadowRoot
+        : elm.getRootNode(), cmpMeta.$tagName$, mode, elm);
+    if (cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = styleId;
+        elm.classList.add(styleId + '-h');
+    }
+};
+const getScopeId = (tagName, mode) => 'sc-' + (tagName);
+
+/**
+ * Production h() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const stack = [];
+function h(nodeName, vnodeData) {
+    let children = null;
+    let lastSimple = false;
+    let simple = false;
+    let i = arguments.length;
+    let vkey;
+    let vname;
+    for (; i-- > 2;) {
+        stack.push(arguments[i]);
+    }
+    while (stack.length > 0) {
+        let child = stack.pop();
+        if (child && child.pop !== undefined) {
+            for (i = child.length; i--;) {
+                stack.push(child[i]);
+            }
+        }
+        else {
+            if (typeof child === 'boolean') {
+                child = null;
+            }
+            if ((simple = typeof nodeName !== 'function')) {
+                if (child == null) {
+                    child = '';
+                }
+                else if (typeof child === 'number') {
+                    child = String(child);
+                }
+                else if (typeof child !== 'string') {
+                    simple = false;
+                }
+            }
+            if (simple && lastSimple) {
+                children[children.length - 1].$text$ += child;
+            }
+            else if (children === null) {
+                children = [simple ? { $flags$: 0, $text$: child } : child];
+            }
+            else {
+                children.push(simple ? { $flags$: 0, $text$: child } : child);
+            }
+            lastSimple = simple;
+        }
+    }
+    {
+        if (vnodeData != null) {
+            // normalize class / classname attributes
+            if (vnodeData.className) {
+                vnodeData['class'] = vnodeData.className;
+            }
+            if (typeof vnodeData['class'] === 'object') {
+                for (i in vnodeData['class']) {
+                    if (vnodeData['class'][i]) {
+                        stack.push(i);
+                    }
+                }
+                vnodeData['class'] = stack.join(' ');
+                stack.length = 0;
+            }
+            if (vnodeData.key != null) {
+                vkey = vnodeData.key;
+            }
+            if (vnodeData.name != null) {
+                vname = vnodeData.name;
+            }
+        }
+    }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData, children || [], vdomFnUtils);
+    }
+    const vnode = {
+        $tag$: nodeName,
+        $children$: children,
+        $elm$: undefined,
+        $flags$: 0
+    };
+    {
+        vnode.$attrs$ = vnodeData;
+    }
+    {
+        vnode.$text$ = undefined;
+    }
+    {
+        vnode.$key$ = vkey;
+    }
+    {
+        vnode.$name$ = vname;
+    }
+    return vnode;
+}
+const Host = {};
+const vdomFnUtils = {
+    'forEach': (children, cb) => children.map(convertToPublic).forEach(cb),
+    'map': (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+const convertToPublic = (node) => {
+    return {
+        vattrs: node.$attrs$,
+        vchildren: node.$children$,
+        vkey: node.$key$,
+        vname: node.$name$,
+        vtag: node.$tag$,
+        vtext: node.$text$
+    };
+};
+const convertToPrivate = (node) => {
+    return {
+        $flags$: 0,
+        $attrs$: node.vattrs,
+        $children$: node.vchildren,
+        $key$: node.vkey,
+        $name$: node.vname,
+        $tag$: node.vtag,
+        $text$: node.vtext
+    };
+};
+
+/**
+ * Production setAccessor() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+    if (oldValue === newValue) {
+        return;
+    }
+    if (memberName === 'class' && !isSvg) {
+        // Class
+        {
+            const oldList = parseClassList(oldValue);
+            const baseList = parseClassList(elm.className).filter(item => !oldList.includes(item));
+            elm.className = baseList.concat(parseClassList(newValue).filter(item => !baseList.includes(item))).join(' ');
+        }
+    }
+    else if (memberName === 'style') {
+        // update style attribute, css properties and values
+        {
+            for (const prop in oldValue) {
+                if (!newValue || newValue[prop] == null) {
+                    if (prop.includes('-')) {
+                        elm.style.removeProperty(prop);
+                    }
+                    else {
+                        elm.style[prop] = '';
+                    }
+                }
+            }
+        }
+        for (const prop in newValue) {
+            if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                if (prop.includes('-')) {
+                    elm.style.setProperty(prop, newValue[prop]);
+                }
+                else {
+                    elm.style[prop] = newValue[prop];
+                }
+            }
+        }
+    }
+    else if (memberName === 'key') ;
+    else if (memberName === 'ref') {
+        // minifier will clean this up
+        if (newValue) {
+            newValue(elm);
+        }
+    }
+    else if (memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
+        // Event Handlers
+        // so if the member name starts with "on" and the 3rd characters is
+        // a capital letter, and it's not already a member on the element,
+        // then we're assuming it's an event listener
+        if (isMemberInElement(elm, toLowerCase(memberName))) {
+            // standard event
+            // the JSX attribute could have been "onMouseOver" and the
+            // member name "onmouseover" is on the element's prototype
+            // so let's add the listener "mouseover", which is all lowercased
+            memberName = toLowerCase(memberName.substring(2));
+        }
+        else {
+            // custom event
+            // the JSX attribute could have been "onMyCustomEvent"
+            // so let's trim off the "on" prefix and lowercase the first character
+            // and add the listener "myCustomEvent"
+            // except for the first character, we keep the event name case
+            memberName = toLowerCase(memberName[2]) + memberName.substring(3);
+        }
+        if (oldValue) {
+            plt.rel(elm, memberName, oldValue, false);
+        }
+        if (newValue) {
+            plt.ael(elm, memberName, newValue, false);
+        }
+    }
+    else {
+        // Set property if it exists and it's not a SVG
+        const isProp = isMemberInElement(elm, memberName);
+        const isComplex = ['object', 'function'].includes(typeof newValue);
+        if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
+            try {
+                elm[memberName] = newValue == null && elm.tagName.indexOf('-') === -1 ? '' : newValue;
+            }
+            catch (e) { }
+        }
+        /**
+         * Need to manually update attribute if:
+         * - memberName is not an attribute
+         * - if we are rendering the host element in order to reflect attribute
+         * - if it's a SVG, since properties might not work in <svg>
+         * - if the newValue is null/undefined or 'false'.
+         */
+        const isXlinkNs = isSvg && (memberName !== (memberName = memberName.replace(/^xlink\:?/, ''))) ? true : false;
+        if (newValue == null || newValue === false) {
+            if (isXlinkNs) {
+                elm.removeAttributeNS(XLINK_NS, toLowerCase(memberName));
+            }
+            else {
+                elm.removeAttribute(memberName);
+            }
+        }
+        else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
+            newValue = newValue === true ? '' : newValue.toString();
+            if (isXlinkNs) {
+                elm.setAttributeNS(XLINK_NS, toLowerCase(memberName), newValue);
+            }
+            else {
+                elm.setAttribute(memberName, newValue);
+            }
+        }
+    }
+};
+const parseClassList = (value) => (!value) ? [] : value.split(' ');
+
+const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
+    // if the element passed in is a shadow root, which is a document fragment
+    // then we want to be adding attrs/props to the shadow root's "host" element
+    // if it's not a shadow root, then we add attrs/props to the same element
+    const elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$;
+    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
+    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+    {
+        // remove attributes no longer present on the vnode by setting them to undefined
+        for (memberName in oldVnodeAttrs) {
+            if (newVnodeAttrs[memberName] == null && oldVnodeAttrs[memberName] != null) {
+                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
+            }
+        }
+    }
+    // add new & update changed attributes
+    for (memberName in newVnodeAttrs) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
+    }
+};
+
+let scopeId;
+let contentRef;
+let hostTagName;
+let useNativeShadowDom = false;
+let checkSlotFallbackVisibility = false;
+let checkSlotRelocate = false;
+let isSvgMode = false;
+const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+    const newVNode = newParentVNode.$children$[childIndex];
+    let i = 0;
+    let elm;
+    let childNode;
+    let oldVNode;
+    if (!useNativeShadowDom) {
+        // remember for later we need to check to relocate nodes
+        checkSlotRelocate = true;
+        if (newVNode.$tag$ === 'slot') {
+            if (scopeId) {
+                // scoped css needs to add its scoped id to the parent element
+                parentElm.classList.add(scopeId + '-s');
+            }
+            if (!newVNode.$children$) {
+                // slot element does not have fallback content
+                // create an html comment we'll use to always reference
+                // where actual slot content should sit next to
+                newVNode.$flags$ |= 1 /* isSlotReference */;
+            }
+            else {
+                // slot element has fallback content
+                // still create an element that "mocks" the slot element
+                newVNode.$flags$ |= 2 /* isSlotFallback */;
+            }
+        }
+    }
+    if (isDef(newVNode.$text$)) {
+        // create text node
+        newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else if (newVNode.$flags$ & 1 /* isSlotReference */) {
+        // create a slot reference node
+        newVNode.$elm$ = doc.createTextNode('');
+    }
+    else {
+        // create element
+        elm = newVNode.$elm$ = ((isSvgMode || newVNode.$tag$ === 'svg')
+            ? doc.createElementNS(SVG_NS, newVNode.$tag$)
+            : doc.createElement((newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
+        {
+            isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+        }
+        // add css classes, attrs, props, listeners, etc.
+        {
+            updateElement(null, newVNode, isSvgMode);
+        }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
+        if (newVNode.$children$) {
+            for (i = 0; i < newVNode.$children$.length; ++i) {
+                // create the node
+                childNode = createElm(oldParentVNode, newVNode, i, elm);
+                // return node could have been null
+                if (childNode) {
+                    // append our new node
+                    elm.appendChild(childNode);
+                }
+            }
+        }
+        if (newVNode.$tag$ === 'svg') {
+            // Only reset the SVG context when we're exiting SVG element
+            isSvgMode = false;
+        }
+    }
+    {
+        newVNode.$elm$['s-hn'] = hostTagName;
+        if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+            // remember the content reference comment
+            newVNode.$elm$['s-sr'] = true;
+            // remember the content reference comment
+            newVNode.$elm$['s-cr'] = contentRef;
+            // remember the slot name, or empty string for default slot
+            newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
+            // check if we've got an old vnode for this slot
+            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+            }
+        }
+    }
+    return newVNode.$elm$;
+};
+const putBackInOriginalLocation = (parentElm, recursive) => {
+    plt.$flags$ |= 1 /* isTmpDisconnected */;
+    const oldSlotChildNodes = parentElm.childNodes;
+    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+        const childNode = oldSlotChildNodes[i];
+        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
+            // and relocate it back to it's original location
+            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+            // remove the old original location comment entirely
+            // later on the patch function will know what to do
+            // and move this to the correct spot in need be
+            childNode['s-ol'].remove();
+            childNode['s-ol'] = undefined;
+            checkSlotRelocate = true;
+        }
+        if (recursive) {
+            putBackInOriginalLocation(childNode, recursive);
+        }
+    }
+    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+    let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    let childNode;
+    if (containerElm.shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnodes[startIdx]) {
+            childNode = createElm(null, parentVNode, startIdx, parentElm);
+            if (childNode) {
+                vnodes[startIdx].$elm$ = childNode;
+                containerElm.insertBefore(childNode, referenceNode(before));
+            }
+        }
+    }
+};
+const removeVnodes = (vnodes, startIdx, endIdx, elm) => {
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (isDef(vnodes[startIdx])) {
+            elm = vnodes[startIdx].$elm$;
+            callNodeRefs(vnodes[startIdx], true);
+            {
+                // we're removing this element
+                // so it's possible we need to show slot fallback content now
+                checkSlotFallbackVisibility = true;
+                if (elm['s-ol']) {
+                    // remove the original location comment
+                    elm['s-ol'].remove();
+                }
+                else {
+                    // it's possible that child nodes of the node
+                    // that's being removed are slot nodes
+                    putBackInOriginalLocation(elm, true);
+                }
+            }
+            // remove the vnode's element from the dom
+            elm.remove();
+        }
+    }
+};
+const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    let newEndIdx = newCh.length - 1;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let node;
+    let elmToMove;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (oldStartVnode == null) {
+            // Vnode might have been moved left
+            oldStartVnode = oldCh[++oldStartIdx];
+        }
+        else if (oldEndVnode == null) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (newStartVnode == null) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (newEndVnode == null) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            patch(oldStartVnode, newStartVnode);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            patch(oldEndVnode, newEndVnode);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // Vnode moved right
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+            }
+            patch(oldStartVnode, newEndVnode);
+            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // Vnode moved left
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+            }
+            patch(oldEndVnode, newStartVnode);
+            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            // createKeyToOldIdx
+            idxInOld = -1;
+            {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && isDef(oldCh[i].$key$) && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
+                // new element
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
+                newStartVnode = newCh[++newStartIdx];
+            }
+            if (node) {
+                {
+                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                }
+            }
+        }
+    }
+    if (oldStartIdx > oldEndIdx) {
+        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
+    }
+    else if (newStartIdx > newEndIdx) {
+        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+    }
+};
+const isSameVnode = (vnode1, vnode2) => {
+    // compare if two vnode to see if they're "technically" the same
+    // need to have the same element tag, and same key to be the same
+    if (vnode1.$tag$ === vnode2.$tag$) {
+        if (vnode1.$tag$ === 'slot') {
+            return vnode1.$name$ === vnode2.$name$;
+        }
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
+        return true;
+    }
+    return false;
+};
+const referenceNode = (node) => {
+    if (node && node['s-ol']) {
+        // this node was relocated to a new location in the dom
+        // because of some other component's slot
+        // but we still have an html comment in place of where
+        // it's original location was according to it's original vdom
+        return node['s-ol'];
+    }
+    return node;
+};
+const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
+const patch = (oldVNode, newVNode) => {
+    const elm = newVNode.$elm$ = oldVNode.$elm$;
+    const oldChildren = oldVNode.$children$;
+    const newChildren = newVNode.$children$;
+    let defaultHolder;
+    {
+        // test if we're rendering an svg element, or still rendering nodes inside of one
+        // only add this to the when the compiler sees we're using an svg somewhere
+        isSvgMode = elm &&
+            isDef(elm.parentNode) &&
+            elm.ownerSVGElement !== undefined;
+        isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+    }
+    if (!isDef(newVNode.$text$)) {
+        // element node
+        {
+            if (newVNode.$tag$ === 'slot') ;
+            else {
+                // either this is the first render of an element OR it's an update
+                // AND we already know it's possible it could have changed
+                // this updates the element's css classes, attrs, props, listeners, etc.
+                updateElement(oldVNode, newVNode, isSvgMode);
+            }
+        }
+        if (isDef(oldChildren) && isDef(newChildren)) {
+            // looks like there's child vnodes for both the old and new vnodes
+            updateChildren(elm, oldChildren, newVNode, newChildren);
+        }
+        else if (isDef(newChildren)) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (isDef(oldVNode.$text$)) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
+            // add the new vnode children
+            addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+        }
+        else if (isDef(oldChildren)) {
+            // no new child vnodes, but there are old child vnodes to remove
+            removeVnodes(oldChildren, 0, oldChildren.length - 1);
+        }
+    }
+    else if (defaultHolder = elm['s-cr']) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = newVNode.$text$;
+    }
+    else if (oldVNode.$text$ !== newVNode.$text$) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.textContent = newVNode.$text$;
+    }
+    {
+        // reset svgMode when svg node is fully patched
+        if (isSvgMode && 'svg' === newVNode.$tag$) {
+            isSvgMode = false;
+        }
+    }
+};
+const updateFallbackSlotVisibility = (elm, childNode, childNodes, i, ilen, j, slotNameAttr, nodeType) => {
+    childNodes = elm.childNodes;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            if (childNode['s-sr']) {
+                // this is a slot fallback node
+                // get the slot name for this slot reference node
+                slotNameAttr = childNode['s-sn'];
+                // by default always show a fallback slot node
+                // then hide it if there are other slots in the light dom
+                childNode.hidden = false;
+                for (j = 0; j < ilen; j++) {
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
+                        // this sibling node is from a different component
+                        nodeType = childNodes[j].nodeType;
+                        if (slotNameAttr !== '') {
+                            // this is a named fallback slot node
+                            if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                        else {
+                            // this is a default fallback slot node
+                            // any element or text node (with content)
+                            // should hide the default fallback slot node
+                            if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            // keep drilling down
+            updateFallbackSlotVisibility(childNode);
+        }
+    }
+};
+const relocateNodes = [];
+const relocateSlotContent = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    let childNodes = elm.childNodes;
+    let ilen = childNodes.length;
+    let i = 0;
+    let j = 0;
+    let nodeType = 0;
+    let childNode;
+    let node;
+    let hostContentNodes;
+    let slotNameAttr;
+    for (ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
+            hostContentNodes = node.parentNode.childNodes;
+            slotNameAttr = childNode['s-sn'];
+            for (j = hostContentNodes.length - 1; j >= 0; j--) {
+                node = hostContentNodes[j];
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // that is suppose to always represent the original content location
+                    nodeType = node.nodeType;
+                    if (((nodeType === 3 /* TextNode */ || nodeType === 8 /* CommentNode */) && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === null && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === slotNameAttr)) {
+                        // it's possible we've already decided to relocate this node
+                        if (!relocateNodes.some(r => r.nodeToRelocate === node)) {
+                            // made some changes to slots
+                            // let's make sure we also double check
+                            // fallbacks are correctly hidden or shown
+                            checkSlotFallbackVisibility = true;
+                            node['s-sn'] = slotNameAttr;
+                            // add to our list of nodes to relocate
+                            relocateNodes.push({
+                                slotRefNode: childNode,
+                                nodeToRelocate: node
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            relocateSlotContent(childNode);
+        }
+    }
+};
+const callNodeRefs = (vNode, isDestroy) => {
+    if (vNode) {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(isDestroy ? null : vNode.$elm$);
+        vNode.$children$ && vNode.$children$.forEach(vChild => {
+            callNodeRefs(vChild, isDestroy);
+        });
+    }
+};
+const isHost = (node) => {
+    return node && node.$tag$ === Host;
+};
+const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
+    const oldVNode = hostRef.$vnode$ || { $flags$: 0 };
+    hostTagName = toLowerCase(hostElm.tagName);
+    if (isHost(renderFnResults)) {
+        renderFnResults.$tag$ = null;
+    }
+    else {
+        renderFnResults = h(null, null, renderFnResults);
+    }
+    if (cmpMeta.$attrsToReflect$) {
+        renderFnResults.$attrs$ = renderFnResults.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => renderFnResults.$attrs$[attribute] = hostElm[propName]);
+    }
+    renderFnResults.$flags$ |= 4 /* isHost */;
+    hostRef.$vnode$ = renderFnResults;
+    renderFnResults.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm);
+    {
+        scopeId = hostElm['s-sc'];
+    }
+    {
+        contentRef = hostElm['s-cr'];
+        useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+        // always reset
+        checkSlotRelocate = checkSlotFallbackVisibility = false;
+    }
+    // synchronous patch
+    patch(oldVNode, renderFnResults);
+    {
+        if (checkSlotRelocate) {
+            relocateSlotContent(renderFnResults.$elm$);
+            for (let i = 0; i < relocateNodes.length; i++) {
+                const relocateNode = relocateNodes[i];
+                if (!relocateNode.nodeToRelocate['s-ol']) {
+                    // add a reference node marking this node's original location
+                    // keep a reference to this node for later lookups
+                    const orgLocationNode = doc.createTextNode('');
+                    orgLocationNode['s-nr'] = relocateNode.nodeToRelocate;
+                    relocateNode.nodeToRelocate.parentNode.insertBefore((relocateNode.nodeToRelocate['s-ol'] = orgLocationNode), relocateNode.nodeToRelocate);
+                }
+            }
+            // while we're moving nodes around existing nodes, temporarily disable
+            // the disconnectCallback from working
+            plt.$flags$ |= 1 /* isTmpDisconnected */;
+            for (let i = 0; i < relocateNodes.length; i++) {
+                const relocateNode = relocateNodes[i];
+                // by default we're just going to insert it directly
+                // after the slot reference node
+                const parentNodeRef = relocateNode.slotRefNode.parentNode;
+                let insertBeforeNode = relocateNode.slotRefNode.nextSibling;
+                let orgLocationNode = relocateNode.nodeToRelocate['s-ol'];
+                while (orgLocationNode = orgLocationNode.previousSibling) {
+                    let refNode = orgLocationNode['s-nr'];
+                    if (refNode && refNode) {
+                        if (refNode['s-sn'] === relocateNode.nodeToRelocate['s-sn']) {
+                            if (parentNodeRef === refNode.parentNode) {
+                                if ((refNode = refNode.nextSibling) && refNode && !refNode['s-nr']) {
+                                    insertBeforeNode = refNode;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if ((!insertBeforeNode && parentNodeRef !== relocateNode.nodeToRelocate.parentNode) ||
+                    (relocateNode.nodeToRelocate.nextSibling !== insertBeforeNode)) {
+                    // we've checked that it's worth while to relocate
+                    // since that the node to relocate
+                    // has a different next sibling or parent relocated
+                    if (relocateNode.nodeToRelocate !== insertBeforeNode) {
+                        // add it back to the dom but in its new home
+                        parentNodeRef.insertBefore(relocateNode.nodeToRelocate, insertBeforeNode);
+                    }
+                }
+            }
+            // done moving nodes around
+            // allow the disconnect callback to work again
+            plt.$flags$ &= ~1 /* isTmpDisconnected */;
+        }
+        if (checkSlotFallbackVisibility) {
+            updateFallbackSlotVisibility(renderFnResults.$elm$);
+        }
+        // always reset
+        relocateNodes.length = 0;
+    }
+};
+
+const safeCall = async (instance, method) => {
+    if (instance && instance[method]) {
+        try {
+            await instance[method]();
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+};
+const scheduleUpdate = async (elm, hostRef, cmpMeta, isInitialLoad) => {
+    {
+        hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
+    }
+    const instance = hostRef.$lazyInstance$;
+    if (isInitialLoad) {
+        {
+            await safeCall(instance, 'componentWillLoad');
+        }
+    }
+    else {
+        {
+            await safeCall(instance, 'componentWillUpdate');
+        }
+    }
+    // there is no ancestorc omponent or the ancestor component
+    // has already fired off its lifecycle update then
+    // fire off the initial update
+    {
+        writeTask(() => updateComponent(elm, hostRef, cmpMeta, isInitialLoad, instance));
+    }
+};
+const updateComponent = (elm, hostRef, cmpMeta, isInitialLoad, instance) => {
+    // updateComponent
+    {
+        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+    }
+    {
+        elm['s-lr'] = false;
+    }
+    if (isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(elm, cmpMeta, hostRef.$modeName$);
+    }
+    {
+        {
+            // tell the platform we're actively rendering
+            // if a value is changed within a render() then
+            // this tells the platform not to queue the change
+            hostRef.$flags$ |= 4 /* isActiveRender */;
+            try {
+                // looks like we've got child nodes to render into this host element
+                // or we need to update the css class/attrs on the host element
+                // DOM WRITE!
+                renderVdom(elm, hostRef, cmpMeta, instance.render());
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            hostRef.$flags$ &= ~4 /* isActiveRender */;
+        }
+    }
+    if (cssVarShim) {
+        cssVarShim.updateHost(elm);
+    }
+    // set that this component lifecycle rendering has completed
+    {
+        elm['s-lr'] = true;
+    }
+    {
+        hostRef.$flags$ |= 2 /* hasRendered */;
+    }
+    if (elm['s-rc'].length > 0) {
+        // ok, so turns out there are some child host elements
+        // waiting on this parent element to load
+        // let's fire off all update callbacks waiting
+        elm['s-rc'].forEach(cb => cb());
+        elm['s-rc'].length = 0;
+    }
+    postUpdateComponent(elm, hostRef);
+};
+const postUpdateComponent = (elm, hostRef, ancestorsActivelyLoadingChildren) => {
+    if (!elm['s-al']) {
+        const instance = hostRef.$lazyInstance$;
+        const ancestorComponent = hostRef.$ancestorComponent$;
+        if (!(hostRef.$flags$ & 512 /* hasLoadedComponent */)) {
+            hostRef.$flags$ |= 512 /* hasLoadedComponent */;
+            {
+                // DOM WRITE!
+                // add the css class that this element has officially hydrated
+                elm.classList.add(HYDRATED_CLASS);
+            }
+            {
+                safeCall(instance, 'componentDidLoad');
+            }
+            {
+                hostRef.$onReadyResolve$(elm);
+            }
+            if (!ancestorComponent) {
+                // on appload
+                // we have finish the first big initial render
+                doc.documentElement.classList.add(HYDRATED_CLASS);
+                {
+                    setTimeout(() => plt.$flags$ |= 2 /* appLoaded */, 999);
+                }
+            }
+        }
+        // load events fire from bottom to top
+        // the deepest elements load first then bubbles up
+        if (ancestorComponent) {
+            // ok so this element already has a known ancestor component
+            // let's make sure we remove this element from its ancestor's
+            // known list of child elements which are actively loading
+            if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) {
+                // remove this element from the actively loading map
+                ancestorsActivelyLoadingChildren.delete(elm);
+                // the ancestor's initializeComponent method will do the actual checks
+                // to see if the ancestor is actually loaded or not
+                // then let's call the ancestor's initializeComponent method if there's no length
+                // (which actually ends up as this method again but for the ancestor)
+                if (ancestorsActivelyLoadingChildren.size === 0) {
+                    ancestorComponent['s-al'] = undefined;
+                    ancestorComponent['s-init']();
+                }
+            }
+            hostRef.$ancestorComponent$ = undefined;
+        }
+        // ( •_•)
+        // ( •_•)>⌐■-■
+        // (⌐■_■)
+    }
+};
+
+const disconnectedCallback = (elm) => {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        const hostRef = getHostRef(elm);
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$();
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
+        // clear CSS var-shim tracking
+        if (cssVarShim) {
+            cssVarShim.removeHost(elm);
+        }
+        const instance = hostRef.$lazyInstance$;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
+    }
+};
+
+const parsePropertyValue = (propValue, expectedPropType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && typeof propValue !== 'object' && typeof propValue !== 'function') {
+        if (expectedPropType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return (propValue === 'false' ? false : propValue === '' || !!propValue);
+        }
+        if (expectedPropType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (expectedPropType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+
+const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
+const setValue = (ref, propName, newVal, cmpMeta) => {
+    // check our new property value against our internal value
+    const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$;
+    const oldVal = hostRef.$instanceValues$.get(propName);
+    const flags = hostRef.$flags$;
+    newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+    if (newVal !== oldVal && (!(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
+        // gadzooks! the property's value has changed!!
+        // set our new value!
+        hostRef.$instanceValues$.set(propName, newVal);
+        if (hostRef.$lazyInstance$) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ &&
+                (flags & (1 /* hasConnected */ | 8 /* isConstructingInstance */)) === 1 /* hasConnected */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.forEach(watchMethodName => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            (hostRef.$lazyInstance$)[watchMethodName].call((hostRef.$lazyInstance$), newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e);
+                        }
+                    });
+                }
+            }
+            if ((flags & (4 /* isActiveRender */ | 2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+                // looks like this value actually changed, so we've got work to do!
+                // but only if we've already rendered, otherwise just chill out
+                // queue that we need to do an update, but don't worry about queuing
+                // up millions cuz this function ensures it only runs once
+                scheduleUpdate(elm, hostRef, cmpMeta, false);
+            }
+        }
+    }
+};
+
+const proxyComponent = (Cstr, cmpMeta, isElementConstructor, proxyState) => {
+    if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
+        // It's better to have a const than two Object.entries()
+        const members = Object.entries(cmpMeta.$members$);
+        members.forEach(([memberName, [memberFlags]]) => {
+            if ((memberFlags & 31) || (proxyState && (memberFlags & 32 /* State */))) {
+                // proxyComponent - prop
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    get() {
+                        // proxyComponent, get value
+                        return getValue(this, memberName);
+                    },
+                    set(newValue) {
+                        // proxyComponent, set value
+                        setValue(this, memberName, newValue, cmpMeta);
+                    },
+                    configurable: true,
+                    enumerable: true
+                });
+            }
+            else if (isElementConstructor && (memberFlags & 64 /* Method */)) {
+                // proxyComponent - method
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    value(...args) {
+                        const ref = getHostRef(this);
+                        return ref.$onReadyPromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                    }
+                });
+            }
+        });
+        if (isElementConstructor) {
+            const attrNameToPropName = new Map();
+            Cstr.prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+                const propName = attrNameToPropName.get(attrName);
+                this[propName] = newValue === null && typeof this[propName] === 'boolean'
+                    ? false
+                    : newValue;
+            };
+            // create an array of attributes to observe
+            // and also create a map of html attribute name to js property name
+            Cstr.observedAttributes = members
+                .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
+                .map(([propName, m]) => {
+                const attrName = m[1] || propName;
+                attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
+                return attrName;
+            });
+        }
+    }
+    return Cstr;
+};
+
+const addEventListeners = (elm, hostRef, listeners) => {
+    const removeFns = listeners.map(([flags, name, method]) => {
+        const target = (getHostListenerTarget(elm, flags));
+        const handler = hostListenerProxy(hostRef, method);
+        const opts = hostListenerOpts(flags);
+        plt.ael(target, name, handler, opts);
+        return () => plt.rel(target, name, handler, opts);
+    });
+    return () => removeFns.forEach(fn => fn());
+};
+const hostListenerProxy = (hostRef, methodName) => {
+    return (ev) => {
+        {
+            if (hostRef.$lazyInstance$) {
+                // instance is ready, let's call it's member method for this event
+                return hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                return hostRef.$onReadyPromise$.then(() => hostRef.$lazyInstance$[methodName](ev)).catch(consoleError);
+            }
+        }
+    };
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 16 /* TargetParent */)
+        return elm.parentElement;
+    return elm;
+};
+const hostListenerOpts = (flags) => supportsListenerOptions ?
+    {
+        'passive': (flags & 1 /* Passive */) !== 0,
+        'capture': (flags & 2 /* Capture */) !== 0,
+    }
+    : (flags & 2 /* Capture */) !== 0;
+
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+    // initializeComponent
+    if ((hostRef.$flags$ & 256 /* hasInitializedComponent */) === 0) {
+        // we haven't initialized this element yet
+        hostRef.$flags$ |= 256 /* hasInitializedComponent */;
+        {
+            // lazy loaded components
+            // request the component's implementation to be
+            // wired up with the host element
+            Cstr = await loadModule(cmpMeta, hostRef, hmrVersionId);
+            if (!Cstr.isProxied) {
+                // we'eve never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
+                proxyComponent(Cstr, cmpMeta, 0, 1);
+                Cstr.isProxied = true;
+            }
+            // ok, time to construct the instance
+            // but let's keep track of when we start and stop
+            // so that the getters/setters don't incorrectly step on data
+            {
+                hostRef.$flags$ |= 8 /* isConstructingInstance */;
+            }
+            // construct the lazy-loaded component implementation
+            // passing the hostRef is very important during
+            // construction in order to directly wire together the
+            // host element and the lazy-loaded instance
+            try {
+                new Cstr(hostRef);
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            {
+                hostRef.$flags$ &= ~8 /* isConstructingInstance */;
+            }
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
+        if (!Cstr.isStyleRegistered && Cstr.style) {
+            // this component has styles but we haven't registered them yet
+            let style = Cstr.style;
+            let scopeId = getScopeId(cmpMeta.$tagName$, hostRef.$modeName$);
+            if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+                style = await Promise.resolve(require('./shadow-css-984bac74-b2177096.js')).then(m => m.scopeCss(style, scopeId, false));
+            }
+            registerStyle(scopeId, style);
+            Cstr.isStyleRegistered = true;
+        }
+    }
+    // we've successfully created a lazy instance
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    if (ancestorComponent && !ancestorComponent['s-lr'] && ancestorComponent['s-rc']) {
+        // this is the intial load and this component it has an ancestor component
+        // but the ancestor component has NOT fired its will update lifecycle yet
+        // so let's just cool our jets and wait for the ancestor to continue first
+        ancestorComponent['s-rc'].push(() => 
+        // this will get fired off when the ancestor component
+        // finally gets around to rendering its lazy self
+        // fire off the initial update
+        initializeComponent(elm, hostRef, cmpMeta));
+    }
+    else {
+        scheduleUpdate(elm, hostRef, cmpMeta, true);
+    }
+};
+
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
+const connectedCallback = (elm, cmpMeta) => {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        // connectedCallback
+        const hostRef = getHostRef(elm);
+        if (cmpMeta.$listeners$) {
+            // initialize our event listeners on the host element
+            // we do this now so that we can listening to events that may
+            // have fired even before the instance is ready
+            hostRef.$rmListeners$ = addEventListeners(elm, hostRef, cmpMeta.$listeners$);
+        }
+        if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
+            // first time this component has connected
+            hostRef.$flags$ |= 1 /* hasConnected */;
+            let hostId;
+            if (!hostId) {
+                // initUpdate
+                // if the slot polyfill is required we'll need to put some nodes
+                // in here to act as original content anchors as we move nodes around
+                // host element has been connected to the DOM
+                if (cmpMeta.$flags$ & 4 ||
+                    (cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
+                    setContentReference(elm);
+                }
+            }
+            {
+                // find the first ancestor component (if there is one) and register
+                // this component as one of the actively loading child components for its ancestor
+                let ancestorComponent = elm;
+                while ((ancestorComponent = (ancestorComponent.parentNode || ancestorComponent.host))) {
+                    // climb up the ancestors looking for the first
+                    // component that hasn't finished its lifecycle update yet
+                    if ((ancestorComponent['s-init'] && !ancestorComponent['s-lr']) || (BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id'))) {
+                        // we found this components first ancestor component
+                        // keep a reference to this component's ancestor component
+                        hostRef.$ancestorComponent$ = ancestorComponent;
+                        // ensure there is an array to contain a reference to each of the child components
+                        // and set this component as one of the ancestor's child components it should wait on
+                        (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm);
+                        break;
+                    }
+                }
+            }
+            // Lazy properties
+            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+            if (cmpMeta.$members$) {
+                Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
+                    if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+                        const value = elm[memberName];
+                        delete elm[memberName];
+                        elm[memberName] = value;
+                    }
+                });
+            }
+            {
+                initializeComponent(elm, hostRef, cmpMeta);
+            }
+        }
+        fireConnectedCallback(hostRef.$lazyInstance$);
+    }
+};
+const setContentReference = (elm, contentRefElm) => {
+    // only required when we're NOT using native shadow dom (slot)
+    // or this browser doesn't support native shadow dom
+    // and this host element was NOT created with SSR
+    // let's pick out the inner content for slot projection
+    // create a node to represent where the original
+    // content was first placed, which is useful later on
+    let crName;
+    {
+        crName = '';
+    }
+    contentRefElm = elm['s-cr'] = doc.createComment(crName);
+    contentRefElm['s-cn'] = true;
+    elm.insertBefore(contentRefElm, elm.firstChild);
+};
+
+const bootstrapLazy = (lazyBundles, options = {}) => {
+    const cmpTags = [];
+    const exclude = options.exclude || [];
+    const head = doc.head;
+    const customElements = win.customElements;
+    const y = /*@__PURE__*/ head.querySelector('meta[charset]');
+    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    Object.assign(plt, options);
+    plt.$resourcesUrl$ = new URL(options.resourcesUrl || '/', doc.baseURI).href;
+    if (options.syncQueue) {
+        plt.$flags$ |= 4 /* queueSync */;
+    }
+    lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
+        const cmpMeta = {
+            $flags$: compactMeta[0],
+            $tagName$: compactMeta[1],
+            $members$: compactMeta[2],
+            $listeners$: compactMeta[3],
+        };
+        {
+            cmpMeta.$attrsToReflect$ = [];
+        }
+        {
+            cmpMeta.$watchers$ = {};
+        }
+        if (!supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+        }
+        const tagName = cmpMeta.$tagName$;
+        const HostElement = class extends HTMLElement {
+            // StencilLazyHost
+            constructor(self) {
+                // @ts-ignore
+                super(self);
+                self = this;
+                {
+                    this['s-lr'] = false;
+                    this['s-rc'] = [];
+                }
+                registerHost(self);
+                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                    // this component is using shadow dom
+                    // and this browser supports shadow dom
+                    // add the read-only property "shadowRoot" to the host element
+                    if (supportsShadowDom) {
+                        self.attachShadow({ 'mode': 'open' });
+                    }
+                    else if (!('shadowRoot' in self)) {
+                        self.shadowRoot = self;
+                    }
+                }
+            }
+            connectedCallback() {
+                connectedCallback(this, cmpMeta);
+            }
+            disconnectedCallback() {
+                disconnectedCallback(this);
+            }
+            's-init'() {
+                const hostRef = getHostRef(this);
+                if (hostRef.$lazyInstance$) {
+                    postUpdateComponent(this, hostRef);
+                }
+            }
+            's-hmr'(hmrVersionId) {
+            }
+            forceUpdate() {
+                {
+                    const hostRef = getHostRef(this);
+                    scheduleUpdate(this, hostRef, cmpMeta, false);
+                }
+            }
+            componentOnReady() {
+                return getHostRef(this).$onReadyPromise$;
+            }
+        };
+        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
+        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+            cmpTags.push(tagName);
+            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1, 0));
+        }
+    }));
+    // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}';
+    visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}';
+    visibilityStyle.setAttribute('data-styles', '');
+    head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild);
+};
+
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => elm.dispatchEvent(new (CustomEvent)(name, {
+            bubbles: !!(flags & 4 /* Bubbles */),
+            composed: !!(flags & 2 /* Composed */),
+            cancelable: !!(flags & 1 /* Cancellable */),
+            detail
+        }))
+    };
+};
+
+const getElement = (ref) => getHostRef(ref).$hostElement$;
+
+exports.Host = Host;
+exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
+exports.getElement = getElement;
+exports.h = h;
+exports.patchBrowser = patchBrowser;
+exports.patchEsm = patchEsm;
+exports.registerInstance = registerInstance;
diff --git a/dist/cjs/calcite-alert_8.cjs.entry.js b/dist/cjs/calcite-alert_8.cjs.entry.js
new file mode 100644
index 00000000000..a5f60adfd62
--- /dev/null
+++ b/dist/cjs/calcite-alert_8.cjs.entry.js
@@ -0,0 +1,400 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const __chunk_1 = require('./calcite-15323450.js');
+
+// File generated automatically by path-data.js, do not edit directly
+const checkCircle24F = "M23 11.5A11.5 11.5 0 1 1 11.5 0 11.5 11.5 0 0 1 23 11.5zm-5.5-6.018l-8.5 8.5-3.5-3.5-2 2L9.018 18l.018-.018L11.018 16l8.5-8.5z";
+const exclamationMarkTriangle24F = "M22.3 19.795l-9-17.901a1.5 1.5 0 0 0-2.597 0L1.7 19.795a1.502 1.502 0 0 0 0 1.502A1.456 1.456 0 0 0 2.998 22H21a1.458 1.458 0 0 0 1.299-.703 1.506 1.506 0 0 0 .001-1.502zM13 19h-2v-2h2zm0-3h-2V8h2z";
+const lightbulb24F = "M11 13h1v4h-1zm3.895 5.45a.311.311 0 0 0-.12-.27l-.232-.18h-6.19l-.232.18a.312.312 0 0 0 .04.518l1.387.771-1.367.76a.311.311 0 0 0-.028.526l3.09 2.18a.356.356 0 0 0 .41 0l3.09-2.18a.311.311 0 0 0-.029-.527l-1.366-.759 1.388-.77a.312.312 0 0 0 .159-.25zM11.59 0l-.173.002L11.244 0a6.2 6.2 0 0 0-6.182 6.698c.31 2.575 2.784 5.207 2.939 6.134.13.78.116 1.844.199 2.472A2.542 2.542 0 0 0 9.088 17H10v-4.412L8.83 9.37l.94-.342L10.85 12h1.3l1.08-2.97.94.341L13 12.588V17h.745a2.542 2.542 0 0 0 .889-1.696c.083-.628.068-1.692.199-2.472.154-.927 2.628-3.559 2.938-6.134A6.2 6.2 0 0 0 11.59 0z";
+const x32 = "M16.707 16l10.607 10.606-.708.707L16 16.707 5.394 27.313l-.708-.707L15.293 16 4.686 5.394l.708-.707L16 15.293 26.606 4.687l.708.707z";
+
+const createProviderConsumer = (defaultState, consumerRender) => {
+    let listeners = new Map();
+    let currentState = defaultState;
+    const updateListener = (fields, instance) => {
+        if (Array.isArray(fields)) {
+            [...fields].forEach(fieldName => {
+                instance[fieldName] = currentState[fieldName];
+            });
+        }
+        else {
+            instance[fields] = Object.assign({}, currentState);
+        }
+    };
+    const subscribe = (instance, propList) => {
+        if (!listeners.has(instance)) {
+            listeners.set(instance, propList);
+            updateListener(propList, instance);
+        }
+        return () => {
+            if (listeners.has(instance)) {
+                listeners.delete(instance);
+            }
+        };
+    };
+    const Provider = ({ state }, children) => {
+        currentState = state;
+        listeners.forEach(updateListener);
+        return children;
+    };
+    const Consumer = (props, children) => {
+        // The casting on subscribe is to allow for crossover through the stencil compiler
+        // In the future we should allow for generics in components.
+        return consumerRender(subscribe, children[0]);
+    };
+    const injectProps = (Cstr, fieldList) => {
+        const CstrPrototype = Cstr.prototype;
+        const cstrConnectedCallback = CstrPrototype.connectedCallback;
+        const cstrDisconnectedCallback = CstrPrototype.disconnectedCallback;
+        CstrPrototype.connectedCallback = function () {
+            subscribe(this, fieldList);
+            if (cstrConnectedCallback) {
+                return cstrConnectedCallback.call(this);
+            }
+        };
+        CstrPrototype.disconnectedCallback = function () {
+            listeners.delete(this);
+            if (cstrDisconnectedCallback) {
+                cstrDisconnectedCallback.call(this);
+            }
+        };
+    };
+    return {
+        Provider,
+        Consumer,
+        injectProps
+    };
+};
+
+const AlertInterface = createProviderConsumer({
+    currentAlert: '',
+    queueLength: 0
+}, (subscribe, child) => (__chunk_1.h("context-consumer", { subscribe: subscribe, renderer: child })));
+
+class CalciteAlert {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.currentAlert = '';
+        this.dismiss = false;
+        this.icon = false;
+        this.id = '1';
+        this.queueLength = 0;
+        this.color = 'blue';
+        this.theme = null;
+        this.duration = this.dismiss ? 'medium' : null;
+        this.isActive = this.id === this.currentAlert;
+        this.alertClose = __chunk_1.createEvent(this, "alertClose", 7);
+        this.alertOpen = __chunk_1.createEvent(this, "alertOpen", 7);
+    }
+    async close() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.alertClose.emit(this.id);
+        }
+    }
+    componentWillUpdate() {
+        this.isActive = this.currentAlert === this.id;
+        if (this.isActive)
+            this.alertOpen.emit(this.id);
+        if (this.isActive && this.dismiss)
+            setTimeout(() => { this.close(); }, this.duration === 'fast' ? 6000 : this.duration === 'slow' ? 14000 : 10000);
+    }
+    setIcon() {
+        var path = this.color === 'green' ? checkCircle24F : (this.color === 'red' || this.color === 'yellow') ? exclamationMarkTriangle24F : lightbulb24F;
+        return (__chunk_1.h("div", { class: "alert-icon" }, __chunk_1.h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '24', width: '24', viewBox: '0 0 24 24' }, __chunk_1.h("path", { d: path }))));
+    }
+    render() {
+        const closeButton = (__chunk_1.h("button", { class: "alert-close", "aria-label": "close", onClick: () => this.close() }, __chunk_1.h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '32', width: '32', viewBox: '0 0 32 32' }, __chunk_1.h("path", { d: x32 }))));
+        const close = !this.dismiss ? closeButton : '';
+        const icon = this.icon ? this.setIcon() : '';
+        const count = __chunk_1.h("div", { class: `${this.queueLength > 0 ? 'is-active ' : ''}alert-count` }, "+", this.queueLength > 0 ? this.queueLength : 1);
+        const progress = this.isActive && this.dismiss ? __chunk_1.h("div", { class: "alert-dismiss" }) : '';
+        return (__chunk_1.h(__chunk_1.Host, { theme: this.theme, "is-active": !!this.isActive, duration: this.duration }, icon, __chunk_1.h("div", { class: "alert-content" }, __chunk_1.h("slot", { name: "alert-title" }), __chunk_1.h("slot", { name: "alert-message" }), __chunk_1.h("slot", { name: "alert-link" })), count, close, progress));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:relative;-ms-flex-pack:center;justify-content:center;right:0;left:0;margin-right:auto;margin-left:auto;z-index:100;width:50em;max-width:90%;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,.15);box-shadow:0 0 12px 0 rgba(0,0,0,.15);height:0;opacity:0;overflow:visible;display:-ms-flexbox;display:flex;border-top:3px solid;-webkit-transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;-webkit-transform:translate3d(0,1.5rem,0);transform:translate3d(0,1.5rem,0);pointer-events:none;border-width:0}\@media only screen and (max-width:600px){:host{max-width:100%;border-radius:2px 2px 0 0;-webkit-box-shadow:0 -6px 12px 0 rgba(0,0,0,.15);box-shadow:0 -6px 12px 0 rgba(0,0,0,.15)}}:host([is-active]){visibility:visible;border-width:3px;opacity:1;height:100%;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto}:host slot[name=alert-title]::slotted(div){display:block;font-weight:500;font-size:16px}:host slot[name=alert-link]::slotted(a){display:inline-block;font-size:15px;color:#007ac2}:host slot[name=alert-message]::slotted(div){font-size:15px;color:#555;display:inline;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host([theme=dark]){background-color:#2b2b2b}:host([theme=dark]) slot[name=alert-title]::slotted(div){color:#f8f8f8}:host([theme=dark]) slot[name=alert-message]::slotted(div){color:#f3f3f3}.alert-content{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;word-wrap:break-word;-webkit-padding-before:.75rem;padding-block-start:.75rem;-webkit-padding-after:.75rem;padding-block-end:.75rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}\@media only screen and (max-width:600px){.alert-content{padding:1.5rem}}.alert-content svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-content:first-of-type{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}\@media only screen and (max-width:600px){.alert-content{-webkit-padding-before:1.5rem;padding-block-start:1.5rem;-webkit-padding-after:1.5rem;padding-block-end:1.5rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}}.alert-icon{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (max-width:600px){.alert-icon{padding:1.5rem}}.alert-icon svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-close{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-appearance:none;background-color:transparent;border:none;outline:none;cursor:pointer;border-radius:0 0 2px 0}\@media only screen and (max-width:600px){.alert-close{padding:1.5rem}}.alert-close svg{position:relative;vertical-align:top;height:16px;width:16px;fill:#151515}.alert-close:focus,.alert-close:hover{background-color:#f3f3f3}.alert-close:active{background-color:#eaeaea}.alert-close:last-child{border-radius:0 0 2px 0}:host([dir=rtl]) .alert-close:last-child{border-radius:0 0 0 2px}\@media only screen and (max-width:600px){.alert-close{border-radius:0}}:host([theme=dark]) .alert-close svg{fill:#d4d4d4}:host([theme=dark]) .alert-close:focus,:host([theme=dark]) .alert-close:hover{background-color:#202020}:host([theme=dark]) .alert-close:active{background-color:#151515}.alert-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:0;font-size:14px;visibility:hidden;padding:0;font-weight:500;text-align:center;background-color:transparent;color:#757575;opacity:0;border-left:1px solid transparent;border-right:1px solid transparent;cursor:default}.alert-count.is-active{visibility:visible;-webkit-transition-delay:.3s;transition-delay:.3s;opacity:1;padding:0 .375rem;width:3rem;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3}.alert-count.is-active:last-child{border-right-color:transparent}\@media only screen and (max-width:600px){.alert-count{border-radius:0}}:host([theme=dark]) .alert-count{color:#d4d4d4}:host([theme=dark]) .alert-count.is-active{border-left:1px solid #202020;border-right:1px solid #202020}.alert-dismiss{left:0;top:0;z-index:101}.alert-dismiss,.alert-dismiss:after{display:block;position:absolute;right:0;height:3px}.alert-dismiss:after{top:-3px;border-radius:2px 2px 0 0;content:\"\";width:50%;background-color:hsla(0,0%,100%,.6);-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;z-index:200}:host([theme=dark]) .alert-dismiss:after{background-color:rgba(43,43,43,.6)}:host([duration=fast]) .alert-dismiss:after{-webkit-animation:dismissProgress 6s linear;animation:dismissProgress 6s linear}:host([duration=medium]) .alert-dismiss:after{-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear}:host([duration=slow]) .alert-dismiss:after{-webkit-animation:dismissProgress 14s linear;animation:dismissProgress 14s linear}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([color=blue]){border-top-color:#007ac2}:host([color=blue]) .alert-icon svg{fill:#007ac2}:host([color=red]){border-top-color:#d83020}:host([color=red]) .alert-icon svg{fill:#d83020}:host([color=yellow]){border-top-color:#edd317}:host([color=yellow]) .alert-icon svg{fill:#edd317}:host([color=green]){border-top-color:#35ac46}:host([color=green]) .alert-icon svg{fill:#35ac46}"; }
+}
+AlertInterface.injectProps(CalciteAlert, ['currentAlert', 'queueLength']);
+
+class CalciteAlerts {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.id = '1';
+        this.currentAlert = '';
+        this.isActive = false;
+        this.queue = [];
+        this.alertsClose = __chunk_1.createEvent(this, "alertsClose", 7);
+        this.alertsOpen = __chunk_1.createEvent(this, "alertsOpen", 7);
+    }
+    async open(requestedAlert) {
+        if (!this.queue.includes(requestedAlert)) {
+            this.isActive = true;
+            this.currentAlert = requestedAlert;
+            this.queue.push(requestedAlert);
+            this.alertsOpen.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+        }
+    }
+    updateQueue(event) {
+        if (this.queue.includes(event.detail))
+            this.queue = this.queue.filter(e => e !== event.detail);
+        if (this.queue.length < 1)
+            setTimeout(() => { this.isActive = false; }, 300);
+        this.alertsClose.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+    }
+    componentWillUpdate() {
+        this.currentAlert = this.queue.length > 0 ? this.queue[0] : '';
+    }
+    render() {
+        const alertState = {
+            currentAlert: this.currentAlert,
+            queueLength: this.queue.length >= 2 ? this.queue.length - 1 : 0
+        };
+        return (__chunk_1.h(__chunk_1.Host, { "is-active": !!this.isActive }, __chunk_1.h(AlertInterface.Provider, { state: alertState }, __chunk_1.h("slot", null))));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:fixed;visibility:hidden;opacity:0;left:0;right:0;bottom:1.5rem;height:0;z-index:101;pointer-events:none;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s}\@media only screen and (max-width:600px){:host{bottom:0}}:host([is-active]){height:auto;visibility:visible;opacity:1}"; }
+}
+
+class CalciteLoader {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.isActive = false;
+        this.text = "Loading...";
+    }
+    render() {
+        return (__chunk_1.h(__chunk_1.Host, { "is-active": !!this.isActive }, __chunk_1.h("div", { class: "loader-bars" }), __chunk_1.h("div", { class: "loader-text" }, this.text)));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host .loader-bars,:host .loader-bars:after,:host .loader-bars:before{background:#007ac2;-webkit-animation:load .8s ease-in-out infinite;animation:load .8s ease-in-out infinite;width:.85rem;height:2rem}:host .loader-bars:after,:host .loader-bars:before{position:absolute;top:0;content:\"\"}:host{position:relative;display:none;padding-bottom:4.5rem;padding-top:4.5rem}:host([is-active]){display:block}:host .loader-bars{text-indent:-9999em;margin:auto;position:absolute;right:calc(50% - .425rem);font-size:11px;-webkit-animation-delay:.16s;animation-delay:.16s}:host .loader-bars:before{left:-1.25rem}:host .loader-bars:after{left:1.25rem;-webkit-animation-delay:.32s;animation-delay:.32s}:host .loader-text{padding-top:4rem;text-align:center}\@-webkit-keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}\@keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}"; }
+}
+
+function format(first, middle, last) {
+    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+}
+
+class CalciteModal {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+    }
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return __chunk_1.h("div", { class: "example-class" }, "Hello, World! I'm ", this.getText());
+    }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.example-class{padding:1.5rem;color:#d83020;-webkit-box-shadow:0 0 16px 0 rgba(0,0,0,.05);box-shadow:0 0 16px 0 rgba(0,0,0,.05);border:1px solid #007ac2}"; }
+}
+
+// from https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples
+function random() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0] / 1e10;
+}
+function gen(count) {
+    var out = "";
+    for (var i = 0; i < count; i++) {
+        out += (((1 + random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return out;
+}
+function guid() {
+    return [gen(2), gen(1), gen(1), gen(1), gen(3)].join("-");
+}
+
+class CalciteTab {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.id = `calite-tab-${guid()}`;
+        this.isActive = false;
+        this.calciteRegisterTab = __chunk_1.createEvent(this, "calciteRegisterTab", 7);
+    }
+    tabChangeHandler(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTab.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"), this.el));
+    }
+    async registerLabeledBy(id) {
+        this.labeledBy = id;
+    }
+    render() {
+        return (__chunk_1.h(__chunk_1.Host, { "aria-labeledby": this.labeledBy, "aria-expanded": this.isActive ? "true" : "false", role: "tabpanel" }, __chunk_1.h("section", null, __chunk_1.h("slot", null))));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([is-active]) section{display:block}section{display:none}"; }
+}
+
+class CalciteTabNav {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.id = `calite-tab-nav-${guid()}`;
+        this.selectedTab = 0;
+        this.calciteTabChange = __chunk_1.createEvent(this, "calciteTabChange", 7);
+    }
+    selectedTabChanged() {
+        this.calciteTabChange.emit({
+            tab: this.selectedTab
+        });
+    }
+    focusPreviousTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const previousTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+        previousTab.focus();
+    }
+    focusNextTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const nextTab = tabs[currentIndex + 1] || tabs[0];
+        nextTab.focus();
+    }
+    tabTitleRegistationHandler(e) {
+        e.target.setControledBy(this.id);
+    }
+    activateTabHandler(e) {
+        if (e.detail.tab) {
+            this.selectedTab = e.detail.tab;
+        }
+        else {
+            this.selectedTab = this.getIndexOfTabTitle(e.target);
+        }
+    }
+    getIndexOfTabTitle(el) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        return [...tabs].indexOf(el);
+    }
+    componentWillLoad() {
+        this.selectedTabChanged();
+    }
+    render() {
+        return (__chunk_1.h(__chunk_1.Host, { role: "tablist" }, __chunk_1.h("nav", { class: "tab-nav" }, __chunk_1.h("slot", null))));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get watchers() { return {
+        "selectedTab": ["selectedTabChanged"]
+    }; }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.tab-nav{display:-ms-flexbox;display:flex;padding:.5rem 0}::slotted(calcite-tab-title){margin-right:1.25rem}:host([dir=rtl]) ::slotted(calcite-tab-title){margin-right:0;margin-left:1.25rem}"; }
+}
+
+const ENTER = 13;
+const SPACE = 32;
+const LEFT = 37;
+const RIGHT = 39;
+
+class CalciteTabTitle {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.id = `calite-tab-title-${guid()}`;
+        this.isActive = false;
+        this.calciteActivateTab = __chunk_1.createEvent(this, "calciteActivateTab", 7);
+        this.calciteFocusNextTab = __chunk_1.createEvent(this, "calciteFocusNextTab", 7);
+        this.calciteFocusPreviousTab = __chunk_1.createEvent(this, "calciteFocusPreviousTab", 7);
+        this.calciteRegisterTabTitle = __chunk_1.createEvent(this, "calciteRegisterTabTitle", 7);
+    }
+    tabChangeHand(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    onClick() {
+        this.calciteActivateTab.emit({
+            tab: this.tab
+        });
+    }
+    keyDownHandler(e) {
+        switch (e.keyCode) {
+            case SPACE:
+            case ENTER:
+                this.onClick();
+                break;
+            case RIGHT:
+                this.calciteFocusNextTab.emit();
+                break;
+            case LEFT:
+                this.calciteFocusPreviousTab.emit();
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTabTitle.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el));
+    }
+    async setControledBy(id) {
+        this.controls = id;
+    }
+    render() {
+        return (__chunk_1.h(__chunk_1.Host, { "aria-controls": this.controls, "aria-expanded": this.isActive ? "true" : "false", role: "tab", tabindex: "0" }, __chunk_1.h("a", null, __chunk_1.h("slot", null))));
+    }
+    get el() { return __chunk_1.getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{-ms-flex:0 1 auto;flex:0 1 auto;outline:none}:host(:active) a,:host(:focus) a,:host(:hover) a{outline:none;text-decoration:none;color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-hover)}:host([is-active]) a{color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-active)}a{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:.875rem;line-height:1.5;padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid transparent;cursor:pointer;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;color:var(--calcite-tabs-color);outline:none}"; }
+}
+
+class CalciteTabs {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.tabs = {};
+        this.tabTitles = {};
+        this.theme = "light";
+    }
+    tabTitleRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabTitles[index] = {
+            id: id,
+            title: e.target
+        };
+        if (this.tabs[index]) {
+            this.tabs[index].tab.registerLabeledBy(id);
+        }
+    }
+    tabRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabs[index] = {
+            id: id,
+            tab: e.target
+        };
+        if (this.tabTitles[index]) {
+            this.tabs[index].tab.registerLabeledBy(this.tabTitles[index].id);
+        }
+    }
+    render() {
+        return (__chunk_1.h("div", null, __chunk_1.h("slot", { name: "tab-nav" }), __chunk_1.h("section", { class: "tab-contents" }, __chunk_1.h("slot", null))));
+    }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{--calcite-tabs-color:#2b2b2b;--calcite-tabs-border:#eaeaea;--calcite-tabs-border-hover:#dfdfdf;--calcite-tabs-color-active:#151515;--calcite-tabs-border-active:#007ac2}:host([theme=dark]){--calcite-tabs-color:#f3f3f3;--calcite-tabs-border:#404040;--calcite-tabs-border-hover:#757575;--calcite-tabs-color-active:#f8f8f8;--calcite-tabs-border-active:#fff}.tab-contents{margin-top:1px;border-top:1px solid var(--calcite-tabs-border)}"; }
+}
+
+exports.calcite_alert = CalciteAlert;
+exports.calcite_alerts = CalciteAlerts;
+exports.calcite_loader = CalciteLoader;
+exports.calcite_modal = CalciteModal;
+exports.calcite_tab = CalciteTab;
+exports.calcite_tab_nav = CalciteTabNav;
+exports.calcite_tab_title = CalciteTabTitle;
+exports.calcite_tabs = CalciteTabs;
diff --git a/dist/cjs/calcite.cjs.js b/dist/cjs/calcite.cjs.js
new file mode 100644
index 00000000000..4383aa2115f
--- /dev/null
+++ b/dist/cjs/calcite.cjs.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const __chunk_1 = require('./calcite-15323450.js');
+
+__chunk_1.patchBrowser().then(resourcesUrl => {
+  return __chunk_1.bootstrapLazy([["calcite-alert_8.cjs",[[1,"calcite-alert",{"currentAlert":[1,"current-alert"],"dismiss":[4],"icon":[4],"id":[1],"queueLength":[2,"queue-length"],"color":[513],"theme":[513],"duration":[513],"isActive":[32],"close":[64]}],[1,"calcite-alerts",{"id":[1],"currentAlert":[32],"isActive":[32],"queue":[32],"open":[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{"isActive":[4,"is-active"],"text":[1]}],[1,"calcite-modal",{"first":[1],"middle":[1],"last":[1]}],[1,"calcite-tab",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"labeledBy":[32],"getTabIndex":[64],"registerLabeledBy":[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{"id":[1537],"selectedTab":[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"controls":[32],"getTabIndex":[64],"setControledBy":[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{"theme":[513],"tabs":[32],"tabTitles":[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["context-consumer.cjs",[[0,"context-consumer",{"context":[16],"renderer":[16],"subscribe":[16],"unsubscribe":[32]}]]]], { resourcesUrl });
+});
diff --git a/dist/cjs/context-consumer.cjs.entry.js b/dist/cjs/context-consumer.cjs.entry.js
new file mode 100644
index 00000000000..a5ae018df15
--- /dev/null
+++ b/dist/cjs/context-consumer.cjs.entry.js
@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const __chunk_1 = require('./calcite-15323450.js');
+
+class ContextConsumer {
+    constructor(hostRef) {
+        __chunk_1.registerInstance(this, hostRef);
+        this.context = {};
+        this.renderer = () => null;
+    }
+    connectedCallback() {
+        if (this.subscribe != null) {
+            this.unsubscribe = this.subscribe(this.el, 'context');
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe != null) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        return this.renderer(Object.assign({}, this.context));
+    }
+    get el() { return __chunk_1.getElement(this); }
+}
+
+exports.context_consumer = ContextConsumer;
diff --git a/dist/cjs/css-shim-229ebf7a-56ba83b5.js b/dist/cjs/css-shim-229ebf7a-56ba83b5.js
new file mode 100644
index 00000000000..e1a9712912b
--- /dev/null
+++ b/dist/cjs/css-shim-229ebf7a-56ba83b5.js
@@ -0,0 +1,630 @@
+'use strict';
+
+/*
+Extremely simple css parser. Intended to be not more than what we need
+and definitely not necessarily correct =).
+*/
+/** @unrestricted */
+var StyleNode = /** @class */ (function () {
+    function StyleNode() {
+        this.start = 0;
+        this.end = 0;
+        this.previous = null;
+        this.parent = null;
+        this.rules = null;
+        this.parsedCssText = '';
+        this.cssText = '';
+        this.atRule = false;
+        this.type = 0;
+        this.keyframesName = '';
+        this.selector = '';
+        this.parsedSelector = '';
+    }
+    return StyleNode;
+}());
+// given a string of css, return a simple rule tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+}
+// remove stuff we don't care about that may hinder parsing
+/**
+ * @param {string} cssText
+ * @return {string}
+ */
+function clean(cssText) {
+    return cssText.replace(RX.comments, '').replace(RX.port, '');
+}
+// super simple {...} lexer that returns a node tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function lex(text) {
+    var root = new StyleNode();
+    root['start'] = 0;
+    root['end'] = text.length;
+    var n = root;
+    for (var i = 0, l = text.length; i < l; i++) {
+        if (text[i] === OPEN_BRACE) {
+            if (!n['rules']) {
+                n['rules'] = [];
+            }
+            var p = n;
+            var previous = p['rules'][p['rules'].length - 1] || null;
+            n = new StyleNode();
+            n['start'] = i + 1;
+            n['parent'] = p;
+            n['previous'] = previous;
+            p['rules'].push(n);
+        }
+        else if (text[i] === CLOSE_BRACE) {
+            n['end'] = i + 1;
+            n = n['parent'] || root;
+        }
+    }
+    return root;
+}
+// add selectors/cssText to node tree
+/**
+ * @param {StyleNode} node
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parseCss(node, text) {
+    var t = text.substring(node['start'], node['end'] - 1);
+    node['parsedCssText'] = node['cssText'] = t.trim();
+    if (node.parent) {
+        var ss = node.previous ? node.previous['end'] : node.parent['start'];
+        t = text.substring(ss, node['start'] - 1);
+        t = _expandUnicodeEscapes(t);
+        t = t.replace(RX.multipleSpaces, ' ');
+        // TODO(sorvell): ad hoc; make selector include only after last ;
+        // helps with mixin syntax
+        t = t.substring(t.lastIndexOf(';') + 1);
+        var s = node['parsedSelector'] = node['selector'] = t.trim();
+        node['atRule'] = (s.indexOf(AT_START) === 0);
+        // note, support a subset of rule types...
+        if (node['atRule']) {
+            if (s.indexOf(MEDIA_START) === 0) {
+                node['type'] = types.MEDIA_RULE;
+            }
+            else if (s.match(RX.keyframesRule)) {
+                node['type'] = types.KEYFRAMES_RULE;
+                node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop();
+            }
+        }
+        else {
+            if (s.indexOf(VAR_START) === 0) {
+                node['type'] = types.MIXIN_RULE;
+            }
+            else {
+                node['type'] = types.STYLE_RULE;
+            }
+        }
+    }
+    var r$ = node['rules'];
+    if (r$) {
+        for (var i = 0, l = r$.length, r = void 0; (i < l) && (r = r$[i]); i++) {
+            parseCss(r, text);
+        }
+    }
+    return node;
+}
+/**
+ * conversion of sort unicode escapes with spaces like `\33 ` (and longer) into
+ * expanded form that doesn't require trailing space `\000033`
+ * @param {string} s
+ * @return {string}
+ */
+function _expandUnicodeEscapes(s) {
+    return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () {
+        var code = arguments[1], repeat = 6 - code.length;
+        while (repeat--) {
+            code = '0' + code;
+        }
+        return '\\' + code;
+    });
+}
+/** @enum {number} */
+var types = {
+    STYLE_RULE: 1,
+    KEYFRAMES_RULE: 7,
+    MEDIA_RULE: 4,
+    MIXIN_RULE: 1000
+};
+var OPEN_BRACE = '{';
+var CLOSE_BRACE = '}';
+// helper regexp's
+var RX = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
+    keyframesRule: /^@[^\s]*keyframes/,
+    multipleSpaces: /\s+/g
+};
+var VAR_START = '--';
+var MEDIA_START = '@media';
+var AT_START = '@';
+function findRegex(regex, cssText, offset) {
+    regex['lastIndex'] = 0;
+    var r = cssText.substring(offset).match(regex);
+    if (r) {
+        var start = offset + r['index'];
+        return {
+            start: start,
+            end: start + r[0].length
+        };
+    }
+    return null;
+}
+var VAR_USAGE_START = /\bvar\(/;
+var VAR_ASSIGN_START = /\B--[\w-]+\s*:/;
+var COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim;
+var TRAILING_LINES = /^[\t ]+\n/gm;
+function resolveVar(props, prop, fallback) {
+    if (props[prop]) {
+        return props[prop];
+    }
+    if (fallback) {
+        return executeTemplate(fallback, props);
+    }
+    return '';
+}
+function findVarEndIndex(cssText, offset) {
+    var count = 0;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (c === '(') {
+            count++;
+        }
+        else if (c === ')') {
+            count--;
+            if (count <= 0) {
+                return i + 1;
+            }
+        }
+    }
+    return i;
+}
+function parseVar(cssText, offset) {
+    var varPos = findRegex(VAR_USAGE_START, cssText, offset);
+    if (!varPos) {
+        return null;
+    }
+    var endVar = findVarEndIndex(cssText, varPos.start);
+    var varContent = cssText.substring(varPos.end, endVar - 1);
+    var _a = varContent.split(','), propName = _a[0], fallback = _a.slice(1);
+    return {
+        start: varPos.start,
+        end: endVar,
+        propName: propName.trim(),
+        fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined
+    };
+}
+function compileVar(cssText, template, offset) {
+    var varMeta = parseVar(cssText, offset);
+    if (!varMeta) {
+        template.push(cssText.substring(offset, cssText.length));
+        return cssText.length;
+    }
+    var propName = varMeta.propName;
+    var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined;
+    template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); });
+    return varMeta.end;
+}
+function executeTemplate(template, props) {
+    var final = '';
+    for (var i = 0; i < template.length; i++) {
+        var s = template[i];
+        final += (typeof s === 'string')
+            ? s
+            : s(props);
+    }
+    return final;
+}
+function findEndValue(cssText, offset) {
+    var onStr = false;
+    var double = false;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (onStr) {
+            if (double && c === '"') {
+                onStr = false;
+            }
+            if (!double && c === '\'') {
+                onStr = false;
+            }
+        }
+        else {
+            if (c === '"') {
+                onStr = true;
+                double = true;
+            }
+            else if (c === '\'') {
+                onStr = true;
+                double = false;
+            }
+            else if (c === ';') {
+                return i + 1;
+            }
+            else if (c === '}') {
+                return i;
+            }
+        }
+    }
+    return i;
+}
+function removeCustomAssigns(cssText) {
+    var final = '';
+    var offset = 0;
+    while (true) {
+        var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset);
+        var start = assignPos ? assignPos.start : cssText.length;
+        final += cssText.substring(offset, start);
+        if (assignPos) {
+            offset = findEndValue(cssText, start);
+        }
+        else {
+            break;
+        }
+    }
+    return final;
+}
+function compileTemplate(cssText) {
+    var index = 0;
+    cssText = cssText.replace(COMMENTS, '');
+    cssText = removeCustomAssigns(cssText)
+        .replace(TRAILING_LINES, '');
+    var segments = [];
+    while (index < cssText.length) {
+        index = compileVar(cssText, segments, index);
+    }
+    return segments;
+}
+function resolveValues(selectors) {
+    var props = {};
+    selectors.forEach(function (selector) {
+        selector.declarations.forEach(function (dec) {
+            props[dec.prop] = dec.value;
+        });
+    });
+    var propsValues = {};
+    var entries = Object.entries(props);
+    var _loop_1 = function (i) {
+        var dirty = false;
+        entries.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var propValue = executeTemplate(value, propsValues);
+            if (propValue !== propsValues[key]) {
+                propsValues[key] = propValue;
+                dirty = true;
+            }
+        });
+        if (!dirty) {
+            return "break";
+        }
+    };
+    for (var i = 0; i < 10; i++) {
+        var state_1 = _loop_1(i);
+        if (state_1 === "break")
+            break;
+    }
+    return propsValues;
+}
+function getSelectors(root, index) {
+    if (index === void 0) { index = 0; }
+    if (!root.rules) {
+        return [];
+    }
+    var selectors = [];
+    root.rules
+        .filter(function (rule) { return rule.type === types.STYLE_RULE; })
+        .forEach(function (rule) {
+        var declarations = getDeclarations(rule.cssText);
+        if (declarations.length > 0) {
+            rule.parsedSelector.split(',').forEach(function (selector) {
+                selector = selector.trim();
+                selectors.push({
+                    selector: selector,
+                    declarations: declarations,
+                    specificity: computeSpecificity(selector),
+                    nu: index
+                });
+            });
+        }
+        index++;
+    });
+    return selectors;
+}
+function computeSpecificity(_selector) {
+    return 1;
+}
+var IMPORTANT = '!important';
+var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;
+function getDeclarations(cssText) {
+    var declarations = [];
+    var xArray;
+    while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) {
+        var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important;
+        declarations.push({
+            prop: xArray[1].trim(),
+            value: compileTemplate(value),
+            important: important,
+        });
+    }
+    return declarations;
+}
+function normalizeValue(value) {
+    var regex = /\s+/gim;
+    value = value.replace(regex, ' ').trim();
+    var important = value.endsWith(IMPORTANT);
+    if (important) {
+        value = value.substr(0, value.length - IMPORTANT.length).trim();
+    }
+    return {
+        value: value,
+        important: important
+    };
+}
+function getActiveSelectors(hostEl, hostScopeMap, globalScopes) {
+    // computes the css scopes that might affect this particular element
+    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // each scope might have an array of associated selectors
+    // let's flatten the complete array of selectors from all the scopes
+    var selectorSet = getSelectorsForScopes(scopes);
+    // we filter to only the selectors that matches the hostEl
+    var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); });
+    // sort selectors by specifity
+    return sortSelectors(activeSelectors);
+}
+function getScopesForElement(hostTemplateMap, node) {
+    var scopes = [];
+    while (node) {
+        var scope = hostTemplateMap.get(node);
+        if (scope) {
+            scopes.push(scope);
+        }
+        node = node.parentElement;
+    }
+    return scopes;
+}
+function getSelectorsForScopes(scopes) {
+    var selectors = [];
+    scopes.forEach(function (scope) {
+        selectors.push.apply(selectors, scope.selectors);
+    });
+    return selectors;
+}
+function sortSelectors(selectors) {
+    selectors.sort(function (a, b) {
+        if (a.specificity === b.specificity) {
+            return a.nu - b.nu;
+        }
+        return a.specificity - b.specificity;
+    });
+    return selectors;
+}
+function matches(el, selector) {
+    return el.matches(selector);
+}
+function parseCSS(original) {
+    var ast = parse(original);
+    var template = compileTemplate(original);
+    var selectors = getSelectors(ast);
+    return {
+        original: original,
+        template: template,
+        selectors: selectors,
+        isDynamic: template.length > 1
+    };
+}
+function addGlobalStyle(globalScopes, styleEl) {
+    var css = parseCSS(styleEl.innerHTML);
+    css.styleEl = styleEl;
+    globalScopes.push(css);
+}
+function updateGlobalScopes(scopes) {
+    var selectors = getSelectorsForScopes(scopes);
+    var props = resolveValues(selectors);
+    scopes.forEach(function (scope) {
+        if (scope.isDynamic) {
+            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+        }
+    });
+}
+function reScope(scope, cssScopeId) {
+    var template = scope.template.map(function (segment) {
+        return (typeof segment === 'string')
+            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            : segment;
+    });
+    var selectors = scope.selectors.map(function (sel) {
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+    });
+    return Object.assign({}, scope, { template: template,
+        selectors: selectors,
+        cssScopeId: cssScopeId });
+}
+function replaceScope(original, oldScopeId, newScopeId) {
+    original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId);
+    return original;
+}
+function replaceAll(input, find, replace) {
+    return input.replace(new RegExp(find, 'g'), replace);
+}
+function loadDocument(doc, globalScopes) {
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        loadDocumentStyles(doc, globalScopes);
+    });
+}
+function loadDocumentLinks(doc, globalScopes) {
+    var promises = [];
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    for (var i = 0; i < linkElms.length; i++) {
+        promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
+    }
+    return Promise.all(promises);
+}
+function loadDocumentStyles(doc, globalScopes) {
+    var styleElms = doc.querySelectorAll('style');
+    for (var i = 0; i < styleElms.length; i++) {
+        addGlobalStyle(globalScopes, styleElms[i]);
+    }
+}
+function addGlobalLink(doc, globalScopes, linkElm) {
+    var url = linkElm.href;
+    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
+        if (hasCssVariables(text) && linkElm.parentNode) {
+            if (hasRelativeUrls(text)) {
+                text = fixRelativeUrls(text, url);
+            }
+            var styleEl = doc.createElement('style');
+            styleEl.innerHTML = text;
+            addGlobalStyle(globalScopes, styleEl);
+            linkElm.parentNode.insertBefore(styleEl, linkElm);
+            linkElm.remove();
+        }
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+// This regexp tries to determine when a variable is declared, for example:
+//
+// .my-el { --highlight-color: green; }
+//
+// but we don't want to trigger when a classname uses "--" or a pseudo-class is
+// used. We assume that the only characters that can preceed a variable
+// declaration are "{", from an opening block, ";" from a preceeding rule, or a
+// space. This prevents the regexp from matching a word in a selector, since
+// they would need to start with a "." or "#". (We assume element names don't
+// start with "--").
+var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m;
+function hasCssVariables(css) {
+    return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css);
+}
+// This regexp find all url() usages with relative urls
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+function hasRelativeUrls(css) {
+    CSS_URL_REGEXP.lastIndex = 0;
+    return CSS_URL_REGEXP.test(css);
+}
+function fixRelativeUrls(css, originalUrl) {
+    // get the basepath from the original import url
+    var basePath = originalUrl.replace(/[^/]*$/, '');
+    // replace the relative url, with the new relative url
+    return css.replace(CSS_URL_REGEXP, function (fullMatch, url) {
+        // rhe new relative path is the base path + uri
+        // TODO: normalize relative URL
+        var relativeUrl = basePath + url;
+        return fullMatch.replace(url, relativeUrl);
+    });
+}
+var CustomStyle = /** @class */ (function () {
+    function CustomStyle(win, doc) {
+        this.win = win;
+        this.doc = doc;
+        this.count = 0;
+        this.hostStyleMap = new WeakMap();
+        this.hostScopeMap = new WeakMap();
+        this.globalScopes = [];
+        this.scopesMap = new Map();
+    }
+    CustomStyle.prototype.initShim = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.win.requestAnimationFrame(function () {
+                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+            });
+        });
+    };
+    CustomStyle.prototype.addLink = function (linkEl) {
+        var _this = this;
+        return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () {
+            _this.updateGlobal();
+        });
+    };
+    CustomStyle.prototype.addGlobalStyle = function (styleEl) {
+        addGlobalStyle(this.globalScopes, styleEl);
+        this.updateGlobal();
+    };
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+        if (this.hostScopeMap.has(hostEl)) {
+            throw new Error('host style already created');
+        }
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
+        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
+        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var styleEl = this.doc.createElement('style');
+        if (!needStyleEl) {
+            styleEl.innerHTML = cssText;
+        }
+        else {
+            if (isDynamicScoped) {
+                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
+                styleEl.innerHTML = '/*needs update*/';
+                this.hostStyleMap.set(hostEl, styleEl);
+                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+                this.count++;
+            }
+            else {
+                baseScope.styleEl = styleEl;
+                if (!baseScope.isDynamic) {
+                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                }
+                this.globalScopes.push(baseScope);
+                this.updateGlobal();
+                this.hostScopeMap.set(hostEl, baseScope);
+            }
+        }
+        return styleEl;
+    };
+    CustomStyle.prototype.removeHost = function (hostEl) {
+        var css = this.hostStyleMap.get(hostEl);
+        if (css) {
+            css.remove();
+        }
+        this.hostStyleMap.delete(hostEl);
+        this.hostScopeMap.delete(hostEl);
+    };
+    CustomStyle.prototype.updateHost = function (hostEl) {
+        var scope = this.hostScopeMap.get(hostEl);
+        if (scope && scope.isDynamic && scope.cssScopeId) {
+            var styleEl = this.hostStyleMap.get(hostEl);
+            if (styleEl) {
+                var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
+                var props = resolveValues(selectors);
+                styleEl.innerHTML = executeTemplate(scope.template, props);
+            }
+        }
+    };
+    CustomStyle.prototype.updateGlobal = function () {
+        updateGlobalScopes(this.globalScopes);
+    };
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+        var scope = this.scopesMap.get(scopeId);
+        if (!scope) {
+            scope = parseCSS(cssText);
+            scope.cssScopeId = scopeId;
+            this.scopesMap.set(scopeId, scope);
+        }
+        return scope;
+    };
+    return CustomStyle;
+}());
+var win = window;
+function needsShim() {
+    return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'));
+}
+if (!win.__stencil_cssshim && needsShim()) {
+    win.__stencil_cssshim = new CustomStyle(win, document);
+}
diff --git a/dist/cjs/dom-7eb7509a-4c879aea.js b/dist/cjs/dom-7eb7509a-4c879aea.js
new file mode 100644
index 00000000000..013b2fcdf23
--- /dev/null
+++ b/dist/cjs/dom-7eb7509a-4c879aea.js
@@ -0,0 +1,40 @@
+'use strict';
+
+/*
+  Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return !(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var l=a.localName;if("link"===l&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===l){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n);}r=r.firstChild?r.firstChild:o(t,r);}}function r(t,e,n){t[e]=n;}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1;}function l(t,e){t.b=!0,t.c.push(e);}function c(t,e){t.b&&i(e,function(e){return s(t,e)});}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e);}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o);}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o);}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r});}});}else a.push(e);},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e]);}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop();}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null);}n(e)&&t.connectedCallback(e);}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}));}function m(t){t.b&&t.b.disconnect();}function w(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a);});}function b(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0);}function y(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t);}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t);},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t);},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i);},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o]);},y.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),l=i("disconnectedCallback"),c=i("adoptedCallback"),s=i("attributeChangedCallback"),h=n.observedAttributes||[];}catch(t){return}finally{this.c=!1;}n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:l,adoptedCallback:c,attributeChangedCallback:s,observedAttributes:h,constructionStack:[]},function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n);}(this.a,t,n),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e);}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&b(i);}}}(o)}));},y.prototype.h=function(t){p(this.a,t);},y.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},y.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new w,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&b(n),n.c)},y.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})};},window.CustomElementRegistry=y,y.prototype.define=y.prototype.l,y.prototype.upgrade=y.prototype.h,y.prototype.get=y.prototype.get,y.prototype.whenDefined=y.prototype.m,y.prototype.polyfillWrapFlushCallback=y.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,j=window.Node.prototype.replaceChild,L=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),M=window.Element.prototype.attachShadow,H=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),x=window.Element.prototype.getAttribute,O=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,U=window.Element.prototype.append,V=window.Element.prototype.before,X=window.Element.prototype.after,$=window.Element.prototype.replaceWith,q=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c);}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a);}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append));}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):c(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C});}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var l=0;l<a;l++)i[l]=r[l];}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)u(e,i[t]);}}});}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)h(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&u(e,t),n(this)&&h(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)h(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&u(e,t),n(this)&&h(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):c(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&u(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=j.call(this,t,o),n(this))for(u(e,o),o=0;o<i.length;o++)h(e,i[o]);return t}i=n(t);var r=j.call(this,t,o),a=n(this);return a&&u(e,o),i&&u(e,t),a&&h(e,t),r}),L&&L.get?t(Node.prototype,L):l(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t));}});});}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t);})),e.set.call(this,t),r)for(var l=0;l<r.length;l++){var s=r[l];1===s.__CE_state&&a.disconnectedCallback(s);}return this.ownerDocument.__CE_hasRegistry?p(a,this):c(a,this),t}});}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&u(a,o),n(t)&&h(a,o),t});}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e]);}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this);}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i);}});}var a=nt;M&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=M.call(this,t)}),H&&H.get?t(Element.prototype,H):J&&J.get?t(HTMLElement.prototype,J):l(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0]);}});}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return O.call(this,t,e);var n=x.call(this,t);O.call(this,t,e),e=x.call(this,t),a.attributeChangedCallback(this,t,n,e,null);}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t);}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=x.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null);}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t);}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:U}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c);}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a);}}var o=Element.prototype;void 0!==V&&(o.before=e(V)),void 0!==V&&(o.after=e(X)),void 0!==$&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var l=o[a];if(l instanceof Element&&n(l)&&r.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)i.push(l);else i.push(l);}for(a=n(this),$.apply(this,o),o=0;o<r.length;o++)u(t,r[o]);if(a)for(u(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&h(t,r);}),void 0!==q&&r(o,"remove",function(){var e=n(this);q.call(this),e&&u(t,this);});}(a);}(),document.__CE_hasRegistry=!0;var ot=new y(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot});}}).call(self);
+
+// Polyfill CustomEvent
+if (typeof window.CustomEvent !== 'function') {
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+}
+
+/*!
+Element.closest and Element.matches
+https://github.com/jonathantneal/closest
+Creative Commons Zero v1.0 Universal
+*/
+(function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return !!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode;}return null});})(window.Element.prototype);
+/*!
+Element.getRootNode()
+*/
+(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)});})(Element.prototype);
+/*!
+Element.remove()
+*/
+(function(b){b.forEach(function(a){a.hasOwnProperty("remove")||Object.defineProperty(a,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this);}});});})([Element.prototype,CharacterData.prototype,DocumentType.prototype]);
diff --git a/dist/cjs/index.cjs.js b/dist/cjs/index.cjs.js
new file mode 100644
index 00000000000..04b3e2cb7e7
--- /dev/null
+++ b/dist/cjs/index.cjs.js
@@ -0,0 +1,3 @@
+'use strict';
+
+//! Autogenerated index
diff --git a/dist/cjs/loader.cjs.js b/dist/cjs/loader.cjs.js
new file mode 100644
index 00000000000..4bdf5a12ea4
--- /dev/null
+++ b/dist/cjs/loader.cjs.js
@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const __chunk_1 = require('./calcite-15323450.js');
+
+const defineCustomElements = (win, options) => {
+  return __chunk_1.patchEsm().then(() => {
+    __chunk_1.bootstrapLazy([["calcite-alert_8.cjs",[[1,"calcite-alert",{"currentAlert":[1,"current-alert"],"dismiss":[4],"icon":[4],"id":[1],"queueLength":[2,"queue-length"],"color":[513],"theme":[513],"duration":[513],"isActive":[32],"close":[64]}],[1,"calcite-alerts",{"id":[1],"currentAlert":[32],"isActive":[32],"queue":[32],"open":[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{"isActive":[4,"is-active"],"text":[1]}],[1,"calcite-modal",{"first":[1],"middle":[1],"last":[1]}],[1,"calcite-tab",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"labeledBy":[32],"getTabIndex":[64],"registerLabeledBy":[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{"id":[1537],"selectedTab":[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"controls":[32],"getTabIndex":[64],"setControledBy":[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{"theme":[513],"tabs":[32],"tabTitles":[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["context-consumer.cjs",[[0,"context-consumer",{"context":[16],"renderer":[16],"subscribe":[16],"unsubscribe":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;
diff --git a/dist/cjs/shadow-css-984bac74-b2177096.js b/dist/cjs/shadow-css-984bac74-b2177096.js
new file mode 100644
index 00000000000..96de3ebc33a
--- /dev/null
+++ b/dist/cjs/shadow-css-984bac74-b2177096.js
@@ -0,0 +1,404 @@
+'use strict';
+
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+function scopeCss(cssText, scopeId, commentOriginalSelector) {
+    const sc = new ShadowCss();
+    return sc.shimCssText(cssText, scopeId, scopeId + '-h', scopeId + '-s', commentOriginalSelector);
+}
+class ShadowCss {
+    constructor() {
+        this.strictStyling = true;
+    }
+    shimCssText(cssText, scopeId, hostScopeId = '', slotScopeId = '', commentOriginalSelector = false) {
+        const commentsWithHash = extractCommentsWithHash(cssText);
+        cssText = stripComments(cssText);
+        const orgSelectors = [];
+        if (commentOriginalSelector) {
+            const processCommentedSelector = (rule) => {
+                const placeholder = `/*!@___${orgSelectors.length}___*/`;
+                const comment = `/*!@${rule.selector}*/`;
+                orgSelectors.push({ placeholder, comment });
+                rule.selector = placeholder + rule.selector;
+                return rule;
+            };
+            cssText = processRules(cssText, rule => {
+                if (rule.selector[0] !== '@') {
+                    return processCommentedSelector(rule);
+                }
+                else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                    rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                    rule.content = processRules(rule.content, processCommentedSelector);
+                    return rule;
+                }
+                return rule;
+            });
+        }
+        const scopedCssText = this._scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        cssText = [scopedCssText, ...commentsWithHash].join('\n');
+        if (commentOriginalSelector) {
+            orgSelectors.forEach(({ placeholder, comment }) => {
+                cssText = cssText.replace(placeholder, comment);
+            });
+        }
+        return cssText;
+    }
+    _scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) {
+        // replace :host and :host-context -shadowcsshost and -shadowcsshost respectively
+        cssText = this._insertPolyfillHostInCssText(cssText);
+        cssText = this._convertColonHost(cssText);
+        cssText = this._convertColonHostContext(cssText);
+        cssText = this._convertColonSlotted(cssText, slotScopeId);
+        cssText = this._convertShadowDOMSelectors(cssText);
+        if (scopeId) {
+            cssText = this._scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        }
+        cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+        cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
+        return cssText.trim();
+    }
+    /*
+     * convert a rule like :host(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar
+    */
+    _convertColonHost(cssText) {
+        return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
+    }
+    /*
+   * convert a rule like ::slotted(.foo) { }
+  */
+    _convertColonSlotted(cssText, slotAttr) {
+        const regExp = _cssColonSlottedRe;
+        return cssText.replace(regExp, function (...m) {
+            if (m[2]) {
+                const compound = m[2].trim();
+                const suffix = m[3];
+                const sel = '.' + slotAttr + ' > ' + compound + suffix;
+                return sel;
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    }
+    /*
+     * convert a rule like :host-context(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar, .foo scopeName > .bar { }
+     *
+     * and
+     *
+     * :host-context(.foo:host) .bar { ... }
+     *
+     * to
+     *
+     * .foo<scopeName> .bar { ... }
+    */
+    _convertColonHostContext(cssText) {
+        return this._convertColonRule(cssText, _cssColonHostContextRe, this._colonHostContextPartReplacer);
+    }
+    _convertColonRule(cssText, regExp, partReplacer) {
+        // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+        return cssText.replace(regExp, function (...m) {
+            if (m[2]) {
+                const parts = m[2].split(',');
+                const r = [];
+                for (let i = 0; i < parts.length; i++) {
+                    const p = parts[i].trim();
+                    if (!p)
+                        break;
+                    r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+                }
+                return r.join(',');
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    }
+    _colonHostContextPartReplacer(host, part, suffix) {
+        if (part.indexOf(_polyfillHost) > -1) {
+            return this._colonHostPartReplacer(host, part, suffix);
+        }
+        else {
+            return host + part + suffix + ', ' + part + ' ' + host + suffix;
+        }
+    }
+    _colonHostPartReplacer(host, part, suffix) {
+        return host + part.replace(_polyfillHost, '') + suffix;
+    }
+    /*
+     * Convert combinators like ::shadow and pseudo-elements like ::content
+     * by replacing with space.
+    */
+    _convertShadowDOMSelectors(cssText) {
+        return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
+    }
+    // change a selector like 'div' to 'name div'
+    _scopeSelectors(cssText, scopeSelector, hostSelector, slotSelector, commentOriginalSelector) {
+        return processRules(cssText, (rule) => {
+            let selector = rule.selector;
+            let content = rule.content;
+            if (rule.selector[0] !== '@') {
+                selector =
+                    this._scopeSelector(rule.selector, scopeSelector, hostSelector, slotSelector, this.strictStyling);
+            }
+            else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                content = this._scopeSelectors(rule.content, scopeSelector, hostSelector, slotSelector, commentOriginalSelector);
+            }
+            selector = selector.replace(/\s{2,}/g, ' ').trim();
+            return new CssRule(selector, content);
+        });
+    }
+    _scopeSelector(selector, scopeSelector, hostSelector, slotSelector, strict) {
+        return selector.split(',')
+            .map(shallowPart => {
+            if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
+                return shallowPart.trim();
+            }
+            if (this._selectorNeedsScoping(shallowPart, scopeSelector)) {
+                return strict ?
+                    this._applyStrictSelectorScope(shallowPart, scopeSelector, hostSelector).trim() :
+                    this._applySelectorScope(shallowPart, scopeSelector, hostSelector).trim();
+            }
+            else {
+                return shallowPart.trim();
+            }
+        })
+            .join(', ');
+    }
+    _selectorNeedsScoping(selector, scopeSelector) {
+        const re = this._makeScopeMatcher(scopeSelector);
+        return !re.test(selector);
+    }
+    _makeScopeMatcher(scopeSelector) {
+        const lre = /\[/g;
+        const rre = /\]/g;
+        scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+        return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+    }
+    _applySelectorScope(selector, scopeSelector, hostSelector) {
+        // Difference from webcomponents.js: scopeSelector could not be an array
+        return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
+    }
+    // scope via name and [is=name]
+    _applySimpleSelectorScope(selector, scopeSelector, hostSelector) {
+        // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+        _polyfillHostRe.lastIndex = 0;
+        if (_polyfillHostRe.test(selector)) {
+            const replaceBy = this.strictStyling ? `.${hostSelector}` : scopeSelector;
+            return selector
+                .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
+                return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
+                    return before + replaceBy + colon + after;
+                });
+            })
+                .replace(_polyfillHostRe, replaceBy + ' ');
+        }
+        return scopeSelector + ' ' + selector;
+    }
+    _applyStrictSelectorScope(selector, scopeSelector, hostSelector) {
+        const isRe = /\[is=([^\]]*)\]/g;
+        scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
+        const className = '.' + scopeSelector;
+        const _scopeSelectorPart = (p) => {
+            let scopedP = p.trim();
+            if (!scopedP) {
+                return '';
+            }
+            if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+                scopedP = this._applySimpleSelectorScope(p, scopeSelector, hostSelector);
+            }
+            else {
+                // remove :host since it should be unnecessary
+                const t = p.replace(_polyfillHostRe, '');
+                if (t.length > 0) {
+                    const matches = t.match(/([^:]*)(:*)(.*)/);
+                    if (matches) {
+                        scopedP = matches[1] + className + matches[2] + matches[3];
+                    }
+                }
+            }
+            return scopedP;
+        };
+        const safeContent = new SafeSelector(selector);
+        selector = safeContent.content();
+        let scopedSelector = '';
+        let startIndex = 0;
+        let res;
+        const sep = /( |>|\+|~(?!=))\s*/g;
+        // If a selector appears before :host it should not be shimmed as it
+        // matches on ancestor elements and not on elements in the host's shadow
+        // `:host-context(div)` is transformed to
+        // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+        // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+        // Historically `component-tag:host` was matching the component so we also want to preserve
+        // this behavior to avoid breaking legacy apps (it should not match).
+        // The behavior should be:
+        // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+        // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+        //   `:host-context(tag)`)
+        const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+        // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+        let shouldScope = !hasHost;
+        while ((res = sep.exec(selector)) !== null) {
+            const separator = res[1];
+            const part = selector.slice(startIndex, res.index).trim();
+            shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+            const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+            scopedSelector += `${scopedPart} ${separator} `;
+            startIndex = sep.lastIndex;
+        }
+        const part = selector.substring(startIndex);
+        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+        scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+        // replace the placeholders with their original values
+        return safeContent.restore(scopedSelector);
+    }
+    _insertPolyfillHostInCssText(selector) {
+        selector = selector
+            .replace(_colonHostContextRe, _polyfillHostContext)
+            .replace(_colonHostRe, _polyfillHost)
+            .replace(_colonSlottedRe, _polyfillSlotted);
+        return selector;
+    }
+}
+class SafeSelector {
+    constructor(selector) {
+        this.placeholders = [];
+        this.index = 0;
+        // Replaces attribute selectors with placeholders.
+        // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+        selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+            const replaceBy = `__ph-${this.index}__`;
+            this.placeholders.push(keep);
+            this.index++;
+            return replaceBy;
+        });
+        // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+        // WS and "+" would otherwise be interpreted as selector separators.
+        this._content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+            const replaceBy = `__ph-${this.index}__`;
+            this.placeholders.push(exp);
+            this.index++;
+            return pseudo + replaceBy;
+        });
+    }
+    restore(content) {
+        return content.replace(/__ph-(\d+)__/g, (_, index) => this.placeholders[+index]);
+    }
+    content() { return this._content; }
+}
+const _polyfillHost = '-shadowcsshost';
+const _polyfillSlotted = '-shadowcssslotted';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+const _polyfillHostContext = '-shadowcsscontext';
+const _parenSuffix = ')(?:\\((' +
+    '(?:\\([^)(]*\\)|[^)(]*)+?' +
+    ')\\))?([^,{]*)';
+const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
+const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [
+    /::shadow/g,
+    /::content/g
+];
+const _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
+const _polyfillHostRe = /-shadowcsshost/gim;
+const _colonHostRe = /:host/gim;
+const _colonSlottedRe = /::slotted/gim;
+const _colonHostContextRe = /:host-context/gim;
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+function stripComments(input) {
+    return input.replace(_commentRe, '');
+}
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+function extractCommentsWithHash(input) {
+    return input.match(_commentWithHashRe) || [];
+}
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const OPEN_CURLY = '{';
+const CLOSE_CURLY = '}';
+const BLOCK_PLACEHOLDER = '%BLOCK%';
+class CssRule {
+    constructor(selector, content) {
+        this.selector = selector;
+        this.content = content;
+    }
+}
+function processRules(input, ruleCallback) {
+    const inputWithEscapedBlocks = escapeBlocks(input);
+    let nextBlockIndex = 0;
+    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function (...m) {
+        const selector = m[2];
+        let content = '';
+        let suffix = m[4];
+        let contentPrefix = '';
+        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+            contentPrefix = '{';
+        }
+        const rule = ruleCallback(new CssRule(selector, content));
+        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+    });
+}
+class StringWithEscapedBlocks {
+    constructor(escapedString, blocks) {
+        this.escapedString = escapedString;
+        this.blocks = blocks;
+    }
+}
+function escapeBlocks(input) {
+    const inputParts = input.split(_curlyRe);
+    const resultParts = [];
+    const escapedBlocks = [];
+    let bracketCount = 0;
+    let currentBlockParts = [];
+    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+        const part = inputParts[partIndex];
+        if (part === CLOSE_CURLY) {
+            bracketCount--;
+        }
+        if (bracketCount > 0) {
+            currentBlockParts.push(part);
+        }
+        else {
+            if (currentBlockParts.length > 0) {
+                escapedBlocks.push(currentBlockParts.join(''));
+                resultParts.push(BLOCK_PLACEHOLDER);
+                currentBlockParts = [];
+            }
+            resultParts.push(part);
+        }
+        if (part === OPEN_CURLY) {
+            bracketCount++;
+        }
+    }
+    if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+    }
+    return new StringWithEscapedBlocks(resultParts.join(''), escapedBlocks);
+}
+
+exports.ShadowCss = ShadowCss;
+exports.scopeCss = scopeCss;
diff --git a/dist/collection/collection-manifest.json b/dist/collection/collection-manifest.json
new file mode 100644
index 00000000000..65b16579767
--- /dev/null
+++ b/dist/collection/collection-manifest.json
@@ -0,0 +1,39 @@
+{
+  "entries": [
+    "components/calcite-loader/calcite-loader.js",
+    "components/calcite-modal/calcite-modal.js",
+    "components/calcite-tabs/calcite-tabs.js",
+    "components/calcite-alert/calcite-alert.js",
+    "components/calcite-alerts/calcite-alerts.js",
+    "components/calcite-tab-nav/calcite-tab-nav.js",
+    "components/calcite-tab-title/calcite-tab-title.js",
+    "components/calcite-tab/calcite-tab.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "1.0.0-beta.5",
+    "typescriptVersion": "3.4.5"
+  },
+  "collections": [
+    {
+      "name": "@stencil/state-tunnel",
+      "tags": [
+        "context-consumer"
+      ]
+    }
+  ],
+  "bundles": [
+    {
+      "components": [
+        "calcite-alert",
+        "calcite-alerts",
+        "calcite-loader",
+        "calcite-modal",
+        "calcite-tab",
+        "calcite-tab-nav",
+        "calcite-tab-title",
+        "calcite-tabs"
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-alert/calcite-alert.css b/dist/collection/components/calcite-alert/calcite-alert.css
new file mode 100644
index 00000000000..0d6cc2b5486
--- /dev/null
+++ b/dist/collection/components/calcite-alert/calcite-alert.css
@@ -0,0 +1,318 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host {
+  position: relative;
+  justify-content: center;
+  right: 0;
+  left: 0;
+  margin-right: auto;
+  margin-left: auto;
+  z-index: 100;
+  width: 50em;
+  max-width: 90%;
+  border-radius: 2px;
+  background-color: #ffffff;
+  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
+  height: 0;
+  opacity: 0;
+  overflow: visible;
+  display: flex;
+  border-top: 3px solid;
+  transition: visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
+  transform: translate3d(0, 1.5rem, 0);
+  pointer-events: none;
+  border-width: 0px;
+}
+@media only screen and (max-width: 600px) {
+  :host {
+    max-width: 100%;
+    border-radius: 2px 2px 0 0;
+    box-shadow: 0 -6px 12px 0 rgba(0, 0, 0, 0.15);
+  }
+}
+
+:host([is-active]) {
+  visibility: visible;
+  border-width: 3px;
+  opacity: 1;
+  height: 100%;
+  transition-delay: 300ms;
+  transform: translate3d(0, 0, 0);
+  pointer-events: initial;
+}
+
+:host slot[name=alert-title]::slotted(div) {
+  display: block;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+:host slot[name=alert-link]::slotted(a) {
+  display: inline-block;
+  font-size: 15px;
+  color: #007ac2;
+}
+
+:host slot[name=alert-message]::slotted(div) {
+  font-size: 15px;
+  color: #555555;
+  display: inline;
+  margin-inline-end: 0.75rem;
+}
+
+:host([theme=dark]) {
+  background-color: #2b2b2b;
+}
+
+:host([theme=dark]) slot[name=alert-title]::slotted(div) {
+  color: #f8f8f8;
+}
+
+:host([theme=dark]) slot[name=alert-message]::slotted(div) {
+  color: #f3f3f3;
+}
+
+.alert-content {
+  padding: 0.75rem 1.5rem;
+  flex: 0 0 auto;
+  transition-delay: 300ms;
+  transition: all 0.15s ease-in-out;
+  flex: 1 1 auto;
+  min-width: 0;
+  word-wrap: break-word;
+  padding-block-start: 0.75rem;
+  padding-block-end: 0.75rem;
+  padding-inline-end: 0.75rem;
+  padding-inline-start: 0;
+}
+@media only screen and (max-width: 600px) {
+  .alert-content {
+    padding: 1.5rem;
+  }
+}
+.alert-content svg {
+  position: relative;
+  vertical-align: top;
+  height: 16px;
+  width: 16px;
+}
+.alert-content:first-of-type {
+  padding-inline-start: 1.5rem;
+}
+@media only screen and (max-width: 600px) {
+  .alert-content {
+    padding-block-start: 1.5rem;
+    padding-block-end: 1.5rem;
+    padding-inline-end: 0.75rem;
+    padding-inline-start: 0;
+  }
+}
+
+.alert-icon {
+  padding: 0.75rem 1.5rem;
+  flex: 0 0 auto;
+  transition-delay: 300ms;
+  transition: all 0.15s ease-in-out;
+  display: flex;
+  align-items: center;
+}
+@media only screen and (max-width: 600px) {
+  .alert-icon {
+    padding: 1.5rem;
+  }
+}
+.alert-icon svg {
+  position: relative;
+  vertical-align: top;
+  height: 16px;
+  width: 16px;
+}
+
+.alert-close {
+  padding: 0.75rem 1.5rem;
+  flex: 0 0 auto;
+  transition-delay: 300ms;
+  transition: all 0.15s ease-in-out;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  border-radius: 0 0 2px 0;
+}
+@media only screen and (max-width: 600px) {
+  .alert-close {
+    padding: 1.5rem;
+  }
+}
+.alert-close svg {
+  position: relative;
+  vertical-align: top;
+  height: 16px;
+  width: 16px;
+}
+.alert-close svg {
+  fill: #151515;
+}
+.alert-close:hover, .alert-close:focus {
+  background-color: #f3f3f3;
+}
+.alert-close:active {
+  background-color: #eaeaea;
+}
+.alert-close:last-child {
+  border-radius: 0 0 2px 0;
+}
+:host([dir=rtl]) .alert-close:last-child {
+  border-radius: 0 0 0 2px;
+}
+@media only screen and (max-width: 600px) {
+  .alert-close {
+    border-radius: 0;
+  }
+}
+
+:host([theme=dark]) .alert-close svg {
+  fill: #d4d4d4;
+}
+:host([theme=dark]) .alert-close:hover, :host([theme=dark]) .alert-close:focus {
+  background-color: #202020;
+}
+:host([theme=dark]) .alert-close:active {
+  background-color: #151515;
+}
+
+.alert-count {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  transition: all 0.15s ease-in;
+  width: 0;
+  font-size: 14px;
+  visibility: hidden;
+  padding: 0;
+  font-weight: 500;
+  text-align: center;
+  background-color: transparent;
+  color: #757575;
+  opacity: 0;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  cursor: default;
+}
+.alert-count.is-active {
+  visibility: visible;
+  transition-delay: 300ms;
+  opacity: 1;
+  padding: 0 0.375rem;
+  width: 3rem;
+  border-left: 1px solid #f3f3f3;
+  border-right: 1px solid #f3f3f3;
+}
+.alert-count.is-active:last-child {
+  border-right-color: transparent;
+}
+@media only screen and (max-width: 600px) {
+  .alert-count {
+    border-radius: 0;
+  }
+}
+
+:host([theme=dark]) .alert-count {
+  color: #d4d4d4;
+}
+:host([theme=dark]) .alert-count.is-active {
+  border-left: 1px solid #202020;
+  border-right: 1px solid #202020;
+}
+
+.alert-dismiss {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  z-index: 101;
+}
+.alert-dismiss:after {
+  height: 3px;
+  top: -3px;
+  right: 0;
+  display: block;
+  position: absolute;
+  border-radius: 2px 2px 0 0;
+  content: "";
+  width: 50%;
+  background-color: rgba(255, 255, 255, 0.6);
+  animation: dismissProgress 10000ms linear;
+  transition: all 0.15s ease-in-out;
+  z-index: 200;
+}
+
+:host([theme=dark]) .alert-dismiss:after {
+  background-color: rgba(43, 43, 43, 0.6);
+}
+
+:host([duration=fast]) .alert-dismiss:after {
+  animation: dismissProgress 6000ms linear;
+}
+
+:host([duration=medium]) .alert-dismiss:after {
+  animation: dismissProgress 10000ms linear;
+}
+
+:host([duration=slow]) .alert-dismiss:after {
+  animation: dismissProgress 14000ms linear;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host([color=blue]) {
+  border-top-color: #007ac2;
+}
+:host([color=blue]) .alert-icon svg {
+  fill: #007ac2;
+}
+
+:host([color=red]) {
+  border-top-color: #d83020;
+}
+:host([color=red]) .alert-icon svg {
+  fill: #d83020;
+}
+
+:host([color=yellow]) {
+  border-top-color: #edd317;
+}
+:host([color=yellow]) .alert-icon svg {
+  fill: #edd317;
+}
+
+:host([color=green]) {
+  border-top-color: #35ac46;
+}
+:host([color=green]) .alert-icon svg {
+  fill: #35ac46;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-alert/calcite-alert.js b/dist/collection/components/calcite-alert/calcite-alert.js
new file mode 100644
index 00000000000..d46fc6d1e0f
--- /dev/null
+++ b/dist/collection/components/calcite-alert/calcite-alert.js
@@ -0,0 +1,263 @@
+import { h, Host } from '@stencil/core';
+import { lightbulb24F, exclamationMarkTriangle24F, checkCircle24F, x32 } from '@esri/calcite-ui-icons';
+import AlertInterface from '../../interfaces/AlertInterface';
+export class CalciteAlert {
+    constructor() {
+        this.currentAlert = '';
+        this.dismiss = false;
+        this.icon = false;
+        this.id = '1';
+        this.queueLength = 0;
+        this.color = 'blue';
+        this.theme = null;
+        this.duration = this.dismiss ? 'medium' : null;
+        this.isActive = this.id === this.currentAlert;
+    }
+    async close() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.alertClose.emit(this.id);
+        }
+    }
+    componentWillUpdate() {
+        this.isActive = this.currentAlert === this.id;
+        if (this.isActive)
+            this.alertOpen.emit(this.id);
+        if (this.isActive && this.dismiss)
+            setTimeout(() => { this.close(); }, this.duration === 'fast' ? 6000 : this.duration === 'slow' ? 14000 : 10000);
+    }
+    setIcon() {
+        var path = this.color === 'green' ? checkCircle24F : (this.color === 'red' || this.color === 'yellow') ? exclamationMarkTriangle24F : lightbulb24F;
+        return (h("div", { class: "alert-icon" },
+            h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '24', width: '24', viewBox: '0 0 24 24' },
+                h("path", { d: path }))));
+    }
+    render() {
+        const closeButton = (h("button", { class: "alert-close", "aria-label": "close", onClick: () => this.close() },
+            h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '32', width: '32', viewBox: '0 0 32 32' },
+                h("path", { d: x32 }))));
+        const close = !this.dismiss ? closeButton : '';
+        const icon = this.icon ? this.setIcon() : '';
+        const count = h("div", { class: `${this.queueLength > 0 ? 'is-active ' : ''}alert-count` },
+            "+",
+            this.queueLength > 0 ? this.queueLength : 1);
+        const progress = this.isActive && this.dismiss ? h("div", { class: "alert-dismiss" }) : '';
+        return (h(Host, { theme: this.theme, "is-active": !!this.isActive, duration: this.duration },
+            icon,
+            h("div", { class: "alert-content" },
+                h("slot", { name: "alert-title" }),
+                h("slot", { name: "alert-message" }),
+                h("slot", { name: "alert-link" })),
+            count,
+            close,
+            progress));
+    }
+    static get is() { return "calcite-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-alert.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-alert.css"]
+    }; }
+    static get properties() { return {
+        "currentAlert": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "current-alert",
+            "reflect": false,
+            "defaultValue": "''"
+        },
+        "dismiss": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "dismiss",
+            "reflect": false,
+            "defaultValue": "false"
+        },
+        "icon": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "icon",
+            "reflect": false,
+            "defaultValue": "false"
+        },
+        "id": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "id",
+            "reflect": false,
+            "defaultValue": "'1'"
+        },
+        "queueLength": {
+            "type": "number",
+            "mutable": false,
+            "complexType": {
+                "original": "number",
+                "resolved": "number",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "queue-length",
+            "reflect": false,
+            "defaultValue": "0"
+        },
+        "color": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "color",
+            "reflect": true,
+            "defaultValue": "'blue'"
+        },
+        "theme": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "theme",
+            "reflect": true,
+            "defaultValue": "null"
+        },
+        "duration": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "duration",
+            "reflect": true,
+            "defaultValue": "this.dismiss ? 'medium' : null"
+        }
+    }; }
+    static get states() { return {
+        "isActive": {}
+    }; }
+    static get events() { return [{
+            "method": "alertClose",
+            "name": "alertClose",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }, {
+            "method": "alertOpen",
+            "name": "alertOpen",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }]; }
+    static get methods() { return {
+        "close": {
+            "complexType": {
+                "signature": "() => Promise<void>",
+                "parameters": [],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<void>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        }
+    }; }
+    static get elementRef() { return "el"; }
+}
+AlertInterface.injectProps(CalciteAlert, ['currentAlert', 'queueLength']);
diff --git a/dist/collection/components/calcite-alerts/calcite-alerts.css b/dist/collection/components/calcite-alerts/calcite-alerts.css
new file mode 100644
index 00000000000..06977cec1ee
--- /dev/null
+++ b/dist/collection/components/calcite-alerts/calcite-alerts.css
@@ -0,0 +1,38 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host {
+  position: fixed;
+  visibility: hidden;
+  opacity: 0;
+  left: 0;
+  right: 0;
+  bottom: 1.5rem;
+  height: 0;
+  z-index: 101;
+  pointer-events: none;
+  transition: all 0.15s ease-in-out;
+  transition-delay: 300ms;
+}
+@media only screen and (max-width: 600px) {
+  :host {
+    bottom: 0px;
+  }
+}
+
+:host([is-active]) {
+  height: auto;
+  visibility: visible;
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-alerts/calcite-alerts.js b/dist/collection/components/calcite-alerts/calcite-alerts.js
new file mode 100644
index 00000000000..550195f9a5a
--- /dev/null
+++ b/dist/collection/components/calcite-alerts/calcite-alerts.js
@@ -0,0 +1,130 @@
+import { h, Host } from '@stencil/core';
+import AlertInterface from '../../interfaces/AlertInterface';
+export class CalciteAlerts {
+    constructor() {
+        this.id = '1';
+        this.currentAlert = '';
+        this.isActive = false;
+        this.queue = [];
+    }
+    async open(requestedAlert) {
+        if (!this.queue.includes(requestedAlert)) {
+            this.isActive = true;
+            this.currentAlert = requestedAlert;
+            this.queue.push(requestedAlert);
+            this.alertsOpen.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+        }
+    }
+    updateQueue(event) {
+        if (this.queue.includes(event.detail))
+            this.queue = this.queue.filter(e => e !== event.detail);
+        if (this.queue.length < 1)
+            setTimeout(() => { this.isActive = false; }, 300);
+        this.alertsClose.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+    }
+    componentWillUpdate() {
+        this.currentAlert = this.queue.length > 0 ? this.queue[0] : '';
+    }
+    render() {
+        const alertState = {
+            currentAlert: this.currentAlert,
+            queueLength: this.queue.length >= 2 ? this.queue.length - 1 : 0
+        };
+        return (h(Host, { "is-active": !!this.isActive },
+            h(AlertInterface.Provider, { state: alertState },
+                h("slot", null))));
+    }
+    static get is() { return "calcite-alerts"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-alerts.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-alerts.css"]
+    }; }
+    static get properties() { return {
+        "id": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "id",
+            "reflect": false,
+            "defaultValue": "'1'"
+        }
+    }; }
+    static get states() { return {
+        "currentAlert": {},
+        "isActive": {},
+        "queue": {}
+    }; }
+    static get events() { return [{
+            "method": "alertsClose",
+            "name": "alertsClose",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }, {
+            "method": "alertsOpen",
+            "name": "alertsOpen",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }]; }
+    static get methods() { return {
+        "open": {
+            "complexType": {
+                "signature": "(requestedAlert: any) => Promise<void>",
+                "parameters": [{
+                        "tags": [],
+                        "text": ""
+                    }],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<void>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        }
+    }; }
+    static get elementRef() { return "el"; }
+    static get listeners() { return [{
+            "name": "alertClose",
+            "method": "updateQueue",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }]; }
+}
diff --git a/dist/collection/components/calcite-loader/calcite-loader.css b/dist/collection/components/calcite-loader/calcite-loader.css
new file mode 100644
index 00000000000..3291cbe9664
--- /dev/null
+++ b/dist/collection/components/calcite-loader/calcite-loader.css
@@ -0,0 +1,86 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host .loader-bars, :host .loader-bars:after, :host .loader-bars:before {
+  background: #007ac2;
+  -webkit-animation: load 0.8s infinite ease-in-out;
+  animation: load 0.8s infinite ease-in-out;
+  width: 0.85rem;
+  height: 2rem;
+}
+
+:host .loader-bars:after, :host .loader-bars:before {
+  position: absolute;
+  top: 0;
+  content: "";
+}
+
+:host {
+  position: relative;
+  display: none;
+  padding-bottom: 4.5rem;
+  padding-top: 4.5rem;
+}
+
+:host([is-active]) {
+  display: block;
+}
+
+:host .loader-bars {
+  text-indent: -9999em;
+  margin: auto;
+  position: absolute;
+  right: calc(50% - 0.425rem);
+  font-size: 11px;
+  -webkit-animation-delay: 0.16s;
+  animation-delay: 0.16s;
+}
+:host .loader-bars:before {
+  left: -1.25rem;
+}
+:host .loader-bars:after {
+  left: 1.25rem;
+  -webkit-animation-delay: 0.32s;
+  animation-delay: 0.32s;
+}
+
+:host .loader-text {
+  padding-top: 4rem;
+  text-align: center;
+}
+
+@-webkit-keyframes load {
+  0%, 80%, 100% {
+    opacity: 0.75;
+    box-shadow: 0 0 #007ac2;
+    height: 2rem;
+  }
+  40% {
+    opacity: 1;
+    box-shadow: 0 -0.5rem #007ac2;
+    height: 2.5rem;
+  }
+}
+@keyframes load {
+  0%, 80%, 100% {
+    opacity: 0.75;
+    box-shadow: 0 0 #007ac2;
+    height: 2rem;
+  }
+  40% {
+    opacity: 1;
+    box-shadow: 0 -0.5rem #007ac2;
+    height: 2.5rem;
+  }
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-loader/calcite-loader.js b/dist/collection/components/calcite-loader/calcite-loader.js
new file mode 100644
index 00000000000..c3126decc48
--- /dev/null
+++ b/dist/collection/components/calcite-loader/calcite-loader.js
@@ -0,0 +1,59 @@
+import { h, Host } from "@stencil/core";
+export class CalciteLoader {
+    constructor() {
+        this.isActive = false;
+        this.text = "Loading...";
+    }
+    render() {
+        return (h(Host, { "is-active": !!this.isActive },
+            h("div", { class: "loader-bars" }),
+            h("div", { class: "loader-text" }, this.text)));
+    }
+    static get is() { return "calcite-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-loader.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-loader.css"]
+    }; }
+    static get properties() { return {
+        "isActive": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "is-active",
+            "reflect": false,
+            "defaultValue": "false"
+        },
+        "text": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "text",
+            "reflect": false,
+            "defaultValue": "\"Loading...\""
+        }
+    }; }
+    static get elementRef() { return "el"; }
+}
diff --git a/dist/collection/components/calcite-modal/calcite-modal.css b/dist/collection/components/calcite-modal/calcite-modal.css
new file mode 100644
index 00000000000..c2a998b90ab
--- /dev/null
+++ b/dist/collection/components/calcite-modal/calcite-modal.css
@@ -0,0 +1,20 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+.example-class {
+  padding: 1.5rem;
+  color: #d83020;
+  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #007ac2;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-modal/calcite-modal.js b/dist/collection/components/calcite-modal/calcite-modal.js
new file mode 100644
index 00000000000..23c09c8761f
--- /dev/null
+++ b/dist/collection/components/calcite-modal/calcite-modal.js
@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+import { format } from "../../utils/utils";
+export class CalciteModal {
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", { class: "example-class" },
+            "Hello, World! I'm ",
+            this.getText());
+    }
+    static get is() { return "calcite-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-modal.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-modal.css"]
+    }; }
+    static get properties() { return {
+        "first": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "The first name"
+            },
+            "attribute": "first",
+            "reflect": false
+        },
+        "middle": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "The middle name"
+            },
+            "attribute": "middle",
+            "reflect": false
+        },
+        "last": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "The last name"
+            },
+            "attribute": "last",
+            "reflect": false
+        }
+    }; }
+}
diff --git a/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css b/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css
new file mode 100644
index 00000000000..82980eb8eba
--- /dev/null
+++ b/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css
@@ -0,0 +1,27 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+.tab-nav {
+  display: flex;
+  padding: 0.5rem 0;
+}
+
+::slotted(calcite-tab-title) {
+  margin-right: 1.25rem;
+}
+
+:host([dir=rtl]) ::slotted(calcite-tab-title) {
+  margin-right: 0;
+  margin-left: 1.25rem;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js b/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js
new file mode 100644
index 00000000000..112339f237d
--- /dev/null
+++ b/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js
@@ -0,0 +1,145 @@
+import { h, Host } from "@stencil/core";
+import { guid } from "../../utils/guid";
+export class CalciteTabNav {
+    constructor() {
+        this.id = `calite-tab-nav-${guid()}`;
+        this.selectedTab = 0;
+    }
+    selectedTabChanged() {
+        this.calciteTabChange.emit({
+            tab: this.selectedTab
+        });
+    }
+    focusPreviousTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const previousTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+        previousTab.focus();
+    }
+    focusNextTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const nextTab = tabs[currentIndex + 1] || tabs[0];
+        nextTab.focus();
+    }
+    tabTitleRegistationHandler(e) {
+        e.target.setControledBy(this.id);
+    }
+    activateTabHandler(e) {
+        if (e.detail.tab) {
+            this.selectedTab = e.detail.tab;
+        }
+        else {
+            this.selectedTab = this.getIndexOfTabTitle(e.target);
+        }
+    }
+    getIndexOfTabTitle(el) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        return [...tabs].indexOf(el);
+    }
+    componentWillLoad() {
+        this.selectedTabChanged();
+    }
+    render() {
+        return (h(Host, { role: "tablist" },
+            h("nav", { class: "tab-nav" },
+                h("slot", null))));
+    }
+    static get is() { return "calcite-tab-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-tab-nav.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-tab-nav.css"]
+    }; }
+    static get properties() { return {
+        "id": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "id",
+            "reflect": true,
+            "defaultValue": "`calite-tab-nav-${guid()}`"
+        },
+        "selectedTab": {
+            "type": "any",
+            "mutable": true,
+            "complexType": {
+                "original": "number | string",
+                "resolved": "number | string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "selected-tab",
+            "reflect": false,
+            "defaultValue": "0"
+        }
+    }; }
+    static get events() { return [{
+            "method": "calciteTabChange",
+            "name": "calciteTabChange",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "TabChangeEventDetail",
+                "resolved": "TabChangeEventDetail",
+                "references": {
+                    "TabChangeEventDetail": {
+                        "location": "import",
+                        "path": "../../interfaces/TabChange"
+                    }
+                }
+            }
+        }]; }
+    static get elementRef() { return "el"; }
+    static get watchers() { return [{
+            "propName": "selectedTab",
+            "methodName": "selectedTabChanged"
+        }]; }
+    static get listeners() { return [{
+            "name": "calciteFocusPreviousTab",
+            "method": "focusPreviousTabHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "calciteFocusNextTab",
+            "method": "focusNextTabHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "calciteRegisterTabTitle",
+            "method": "tabTitleRegistationHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "calciteActivateTab",
+            "method": "activateTabHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }]; }
+}
diff --git a/dist/collection/components/calcite-tab-title/calcite-tab-title.css b/dist/collection/components/calcite-tab-title/calcite-tab-title.css
new file mode 100644
index 00000000000..476ab289501
--- /dev/null
+++ b/dist/collection/components/calcite-tab-title/calcite-tab-title.css
@@ -0,0 +1,47 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host {
+  flex: 0 1 auto;
+  outline: none;
+}
+
+:host(:active) a,
+:host(:focus) a,
+:host(:hover) a {
+  outline: none;
+  text-decoration: none;
+  color: var(--calcite-tabs-color-active);
+  border-bottom-color: var(--calcite-tabs-border-hover);
+}
+
+:host([is-active]) a {
+  color: var(--calcite-tabs-color-active);
+  border-bottom-color: var(--calcite-tabs-border-active);
+}
+
+a {
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0.5rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  color: var(--calcite-tabs-color);
+  outline: none;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-tab-title/calcite-tab-title.js b/dist/collection/components/calcite-tab-title/calcite-tab-title.js
new file mode 100644
index 00000000000..09a9c02ad59
--- /dev/null
+++ b/dist/collection/components/calcite-tab-title/calcite-tab-title.js
@@ -0,0 +1,251 @@
+import { h, Host } from "@stencil/core";
+import { guid } from "../../utils/guid";
+import { SPACE, ENTER, LEFT, RIGHT } from "../../utils/keys";
+export class CalciteTabTitle {
+    constructor() {
+        this.id = `calite-tab-title-${guid()}`;
+        this.isActive = false;
+    }
+    tabChangeHand(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    onClick() {
+        this.calciteActivateTab.emit({
+            tab: this.tab
+        });
+    }
+    keyDownHandler(e) {
+        switch (e.keyCode) {
+            case SPACE:
+            case ENTER:
+                this.onClick();
+                break;
+            case RIGHT:
+                this.calciteFocusNextTab.emit();
+                break;
+            case LEFT:
+                this.calciteFocusPreviousTab.emit();
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTabTitle.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el));
+    }
+    async setControledBy(id) {
+        this.controls = id;
+    }
+    render() {
+        return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.isActive ? "true" : "false", role: "tab", tabindex: "0" },
+            h("a", null,
+                h("slot", null))));
+    }
+    static get is() { return "calcite-tab-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-tab-title.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-tab-title.css"]
+    }; }
+    static get properties() { return {
+        "id": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "id",
+            "reflect": true,
+            "defaultValue": "`calite-tab-title-${guid()}`"
+        },
+        "tab": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "tab",
+            "reflect": true
+        },
+        "isActive": {
+            "type": "boolean",
+            "mutable": true,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "is-active",
+            "reflect": true,
+            "defaultValue": "false"
+        }
+    }; }
+    static get states() { return {
+        "controls": {}
+    }; }
+    static get events() { return [{
+            "method": "calciteActivateTab",
+            "name": "calciteActivateTab",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "TabChangeEventDetail",
+                "resolved": "TabChangeEventDetail",
+                "references": {
+                    "TabChangeEventDetail": {
+                        "location": "import",
+                        "path": "../../interfaces/TabChange"
+                    }
+                }
+            }
+        }, {
+            "method": "calciteFocusNextTab",
+            "name": "calciteFocusNextTab",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }, {
+            "method": "calciteFocusPreviousTab",
+            "name": "calciteFocusPreviousTab",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }, {
+            "method": "calciteRegisterTabTitle",
+            "name": "calciteRegisterTabTitle",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "TabRegisterEventDetail",
+                "resolved": "TabRegisterEventDetail",
+                "references": {
+                    "TabRegisterEventDetail": {
+                        "location": "import",
+                        "path": "../../interfaces/TabRegister"
+                    }
+                }
+            }
+        }]; }
+    static get methods() { return {
+        "getTabIndex": {
+            "complexType": {
+                "signature": "() => Promise<any>",
+                "parameters": [],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<any>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        },
+        "setControledBy": {
+            "complexType": {
+                "signature": "(id: string) => Promise<void>",
+                "parameters": [{
+                        "tags": [],
+                        "text": ""
+                    }],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<void>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        }
+    }; }
+    static get elementRef() { return "el"; }
+    static get listeners() { return [{
+            "name": "calciteTabChange",
+            "method": "tabChangeHand",
+            "target": "parent",
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "click",
+            "method": "onClick",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "keydown",
+            "method": "keyDownHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }]; }
+}
diff --git a/dist/collection/components/calcite-tab/calcite-tab.css b/dist/collection/components/calcite-tab/calcite-tab.css
new file mode 100644
index 00000000000..7fc8a2e9d22
--- /dev/null
+++ b/dist/collection/components/calcite-tab/calcite-tab.css
@@ -0,0 +1,21 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host([is-active]) section {
+  display: block;
+}
+
+section {
+  display: none;
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-tab/calcite-tab.js b/dist/collection/components/calcite-tab/calcite-tab.js
new file mode 100644
index 00000000000..7570fd724e3
--- /dev/null
+++ b/dist/collection/components/calcite-tab/calcite-tab.js
@@ -0,0 +1,169 @@
+import { h, Host } from "@stencil/core";
+import { guid } from "../../utils/guid";
+export class CalciteTab {
+    constructor() {
+        this.id = `calite-tab-${guid()}`;
+        this.isActive = false;
+    }
+    tabChangeHandler(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTab.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"), this.el));
+    }
+    async registerLabeledBy(id) {
+        this.labeledBy = id;
+    }
+    render() {
+        return (h(Host, { "aria-labeledby": this.labeledBy, "aria-expanded": this.isActive ? "true" : "false", role: "tabpanel" },
+            h("section", null,
+                h("slot", null))));
+    }
+    static get is() { return "calcite-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-tab.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-tab.css"]
+    }; }
+    static get properties() { return {
+        "id": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "id",
+            "reflect": true,
+            "defaultValue": "`calite-tab-${guid()}`"
+        },
+        "tab": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "tab",
+            "reflect": true
+        },
+        "isActive": {
+            "type": "boolean",
+            "mutable": true,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "is-active",
+            "reflect": true,
+            "defaultValue": "false"
+        }
+    }; }
+    static get states() { return {
+        "labeledBy": {}
+    }; }
+    static get events() { return [{
+            "method": "calciteRegisterTab",
+            "name": "calciteRegisterTab",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "TabRegisterEventDetail",
+                "resolved": "TabRegisterEventDetail",
+                "references": {
+                    "TabRegisterEventDetail": {
+                        "location": "import",
+                        "path": "../../interfaces/TabRegister"
+                    }
+                }
+            }
+        }]; }
+    static get methods() { return {
+        "getTabIndex": {
+            "complexType": {
+                "signature": "() => Promise<any>",
+                "parameters": [],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<any>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        },
+        "registerLabeledBy": {
+            "complexType": {
+                "signature": "(id: any) => Promise<void>",
+                "parameters": [{
+                        "tags": [],
+                        "text": ""
+                    }],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    }
+                },
+                "return": "Promise<void>"
+            },
+            "docs": {
+                "text": "",
+                "tags": []
+            }
+        }
+    }; }
+    static get elementRef() { return "el"; }
+    static get listeners() { return [{
+            "name": "calciteTabChange",
+            "method": "tabChangeHandler",
+            "target": "parent",
+            "capture": false,
+            "passive": false
+        }]; }
+}
diff --git a/dist/collection/components/calcite-tabs/calcite-tabs.css b/dist/collection/components/calcite-tabs/calcite-tabs.css
new file mode 100644
index 00000000000..9efd98a5b01
--- /dev/null
+++ b/dist/collection/components/calcite-tabs/calcite-tabs.css
@@ -0,0 +1,34 @@
+body {
+  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+}
+
+@keyframes dismissProgress {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+:host {
+  --calcite-tabs-color: #2b2b2b;
+  --calcite-tabs-border: #eaeaea;
+  --calcite-tabs-border-hover: #dfdfdf;
+  --calcite-tabs-color-active: #151515;
+  --calcite-tabs-border-active: #007ac2;
+}
+
+:host([theme=dark]) {
+  --calcite-tabs-color: #f3f3f3;
+  --calcite-tabs-border: #404040;
+  --calcite-tabs-border-hover: #757575;
+  --calcite-tabs-color-active: #f8f8f8;
+  --calcite-tabs-border-active: #fff;
+}
+
+.tab-contents {
+  margin-top: 1px;
+  border-top: 1px solid var(--calcite-tabs-border);
+}
\ No newline at end of file
diff --git a/dist/collection/components/calcite-tabs/calcite-tabs.js b/dist/collection/components/calcite-tabs/calcite-tabs.js
new file mode 100644
index 00000000000..d35d441be23
--- /dev/null
+++ b/dist/collection/components/calcite-tabs/calcite-tabs.js
@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+export class CalciteTabs {
+    constructor() {
+        this.tabs = {};
+        this.tabTitles = {};
+        this.theme = "light";
+    }
+    tabTitleRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabTitles[index] = {
+            id: id,
+            title: e.target
+        };
+        if (this.tabs[index]) {
+            this.tabs[index].tab.registerLabeledBy(id);
+        }
+    }
+    tabRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabs[index] = {
+            id: id,
+            tab: e.target
+        };
+        if (this.tabTitles[index]) {
+            this.tabs[index].tab.registerLabeledBy(this.tabTitles[index].id);
+        }
+    }
+    render() {
+        return (h("div", null,
+            h("slot", { name: "tab-nav" }),
+            h("section", { class: "tab-contents" },
+                h("slot", null))));
+    }
+    static get is() { return "calcite-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() { return {
+        "$": ["calcite-tabs.scss"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["calcite-tabs.css"]
+    }; }
+    static get properties() { return {
+        "theme": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "\"light\" | \"dark\"",
+                "resolved": "\"dark\" | \"light\"",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "theme",
+            "reflect": true,
+            "defaultValue": "\"light\""
+        }
+    }; }
+    static get states() { return {
+        "tabs": {},
+        "tabTitles": {}
+    }; }
+    static get listeners() { return [{
+            "name": "calciteRegisterTabTitle",
+            "method": "tabTitleRegistationHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
+            "name": "calciteRegisterTab",
+            "method": "tabRegistationHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }]; }
+}
diff --git a/dist/collection/interfaces/AlertInterface.js b/dist/collection/interfaces/AlertInterface.js
new file mode 100644
index 00000000000..bb8a1e888bf
--- /dev/null
+++ b/dist/collection/interfaces/AlertInterface.js
@@ -0,0 +1,6 @@
+import { h } from '@stencil/core';
+import { createProviderConsumer } from '@stencil/state-tunnel';
+export default createProviderConsumer({
+    currentAlert: '',
+    queueLength: 0
+}, (subscribe, child) => (h("context-consumer", { subscribe: subscribe, renderer: child })));
diff --git a/dist/collection/interfaces/TabChange.js b/dist/collection/interfaces/TabChange.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/dist/collection/interfaces/TabRegister.js b/dist/collection/interfaces/TabRegister.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/dist/collection/utils/guid.js b/dist/collection/utils/guid.js
new file mode 100644
index 00000000000..d8225a71d78
--- /dev/null
+++ b/dist/collection/utils/guid.js
@@ -0,0 +1,14 @@
+// from https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples
+function random() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0] / 1e10;
+}
+function gen(count) {
+    var out = "";
+    for (var i = 0; i < count; i++) {
+        out += (((1 + random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return out;
+}
+export function guid() {
+    return [gen(2), gen(1), gen(1), gen(1), gen(3)].join("-");
+}
diff --git a/dist/collection/utils/keys.js b/dist/collection/utils/keys.js
new file mode 100644
index 00000000000..4e58c1453a0
--- /dev/null
+++ b/dist/collection/utils/keys.js
@@ -0,0 +1,8 @@
+export const ESCAPE = 27;
+export const ENTER = 13;
+export const SPACE = 32;
+export const TAB = 9;
+export const UP = 38;
+export const DOWN = 40;
+export const LEFT = 37;
+export const RIGHT = 39;
diff --git a/dist/collection/utils/utils.js b/dist/collection/utils/utils.js
new file mode 100644
index 00000000000..b6e0c443f5b
--- /dev/null
+++ b/dist/collection/utils/utils.js
@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+}
diff --git a/dist/esm/calcite-a092ddcb.js b/dist/esm/calcite-a092ddcb.js
new file mode 100644
index 00000000000..184f3786b73
--- /dev/null
+++ b/dist/esm/calcite-a092ddcb.js
@@ -0,0 +1,1648 @@
+const BUILD = {"allRenderFn":true,"cmpDidLoad":true,"cmpDidUnload":false,"cmpDidUpdate":false,"cmpDidRender":false,"cmpWillLoad":true,"cmpWillUpdate":true,"cmpWillRender":false,"connectedCallback":true,"disconnectedCallback":true,"element":false,"event":true,"hasRenderFn":true,"lifecycle":true,"hostListener":true,"hostListenerTargetWindow":false,"hostListenerTargetDocument":false,"hostListenerTargetBody":false,"hostListenerTargetParent":true,"hostListenerTarget":true,"member":true,"method":true,"mode":false,"noVdomRender":false,"observeAttribute":true,"prop":true,"propMutable":true,"reflect":true,"scoped":false,"shadowDom":true,"slot":true,"slotRelocation":true,"state":true,"style":true,"svg":true,"updatable":true,"vdomAttribute":true,"vdomClass":true,"vdomFunctional":true,"vdomKey":true,"vdomListener":true,"vdomRef":true,"vdomRender":true,"vdomStyle":true,"vdomText":true,"watchCallback":true,"taskQueue":true,"lazyLoad":true,"hydrateServerSide":false,"cssVarShim":true,"hydrateClientSide":false,"isDebug":false,"isDev":false,"lifecycleDOMEvents":false,"profile":false,"hotModuleReplacement":false,"constructableCSS":true,"cssAnnotations":true};
+const NAMESPACE = 'calcite';
+
+const win = window;
+const doc = document;
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+};
+const supportsShadowDom = !!doc.documentElement.attachShadow;
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() { supportsListenerOptions = true; }
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
+const supportsConstructibleStylesheets = (() => {
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (e) { }
+    return false;
+})();
+
+const hostRefs = new WeakMap();
+const getHostRef = (ref) => hostRefs.get(ref);
+const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+const registerHost = (elm) => {
+    // TODO: it's so ugly, but minifies really well
+    {
+        const hostRef = {
+            $flags$: 0,
+            $hostElement$: elm
+        };
+        hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r);
+        {
+            hostRef.$instanceValues$ = new Map();
+        }
+        return hostRefs.set(elm, hostRef);
+    }
+};
+const isMemberInElement = (elm, memberName) => memberName in elm;
+
+const consoleError = (e) => console.error(e);
+
+const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+    // loadModuleImport
+    const bundleId = cmpMeta.$lazyBundleIds$;
+    return import(
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.(system|cjs)\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    `./${bundleId}.entry.js${''}`).then(importedModule => importedModule[cmpMeta.$tagName$.replace(/-/g, '_')], consoleError);
+};
+
+const styles = new Map();
+const cssVarShim = win.__stencil_cssshim;
+
+let queueCongestion = 0;
+let queuePending = false;
+const queueDomReads = [];
+const queueDomWrites = [];
+const queueDomWritesLow = [];
+const queueTask = (queue) => (cb) => {
+    // queue dom reads
+    queue.push(cb);
+    if (!queuePending) {
+        queuePending = true;
+        plt.raf(flush);
+    }
+};
+const consume = (queue) => {
+    for (let i = 0; i < queue.length; i++) {
+        try {
+            queue[i](performance.now());
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    queue.length = 0;
+};
+const consumeTimeout = (queue, timeout) => {
+    let i = 0;
+    let ts = 0;
+    while (i < queue.length && (ts = performance.now()) < timeout) {
+        try {
+            queue[i++](ts);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    if (i === queue.length) {
+        queue.length = 0;
+    }
+    else if (i !== 0) {
+        queue.splice(0, i);
+    }
+};
+const flush = () => {
+    queueCongestion++;
+    // always force a bunch of medium callbacks to run, but still have
+    // a throttle on how many can run in a certain time
+    // DOM READS!!!
+    consume(queueDomReads);
+    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
+        ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0)))
+        : Infinity;
+    // DOM WRITES!!!
+    consumeTimeout(queueDomWrites, timeout);
+    consumeTimeout(queueDomWritesLow, timeout);
+    if (queueDomWrites.length > 0) {
+        queueDomWritesLow.push(...queueDomWrites);
+        queueDomWrites.length = 0;
+    }
+    if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) {
+        // still more to do yet, but we've run out of time
+        // let's let this thing cool off and try again in the next tick
+        plt.raf(flush);
+    }
+    else {
+        queueCongestion = 0;
+    }
+};
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites);
+
+/**
+ * Default style mode id
+ */
+/**
+ * Reusable empty obj/array
+ * Don't add values to these!!
+ */
+const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+const isDef = (v) => v != null;
+const toLowerCase = (str) => str.toLowerCase();
+
+function getDynamicImportFunction(namespace) {
+    return `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+}
+
+const patchEsm = () => {
+    // @ts-ignore
+    if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return import('./css-shim-229ebf7a-229ebf7a.js');
+    }
+    return Promise.resolve();
+};
+const patchBrowser = async () => {
+    // @ts-ignore
+    const importMeta = "";
+    if (importMeta !== '') {
+        return Promise.resolve(new URL('.', importMeta).href);
+    }
+    else {
+        const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (s.src.includes(`/${NAMESPACE}.esm.js`) ||
+            s.getAttribute('data-namespace') === NAMESPACE));
+        const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, doc.baseURI));
+        patchDynamicImport(resourcesUrl.href);
+        if (!window.customElements) {
+            // @ts-ignore
+            await import('./dom-7eb7509a-7eb7509a.js');
+        }
+        return resourcesUrl.href;
+    }
+};
+const patchDynamicImport = (base) => {
+    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        win[importFunctionName] = new Function('w', 'return import(w);');
+    }
+    catch (e) {
+        const moduleMap = new Map();
+        win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = doc.createElement('script');
+                script.type = 'module';
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
+                mod = new Promise(resolve => {
+                    script.onload = () => {
+                        resolve(win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const HYDRATED_CLASS = 'hydrated';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+
+const rootAppliedStyles = new WeakMap();
+const registerStyle = (scopeId, cssText) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructibleStylesheets) {
+        style = (style || new CSSStyleSheet());
+        style.replace(cssText);
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, tagName, mode, hostElm) => {
+    let scopeId = getScopeId(tagName, mode);
+    let style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc);
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set());
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    if (cssVarShim) {
+                        styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style);
+                        const newScopeId = styleElm['s-sc'];
+                        if (newScopeId) {
+                            scopeId = newScopeId;
+                            // we don't want to add this styleID to the appliedStyles Set
+                            // since the cssVarShim might need to apply several different
+                            // stylesheets for the same component
+                            appliedStyles = null;
+                        }
+                    }
+                    else {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.appendChild(styleElm);
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [
+                ...styleContainerNode.adoptedStyleSheets,
+                style
+            ];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (elm, cmpMeta, mode) => {
+    const styleId = addStyle((supportsShadowDom && elm.shadowRoot)
+        ? elm.shadowRoot
+        : elm.getRootNode(), cmpMeta.$tagName$, mode, elm);
+    if (cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = styleId;
+        elm.classList.add(styleId + '-h');
+    }
+};
+const getScopeId = (tagName, mode) => 'sc-' + (tagName);
+
+/**
+ * Production h() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const stack = [];
+function h(nodeName, vnodeData) {
+    let children = null;
+    let lastSimple = false;
+    let simple = false;
+    let i = arguments.length;
+    let vkey;
+    let vname;
+    for (; i-- > 2;) {
+        stack.push(arguments[i]);
+    }
+    while (stack.length > 0) {
+        let child = stack.pop();
+        if (child && child.pop !== undefined) {
+            for (i = child.length; i--;) {
+                stack.push(child[i]);
+            }
+        }
+        else {
+            if (typeof child === 'boolean') {
+                child = null;
+            }
+            if ((simple = typeof nodeName !== 'function')) {
+                if (child == null) {
+                    child = '';
+                }
+                else if (typeof child === 'number') {
+                    child = String(child);
+                }
+                else if (typeof child !== 'string') {
+                    simple = false;
+                }
+            }
+            if (simple && lastSimple) {
+                children[children.length - 1].$text$ += child;
+            }
+            else if (children === null) {
+                children = [simple ? { $flags$: 0, $text$: child } : child];
+            }
+            else {
+                children.push(simple ? { $flags$: 0, $text$: child } : child);
+            }
+            lastSimple = simple;
+        }
+    }
+    {
+        if (vnodeData != null) {
+            // normalize class / classname attributes
+            if (vnodeData.className) {
+                vnodeData['class'] = vnodeData.className;
+            }
+            if (typeof vnodeData['class'] === 'object') {
+                for (i in vnodeData['class']) {
+                    if (vnodeData['class'][i]) {
+                        stack.push(i);
+                    }
+                }
+                vnodeData['class'] = stack.join(' ');
+                stack.length = 0;
+            }
+            if (vnodeData.key != null) {
+                vkey = vnodeData.key;
+            }
+            if (vnodeData.name != null) {
+                vname = vnodeData.name;
+            }
+        }
+    }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData, children || [], vdomFnUtils);
+    }
+    const vnode = {
+        $tag$: nodeName,
+        $children$: children,
+        $elm$: undefined,
+        $flags$: 0
+    };
+    {
+        vnode.$attrs$ = vnodeData;
+    }
+    {
+        vnode.$text$ = undefined;
+    }
+    {
+        vnode.$key$ = vkey;
+    }
+    {
+        vnode.$name$ = vname;
+    }
+    return vnode;
+}
+const Host = {};
+const vdomFnUtils = {
+    'forEach': (children, cb) => children.map(convertToPublic).forEach(cb),
+    'map': (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+const convertToPublic = (node) => {
+    return {
+        vattrs: node.$attrs$,
+        vchildren: node.$children$,
+        vkey: node.$key$,
+        vname: node.$name$,
+        vtag: node.$tag$,
+        vtext: node.$text$
+    };
+};
+const convertToPrivate = (node) => {
+    return {
+        $flags$: 0,
+        $attrs$: node.vattrs,
+        $children$: node.vchildren,
+        $key$: node.vkey,
+        $name$: node.vname,
+        $tag$: node.vtag,
+        $text$: node.vtext
+    };
+};
+
+/**
+ * Production setAccessor() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+    if (oldValue === newValue) {
+        return;
+    }
+    if (memberName === 'class' && !isSvg) {
+        // Class
+        {
+            const oldList = parseClassList(oldValue);
+            const baseList = parseClassList(elm.className).filter(item => !oldList.includes(item));
+            elm.className = baseList.concat(parseClassList(newValue).filter(item => !baseList.includes(item))).join(' ');
+        }
+    }
+    else if (memberName === 'style') {
+        // update style attribute, css properties and values
+        {
+            for (const prop in oldValue) {
+                if (!newValue || newValue[prop] == null) {
+                    if (prop.includes('-')) {
+                        elm.style.removeProperty(prop);
+                    }
+                    else {
+                        elm.style[prop] = '';
+                    }
+                }
+            }
+        }
+        for (const prop in newValue) {
+            if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                if (prop.includes('-')) {
+                    elm.style.setProperty(prop, newValue[prop]);
+                }
+                else {
+                    elm.style[prop] = newValue[prop];
+                }
+            }
+        }
+    }
+    else if (memberName === 'key') ;
+    else if (memberName === 'ref') {
+        // minifier will clean this up
+        if (newValue) {
+            newValue(elm);
+        }
+    }
+    else if (memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
+        // Event Handlers
+        // so if the member name starts with "on" and the 3rd characters is
+        // a capital letter, and it's not already a member on the element,
+        // then we're assuming it's an event listener
+        if (isMemberInElement(elm, toLowerCase(memberName))) {
+            // standard event
+            // the JSX attribute could have been "onMouseOver" and the
+            // member name "onmouseover" is on the element's prototype
+            // so let's add the listener "mouseover", which is all lowercased
+            memberName = toLowerCase(memberName.substring(2));
+        }
+        else {
+            // custom event
+            // the JSX attribute could have been "onMyCustomEvent"
+            // so let's trim off the "on" prefix and lowercase the first character
+            // and add the listener "myCustomEvent"
+            // except for the first character, we keep the event name case
+            memberName = toLowerCase(memberName[2]) + memberName.substring(3);
+        }
+        if (oldValue) {
+            plt.rel(elm, memberName, oldValue, false);
+        }
+        if (newValue) {
+            plt.ael(elm, memberName, newValue, false);
+        }
+    }
+    else {
+        // Set property if it exists and it's not a SVG
+        const isProp = isMemberInElement(elm, memberName);
+        const isComplex = ['object', 'function'].includes(typeof newValue);
+        if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
+            try {
+                elm[memberName] = newValue == null && elm.tagName.indexOf('-') === -1 ? '' : newValue;
+            }
+            catch (e) { }
+        }
+        /**
+         * Need to manually update attribute if:
+         * - memberName is not an attribute
+         * - if we are rendering the host element in order to reflect attribute
+         * - if it's a SVG, since properties might not work in <svg>
+         * - if the newValue is null/undefined or 'false'.
+         */
+        const isXlinkNs = isSvg && (memberName !== (memberName = memberName.replace(/^xlink\:?/, ''))) ? true : false;
+        if (newValue == null || newValue === false) {
+            if (isXlinkNs) {
+                elm.removeAttributeNS(XLINK_NS, toLowerCase(memberName));
+            }
+            else {
+                elm.removeAttribute(memberName);
+            }
+        }
+        else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
+            newValue = newValue === true ? '' : newValue.toString();
+            if (isXlinkNs) {
+                elm.setAttributeNS(XLINK_NS, toLowerCase(memberName), newValue);
+            }
+            else {
+                elm.setAttribute(memberName, newValue);
+            }
+        }
+    }
+};
+const parseClassList = (value) => (!value) ? [] : value.split(' ');
+
+const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
+    // if the element passed in is a shadow root, which is a document fragment
+    // then we want to be adding attrs/props to the shadow root's "host" element
+    // if it's not a shadow root, then we add attrs/props to the same element
+    const elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$;
+    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
+    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+    {
+        // remove attributes no longer present on the vnode by setting them to undefined
+        for (memberName in oldVnodeAttrs) {
+            if (newVnodeAttrs[memberName] == null && oldVnodeAttrs[memberName] != null) {
+                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
+            }
+        }
+    }
+    // add new & update changed attributes
+    for (memberName in newVnodeAttrs) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
+    }
+};
+
+let scopeId;
+let contentRef;
+let hostTagName;
+let useNativeShadowDom = false;
+let checkSlotFallbackVisibility = false;
+let checkSlotRelocate = false;
+let isSvgMode = false;
+const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+    const newVNode = newParentVNode.$children$[childIndex];
+    let i = 0;
+    let elm;
+    let childNode;
+    let oldVNode;
+    if (!useNativeShadowDom) {
+        // remember for later we need to check to relocate nodes
+        checkSlotRelocate = true;
+        if (newVNode.$tag$ === 'slot') {
+            if (scopeId) {
+                // scoped css needs to add its scoped id to the parent element
+                parentElm.classList.add(scopeId + '-s');
+            }
+            if (!newVNode.$children$) {
+                // slot element does not have fallback content
+                // create an html comment we'll use to always reference
+                // where actual slot content should sit next to
+                newVNode.$flags$ |= 1 /* isSlotReference */;
+            }
+            else {
+                // slot element has fallback content
+                // still create an element that "mocks" the slot element
+                newVNode.$flags$ |= 2 /* isSlotFallback */;
+            }
+        }
+    }
+    if (isDef(newVNode.$text$)) {
+        // create text node
+        newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else if (newVNode.$flags$ & 1 /* isSlotReference */) {
+        // create a slot reference node
+        newVNode.$elm$ = doc.createTextNode('');
+    }
+    else {
+        // create element
+        elm = newVNode.$elm$ = ((isSvgMode || newVNode.$tag$ === 'svg')
+            ? doc.createElementNS(SVG_NS, newVNode.$tag$)
+            : doc.createElement((newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
+        {
+            isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+        }
+        // add css classes, attrs, props, listeners, etc.
+        {
+            updateElement(null, newVNode, isSvgMode);
+        }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
+        if (newVNode.$children$) {
+            for (i = 0; i < newVNode.$children$.length; ++i) {
+                // create the node
+                childNode = createElm(oldParentVNode, newVNode, i, elm);
+                // return node could have been null
+                if (childNode) {
+                    // append our new node
+                    elm.appendChild(childNode);
+                }
+            }
+        }
+        if (newVNode.$tag$ === 'svg') {
+            // Only reset the SVG context when we're exiting SVG element
+            isSvgMode = false;
+        }
+    }
+    {
+        newVNode.$elm$['s-hn'] = hostTagName;
+        if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+            // remember the content reference comment
+            newVNode.$elm$['s-sr'] = true;
+            // remember the content reference comment
+            newVNode.$elm$['s-cr'] = contentRef;
+            // remember the slot name, or empty string for default slot
+            newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
+            // check if we've got an old vnode for this slot
+            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+            }
+        }
+    }
+    return newVNode.$elm$;
+};
+const putBackInOriginalLocation = (parentElm, recursive) => {
+    plt.$flags$ |= 1 /* isTmpDisconnected */;
+    const oldSlotChildNodes = parentElm.childNodes;
+    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+        const childNode = oldSlotChildNodes[i];
+        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
+            // and relocate it back to it's original location
+            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+            // remove the old original location comment entirely
+            // later on the patch function will know what to do
+            // and move this to the correct spot in need be
+            childNode['s-ol'].remove();
+            childNode['s-ol'] = undefined;
+            checkSlotRelocate = true;
+        }
+        if (recursive) {
+            putBackInOriginalLocation(childNode, recursive);
+        }
+    }
+    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+    let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    let childNode;
+    if (containerElm.shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnodes[startIdx]) {
+            childNode = createElm(null, parentVNode, startIdx, parentElm);
+            if (childNode) {
+                vnodes[startIdx].$elm$ = childNode;
+                containerElm.insertBefore(childNode, referenceNode(before));
+            }
+        }
+    }
+};
+const removeVnodes = (vnodes, startIdx, endIdx, elm) => {
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (isDef(vnodes[startIdx])) {
+            elm = vnodes[startIdx].$elm$;
+            callNodeRefs(vnodes[startIdx], true);
+            {
+                // we're removing this element
+                // so it's possible we need to show slot fallback content now
+                checkSlotFallbackVisibility = true;
+                if (elm['s-ol']) {
+                    // remove the original location comment
+                    elm['s-ol'].remove();
+                }
+                else {
+                    // it's possible that child nodes of the node
+                    // that's being removed are slot nodes
+                    putBackInOriginalLocation(elm, true);
+                }
+            }
+            // remove the vnode's element from the dom
+            elm.remove();
+        }
+    }
+};
+const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    let newEndIdx = newCh.length - 1;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let node;
+    let elmToMove;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (oldStartVnode == null) {
+            // Vnode might have been moved left
+            oldStartVnode = oldCh[++oldStartIdx];
+        }
+        else if (oldEndVnode == null) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (newStartVnode == null) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (newEndVnode == null) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            patch(oldStartVnode, newStartVnode);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            patch(oldEndVnode, newEndVnode);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // Vnode moved right
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+            }
+            patch(oldStartVnode, newEndVnode);
+            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // Vnode moved left
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+            }
+            patch(oldEndVnode, newStartVnode);
+            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            // createKeyToOldIdx
+            idxInOld = -1;
+            {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && isDef(oldCh[i].$key$) && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
+                // new element
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
+                newStartVnode = newCh[++newStartIdx];
+            }
+            if (node) {
+                {
+                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                }
+            }
+        }
+    }
+    if (oldStartIdx > oldEndIdx) {
+        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
+    }
+    else if (newStartIdx > newEndIdx) {
+        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+    }
+};
+const isSameVnode = (vnode1, vnode2) => {
+    // compare if two vnode to see if they're "technically" the same
+    // need to have the same element tag, and same key to be the same
+    if (vnode1.$tag$ === vnode2.$tag$) {
+        if (vnode1.$tag$ === 'slot') {
+            return vnode1.$name$ === vnode2.$name$;
+        }
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
+        return true;
+    }
+    return false;
+};
+const referenceNode = (node) => {
+    if (node && node['s-ol']) {
+        // this node was relocated to a new location in the dom
+        // because of some other component's slot
+        // but we still have an html comment in place of where
+        // it's original location was according to it's original vdom
+        return node['s-ol'];
+    }
+    return node;
+};
+const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
+const patch = (oldVNode, newVNode) => {
+    const elm = newVNode.$elm$ = oldVNode.$elm$;
+    const oldChildren = oldVNode.$children$;
+    const newChildren = newVNode.$children$;
+    let defaultHolder;
+    {
+        // test if we're rendering an svg element, or still rendering nodes inside of one
+        // only add this to the when the compiler sees we're using an svg somewhere
+        isSvgMode = elm &&
+            isDef(elm.parentNode) &&
+            elm.ownerSVGElement !== undefined;
+        isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+    }
+    if (!isDef(newVNode.$text$)) {
+        // element node
+        {
+            if (newVNode.$tag$ === 'slot') ;
+            else {
+                // either this is the first render of an element OR it's an update
+                // AND we already know it's possible it could have changed
+                // this updates the element's css classes, attrs, props, listeners, etc.
+                updateElement(oldVNode, newVNode, isSvgMode);
+            }
+        }
+        if (isDef(oldChildren) && isDef(newChildren)) {
+            // looks like there's child vnodes for both the old and new vnodes
+            updateChildren(elm, oldChildren, newVNode, newChildren);
+        }
+        else if (isDef(newChildren)) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (isDef(oldVNode.$text$)) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
+            // add the new vnode children
+            addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+        }
+        else if (isDef(oldChildren)) {
+            // no new child vnodes, but there are old child vnodes to remove
+            removeVnodes(oldChildren, 0, oldChildren.length - 1);
+        }
+    }
+    else if (defaultHolder = elm['s-cr']) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = newVNode.$text$;
+    }
+    else if (oldVNode.$text$ !== newVNode.$text$) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.textContent = newVNode.$text$;
+    }
+    {
+        // reset svgMode when svg node is fully patched
+        if (isSvgMode && 'svg' === newVNode.$tag$) {
+            isSvgMode = false;
+        }
+    }
+};
+const updateFallbackSlotVisibility = (elm, childNode, childNodes, i, ilen, j, slotNameAttr, nodeType) => {
+    childNodes = elm.childNodes;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            if (childNode['s-sr']) {
+                // this is a slot fallback node
+                // get the slot name for this slot reference node
+                slotNameAttr = childNode['s-sn'];
+                // by default always show a fallback slot node
+                // then hide it if there are other slots in the light dom
+                childNode.hidden = false;
+                for (j = 0; j < ilen; j++) {
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
+                        // this sibling node is from a different component
+                        nodeType = childNodes[j].nodeType;
+                        if (slotNameAttr !== '') {
+                            // this is a named fallback slot node
+                            if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                        else {
+                            // this is a default fallback slot node
+                            // any element or text node (with content)
+                            // should hide the default fallback slot node
+                            if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            // keep drilling down
+            updateFallbackSlotVisibility(childNode);
+        }
+    }
+};
+const relocateNodes = [];
+const relocateSlotContent = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    let childNodes = elm.childNodes;
+    let ilen = childNodes.length;
+    let i = 0;
+    let j = 0;
+    let nodeType = 0;
+    let childNode;
+    let node;
+    let hostContentNodes;
+    let slotNameAttr;
+    for (ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
+            hostContentNodes = node.parentNode.childNodes;
+            slotNameAttr = childNode['s-sn'];
+            for (j = hostContentNodes.length - 1; j >= 0; j--) {
+                node = hostContentNodes[j];
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // that is suppose to always represent the original content location
+                    nodeType = node.nodeType;
+                    if (((nodeType === 3 /* TextNode */ || nodeType === 8 /* CommentNode */) && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === null && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === slotNameAttr)) {
+                        // it's possible we've already decided to relocate this node
+                        if (!relocateNodes.some(r => r.nodeToRelocate === node)) {
+                            // made some changes to slots
+                            // let's make sure we also double check
+                            // fallbacks are correctly hidden or shown
+                            checkSlotFallbackVisibility = true;
+                            node['s-sn'] = slotNameAttr;
+                            // add to our list of nodes to relocate
+                            relocateNodes.push({
+                                slotRefNode: childNode,
+                                nodeToRelocate: node
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            relocateSlotContent(childNode);
+        }
+    }
+};
+const callNodeRefs = (vNode, isDestroy) => {
+    if (vNode) {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(isDestroy ? null : vNode.$elm$);
+        vNode.$children$ && vNode.$children$.forEach(vChild => {
+            callNodeRefs(vChild, isDestroy);
+        });
+    }
+};
+const isHost = (node) => {
+    return node && node.$tag$ === Host;
+};
+const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
+    const oldVNode = hostRef.$vnode$ || { $flags$: 0 };
+    hostTagName = toLowerCase(hostElm.tagName);
+    if (isHost(renderFnResults)) {
+        renderFnResults.$tag$ = null;
+    }
+    else {
+        renderFnResults = h(null, null, renderFnResults);
+    }
+    if (cmpMeta.$attrsToReflect$) {
+        renderFnResults.$attrs$ = renderFnResults.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => renderFnResults.$attrs$[attribute] = hostElm[propName]);
+    }
+    renderFnResults.$flags$ |= 4 /* isHost */;
+    hostRef.$vnode$ = renderFnResults;
+    renderFnResults.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm);
+    {
+        scopeId = hostElm['s-sc'];
+    }
+    {
+        contentRef = hostElm['s-cr'];
+        useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+        // always reset
+        checkSlotRelocate = checkSlotFallbackVisibility = false;
+    }
+    // synchronous patch
+    patch(oldVNode, renderFnResults);
+    {
+        if (checkSlotRelocate) {
+            relocateSlotContent(renderFnResults.$elm$);
+            for (let i = 0; i < relocateNodes.length; i++) {
+                const relocateNode = relocateNodes[i];
+                if (!relocateNode.nodeToRelocate['s-ol']) {
+                    // add a reference node marking this node's original location
+                    // keep a reference to this node for later lookups
+                    const orgLocationNode = doc.createTextNode('');
+                    orgLocationNode['s-nr'] = relocateNode.nodeToRelocate;
+                    relocateNode.nodeToRelocate.parentNode.insertBefore((relocateNode.nodeToRelocate['s-ol'] = orgLocationNode), relocateNode.nodeToRelocate);
+                }
+            }
+            // while we're moving nodes around existing nodes, temporarily disable
+            // the disconnectCallback from working
+            plt.$flags$ |= 1 /* isTmpDisconnected */;
+            for (let i = 0; i < relocateNodes.length; i++) {
+                const relocateNode = relocateNodes[i];
+                // by default we're just going to insert it directly
+                // after the slot reference node
+                const parentNodeRef = relocateNode.slotRefNode.parentNode;
+                let insertBeforeNode = relocateNode.slotRefNode.nextSibling;
+                let orgLocationNode = relocateNode.nodeToRelocate['s-ol'];
+                while (orgLocationNode = orgLocationNode.previousSibling) {
+                    let refNode = orgLocationNode['s-nr'];
+                    if (refNode && refNode) {
+                        if (refNode['s-sn'] === relocateNode.nodeToRelocate['s-sn']) {
+                            if (parentNodeRef === refNode.parentNode) {
+                                if ((refNode = refNode.nextSibling) && refNode && !refNode['s-nr']) {
+                                    insertBeforeNode = refNode;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if ((!insertBeforeNode && parentNodeRef !== relocateNode.nodeToRelocate.parentNode) ||
+                    (relocateNode.nodeToRelocate.nextSibling !== insertBeforeNode)) {
+                    // we've checked that it's worth while to relocate
+                    // since that the node to relocate
+                    // has a different next sibling or parent relocated
+                    if (relocateNode.nodeToRelocate !== insertBeforeNode) {
+                        // add it back to the dom but in its new home
+                        parentNodeRef.insertBefore(relocateNode.nodeToRelocate, insertBeforeNode);
+                    }
+                }
+            }
+            // done moving nodes around
+            // allow the disconnect callback to work again
+            plt.$flags$ &= ~1 /* isTmpDisconnected */;
+        }
+        if (checkSlotFallbackVisibility) {
+            updateFallbackSlotVisibility(renderFnResults.$elm$);
+        }
+        // always reset
+        relocateNodes.length = 0;
+    }
+};
+
+const safeCall = async (instance, method) => {
+    if (instance && instance[method]) {
+        try {
+            await instance[method]();
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+};
+const scheduleUpdate = async (elm, hostRef, cmpMeta, isInitialLoad) => {
+    {
+        hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
+    }
+    const instance = hostRef.$lazyInstance$;
+    if (isInitialLoad) {
+        {
+            await safeCall(instance, 'componentWillLoad');
+        }
+    }
+    else {
+        {
+            await safeCall(instance, 'componentWillUpdate');
+        }
+    }
+    // there is no ancestorc omponent or the ancestor component
+    // has already fired off its lifecycle update then
+    // fire off the initial update
+    {
+        writeTask(() => updateComponent(elm, hostRef, cmpMeta, isInitialLoad, instance));
+    }
+};
+const updateComponent = (elm, hostRef, cmpMeta, isInitialLoad, instance) => {
+    // updateComponent
+    {
+        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+    }
+    {
+        elm['s-lr'] = false;
+    }
+    if (isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(elm, cmpMeta, hostRef.$modeName$);
+    }
+    {
+        {
+            // tell the platform we're actively rendering
+            // if a value is changed within a render() then
+            // this tells the platform not to queue the change
+            hostRef.$flags$ |= 4 /* isActiveRender */;
+            try {
+                // looks like we've got child nodes to render into this host element
+                // or we need to update the css class/attrs on the host element
+                // DOM WRITE!
+                renderVdom(elm, hostRef, cmpMeta, instance.render());
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            hostRef.$flags$ &= ~4 /* isActiveRender */;
+        }
+    }
+    if (cssVarShim) {
+        cssVarShim.updateHost(elm);
+    }
+    // set that this component lifecycle rendering has completed
+    {
+        elm['s-lr'] = true;
+    }
+    {
+        hostRef.$flags$ |= 2 /* hasRendered */;
+    }
+    if (elm['s-rc'].length > 0) {
+        // ok, so turns out there are some child host elements
+        // waiting on this parent element to load
+        // let's fire off all update callbacks waiting
+        elm['s-rc'].forEach(cb => cb());
+        elm['s-rc'].length = 0;
+    }
+    postUpdateComponent(elm, hostRef);
+};
+const postUpdateComponent = (elm, hostRef, ancestorsActivelyLoadingChildren) => {
+    if (!elm['s-al']) {
+        const instance = hostRef.$lazyInstance$;
+        const ancestorComponent = hostRef.$ancestorComponent$;
+        if (!(hostRef.$flags$ & 512 /* hasLoadedComponent */)) {
+            hostRef.$flags$ |= 512 /* hasLoadedComponent */;
+            {
+                // DOM WRITE!
+                // add the css class that this element has officially hydrated
+                elm.classList.add(HYDRATED_CLASS);
+            }
+            {
+                safeCall(instance, 'componentDidLoad');
+            }
+            {
+                hostRef.$onReadyResolve$(elm);
+            }
+            if (!ancestorComponent) {
+                // on appload
+                // we have finish the first big initial render
+                doc.documentElement.classList.add(HYDRATED_CLASS);
+                {
+                    setTimeout(() => plt.$flags$ |= 2 /* appLoaded */, 999);
+                }
+            }
+        }
+        // load events fire from bottom to top
+        // the deepest elements load first then bubbles up
+        if (ancestorComponent) {
+            // ok so this element already has a known ancestor component
+            // let's make sure we remove this element from its ancestor's
+            // known list of child elements which are actively loading
+            if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) {
+                // remove this element from the actively loading map
+                ancestorsActivelyLoadingChildren.delete(elm);
+                // the ancestor's initializeComponent method will do the actual checks
+                // to see if the ancestor is actually loaded or not
+                // then let's call the ancestor's initializeComponent method if there's no length
+                // (which actually ends up as this method again but for the ancestor)
+                if (ancestorsActivelyLoadingChildren.size === 0) {
+                    ancestorComponent['s-al'] = undefined;
+                    ancestorComponent['s-init']();
+                }
+            }
+            hostRef.$ancestorComponent$ = undefined;
+        }
+        // ( •_•)
+        // ( •_•)>⌐■-■
+        // (⌐■_■)
+    }
+};
+
+const disconnectedCallback = (elm) => {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        const hostRef = getHostRef(elm);
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$();
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
+        // clear CSS var-shim tracking
+        if (cssVarShim) {
+            cssVarShim.removeHost(elm);
+        }
+        const instance = hostRef.$lazyInstance$;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
+    }
+};
+
+const parsePropertyValue = (propValue, expectedPropType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && typeof propValue !== 'object' && typeof propValue !== 'function') {
+        if (expectedPropType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return (propValue === 'false' ? false : propValue === '' || !!propValue);
+        }
+        if (expectedPropType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (expectedPropType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+
+const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
+const setValue = (ref, propName, newVal, cmpMeta) => {
+    // check our new property value against our internal value
+    const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$;
+    const oldVal = hostRef.$instanceValues$.get(propName);
+    const flags = hostRef.$flags$;
+    newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+    if (newVal !== oldVal && (!(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
+        // gadzooks! the property's value has changed!!
+        // set our new value!
+        hostRef.$instanceValues$.set(propName, newVal);
+        if (hostRef.$lazyInstance$) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ &&
+                (flags & (1 /* hasConnected */ | 8 /* isConstructingInstance */)) === 1 /* hasConnected */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.forEach(watchMethodName => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            (hostRef.$lazyInstance$)[watchMethodName].call((hostRef.$lazyInstance$), newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e);
+                        }
+                    });
+                }
+            }
+            if ((flags & (4 /* isActiveRender */ | 2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+                // looks like this value actually changed, so we've got work to do!
+                // but only if we've already rendered, otherwise just chill out
+                // queue that we need to do an update, but don't worry about queuing
+                // up millions cuz this function ensures it only runs once
+                scheduleUpdate(elm, hostRef, cmpMeta, false);
+            }
+        }
+    }
+};
+
+const proxyComponent = (Cstr, cmpMeta, isElementConstructor, proxyState) => {
+    if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
+        // It's better to have a const than two Object.entries()
+        const members = Object.entries(cmpMeta.$members$);
+        members.forEach(([memberName, [memberFlags]]) => {
+            if ((memberFlags & 31) || (proxyState && (memberFlags & 32 /* State */))) {
+                // proxyComponent - prop
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    get() {
+                        // proxyComponent, get value
+                        return getValue(this, memberName);
+                    },
+                    set(newValue) {
+                        // proxyComponent, set value
+                        setValue(this, memberName, newValue, cmpMeta);
+                    },
+                    configurable: true,
+                    enumerable: true
+                });
+            }
+            else if (isElementConstructor && (memberFlags & 64 /* Method */)) {
+                // proxyComponent - method
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    value(...args) {
+                        const ref = getHostRef(this);
+                        return ref.$onReadyPromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                    }
+                });
+            }
+        });
+        if (isElementConstructor) {
+            const attrNameToPropName = new Map();
+            Cstr.prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+                const propName = attrNameToPropName.get(attrName);
+                this[propName] = newValue === null && typeof this[propName] === 'boolean'
+                    ? false
+                    : newValue;
+            };
+            // create an array of attributes to observe
+            // and also create a map of html attribute name to js property name
+            Cstr.observedAttributes = members
+                .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
+                .map(([propName, m]) => {
+                const attrName = m[1] || propName;
+                attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
+                return attrName;
+            });
+        }
+    }
+    return Cstr;
+};
+
+const addEventListeners = (elm, hostRef, listeners) => {
+    const removeFns = listeners.map(([flags, name, method]) => {
+        const target = (getHostListenerTarget(elm, flags));
+        const handler = hostListenerProxy(hostRef, method);
+        const opts = hostListenerOpts(flags);
+        plt.ael(target, name, handler, opts);
+        return () => plt.rel(target, name, handler, opts);
+    });
+    return () => removeFns.forEach(fn => fn());
+};
+const hostListenerProxy = (hostRef, methodName) => {
+    return (ev) => {
+        {
+            if (hostRef.$lazyInstance$) {
+                // instance is ready, let's call it's member method for this event
+                return hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                return hostRef.$onReadyPromise$.then(() => hostRef.$lazyInstance$[methodName](ev)).catch(consoleError);
+            }
+        }
+    };
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 16 /* TargetParent */)
+        return elm.parentElement;
+    return elm;
+};
+const hostListenerOpts = (flags) => supportsListenerOptions ?
+    {
+        'passive': (flags & 1 /* Passive */) !== 0,
+        'capture': (flags & 2 /* Capture */) !== 0,
+    }
+    : (flags & 2 /* Capture */) !== 0;
+
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+    // initializeComponent
+    if ((hostRef.$flags$ & 256 /* hasInitializedComponent */) === 0) {
+        // we haven't initialized this element yet
+        hostRef.$flags$ |= 256 /* hasInitializedComponent */;
+        {
+            // lazy loaded components
+            // request the component's implementation to be
+            // wired up with the host element
+            Cstr = await loadModule(cmpMeta, hostRef, hmrVersionId);
+            if (!Cstr.isProxied) {
+                // we'eve never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
+                proxyComponent(Cstr, cmpMeta, 0, 1);
+                Cstr.isProxied = true;
+            }
+            // ok, time to construct the instance
+            // but let's keep track of when we start and stop
+            // so that the getters/setters don't incorrectly step on data
+            {
+                hostRef.$flags$ |= 8 /* isConstructingInstance */;
+            }
+            // construct the lazy-loaded component implementation
+            // passing the hostRef is very important during
+            // construction in order to directly wire together the
+            // host element and the lazy-loaded instance
+            try {
+                new Cstr(hostRef);
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            {
+                hostRef.$flags$ &= ~8 /* isConstructingInstance */;
+            }
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
+        if (!Cstr.isStyleRegistered && Cstr.style) {
+            // this component has styles but we haven't registered them yet
+            let style = Cstr.style;
+            let scopeId = getScopeId(cmpMeta.$tagName$, hostRef.$modeName$);
+            if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+                style = await import('./shadow-css-984bac74-549b16dd.js').then(m => m.scopeCss(style, scopeId, false));
+            }
+            registerStyle(scopeId, style);
+            Cstr.isStyleRegistered = true;
+        }
+    }
+    // we've successfully created a lazy instance
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    if (ancestorComponent && !ancestorComponent['s-lr'] && ancestorComponent['s-rc']) {
+        // this is the intial load and this component it has an ancestor component
+        // but the ancestor component has NOT fired its will update lifecycle yet
+        // so let's just cool our jets and wait for the ancestor to continue first
+        ancestorComponent['s-rc'].push(() => 
+        // this will get fired off when the ancestor component
+        // finally gets around to rendering its lazy self
+        // fire off the initial update
+        initializeComponent(elm, hostRef, cmpMeta));
+    }
+    else {
+        scheduleUpdate(elm, hostRef, cmpMeta, true);
+    }
+};
+
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
+const connectedCallback = (elm, cmpMeta) => {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        // connectedCallback
+        const hostRef = getHostRef(elm);
+        if (cmpMeta.$listeners$) {
+            // initialize our event listeners on the host element
+            // we do this now so that we can listening to events that may
+            // have fired even before the instance is ready
+            hostRef.$rmListeners$ = addEventListeners(elm, hostRef, cmpMeta.$listeners$);
+        }
+        if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
+            // first time this component has connected
+            hostRef.$flags$ |= 1 /* hasConnected */;
+            let hostId;
+            if (!hostId) {
+                // initUpdate
+                // if the slot polyfill is required we'll need to put some nodes
+                // in here to act as original content anchors as we move nodes around
+                // host element has been connected to the DOM
+                if (cmpMeta.$flags$ & 4 ||
+                    (cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
+                    setContentReference(elm);
+                }
+            }
+            {
+                // find the first ancestor component (if there is one) and register
+                // this component as one of the actively loading child components for its ancestor
+                let ancestorComponent = elm;
+                while ((ancestorComponent = (ancestorComponent.parentNode || ancestorComponent.host))) {
+                    // climb up the ancestors looking for the first
+                    // component that hasn't finished its lifecycle update yet
+                    if ((ancestorComponent['s-init'] && !ancestorComponent['s-lr']) || (BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id'))) {
+                        // we found this components first ancestor component
+                        // keep a reference to this component's ancestor component
+                        hostRef.$ancestorComponent$ = ancestorComponent;
+                        // ensure there is an array to contain a reference to each of the child components
+                        // and set this component as one of the ancestor's child components it should wait on
+                        (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm);
+                        break;
+                    }
+                }
+            }
+            // Lazy properties
+            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+            if (cmpMeta.$members$) {
+                Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
+                    if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+                        const value = elm[memberName];
+                        delete elm[memberName];
+                        elm[memberName] = value;
+                    }
+                });
+            }
+            {
+                initializeComponent(elm, hostRef, cmpMeta);
+            }
+        }
+        fireConnectedCallback(hostRef.$lazyInstance$);
+    }
+};
+const setContentReference = (elm, contentRefElm) => {
+    // only required when we're NOT using native shadow dom (slot)
+    // or this browser doesn't support native shadow dom
+    // and this host element was NOT created with SSR
+    // let's pick out the inner content for slot projection
+    // create a node to represent where the original
+    // content was first placed, which is useful later on
+    let crName;
+    {
+        crName = '';
+    }
+    contentRefElm = elm['s-cr'] = doc.createComment(crName);
+    contentRefElm['s-cn'] = true;
+    elm.insertBefore(contentRefElm, elm.firstChild);
+};
+
+const bootstrapLazy = (lazyBundles, options = {}) => {
+    const cmpTags = [];
+    const exclude = options.exclude || [];
+    const head = doc.head;
+    const customElements = win.customElements;
+    const y = /*@__PURE__*/ head.querySelector('meta[charset]');
+    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    Object.assign(plt, options);
+    plt.$resourcesUrl$ = new URL(options.resourcesUrl || '/', doc.baseURI).href;
+    if (options.syncQueue) {
+        plt.$flags$ |= 4 /* queueSync */;
+    }
+    lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
+        const cmpMeta = {
+            $flags$: compactMeta[0],
+            $tagName$: compactMeta[1],
+            $members$: compactMeta[2],
+            $listeners$: compactMeta[3],
+        };
+        {
+            cmpMeta.$attrsToReflect$ = [];
+        }
+        {
+            cmpMeta.$watchers$ = {};
+        }
+        if (!supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+        }
+        const tagName = cmpMeta.$tagName$;
+        const HostElement = class extends HTMLElement {
+            // StencilLazyHost
+            constructor(self) {
+                // @ts-ignore
+                super(self);
+                self = this;
+                {
+                    this['s-lr'] = false;
+                    this['s-rc'] = [];
+                }
+                registerHost(self);
+                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                    // this component is using shadow dom
+                    // and this browser supports shadow dom
+                    // add the read-only property "shadowRoot" to the host element
+                    if (supportsShadowDom) {
+                        self.attachShadow({ 'mode': 'open' });
+                    }
+                    else if (!('shadowRoot' in self)) {
+                        self.shadowRoot = self;
+                    }
+                }
+            }
+            connectedCallback() {
+                connectedCallback(this, cmpMeta);
+            }
+            disconnectedCallback() {
+                disconnectedCallback(this);
+            }
+            's-init'() {
+                const hostRef = getHostRef(this);
+                if (hostRef.$lazyInstance$) {
+                    postUpdateComponent(this, hostRef);
+                }
+            }
+            's-hmr'(hmrVersionId) {
+            }
+            forceUpdate() {
+                {
+                    const hostRef = getHostRef(this);
+                    scheduleUpdate(this, hostRef, cmpMeta, false);
+                }
+            }
+            componentOnReady() {
+                return getHostRef(this).$onReadyPromise$;
+            }
+        };
+        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
+        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+            cmpTags.push(tagName);
+            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1, 0));
+        }
+    }));
+    // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}';
+    visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}';
+    visibilityStyle.setAttribute('data-styles', '');
+    head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild);
+};
+
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => elm.dispatchEvent(new (CustomEvent)(name, {
+            bubbles: !!(flags & 4 /* Bubbles */),
+            composed: !!(flags & 2 /* Composed */),
+            cancelable: !!(flags & 1 /* Cancellable */),
+            detail
+        }))
+    };
+};
+
+const getElement = (ref) => getHostRef(ref).$hostElement$;
+
+export { patchBrowser as a, bootstrapLazy as b, patchEsm as c, h as d, registerInstance as e, createEvent as f, Host as g, getElement as h };
diff --git a/dist/esm/calcite-alert_8.entry.js b/dist/esm/calcite-alert_8.entry.js
new file mode 100644
index 00000000000..c36b223795e
--- /dev/null
+++ b/dist/esm/calcite-alert_8.entry.js
@@ -0,0 +1,389 @@
+import { d as h, e as registerInstance, f as createEvent, g as Host, h as getElement } from './calcite-a092ddcb.js';
+
+// File generated automatically by path-data.js, do not edit directly
+const checkCircle24F = "M23 11.5A11.5 11.5 0 1 1 11.5 0 11.5 11.5 0 0 1 23 11.5zm-5.5-6.018l-8.5 8.5-3.5-3.5-2 2L9.018 18l.018-.018L11.018 16l8.5-8.5z";
+const exclamationMarkTriangle24F = "M22.3 19.795l-9-17.901a1.5 1.5 0 0 0-2.597 0L1.7 19.795a1.502 1.502 0 0 0 0 1.502A1.456 1.456 0 0 0 2.998 22H21a1.458 1.458 0 0 0 1.299-.703 1.506 1.506 0 0 0 .001-1.502zM13 19h-2v-2h2zm0-3h-2V8h2z";
+const lightbulb24F = "M11 13h1v4h-1zm3.895 5.45a.311.311 0 0 0-.12-.27l-.232-.18h-6.19l-.232.18a.312.312 0 0 0 .04.518l1.387.771-1.367.76a.311.311 0 0 0-.028.526l3.09 2.18a.356.356 0 0 0 .41 0l3.09-2.18a.311.311 0 0 0-.029-.527l-1.366-.759 1.388-.77a.312.312 0 0 0 .159-.25zM11.59 0l-.173.002L11.244 0a6.2 6.2 0 0 0-6.182 6.698c.31 2.575 2.784 5.207 2.939 6.134.13.78.116 1.844.199 2.472A2.542 2.542 0 0 0 9.088 17H10v-4.412L8.83 9.37l.94-.342L10.85 12h1.3l1.08-2.97.94.341L13 12.588V17h.745a2.542 2.542 0 0 0 .889-1.696c.083-.628.068-1.692.199-2.472.154-.927 2.628-3.559 2.938-6.134A6.2 6.2 0 0 0 11.59 0z";
+const x32 = "M16.707 16l10.607 10.606-.708.707L16 16.707 5.394 27.313l-.708-.707L15.293 16 4.686 5.394l.708-.707L16 15.293 26.606 4.687l.708.707z";
+
+const createProviderConsumer = (defaultState, consumerRender) => {
+    let listeners = new Map();
+    let currentState = defaultState;
+    const updateListener = (fields, instance) => {
+        if (Array.isArray(fields)) {
+            [...fields].forEach(fieldName => {
+                instance[fieldName] = currentState[fieldName];
+            });
+        }
+        else {
+            instance[fields] = Object.assign({}, currentState);
+        }
+    };
+    const subscribe = (instance, propList) => {
+        if (!listeners.has(instance)) {
+            listeners.set(instance, propList);
+            updateListener(propList, instance);
+        }
+        return () => {
+            if (listeners.has(instance)) {
+                listeners.delete(instance);
+            }
+        };
+    };
+    const Provider = ({ state }, children) => {
+        currentState = state;
+        listeners.forEach(updateListener);
+        return children;
+    };
+    const Consumer = (props, children) => {
+        // The casting on subscribe is to allow for crossover through the stencil compiler
+        // In the future we should allow for generics in components.
+        return consumerRender(subscribe, children[0]);
+    };
+    const injectProps = (Cstr, fieldList) => {
+        const CstrPrototype = Cstr.prototype;
+        const cstrConnectedCallback = CstrPrototype.connectedCallback;
+        const cstrDisconnectedCallback = CstrPrototype.disconnectedCallback;
+        CstrPrototype.connectedCallback = function () {
+            subscribe(this, fieldList);
+            if (cstrConnectedCallback) {
+                return cstrConnectedCallback.call(this);
+            }
+        };
+        CstrPrototype.disconnectedCallback = function () {
+            listeners.delete(this);
+            if (cstrDisconnectedCallback) {
+                cstrDisconnectedCallback.call(this);
+            }
+        };
+    };
+    return {
+        Provider,
+        Consumer,
+        injectProps
+    };
+};
+
+const AlertInterface = createProviderConsumer({
+    currentAlert: '',
+    queueLength: 0
+}, (subscribe, child) => (h("context-consumer", { subscribe: subscribe, renderer: child })));
+
+class CalciteAlert {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.currentAlert = '';
+        this.dismiss = false;
+        this.icon = false;
+        this.id = '1';
+        this.queueLength = 0;
+        this.color = 'blue';
+        this.theme = null;
+        this.duration = this.dismiss ? 'medium' : null;
+        this.isActive = this.id === this.currentAlert;
+        this.alertClose = createEvent(this, "alertClose", 7);
+        this.alertOpen = createEvent(this, "alertOpen", 7);
+    }
+    async close() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.alertClose.emit(this.id);
+        }
+    }
+    componentWillUpdate() {
+        this.isActive = this.currentAlert === this.id;
+        if (this.isActive)
+            this.alertOpen.emit(this.id);
+        if (this.isActive && this.dismiss)
+            setTimeout(() => { this.close(); }, this.duration === 'fast' ? 6000 : this.duration === 'slow' ? 14000 : 10000);
+    }
+    setIcon() {
+        var path = this.color === 'green' ? checkCircle24F : (this.color === 'red' || this.color === 'yellow') ? exclamationMarkTriangle24F : lightbulb24F;
+        return (h("div", { class: "alert-icon" }, h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '24', width: '24', viewBox: '0 0 24 24' }, h("path", { d: path }))));
+    }
+    render() {
+        const closeButton = (h("button", { class: "alert-close", "aria-label": "close", onClick: () => this.close() }, h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '32', width: '32', viewBox: '0 0 32 32' }, h("path", { d: x32 }))));
+        const close = !this.dismiss ? closeButton : '';
+        const icon = this.icon ? this.setIcon() : '';
+        const count = h("div", { class: `${this.queueLength > 0 ? 'is-active ' : ''}alert-count` }, "+", this.queueLength > 0 ? this.queueLength : 1);
+        const progress = this.isActive && this.dismiss ? h("div", { class: "alert-dismiss" }) : '';
+        return (h(Host, { theme: this.theme, "is-active": !!this.isActive, duration: this.duration }, icon, h("div", { class: "alert-content" }, h("slot", { name: "alert-title" }), h("slot", { name: "alert-message" }), h("slot", { name: "alert-link" })), count, close, progress));
+    }
+    get el() { return getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:relative;-ms-flex-pack:center;justify-content:center;right:0;left:0;margin-right:auto;margin-left:auto;z-index:100;width:50em;max-width:90%;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,.15);box-shadow:0 0 12px 0 rgba(0,0,0,.15);height:0;opacity:0;overflow:visible;display:-ms-flexbox;display:flex;border-top:3px solid;-webkit-transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;-webkit-transform:translate3d(0,1.5rem,0);transform:translate3d(0,1.5rem,0);pointer-events:none;border-width:0}\@media only screen and (max-width:600px){:host{max-width:100%;border-radius:2px 2px 0 0;-webkit-box-shadow:0 -6px 12px 0 rgba(0,0,0,.15);box-shadow:0 -6px 12px 0 rgba(0,0,0,.15)}}:host([is-active]){visibility:visible;border-width:3px;opacity:1;height:100%;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto}:host slot[name=alert-title]::slotted(div){display:block;font-weight:500;font-size:16px}:host slot[name=alert-link]::slotted(a){display:inline-block;font-size:15px;color:#007ac2}:host slot[name=alert-message]::slotted(div){font-size:15px;color:#555;display:inline;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host([theme=dark]){background-color:#2b2b2b}:host([theme=dark]) slot[name=alert-title]::slotted(div){color:#f8f8f8}:host([theme=dark]) slot[name=alert-message]::slotted(div){color:#f3f3f3}.alert-content{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;word-wrap:break-word;-webkit-padding-before:.75rem;padding-block-start:.75rem;-webkit-padding-after:.75rem;padding-block-end:.75rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}\@media only screen and (max-width:600px){.alert-content{padding:1.5rem}}.alert-content svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-content:first-of-type{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}\@media only screen and (max-width:600px){.alert-content{-webkit-padding-before:1.5rem;padding-block-start:1.5rem;-webkit-padding-after:1.5rem;padding-block-end:1.5rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}}.alert-icon{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (max-width:600px){.alert-icon{padding:1.5rem}}.alert-icon svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-close{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-appearance:none;background-color:transparent;border:none;outline:none;cursor:pointer;border-radius:0 0 2px 0}\@media only screen and (max-width:600px){.alert-close{padding:1.5rem}}.alert-close svg{position:relative;vertical-align:top;height:16px;width:16px;fill:#151515}.alert-close:focus,.alert-close:hover{background-color:#f3f3f3}.alert-close:active{background-color:#eaeaea}.alert-close:last-child{border-radius:0 0 2px 0}:host([dir=rtl]) .alert-close:last-child{border-radius:0 0 0 2px}\@media only screen and (max-width:600px){.alert-close{border-radius:0}}:host([theme=dark]) .alert-close svg{fill:#d4d4d4}:host([theme=dark]) .alert-close:focus,:host([theme=dark]) .alert-close:hover{background-color:#202020}:host([theme=dark]) .alert-close:active{background-color:#151515}.alert-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:0;font-size:14px;visibility:hidden;padding:0;font-weight:500;text-align:center;background-color:transparent;color:#757575;opacity:0;border-left:1px solid transparent;border-right:1px solid transparent;cursor:default}.alert-count.is-active{visibility:visible;-webkit-transition-delay:.3s;transition-delay:.3s;opacity:1;padding:0 .375rem;width:3rem;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3}.alert-count.is-active:last-child{border-right-color:transparent}\@media only screen and (max-width:600px){.alert-count{border-radius:0}}:host([theme=dark]) .alert-count{color:#d4d4d4}:host([theme=dark]) .alert-count.is-active{border-left:1px solid #202020;border-right:1px solid #202020}.alert-dismiss{left:0;top:0;z-index:101}.alert-dismiss,.alert-dismiss:after{display:block;position:absolute;right:0;height:3px}.alert-dismiss:after{top:-3px;border-radius:2px 2px 0 0;content:\"\";width:50%;background-color:hsla(0,0%,100%,.6);-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;z-index:200}:host([theme=dark]) .alert-dismiss:after{background-color:rgba(43,43,43,.6)}:host([duration=fast]) .alert-dismiss:after{-webkit-animation:dismissProgress 6s linear;animation:dismissProgress 6s linear}:host([duration=medium]) .alert-dismiss:after{-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear}:host([duration=slow]) .alert-dismiss:after{-webkit-animation:dismissProgress 14s linear;animation:dismissProgress 14s linear}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([color=blue]){border-top-color:#007ac2}:host([color=blue]) .alert-icon svg{fill:#007ac2}:host([color=red]){border-top-color:#d83020}:host([color=red]) .alert-icon svg{fill:#d83020}:host([color=yellow]){border-top-color:#edd317}:host([color=yellow]) .alert-icon svg{fill:#edd317}:host([color=green]){border-top-color:#35ac46}:host([color=green]) .alert-icon svg{fill:#35ac46}"; }
+}
+AlertInterface.injectProps(CalciteAlert, ['currentAlert', 'queueLength']);
+
+class CalciteAlerts {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = '1';
+        this.currentAlert = '';
+        this.isActive = false;
+        this.queue = [];
+        this.alertsClose = createEvent(this, "alertsClose", 7);
+        this.alertsOpen = createEvent(this, "alertsOpen", 7);
+    }
+    async open(requestedAlert) {
+        if (!this.queue.includes(requestedAlert)) {
+            this.isActive = true;
+            this.currentAlert = requestedAlert;
+            this.queue.push(requestedAlert);
+            this.alertsOpen.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+        }
+    }
+    updateQueue(event) {
+        if (this.queue.includes(event.detail))
+            this.queue = this.queue.filter(e => e !== event.detail);
+        if (this.queue.length < 1)
+            setTimeout(() => { this.isActive = false; }, 300);
+        this.alertsClose.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+    }
+    componentWillUpdate() {
+        this.currentAlert = this.queue.length > 0 ? this.queue[0] : '';
+    }
+    render() {
+        const alertState = {
+            currentAlert: this.currentAlert,
+            queueLength: this.queue.length >= 2 ? this.queue.length - 1 : 0
+        };
+        return (h(Host, { "is-active": !!this.isActive }, h(AlertInterface.Provider, { state: alertState }, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:fixed;visibility:hidden;opacity:0;left:0;right:0;bottom:1.5rem;height:0;z-index:101;pointer-events:none;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s}\@media only screen and (max-width:600px){:host{bottom:0}}:host([is-active]){height:auto;visibility:visible;opacity:1}"; }
+}
+
+class CalciteLoader {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isActive = false;
+        this.text = "Loading...";
+    }
+    render() {
+        return (h(Host, { "is-active": !!this.isActive }, h("div", { class: "loader-bars" }), h("div", { class: "loader-text" }, this.text)));
+    }
+    get el() { return getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host .loader-bars,:host .loader-bars:after,:host .loader-bars:before{background:#007ac2;-webkit-animation:load .8s ease-in-out infinite;animation:load .8s ease-in-out infinite;width:.85rem;height:2rem}:host .loader-bars:after,:host .loader-bars:before{position:absolute;top:0;content:\"\"}:host{position:relative;display:none;padding-bottom:4.5rem;padding-top:4.5rem}:host([is-active]){display:block}:host .loader-bars{text-indent:-9999em;margin:auto;position:absolute;right:calc(50% - .425rem);font-size:11px;-webkit-animation-delay:.16s;animation-delay:.16s}:host .loader-bars:before{left:-1.25rem}:host .loader-bars:after{left:1.25rem;-webkit-animation-delay:.32s;animation-delay:.32s}:host .loader-text{padding-top:4rem;text-align:center}\@-webkit-keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}\@keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}"; }
+}
+
+function format(first, middle, last) {
+    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+}
+
+class CalciteModal {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", { class: "example-class" }, "Hello, World! I'm ", this.getText());
+    }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.example-class{padding:1.5rem;color:#d83020;-webkit-box-shadow:0 0 16px 0 rgba(0,0,0,.05);box-shadow:0 0 16px 0 rgba(0,0,0,.05);border:1px solid #007ac2}"; }
+}
+
+// from https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples
+function random() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0] / 1e10;
+}
+function gen(count) {
+    var out = "";
+    for (var i = 0; i < count; i++) {
+        out += (((1 + random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return out;
+}
+function guid() {
+    return [gen(2), gen(1), gen(1), gen(1), gen(3)].join("-");
+}
+
+class CalciteTab {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = `calite-tab-${guid()}`;
+        this.isActive = false;
+        this.calciteRegisterTab = createEvent(this, "calciteRegisterTab", 7);
+    }
+    tabChangeHandler(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTab.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"), this.el));
+    }
+    async registerLabeledBy(id) {
+        this.labeledBy = id;
+    }
+    render() {
+        return (h(Host, { "aria-labeledby": this.labeledBy, "aria-expanded": this.isActive ? "true" : "false", role: "tabpanel" }, h("section", null, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([is-active]) section{display:block}section{display:none}"; }
+}
+
+class CalciteTabNav {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = `calite-tab-nav-${guid()}`;
+        this.selectedTab = 0;
+        this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
+    }
+    selectedTabChanged() {
+        this.calciteTabChange.emit({
+            tab: this.selectedTab
+        });
+    }
+    focusPreviousTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const previousTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+        previousTab.focus();
+    }
+    focusNextTabHandler(e) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        const currentIndex = this.getIndexOfTabTitle(e.target);
+        const nextTab = tabs[currentIndex + 1] || tabs[0];
+        nextTab.focus();
+    }
+    tabTitleRegistationHandler(e) {
+        e.target.setControledBy(this.id);
+    }
+    activateTabHandler(e) {
+        if (e.detail.tab) {
+            this.selectedTab = e.detail.tab;
+        }
+        else {
+            this.selectedTab = this.getIndexOfTabTitle(e.target);
+        }
+    }
+    getIndexOfTabTitle(el) {
+        const tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        return [...tabs].indexOf(el);
+    }
+    componentWillLoad() {
+        this.selectedTabChanged();
+    }
+    render() {
+        return (h(Host, { role: "tablist" }, h("nav", { class: "tab-nav" }, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedTab": ["selectedTabChanged"]
+    }; }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.tab-nav{display:-ms-flexbox;display:flex;padding:.5rem 0}::slotted(calcite-tab-title){margin-right:1.25rem}:host([dir=rtl]) ::slotted(calcite-tab-title){margin-right:0;margin-left:1.25rem}"; }
+}
+
+const ENTER = 13;
+const SPACE = 32;
+const LEFT = 37;
+const RIGHT = 39;
+
+class CalciteTabTitle {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = `calite-tab-title-${guid()}`;
+        this.isActive = false;
+        this.calciteActivateTab = createEvent(this, "calciteActivateTab", 7);
+        this.calciteFocusNextTab = createEvent(this, "calciteFocusNextTab", 7);
+        this.calciteFocusPreviousTab = createEvent(this, "calciteFocusPreviousTab", 7);
+        this.calciteRegisterTabTitle = createEvent(this, "calciteRegisterTabTitle", 7);
+    }
+    tabChangeHand(event) {
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(index => {
+                this.isActive = index === event.detail.tab;
+            });
+        }
+    }
+    onClick() {
+        this.calciteActivateTab.emit({
+            tab: this.tab
+        });
+    }
+    keyDownHandler(e) {
+        switch (e.keyCode) {
+            case SPACE:
+            case ENTER:
+                this.onClick();
+                break;
+            case RIGHT:
+                this.calciteFocusNextTab.emit();
+                break;
+            case LEFT:
+                this.calciteFocusPreviousTab.emit();
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.getTabIndex().then(index => {
+            this.calciteRegisterTabTitle.emit({
+                id: this.id,
+                index
+            });
+        });
+    }
+    async getTabIndex() {
+        return Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el));
+    }
+    async setControledBy(id) {
+        this.controls = id;
+    }
+    render() {
+        return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.isActive ? "true" : "false", role: "tab", tabindex: "0" }, h("a", null, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{-ms-flex:0 1 auto;flex:0 1 auto;outline:none}:host(:active) a,:host(:focus) a,:host(:hover) a{outline:none;text-decoration:none;color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-hover)}:host([is-active]) a{color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-active)}a{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:.875rem;line-height:1.5;padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid transparent;cursor:pointer;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;color:var(--calcite-tabs-color);outline:none}"; }
+}
+
+class CalciteTabs {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabs = {};
+        this.tabTitles = {};
+        this.theme = "light";
+    }
+    tabTitleRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabTitles[index] = {
+            id: id,
+            title: e.target
+        };
+        if (this.tabs[index]) {
+            this.tabs[index].tab.registerLabeledBy(id);
+        }
+    }
+    tabRegistationHandler(e) {
+        const { index, id } = e.detail;
+        this.tabs[index] = {
+            id: id,
+            tab: e.target
+        };
+        if (this.tabTitles[index]) {
+            this.tabs[index].tab.registerLabeledBy(this.tabTitles[index].id);
+        }
+    }
+    render() {
+        return (h("div", null, h("slot", { name: "tab-nav" }), h("section", { class: "tab-contents" }, h("slot", null))));
+    }
+    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{--calcite-tabs-color:#2b2b2b;--calcite-tabs-border:#eaeaea;--calcite-tabs-border-hover:#dfdfdf;--calcite-tabs-color-active:#151515;--calcite-tabs-border-active:#007ac2}:host([theme=dark]){--calcite-tabs-color:#f3f3f3;--calcite-tabs-border:#404040;--calcite-tabs-border-hover:#757575;--calcite-tabs-color-active:#f8f8f8;--calcite-tabs-border-active:#fff}.tab-contents{margin-top:1px;border-top:1px solid var(--calcite-tabs-border)}"; }
+}
+
+export { CalciteAlert as calcite_alert, CalciteAlerts as calcite_alerts, CalciteLoader as calcite_loader, CalciteModal as calcite_modal, CalciteTab as calcite_tab, CalciteTabNav as calcite_tab_nav, CalciteTabTitle as calcite_tab_title, CalciteTabs as calcite_tabs };
diff --git a/dist/esm/calcite.mjs b/dist/esm/calcite.mjs
new file mode 100644
index 00000000000..9035cf88d97
--- /dev/null
+++ b/dist/esm/calcite.mjs
@@ -0,0 +1,5 @@
+import { a as patchBrowser, b as bootstrapLazy } from './calcite-a092ddcb.js';
+
+patchBrowser().then(resourcesUrl => {
+  return bootstrapLazy([["calcite-alert_8",[[1,"calcite-alert",{"currentAlert":[1,"current-alert"],"dismiss":[4],"icon":[4],"id":[1],"queueLength":[2,"queue-length"],"color":[513],"theme":[513],"duration":[513],"isActive":[32],"close":[64]}],[1,"calcite-alerts",{"id":[1],"currentAlert":[32],"isActive":[32],"queue":[32],"open":[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{"isActive":[4,"is-active"],"text":[1]}],[1,"calcite-modal",{"first":[1],"middle":[1],"last":[1]}],[1,"calcite-tab",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"labeledBy":[32],"getTabIndex":[64],"registerLabeledBy":[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{"id":[1537],"selectedTab":[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"controls":[32],"getTabIndex":[64],"setControledBy":[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{"theme":[513],"tabs":[32],"tabTitles":[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["context-consumer",[[0,"context-consumer",{"context":[16],"renderer":[16],"subscribe":[16],"unsubscribe":[32]}]]]], { resourcesUrl });
+});
diff --git a/dist/esm/context-consumer.entry.js b/dist/esm/context-consumer.entry.js
new file mode 100644
index 00000000000..927a1f73886
--- /dev/null
+++ b/dist/esm/context-consumer.entry.js
@@ -0,0 +1,25 @@
+import { e as registerInstance, h as getElement } from './calcite-a092ddcb.js';
+
+class ContextConsumer {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.context = {};
+        this.renderer = () => null;
+    }
+    connectedCallback() {
+        if (this.subscribe != null) {
+            this.unsubscribe = this.subscribe(this.el, 'context');
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe != null) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        return this.renderer(Object.assign({}, this.context));
+    }
+    get el() { return getElement(this); }
+}
+
+export { ContextConsumer as context_consumer };
diff --git a/dist/esm/css-shim-229ebf7a-229ebf7a.js b/dist/esm/css-shim-229ebf7a-229ebf7a.js
new file mode 100644
index 00000000000..dfd3a351678
--- /dev/null
+++ b/dist/esm/css-shim-229ebf7a-229ebf7a.js
@@ -0,0 +1,628 @@
+/*
+Extremely simple css parser. Intended to be not more than what we need
+and definitely not necessarily correct =).
+*/
+/** @unrestricted */
+var StyleNode = /** @class */ (function () {
+    function StyleNode() {
+        this.start = 0;
+        this.end = 0;
+        this.previous = null;
+        this.parent = null;
+        this.rules = null;
+        this.parsedCssText = '';
+        this.cssText = '';
+        this.atRule = false;
+        this.type = 0;
+        this.keyframesName = '';
+        this.selector = '';
+        this.parsedSelector = '';
+    }
+    return StyleNode;
+}());
+// given a string of css, return a simple rule tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+}
+// remove stuff we don't care about that may hinder parsing
+/**
+ * @param {string} cssText
+ * @return {string}
+ */
+function clean(cssText) {
+    return cssText.replace(RX.comments, '').replace(RX.port, '');
+}
+// super simple {...} lexer that returns a node tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function lex(text) {
+    var root = new StyleNode();
+    root['start'] = 0;
+    root['end'] = text.length;
+    var n = root;
+    for (var i = 0, l = text.length; i < l; i++) {
+        if (text[i] === OPEN_BRACE) {
+            if (!n['rules']) {
+                n['rules'] = [];
+            }
+            var p = n;
+            var previous = p['rules'][p['rules'].length - 1] || null;
+            n = new StyleNode();
+            n['start'] = i + 1;
+            n['parent'] = p;
+            n['previous'] = previous;
+            p['rules'].push(n);
+        }
+        else if (text[i] === CLOSE_BRACE) {
+            n['end'] = i + 1;
+            n = n['parent'] || root;
+        }
+    }
+    return root;
+}
+// add selectors/cssText to node tree
+/**
+ * @param {StyleNode} node
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parseCss(node, text) {
+    var t = text.substring(node['start'], node['end'] - 1);
+    node['parsedCssText'] = node['cssText'] = t.trim();
+    if (node.parent) {
+        var ss = node.previous ? node.previous['end'] : node.parent['start'];
+        t = text.substring(ss, node['start'] - 1);
+        t = _expandUnicodeEscapes(t);
+        t = t.replace(RX.multipleSpaces, ' ');
+        // TODO(sorvell): ad hoc; make selector include only after last ;
+        // helps with mixin syntax
+        t = t.substring(t.lastIndexOf(';') + 1);
+        var s = node['parsedSelector'] = node['selector'] = t.trim();
+        node['atRule'] = (s.indexOf(AT_START) === 0);
+        // note, support a subset of rule types...
+        if (node['atRule']) {
+            if (s.indexOf(MEDIA_START) === 0) {
+                node['type'] = types.MEDIA_RULE;
+            }
+            else if (s.match(RX.keyframesRule)) {
+                node['type'] = types.KEYFRAMES_RULE;
+                node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop();
+            }
+        }
+        else {
+            if (s.indexOf(VAR_START) === 0) {
+                node['type'] = types.MIXIN_RULE;
+            }
+            else {
+                node['type'] = types.STYLE_RULE;
+            }
+        }
+    }
+    var r$ = node['rules'];
+    if (r$) {
+        for (var i = 0, l = r$.length, r = void 0; (i < l) && (r = r$[i]); i++) {
+            parseCss(r, text);
+        }
+    }
+    return node;
+}
+/**
+ * conversion of sort unicode escapes with spaces like `\33 ` (and longer) into
+ * expanded form that doesn't require trailing space `\000033`
+ * @param {string} s
+ * @return {string}
+ */
+function _expandUnicodeEscapes(s) {
+    return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () {
+        var code = arguments[1], repeat = 6 - code.length;
+        while (repeat--) {
+            code = '0' + code;
+        }
+        return '\\' + code;
+    });
+}
+/** @enum {number} */
+var types = {
+    STYLE_RULE: 1,
+    KEYFRAMES_RULE: 7,
+    MEDIA_RULE: 4,
+    MIXIN_RULE: 1000
+};
+var OPEN_BRACE = '{';
+var CLOSE_BRACE = '}';
+// helper regexp's
+var RX = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
+    keyframesRule: /^@[^\s]*keyframes/,
+    multipleSpaces: /\s+/g
+};
+var VAR_START = '--';
+var MEDIA_START = '@media';
+var AT_START = '@';
+function findRegex(regex, cssText, offset) {
+    regex['lastIndex'] = 0;
+    var r = cssText.substring(offset).match(regex);
+    if (r) {
+        var start = offset + r['index'];
+        return {
+            start: start,
+            end: start + r[0].length
+        };
+    }
+    return null;
+}
+var VAR_USAGE_START = /\bvar\(/;
+var VAR_ASSIGN_START = /\B--[\w-]+\s*:/;
+var COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim;
+var TRAILING_LINES = /^[\t ]+\n/gm;
+function resolveVar(props, prop, fallback) {
+    if (props[prop]) {
+        return props[prop];
+    }
+    if (fallback) {
+        return executeTemplate(fallback, props);
+    }
+    return '';
+}
+function findVarEndIndex(cssText, offset) {
+    var count = 0;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (c === '(') {
+            count++;
+        }
+        else if (c === ')') {
+            count--;
+            if (count <= 0) {
+                return i + 1;
+            }
+        }
+    }
+    return i;
+}
+function parseVar(cssText, offset) {
+    var varPos = findRegex(VAR_USAGE_START, cssText, offset);
+    if (!varPos) {
+        return null;
+    }
+    var endVar = findVarEndIndex(cssText, varPos.start);
+    var varContent = cssText.substring(varPos.end, endVar - 1);
+    var _a = varContent.split(','), propName = _a[0], fallback = _a.slice(1);
+    return {
+        start: varPos.start,
+        end: endVar,
+        propName: propName.trim(),
+        fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined
+    };
+}
+function compileVar(cssText, template, offset) {
+    var varMeta = parseVar(cssText, offset);
+    if (!varMeta) {
+        template.push(cssText.substring(offset, cssText.length));
+        return cssText.length;
+    }
+    var propName = varMeta.propName;
+    var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined;
+    template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); });
+    return varMeta.end;
+}
+function executeTemplate(template, props) {
+    var final = '';
+    for (var i = 0; i < template.length; i++) {
+        var s = template[i];
+        final += (typeof s === 'string')
+            ? s
+            : s(props);
+    }
+    return final;
+}
+function findEndValue(cssText, offset) {
+    var onStr = false;
+    var double = false;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (onStr) {
+            if (double && c === '"') {
+                onStr = false;
+            }
+            if (!double && c === '\'') {
+                onStr = false;
+            }
+        }
+        else {
+            if (c === '"') {
+                onStr = true;
+                double = true;
+            }
+            else if (c === '\'') {
+                onStr = true;
+                double = false;
+            }
+            else if (c === ';') {
+                return i + 1;
+            }
+            else if (c === '}') {
+                return i;
+            }
+        }
+    }
+    return i;
+}
+function removeCustomAssigns(cssText) {
+    var final = '';
+    var offset = 0;
+    while (true) {
+        var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset);
+        var start = assignPos ? assignPos.start : cssText.length;
+        final += cssText.substring(offset, start);
+        if (assignPos) {
+            offset = findEndValue(cssText, start);
+        }
+        else {
+            break;
+        }
+    }
+    return final;
+}
+function compileTemplate(cssText) {
+    var index = 0;
+    cssText = cssText.replace(COMMENTS, '');
+    cssText = removeCustomAssigns(cssText)
+        .replace(TRAILING_LINES, '');
+    var segments = [];
+    while (index < cssText.length) {
+        index = compileVar(cssText, segments, index);
+    }
+    return segments;
+}
+function resolveValues(selectors) {
+    var props = {};
+    selectors.forEach(function (selector) {
+        selector.declarations.forEach(function (dec) {
+            props[dec.prop] = dec.value;
+        });
+    });
+    var propsValues = {};
+    var entries = Object.entries(props);
+    var _loop_1 = function (i) {
+        var dirty = false;
+        entries.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var propValue = executeTemplate(value, propsValues);
+            if (propValue !== propsValues[key]) {
+                propsValues[key] = propValue;
+                dirty = true;
+            }
+        });
+        if (!dirty) {
+            return "break";
+        }
+    };
+    for (var i = 0; i < 10; i++) {
+        var state_1 = _loop_1(i);
+        if (state_1 === "break")
+            break;
+    }
+    return propsValues;
+}
+function getSelectors(root, index) {
+    if (index === void 0) { index = 0; }
+    if (!root.rules) {
+        return [];
+    }
+    var selectors = [];
+    root.rules
+        .filter(function (rule) { return rule.type === types.STYLE_RULE; })
+        .forEach(function (rule) {
+        var declarations = getDeclarations(rule.cssText);
+        if (declarations.length > 0) {
+            rule.parsedSelector.split(',').forEach(function (selector) {
+                selector = selector.trim();
+                selectors.push({
+                    selector: selector,
+                    declarations: declarations,
+                    specificity: computeSpecificity(selector),
+                    nu: index
+                });
+            });
+        }
+        index++;
+    });
+    return selectors;
+}
+function computeSpecificity(_selector) {
+    return 1;
+}
+var IMPORTANT = '!important';
+var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;
+function getDeclarations(cssText) {
+    var declarations = [];
+    var xArray;
+    while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) {
+        var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important;
+        declarations.push({
+            prop: xArray[1].trim(),
+            value: compileTemplate(value),
+            important: important,
+        });
+    }
+    return declarations;
+}
+function normalizeValue(value) {
+    var regex = /\s+/gim;
+    value = value.replace(regex, ' ').trim();
+    var important = value.endsWith(IMPORTANT);
+    if (important) {
+        value = value.substr(0, value.length - IMPORTANT.length).trim();
+    }
+    return {
+        value: value,
+        important: important
+    };
+}
+function getActiveSelectors(hostEl, hostScopeMap, globalScopes) {
+    // computes the css scopes that might affect this particular element
+    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // each scope might have an array of associated selectors
+    // let's flatten the complete array of selectors from all the scopes
+    var selectorSet = getSelectorsForScopes(scopes);
+    // we filter to only the selectors that matches the hostEl
+    var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); });
+    // sort selectors by specifity
+    return sortSelectors(activeSelectors);
+}
+function getScopesForElement(hostTemplateMap, node) {
+    var scopes = [];
+    while (node) {
+        var scope = hostTemplateMap.get(node);
+        if (scope) {
+            scopes.push(scope);
+        }
+        node = node.parentElement;
+    }
+    return scopes;
+}
+function getSelectorsForScopes(scopes) {
+    var selectors = [];
+    scopes.forEach(function (scope) {
+        selectors.push.apply(selectors, scope.selectors);
+    });
+    return selectors;
+}
+function sortSelectors(selectors) {
+    selectors.sort(function (a, b) {
+        if (a.specificity === b.specificity) {
+            return a.nu - b.nu;
+        }
+        return a.specificity - b.specificity;
+    });
+    return selectors;
+}
+function matches(el, selector) {
+    return el.matches(selector);
+}
+function parseCSS(original) {
+    var ast = parse(original);
+    var template = compileTemplate(original);
+    var selectors = getSelectors(ast);
+    return {
+        original: original,
+        template: template,
+        selectors: selectors,
+        isDynamic: template.length > 1
+    };
+}
+function addGlobalStyle(globalScopes, styleEl) {
+    var css = parseCSS(styleEl.innerHTML);
+    css.styleEl = styleEl;
+    globalScopes.push(css);
+}
+function updateGlobalScopes(scopes) {
+    var selectors = getSelectorsForScopes(scopes);
+    var props = resolveValues(selectors);
+    scopes.forEach(function (scope) {
+        if (scope.isDynamic) {
+            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+        }
+    });
+}
+function reScope(scope, cssScopeId) {
+    var template = scope.template.map(function (segment) {
+        return (typeof segment === 'string')
+            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            : segment;
+    });
+    var selectors = scope.selectors.map(function (sel) {
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+    });
+    return Object.assign({}, scope, { template: template,
+        selectors: selectors,
+        cssScopeId: cssScopeId });
+}
+function replaceScope(original, oldScopeId, newScopeId) {
+    original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId);
+    return original;
+}
+function replaceAll(input, find, replace) {
+    return input.replace(new RegExp(find, 'g'), replace);
+}
+function loadDocument(doc, globalScopes) {
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        loadDocumentStyles(doc, globalScopes);
+    });
+}
+function loadDocumentLinks(doc, globalScopes) {
+    var promises = [];
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    for (var i = 0; i < linkElms.length; i++) {
+        promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
+    }
+    return Promise.all(promises);
+}
+function loadDocumentStyles(doc, globalScopes) {
+    var styleElms = doc.querySelectorAll('style');
+    for (var i = 0; i < styleElms.length; i++) {
+        addGlobalStyle(globalScopes, styleElms[i]);
+    }
+}
+function addGlobalLink(doc, globalScopes, linkElm) {
+    var url = linkElm.href;
+    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
+        if (hasCssVariables(text) && linkElm.parentNode) {
+            if (hasRelativeUrls(text)) {
+                text = fixRelativeUrls(text, url);
+            }
+            var styleEl = doc.createElement('style');
+            styleEl.innerHTML = text;
+            addGlobalStyle(globalScopes, styleEl);
+            linkElm.parentNode.insertBefore(styleEl, linkElm);
+            linkElm.remove();
+        }
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+// This regexp tries to determine when a variable is declared, for example:
+//
+// .my-el { --highlight-color: green; }
+//
+// but we don't want to trigger when a classname uses "--" or a pseudo-class is
+// used. We assume that the only characters that can preceed a variable
+// declaration are "{", from an opening block, ";" from a preceeding rule, or a
+// space. This prevents the regexp from matching a word in a selector, since
+// they would need to start with a "." or "#". (We assume element names don't
+// start with "--").
+var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m;
+function hasCssVariables(css) {
+    return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css);
+}
+// This regexp find all url() usages with relative urls
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+function hasRelativeUrls(css) {
+    CSS_URL_REGEXP.lastIndex = 0;
+    return CSS_URL_REGEXP.test(css);
+}
+function fixRelativeUrls(css, originalUrl) {
+    // get the basepath from the original import url
+    var basePath = originalUrl.replace(/[^/]*$/, '');
+    // replace the relative url, with the new relative url
+    return css.replace(CSS_URL_REGEXP, function (fullMatch, url) {
+        // rhe new relative path is the base path + uri
+        // TODO: normalize relative URL
+        var relativeUrl = basePath + url;
+        return fullMatch.replace(url, relativeUrl);
+    });
+}
+var CustomStyle = /** @class */ (function () {
+    function CustomStyle(win, doc) {
+        this.win = win;
+        this.doc = doc;
+        this.count = 0;
+        this.hostStyleMap = new WeakMap();
+        this.hostScopeMap = new WeakMap();
+        this.globalScopes = [];
+        this.scopesMap = new Map();
+    }
+    CustomStyle.prototype.initShim = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.win.requestAnimationFrame(function () {
+                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+            });
+        });
+    };
+    CustomStyle.prototype.addLink = function (linkEl) {
+        var _this = this;
+        return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () {
+            _this.updateGlobal();
+        });
+    };
+    CustomStyle.prototype.addGlobalStyle = function (styleEl) {
+        addGlobalStyle(this.globalScopes, styleEl);
+        this.updateGlobal();
+    };
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+        if (this.hostScopeMap.has(hostEl)) {
+            throw new Error('host style already created');
+        }
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
+        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
+        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var styleEl = this.doc.createElement('style');
+        if (!needStyleEl) {
+            styleEl.innerHTML = cssText;
+        }
+        else {
+            if (isDynamicScoped) {
+                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
+                styleEl.innerHTML = '/*needs update*/';
+                this.hostStyleMap.set(hostEl, styleEl);
+                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+                this.count++;
+            }
+            else {
+                baseScope.styleEl = styleEl;
+                if (!baseScope.isDynamic) {
+                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                }
+                this.globalScopes.push(baseScope);
+                this.updateGlobal();
+                this.hostScopeMap.set(hostEl, baseScope);
+            }
+        }
+        return styleEl;
+    };
+    CustomStyle.prototype.removeHost = function (hostEl) {
+        var css = this.hostStyleMap.get(hostEl);
+        if (css) {
+            css.remove();
+        }
+        this.hostStyleMap.delete(hostEl);
+        this.hostScopeMap.delete(hostEl);
+    };
+    CustomStyle.prototype.updateHost = function (hostEl) {
+        var scope = this.hostScopeMap.get(hostEl);
+        if (scope && scope.isDynamic && scope.cssScopeId) {
+            var styleEl = this.hostStyleMap.get(hostEl);
+            if (styleEl) {
+                var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
+                var props = resolveValues(selectors);
+                styleEl.innerHTML = executeTemplate(scope.template, props);
+            }
+        }
+    };
+    CustomStyle.prototype.updateGlobal = function () {
+        updateGlobalScopes(this.globalScopes);
+    };
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+        var scope = this.scopesMap.get(scopeId);
+        if (!scope) {
+            scope = parseCSS(cssText);
+            scope.cssScopeId = scopeId;
+            this.scopesMap.set(scopeId, scope);
+        }
+        return scope;
+    };
+    return CustomStyle;
+}());
+var win = window;
+function needsShim() {
+    return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'));
+}
+if (!win.__stencil_cssshim && needsShim()) {
+    win.__stencil_cssshim = new CustomStyle(win, document);
+}
diff --git a/dist/esm/dom-7eb7509a-7eb7509a.js b/dist/esm/dom-7eb7509a-7eb7509a.js
new file mode 100644
index 00000000000..49afb7af2e5
--- /dev/null
+++ b/dist/esm/dom-7eb7509a-7eb7509a.js
@@ -0,0 +1,38 @@
+/*
+  Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return !(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var l=a.localName;if("link"===l&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===l){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n);}r=r.firstChild?r.firstChild:o(t,r);}}function r(t,e,n){t[e]=n;}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1;}function l(t,e){t.b=!0,t.c.push(e);}function c(t,e){t.b&&i(e,function(e){return s(t,e)});}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e);}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o);}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o);}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r});}});}else a.push(e);},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e]);}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop();}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null);}n(e)&&t.connectedCallback(e);}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}));}function m(t){t.b&&t.b.disconnect();}function w(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a);});}function b(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0);}function y(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t);}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t);},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t);},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i);},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o]);},y.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),l=i("disconnectedCallback"),c=i("adoptedCallback"),s=i("attributeChangedCallback"),h=n.observedAttributes||[];}catch(t){return}finally{this.c=!1;}n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:l,adoptedCallback:c,attributeChangedCallback:s,observedAttributes:h,constructionStack:[]},function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n);}(this.a,t,n),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e);}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&b(i);}}}(o)}));},y.prototype.h=function(t){p(this.a,t);},y.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},y.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new w,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&b(n),n.c)},y.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})};},window.CustomElementRegistry=y,y.prototype.define=y.prototype.l,y.prototype.upgrade=y.prototype.h,y.prototype.get=y.prototype.get,y.prototype.whenDefined=y.prototype.m,y.prototype.polyfillWrapFlushCallback=y.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,j=window.Node.prototype.replaceChild,L=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),M=window.Element.prototype.attachShadow,H=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),x=window.Element.prototype.getAttribute,O=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,U=window.Element.prototype.append,V=window.Element.prototype.before,X=window.Element.prototype.after,$=window.Element.prototype.replaceWith,q=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c);}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a);}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append));}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):c(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C});}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var l=0;l<a;l++)i[l]=r[l];}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)u(e,i[t]);}}});}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)h(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&u(e,t),n(this)&&h(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)h(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&u(e,t),n(this)&&h(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):c(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&u(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=j.call(this,t,o),n(this))for(u(e,o),o=0;o<i.length;o++)h(e,i[o]);return t}i=n(t);var r=j.call(this,t,o),a=n(this);return a&&u(e,o),i&&u(e,t),a&&h(e,t),r}),L&&L.get?t(Node.prototype,L):l(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t));}});});}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t);})),e.set.call(this,t),r)for(var l=0;l<r.length;l++){var s=r[l];1===s.__CE_state&&a.disconnectedCallback(s);}return this.ownerDocument.__CE_hasRegistry?p(a,this):c(a,this),t}});}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&u(a,o),n(t)&&h(a,o),t});}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e]);}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this);}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i);}});}var a=nt;M&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=M.call(this,t)}),H&&H.get?t(Element.prototype,H):J&&J.get?t(HTMLElement.prototype,J):l(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0]);}});}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return O.call(this,t,e);var n=x.call(this,t);O.call(this,t,e),e=x.call(this,t),a.attributeChangedCallback(this,t,n,e,null);}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t);}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=x.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null);}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t);}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:U}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c);}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a);}}var o=Element.prototype;void 0!==V&&(o.before=e(V)),void 0!==V&&(o.after=e(X)),void 0!==$&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var l=o[a];if(l instanceof Element&&n(l)&&r.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)i.push(l);else i.push(l);}for(a=n(this),$.apply(this,o),o=0;o<r.length;o++)u(t,r[o]);if(a)for(u(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&h(t,r);}),void 0!==q&&r(o,"remove",function(){var e=n(this);q.call(this),e&&u(t,this);});}(a);}(),document.__CE_hasRegistry=!0;var ot=new y(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot});}}).call(self);
+
+// Polyfill CustomEvent
+if (typeof window.CustomEvent !== 'function') {
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+}
+
+/*!
+Element.closest and Element.matches
+https://github.com/jonathantneal/closest
+Creative Commons Zero v1.0 Universal
+*/
+(function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return !!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode;}return null});})(window.Element.prototype);
+/*!
+Element.getRootNode()
+*/
+(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)});})(Element.prototype);
+/*!
+Element.remove()
+*/
+(function(b){b.forEach(function(a){a.hasOwnProperty("remove")||Object.defineProperty(a,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this);}});});})([Element.prototype,CharacterData.prototype,DocumentType.prototype]);
diff --git a/dist/esm/index.mjs b/dist/esm/index.mjs
new file mode 100644
index 00000000000..458ca4f2576
--- /dev/null
+++ b/dist/esm/index.mjs
@@ -0,0 +1 @@
+//! Autogenerated index
diff --git a/dist/esm/legacy/calcite-a092ddcb.js b/dist/esm/legacy/calcite-a092ddcb.js
new file mode 100644
index 00000000000..9606d25402a
--- /dev/null
+++ b/dist/esm/legacy/calcite-a092ddcb.js
@@ -0,0 +1,1725 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var _this = this;
+var BUILD = { "allRenderFn": true, "cmpDidLoad": true, "cmpDidUnload": false, "cmpDidUpdate": false, "cmpDidRender": false, "cmpWillLoad": true, "cmpWillUpdate": true, "cmpWillRender": false, "connectedCallback": true, "disconnectedCallback": true, "element": false, "event": true, "hasRenderFn": true, "lifecycle": true, "hostListener": true, "hostListenerTargetWindow": false, "hostListenerTargetDocument": false, "hostListenerTargetBody": false, "hostListenerTargetParent": true, "hostListenerTarget": true, "member": true, "method": true, "mode": false, "noVdomRender": false, "observeAttribute": true, "prop": true, "propMutable": true, "reflect": true, "scoped": false, "shadowDom": true, "slot": true, "slotRelocation": true, "state": true, "style": true, "svg": true, "updatable": true, "vdomAttribute": true, "vdomClass": true, "vdomFunctional": true, "vdomKey": true, "vdomListener": true, "vdomRef": true, "vdomRender": true, "vdomStyle": true, "vdomText": true, "watchCallback": true, "taskQueue": true, "lazyLoad": true, "hydrateServerSide": false, "cssVarShim": true, "hydrateClientSide": false, "isDebug": false, "isDev": false, "lifecycleDOMEvents": false, "profile": false, "hotModuleReplacement": false, "constructableCSS": true, "cssAnnotations": true };
+var NAMESPACE = 'calcite';
+var win = window;
+var doc = document;
+var plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    raf: function (h) { return requestAnimationFrame(h); },
+    ael: function (el, eventName, listener, opts) { return el.addEventListener(eventName, listener, opts); },
+    rel: function (el, eventName, listener, opts) { return el.removeEventListener(eventName, listener, opts); },
+};
+var supportsShadowDom = !!doc.documentElement.attachShadow;
+var supportsListenerOptions = /*@__PURE__*/ (function () {
+    var supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get: function () { supportsListenerOptions = true; }
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
+var supportsConstructibleStylesheets = (function () {
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (e) { }
+    return false;
+})();
+var hostRefs = new WeakMap();
+var getHostRef = function (ref) { return hostRefs.get(ref); };
+var registerInstance = function (lazyInstance, hostRef) { return hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef); };
+var registerHost = function (elm) {
+    // TODO: it's so ugly, but minifies really well
+    {
+        var hostRef_1 = {
+            $flags$: 0,
+            $hostElement$: elm
+        };
+        hostRef_1.$onReadyPromise$ = new Promise(function (r) { return hostRef_1.$onReadyResolve$ = r; });
+        {
+            hostRef_1.$instanceValues$ = new Map();
+        }
+        return hostRefs.set(elm, hostRef_1);
+    }
+};
+var isMemberInElement = function (elm, memberName) { return memberName in elm; };
+var consoleError = function (e) { return console.error(e); };
+var loadModule = function (cmpMeta, hostRef, hmrVersionId) {
+    // loadModuleImport
+    var bundleId = cmpMeta.$lazyBundleIds$;
+    return import(
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.(system|cjs)\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    "./" + bundleId + ".entry.js" + '').then(function (importedModule) { return importedModule[cmpMeta.$tagName$.replace(/-/g, '_')]; }, consoleError);
+};
+var styles = new Map();
+var cssVarShim = win.__stencil_cssshim;
+var queueCongestion = 0;
+var queuePending = false;
+var queueDomReads = [];
+var queueDomWrites = [];
+var queueDomWritesLow = [];
+var queueTask = function (queue) { return function (cb) {
+    // queue dom reads
+    queue.push(cb);
+    if (!queuePending) {
+        queuePending = true;
+        plt.raf(flush);
+    }
+}; };
+var consume = function (queue) {
+    for (var i = 0; i < queue.length; i++) {
+        try {
+            queue[i](performance.now());
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    queue.length = 0;
+};
+var consumeTimeout = function (queue, timeout) {
+    var i = 0;
+    var ts = 0;
+    while (i < queue.length && (ts = performance.now()) < timeout) {
+        try {
+            queue[i++](ts);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    if (i === queue.length) {
+        queue.length = 0;
+    }
+    else if (i !== 0) {
+        queue.splice(0, i);
+    }
+};
+var flush = function () {
+    queueCongestion++;
+    // always force a bunch of medium callbacks to run, but still have
+    // a throttle on how many can run in a certain time
+    // DOM READS!!!
+    consume(queueDomReads);
+    var timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
+        ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0)))
+        : Infinity;
+    // DOM WRITES!!!
+    consumeTimeout(queueDomWrites, timeout);
+    consumeTimeout(queueDomWritesLow, timeout);
+    if (queueDomWrites.length > 0) {
+        queueDomWritesLow.push.apply(queueDomWritesLow, queueDomWrites);
+        queueDomWrites.length = 0;
+    }
+    if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) {
+        // still more to do yet, but we've run out of time
+        // let's let this thing cool off and try again in the next tick
+        plt.raf(flush);
+    }
+    else {
+        queueCongestion = 0;
+    }
+};
+var writeTask = /*@__PURE__*/ queueTask(queueDomWrites);
+/**
+ * Default style mode id
+ */
+/**
+ * Reusable empty obj/array
+ * Don't add values to these!!
+ */
+var EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+var SVG_NS = 'http://www.w3.org/2000/svg';
+var isDef = function (v) { return v != null; };
+var toLowerCase = function (str) { return str.toLowerCase(); };
+function getDynamicImportFunction(namespace) {
+    return "__sc_import_" + namespace.replace(/\s|-/g, '_');
+}
+var patchEsm = function () {
+    // @ts-ignore
+    if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return import('./css-shim-229ebf7a-229ebf7a.js');
+    }
+    return Promise.resolve();
+};
+var patchBrowser = function () { return __awaiter(_this, void 0, void 0, function () {
+    var importMeta, scriptElm, resourcesUrl;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                importMeta = "";
+                if (!(importMeta !== '')) return [3 /*break*/, 1];
+                return [2 /*return*/, Promise.resolve(new URL('.', importMeta).href)];
+            case 1:
+                scriptElm = Array.from(doc.querySelectorAll('script')).find(function (s) { return (s.src.includes("/" + NAMESPACE + ".esm.js") ||
+                    s.getAttribute('data-namespace') === NAMESPACE); });
+                resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, doc.baseURI));
+                patchDynamicImport(resourcesUrl.href);
+                if (!!window.customElements) return [3 /*break*/, 3];
+                // @ts-ignore
+                return [4 /*yield*/, import('./dom-7eb7509a-7eb7509a.js')];
+            case 2:
+                // @ts-ignore
+                _a.sent();
+                _a.label = 3;
+            case 3: return [2 /*return*/, resourcesUrl.href];
+        }
+    });
+}); };
+var patchDynamicImport = function (base) {
+    var importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        win[importFunctionName] = new Function('w', 'return import(w);');
+    }
+    catch (e) {
+        var moduleMap_1 = new Map();
+        win[importFunctionName] = function (src) {
+            var url = new URL(src, base).href;
+            var mod = moduleMap_1.get(url);
+            if (!mod) {
+                var script_1 = doc.createElement('script');
+                script_1.type = 'module';
+                script_1.src = URL.createObjectURL(new Blob(["import * as m from '" + url + "'; window." + importFunctionName + ".m = m;"], { type: 'application/javascript' }));
+                mod = new Promise(function (resolve) {
+                    script_1.onload = function () {
+                        resolve(win[importFunctionName].m);
+                        script_1.remove();
+                    };
+                });
+                moduleMap_1.set(url, mod);
+                doc.head.appendChild(script_1);
+            }
+            return mod;
+        };
+    }
+};
+var HYDRATED_CLASS = 'hydrated';
+var XLINK_NS = 'http://www.w3.org/1999/xlink';
+var rootAppliedStyles = new WeakMap();
+var registerStyle = function (scopeId, cssText) {
+    var style = styles.get(scopeId);
+    if (supportsConstructibleStylesheets) {
+        style = (style || new CSSStyleSheet());
+        style.replace(cssText);
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+var addStyle = function (styleContainerNode, tagName, mode, hostElm) {
+    var scopeId = getScopeId(tagName, mode);
+    var style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc);
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            var appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            var styleElm = void 0;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set());
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    if (cssVarShim) {
+                        styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style);
+                        var newScopeId = styleElm['s-sc'];
+                        if (newScopeId) {
+                            scopeId = newScopeId;
+                            // we don't want to add this styleID to the appliedStyles Set
+                            // since the cssVarShim might need to apply several different
+                            // stylesheets for the same component
+                            appliedStyles = null;
+                        }
+                    }
+                    else {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.appendChild(styleElm);
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = styleContainerNode.adoptedStyleSheets.concat([
+                style
+            ]);
+        }
+    }
+    return scopeId;
+};
+var attachStyles = function (elm, cmpMeta, mode) {
+    var styleId = addStyle((supportsShadowDom && elm.shadowRoot)
+        ? elm.shadowRoot
+        : elm.getRootNode(), cmpMeta.$tagName$, mode, elm);
+    if (cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = styleId;
+        elm.classList.add(styleId + '-h');
+    }
+};
+var getScopeId = function (tagName, mode) { return 'sc-' + (tagName); };
+/**
+ * Production h() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+var stack = [];
+function h(nodeName, vnodeData) {
+    var children = null;
+    var lastSimple = false;
+    var simple = false;
+    var i = arguments.length;
+    var vkey;
+    var vname;
+    for (; i-- > 2;) {
+        stack.push(arguments[i]);
+    }
+    while (stack.length > 0) {
+        var child = stack.pop();
+        if (child && child.pop !== undefined) {
+            for (i = child.length; i--;) {
+                stack.push(child[i]);
+            }
+        }
+        else {
+            if (typeof child === 'boolean') {
+                child = null;
+            }
+            if ((simple = typeof nodeName !== 'function')) {
+                if (child == null) {
+                    child = '';
+                }
+                else if (typeof child === 'number') {
+                    child = String(child);
+                }
+                else if (typeof child !== 'string') {
+                    simple = false;
+                }
+            }
+            if (simple && lastSimple) {
+                children[children.length - 1].$text$ += child;
+            }
+            else if (children === null) {
+                children = [simple ? { $flags$: 0, $text$: child } : child];
+            }
+            else {
+                children.push(simple ? { $flags$: 0, $text$: child } : child);
+            }
+            lastSimple = simple;
+        }
+    }
+    {
+        if (vnodeData != null) {
+            // normalize class / classname attributes
+            if (vnodeData.className) {
+                vnodeData['class'] = vnodeData.className;
+            }
+            if (typeof vnodeData['class'] === 'object') {
+                for (i in vnodeData['class']) {
+                    if (vnodeData['class'][i]) {
+                        stack.push(i);
+                    }
+                }
+                vnodeData['class'] = stack.join(' ');
+                stack.length = 0;
+            }
+            if (vnodeData.key != null) {
+                vkey = vnodeData.key;
+            }
+            if (vnodeData.name != null) {
+                vname = vnodeData.name;
+            }
+        }
+    }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData, children || [], vdomFnUtils);
+    }
+    var vnode = {
+        $tag$: nodeName,
+        $children$: children,
+        $elm$: undefined,
+        $flags$: 0
+    };
+    {
+        vnode.$attrs$ = vnodeData;
+    }
+    {
+        vnode.$text$ = undefined;
+    }
+    {
+        vnode.$key$ = vkey;
+    }
+    {
+        vnode.$name$ = vname;
+    }
+    return vnode;
+}
+var Host = {};
+var vdomFnUtils = {
+    'forEach': function (children, cb) { return children.map(convertToPublic).forEach(cb); },
+    'map': function (children, cb) { return children.map(convertToPublic).map(cb).map(convertToPrivate); }
+};
+var convertToPublic = function (node) {
+    return {
+        vattrs: node.$attrs$,
+        vchildren: node.$children$,
+        vkey: node.$key$,
+        vname: node.$name$,
+        vtag: node.$tag$,
+        vtext: node.$text$
+    };
+};
+var convertToPrivate = function (node) {
+    return {
+        $flags$: 0,
+        $attrs$: node.vattrs,
+        $children$: node.vchildren,
+        $key$: node.vkey,
+        $name$: node.vname,
+        $tag$: node.vtag,
+        $text$: node.vtext
+    };
+};
+/**
+ * Production setAccessor() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+var setAccessor = function (elm, memberName, oldValue, newValue, isSvg, flags) {
+    if (oldValue === newValue) {
+        return;
+    }
+    if (memberName === 'class' && !isSvg) {
+        // Class
+        {
+            var oldList_1 = parseClassList(oldValue);
+            var baseList_1 = parseClassList(elm.className).filter(function (item) { return !oldList_1.includes(item); });
+            elm.className = baseList_1.concat(parseClassList(newValue).filter(function (item) { return !baseList_1.includes(item); })).join(' ');
+        }
+    }
+    else if (memberName === 'style') {
+        // update style attribute, css properties and values
+        {
+            for (var prop in oldValue) {
+                if (!newValue || newValue[prop] == null) {
+                    if (prop.includes('-')) {
+                        elm.style.removeProperty(prop);
+                    }
+                    else {
+                        elm.style[prop] = '';
+                    }
+                }
+            }
+        }
+        for (var prop in newValue) {
+            if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                if (prop.includes('-')) {
+                    elm.style.setProperty(prop, newValue[prop]);
+                }
+                else {
+                    elm.style[prop] = newValue[prop];
+                }
+            }
+        }
+    }
+    else if (memberName === 'key')
+        ;
+    else if (memberName === 'ref') {
+        // minifier will clean this up
+        if (newValue) {
+            newValue(elm);
+        }
+    }
+    else if (memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
+        // Event Handlers
+        // so if the member name starts with "on" and the 3rd characters is
+        // a capital letter, and it's not already a member on the element,
+        // then we're assuming it's an event listener
+        if (isMemberInElement(elm, toLowerCase(memberName))) {
+            // standard event
+            // the JSX attribute could have been "onMouseOver" and the
+            // member name "onmouseover" is on the element's prototype
+            // so let's add the listener "mouseover", which is all lowercased
+            memberName = toLowerCase(memberName.substring(2));
+        }
+        else {
+            // custom event
+            // the JSX attribute could have been "onMyCustomEvent"
+            // so let's trim off the "on" prefix and lowercase the first character
+            // and add the listener "myCustomEvent"
+            // except for the first character, we keep the event name case
+            memberName = toLowerCase(memberName[2]) + memberName.substring(3);
+        }
+        if (oldValue) {
+            plt.rel(elm, memberName, oldValue, false);
+        }
+        if (newValue) {
+            plt.ael(elm, memberName, newValue, false);
+        }
+    }
+    else {
+        // Set property if it exists and it's not a SVG
+        var isProp = isMemberInElement(elm, memberName);
+        var isComplex = ['object', 'function'].includes(typeof newValue);
+        if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
+            try {
+                elm[memberName] = newValue == null && elm.tagName.indexOf('-') === -1 ? '' : newValue;
+            }
+            catch (e) { }
+        }
+        /**
+         * Need to manually update attribute if:
+         * - memberName is not an attribute
+         * - if we are rendering the host element in order to reflect attribute
+         * - if it's a SVG, since properties might not work in <svg>
+         * - if the newValue is null/undefined or 'false'.
+         */
+        var isXlinkNs = isSvg && (memberName !== (memberName = memberName.replace(/^xlink\:?/, ''))) ? true : false;
+        if (newValue == null || newValue === false) {
+            if (isXlinkNs) {
+                elm.removeAttributeNS(XLINK_NS, toLowerCase(memberName));
+            }
+            else {
+                elm.removeAttribute(memberName);
+            }
+        }
+        else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
+            newValue = newValue === true ? '' : newValue.toString();
+            if (isXlinkNs) {
+                elm.setAttributeNS(XLINK_NS, toLowerCase(memberName), newValue);
+            }
+            else {
+                elm.setAttribute(memberName, newValue);
+            }
+        }
+    }
+};
+var parseClassList = function (value) { return (!value) ? [] : value.split(' '); };
+var updateElement = function (oldVnode, newVnode, isSvgMode, memberName) {
+    // if the element passed in is a shadow root, which is a document fragment
+    // then we want to be adding attrs/props to the shadow root's "host" element
+    // if it's not a shadow root, then we add attrs/props to the same element
+    var elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$;
+    var oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
+    var newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+    {
+        // remove attributes no longer present on the vnode by setting them to undefined
+        for (memberName in oldVnodeAttrs) {
+            if (newVnodeAttrs[memberName] == null && oldVnodeAttrs[memberName] != null) {
+                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
+            }
+        }
+    }
+    // add new & update changed attributes
+    for (memberName in newVnodeAttrs) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
+    }
+};
+var scopeId;
+var contentRef;
+var hostTagName;
+var useNativeShadowDom = false;
+var checkSlotFallbackVisibility = false;
+var checkSlotRelocate = false;
+var isSvgMode = false;
+var createElm = function (oldParentVNode, newParentVNode, childIndex, parentElm) {
+    var newVNode = newParentVNode.$children$[childIndex];
+    var i = 0;
+    var elm;
+    var childNode;
+    var oldVNode;
+    if (!useNativeShadowDom) {
+        // remember for later we need to check to relocate nodes
+        checkSlotRelocate = true;
+        if (newVNode.$tag$ === 'slot') {
+            if (scopeId) {
+                // scoped css needs to add its scoped id to the parent element
+                parentElm.classList.add(scopeId + '-s');
+            }
+            if (!newVNode.$children$) {
+                // slot element does not have fallback content
+                // create an html comment we'll use to always reference
+                // where actual slot content should sit next to
+                newVNode.$flags$ |= 1 /* isSlotReference */;
+            }
+            else {
+                // slot element has fallback content
+                // still create an element that "mocks" the slot element
+                newVNode.$flags$ |= 2 /* isSlotFallback */;
+            }
+        }
+    }
+    if (isDef(newVNode.$text$)) {
+        // create text node
+        newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else if (newVNode.$flags$ & 1 /* isSlotReference */) {
+        // create a slot reference node
+        newVNode.$elm$ = doc.createTextNode('');
+    }
+    else {
+        // create element
+        elm = newVNode.$elm$ = ((isSvgMode || newVNode.$tag$ === 'svg')
+            ? doc.createElementNS(SVG_NS, newVNode.$tag$)
+            : doc.createElement((newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
+        {
+            isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+        }
+        // add css classes, attrs, props, listeners, etc.
+        {
+            updateElement(null, newVNode, isSvgMode);
+        }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
+        if (newVNode.$children$) {
+            for (i = 0; i < newVNode.$children$.length; ++i) {
+                // create the node
+                childNode = createElm(oldParentVNode, newVNode, i, elm);
+                // return node could have been null
+                if (childNode) {
+                    // append our new node
+                    elm.appendChild(childNode);
+                }
+            }
+        }
+        if (newVNode.$tag$ === 'svg') {
+            // Only reset the SVG context when we're exiting SVG element
+            isSvgMode = false;
+        }
+    }
+    {
+        newVNode.$elm$['s-hn'] = hostTagName;
+        if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+            // remember the content reference comment
+            newVNode.$elm$['s-sr'] = true;
+            // remember the content reference comment
+            newVNode.$elm$['s-cr'] = contentRef;
+            // remember the slot name, or empty string for default slot
+            newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
+            // check if we've got an old vnode for this slot
+            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+            }
+        }
+    }
+    return newVNode.$elm$;
+};
+var putBackInOriginalLocation = function (parentElm, recursive) {
+    plt.$flags$ |= 1 /* isTmpDisconnected */;
+    var oldSlotChildNodes = parentElm.childNodes;
+    for (var i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+        var childNode = oldSlotChildNodes[i];
+        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
+            // and relocate it back to it's original location
+            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+            // remove the old original location comment entirely
+            // later on the patch function will know what to do
+            // and move this to the correct spot in need be
+            childNode['s-ol'].remove();
+            childNode['s-ol'] = undefined;
+            checkSlotRelocate = true;
+        }
+        if (recursive) {
+            putBackInOriginalLocation(childNode, recursive);
+        }
+    }
+    plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+var addVnodes = function (parentElm, before, parentVNode, vnodes, startIdx, endIdx) {
+    var containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    var childNode;
+    if (containerElm.shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnodes[startIdx]) {
+            childNode = createElm(null, parentVNode, startIdx, parentElm);
+            if (childNode) {
+                vnodes[startIdx].$elm$ = childNode;
+                containerElm.insertBefore(childNode, referenceNode(before));
+            }
+        }
+    }
+};
+var removeVnodes = function (vnodes, startIdx, endIdx, elm) {
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (isDef(vnodes[startIdx])) {
+            elm = vnodes[startIdx].$elm$;
+            callNodeRefs(vnodes[startIdx], true);
+            {
+                // we're removing this element
+                // so it's possible we need to show slot fallback content now
+                checkSlotFallbackVisibility = true;
+                if (elm['s-ol']) {
+                    // remove the original location comment
+                    elm['s-ol'].remove();
+                }
+                else {
+                    // it's possible that child nodes of the node
+                    // that's being removed are slot nodes
+                    putBackInOriginalLocation(elm, true);
+                }
+            }
+            // remove the vnode's element from the dom
+            elm.remove();
+        }
+    }
+};
+var updateChildren = function (parentElm, oldCh, newVNode, newCh) {
+    var oldStartIdx = 0;
+    var newStartIdx = 0;
+    var idxInOld = 0;
+    var i = 0;
+    var oldEndIdx = oldCh.length - 1;
+    var oldStartVnode = oldCh[0];
+    var oldEndVnode = oldCh[oldEndIdx];
+    var newEndIdx = newCh.length - 1;
+    var newStartVnode = newCh[0];
+    var newEndVnode = newCh[newEndIdx];
+    var node;
+    var elmToMove;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (oldStartVnode == null) {
+            // Vnode might have been moved left
+            oldStartVnode = oldCh[++oldStartIdx];
+        }
+        else if (oldEndVnode == null) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (newStartVnode == null) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (newEndVnode == null) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            patch(oldStartVnode, newStartVnode);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            patch(oldEndVnode, newEndVnode);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // Vnode moved right
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+            }
+            patch(oldStartVnode, newEndVnode);
+            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // Vnode moved left
+            if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
+                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+            }
+            patch(oldEndVnode, newStartVnode);
+            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            // createKeyToOldIdx
+            idxInOld = -1;
+            {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && isDef(oldCh[i].$key$) && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
+                // new element
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
+                newStartVnode = newCh[++newStartIdx];
+            }
+            if (node) {
+                {
+                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                }
+            }
+        }
+    }
+    if (oldStartIdx > oldEndIdx) {
+        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
+    }
+    else if (newStartIdx > newEndIdx) {
+        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+    }
+};
+var isSameVnode = function (vnode1, vnode2) {
+    // compare if two vnode to see if they're "technically" the same
+    // need to have the same element tag, and same key to be the same
+    if (vnode1.$tag$ === vnode2.$tag$) {
+        if (vnode1.$tag$ === 'slot') {
+            return vnode1.$name$ === vnode2.$name$;
+        }
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
+        return true;
+    }
+    return false;
+};
+var referenceNode = function (node) {
+    if (node && node['s-ol']) {
+        // this node was relocated to a new location in the dom
+        // because of some other component's slot
+        // but we still have an html comment in place of where
+        // it's original location was according to it's original vdom
+        return node['s-ol'];
+    }
+    return node;
+};
+var parentReferenceNode = function (node) { return (node['s-ol'] ? node['s-ol'] : node).parentNode; };
+var patch = function (oldVNode, newVNode) {
+    var elm = newVNode.$elm$ = oldVNode.$elm$;
+    var oldChildren = oldVNode.$children$;
+    var newChildren = newVNode.$children$;
+    var defaultHolder;
+    {
+        // test if we're rendering an svg element, or still rendering nodes inside of one
+        // only add this to the when the compiler sees we're using an svg somewhere
+        isSvgMode = elm &&
+            isDef(elm.parentNode) &&
+            elm.ownerSVGElement !== undefined;
+        isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
+    }
+    if (!isDef(newVNode.$text$)) {
+        // element node
+        {
+            if (newVNode.$tag$ === 'slot')
+                ;
+            else {
+                // either this is the first render of an element OR it's an update
+                // AND we already know it's possible it could have changed
+                // this updates the element's css classes, attrs, props, listeners, etc.
+                updateElement(oldVNode, newVNode, isSvgMode);
+            }
+        }
+        if (isDef(oldChildren) && isDef(newChildren)) {
+            // looks like there's child vnodes for both the old and new vnodes
+            updateChildren(elm, oldChildren, newVNode, newChildren);
+        }
+        else if (isDef(newChildren)) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (isDef(oldVNode.$text$)) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
+            // add the new vnode children
+            addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+        }
+        else if (isDef(oldChildren)) {
+            // no new child vnodes, but there are old child vnodes to remove
+            removeVnodes(oldChildren, 0, oldChildren.length - 1);
+        }
+    }
+    else if (defaultHolder = elm['s-cr']) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = newVNode.$text$;
+    }
+    else if (oldVNode.$text$ !== newVNode.$text$) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.textContent = newVNode.$text$;
+    }
+    {
+        // reset svgMode when svg node is fully patched
+        if (isSvgMode && 'svg' === newVNode.$tag$) {
+            isSvgMode = false;
+        }
+    }
+};
+var updateFallbackSlotVisibility = function (elm, childNode, childNodes, i, ilen, j, slotNameAttr, nodeType) {
+    childNodes = elm.childNodes;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            if (childNode['s-sr']) {
+                // this is a slot fallback node
+                // get the slot name for this slot reference node
+                slotNameAttr = childNode['s-sn'];
+                // by default always show a fallback slot node
+                // then hide it if there are other slots in the light dom
+                childNode.hidden = false;
+                for (j = 0; j < ilen; j++) {
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
+                        // this sibling node is from a different component
+                        nodeType = childNodes[j].nodeType;
+                        if (slotNameAttr !== '') {
+                            // this is a named fallback slot node
+                            if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                        else {
+                            // this is a default fallback slot node
+                            // any element or text node (with content)
+                            // should hide the default fallback slot node
+                            if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            // keep drilling down
+            updateFallbackSlotVisibility(childNode);
+        }
+    }
+};
+var relocateNodes = [];
+var relocateSlotContent = function (elm) {
+    // tslint:disable-next-line: prefer-const
+    var childNodes = elm.childNodes;
+    var ilen = childNodes.length;
+    var i = 0;
+    var j = 0;
+    var nodeType = 0;
+    var childNode;
+    var node;
+    var hostContentNodes;
+    var slotNameAttr;
+    for (ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
+            hostContentNodes = node.parentNode.childNodes;
+            slotNameAttr = childNode['s-sn'];
+            for (j = hostContentNodes.length - 1; j >= 0; j--) {
+                node = hostContentNodes[j];
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // that is suppose to always represent the original content location
+                    nodeType = node.nodeType;
+                    if (((nodeType === 3 /* TextNode */ || nodeType === 8 /* CommentNode */) && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === null && slotNameAttr === '') ||
+                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === slotNameAttr)) {
+                        // it's possible we've already decided to relocate this node
+                        if (!relocateNodes.some(function (r) { return r.nodeToRelocate === node; })) {
+                            // made some changes to slots
+                            // let's make sure we also double check
+                            // fallbacks are correctly hidden or shown
+                            checkSlotFallbackVisibility = true;
+                            node['s-sn'] = slotNameAttr;
+                            // add to our list of nodes to relocate
+                            relocateNodes.push({
+                                slotRefNode: childNode,
+                                nodeToRelocate: node
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            relocateSlotContent(childNode);
+        }
+    }
+};
+var callNodeRefs = function (vNode, isDestroy) {
+    if (vNode) {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(isDestroy ? null : vNode.$elm$);
+        vNode.$children$ && vNode.$children$.forEach(function (vChild) {
+            callNodeRefs(vChild, isDestroy);
+        });
+    }
+};
+var isHost = function (node) {
+    return node && node.$tag$ === Host;
+};
+var renderVdom = function (hostElm, hostRef, cmpMeta, renderFnResults) {
+    var oldVNode = hostRef.$vnode$ || { $flags$: 0 };
+    hostTagName = toLowerCase(hostElm.tagName);
+    if (isHost(renderFnResults)) {
+        renderFnResults.$tag$ = null;
+    }
+    else {
+        renderFnResults = h(null, null, renderFnResults);
+    }
+    if (cmpMeta.$attrsToReflect$) {
+        renderFnResults.$attrs$ = renderFnResults.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.forEach(function (_a) {
+            var propName = _a[0], attribute = _a[1];
+            return renderFnResults.$attrs$[attribute] = hostElm[propName];
+        });
+    }
+    renderFnResults.$flags$ |= 4 /* isHost */;
+    hostRef.$vnode$ = renderFnResults;
+    renderFnResults.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm);
+    {
+        scopeId = hostElm['s-sc'];
+    }
+    {
+        contentRef = hostElm['s-cr'];
+        useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+        // always reset
+        checkSlotRelocate = checkSlotFallbackVisibility = false;
+    }
+    // synchronous patch
+    patch(oldVNode, renderFnResults);
+    {
+        if (checkSlotRelocate) {
+            relocateSlotContent(renderFnResults.$elm$);
+            for (var i = 0; i < relocateNodes.length; i++) {
+                var relocateNode = relocateNodes[i];
+                if (!relocateNode.nodeToRelocate['s-ol']) {
+                    // add a reference node marking this node's original location
+                    // keep a reference to this node for later lookups
+                    var orgLocationNode = doc.createTextNode('');
+                    orgLocationNode['s-nr'] = relocateNode.nodeToRelocate;
+                    relocateNode.nodeToRelocate.parentNode.insertBefore((relocateNode.nodeToRelocate['s-ol'] = orgLocationNode), relocateNode.nodeToRelocate);
+                }
+            }
+            // while we're moving nodes around existing nodes, temporarily disable
+            // the disconnectCallback from working
+            plt.$flags$ |= 1 /* isTmpDisconnected */;
+            for (var i = 0; i < relocateNodes.length; i++) {
+                var relocateNode = relocateNodes[i];
+                // by default we're just going to insert it directly
+                // after the slot reference node
+                var parentNodeRef = relocateNode.slotRefNode.parentNode;
+                var insertBeforeNode = relocateNode.slotRefNode.nextSibling;
+                var orgLocationNode = relocateNode.nodeToRelocate['s-ol'];
+                while (orgLocationNode = orgLocationNode.previousSibling) {
+                    var refNode = orgLocationNode['s-nr'];
+                    if (refNode && refNode) {
+                        if (refNode['s-sn'] === relocateNode.nodeToRelocate['s-sn']) {
+                            if (parentNodeRef === refNode.parentNode) {
+                                if ((refNode = refNode.nextSibling) && refNode && !refNode['s-nr']) {
+                                    insertBeforeNode = refNode;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if ((!insertBeforeNode && parentNodeRef !== relocateNode.nodeToRelocate.parentNode) ||
+                    (relocateNode.nodeToRelocate.nextSibling !== insertBeforeNode)) {
+                    // we've checked that it's worth while to relocate
+                    // since that the node to relocate
+                    // has a different next sibling or parent relocated
+                    if (relocateNode.nodeToRelocate !== insertBeforeNode) {
+                        // add it back to the dom but in its new home
+                        parentNodeRef.insertBefore(relocateNode.nodeToRelocate, insertBeforeNode);
+                    }
+                }
+            }
+            // done moving nodes around
+            // allow the disconnect callback to work again
+            plt.$flags$ &= ~1 /* isTmpDisconnected */;
+        }
+        if (checkSlotFallbackVisibility) {
+            updateFallbackSlotVisibility(renderFnResults.$elm$);
+        }
+        // always reset
+        relocateNodes.length = 0;
+    }
+};
+var safeCall = function (instance, method) { return __awaiter(_this, void 0, void 0, function () {
+    var e_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!(instance && instance[method])) return [3 /*break*/, 4];
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, instance[method]()];
+            case 2:
+                _a.sent();
+                return [3 /*break*/, 4];
+            case 3:
+                e_1 = _a.sent();
+                consoleError(e_1);
+                return [3 /*break*/, 4];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var scheduleUpdate = function (elm, hostRef, cmpMeta, isInitialLoad) { return __awaiter(_this, void 0, void 0, function () {
+    var instance;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                {
+                    hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
+                }
+                instance = hostRef.$lazyInstance$;
+                if (!isInitialLoad) return [3 /*break*/, 2];
+                return [4 /*yield*/, safeCall(instance, 'componentWillLoad')];
+            case 1:
+                _a.sent();
+                return [3 /*break*/, 4];
+            case 2: return [4 /*yield*/, safeCall(instance, 'componentWillUpdate')];
+            case 3:
+                _a.sent();
+                _a.label = 4;
+            case 4:
+                // there is no ancestorc omponent or the ancestor component
+                // has already fired off its lifecycle update then
+                // fire off the initial update
+                {
+                    writeTask(function () { return updateComponent(elm, hostRef, cmpMeta, isInitialLoad, instance); });
+                }
+                return [2 /*return*/];
+        }
+    });
+}); };
+var updateComponent = function (elm, hostRef, cmpMeta, isInitialLoad, instance) {
+    // updateComponent
+    {
+        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+    }
+    {
+        elm['s-lr'] = false;
+    }
+    if (isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(elm, cmpMeta, hostRef.$modeName$);
+    }
+    {
+        {
+            // tell the platform we're actively rendering
+            // if a value is changed within a render() then
+            // this tells the platform not to queue the change
+            hostRef.$flags$ |= 4 /* isActiveRender */;
+            try {
+                // looks like we've got child nodes to render into this host element
+                // or we need to update the css class/attrs on the host element
+                // DOM WRITE!
+                renderVdom(elm, hostRef, cmpMeta, instance.render());
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            hostRef.$flags$ &= ~4 /* isActiveRender */;
+        }
+    }
+    if (cssVarShim) {
+        cssVarShim.updateHost(elm);
+    }
+    // set that this component lifecycle rendering has completed
+    {
+        elm['s-lr'] = true;
+    }
+    {
+        hostRef.$flags$ |= 2 /* hasRendered */;
+    }
+    if (elm['s-rc'].length > 0) {
+        // ok, so turns out there are some child host elements
+        // waiting on this parent element to load
+        // let's fire off all update callbacks waiting
+        elm['s-rc'].forEach(function (cb) { return cb(); });
+        elm['s-rc'].length = 0;
+    }
+    postUpdateComponent(elm, hostRef);
+};
+var postUpdateComponent = function (elm, hostRef, ancestorsActivelyLoadingChildren) {
+    if (!elm['s-al']) {
+        var instance = hostRef.$lazyInstance$;
+        var ancestorComponent = hostRef.$ancestorComponent$;
+        if (!(hostRef.$flags$ & 512 /* hasLoadedComponent */)) {
+            hostRef.$flags$ |= 512 /* hasLoadedComponent */;
+            {
+                // DOM WRITE!
+                // add the css class that this element has officially hydrated
+                elm.classList.add(HYDRATED_CLASS);
+            }
+            {
+                safeCall(instance, 'componentDidLoad');
+            }
+            {
+                hostRef.$onReadyResolve$(elm);
+            }
+            if (!ancestorComponent) {
+                // on appload
+                // we have finish the first big initial render
+                doc.documentElement.classList.add(HYDRATED_CLASS);
+                {
+                    setTimeout(function () { return plt.$flags$ |= 2; } /* appLoaded */, 999);
+                }
+            }
+        }
+        // load events fire from bottom to top
+        // the deepest elements load first then bubbles up
+        if (ancestorComponent) {
+            // ok so this element already has a known ancestor component
+            // let's make sure we remove this element from its ancestor's
+            // known list of child elements which are actively loading
+            if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) {
+                // remove this element from the actively loading map
+                ancestorsActivelyLoadingChildren.delete(elm);
+                // the ancestor's initializeComponent method will do the actual checks
+                // to see if the ancestor is actually loaded or not
+                // then let's call the ancestor's initializeComponent method if there's no length
+                // (which actually ends up as this method again but for the ancestor)
+                if (ancestorsActivelyLoadingChildren.size === 0) {
+                    ancestorComponent['s-al'] = undefined;
+                    ancestorComponent['s-init']();
+                }
+            }
+            hostRef.$ancestorComponent$ = undefined;
+        }
+        // ( •_•)
+        // ( •_•)>⌐■-■
+        // (⌐■_■)
+    }
+};
+var disconnectedCallback = function (elm) {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        var hostRef = getHostRef(elm);
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$();
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
+        // clear CSS var-shim tracking
+        if (cssVarShim) {
+            cssVarShim.removeHost(elm);
+        }
+        var instance = hostRef.$lazyInstance$;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
+    }
+};
+var parsePropertyValue = function (propValue, expectedPropType) {
+    // ensure this value is of the correct prop type
+    if (propValue != null && typeof propValue !== 'object' && typeof propValue !== 'function') {
+        if (expectedPropType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return (propValue === 'false' ? false : propValue === '' || !!propValue);
+        }
+        if (expectedPropType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (expectedPropType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+var getValue = function (ref, propName) { return getHostRef(ref).$instanceValues$.get(propName); };
+var setValue = function (ref, propName, newVal, cmpMeta) {
+    // check our new property value against our internal value
+    var hostRef = getHostRef(ref);
+    var elm = hostRef.$hostElement$;
+    var oldVal = hostRef.$instanceValues$.get(propName);
+    var flags = hostRef.$flags$;
+    newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+    if (newVal !== oldVal && (!(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
+        // gadzooks! the property's value has changed!!
+        // set our new value!
+        hostRef.$instanceValues$.set(propName, newVal);
+        if (hostRef.$lazyInstance$) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ &&
+                (flags & (1 /* hasConnected */ | 8 /* isConstructingInstance */)) === 1 /* hasConnected */) {
+                var watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.forEach(function (watchMethodName) {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            (hostRef.$lazyInstance$)[watchMethodName].call((hostRef.$lazyInstance$), newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e);
+                        }
+                    });
+                }
+            }
+            if ((flags & (4 /* isActiveRender */ | 2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+                // looks like this value actually changed, so we've got work to do!
+                // but only if we've already rendered, otherwise just chill out
+                // queue that we need to do an update, but don't worry about queuing
+                // up millions cuz this function ensures it only runs once
+                scheduleUpdate(elm, hostRef, cmpMeta, false);
+            }
+        }
+    }
+};
+var proxyComponent = function (Cstr, cmpMeta, isElementConstructor, proxyState) {
+    if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
+        // It's better to have a const than two Object.entries()
+        var members = Object.entries(cmpMeta.$members$);
+        members.forEach(function (_a) {
+            var memberName = _a[0], memberFlags = _a[1][0];
+            if ((memberFlags & 31) || (proxyState && (memberFlags & 32 /* State */))) {
+                // proxyComponent - prop
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    get: function () {
+                        // proxyComponent, get value
+                        return getValue(this, memberName);
+                    },
+                    set: function (newValue) {
+                        // proxyComponent, set value
+                        setValue(this, memberName, newValue, cmpMeta);
+                    },
+                    configurable: true,
+                    enumerable: true
+                });
+            }
+            else if (isElementConstructor && (memberFlags & 64 /* Method */)) {
+                // proxyComponent - method
+                Object.defineProperty(Cstr.prototype, memberName, {
+                    value: function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        var ref = getHostRef(this);
+                        return ref.$onReadyPromise$.then(function () {
+                            var _a;
+                            return (_a = ref.$lazyInstance$)[memberName].apply(_a, args);
+                        });
+                    }
+                });
+            }
+        });
+        if (isElementConstructor) {
+            var attrNameToPropName_1 = new Map();
+            Cstr.prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+                var propName = attrNameToPropName_1.get(attrName);
+                this[propName] = newValue === null && typeof this[propName] === 'boolean'
+                    ? false
+                    : newValue;
+            };
+            // create an array of attributes to observe
+            // and also create a map of html attribute name to js property name
+            Cstr.observedAttributes = members
+                .filter(function (_a) {
+                var _ = _a[0], m = _a[1];
+                return m[0] & 15;
+            } /* HasAttribute */) // filter to only keep props that should match attributes
+                .map(function (_a) {
+                var propName = _a[0], m = _a[1];
+                var attrName = m[1] || propName;
+                attrNameToPropName_1.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
+                return attrName;
+            });
+        }
+    }
+    return Cstr;
+};
+var addEventListeners = function (elm, hostRef, listeners) {
+    var removeFns = listeners.map(function (_a) {
+        var flags = _a[0], name = _a[1], method = _a[2];
+        var target = (getHostListenerTarget(elm, flags));
+        var handler = hostListenerProxy(hostRef, method);
+        var opts = hostListenerOpts(flags);
+        plt.ael(target, name, handler, opts);
+        return function () { return plt.rel(target, name, handler, opts); };
+    });
+    return function () { return removeFns.forEach(function (fn) { return fn(); }); };
+};
+var hostListenerProxy = function (hostRef, methodName) {
+    return function (ev) {
+        {
+            if (hostRef.$lazyInstance$) {
+                // instance is ready, let's call it's member method for this event
+                return hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                return hostRef.$onReadyPromise$.then(function () { return hostRef.$lazyInstance$[methodName](ev); }).catch(consoleError);
+            }
+        }
+    };
+};
+var getHostListenerTarget = function (elm, flags) {
+    if (flags & 16 /* TargetParent */)
+        return elm.parentElement;
+    return elm;
+};
+var hostListenerOpts = function (flags) { return supportsListenerOptions ?
+    {
+        'passive': (flags & 1 /* Passive */) !== 0,
+        'capture': (flags & 2 /* Capture */) !== 0,
+    }
+    : (flags & 2 /* Capture */) !== 0; };
+var initializeComponent = function (elm, hostRef, cmpMeta, hmrVersionId, Cstr) { return __awaiter(_this, void 0, void 0, function () {
+    var style_1, scopeId_1, ancestorComponent;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!((hostRef.$flags$ & 256 /* hasInitializedComponent */) === 0)) return [3 /*break*/, 4];
+                // we haven't initialized this element yet
+                hostRef.$flags$ |= 256 /* hasInitializedComponent */;
+                return [4 /*yield*/, loadModule(cmpMeta, hostRef, hmrVersionId)];
+            case 1:
+                // lazy loaded components
+                // request the component's implementation to be
+                // wired up with the host element
+                Cstr = _a.sent();
+                if (!Cstr.isProxied) {
+                    // we'eve never proxied this Constructor before
+                    // let's add the getters/setters to its prototype before
+                    // the first time we create an instance of the implementation
+                    {
+                        cmpMeta.$watchers$ = Cstr.watchers;
+                    }
+                    proxyComponent(Cstr, cmpMeta, 0, 1);
+                    Cstr.isProxied = true;
+                }
+                // ok, time to construct the instance
+                // but let's keep track of when we start and stop
+                // so that the getters/setters don't incorrectly step on data
+                {
+                    hostRef.$flags$ |= 8 /* isConstructingInstance */;
+                }
+                // construct the lazy-loaded component implementation
+                // passing the hostRef is very important during
+                // construction in order to directly wire together the
+                // host element and the lazy-loaded instance
+                try {
+                    new Cstr(hostRef);
+                }
+                catch (e) {
+                    consoleError(e);
+                }
+                {
+                    hostRef.$flags$ &= ~8 /* isConstructingInstance */;
+                }
+                fireConnectedCallback(hostRef.$lazyInstance$);
+                if (!(!Cstr.isStyleRegistered && Cstr.style)) return [3 /*break*/, 4];
+                style_1 = Cstr.style;
+                scopeId_1 = getScopeId(cmpMeta.$tagName$, hostRef.$modeName$);
+                if (!(cmpMeta.$flags$ & 8) /* needsShadowDomShim */) return [3 /*break*/, 3]; /* needsShadowDomShim */
+                return [4 /*yield*/, import('./shadow-css-984bac74-549b16dd.js').then(function (m) { return m.scopeCss(style_1, scopeId_1, false); })];
+            case 2:
+                style_1 = _a.sent();
+                _a.label = 3;
+            case 3:
+                registerStyle(scopeId_1, style_1);
+                Cstr.isStyleRegistered = true;
+                _a.label = 4;
+            case 4:
+                ancestorComponent = hostRef.$ancestorComponent$;
+                if (ancestorComponent && !ancestorComponent['s-lr'] && ancestorComponent['s-rc']) {
+                    // this is the intial load and this component it has an ancestor component
+                    // but the ancestor component has NOT fired its will update lifecycle yet
+                    // so let's just cool our jets and wait for the ancestor to continue first
+                    ancestorComponent['s-rc'].push(function () {
+                        // this will get fired off when the ancestor component
+                        // finally gets around to rendering its lazy self
+                        // fire off the initial update
+                        return initializeComponent(elm, hostRef, cmpMeta);
+                    });
+                }
+                else {
+                    scheduleUpdate(elm, hostRef, cmpMeta, true);
+                }
+                return [2 /*return*/];
+        }
+    });
+}); };
+var fireConnectedCallback = function (instance) {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
+var connectedCallback = function (elm, cmpMeta) {
+    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        // connectedCallback
+        var hostRef = getHostRef(elm);
+        if (cmpMeta.$listeners$) {
+            // initialize our event listeners on the host element
+            // we do this now so that we can listening to events that may
+            // have fired even before the instance is ready
+            hostRef.$rmListeners$ = addEventListeners(elm, hostRef, cmpMeta.$listeners$);
+        }
+        if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
+            // first time this component has connected
+            hostRef.$flags$ |= 1 /* hasConnected */;
+            var hostId = void 0;
+            if (!hostId) {
+                // initUpdate
+                // if the slot polyfill is required we'll need to put some nodes
+                // in here to act as original content anchors as we move nodes around
+                // host element has been connected to the DOM
+                if (cmpMeta.$flags$ & 4 ||
+                    (cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
+                    setContentReference(elm);
+                }
+            }
+            {
+                // find the first ancestor component (if there is one) and register
+                // this component as one of the actively loading child components for its ancestor
+                var ancestorComponent = elm;
+                while ((ancestorComponent = (ancestorComponent.parentNode || ancestorComponent.host))) {
+                    // climb up the ancestors looking for the first
+                    // component that hasn't finished its lifecycle update yet
+                    if ((ancestorComponent['s-init'] && !ancestorComponent['s-lr']) || (BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id'))) {
+                        // we found this components first ancestor component
+                        // keep a reference to this component's ancestor component
+                        hostRef.$ancestorComponent$ = ancestorComponent;
+                        // ensure there is an array to contain a reference to each of the child components
+                        // and set this component as one of the ancestor's child components it should wait on
+                        (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm);
+                        break;
+                    }
+                }
+            }
+            // Lazy properties
+            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+            if (cmpMeta.$members$) {
+                Object.entries(cmpMeta.$members$).forEach(function (_a) {
+                    var memberName = _a[0], memberFlags = _a[1][0];
+                    if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+                        var value = elm[memberName];
+                        delete elm[memberName];
+                        elm[memberName] = value;
+                    }
+                });
+            }
+            {
+                initializeComponent(elm, hostRef, cmpMeta);
+            }
+        }
+        fireConnectedCallback(hostRef.$lazyInstance$);
+    }
+};
+var setContentReference = function (elm, contentRefElm) {
+    // only required when we're NOT using native shadow dom (slot)
+    // or this browser doesn't support native shadow dom
+    // and this host element was NOT created with SSR
+    // let's pick out the inner content for slot projection
+    // create a node to represent where the original
+    // content was first placed, which is useful later on
+    var crName;
+    {
+        crName = '';
+    }
+    contentRefElm = elm['s-cr'] = doc.createComment(crName);
+    contentRefElm['s-cn'] = true;
+    elm.insertBefore(contentRefElm, elm.firstChild);
+};
+var bootstrapLazy = function (lazyBundles, options) {
+    if (options === void 0) { options = {}; }
+    var cmpTags = [];
+    var exclude = options.exclude || [];
+    var head = doc.head;
+    var customElements = win.customElements;
+    var y = /*@__PURE__*/ head.querySelector('meta[charset]');
+    var visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    Object.assign(plt, options);
+    plt.$resourcesUrl$ = new URL(options.resourcesUrl || '/', doc.baseURI).href;
+    if (options.syncQueue) {
+        plt.$flags$ |= 4 /* queueSync */;
+    }
+    lazyBundles.forEach(function (lazyBundle) { return lazyBundle[1].forEach(function (compactMeta) {
+        var cmpMeta = {
+            $flags$: compactMeta[0],
+            $tagName$: compactMeta[1],
+            $members$: compactMeta[2],
+            $listeners$: compactMeta[3],
+        };
+        {
+            cmpMeta.$attrsToReflect$ = [];
+        }
+        {
+            cmpMeta.$watchers$ = {};
+        }
+        if (!supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+        }
+        var tagName = cmpMeta.$tagName$;
+        var HostElement = /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            // StencilLazyHost
+            function class_1(self) {
+                var _this = 
+                // @ts-ignore
+                _super.call(this, self) || this;
+                self = _this;
+                {
+                    _this['s-lr'] = false;
+                    _this['s-rc'] = [];
+                }
+                registerHost(self);
+                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                    // this component is using shadow dom
+                    // and this browser supports shadow dom
+                    // add the read-only property "shadowRoot" to the host element
+                    if (supportsShadowDom) {
+                        self.attachShadow({ 'mode': 'open' });
+                    }
+                    else if (!('shadowRoot' in self)) {
+                        self.shadowRoot = self;
+                    }
+                }
+                return _this;
+            }
+            class_1.prototype.connectedCallback = function () {
+                connectedCallback(this, cmpMeta);
+            };
+            class_1.prototype.disconnectedCallback = function () {
+                disconnectedCallback(this);
+            };
+            class_1.prototype['s-init'] = function () {
+                var hostRef = getHostRef(this);
+                if (hostRef.$lazyInstance$) {
+                    postUpdateComponent(this, hostRef);
+                }
+            };
+            class_1.prototype['s-hmr'] = function (hmrVersionId) {
+            };
+            class_1.prototype.forceUpdate = function () {
+                {
+                    var hostRef = getHostRef(this);
+                    scheduleUpdate(this, hostRef, cmpMeta, false);
+                }
+            };
+            class_1.prototype.componentOnReady = function () {
+                return getHostRef(this).$onReadyPromise$;
+            };
+            return class_1;
+        }(HTMLElement));
+        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
+        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+            cmpTags.push(tagName);
+            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1, 0));
+        }
+    }); });
+    // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}';
+    visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}';
+    visibilityStyle.setAttribute('data-styles', '');
+    head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild);
+};
+var createEvent = function (ref, name, flags) {
+    var elm = getElement(ref);
+    return {
+        emit: function (detail) { return elm.dispatchEvent(new (CustomEvent)(name, {
+            bubbles: !!(flags & 4 /* Bubbles */),
+            composed: !!(flags & 2 /* Composed */),
+            cancelable: !!(flags & 1 /* Cancellable */),
+            detail: detail
+        })); }
+    };
+};
+var getElement = function (ref) { return getHostRef(ref).$hostElement$; };
+export { patchBrowser as a, bootstrapLazy as b, patchEsm as c, h as d, registerInstance as e, createEvent as f, Host as g, getElement as h };
diff --git a/dist/esm/legacy/calcite-alert_8.entry.js b/dist/esm/legacy/calcite-alert_8.entry.js
new file mode 100644
index 00000000000..e9c7be3eca5
--- /dev/null
+++ b/dist/esm/legacy/calcite-alert_8.entry.js
@@ -0,0 +1,515 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { d as h, e as registerInstance, f as createEvent, g as Host, h as getElement } from './calcite-a092ddcb.js';
+// File generated automatically by path-data.js, do not edit directly
+var checkCircle24F = "M23 11.5A11.5 11.5 0 1 1 11.5 0 11.5 11.5 0 0 1 23 11.5zm-5.5-6.018l-8.5 8.5-3.5-3.5-2 2L9.018 18l.018-.018L11.018 16l8.5-8.5z";
+var exclamationMarkTriangle24F = "M22.3 19.795l-9-17.901a1.5 1.5 0 0 0-2.597 0L1.7 19.795a1.502 1.502 0 0 0 0 1.502A1.456 1.456 0 0 0 2.998 22H21a1.458 1.458 0 0 0 1.299-.703 1.506 1.506 0 0 0 .001-1.502zM13 19h-2v-2h2zm0-3h-2V8h2z";
+var lightbulb24F = "M11 13h1v4h-1zm3.895 5.45a.311.311 0 0 0-.12-.27l-.232-.18h-6.19l-.232.18a.312.312 0 0 0 .04.518l1.387.771-1.367.76a.311.311 0 0 0-.028.526l3.09 2.18a.356.356 0 0 0 .41 0l3.09-2.18a.311.311 0 0 0-.029-.527l-1.366-.759 1.388-.77a.312.312 0 0 0 .159-.25zM11.59 0l-.173.002L11.244 0a6.2 6.2 0 0 0-6.182 6.698c.31 2.575 2.784 5.207 2.939 6.134.13.78.116 1.844.199 2.472A2.542 2.542 0 0 0 9.088 17H10v-4.412L8.83 9.37l.94-.342L10.85 12h1.3l1.08-2.97.94.341L13 12.588V17h.745a2.542 2.542 0 0 0 .889-1.696c.083-.628.068-1.692.199-2.472.154-.927 2.628-3.559 2.938-6.134A6.2 6.2 0 0 0 11.59 0z";
+var x32 = "M16.707 16l10.607 10.606-.708.707L16 16.707 5.394 27.313l-.708-.707L15.293 16 4.686 5.394l.708-.707L16 15.293 26.606 4.687l.708.707z";
+var createProviderConsumer = function (defaultState, consumerRender) {
+    var listeners = new Map();
+    var currentState = defaultState;
+    var updateListener = function (fields, instance) {
+        if (Array.isArray(fields)) {
+            fields.slice().forEach(function (fieldName) {
+                instance[fieldName] = currentState[fieldName];
+            });
+        }
+        else {
+            instance[fields] = Object.assign({}, currentState);
+        }
+    };
+    var subscribe = function (instance, propList) {
+        if (!listeners.has(instance)) {
+            listeners.set(instance, propList);
+            updateListener(propList, instance);
+        }
+        return function () {
+            if (listeners.has(instance)) {
+                listeners.delete(instance);
+            }
+        };
+    };
+    var Provider = function (_a, children) {
+        var state = _a.state;
+        currentState = state;
+        listeners.forEach(updateListener);
+        return children;
+    };
+    var Consumer = function (props, children) {
+        // The casting on subscribe is to allow for crossover through the stencil compiler
+        // In the future we should allow for generics in components.
+        return consumerRender(subscribe, children[0]);
+    };
+    var injectProps = function (Cstr, fieldList) {
+        var CstrPrototype = Cstr.prototype;
+        var cstrConnectedCallback = CstrPrototype.connectedCallback;
+        var cstrDisconnectedCallback = CstrPrototype.disconnectedCallback;
+        CstrPrototype.connectedCallback = function () {
+            subscribe(this, fieldList);
+            if (cstrConnectedCallback) {
+                return cstrConnectedCallback.call(this);
+            }
+        };
+        CstrPrototype.disconnectedCallback = function () {
+            listeners.delete(this);
+            if (cstrDisconnectedCallback) {
+                cstrDisconnectedCallback.call(this);
+            }
+        };
+    };
+    return {
+        Provider: Provider,
+        Consumer: Consumer,
+        injectProps: injectProps
+    };
+};
+var AlertInterface = createProviderConsumer({
+    currentAlert: '',
+    queueLength: 0
+}, function (subscribe, child) { return (h("context-consumer", { subscribe: subscribe, renderer: child })); });
+var CalciteAlert = /** @class */ (function () {
+    function CalciteAlert(hostRef) {
+        registerInstance(this, hostRef);
+        this.currentAlert = '';
+        this.dismiss = false;
+        this.icon = false;
+        this.id = '1';
+        this.queueLength = 0;
+        this.color = 'blue';
+        this.theme = null;
+        this.duration = this.dismiss ? 'medium' : null;
+        this.isActive = this.id === this.currentAlert;
+        this.alertClose = createEvent(this, "alertClose", 7);
+        this.alertOpen = createEvent(this, "alertOpen", 7);
+    }
+    CalciteAlert.prototype.close = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (this.isActive) {
+                    this.isActive = false;
+                    this.alertClose.emit(this.id);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    CalciteAlert.prototype.componentWillUpdate = function () {
+        var _this = this;
+        this.isActive = this.currentAlert === this.id;
+        if (this.isActive)
+            this.alertOpen.emit(this.id);
+        if (this.isActive && this.dismiss)
+            setTimeout(function () { _this.close(); }, this.duration === 'fast' ? 6000 : this.duration === 'slow' ? 14000 : 10000);
+    };
+    CalciteAlert.prototype.setIcon = function () {
+        var path = this.color === 'green' ? checkCircle24F : (this.color === 'red' || this.color === 'yellow') ? exclamationMarkTriangle24F : lightbulb24F;
+        return (h("div", { class: "alert-icon" }, h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '24', width: '24', viewBox: '0 0 24 24' }, h("path", { d: path }))));
+    };
+    CalciteAlert.prototype.render = function () {
+        var _this = this;
+        var closeButton = (h("button", { class: "alert-close", "aria-label": "close", onClick: function () { return _this.close(); } }, h("svg", { xmlns: 'http://www.w3.org/2000/svg', height: '32', width: '32', viewBox: '0 0 32 32' }, h("path", { d: x32 }))));
+        var close = !this.dismiss ? closeButton : '';
+        var icon = this.icon ? this.setIcon() : '';
+        var count = h("div", { class: (this.queueLength > 0 ? 'is-active ' : '') + "alert-count" }, "+", this.queueLength > 0 ? this.queueLength : 1);
+        var progress = this.isActive && this.dismiss ? h("div", { class: "alert-dismiss" }) : '';
+        return (h(Host, { theme: this.theme, "is-active": !!this.isActive, duration: this.duration }, icon, h("div", { class: "alert-content" }, h("slot", { name: "alert-title" }), h("slot", { name: "alert-message" }), h("slot", { name: "alert-link" })), count, close, progress));
+    };
+    Object.defineProperty(CalciteAlert.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteAlert, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:relative;-ms-flex-pack:center;justify-content:center;right:0;left:0;margin-right:auto;margin-left:auto;z-index:100;width:50em;max-width:90%;border-radius:2px;background-color:#fff;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,.15);box-shadow:0 0 12px 0 rgba(0,0,0,.15);height:0;opacity:0;overflow:visible;display:-ms-flexbox;display:flex;border-top:3px solid;-webkit-transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;transition:visibility 0ms linear .3s,opacity .3s cubic-bezier(.215,.44,.42,.88),all .15s ease-in-out;-webkit-transform:translate3d(0,1.5rem,0);transform:translate3d(0,1.5rem,0);pointer-events:none;border-width:0}\@media only screen and (max-width:600px){:host{max-width:100%;border-radius:2px 2px 0 0;-webkit-box-shadow:0 -6px 12px 0 rgba(0,0,0,.15);box-shadow:0 -6px 12px 0 rgba(0,0,0,.15)}}:host([is-active]){visibility:visible;border-width:3px;opacity:1;height:100%;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto}:host slot[name=alert-title]::slotted(div){display:block;font-weight:500;font-size:16px}:host slot[name=alert-link]::slotted(a){display:inline-block;font-size:15px;color:#007ac2}:host slot[name=alert-message]::slotted(div){font-size:15px;color:#555;display:inline;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host([theme=dark]){background-color:#2b2b2b}:host([theme=dark]) slot[name=alert-title]::slotted(div){color:#f8f8f8}:host([theme=dark]) slot[name=alert-message]::slotted(div){color:#f3f3f3}.alert-content{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;word-wrap:break-word;-webkit-padding-before:.75rem;padding-block-start:.75rem;-webkit-padding-after:.75rem;padding-block-end:.75rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}\@media only screen and (max-width:600px){.alert-content{padding:1.5rem}}.alert-content svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-content:first-of-type{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}\@media only screen and (max-width:600px){.alert-content{-webkit-padding-before:1.5rem;padding-block-start:1.5rem;-webkit-padding-after:1.5rem;padding-block-end:1.5rem;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:0;padding-inline-start:0}}.alert-icon{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (max-width:600px){.alert-icon{padding:1.5rem}}.alert-icon svg{position:relative;vertical-align:top;height:16px;width:16px}.alert-close{padding:.75rem 1.5rem;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-appearance:none;background-color:transparent;border:none;outline:none;cursor:pointer;border-radius:0 0 2px 0}\@media only screen and (max-width:600px){.alert-close{padding:1.5rem}}.alert-close svg{position:relative;vertical-align:top;height:16px;width:16px;fill:#151515}.alert-close:focus,.alert-close:hover{background-color:#f3f3f3}.alert-close:active{background-color:#eaeaea}.alert-close:last-child{border-radius:0 0 2px 0}:host([dir=rtl]) .alert-close:last-child{border-radius:0 0 0 2px}\@media only screen and (max-width:600px){.alert-close{border-radius:0}}:host([theme=dark]) .alert-close svg{fill:#d4d4d4}:host([theme=dark]) .alert-close:focus,:host([theme=dark]) .alert-close:hover{background-color:#202020}:host([theme=dark]) .alert-close:active{background-color:#151515}.alert-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:0;font-size:14px;visibility:hidden;padding:0;font-weight:500;text-align:center;background-color:transparent;color:#757575;opacity:0;border-left:1px solid transparent;border-right:1px solid transparent;cursor:default}.alert-count.is-active{visibility:visible;-webkit-transition-delay:.3s;transition-delay:.3s;opacity:1;padding:0 .375rem;width:3rem;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3}.alert-count.is-active:last-child{border-right-color:transparent}\@media only screen and (max-width:600px){.alert-count{border-radius:0}}:host([theme=dark]) .alert-count{color:#d4d4d4}:host([theme=dark]) .alert-count.is-active{border-left:1px solid #202020;border-right:1px solid #202020}.alert-dismiss{left:0;top:0;z-index:101}.alert-dismiss,.alert-dismiss:after{display:block;position:absolute;right:0;height:3px}.alert-dismiss:after{top:-3px;border-radius:2px 2px 0 0;content:\"\";width:50%;background-color:hsla(0,0%,100%,.6);-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;z-index:200}:host([theme=dark]) .alert-dismiss:after{background-color:rgba(43,43,43,.6)}:host([duration=fast]) .alert-dismiss:after{-webkit-animation:dismissProgress 6s linear;animation:dismissProgress 6s linear}:host([duration=medium]) .alert-dismiss:after{-webkit-animation:dismissProgress 10s linear;animation:dismissProgress 10s linear}:host([duration=slow]) .alert-dismiss:after{-webkit-animation:dismissProgress 14s linear;animation:dismissProgress 14s linear}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([color=blue]){border-top-color:#007ac2}:host([color=blue]) .alert-icon svg{fill:#007ac2}:host([color=red]){border-top-color:#d83020}:host([color=red]) .alert-icon svg{fill:#d83020}:host([color=yellow]){border-top-color:#edd317}:host([color=yellow]) .alert-icon svg{fill:#edd317}:host([color=green]){border-top-color:#35ac46}:host([color=green]) .alert-icon svg{fill:#35ac46}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteAlert;
+}());
+AlertInterface.injectProps(CalciteAlert, ['currentAlert', 'queueLength']);
+var CalciteAlerts = /** @class */ (function () {
+    function CalciteAlerts(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = '1';
+        this.currentAlert = '';
+        this.isActive = false;
+        this.queue = [];
+        this.alertsClose = createEvent(this, "alertsClose", 7);
+        this.alertsOpen = createEvent(this, "alertsOpen", 7);
+    }
+    CalciteAlerts.prototype.open = function (requestedAlert) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (!this.queue.includes(requestedAlert)) {
+                    this.isActive = true;
+                    this.currentAlert = requestedAlert;
+                    this.queue.push(requestedAlert);
+                    this.alertsOpen.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    CalciteAlerts.prototype.updateQueue = function (event) {
+        var _this = this;
+        if (this.queue.includes(event.detail))
+            this.queue = this.queue.filter(function (e) { return e !== event.detail; });
+        if (this.queue.length < 1)
+            setTimeout(function () { _this.isActive = false; }, 300);
+        this.alertsClose.emit({ id: this.id, currentAlert: this.currentAlert, queue: this.queue });
+    };
+    CalciteAlerts.prototype.componentWillUpdate = function () {
+        this.currentAlert = this.queue.length > 0 ? this.queue[0] : '';
+    };
+    CalciteAlerts.prototype.render = function () {
+        var alertState = {
+            currentAlert: this.currentAlert,
+            queueLength: this.queue.length >= 2 ? this.queue.length - 1 : 0
+        };
+        return (h(Host, { "is-active": !!this.isActive }, h(AlertInterface.Provider, { state: alertState }, h("slot", null))));
+    };
+    Object.defineProperty(CalciteAlerts.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteAlerts, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{position:fixed;visibility:hidden;opacity:0;left:0;right:0;bottom:1.5rem;height:0;z-index:101;pointer-events:none;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s}\@media only screen and (max-width:600px){:host{bottom:0}}:host([is-active]){height:auto;visibility:visible;opacity:1}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteAlerts;
+}());
+var CalciteLoader = /** @class */ (function () {
+    function CalciteLoader(hostRef) {
+        registerInstance(this, hostRef);
+        this.isActive = false;
+        this.text = "Loading...";
+    }
+    CalciteLoader.prototype.render = function () {
+        return (h(Host, { "is-active": !!this.isActive }, h("div", { class: "loader-bars" }), h("div", { class: "loader-text" }, this.text)));
+    };
+    Object.defineProperty(CalciteLoader.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteLoader, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host .loader-bars,:host .loader-bars:after,:host .loader-bars:before{background:#007ac2;-webkit-animation:load .8s ease-in-out infinite;animation:load .8s ease-in-out infinite;width:.85rem;height:2rem}:host .loader-bars:after,:host .loader-bars:before{position:absolute;top:0;content:\"\"}:host{position:relative;display:none;padding-bottom:4.5rem;padding-top:4.5rem}:host([is-active]){display:block}:host .loader-bars{text-indent:-9999em;margin:auto;position:absolute;right:calc(50% - .425rem);font-size:11px;-webkit-animation-delay:.16s;animation-delay:.16s}:host .loader-bars:before{left:-1.25rem}:host .loader-bars:after{left:1.25rem;-webkit-animation-delay:.32s;animation-delay:.32s}:host .loader-text{padding-top:4rem;text-align:center}\@-webkit-keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}\@keyframes load{0%,80%,to{opacity:.75;-webkit-box-shadow:0 0 #007ac2;box-shadow:0 0 #007ac2;height:2rem}40%{opacity:1;-webkit-box-shadow:0 -.5rem #007ac2;box-shadow:0 -.5rem #007ac2;height:2.5rem}}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteLoader;
+}());
+function format(first, middle, last) {
+    return ((first || "") + (middle ? " " + middle : "") + (last ? " " + last : ""));
+}
+var CalciteModal = /** @class */ (function () {
+    function CalciteModal(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    CalciteModal.prototype.getText = function () {
+        return format(this.first, this.middle, this.last);
+    };
+    CalciteModal.prototype.render = function () {
+        return h("div", { class: "example-class" }, "Hello, World! I'm ", this.getText());
+    };
+    Object.defineProperty(CalciteModal, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.example-class{padding:1.5rem;color:#d83020;-webkit-box-shadow:0 0 16px 0 rgba(0,0,0,.05);box-shadow:0 0 16px 0 rgba(0,0,0,.05);border:1px solid #007ac2}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteModal;
+}());
+// from https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples
+function random() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0] / 1e10;
+}
+function gen(count) {
+    var out = "";
+    for (var i = 0; i < count; i++) {
+        out += (((1 + random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return out;
+}
+function guid() {
+    return [gen(2), gen(1), gen(1), gen(1), gen(3)].join("-");
+}
+var CalciteTab = /** @class */ (function () {
+    function CalciteTab(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = "calite-tab-" + guid();
+        this.isActive = false;
+        this.calciteRegisterTab = createEvent(this, "calciteRegisterTab", 7);
+    }
+    CalciteTab.prototype.tabChangeHandler = function (event) {
+        var _this = this;
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(function (index) {
+                _this.isActive = index === event.detail.tab;
+            });
+        }
+    };
+    CalciteTab.prototype.componentDidLoad = function () {
+        var _this = this;
+        this.getTabIndex().then(function (index) {
+            _this.calciteRegisterTab.emit({
+                id: _this.id,
+                index: index
+            });
+        });
+    };
+    CalciteTab.prototype.getTabIndex = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab"), this.el))];
+            });
+        });
+    };
+    CalciteTab.prototype.registerLabeledBy = function (id) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.labeledBy = id;
+                return [2 /*return*/];
+            });
+        });
+    };
+    CalciteTab.prototype.render = function () {
+        return (h(Host, { "aria-labeledby": this.labeledBy, "aria-expanded": this.isActive ? "true" : "false", role: "tabpanel" }, h("section", null, h("slot", null))));
+    };
+    Object.defineProperty(CalciteTab.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteTab, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host([is-active]) section{display:block}section{display:none}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteTab;
+}());
+var CalciteTabNav = /** @class */ (function () {
+    function CalciteTabNav(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = "calite-tab-nav-" + guid();
+        this.selectedTab = 0;
+        this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
+    }
+    CalciteTabNav.prototype.selectedTabChanged = function () {
+        this.calciteTabChange.emit({
+            tab: this.selectedTab
+        });
+    };
+    CalciteTabNav.prototype.focusPreviousTabHandler = function (e) {
+        var tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        var currentIndex = this.getIndexOfTabTitle(e.target);
+        var previousTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+        previousTab.focus();
+    };
+    CalciteTabNav.prototype.focusNextTabHandler = function (e) {
+        var tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        var currentIndex = this.getIndexOfTabTitle(e.target);
+        var nextTab = tabs[currentIndex + 1] || tabs[0];
+        nextTab.focus();
+    };
+    CalciteTabNav.prototype.tabTitleRegistationHandler = function (e) {
+        e.target.setControledBy(this.id);
+    };
+    CalciteTabNav.prototype.activateTabHandler = function (e) {
+        if (e.detail.tab) {
+            this.selectedTab = e.detail.tab;
+        }
+        else {
+            this.selectedTab = this.getIndexOfTabTitle(e.target);
+        }
+    };
+    CalciteTabNav.prototype.getIndexOfTabTitle = function (el) {
+        var tabs = this.el.parentElement.querySelectorAll("calcite-tab-title");
+        return tabs.slice().indexOf(el);
+    };
+    CalciteTabNav.prototype.componentWillLoad = function () {
+        this.selectedTabChanged();
+    };
+    CalciteTabNav.prototype.render = function () {
+        return (h(Host, { role: "tablist" }, h("nav", { class: "tab-nav" }, h("slot", null))));
+    };
+    Object.defineProperty(CalciteTabNav.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteTabNav, "watchers", {
+        get: function () {
+            return {
+                "selectedTab": ["selectedTabChanged"]
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteTabNav, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}.tab-nav{display:-ms-flexbox;display:flex;padding:.5rem 0}::slotted(calcite-tab-title){margin-right:1.25rem}:host([dir=rtl]) ::slotted(calcite-tab-title){margin-right:0;margin-left:1.25rem}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteTabNav;
+}());
+var ENTER = 13;
+var SPACE = 32;
+var LEFT = 37;
+var RIGHT = 39;
+var CalciteTabTitle = /** @class */ (function () {
+    function CalciteTabTitle(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = "calite-tab-title-" + guid();
+        this.isActive = false;
+        this.calciteActivateTab = createEvent(this, "calciteActivateTab", 7);
+        this.calciteFocusNextTab = createEvent(this, "calciteFocusNextTab", 7);
+        this.calciteFocusPreviousTab = createEvent(this, "calciteFocusPreviousTab", 7);
+        this.calciteRegisterTabTitle = createEvent(this, "calciteRegisterTabTitle", 7);
+    }
+    CalciteTabTitle.prototype.tabChangeHand = function (event) {
+        var _this = this;
+        if (this.tab) {
+            this.isActive = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then(function (index) {
+                _this.isActive = index === event.detail.tab;
+            });
+        }
+    };
+    CalciteTabTitle.prototype.onClick = function () {
+        this.calciteActivateTab.emit({
+            tab: this.tab
+        });
+    };
+    CalciteTabTitle.prototype.keyDownHandler = function (e) {
+        switch (e.keyCode) {
+            case SPACE:
+            case ENTER:
+                this.onClick();
+                break;
+            case RIGHT:
+                this.calciteFocusNextTab.emit();
+                break;
+            case LEFT:
+                this.calciteFocusPreviousTab.emit();
+                break;
+        }
+    };
+    CalciteTabTitle.prototype.componentDidLoad = function () {
+        var _this = this;
+        this.getTabIndex().then(function (index) {
+            _this.calciteRegisterTabTitle.emit({
+                id: _this.id,
+                index: index
+            });
+        });
+    };
+    CalciteTabTitle.prototype.getTabIndex = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, Promise.resolve(Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el))];
+            });
+        });
+    };
+    CalciteTabTitle.prototype.setControledBy = function (id) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.controls = id;
+                return [2 /*return*/];
+            });
+        });
+    };
+    CalciteTabTitle.prototype.render = function () {
+        return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.isActive ? "true" : "false", role: "tab", tabindex: "0" }, h("a", null, h("slot", null))));
+    };
+    Object.defineProperty(CalciteTabTitle.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CalciteTabTitle, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{-ms-flex:0 1 auto;flex:0 1 auto;outline:none}:host(:active) a,:host(:focus) a,:host(:hover) a{outline:none;text-decoration:none;color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-hover)}:host([is-active]) a{color:var(--calcite-tabs-color-active);border-bottom-color:var(--calcite-tabs-border-active)}a{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:.875rem;line-height:1.5;padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid transparent;cursor:pointer;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;color:var(--calcite-tabs-color);outline:none}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteTabTitle;
+}());
+var CalciteTabs = /** @class */ (function () {
+    function CalciteTabs(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabs = {};
+        this.tabTitles = {};
+        this.theme = "light";
+    }
+    CalciteTabs.prototype.tabTitleRegistationHandler = function (e) {
+        var _a = e.detail, index = _a.index, id = _a.id;
+        this.tabTitles[index] = {
+            id: id,
+            title: e.target
+        };
+        if (this.tabs[index]) {
+            this.tabs[index].tab.registerLabeledBy(id);
+        }
+    };
+    CalciteTabs.prototype.tabRegistationHandler = function (e) {
+        var _a = e.detail, index = _a.index, id = _a.id;
+        this.tabs[index] = {
+            id: id,
+            tab: e.target
+        };
+        if (this.tabTitles[index]) {
+            this.tabs[index].tab.registerLabeledBy(this.tabTitles[index].id);
+        }
+    };
+    CalciteTabs.prototype.render = function () {
+        return (h("div", null, h("slot", { name: "tab-nav" }), h("section", { class: "tab-contents" }, h("slot", null))));
+    };
+    Object.defineProperty(CalciteTabs, "style", {
+        get: function () { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}\@-webkit-keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}\@keyframes dismissProgress{0%{width:0;opacity:0}to{width:100%;opacity:1}}:host{--calcite-tabs-color:#2b2b2b;--calcite-tabs-border:#eaeaea;--calcite-tabs-border-hover:#dfdfdf;--calcite-tabs-color-active:#151515;--calcite-tabs-border-active:#007ac2}:host([theme=dark]){--calcite-tabs-color:#f3f3f3;--calcite-tabs-border:#404040;--calcite-tabs-border-hover:#757575;--calcite-tabs-color-active:#f8f8f8;--calcite-tabs-border-active:#fff}.tab-contents{margin-top:1px;border-top:1px solid var(--calcite-tabs-border)}"; },
+        enumerable: true,
+        configurable: true
+    });
+    return CalciteTabs;
+}());
+export { CalciteAlert as calcite_alert, CalciteAlerts as calcite_alerts, CalciteLoader as calcite_loader, CalciteModal as calcite_modal, CalciteTab as calcite_tab, CalciteTabNav as calcite_tab_nav, CalciteTabTitle as calcite_tab_title, CalciteTabs as calcite_tabs };
diff --git a/dist/esm/legacy/calcite.mjs b/dist/esm/legacy/calcite.mjs
new file mode 100644
index 00000000000..d0f404c083e
--- /dev/null
+++ b/dist/esm/legacy/calcite.mjs
@@ -0,0 +1,4 @@
+import { a as patchBrowser, b as bootstrapLazy } from './calcite-a092ddcb.js';
+patchBrowser().then(function (resourcesUrl) {
+    return bootstrapLazy([["calcite-alert_8", [[1, "calcite-alert", { "currentAlert": [1, "current-alert"], "dismiss": [4], "icon": [4], "id": [1], "queueLength": [2, "queue-length"], "color": [513], "theme": [513], "duration": [513], "isActive": [32], "close": [64] }], [1, "calcite-alerts", { "id": [1], "currentAlert": [32], "isActive": [32], "queue": [32], "open": [64] }, [[0, "alertClose", "updateQueue"]]], [1, "calcite-loader", { "isActive": [4, "is-active"], "text": [1] }], [1, "calcite-modal", { "first": [1], "middle": [1], "last": [1] }], [1, "calcite-tab", { "id": [1537], "tab": [1537], "isActive": [1540, "is-active"], "labeledBy": [32], "getTabIndex": [64], "registerLabeledBy": [64] }, [[16, "calciteTabChange", "tabChangeHandler"]]], [1, "calcite-tab-nav", { "id": [1537], "selectedTab": [1032, "selected-tab"] }, [[0, "calciteFocusPreviousTab", "focusPreviousTabHandler"], [0, "calciteFocusNextTab", "focusNextTabHandler"], [0, "calciteRegisterTabTitle", "tabTitleRegistationHandler"], [0, "calciteActivateTab", "activateTabHandler"]]], [1, "calcite-tab-title", { "id": [1537], "tab": [1537], "isActive": [1540, "is-active"], "controls": [32], "getTabIndex": [64], "setControledBy": [64] }, [[16, "calciteTabChange", "tabChangeHand"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]], [1, "calcite-tabs", { "theme": [513], "tabs": [32], "tabTitles": [32] }, [[0, "calciteRegisterTabTitle", "tabTitleRegistationHandler"], [0, "calciteRegisterTab", "tabRegistationHandler"]]]]], ["context-consumer", [[0, "context-consumer", { "context": [16], "renderer": [16], "subscribe": [16], "unsubscribe": [32] }]]]], { resourcesUrl: resourcesUrl });
+});
diff --git a/dist/esm/legacy/context-consumer.entry.js b/dist/esm/legacy/context-consumer.entry.js
new file mode 100644
index 00000000000..dfed103860d
--- /dev/null
+++ b/dist/esm/legacy/context-consumer.entry.js
@@ -0,0 +1,28 @@
+import { e as registerInstance, h as getElement } from './calcite-a092ddcb.js';
+var ContextConsumer = /** @class */ (function () {
+    function ContextConsumer(hostRef) {
+        registerInstance(this, hostRef);
+        this.context = {};
+        this.renderer = function () { return null; };
+    }
+    ContextConsumer.prototype.connectedCallback = function () {
+        if (this.subscribe != null) {
+            this.unsubscribe = this.subscribe(this.el, 'context');
+        }
+    };
+    ContextConsumer.prototype.disconnectedCallback = function () {
+        if (this.unsubscribe != null) {
+            this.unsubscribe();
+        }
+    };
+    ContextConsumer.prototype.render = function () {
+        return this.renderer(Object.assign({}, this.context));
+    };
+    Object.defineProperty(ContextConsumer.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: true,
+        configurable: true
+    });
+    return ContextConsumer;
+}());
+export { ContextConsumer as context_consumer };
diff --git a/dist/esm/legacy/css-shim-229ebf7a-229ebf7a.js b/dist/esm/legacy/css-shim-229ebf7a-229ebf7a.js
new file mode 100644
index 00000000000..df52cd324c4
--- /dev/null
+++ b/dist/esm/legacy/css-shim-229ebf7a-229ebf7a.js
@@ -0,0 +1,630 @@
+/*
+Extremely simple css parser. Intended to be not more than what we need
+and definitely not necessarily correct =).
+*/
+/** @unrestricted */
+var StyleNode = /** @class */ (function () {
+    function StyleNode() {
+        this.start = 0;
+        this.end = 0;
+        this.previous = null;
+        this.parent = null;
+        this.rules = null;
+        this.parsedCssText = '';
+        this.cssText = '';
+        this.atRule = false;
+        this.type = 0;
+        this.keyframesName = '';
+        this.selector = '';
+        this.parsedSelector = '';
+    }
+    return StyleNode;
+}());
+// given a string of css, return a simple rule tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+}
+// remove stuff we don't care about that may hinder parsing
+/**
+ * @param {string} cssText
+ * @return {string}
+ */
+function clean(cssText) {
+    return cssText.replace(RX.comments, '').replace(RX.port, '');
+}
+// super simple {...} lexer that returns a node tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function lex(text) {
+    var root = new StyleNode();
+    root['start'] = 0;
+    root['end'] = text.length;
+    var n = root;
+    for (var i = 0, l = text.length; i < l; i++) {
+        if (text[i] === OPEN_BRACE) {
+            if (!n['rules']) {
+                n['rules'] = [];
+            }
+            var p = n;
+            var previous = p['rules'][p['rules'].length - 1] || null;
+            n = new StyleNode();
+            n['start'] = i + 1;
+            n['parent'] = p;
+            n['previous'] = previous;
+            p['rules'].push(n);
+        }
+        else if (text[i] === CLOSE_BRACE) {
+            n['end'] = i + 1;
+            n = n['parent'] || root;
+        }
+    }
+    return root;
+}
+// add selectors/cssText to node tree
+/**
+ * @param {StyleNode} node
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parseCss(node, text) {
+    var t = text.substring(node['start'], node['end'] - 1);
+    node['parsedCssText'] = node['cssText'] = t.trim();
+    if (node.parent) {
+        var ss = node.previous ? node.previous['end'] : node.parent['start'];
+        t = text.substring(ss, node['start'] - 1);
+        t = _expandUnicodeEscapes(t);
+        t = t.replace(RX.multipleSpaces, ' ');
+        // TODO(sorvell): ad hoc; make selector include only after last ;
+        // helps with mixin syntax
+        t = t.substring(t.lastIndexOf(';') + 1);
+        var s = node['parsedSelector'] = node['selector'] = t.trim();
+        node['atRule'] = (s.indexOf(AT_START) === 0);
+        // note, support a subset of rule types...
+        if (node['atRule']) {
+            if (s.indexOf(MEDIA_START) === 0) {
+                node['type'] = types.MEDIA_RULE;
+            }
+            else if (s.match(RX.keyframesRule)) {
+                node['type'] = types.KEYFRAMES_RULE;
+                node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop();
+            }
+        }
+        else {
+            if (s.indexOf(VAR_START) === 0) {
+                node['type'] = types.MIXIN_RULE;
+            }
+            else {
+                node['type'] = types.STYLE_RULE;
+            }
+        }
+    }
+    var r$ = node['rules'];
+    if (r$) {
+        for (var i = 0, l = r$.length, r = void 0; (i < l) && (r = r$[i]); i++) {
+            parseCss(r, text);
+        }
+    }
+    return node;
+}
+/**
+ * conversion of sort unicode escapes with spaces like `\33 ` (and longer) into
+ * expanded form that doesn't require trailing space `\000033`
+ * @param {string} s
+ * @return {string}
+ */
+function _expandUnicodeEscapes(s) {
+    return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () {
+        var code = arguments[1], repeat = 6 - code.length;
+        while (repeat--) {
+            code = '0' + code;
+        }
+        return '\\' + code;
+    });
+}
+/** @enum {number} */
+var types = {
+    STYLE_RULE: 1,
+    KEYFRAMES_RULE: 7,
+    MEDIA_RULE: 4,
+    MIXIN_RULE: 1000
+};
+var OPEN_BRACE = '{';
+var CLOSE_BRACE = '}';
+// helper regexp's
+var RX = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
+    keyframesRule: /^@[^\s]*keyframes/,
+    multipleSpaces: /\s+/g
+};
+var VAR_START = '--';
+var MEDIA_START = '@media';
+var AT_START = '@';
+function findRegex(regex, cssText, offset) {
+    regex['lastIndex'] = 0;
+    var r = cssText.substring(offset).match(regex);
+    if (r) {
+        var start = offset + r['index'];
+        return {
+            start: start,
+            end: start + r[0].length
+        };
+    }
+    return null;
+}
+var VAR_USAGE_START = /\bvar\(/;
+var VAR_ASSIGN_START = /\B--[\w-]+\s*:/;
+var COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim;
+var TRAILING_LINES = /^[\t ]+\n/gm;
+function resolveVar(props, prop, fallback) {
+    if (props[prop]) {
+        return props[prop];
+    }
+    if (fallback) {
+        return executeTemplate(fallback, props);
+    }
+    return '';
+}
+function findVarEndIndex(cssText, offset) {
+    var count = 0;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (c === '(') {
+            count++;
+        }
+        else if (c === ')') {
+            count--;
+            if (count <= 0) {
+                return i + 1;
+            }
+        }
+    }
+    return i;
+}
+function parseVar(cssText, offset) {
+    var varPos = findRegex(VAR_USAGE_START, cssText, offset);
+    if (!varPos) {
+        return null;
+    }
+    var endVar = findVarEndIndex(cssText, varPos.start);
+    var varContent = cssText.substring(varPos.end, endVar - 1);
+    var _a = varContent.split(','), propName = _a[0], fallback = _a.slice(1);
+    return {
+        start: varPos.start,
+        end: endVar,
+        propName: propName.trim(),
+        fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined
+    };
+}
+function compileVar(cssText, template, offset) {
+    var varMeta = parseVar(cssText, offset);
+    if (!varMeta) {
+        template.push(cssText.substring(offset, cssText.length));
+        return cssText.length;
+    }
+    var propName = varMeta.propName;
+    var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined;
+    template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); });
+    return varMeta.end;
+}
+function executeTemplate(template, props) {
+    var final = '';
+    for (var i = 0; i < template.length; i++) {
+        var s = template[i];
+        final += (typeof s === 'string')
+            ? s
+            : s(props);
+    }
+    return final;
+}
+function findEndValue(cssText, offset) {
+    var onStr = false;
+    var double = false;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (onStr) {
+            if (double && c === '"') {
+                onStr = false;
+            }
+            if (!double && c === '\'') {
+                onStr = false;
+            }
+        }
+        else {
+            if (c === '"') {
+                onStr = true;
+                double = true;
+            }
+            else if (c === '\'') {
+                onStr = true;
+                double = false;
+            }
+            else if (c === ';') {
+                return i + 1;
+            }
+            else if (c === '}') {
+                return i;
+            }
+        }
+    }
+    return i;
+}
+function removeCustomAssigns(cssText) {
+    var final = '';
+    var offset = 0;
+    while (true) {
+        var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset);
+        var start = assignPos ? assignPos.start : cssText.length;
+        final += cssText.substring(offset, start);
+        if (assignPos) {
+            offset = findEndValue(cssText, start);
+        }
+        else {
+            break;
+        }
+    }
+    return final;
+}
+function compileTemplate(cssText) {
+    var index = 0;
+    cssText = cssText.replace(COMMENTS, '');
+    cssText = removeCustomAssigns(cssText)
+        .replace(TRAILING_LINES, '');
+    var segments = [];
+    while (index < cssText.length) {
+        index = compileVar(cssText, segments, index);
+    }
+    return segments;
+}
+function resolveValues(selectors) {
+    var props = {};
+    selectors.forEach(function (selector) {
+        selector.declarations.forEach(function (dec) {
+            props[dec.prop] = dec.value;
+        });
+    });
+    var propsValues = {};
+    var entries = Object.entries(props);
+    var _loop_1 = function (i) {
+        var dirty = false;
+        entries.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var propValue = executeTemplate(value, propsValues);
+            if (propValue !== propsValues[key]) {
+                propsValues[key] = propValue;
+                dirty = true;
+            }
+        });
+        if (!dirty) {
+            return "break";
+        }
+    };
+    for (var i = 0; i < 10; i++) {
+        var state_1 = _loop_1(i);
+        if (state_1 === "break")
+            break;
+    }
+    return propsValues;
+}
+function getSelectors(root, index) {
+    if (index === void 0) {
+        index = 0;
+    }
+    if (!root.rules) {
+        return [];
+    }
+    var selectors = [];
+    root.rules
+        .filter(function (rule) { return rule.type === types.STYLE_RULE; })
+        .forEach(function (rule) {
+        var declarations = getDeclarations(rule.cssText);
+        if (declarations.length > 0) {
+            rule.parsedSelector.split(',').forEach(function (selector) {
+                selector = selector.trim();
+                selectors.push({
+                    selector: selector,
+                    declarations: declarations,
+                    specificity: computeSpecificity(selector),
+                    nu: index
+                });
+            });
+        }
+        index++;
+    });
+    return selectors;
+}
+function computeSpecificity(_selector) {
+    return 1;
+}
+var IMPORTANT = '!important';
+var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;
+function getDeclarations(cssText) {
+    var declarations = [];
+    var xArray;
+    while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) {
+        var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important;
+        declarations.push({
+            prop: xArray[1].trim(),
+            value: compileTemplate(value),
+            important: important,
+        });
+    }
+    return declarations;
+}
+function normalizeValue(value) {
+    var regex = /\s+/gim;
+    value = value.replace(regex, ' ').trim();
+    var important = value.endsWith(IMPORTANT);
+    if (important) {
+        value = value.substr(0, value.length - IMPORTANT.length).trim();
+    }
+    return {
+        value: value,
+        important: important
+    };
+}
+function getActiveSelectors(hostEl, hostScopeMap, globalScopes) {
+    // computes the css scopes that might affect this particular element
+    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // each scope might have an array of associated selectors
+    // let's flatten the complete array of selectors from all the scopes
+    var selectorSet = getSelectorsForScopes(scopes);
+    // we filter to only the selectors that matches the hostEl
+    var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); });
+    // sort selectors by specifity
+    return sortSelectors(activeSelectors);
+}
+function getScopesForElement(hostTemplateMap, node) {
+    var scopes = [];
+    while (node) {
+        var scope = hostTemplateMap.get(node);
+        if (scope) {
+            scopes.push(scope);
+        }
+        node = node.parentElement;
+    }
+    return scopes;
+}
+function getSelectorsForScopes(scopes) {
+    var selectors = [];
+    scopes.forEach(function (scope) {
+        selectors.push.apply(selectors, scope.selectors);
+    });
+    return selectors;
+}
+function sortSelectors(selectors) {
+    selectors.sort(function (a, b) {
+        if (a.specificity === b.specificity) {
+            return a.nu - b.nu;
+        }
+        return a.specificity - b.specificity;
+    });
+    return selectors;
+}
+function matches(el, selector) {
+    return el.matches(selector);
+}
+function parseCSS(original) {
+    var ast = parse(original);
+    var template = compileTemplate(original);
+    var selectors = getSelectors(ast);
+    return {
+        original: original,
+        template: template,
+        selectors: selectors,
+        isDynamic: template.length > 1
+    };
+}
+function addGlobalStyle(globalScopes, styleEl) {
+    var css = parseCSS(styleEl.innerHTML);
+    css.styleEl = styleEl;
+    globalScopes.push(css);
+}
+function updateGlobalScopes(scopes) {
+    var selectors = getSelectorsForScopes(scopes);
+    var props = resolveValues(selectors);
+    scopes.forEach(function (scope) {
+        if (scope.isDynamic) {
+            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+        }
+    });
+}
+function reScope(scope, cssScopeId) {
+    var template = scope.template.map(function (segment) {
+        return (typeof segment === 'string')
+            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            : segment;
+    });
+    var selectors = scope.selectors.map(function (sel) {
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+    });
+    return Object.assign({}, scope, { template: template,
+        selectors: selectors,
+        cssScopeId: cssScopeId });
+}
+function replaceScope(original, oldScopeId, newScopeId) {
+    original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId);
+    return original;
+}
+function replaceAll(input, find, replace) {
+    return input.replace(new RegExp(find, 'g'), replace);
+}
+function loadDocument(doc, globalScopes) {
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        loadDocumentStyles(doc, globalScopes);
+    });
+}
+function loadDocumentLinks(doc, globalScopes) {
+    var promises = [];
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    for (var i = 0; i < linkElms.length; i++) {
+        promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
+    }
+    return Promise.all(promises);
+}
+function loadDocumentStyles(doc, globalScopes) {
+    var styleElms = doc.querySelectorAll('style');
+    for (var i = 0; i < styleElms.length; i++) {
+        addGlobalStyle(globalScopes, styleElms[i]);
+    }
+}
+function addGlobalLink(doc, globalScopes, linkElm) {
+    var url = linkElm.href;
+    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
+        if (hasCssVariables(text) && linkElm.parentNode) {
+            if (hasRelativeUrls(text)) {
+                text = fixRelativeUrls(text, url);
+            }
+            var styleEl = doc.createElement('style');
+            styleEl.innerHTML = text;
+            addGlobalStyle(globalScopes, styleEl);
+            linkElm.parentNode.insertBefore(styleEl, linkElm);
+            linkElm.remove();
+        }
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+// This regexp tries to determine when a variable is declared, for example:
+//
+// .my-el { --highlight-color: green; }
+//
+// but we don't want to trigger when a classname uses "--" or a pseudo-class is
+// used. We assume that the only characters that can preceed a variable
+// declaration are "{", from an opening block, ";" from a preceeding rule, or a
+// space. This prevents the regexp from matching a word in a selector, since
+// they would need to start with a "." or "#". (We assume element names don't
+// start with "--").
+var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m;
+function hasCssVariables(css) {
+    return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css);
+}
+// This regexp find all url() usages with relative urls
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+function hasRelativeUrls(css) {
+    CSS_URL_REGEXP.lastIndex = 0;
+    return CSS_URL_REGEXP.test(css);
+}
+function fixRelativeUrls(css, originalUrl) {
+    // get the basepath from the original import url
+    var basePath = originalUrl.replace(/[^/]*$/, '');
+    // replace the relative url, with the new relative url
+    return css.replace(CSS_URL_REGEXP, function (fullMatch, url) {
+        // rhe new relative path is the base path + uri
+        // TODO: normalize relative URL
+        var relativeUrl = basePath + url;
+        return fullMatch.replace(url, relativeUrl);
+    });
+}
+var CustomStyle = /** @class */ (function () {
+    function CustomStyle(win, doc) {
+        this.win = win;
+        this.doc = doc;
+        this.count = 0;
+        this.hostStyleMap = new WeakMap();
+        this.hostScopeMap = new WeakMap();
+        this.globalScopes = [];
+        this.scopesMap = new Map();
+    }
+    CustomStyle.prototype.initShim = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.win.requestAnimationFrame(function () {
+                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+            });
+        });
+    };
+    CustomStyle.prototype.addLink = function (linkEl) {
+        var _this = this;
+        return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () {
+            _this.updateGlobal();
+        });
+    };
+    CustomStyle.prototype.addGlobalStyle = function (styleEl) {
+        addGlobalStyle(this.globalScopes, styleEl);
+        this.updateGlobal();
+    };
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+        if (this.hostScopeMap.has(hostEl)) {
+            throw new Error('host style already created');
+        }
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
+        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
+        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var styleEl = this.doc.createElement('style');
+        if (!needStyleEl) {
+            styleEl.innerHTML = cssText;
+        }
+        else {
+            if (isDynamicScoped) {
+                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
+                styleEl.innerHTML = '/*needs update*/';
+                this.hostStyleMap.set(hostEl, styleEl);
+                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+                this.count++;
+            }
+            else {
+                baseScope.styleEl = styleEl;
+                if (!baseScope.isDynamic) {
+                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                }
+                this.globalScopes.push(baseScope);
+                this.updateGlobal();
+                this.hostScopeMap.set(hostEl, baseScope);
+            }
+        }
+        return styleEl;
+    };
+    CustomStyle.prototype.removeHost = function (hostEl) {
+        var css = this.hostStyleMap.get(hostEl);
+        if (css) {
+            css.remove();
+        }
+        this.hostStyleMap.delete(hostEl);
+        this.hostScopeMap.delete(hostEl);
+    };
+    CustomStyle.prototype.updateHost = function (hostEl) {
+        var scope = this.hostScopeMap.get(hostEl);
+        if (scope && scope.isDynamic && scope.cssScopeId) {
+            var styleEl = this.hostStyleMap.get(hostEl);
+            if (styleEl) {
+                var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
+                var props = resolveValues(selectors);
+                styleEl.innerHTML = executeTemplate(scope.template, props);
+            }
+        }
+    };
+    CustomStyle.prototype.updateGlobal = function () {
+        updateGlobalScopes(this.globalScopes);
+    };
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+        var scope = this.scopesMap.get(scopeId);
+        if (!scope) {
+            scope = parseCSS(cssText);
+            scope.cssScopeId = scopeId;
+            this.scopesMap.set(scopeId, scope);
+        }
+        return scope;
+    };
+    return CustomStyle;
+}());
+var win = window;
+function needsShim() {
+    return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'));
+}
+if (!win.__stencil_cssshim && needsShim()) {
+    win.__stencil_cssshim = new CustomStyle(win, document);
+}
diff --git a/dist/esm/legacy/dom-7eb7509a-7eb7509a.js b/dist/esm/legacy/dom-7eb7509a-7eb7509a.js
new file mode 100644
index 00000000000..24647cf086e
--- /dev/null
+++ b/dist/esm/legacy/dom-7eb7509a-7eb7509a.js
@@ -0,0 +1,254 @@
+/*
+  Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function () { var t = new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" ")); function e(e) { var n = t.has(e); return e = /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e), !n && e; } function n(t) { var e = t.isConnected; if (void 0 !== e)
+    return e; for (; t && !(t.__CE_isImportDocument || t instanceof Document);)
+    t = t.parentNode || (window.ShadowRoot && t instanceof ShadowRoot ? t.host : void 0); return !(!t || !(t.__CE_isImportDocument || t instanceof Document)); } function o(t, e) { for (; e && e !== t && !e.nextSibling;)
+    e = e.parentNode; return e && e !== t ? e.nextSibling : null; } function i(t, e, n) { n = void 0 === n ? new Set : n; for (var r = t; r;) {
+    if (r.nodeType === Node.ELEMENT_NODE) {
+        var a = r;
+        e(a);
+        var l = a.localName;
+        if ("link" === l && "import" === a.getAttribute("rel")) {
+            if ((r = a.import) instanceof Node && !n.has(r))
+                for (n.add(r), r = r.firstChild; r; r = r.nextSibling)
+                    i(r, e, n);
+            r = o(t, a);
+            continue;
+        }
+        if ("template" === l) {
+            r = o(t, a);
+            continue;
+        }
+        if (a = a.__CE_shadowRoot)
+            for (a = a.firstChild; a; a = a.nextSibling)
+                i(a, e, n);
+    }
+    r = r.firstChild ? r.firstChild : o(t, r);
+} } function r(t, e, n) { t[e] = n; } function a() { this.a = new Map, this.f = new Map, this.c = [], this.b = !1; } function l(t, e) { t.b = !0, t.c.push(e); } function c(t, e) { t.b && i(e, function (e) { return s(t, e); }); } function s(t, e) { if (t.b && !e.__CE_patched) {
+    e.__CE_patched = !0;
+    for (var n = 0; n < t.c.length; n++)
+        t.c[n](e);
+} } function h(t, e) { var n = []; for (i(e, function (t) { return n.push(t); }), e = 0; e < n.length; e++) {
+    var o = n[e];
+    1 === o.__CE_state ? t.connectedCallback(o) : f(t, o);
+} } function u(t, e) { var n = []; for (i(e, function (t) { return n.push(t); }), e = 0; e < n.length; e++) {
+    var o = n[e];
+    1 === o.__CE_state && t.disconnectedCallback(o);
+} } function p(t, e, n) { var o = (n = void 0 === n ? {} : n).u || new Set, r = n.h || function (e) { return f(t, e); }, a = []; if (i(e, function (e) { if ("link" === e.localName && "import" === e.getAttribute("rel")) {
+    var n = e.import;
+    n instanceof Node && (n.__CE_isImportDocument = !0, n.__CE_hasRegistry = !0), n && "complete" === n.readyState ? n.__CE_documentLoadHandled = !0 : e.addEventListener("load", function () { var n = e.import; if (!n.__CE_documentLoadHandled) {
+        n.__CE_documentLoadHandled = !0;
+        var i = new Set(o);
+        i.delete(n), p(t, n, { u: i, h: r });
+    } });
+}
+else
+    a.push(e); }, o), t.b)
+    for (e = 0; e < a.length; e++)
+        s(t, a[e]); for (e = 0; e < a.length; e++)
+    r(a[e]); } function f(t, e) { if (void 0 === e.__CE_state) {
+    var o = e.ownerDocument;
+    if ((o.defaultView || o.__CE_isImportDocument && o.__CE_hasRegistry) && (o = t.a.get(e.localName))) {
+        o.constructionStack.push(e);
+        var i = o.constructorFunction;
+        try {
+            try {
+                if (new i !== e)
+                    throw Error("The custom element constructor did not produce the element being upgraded.");
+            }
+            finally {
+                o.constructionStack.pop();
+            }
+        }
+        catch (t) {
+            throw e.__CE_state = 2, t;
+        }
+        if (e.__CE_state = 1, e.__CE_definition = o, o.attributeChangedCallback)
+            for (o = o.observedAttributes, i = 0; i < o.length; i++) {
+                var r = o[i], a = e.getAttribute(r);
+                null !== a && t.attributeChangedCallback(e, r, null, a, null);
+            }
+        n(e) && t.connectedCallback(e);
+    }
+} } function d(t) { var e = document; this.c = t, this.a = e, this.b = void 0, p(this.c, this.a), "loading" === this.a.readyState && (this.b = new MutationObserver(this.f.bind(this)), this.b.observe(this.a, { childList: !0, subtree: !0 })); } function m(t) { t.b && t.b.disconnect(); } function w() { var t = this; this.b = this.a = void 0, this.c = new Promise(function (e) { t.b = e, t.a && e(t.a); }); } function b(t) { if (t.a)
+    throw Error("Already resolved."); t.a = void 0, t.b && t.b(void 0); } function y(t) { this.c = !1, this.a = t, this.j = new Map, this.f = function (t) { return t(); }, this.b = !1, this.i = [], this.o = new d(t); } a.prototype.connectedCallback = function (t) { var e = t.__CE_definition; e.connectedCallback && e.connectedCallback.call(t); }, a.prototype.disconnectedCallback = function (t) { var e = t.__CE_definition; e.disconnectedCallback && e.disconnectedCallback.call(t); }, a.prototype.attributeChangedCallback = function (t, e, n, o, i) { var r = t.__CE_definition; r.attributeChangedCallback && -1 < r.observedAttributes.indexOf(e) && r.attributeChangedCallback.call(t, e, n, o, i); }, d.prototype.f = function (t) { var e = this.a.readyState; for ("interactive" !== e && "complete" !== e || m(this), e = 0; e < t.length; e++)
+    for (var n = t[e].addedNodes, o = 0; o < n.length; o++)
+        p(this.c, n[o]); }, y.prototype.l = function (t, n) { var o = this; if (!(n instanceof Function))
+    throw new TypeError("Custom element constructors must be functions."); if (!e(t))
+    throw new SyntaxError("The element name '" + t + "' is not valid."); if (this.a.a.get(t))
+    throw Error("A custom element with name '" + t + "' has already been defined."); if (this.c)
+    throw Error("A custom element is already being defined."); this.c = !0; try {
+    var i = function (t) { var e = r[t]; if (void 0 !== e && !(e instanceof Function))
+        throw Error("The '" + t + "' callback must be a function."); return e; }, r = n.prototype;
+    if (!(r instanceof Object))
+        throw new TypeError("The custom element constructor's prototype is not an object.");
+    var a = i("connectedCallback"), l = i("disconnectedCallback"), c = i("adoptedCallback"), s = i("attributeChangedCallback"), h = n.observedAttributes || [];
+}
+catch (t) {
+    return;
+}
+finally {
+    this.c = !1;
+} n = { localName: t, constructorFunction: n, connectedCallback: a, disconnectedCallback: l, adoptedCallback: c, attributeChangedCallback: s, observedAttributes: h, constructionStack: [] }, function (t, e, n) { t.a.set(e, n), t.f.set(n.constructorFunction, n); }(this.a, t, n), this.i.push(n), this.b || (this.b = !0, this.f(function () { return function (t) { if (!1 !== t.b) {
+    t.b = !1;
+    for (var e = t.i, n = [], o = new Map, i = 0; i < e.length; i++)
+        o.set(e[i].localName, []);
+    for (p(t.a, document, { h: function (e) { if (void 0 === e.__CE_state) {
+            var i = e.localName, r = o.get(i);
+            r ? r.push(e) : t.a.a.get(i) && n.push(e);
+        } } }), i = 0; i < n.length; i++)
+        f(t.a, n[i]);
+    for (; 0 < e.length;) {
+        var r = e.shift();
+        i = r.localName, r = o.get(r.localName);
+        for (var a = 0; a < r.length; a++)
+            f(t.a, r[a]);
+        (i = t.j.get(i)) && b(i);
+    }
+} }(o); })); }, y.prototype.h = function (t) { p(this.a, t); }, y.prototype.get = function (t) { if (t = this.a.a.get(t))
+    return t.constructorFunction; }, y.prototype.m = function (t) { if (!e(t))
+    return Promise.reject(new SyntaxError("'" + t + "' is not a valid custom element name.")); var n = this.j.get(t); return n ? n.c : (n = new w, this.j.set(t, n), this.a.a.get(t) && !this.i.some(function (e) { return e.localName === t; }) && b(n), n.c); }, y.prototype.s = function (t) { m(this.o); var e = this.f; this.f = function (n) { return t(function () { return e(n); }); }; }, window.CustomElementRegistry = y, y.prototype.define = y.prototype.l, y.prototype.upgrade = y.prototype.h, y.prototype.get = y.prototype.get, y.prototype.whenDefined = y.prototype.m, y.prototype.polyfillWrapFlushCallback = y.prototype.s; var g = window.Document.prototype.createElement, v = window.Document.prototype.createElementNS, E = window.Document.prototype.importNode, _ = window.Document.prototype.prepend, C = window.Document.prototype.append, N = window.DocumentFragment.prototype.prepend, S = window.DocumentFragment.prototype.append, k = window.Node.prototype.cloneNode, D = window.Node.prototype.appendChild, T = window.Node.prototype.insertBefore, A = window.Node.prototype.removeChild, j = window.Node.prototype.replaceChild, L = Object.getOwnPropertyDescriptor(window.Node.prototype, "textContent"), M = window.Element.prototype.attachShadow, H = Object.getOwnPropertyDescriptor(window.Element.prototype, "innerHTML"), x = window.Element.prototype.getAttribute, O = window.Element.prototype.setAttribute, F = window.Element.prototype.removeAttribute, R = window.Element.prototype.getAttributeNS, P = window.Element.prototype.setAttributeNS, I = window.Element.prototype.removeAttributeNS, z = window.Element.prototype.insertAdjacentElement, W = window.Element.prototype.insertAdjacentHTML, B = window.Element.prototype.prepend, U = window.Element.prototype.append, V = window.Element.prototype.before, X = window.Element.prototype.after, $ = window.Element.prototype.replaceWith, q = window.Element.prototype.remove, G = window.HTMLElement, J = Object.getOwnPropertyDescriptor(window.HTMLElement.prototype, "innerHTML"), K = window.HTMLElement.prototype.insertAdjacentElement, Q = window.HTMLElement.prototype.insertAdjacentHTML, Y = new function () { }; function Z(t, e, o) { function i(e) { return function (o) { for (var i = [], r = 0; r < arguments.length; ++r)
+    i[r] = arguments[r]; r = []; for (var a = [], l = 0; l < i.length; l++) {
+    var c = i[l];
+    if (c instanceof Element && n(c) && a.push(c), c instanceof DocumentFragment)
+        for (c = c.firstChild; c; c = c.nextSibling)
+            r.push(c);
+    else
+        r.push(c);
+} for (e.apply(this, i), i = 0; i < a.length; i++)
+    u(t, a[i]); if (n(this))
+    for (i = 0; i < r.length; i++)
+        (a = r[i]) instanceof Element && h(t, a); }; } void 0 !== o.g && (e.prepend = i(o.g)), void 0 !== o.append && (e.append = i(o.append)); } var tt, et = window.customElements; if (!et || "function" != typeof et.define || "function" != typeof et.get) {
+    var nt = new a;
+    tt = nt, window.HTMLElement = function () { function t() { var t = this.constructor, e = tt.f.get(t); if (!e)
+        throw Error("The custom element being constructed was not registered with `customElements`."); var n = e.constructionStack; if (0 === n.length)
+        return n = g.call(document, e.localName), Object.setPrototypeOf(n, t.prototype), n.__CE_state = 1, n.__CE_definition = e, s(tt, n), n; var o = n[e = n.length - 1]; if (o === Y)
+        throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times."); return n[e] = Y, Object.setPrototypeOf(o, t.prototype), s(tt, o), o; } return t.prototype = G.prototype, Object.defineProperty(t.prototype, "constructor", { writable: !0, configurable: !0, enumerable: !1, value: t }), t; }(), function () { var t = nt; r(Document.prototype, "createElement", function (e) { if (this.__CE_hasRegistry) {
+        var n = t.a.get(e);
+        if (n)
+            return new n.constructorFunction;
+    } return e = g.call(this, e), s(t, e), e; }), r(Document.prototype, "importNode", function (e, n) { return e = E.call(this, e, !!n), this.__CE_hasRegistry ? p(t, e) : c(t, e), e; }), r(Document.prototype, "createElementNS", function (e, n) { if (this.__CE_hasRegistry && (null === e || "http://www.w3.org/1999/xhtml" === e)) {
+        var o = t.a.get(n);
+        if (o)
+            return new o.constructorFunction;
+    } return e = v.call(this, e, n), s(t, e), e; }), Z(t, Document.prototype, { g: _, append: C }); }(), Z(nt, DocumentFragment.prototype, { g: N, append: S }), function () { function t(t, o) { Object.defineProperty(t, "textContent", { enumerable: o.enumerable, configurable: !0, get: o.get, set: function (t) { if (this.nodeType === Node.TEXT_NODE)
+            o.set.call(this, t);
+        else {
+            var i = void 0;
+            if (this.firstChild) {
+                var r = this.childNodes, a = r.length;
+                if (0 < a && n(this)) {
+                    i = Array(a);
+                    for (var l = 0; l < a; l++)
+                        i[l] = r[l];
+                }
+            }
+            if (o.set.call(this, t), i)
+                for (t = 0; t < i.length; t++)
+                    u(e, i[t]);
+        } } }); } var e = nt; r(Node.prototype, "insertBefore", function (t, o) { if (t instanceof DocumentFragment) {
+        var i = Array.prototype.slice.apply(t.childNodes);
+        if (t = T.call(this, t, o), n(this))
+            for (o = 0; o < i.length; o++)
+                h(e, i[o]);
+        return t;
+    } return i = n(t), o = T.call(this, t, o), i && u(e, t), n(this) && h(e, t), o; }), r(Node.prototype, "appendChild", function (t) { if (t instanceof DocumentFragment) {
+        var o = Array.prototype.slice.apply(t.childNodes);
+        if (t = D.call(this, t), n(this))
+            for (var i = 0; i < o.length; i++)
+                h(e, o[i]);
+        return t;
+    } return o = n(t), i = D.call(this, t), o && u(e, t), n(this) && h(e, t), i; }), r(Node.prototype, "cloneNode", function (t) { return t = k.call(this, !!t), this.ownerDocument.__CE_hasRegistry ? p(e, t) : c(e, t), t; }), r(Node.prototype, "removeChild", function (t) { var o = n(t), i = A.call(this, t); return o && u(e, t), i; }), r(Node.prototype, "replaceChild", function (t, o) { if (t instanceof DocumentFragment) {
+        var i = Array.prototype.slice.apply(t.childNodes);
+        if (t = j.call(this, t, o), n(this))
+            for (u(e, o), o = 0; o < i.length; o++)
+                h(e, i[o]);
+        return t;
+    } i = n(t); var r = j.call(this, t, o), a = n(this); return a && u(e, o), i && u(e, t), a && h(e, t), r; }), L && L.get ? t(Node.prototype, L) : l(e, function (e) { t(e, { enumerable: !0, configurable: !0, get: function () { for (var t = [], e = 0; e < this.childNodes.length; e++)
+            t.push(this.childNodes[e].textContent); return t.join(""); }, set: function (t) { for (; this.firstChild;)
+            A.call(this, this.firstChild); D.call(this, document.createTextNode(t)); } }); }); }(), function () { function t(t, e) { Object.defineProperty(t, "innerHTML", { enumerable: e.enumerable, configurable: !0, get: e.get, set: function (t) { var o = this, r = void 0; if (n(this) && (r = [], i(this, function (t) { t !== o && r.push(t); })), e.set.call(this, t), r)
+            for (var l = 0; l < r.length; l++) {
+                var s = r[l];
+                1 === s.__CE_state && a.disconnectedCallback(s);
+            } return this.ownerDocument.__CE_hasRegistry ? p(a, this) : c(a, this), t; } }); } function e(t, e) { r(t, "insertAdjacentElement", function (t, o) { var i = n(o); return t = e.call(this, t, o), i && u(a, o), n(t) && h(a, o), t; }); } function o(t, e) { function n(t, e) { for (var n = []; t !== e; t = t.nextSibling)
+        n.push(t); for (e = 0; e < n.length; e++)
+        p(a, n[e]); } r(t, "insertAdjacentHTML", function (t, o) { if ("beforebegin" === (t = t.toLowerCase())) {
+        var i = this.previousSibling;
+        e.call(this, t, o), n(i || this.parentNode.firstChild, this);
+    }
+    else if ("afterbegin" === t)
+        i = this.firstChild, e.call(this, t, o), n(this.firstChild, i);
+    else if ("beforeend" === t)
+        i = this.lastChild, e.call(this, t, o), n(i || this.firstChild, null);
+    else {
+        if ("afterend" !== t)
+            throw new SyntaxError("The value provided (" + String(t) + ") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");
+        i = this.nextSibling, e.call(this, t, o), n(this.nextSibling, i);
+    } }); } var a = nt; M && r(Element.prototype, "attachShadow", function (t) { return this.__CE_shadowRoot = M.call(this, t); }), H && H.get ? t(Element.prototype, H) : J && J.get ? t(HTMLElement.prototype, J) : l(a, function (e) { t(e, { enumerable: !0, configurable: !0, get: function () { return k.call(this, !0).innerHTML; }, set: function (t) { var e = "template" === this.localName, n = e ? this.content : this, o = v.call(document, this.namespaceURI, this.localName); for (o.innerHTML = t; 0 < n.childNodes.length;)
+            A.call(n, n.childNodes[0]); for (t = e ? o.content : o; 0 < t.childNodes.length;)
+            D.call(n, t.childNodes[0]); } }); }), r(Element.prototype, "setAttribute", function (t, e) { if (1 !== this.__CE_state)
+        return O.call(this, t, e); var n = x.call(this, t); O.call(this, t, e), e = x.call(this, t), a.attributeChangedCallback(this, t, n, e, null); }), r(Element.prototype, "setAttributeNS", function (t, e, n) { if (1 !== this.__CE_state)
+        return P.call(this, t, e, n); var o = R.call(this, t, e); P.call(this, t, e, n), n = R.call(this, t, e), a.attributeChangedCallback(this, e, o, n, t); }), r(Element.prototype, "removeAttribute", function (t) { if (1 !== this.__CE_state)
+        return F.call(this, t); var e = x.call(this, t); F.call(this, t), null !== e && a.attributeChangedCallback(this, t, e, null, null); }), r(Element.prototype, "removeAttributeNS", function (t, e) { if (1 !== this.__CE_state)
+        return I.call(this, t, e); var n = R.call(this, t, e); I.call(this, t, e); var o = R.call(this, t, e); n !== o && a.attributeChangedCallback(this, e, n, o, t); }), K ? e(HTMLElement.prototype, K) : z ? e(Element.prototype, z) : console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."), Q ? o(HTMLElement.prototype, Q) : W ? o(Element.prototype, W) : console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."), Z(a, Element.prototype, { g: B, append: U }), function (t) { function e(e) { return function (o) { for (var i = [], r = 0; r < arguments.length; ++r)
+        i[r] = arguments[r]; r = []; for (var a = [], l = 0; l < i.length; l++) {
+        var c = i[l];
+        if (c instanceof Element && n(c) && a.push(c), c instanceof DocumentFragment)
+            for (c = c.firstChild; c; c = c.nextSibling)
+                r.push(c);
+        else
+            r.push(c);
+    } for (e.apply(this, i), i = 0; i < a.length; i++)
+        u(t, a[i]); if (n(this))
+        for (i = 0; i < r.length; i++)
+            (a = r[i]) instanceof Element && h(t, a); }; } var o = Element.prototype; void 0 !== V && (o.before = e(V)), void 0 !== V && (o.after = e(X)), void 0 !== $ && r(o, "replaceWith", function (e) { for (var o = [], i = 0; i < arguments.length; ++i)
+        o[i] = arguments[i]; i = []; for (var r = [], a = 0; a < o.length; a++) {
+        var l = o[a];
+        if (l instanceof Element && n(l) && r.push(l), l instanceof DocumentFragment)
+            for (l = l.firstChild; l; l = l.nextSibling)
+                i.push(l);
+        else
+            i.push(l);
+    } for (a = n(this), $.apply(this, o), o = 0; o < r.length; o++)
+        u(t, r[o]); if (a)
+        for (u(t, this), o = 0; o < i.length; o++)
+            (r = i[o]) instanceof Element && h(t, r); }), void 0 !== q && r(o, "remove", function () { var e = n(this); q.call(this), e && u(t, this); }); }(a); }(), document.__CE_hasRegistry = !0;
+    var ot = new y(nt);
+    Object.defineProperty(window, "customElements", { configurable: !0, enumerable: !0, value: ot });
+} }).call(self);
+// Polyfill CustomEvent
+if (typeof window.CustomEvent !== 'function') {
+    function CustomEvent(event, params) {
+        params = params || { bubbles: false, cancelable: false, detail: undefined };
+        var evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+        return evt;
+    }
+    CustomEvent.prototype = window.Event.prototype;
+    window.CustomEvent = CustomEvent;
+}
+/*!
+Element.closest and Element.matches
+https://github.com/jonathantneal/closest
+Creative Commons Zero v1.0 Universal
+*/
+(function (a) { "function" !== typeof a.matches && (a.matches = a.msMatchesSelector || a.mozMatchesSelector || a.webkitMatchesSelector || function (a) { a = (this.document || this.ownerDocument).querySelectorAll(a); for (var b = 0; a[b] && a[b] !== this;)
+    ++b; return !!a[b]; }); "function" !== typeof a.closest && (a.closest = function (a) { for (var b = this; b && 1 === b.nodeType;) {
+    if (b.matches(a))
+        return b;
+    b = b.parentNode;
+} return null; }); })(window.Element.prototype);
+/*!
+Element.getRootNode()
+*/
+(function (c) { function d(a) { a = b(a); return 11 === a.nodeType ? d(a.host) : a; } function b(a) { return a.parentNode ? b(a.parentNode) : a; } "function" !== typeof c.getRootNode && (c.getRootNode = function (a) { return a && a.composed ? d(this) : b(this); }); })(Element.prototype);
+/*!
+Element.remove()
+*/
+(function (b) { b.forEach(function (a) { a.hasOwnProperty("remove") || Object.defineProperty(a, "remove", { configurable: !0, enumerable: !0, writable: !0, value: function () { null !== this.parentNode && this.parentNode.removeChild(this); } }); }); })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
diff --git a/dist/esm/legacy/index.mjs b/dist/esm/legacy/index.mjs
new file mode 100644
index 00000000000..458ca4f2576
--- /dev/null
+++ b/dist/esm/legacy/index.mjs
@@ -0,0 +1 @@
+//! Autogenerated index
diff --git a/dist/esm/legacy/loader.mjs b/dist/esm/legacy/loader.mjs
new file mode 100644
index 00000000000..bd1c1897d6c
--- /dev/null
+++ b/dist/esm/legacy/loader.mjs
@@ -0,0 +1,7 @@
+import { c as patchEsm, b as bootstrapLazy } from './calcite-a092ddcb.js';
+var defineCustomElements = function (win, options) {
+    return patchEsm().then(function () {
+        bootstrapLazy([["calcite-alert_8", [[1, "calcite-alert", { "currentAlert": [1, "current-alert"], "dismiss": [4], "icon": [4], "id": [1], "queueLength": [2, "queue-length"], "color": [513], "theme": [513], "duration": [513], "isActive": [32], "close": [64] }], [1, "calcite-alerts", { "id": [1], "currentAlert": [32], "isActive": [32], "queue": [32], "open": [64] }, [[0, "alertClose", "updateQueue"]]], [1, "calcite-loader", { "isActive": [4, "is-active"], "text": [1] }], [1, "calcite-modal", { "first": [1], "middle": [1], "last": [1] }], [1, "calcite-tab", { "id": [1537], "tab": [1537], "isActive": [1540, "is-active"], "labeledBy": [32], "getTabIndex": [64], "registerLabeledBy": [64] }, [[16, "calciteTabChange", "tabChangeHandler"]]], [1, "calcite-tab-nav", { "id": [1537], "selectedTab": [1032, "selected-tab"] }, [[0, "calciteFocusPreviousTab", "focusPreviousTabHandler"], [0, "calciteFocusNextTab", "focusNextTabHandler"], [0, "calciteRegisterTabTitle", "tabTitleRegistationHandler"], [0, "calciteActivateTab", "activateTabHandler"]]], [1, "calcite-tab-title", { "id": [1537], "tab": [1537], "isActive": [1540, "is-active"], "controls": [32], "getTabIndex": [64], "setControledBy": [64] }, [[16, "calciteTabChange", "tabChangeHand"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]], [1, "calcite-tabs", { "theme": [513], "tabs": [32], "tabTitles": [32] }, [[0, "calciteRegisterTabTitle", "tabTitleRegistationHandler"], [0, "calciteRegisterTab", "tabRegistationHandler"]]]]], ["context-consumer", [[0, "context-consumer", { "context": [16], "renderer": [16], "subscribe": [16], "unsubscribe": [32] }]]]], options);
+    });
+};
+export { defineCustomElements };
diff --git a/dist/esm/legacy/shadow-css-984bac74-549b16dd.js b/dist/esm/legacy/shadow-css-984bac74-549b16dd.js
new file mode 100644
index 00000000000..67e00a0c116
--- /dev/null
+++ b/dist/esm/legacy/shadow-css-984bac74-549b16dd.js
@@ -0,0 +1,431 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+function scopeCss(cssText, scopeId, commentOriginalSelector) {
+    var sc = new ShadowCss();
+    return sc.shimCssText(cssText, scopeId, scopeId + '-h', scopeId + '-s', commentOriginalSelector);
+}
+var ShadowCss = /** @class */ (function () {
+    function ShadowCss() {
+        this.strictStyling = true;
+    }
+    ShadowCss.prototype.shimCssText = function (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) {
+        if (hostScopeId === void 0) { hostScopeId = ''; }
+        if (slotScopeId === void 0) { slotScopeId = ''; }
+        if (commentOriginalSelector === void 0) { commentOriginalSelector = false; }
+        var commentsWithHash = extractCommentsWithHash(cssText);
+        cssText = stripComments(cssText);
+        var orgSelectors = [];
+        if (commentOriginalSelector) {
+            var processCommentedSelector_1 = function (rule) {
+                var placeholder = "/*!@___" + orgSelectors.length + "___*/";
+                var comment = "/*!@" + rule.selector + "*/";
+                orgSelectors.push({ placeholder: placeholder, comment: comment });
+                rule.selector = placeholder + rule.selector;
+                return rule;
+            };
+            cssText = processRules(cssText, function (rule) {
+                if (rule.selector[0] !== '@') {
+                    return processCommentedSelector_1(rule);
+                }
+                else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                    rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                    rule.content = processRules(rule.content, processCommentedSelector_1);
+                    return rule;
+                }
+                return rule;
+            });
+        }
+        var scopedCssText = this._scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        cssText = [scopedCssText].concat(commentsWithHash).join('\n');
+        if (commentOriginalSelector) {
+            orgSelectors.forEach(function (_a) {
+                var placeholder = _a.placeholder, comment = _a.comment;
+                cssText = cssText.replace(placeholder, comment);
+            });
+        }
+        return cssText;
+    };
+    ShadowCss.prototype._scopeCssText = function (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) {
+        // replace :host and :host-context -shadowcsshost and -shadowcsshost respectively
+        cssText = this._insertPolyfillHostInCssText(cssText);
+        cssText = this._convertColonHost(cssText);
+        cssText = this._convertColonHostContext(cssText);
+        cssText = this._convertColonSlotted(cssText, slotScopeId);
+        cssText = this._convertShadowDOMSelectors(cssText);
+        if (scopeId) {
+            cssText = this._scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        }
+        cssText = cssText.replace(/-shadowcsshost-no-combinator/g, "." + hostScopeId);
+        cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
+        return cssText.trim();
+    };
+    /*
+     * convert a rule like :host(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar
+    */
+    ShadowCss.prototype._convertColonHost = function (cssText) {
+        return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
+    };
+    /*
+   * convert a rule like ::slotted(.foo) { }
+  */
+    ShadowCss.prototype._convertColonSlotted = function (cssText, slotAttr) {
+        var regExp = _cssColonSlottedRe;
+        return cssText.replace(regExp, function () {
+            var m = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                m[_i] = arguments[_i];
+            }
+            if (m[2]) {
+                var compound = m[2].trim();
+                var suffix = m[3];
+                var sel = '.' + slotAttr + ' > ' + compound + suffix;
+                return sel;
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    };
+    /*
+     * convert a rule like :host-context(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar, .foo scopeName > .bar { }
+     *
+     * and
+     *
+     * :host-context(.foo:host) .bar { ... }
+     *
+     * to
+     *
+     * .foo<scopeName> .bar { ... }
+    */
+    ShadowCss.prototype._convertColonHostContext = function (cssText) {
+        return this._convertColonRule(cssText, _cssColonHostContextRe, this._colonHostContextPartReplacer);
+    };
+    ShadowCss.prototype._convertColonRule = function (cssText, regExp, partReplacer) {
+        // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+        return cssText.replace(regExp, function () {
+            var m = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                m[_i] = arguments[_i];
+            }
+            if (m[2]) {
+                var parts = m[2].split(',');
+                var r = [];
+                for (var i = 0; i < parts.length; i++) {
+                    var p = parts[i].trim();
+                    if (!p)
+                        break;
+                    r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+                }
+                return r.join(',');
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    };
+    ShadowCss.prototype._colonHostContextPartReplacer = function (host, part, suffix) {
+        if (part.indexOf(_polyfillHost) > -1) {
+            return this._colonHostPartReplacer(host, part, suffix);
+        }
+        else {
+            return host + part + suffix + ', ' + part + ' ' + host + suffix;
+        }
+    };
+    ShadowCss.prototype._colonHostPartReplacer = function (host, part, suffix) {
+        return host + part.replace(_polyfillHost, '') + suffix;
+    };
+    /*
+     * Convert combinators like ::shadow and pseudo-elements like ::content
+     * by replacing with space.
+    */
+    ShadowCss.prototype._convertShadowDOMSelectors = function (cssText) {
+        return _shadowDOMSelectorsRe.reduce(function (result, pattern) { return result.replace(pattern, ' '); }, cssText);
+    };
+    // change a selector like 'div' to 'name div'
+    ShadowCss.prototype._scopeSelectors = function (cssText, scopeSelector, hostSelector, slotSelector, commentOriginalSelector) {
+        var _this = this;
+        return processRules(cssText, function (rule) {
+            var selector = rule.selector;
+            var content = rule.content;
+            if (rule.selector[0] !== '@') {
+                selector =
+                    _this._scopeSelector(rule.selector, scopeSelector, hostSelector, slotSelector, _this.strictStyling);
+            }
+            else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                content = _this._scopeSelectors(rule.content, scopeSelector, hostSelector, slotSelector, commentOriginalSelector);
+            }
+            selector = selector.replace(/\s{2,}/g, ' ').trim();
+            return new CssRule(selector, content);
+        });
+    };
+    ShadowCss.prototype._scopeSelector = function (selector, scopeSelector, hostSelector, slotSelector, strict) {
+        var _this = this;
+        return selector.split(',')
+            .map(function (shallowPart) {
+            if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
+                return shallowPart.trim();
+            }
+            if (_this._selectorNeedsScoping(shallowPart, scopeSelector)) {
+                return strict ?
+                    _this._applyStrictSelectorScope(shallowPart, scopeSelector, hostSelector).trim() :
+                    _this._applySelectorScope(shallowPart, scopeSelector, hostSelector).trim();
+            }
+            else {
+                return shallowPart.trim();
+            }
+        })
+            .join(', ');
+    };
+    ShadowCss.prototype._selectorNeedsScoping = function (selector, scopeSelector) {
+        var re = this._makeScopeMatcher(scopeSelector);
+        return !re.test(selector);
+    };
+    ShadowCss.prototype._makeScopeMatcher = function (scopeSelector) {
+        var lre = /\[/g;
+        var rre = /\]/g;
+        scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+        return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+    };
+    ShadowCss.prototype._applySelectorScope = function (selector, scopeSelector, hostSelector) {
+        // Difference from webcomponents.js: scopeSelector could not be an array
+        return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
+    };
+    // scope via name and [is=name]
+    ShadowCss.prototype._applySimpleSelectorScope = function (selector, scopeSelector, hostSelector) {
+        // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+        _polyfillHostRe.lastIndex = 0;
+        if (_polyfillHostRe.test(selector)) {
+            var replaceBy_1 = this.strictStyling ? "." + hostSelector : scopeSelector;
+            return selector
+                .replace(_polyfillHostNoCombinatorRe, function (_, selector) {
+                return selector.replace(/([^:]*)(:*)(.*)/, function (_, before, colon, after) {
+                    return before + replaceBy_1 + colon + after;
+                });
+            })
+                .replace(_polyfillHostRe, replaceBy_1 + ' ');
+        }
+        return scopeSelector + ' ' + selector;
+    };
+    ShadowCss.prototype._applyStrictSelectorScope = function (selector, scopeSelector, hostSelector) {
+        var _this = this;
+        var isRe = /\[is=([^\]]*)\]/g;
+        scopeSelector = scopeSelector.replace(isRe, function (_) {
+            var parts = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                parts[_i - 1] = arguments[_i];
+            }
+            return parts[0];
+        });
+        var className = '.' + scopeSelector;
+        var _scopeSelectorPart = function (p) {
+            var scopedP = p.trim();
+            if (!scopedP) {
+                return '';
+            }
+            if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+                scopedP = _this._applySimpleSelectorScope(p, scopeSelector, hostSelector);
+            }
+            else {
+                // remove :host since it should be unnecessary
+                var t = p.replace(_polyfillHostRe, '');
+                if (t.length > 0) {
+                    var matches = t.match(/([^:]*)(:*)(.*)/);
+                    if (matches) {
+                        scopedP = matches[1] + className + matches[2] + matches[3];
+                    }
+                }
+            }
+            return scopedP;
+        };
+        var safeContent = new SafeSelector(selector);
+        selector = safeContent.content();
+        var scopedSelector = '';
+        var startIndex = 0;
+        var res;
+        var sep = /( |>|\+|~(?!=))\s*/g;
+        // If a selector appears before :host it should not be shimmed as it
+        // matches on ancestor elements and not on elements in the host's shadow
+        // `:host-context(div)` is transformed to
+        // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+        // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+        // Historically `component-tag:host` was matching the component so we also want to preserve
+        // this behavior to avoid breaking legacy apps (it should not match).
+        // The behavior should be:
+        // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+        // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+        //   `:host-context(tag)`)
+        var hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+        // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+        var shouldScope = !hasHost;
+        while ((res = sep.exec(selector)) !== null) {
+            var separator = res[1];
+            var part_1 = selector.slice(startIndex, res.index).trim();
+            shouldScope = shouldScope || part_1.indexOf(_polyfillHostNoCombinator) > -1;
+            var scopedPart = shouldScope ? _scopeSelectorPart(part_1) : part_1;
+            scopedSelector += scopedPart + " " + separator + " ";
+            startIndex = sep.lastIndex;
+        }
+        var part = selector.substring(startIndex);
+        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+        scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+        // replace the placeholders with their original values
+        return safeContent.restore(scopedSelector);
+    };
+    ShadowCss.prototype._insertPolyfillHostInCssText = function (selector) {
+        selector = selector
+            .replace(_colonHostContextRe, _polyfillHostContext)
+            .replace(_colonHostRe, _polyfillHost)
+            .replace(_colonSlottedRe, _polyfillSlotted);
+        return selector;
+    };
+    return ShadowCss;
+}());
+var SafeSelector = /** @class */ (function () {
+    function SafeSelector(selector) {
+        var _this = this;
+        this.placeholders = [];
+        this.index = 0;
+        // Replaces attribute selectors with placeholders.
+        // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+        selector = selector.replace(/(\[[^\]]*\])/g, function (_, keep) {
+            var replaceBy = "__ph-" + _this.index + "__";
+            _this.placeholders.push(keep);
+            _this.index++;
+            return replaceBy;
+        });
+        // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+        // WS and "+" would otherwise be interpreted as selector separators.
+        this._content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, function (_, pseudo, exp) {
+            var replaceBy = "__ph-" + _this.index + "__";
+            _this.placeholders.push(exp);
+            _this.index++;
+            return pseudo + replaceBy;
+        });
+    }
+    SafeSelector.prototype.restore = function (content) {
+        var _this = this;
+        return content.replace(/__ph-(\d+)__/g, function (_, index) { return _this.placeholders[+index]; });
+    };
+    SafeSelector.prototype.content = function () { return this._content; };
+    return SafeSelector;
+}());
+var _polyfillHost = '-shadowcsshost';
+var _polyfillSlotted = '-shadowcssslotted';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+var _polyfillHostContext = '-shadowcsscontext';
+var _parenSuffix = ')(?:\\((' +
+    '(?:\\([^)(]*\\)|[^)(]*)+?' +
+    ')\\))?([^,{]*)';
+var _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+var _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+var _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
+var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+var _shadowDOMSelectorsRe = [
+    /::shadow/g,
+    /::content/g
+];
+var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
+var _polyfillHostRe = /-shadowcsshost/gim;
+var _colonHostRe = /:host/gim;
+var _colonSlottedRe = /::slotted/gim;
+var _colonHostContextRe = /:host-context/gim;
+var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+function stripComments(input) {
+    return input.replace(_commentRe, '');
+}
+var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+function extractCommentsWithHash(input) {
+    return input.match(_commentWithHashRe) || [];
+}
+var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+var _curlyRe = /([{}])/g;
+var OPEN_CURLY = '{';
+var CLOSE_CURLY = '}';
+var BLOCK_PLACEHOLDER = '%BLOCK%';
+var CssRule = /** @class */ (function () {
+    function CssRule(selector, content) {
+        this.selector = selector;
+        this.content = content;
+    }
+    return CssRule;
+}());
+function processRules(input, ruleCallback) {
+    var inputWithEscapedBlocks = escapeBlocks(input);
+    var nextBlockIndex = 0;
+    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function () {
+        var m = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            m[_i] = arguments[_i];
+        }
+        var selector = m[2];
+        var content = '';
+        var suffix = m[4];
+        var contentPrefix = '';
+        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+            contentPrefix = '{';
+        }
+        var rule = ruleCallback(new CssRule(selector, content));
+        return "" + m[1] + rule.selector + m[3] + contentPrefix + rule.content + suffix;
+    });
+}
+var StringWithEscapedBlocks = /** @class */ (function () {
+    function StringWithEscapedBlocks(escapedString, blocks) {
+        this.escapedString = escapedString;
+        this.blocks = blocks;
+    }
+    return StringWithEscapedBlocks;
+}());
+function escapeBlocks(input) {
+    var inputParts = input.split(_curlyRe);
+    var resultParts = [];
+    var escapedBlocks = [];
+    var bracketCount = 0;
+    var currentBlockParts = [];
+    for (var partIndex = 0; partIndex < inputParts.length; partIndex++) {
+        var part = inputParts[partIndex];
+        if (part === CLOSE_CURLY) {
+            bracketCount--;
+        }
+        if (bracketCount > 0) {
+            currentBlockParts.push(part);
+        }
+        else {
+            if (currentBlockParts.length > 0) {
+                escapedBlocks.push(currentBlockParts.join(''));
+                resultParts.push(BLOCK_PLACEHOLDER);
+                currentBlockParts = [];
+            }
+            resultParts.push(part);
+        }
+        if (part === OPEN_CURLY) {
+            bracketCount++;
+        }
+    }
+    if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+    }
+    return new StringWithEscapedBlocks(resultParts.join(''), escapedBlocks);
+}
+export { ShadowCss, scopeCss };
diff --git a/dist/esm/loader.mjs b/dist/esm/loader.mjs
new file mode 100644
index 00000000000..4d9e56f73b8
--- /dev/null
+++ b/dist/esm/loader.mjs
@@ -0,0 +1,9 @@
+import { c as patchEsm, b as bootstrapLazy } from './calcite-a092ddcb.js';
+
+const defineCustomElements = (win, options) => {
+  return patchEsm().then(() => {
+    bootstrapLazy([["calcite-alert_8",[[1,"calcite-alert",{"currentAlert":[1,"current-alert"],"dismiss":[4],"icon":[4],"id":[1],"queueLength":[2,"queue-length"],"color":[513],"theme":[513],"duration":[513],"isActive":[32],"close":[64]}],[1,"calcite-alerts",{"id":[1],"currentAlert":[32],"isActive":[32],"queue":[32],"open":[64]},[[0,"alertClose","updateQueue"]]],[1,"calcite-loader",{"isActive":[4,"is-active"],"text":[1]}],[1,"calcite-modal",{"first":[1],"middle":[1],"last":[1]}],[1,"calcite-tab",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"labeledBy":[32],"getTabIndex":[64],"registerLabeledBy":[64]},[[16,"calciteTabChange","tabChangeHandler"]]],[1,"calcite-tab-nav",{"id":[1537],"selectedTab":[1032,"selected-tab"]},[[0,"calciteFocusPreviousTab","focusPreviousTabHandler"],[0,"calciteFocusNextTab","focusNextTabHandler"],[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteActivateTab","activateTabHandler"]]],[1,"calcite-tab-title",{"id":[1537],"tab":[1537],"isActive":[1540,"is-active"],"controls":[32],"getTabIndex":[64],"setControledBy":[64]},[[16,"calciteTabChange","tabChangeHand"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]],[1,"calcite-tabs",{"theme":[513],"tabs":[32],"tabTitles":[32]},[[0,"calciteRegisterTabTitle","tabTitleRegistationHandler"],[0,"calciteRegisterTab","tabRegistationHandler"]]]]],["context-consumer",[[0,"context-consumer",{"context":[16],"renderer":[16],"subscribe":[16],"unsubscribe":[32]}]]]], options);
+  });
+};
+
+export { defineCustomElements };
diff --git a/dist/esm/polyfills/array.js b/dist/esm/polyfills/array.js
new file mode 100644
index 00000000000..9b126d2f0c5
--- /dev/null
+++ b/dist/esm/polyfills/array.js
@@ -0,0 +1,22 @@
+/*!
+Array.prototype.fill
+*/
+Array.prototype.fill||Object.defineProperty(Array.prototype,"fill",{value:function(t){var r,e,i,n,o,a,l;if(null==this)throw new TypeError("this is null or not defined");for(e=(r=Object(this)).length>>>0,n=(i=arguments[1]>>0)<0?Math.max(e+i,0):Math.min(i,e),l=(a=void 0===(o=arguments[2])?e:o>>0)<0?Math.max(e+a,0):Math.min(a,e);n<l;)r[n]=t,n++;return r}});
+
+/*!
+Array.prototype.find
+*/
+Array.prototype.find||Object.defineProperty(Array.prototype,"find",{writable:!0,configurable:!0,value:function(c,e){if(null==this)throw new TypeError('"this" is null or not defined');var b=Object(this),f=b.length>>>0;if("function"!==typeof c)throw new TypeError("predicate must be a function");for(var a=0;a<f;){var d=b[a];if(c.call(e,d,a,b))return d;a++}}});
+/*!
+Array.prototype.findIndex
+*/
+Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(c,d){if(null==this)throw new TypeError('"this" is null or not defined');var b=Object(this),e=b.length>>>0;if("function"!==typeof c)throw new TypeError("predicate must be a function");for(var a=0;a<e;){if(c.call(d,b[a],a,b))return a;a++}return-1},configurable:!0,writable:!0});
+/*!
+Array.from
+*/
+Array.from||(Array.from=function(){var l=Object.prototype.toString,h=function(c){return"function"===typeof c||"[object Function]"===l.call(c)},m=Math.pow(2,53)-1;return function(c){var k=Object(c);if(null==c)throw new TypeError("Array.from requires an array-like object - not null or undefined");var d=1<arguments.length?arguments[1]:void 0,f;if("undefined"!==typeof d){if(!h(d))throw new TypeError("Array.from: when provided, the second argument must be a function");2<arguments.length&&(f=arguments[2])}var a=
+Number(k.length);a=isNaN(a)?0:0!==a&&isFinite(a)?(0<a?1:-1)*Math.floor(Math.abs(a)):a;a=Math.min(Math.max(a,0),m);for(var g=h(this)?Object(new this(a)):Array(a),b=0,e;b<a;)e=k[b],g[b]=d?"undefined"===typeof f?d(e,b):d.call(f,e,b):e,b+=1;g.length=a;return g}}());
+/*!
+Array.prototype.includes
+*/
+Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{writable:!0,configurable:!0,value:function(r,e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if(0===n)return!1;var i,o,a=0|e,u=Math.max(0<=a?a:n-Math.abs(a),0);for(;u<n;){if((i=t[u])===(o=r)||"number"==typeof i&&"number"==typeof o&&isNaN(i)&&isNaN(o))return!0;u++}return!1}});
diff --git a/dist/esm/polyfills/css-shim.js b/dist/esm/polyfills/css-shim.js
new file mode 100644
index 00000000000..dfd3a351678
--- /dev/null
+++ b/dist/esm/polyfills/css-shim.js
@@ -0,0 +1,628 @@
+/*
+Extremely simple css parser. Intended to be not more than what we need
+and definitely not necessarily correct =).
+*/
+/** @unrestricted */
+var StyleNode = /** @class */ (function () {
+    function StyleNode() {
+        this.start = 0;
+        this.end = 0;
+        this.previous = null;
+        this.parent = null;
+        this.rules = null;
+        this.parsedCssText = '';
+        this.cssText = '';
+        this.atRule = false;
+        this.type = 0;
+        this.keyframesName = '';
+        this.selector = '';
+        this.parsedSelector = '';
+    }
+    return StyleNode;
+}());
+// given a string of css, return a simple rule tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+}
+// remove stuff we don't care about that may hinder parsing
+/**
+ * @param {string} cssText
+ * @return {string}
+ */
+function clean(cssText) {
+    return cssText.replace(RX.comments, '').replace(RX.port, '');
+}
+// super simple {...} lexer that returns a node tree
+/**
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function lex(text) {
+    var root = new StyleNode();
+    root['start'] = 0;
+    root['end'] = text.length;
+    var n = root;
+    for (var i = 0, l = text.length; i < l; i++) {
+        if (text[i] === OPEN_BRACE) {
+            if (!n['rules']) {
+                n['rules'] = [];
+            }
+            var p = n;
+            var previous = p['rules'][p['rules'].length - 1] || null;
+            n = new StyleNode();
+            n['start'] = i + 1;
+            n['parent'] = p;
+            n['previous'] = previous;
+            p['rules'].push(n);
+        }
+        else if (text[i] === CLOSE_BRACE) {
+            n['end'] = i + 1;
+            n = n['parent'] || root;
+        }
+    }
+    return root;
+}
+// add selectors/cssText to node tree
+/**
+ * @param {StyleNode} node
+ * @param {string} text
+ * @return {StyleNode}
+ */
+function parseCss(node, text) {
+    var t = text.substring(node['start'], node['end'] - 1);
+    node['parsedCssText'] = node['cssText'] = t.trim();
+    if (node.parent) {
+        var ss = node.previous ? node.previous['end'] : node.parent['start'];
+        t = text.substring(ss, node['start'] - 1);
+        t = _expandUnicodeEscapes(t);
+        t = t.replace(RX.multipleSpaces, ' ');
+        // TODO(sorvell): ad hoc; make selector include only after last ;
+        // helps with mixin syntax
+        t = t.substring(t.lastIndexOf(';') + 1);
+        var s = node['parsedSelector'] = node['selector'] = t.trim();
+        node['atRule'] = (s.indexOf(AT_START) === 0);
+        // note, support a subset of rule types...
+        if (node['atRule']) {
+            if (s.indexOf(MEDIA_START) === 0) {
+                node['type'] = types.MEDIA_RULE;
+            }
+            else if (s.match(RX.keyframesRule)) {
+                node['type'] = types.KEYFRAMES_RULE;
+                node['keyframesName'] = node['selector'].split(RX.multipleSpaces).pop();
+            }
+        }
+        else {
+            if (s.indexOf(VAR_START) === 0) {
+                node['type'] = types.MIXIN_RULE;
+            }
+            else {
+                node['type'] = types.STYLE_RULE;
+            }
+        }
+    }
+    var r$ = node['rules'];
+    if (r$) {
+        for (var i = 0, l = r$.length, r = void 0; (i < l) && (r = r$[i]); i++) {
+            parseCss(r, text);
+        }
+    }
+    return node;
+}
+/**
+ * conversion of sort unicode escapes with spaces like `\33 ` (and longer) into
+ * expanded form that doesn't require trailing space `\000033`
+ * @param {string} s
+ * @return {string}
+ */
+function _expandUnicodeEscapes(s) {
+    return s.replace(/\\([0-9a-f]{1,6})\s/gi, function () {
+        var code = arguments[1], repeat = 6 - code.length;
+        while (repeat--) {
+            code = '0' + code;
+        }
+        return '\\' + code;
+    });
+}
+/** @enum {number} */
+var types = {
+    STYLE_RULE: 1,
+    KEYFRAMES_RULE: 7,
+    MEDIA_RULE: 4,
+    MIXIN_RULE: 1000
+};
+var OPEN_BRACE = '{';
+var CLOSE_BRACE = '}';
+// helper regexp's
+var RX = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
+    keyframesRule: /^@[^\s]*keyframes/,
+    multipleSpaces: /\s+/g
+};
+var VAR_START = '--';
+var MEDIA_START = '@media';
+var AT_START = '@';
+function findRegex(regex, cssText, offset) {
+    regex['lastIndex'] = 0;
+    var r = cssText.substring(offset).match(regex);
+    if (r) {
+        var start = offset + r['index'];
+        return {
+            start: start,
+            end: start + r[0].length
+        };
+    }
+    return null;
+}
+var VAR_USAGE_START = /\bvar\(/;
+var VAR_ASSIGN_START = /\B--[\w-]+\s*:/;
+var COMMENTS = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim;
+var TRAILING_LINES = /^[\t ]+\n/gm;
+function resolveVar(props, prop, fallback) {
+    if (props[prop]) {
+        return props[prop];
+    }
+    if (fallback) {
+        return executeTemplate(fallback, props);
+    }
+    return '';
+}
+function findVarEndIndex(cssText, offset) {
+    var count = 0;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (c === '(') {
+            count++;
+        }
+        else if (c === ')') {
+            count--;
+            if (count <= 0) {
+                return i + 1;
+            }
+        }
+    }
+    return i;
+}
+function parseVar(cssText, offset) {
+    var varPos = findRegex(VAR_USAGE_START, cssText, offset);
+    if (!varPos) {
+        return null;
+    }
+    var endVar = findVarEndIndex(cssText, varPos.start);
+    var varContent = cssText.substring(varPos.end, endVar - 1);
+    var _a = varContent.split(','), propName = _a[0], fallback = _a.slice(1);
+    return {
+        start: varPos.start,
+        end: endVar,
+        propName: propName.trim(),
+        fallback: fallback.length > 0 ? fallback.join(',').trim() : undefined
+    };
+}
+function compileVar(cssText, template, offset) {
+    var varMeta = parseVar(cssText, offset);
+    if (!varMeta) {
+        template.push(cssText.substring(offset, cssText.length));
+        return cssText.length;
+    }
+    var propName = varMeta.propName;
+    var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined;
+    template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); });
+    return varMeta.end;
+}
+function executeTemplate(template, props) {
+    var final = '';
+    for (var i = 0; i < template.length; i++) {
+        var s = template[i];
+        final += (typeof s === 'string')
+            ? s
+            : s(props);
+    }
+    return final;
+}
+function findEndValue(cssText, offset) {
+    var onStr = false;
+    var double = false;
+    var i = offset;
+    for (; i < cssText.length; i++) {
+        var c = cssText[i];
+        if (onStr) {
+            if (double && c === '"') {
+                onStr = false;
+            }
+            if (!double && c === '\'') {
+                onStr = false;
+            }
+        }
+        else {
+            if (c === '"') {
+                onStr = true;
+                double = true;
+            }
+            else if (c === '\'') {
+                onStr = true;
+                double = false;
+            }
+            else if (c === ';') {
+                return i + 1;
+            }
+            else if (c === '}') {
+                return i;
+            }
+        }
+    }
+    return i;
+}
+function removeCustomAssigns(cssText) {
+    var final = '';
+    var offset = 0;
+    while (true) {
+        var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset);
+        var start = assignPos ? assignPos.start : cssText.length;
+        final += cssText.substring(offset, start);
+        if (assignPos) {
+            offset = findEndValue(cssText, start);
+        }
+        else {
+            break;
+        }
+    }
+    return final;
+}
+function compileTemplate(cssText) {
+    var index = 0;
+    cssText = cssText.replace(COMMENTS, '');
+    cssText = removeCustomAssigns(cssText)
+        .replace(TRAILING_LINES, '');
+    var segments = [];
+    while (index < cssText.length) {
+        index = compileVar(cssText, segments, index);
+    }
+    return segments;
+}
+function resolveValues(selectors) {
+    var props = {};
+    selectors.forEach(function (selector) {
+        selector.declarations.forEach(function (dec) {
+            props[dec.prop] = dec.value;
+        });
+    });
+    var propsValues = {};
+    var entries = Object.entries(props);
+    var _loop_1 = function (i) {
+        var dirty = false;
+        entries.forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var propValue = executeTemplate(value, propsValues);
+            if (propValue !== propsValues[key]) {
+                propsValues[key] = propValue;
+                dirty = true;
+            }
+        });
+        if (!dirty) {
+            return "break";
+        }
+    };
+    for (var i = 0; i < 10; i++) {
+        var state_1 = _loop_1(i);
+        if (state_1 === "break")
+            break;
+    }
+    return propsValues;
+}
+function getSelectors(root, index) {
+    if (index === void 0) { index = 0; }
+    if (!root.rules) {
+        return [];
+    }
+    var selectors = [];
+    root.rules
+        .filter(function (rule) { return rule.type === types.STYLE_RULE; })
+        .forEach(function (rule) {
+        var declarations = getDeclarations(rule.cssText);
+        if (declarations.length > 0) {
+            rule.parsedSelector.split(',').forEach(function (selector) {
+                selector = selector.trim();
+                selectors.push({
+                    selector: selector,
+                    declarations: declarations,
+                    specificity: computeSpecificity(selector),
+                    nu: index
+                });
+            });
+        }
+        index++;
+    });
+    return selectors;
+}
+function computeSpecificity(_selector) {
+    return 1;
+}
+var IMPORTANT = '!important';
+var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;
+function getDeclarations(cssText) {
+    var declarations = [];
+    var xArray;
+    while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) {
+        var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important;
+        declarations.push({
+            prop: xArray[1].trim(),
+            value: compileTemplate(value),
+            important: important,
+        });
+    }
+    return declarations;
+}
+function normalizeValue(value) {
+    var regex = /\s+/gim;
+    value = value.replace(regex, ' ').trim();
+    var important = value.endsWith(IMPORTANT);
+    if (important) {
+        value = value.substr(0, value.length - IMPORTANT.length).trim();
+    }
+    return {
+        value: value,
+        important: important
+    };
+}
+function getActiveSelectors(hostEl, hostScopeMap, globalScopes) {
+    // computes the css scopes that might affect this particular element
+    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // each scope might have an array of associated selectors
+    // let's flatten the complete array of selectors from all the scopes
+    var selectorSet = getSelectorsForScopes(scopes);
+    // we filter to only the selectors that matches the hostEl
+    var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); });
+    // sort selectors by specifity
+    return sortSelectors(activeSelectors);
+}
+function getScopesForElement(hostTemplateMap, node) {
+    var scopes = [];
+    while (node) {
+        var scope = hostTemplateMap.get(node);
+        if (scope) {
+            scopes.push(scope);
+        }
+        node = node.parentElement;
+    }
+    return scopes;
+}
+function getSelectorsForScopes(scopes) {
+    var selectors = [];
+    scopes.forEach(function (scope) {
+        selectors.push.apply(selectors, scope.selectors);
+    });
+    return selectors;
+}
+function sortSelectors(selectors) {
+    selectors.sort(function (a, b) {
+        if (a.specificity === b.specificity) {
+            return a.nu - b.nu;
+        }
+        return a.specificity - b.specificity;
+    });
+    return selectors;
+}
+function matches(el, selector) {
+    return el.matches(selector);
+}
+function parseCSS(original) {
+    var ast = parse(original);
+    var template = compileTemplate(original);
+    var selectors = getSelectors(ast);
+    return {
+        original: original,
+        template: template,
+        selectors: selectors,
+        isDynamic: template.length > 1
+    };
+}
+function addGlobalStyle(globalScopes, styleEl) {
+    var css = parseCSS(styleEl.innerHTML);
+    css.styleEl = styleEl;
+    globalScopes.push(css);
+}
+function updateGlobalScopes(scopes) {
+    var selectors = getSelectorsForScopes(scopes);
+    var props = resolveValues(selectors);
+    scopes.forEach(function (scope) {
+        if (scope.isDynamic) {
+            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+        }
+    });
+}
+function reScope(scope, cssScopeId) {
+    var template = scope.template.map(function (segment) {
+        return (typeof segment === 'string')
+            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            : segment;
+    });
+    var selectors = scope.selectors.map(function (sel) {
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+    });
+    return Object.assign({}, scope, { template: template,
+        selectors: selectors,
+        cssScopeId: cssScopeId });
+}
+function replaceScope(original, oldScopeId, newScopeId) {
+    original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId);
+    return original;
+}
+function replaceAll(input, find, replace) {
+    return input.replace(new RegExp(find, 'g'), replace);
+}
+function loadDocument(doc, globalScopes) {
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        loadDocumentStyles(doc, globalScopes);
+    });
+}
+function loadDocumentLinks(doc, globalScopes) {
+    var promises = [];
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    for (var i = 0; i < linkElms.length; i++) {
+        promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
+    }
+    return Promise.all(promises);
+}
+function loadDocumentStyles(doc, globalScopes) {
+    var styleElms = doc.querySelectorAll('style');
+    for (var i = 0; i < styleElms.length; i++) {
+        addGlobalStyle(globalScopes, styleElms[i]);
+    }
+}
+function addGlobalLink(doc, globalScopes, linkElm) {
+    var url = linkElm.href;
+    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
+        if (hasCssVariables(text) && linkElm.parentNode) {
+            if (hasRelativeUrls(text)) {
+                text = fixRelativeUrls(text, url);
+            }
+            var styleEl = doc.createElement('style');
+            styleEl.innerHTML = text;
+            addGlobalStyle(globalScopes, styleEl);
+            linkElm.parentNode.insertBefore(styleEl, linkElm);
+            linkElm.remove();
+        }
+    }).catch(function (err) {
+        console.error(err);
+    });
+}
+// This regexp tries to determine when a variable is declared, for example:
+//
+// .my-el { --highlight-color: green; }
+//
+// but we don't want to trigger when a classname uses "--" or a pseudo-class is
+// used. We assume that the only characters that can preceed a variable
+// declaration are "{", from an opening block, ";" from a preceeding rule, or a
+// space. This prevents the regexp from matching a word in a selector, since
+// they would need to start with a "." or "#". (We assume element names don't
+// start with "--").
+var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m;
+function hasCssVariables(css) {
+    return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css);
+}
+// This regexp find all url() usages with relative urls
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+function hasRelativeUrls(css) {
+    CSS_URL_REGEXP.lastIndex = 0;
+    return CSS_URL_REGEXP.test(css);
+}
+function fixRelativeUrls(css, originalUrl) {
+    // get the basepath from the original import url
+    var basePath = originalUrl.replace(/[^/]*$/, '');
+    // replace the relative url, with the new relative url
+    return css.replace(CSS_URL_REGEXP, function (fullMatch, url) {
+        // rhe new relative path is the base path + uri
+        // TODO: normalize relative URL
+        var relativeUrl = basePath + url;
+        return fullMatch.replace(url, relativeUrl);
+    });
+}
+var CustomStyle = /** @class */ (function () {
+    function CustomStyle(win, doc) {
+        this.win = win;
+        this.doc = doc;
+        this.count = 0;
+        this.hostStyleMap = new WeakMap();
+        this.hostScopeMap = new WeakMap();
+        this.globalScopes = [];
+        this.scopesMap = new Map();
+    }
+    CustomStyle.prototype.initShim = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.win.requestAnimationFrame(function () {
+                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+            });
+        });
+    };
+    CustomStyle.prototype.addLink = function (linkEl) {
+        var _this = this;
+        return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () {
+            _this.updateGlobal();
+        });
+    };
+    CustomStyle.prototype.addGlobalStyle = function (styleEl) {
+        addGlobalStyle(this.globalScopes, styleEl);
+        this.updateGlobal();
+    };
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+        if (this.hostScopeMap.has(hostEl)) {
+            throw new Error('host style already created');
+        }
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
+        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
+        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var styleEl = this.doc.createElement('style');
+        if (!needStyleEl) {
+            styleEl.innerHTML = cssText;
+        }
+        else {
+            if (isDynamicScoped) {
+                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
+                styleEl.innerHTML = '/*needs update*/';
+                this.hostStyleMap.set(hostEl, styleEl);
+                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+                this.count++;
+            }
+            else {
+                baseScope.styleEl = styleEl;
+                if (!baseScope.isDynamic) {
+                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                }
+                this.globalScopes.push(baseScope);
+                this.updateGlobal();
+                this.hostScopeMap.set(hostEl, baseScope);
+            }
+        }
+        return styleEl;
+    };
+    CustomStyle.prototype.removeHost = function (hostEl) {
+        var css = this.hostStyleMap.get(hostEl);
+        if (css) {
+            css.remove();
+        }
+        this.hostStyleMap.delete(hostEl);
+        this.hostScopeMap.delete(hostEl);
+    };
+    CustomStyle.prototype.updateHost = function (hostEl) {
+        var scope = this.hostScopeMap.get(hostEl);
+        if (scope && scope.isDynamic && scope.cssScopeId) {
+            var styleEl = this.hostStyleMap.get(hostEl);
+            if (styleEl) {
+                var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
+                var props = resolveValues(selectors);
+                styleEl.innerHTML = executeTemplate(scope.template, props);
+            }
+        }
+    };
+    CustomStyle.prototype.updateGlobal = function () {
+        updateGlobalScopes(this.globalScopes);
+    };
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+        var scope = this.scopesMap.get(scopeId);
+        if (!scope) {
+            scope = parseCSS(cssText);
+            scope.cssScopeId = scopeId;
+            this.scopesMap.set(scopeId, scope);
+        }
+        return scope;
+    };
+    return CustomStyle;
+}());
+var win = window;
+function needsShim() {
+    return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'));
+}
+if (!win.__stencil_cssshim && needsShim()) {
+    win.__stencil_cssshim = new CustomStyle(win, document);
+}
diff --git a/dist/esm/polyfills/dom.js b/dist/esm/polyfills/dom.js
new file mode 100644
index 00000000000..717a89fd368
--- /dev/null
+++ b/dist/esm/polyfills/dom.js
@@ -0,0 +1,38 @@
+/*
+  Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+  Code distributed by Google as part of the polymer project is also
+  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){"use strict";var t=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function e(e){var n=t.has(e);return e=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(e),!n&&e}function n(t){var e=t.isConnected;if(void 0!==e)return e;for(;t&&!(t.__CE_isImportDocument||t instanceof Document);)t=t.parentNode||(window.ShadowRoot&&t instanceof ShadowRoot?t.host:void 0);return!(!t||!(t.__CE_isImportDocument||t instanceof Document))}function o(t,e){for(;e&&e!==t&&!e.nextSibling;)e=e.parentNode;return e&&e!==t?e.nextSibling:null}function i(t,e,n){n=void 0===n?new Set:n;for(var r=t;r;){if(r.nodeType===Node.ELEMENT_NODE){var a=r;e(a);var l=a.localName;if("link"===l&&"import"===a.getAttribute("rel")){if((r=a.import)instanceof Node&&!n.has(r))for(n.add(r),r=r.firstChild;r;r=r.nextSibling)i(r,e,n);r=o(t,a);continue}if("template"===l){r=o(t,a);continue}if(a=a.__CE_shadowRoot)for(a=a.firstChild;a;a=a.nextSibling)i(a,e,n)}r=r.firstChild?r.firstChild:o(t,r)}}function r(t,e,n){t[e]=n}function a(){this.a=new Map,this.f=new Map,this.c=[],this.b=!1}function l(t,e){t.b=!0,t.c.push(e)}function c(t,e){t.b&&i(e,function(e){return s(t,e)})}function s(t,e){if(t.b&&!e.__CE_patched){e.__CE_patched=!0;for(var n=0;n<t.c.length;n++)t.c[n](e)}}function h(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state?t.connectedCallback(o):f(t,o)}}function u(t,e){var n=[];for(i(e,function(t){return n.push(t)}),e=0;e<n.length;e++){var o=n[e];1===o.__CE_state&&t.disconnectedCallback(o)}}function p(t,e,n){var o=(n=void 0===n?{}:n).u||new Set,r=n.h||function(e){return f(t,e)},a=[];if(i(e,function(e){if("link"===e.localName&&"import"===e.getAttribute("rel")){var n=e.import;n instanceof Node&&(n.__CE_isImportDocument=!0,n.__CE_hasRegistry=!0),n&&"complete"===n.readyState?n.__CE_documentLoadHandled=!0:e.addEventListener("load",function(){var n=e.import;if(!n.__CE_documentLoadHandled){n.__CE_documentLoadHandled=!0;var i=new Set(o);i.delete(n),p(t,n,{u:i,h:r})}})}else a.push(e)},o),t.b)for(e=0;e<a.length;e++)s(t,a[e]);for(e=0;e<a.length;e++)r(a[e])}function f(t,e){if(void 0===e.__CE_state){var o=e.ownerDocument;if((o.defaultView||o.__CE_isImportDocument&&o.__CE_hasRegistry)&&(o=t.a.get(e.localName))){o.constructionStack.push(e);var i=o.constructorFunction;try{try{if(new i!==e)throw Error("The custom element constructor did not produce the element being upgraded.")}finally{o.constructionStack.pop()}}catch(t){throw e.__CE_state=2,t}if(e.__CE_state=1,e.__CE_definition=o,o.attributeChangedCallback)for(o=o.observedAttributes,i=0;i<o.length;i++){var r=o[i],a=e.getAttribute(r);null!==a&&t.attributeChangedCallback(e,r,null,a,null)}n(e)&&t.connectedCallback(e)}}}function d(t){var e=document;this.c=t,this.a=e,this.b=void 0,p(this.c,this.a),"loading"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}))}function m(t){t.b&&t.b.disconnect()}function w(){var t=this;this.b=this.a=void 0,this.c=new Promise(function(e){t.b=e,t.a&&e(t.a)})}function b(t){if(t.a)throw Error("Already resolved.");t.a=void 0,t.b&&t.b(void 0)}function y(t){this.c=!1,this.a=t,this.j=new Map,this.f=function(t){return t()},this.b=!1,this.i=[],this.o=new d(t)}a.prototype.connectedCallback=function(t){var e=t.__CE_definition;e.connectedCallback&&e.connectedCallback.call(t)},a.prototype.disconnectedCallback=function(t){var e=t.__CE_definition;e.disconnectedCallback&&e.disconnectedCallback.call(t)},a.prototype.attributeChangedCallback=function(t,e,n,o,i){var r=t.__CE_definition;r.attributeChangedCallback&&-1<r.observedAttributes.indexOf(e)&&r.attributeChangedCallback.call(t,e,n,o,i)},d.prototype.f=function(t){var e=this.a.readyState;for("interactive"!==e&&"complete"!==e||m(this),e=0;e<t.length;e++)for(var n=t[e].addedNodes,o=0;o<n.length;o++)p(this.c,n[o])},y.prototype.l=function(t,n){var o=this;if(!(n instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!e(t))throw new SyntaxError("The element name '"+t+"' is not valid.");if(this.a.a.get(t))throw Error("A custom element with name '"+t+"' has already been defined.");if(this.c)throw Error("A custom element is already being defined.");this.c=!0;try{var i=function(t){var e=r[t];if(void 0!==e&&!(e instanceof Function))throw Error("The '"+t+"' callback must be a function.");return e},r=n.prototype;if(!(r instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var a=i("connectedCallback"),l=i("disconnectedCallback"),c=i("adoptedCallback"),s=i("attributeChangedCallback"),h=n.observedAttributes||[]}catch(t){return}finally{this.c=!1}n={localName:t,constructorFunction:n,connectedCallback:a,disconnectedCallback:l,adoptedCallback:c,attributeChangedCallback:s,observedAttributes:h,constructionStack:[]},function(t,e,n){t.a.set(e,n),t.f.set(n.constructorFunction,n)}(this.a,t,n),this.i.push(n),this.b||(this.b=!0,this.f(function(){return function(t){if(!1!==t.b){t.b=!1;for(var e=t.i,n=[],o=new Map,i=0;i<e.length;i++)o.set(e[i].localName,[]);for(p(t.a,document,{h:function(e){if(void 0===e.__CE_state){var i=e.localName,r=o.get(i);r?r.push(e):t.a.a.get(i)&&n.push(e)}}}),i=0;i<n.length;i++)f(t.a,n[i]);for(;0<e.length;){var r=e.shift();i=r.localName,r=o.get(r.localName);for(var a=0;a<r.length;a++)f(t.a,r[a]);(i=t.j.get(i))&&b(i)}}}(o)}))},y.prototype.h=function(t){p(this.a,t)},y.prototype.get=function(t){if(t=this.a.a.get(t))return t.constructorFunction},y.prototype.m=function(t){if(!e(t))return Promise.reject(new SyntaxError("'"+t+"' is not a valid custom element name."));var n=this.j.get(t);return n?n.c:(n=new w,this.j.set(t,n),this.a.a.get(t)&&!this.i.some(function(e){return e.localName===t})&&b(n),n.c)},y.prototype.s=function(t){m(this.o);var e=this.f;this.f=function(n){return t(function(){return e(n)})}},window.CustomElementRegistry=y,y.prototype.define=y.prototype.l,y.prototype.upgrade=y.prototype.h,y.prototype.get=y.prototype.get,y.prototype.whenDefined=y.prototype.m,y.prototype.polyfillWrapFlushCallback=y.prototype.s;var g=window.Document.prototype.createElement,v=window.Document.prototype.createElementNS,E=window.Document.prototype.importNode,_=window.Document.prototype.prepend,C=window.Document.prototype.append,N=window.DocumentFragment.prototype.prepend,S=window.DocumentFragment.prototype.append,k=window.Node.prototype.cloneNode,D=window.Node.prototype.appendChild,T=window.Node.prototype.insertBefore,A=window.Node.prototype.removeChild,j=window.Node.prototype.replaceChild,L=Object.getOwnPropertyDescriptor(window.Node.prototype,"textContent"),M=window.Element.prototype.attachShadow,H=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),x=window.Element.prototype.getAttribute,O=window.Element.prototype.setAttribute,F=window.Element.prototype.removeAttribute,R=window.Element.prototype.getAttributeNS,P=window.Element.prototype.setAttributeNS,I=window.Element.prototype.removeAttributeNS,z=window.Element.prototype.insertAdjacentElement,W=window.Element.prototype.insertAdjacentHTML,B=window.Element.prototype.prepend,U=window.Element.prototype.append,V=window.Element.prototype.before,X=window.Element.prototype.after,$=window.Element.prototype.replaceWith,q=window.Element.prototype.remove,G=window.HTMLElement,J=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),K=window.HTMLElement.prototype.insertAdjacentElement,Q=window.HTMLElement.prototype.insertAdjacentHTML,Y=new function(){};function Z(t,e,o){function i(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c)}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a)}}void 0!==o.g&&(e.prepend=i(o.g)),void 0!==o.append&&(e.append=i(o.append))}var tt,et=window.customElements;if(!et||"function"!=typeof et.define||"function"!=typeof et.get){var nt=new a;tt=nt,window.HTMLElement=function(){function t(){var t=this.constructor,e=tt.f.get(t);if(!e)throw Error("The custom element being constructed was not registered with `customElements`.");var n=e.constructionStack;if(0===n.length)return n=g.call(document,e.localName),Object.setPrototypeOf(n,t.prototype),n.__CE_state=1,n.__CE_definition=e,s(tt,n),n;var o=n[e=n.length-1];if(o===Y)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");return n[e]=Y,Object.setPrototypeOf(o,t.prototype),s(tt,o),o}return t.prototype=G.prototype,Object.defineProperty(t.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:t}),t}(),function(){var t=nt;r(Document.prototype,"createElement",function(e){if(this.__CE_hasRegistry){var n=t.a.get(e);if(n)return new n.constructorFunction}return e=g.call(this,e),s(t,e),e}),r(Document.prototype,"importNode",function(e,n){return e=E.call(this,e,!!n),this.__CE_hasRegistry?p(t,e):c(t,e),e}),r(Document.prototype,"createElementNS",function(e,n){if(this.__CE_hasRegistry&&(null===e||"http://www.w3.org/1999/xhtml"===e)){var o=t.a.get(n);if(o)return new o.constructorFunction}return e=v.call(this,e,n),s(t,e),e}),Z(t,Document.prototype,{g:_,append:C})}(),Z(nt,DocumentFragment.prototype,{g:N,append:S}),function(){function t(t,o){Object.defineProperty(t,"textContent",{enumerable:o.enumerable,configurable:!0,get:o.get,set:function(t){if(this.nodeType===Node.TEXT_NODE)o.set.call(this,t);else{var i=void 0;if(this.firstChild){var r=this.childNodes,a=r.length;if(0<a&&n(this)){i=Array(a);for(var l=0;l<a;l++)i[l]=r[l]}}if(o.set.call(this,t),i)for(t=0;t<i.length;t++)u(e,i[t])}}})}var e=nt;r(Node.prototype,"insertBefore",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=T.call(this,t,o),n(this))for(o=0;o<i.length;o++)h(e,i[o]);return t}return i=n(t),o=T.call(this,t,o),i&&u(e,t),n(this)&&h(e,t),o}),r(Node.prototype,"appendChild",function(t){if(t instanceof DocumentFragment){var o=Array.prototype.slice.apply(t.childNodes);if(t=D.call(this,t),n(this))for(var i=0;i<o.length;i++)h(e,o[i]);return t}return o=n(t),i=D.call(this,t),o&&u(e,t),n(this)&&h(e,t),i}),r(Node.prototype,"cloneNode",function(t){return t=k.call(this,!!t),this.ownerDocument.__CE_hasRegistry?p(e,t):c(e,t),t}),r(Node.prototype,"removeChild",function(t){var o=n(t),i=A.call(this,t);return o&&u(e,t),i}),r(Node.prototype,"replaceChild",function(t,o){if(t instanceof DocumentFragment){var i=Array.prototype.slice.apply(t.childNodes);if(t=j.call(this,t,o),n(this))for(u(e,o),o=0;o<i.length;o++)h(e,i[o]);return t}i=n(t);var r=j.call(this,t,o),a=n(this);return a&&u(e,o),i&&u(e,t),a&&h(e,t),r}),L&&L.get?t(Node.prototype,L):l(e,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){for(var t=[],e=0;e<this.childNodes.length;e++)t.push(this.childNodes[e].textContent);return t.join("")},set:function(t){for(;this.firstChild;)A.call(this,this.firstChild);D.call(this,document.createTextNode(t))}})})}(),function(){function t(t,e){Object.defineProperty(t,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(t){var o=this,r=void 0;if(n(this)&&(r=[],i(this,function(t){t!==o&&r.push(t)})),e.set.call(this,t),r)for(var l=0;l<r.length;l++){var s=r[l];1===s.__CE_state&&a.disconnectedCallback(s)}return this.ownerDocument.__CE_hasRegistry?p(a,this):c(a,this),t}})}function e(t,e){r(t,"insertAdjacentElement",function(t,o){var i=n(o);return t=e.call(this,t,o),i&&u(a,o),n(t)&&h(a,o),t})}function o(t,e){function n(t,e){for(var n=[];t!==e;t=t.nextSibling)n.push(t);for(e=0;e<n.length;e++)p(a,n[e])}r(t,"insertAdjacentHTML",function(t,o){if("beforebegin"===(t=t.toLowerCase())){var i=this.previousSibling;e.call(this,t,o),n(i||this.parentNode.firstChild,this)}else if("afterbegin"===t)i=this.firstChild,e.call(this,t,o),n(this.firstChild,i);else if("beforeend"===t)i=this.lastChild,e.call(this,t,o),n(i||this.firstChild,null);else{if("afterend"!==t)throw new SyntaxError("The value provided ("+String(t)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");i=this.nextSibling,e.call(this,t,o),n(this.nextSibling,i)}})}var a=nt;M&&r(Element.prototype,"attachShadow",function(t){return this.__CE_shadowRoot=M.call(this,t)}),H&&H.get?t(Element.prototype,H):J&&J.get?t(HTMLElement.prototype,J):l(a,function(e){t(e,{enumerable:!0,configurable:!0,get:function(){return k.call(this,!0).innerHTML},set:function(t){var e="template"===this.localName,n=e?this.content:this,o=v.call(document,this.namespaceURI,this.localName);for(o.innerHTML=t;0<n.childNodes.length;)A.call(n,n.childNodes[0]);for(t=e?o.content:o;0<t.childNodes.length;)D.call(n,t.childNodes[0])}})}),r(Element.prototype,"setAttribute",function(t,e){if(1!==this.__CE_state)return O.call(this,t,e);var n=x.call(this,t);O.call(this,t,e),e=x.call(this,t),a.attributeChangedCallback(this,t,n,e,null)}),r(Element.prototype,"setAttributeNS",function(t,e,n){if(1!==this.__CE_state)return P.call(this,t,e,n);var o=R.call(this,t,e);P.call(this,t,e,n),n=R.call(this,t,e),a.attributeChangedCallback(this,e,o,n,t)}),r(Element.prototype,"removeAttribute",function(t){if(1!==this.__CE_state)return F.call(this,t);var e=x.call(this,t);F.call(this,t),null!==e&&a.attributeChangedCallback(this,t,e,null,null)}),r(Element.prototype,"removeAttributeNS",function(t,e){if(1!==this.__CE_state)return I.call(this,t,e);var n=R.call(this,t,e);I.call(this,t,e);var o=R.call(this,t,e);n!==o&&a.attributeChangedCallback(this,e,n,o,t)}),K?e(HTMLElement.prototype,K):z?e(Element.prototype,z):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched."),Q?o(HTMLElement.prototype,Q):W?o(Element.prototype,W):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched."),Z(a,Element.prototype,{g:B,append:U}),function(t){function e(e){return function(o){for(var i=[],r=0;r<arguments.length;++r)i[r]=arguments[r];r=[];for(var a=[],l=0;l<i.length;l++){var c=i[l];if(c instanceof Element&&n(c)&&a.push(c),c instanceof DocumentFragment)for(c=c.firstChild;c;c=c.nextSibling)r.push(c);else r.push(c)}for(e.apply(this,i),i=0;i<a.length;i++)u(t,a[i]);if(n(this))for(i=0;i<r.length;i++)(a=r[i])instanceof Element&&h(t,a)}}var o=Element.prototype;void 0!==V&&(o.before=e(V)),void 0!==V&&(o.after=e(X)),void 0!==$&&r(o,"replaceWith",function(e){for(var o=[],i=0;i<arguments.length;++i)o[i]=arguments[i];i=[];for(var r=[],a=0;a<o.length;a++){var l=o[a];if(l instanceof Element&&n(l)&&r.push(l),l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)i.push(l);else i.push(l)}for(a=n(this),$.apply(this,o),o=0;o<r.length;o++)u(t,r[o]);if(a)for(u(t,this),o=0;o<i.length;o++)(r=i[o])instanceof Element&&h(t,r)}),void 0!==q&&r(o,"remove",function(){var e=n(this);q.call(this),e&&u(t,this)})}(a)}(),document.__CE_hasRegistry=!0;var ot=new y(nt);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:ot})}}).call(self);
+
+// Polyfill CustomEvent
+if (typeof window.CustomEvent !== 'function') {
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+}
+
+/*!
+Element.closest and Element.matches
+https://github.com/jonathantneal/closest
+Creative Commons Zero v1.0 Universal
+*/
+(function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return!!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode}return null})})(window.Element.prototype);
+/*!
+Element.getRootNode()
+*/
+(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+/*!
+Element.remove()
+*/
+(function(b){b.forEach(function(a){a.hasOwnProperty("remove")||Object.defineProperty(a,"remove",{configurable:!0,enumerable:!0,writable:!0,value:function(){null!==this.parentNode&&this.parentNode.removeChild(this)}})})})([Element.prototype,CharacterData.prototype,DocumentType.prototype]);
diff --git a/dist/esm/polyfills/es5-html-element.js b/dist/esm/polyfills/es5-html-element.js
new file mode 100644
index 00000000000..dccb82bea92
--- /dev/null
+++ b/dist/esm/polyfills/es5-html-element.js
@@ -0,0 +1,18 @@
+(function() {
+  if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+    window.customElements === undefined
+  ) {
+    return;
+  }
+  const BuiltInHTMLElement = HTMLElement;
+  window.HTMLElement = /** @this {!Object} */ function HTMLElement() {
+    return Reflect.construct(
+        BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
+  };
+  HTMLElement.prototype = BuiltInHTMLElement.prototype;
+  HTMLElement.prototype.constructor = HTMLElement;
+  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
+})();
diff --git a/dist/esm/polyfills/fetch.js b/dist/esm/polyfills/fetch.js
new file mode 100644
index 00000000000..0c66561a168
--- /dev/null
+++ b/dist/esm/polyfills/fetch.js
@@ -0,0 +1,20 @@
+/*!
+whatwg-fetch, 2.0.3
+https://github.com/github/fetch
+Copyright (c) 2014-2016 GitHub, Inc. - MIT License
+*/
+(function(e){function l(a){"string"!==typeof a&&(a=String(a));if(/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(a))throw new TypeError("Invalid character in header field name");return a.toLowerCase()}function q(a){"string"!==typeof a&&(a=String(a));return a}function n(a){var b={next:function(){var b=a.shift();return{done:void 0===b,value:b}}};g.iterable&&(b[Symbol.iterator]=function(){return b});return b}function d(a){this.map={};a instanceof d?a.forEach(function(a,c){this.append(c,a)},this):Array.isArray(a)?
+a.forEach(function(a){this.append(a[0],a[1])},this):a&&Object.getOwnPropertyNames(a).forEach(function(b){this.append(b,a[b])},this)}function p(a){if(a.bodyUsed)return Promise.reject(new TypeError("Already read"));a.bodyUsed=!0}function r(a){return new Promise(function(b,c){a.onload=function(){b(a.result)};a.onerror=function(){c(a.error)}})}function w(a){var b=new FileReader,c=r(b);b.readAsArrayBuffer(a);return c}function x(a){a=new Uint8Array(a);for(var b=Array(a.length),c=0;c<a.length;c++)b[c]=String.fromCharCode(a[c]);
+return b.join("")}function t(a){if(a.slice)return a.slice(0);var b=new Uint8Array(a.byteLength);b.set(new Uint8Array(a));return b.buffer}function u(){this.bodyUsed=!1;this._initBody=function(a){if(this._bodyInit=a)if("string"===typeof a)this._bodyText=a;else if(g.blob&&Blob.prototype.isPrototypeOf(a))this._bodyBlob=a;else if(g.formData&&FormData.prototype.isPrototypeOf(a))this._bodyFormData=a;else if(g.searchParams&&URLSearchParams.prototype.isPrototypeOf(a))this._bodyText=a.toString();else if(g.arrayBuffer&&
+g.blob&&y(a))this._bodyArrayBuffer=t(a.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer]);else if(g.arrayBuffer&&(ArrayBuffer.prototype.isPrototypeOf(a)||z(a)))this._bodyArrayBuffer=t(a);else throw Error("unsupported BodyInit type");else this._bodyText="";this.headers.get("content-type")||("string"===typeof a?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):g.searchParams&&URLSearchParams.prototype.isPrototypeOf(a)&&
+this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))};g.blob&&(this.blob=function(){var a=p(this);if(a)return a;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?p(this)||Promise.resolve(this._bodyArrayBuffer):
+this.blob().then(w)});this.text=function(){var a=p(this);if(a)return a;if(this._bodyBlob){a=this._bodyBlob;var b=new FileReader,c=r(b);b.readAsText(a);return c}if(this._bodyArrayBuffer)return Promise.resolve(x(this._bodyArrayBuffer));if(this._bodyFormData)throw Error("could not read FormData body as text");return Promise.resolve(this._bodyText)};g.formData&&(this.formData=function(){return this.text().then(A)});this.json=function(){return this.text().then(JSON.parse)};return this}function k(a,b){b=
+b||{};var c=b.body;if(a instanceof k){if(a.bodyUsed)throw new TypeError("Already read");this.url=a.url;this.credentials=a.credentials;b.headers||(this.headers=new d(a.headers));this.method=a.method;this.mode=a.mode;c||null==a._bodyInit||(c=a._bodyInit,a.bodyUsed=!0)}else this.url=String(a);this.credentials=b.credentials||this.credentials||"omit";if(b.headers||!this.headers)this.headers=new d(b.headers);var v=b.method||this.method||"GET",g=v.toUpperCase();this.method=-1<B.indexOf(g)?g:v;this.mode=
+b.mode||this.mode||null;this.referrer=null;if(("GET"===this.method||"HEAD"===this.method)&&c)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(c)}function A(a){var b=new FormData;a.trim().split("&").forEach(function(a){if(a){var c=a.split("=");a=c.shift().replace(/\+/g," ");c=c.join("=").replace(/\+/g," ");b.append(decodeURIComponent(a),decodeURIComponent(c))}});return b}function C(a){var b=new d;a.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(a){var c=
+a.split(":");if(a=c.shift().trim())c=c.join(":").trim(),b.append(a,c)});return b}function h(a,b){b||(b={});this.type="default";this.status=void 0===b.status?200:b.status;this.ok=200<=this.status&&300>this.status;this.statusText="statusText"in b?b.statusText:"OK";this.headers=new d(b.headers);this.url=b.url||"";this._initBody(a)}if(!e.fetch){var D="Symbol"in e&&"iterator"in Symbol,m;if(m="FileReader"in e&&"Blob"in e)try{new Blob,m=!0}catch(a){m=!1}var g={searchParams:"URLSearchParams"in e,iterable:D,
+blob:m,formData:"FormData"in e,arrayBuffer:"ArrayBuffer"in e};if(g.arrayBuffer){var E="[object Int8Array];[object Uint8Array];[object Uint8ClampedArray];[object Int16Array];[object Uint16Array];[object Int32Array];[object Uint32Array];[object Float32Array];[object Float64Array]".split(";");var y=function(a){return a&&DataView.prototype.isPrototypeOf(a)};var z=ArrayBuffer.isView||function(a){return a&&-1<E.indexOf(Object.prototype.toString.call(a))}}d.prototype.append=function(a,b){a=l(a);b=q(b);var c=
+this.map[a];this.map[a]=c?c+","+b:b};d.prototype["delete"]=function(a){delete this.map[l(a)]};d.prototype.get=function(a){a=l(a);return this.has(a)?this.map[a]:null};d.prototype.has=function(a){return this.map.hasOwnProperty(l(a))};d.prototype.set=function(a,b){this.map[l(a)]=q(b)};d.prototype.forEach=function(a,b){for(var c in this.map)this.map.hasOwnProperty(c)&&a.call(b,this.map[c],c,this)};d.prototype.keys=function(){var a=[];this.forEach(function(b,c){a.push(c)});return n(a)};d.prototype.values=
+function(){var a=[];this.forEach(function(b){a.push(b)});return n(a)};d.prototype.entries=function(){var a=[];this.forEach(function(b,c){a.push([c,b])});return n(a)};g.iterable&&(d.prototype[Symbol.iterator]=d.prototype.entries);var B="DELETE GET HEAD OPTIONS POST PUT".split(" ");k.prototype.clone=function(){return new k(this,{body:this._bodyInit})};u.call(k.prototype);u.call(h.prototype);h.prototype.clone=function(){return new h(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new d(this.headers),
+url:this.url})};h.error=function(){var a=new h(null,{status:0,statusText:""});a.type="error";return a};var F=[301,302,303,307,308];h.redirect=function(a,b){if(-1===F.indexOf(b))throw new RangeError("Invalid status code");return new h(null,{status:b,headers:{location:a}})};e.Headers=d;e.Request=k;e.Response=h;e.fetch=function(a,b){return new Promise(function(c,d){var e=new k(a,b),f=new XMLHttpRequest;f.onload=function(){var a={status:f.status,statusText:f.statusText,headers:C(f.getAllResponseHeaders()||
+"")};a.url="responseURL"in f?f.responseURL:a.headers.get("X-Request-URL");c(new h("response"in f?f.response:f.responseText,a))};f.onerror=function(){d(new TypeError("Network request failed"))};f.ontimeout=function(){d(new TypeError("Network request failed"))};f.open(e.method,e.url,!0);"include"===e.credentials?f.withCredentials=!0:"omit"===e.credentials&&(f.withCredentials=!1);"responseType"in f&&g.blob&&(f.responseType="blob");e.headers.forEach(function(a,b){f.setRequestHeader(b,a)});f.send("undefined"===
+typeof e._bodyInit?null:e._bodyInit)})};e.fetch.polyfill=!0}})("undefined"!==typeof self?self:window);
\ No newline at end of file
diff --git a/dist/esm/polyfills/index.js b/dist/esm/polyfills/index.js
new file mode 100644
index 00000000000..2e82ac7cd7a
--- /dev/null
+++ b/dist/esm/polyfills/index.js
@@ -0,0 +1,52 @@
+export function applyPolyfills() {
+  var win = window;
+  /*!
+  es6-promise - a tiny implementation of Promises/A+.
+  Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+  Licensed under MIT license
+  See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+  v4.2.4+314e4831
+  */
+  (win.ES6Promise=function(){function t(){var t=setTimeout;return function(){return t(r,1)}}function r(){for(var t=0;t<y;t+=2)(0,C[t])(C[t+1]),C[t]=void 0,C[t+1]=void 0;y=0}function e(t,r){var e=this,n=new this.constructor(o);void 0===n[O]&&_(n);var i=e._state;if(i){var s=arguments[i-1];g(function(){return v(i,n,s,e._result)})}else l(e,n,t,r);return n}function n(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var r=new this(o);return u(r,t),r}function o(){}function i(t){try{return t.then}catch(t){return q.error=t,q}}function s(t,r,o){r.constructor===t.constructor&&o===e&&r.constructor.resolve===n?function(t,r){r._state===x?a(t,r._result):r._state===F?f(t,r._result):l(r,void 0,function(r){return u(t,r)},function(r){return f(t,r)})}(t,r):o===q?(f(t,q.error),q.error=null):void 0===o?a(t,r):"function"==typeof o?function(t,r,e){g(function(t){var n=!1,o=function(t,r,e,n){try{t.call(r,e,n)}catch(t){return t}}(e,r,function(e){n||(n=!0,r!==e?u(t,e):a(t,e))},function(r){n||(n=!0,f(t,r))},t._label);!n&&o&&(n=!0,f(t,o))},t)}(t,r,o):a(t,r)}function u(t,r){if(t===r)f(t,new TypeError("cannot resolve promise w/ itself"));else{var e=typeof r;null===r||"object"!==e&&"function"!==e?a(t,r):s(t,r,i(r))}}function c(t){t._onerror&&t._onerror(t._result),h(t)}function a(t,r){t._state===P&&(t._result=r,t._state=x,0!==t._subscribers.length&&g(h,t))}function f(t,r){t._state===P&&(t._state=F,t._result=r,g(c,t))}function l(t,r,e,n){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=r,o[i+x]=e,o[i+F]=n,0===i&&t._state&&g(h,t)}function h(t){var r=t._subscribers,e=t._state;if(0!==r.length){for(var n,o,i=t._result,s=0;s<r.length;s+=3)n=r[s],o=r[s+e],n?v(e,n,o,i):o(i);t._subscribers.length=0}}function v(t,r,e,n){var o="function"==typeof e,i=void 0,s=void 0,c=void 0,l=void 0;if(o){try{i=e(n)}catch(t){q.error=t,i=q}if(i===q?(l=!0,s=i.error,i.error=null):c=!0,r===i)return void f(r,new TypeError("Cannot return same promise"))}else i=n,c=!0;r._state===P&&(o&&c?u(r,i):l?f(r,s):t===x?a(r,i):t===F&&f(r,i))}function _(t){t[O]=U++,t._state=void 0,t._result=void 0,t._subscribers=[]}var p,d=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},y=0,w=void 0,m=void 0,g=function(t,e){C[y]=t,C[y+1]=e,2===(y+=2)&&(m?m(r):T())},b=(p="undefined"!=typeof window?window:void 0)||{},A=b.MutationObserver||b.WebKitMutationObserver;b="undefined"==typeof self;var E,S,M,j="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,C=Array(1e3),T=void 0;T=A?(E=0,S=new A(r),M=document.createTextNode(""),S.observe(M,{characterData:!0}),function(){M.data=E=++E%2}):j?function(){var t=new MessageChannel;return t.port1.onmessage=r,function(){return t.port2.postMessage(0)}}():void 0===p&&"function"==typeof require?function(){try{var e=Function("return this")().require("vertx");return void 0!==(w=e.runOnLoop||e.runOnContext)?function(){w(r)}:t()}catch(r){return t()}}():t();var O=Math.random().toString(36).substring(2),P=void 0,x=1,F=2,q={error:null},U=0,D=function(){function t(t,r){this._instanceConstructor=t,this.promise=new t(o),this.promise[O]||_(this.promise),d(r)?(this._remaining=this.length=r.length,this._result=Array(this.length),0===this.length?a(this.promise,this._result):(this.length=this.length||0,this._enumerate(r),0===this._remaining&&a(this.promise,this._result))):f(this.promise,Error("Array Methods must be provided an Array"))}return t.prototype._enumerate=function(t){for(var r=0;this._state===P&&r<t.length;r++)this._eachEntry(t[r],r)},t.prototype._eachEntry=function(t,r){var u=this._instanceConstructor,c=u.resolve;c===n?(c=i(t))===e&&t._state!==P?this._settledAt(t._state,r,t._result):"function"!=typeof c?(this._remaining--,this._result[r]=t):u===K?(s(u=new u(o),t,c),this._willSettleAt(u,r)):this._willSettleAt(new u(function(r){return r(t)}),r):this._willSettleAt(c(t),r)},t.prototype._settledAt=function(t,r,e){var n=this.promise;n._state===P&&(this._remaining--,t===F?f(n,e):this._result[r]=e),0===this._remaining&&a(n,this._result)},t.prototype._willSettleAt=function(t,r){var e=this;l(t,void 0,function(t){return e._settledAt(x,r,t)},function(t){return e._settledAt(F,r,t)})},t}(),K=function(){function t(r){if(this[O]=U++,this._result=this._state=void 0,this._subscribers=[],o!==r){if("function"!=typeof r)throw new TypeError("Must pass a resolver fn as 1st arg");if(!(this instanceof t))throw new TypeError("Failed to construct 'Promise': Use the 'new' operator.");!function(t,r){try{r(function(r){u(t,r)},function(r){f(t,r)})}catch(r){f(t,r)}}(this,r)}}return t.prototype.catch=function(t){return this.then(null,t)},t.prototype.finally=function(t){var r=this.constructor;return this.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})})},t}();return K.prototype.then=e,K.all=function(t){return new D(this,t).promise},K.race=function(t){var r=this;return d(t)?new r(function(e,n){for(var o=t.length,i=0;i<o;i++)r.resolve(t[i]).then(e,n)}):new r(function(t,r){return r(new TypeError("Must pass array to race"))})},K.resolve=n,K.reject=function(t){var r=new this(o);return f(r,t),r},K._setScheduler=function(t){m=t},K._setAsap=function(t){g=t},K._asap=g,K.polyfill=function(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(t){throw Error("polyfill failed")}var r=t.Promise;if(r){var e=null;try{e=Object.prototype.toString.call(r.resolve())}catch(t){}if("[object Promise]"===e&&!r.cast)return}t.Promise=K},K.Promise=K,K.polyfill(),K}());
+
+  var promises = [];
+
+  if (!win.customElements || (win.Element && (!win.Element.prototype.closest || !win.Element.prototype.matches || !win.Element.prototype.remove))) {
+    promises.push(import('./dom.js'));
+  }
+
+  if ('function' !== typeof Object.assign || !Object.entries) {
+    promises.push(import('./object.js'));
+  }
+
+  if (!Array.prototype.find || !Array.prototype.includes) {
+    promises.push(import('./array.js'));
+  }
+
+  if (!String.prototype.startsWith || !String.prototype.endsWith) {
+    promises.push(import('./string.js'));
+  }
+
+  if (!win.fetch) {
+    promises.push(import('./fetch.js'));
+  }
+
+  if (typeof WeakMap == 'undefined' || !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
+    promises.push(import('./css-shim.js'));
+  }
+
+  function checkIfURLIsSupported() {
+    try {
+      var u = new URL('b', 'http://a');
+      u.pathname = 'c%20d';
+      return (u.href === 'http://a/c%20d') && u.searchParams;
+    } catch(e) {
+      return false;
+    }
+  }
+  if (!checkIfURLIsSupported()) {
+    promises.push(import('./url.js'));
+  }
+
+  return Promise.all(promises);
+}
diff --git a/dist/esm/polyfills/map.js b/dist/esm/polyfills/map.js
new file mode 100644
index 00000000000..32b2fde1fc4
--- /dev/null
+++ b/dist/esm/polyfills/map.js
@@ -0,0 +1,7 @@
+/*! https://github.com/WebReflection/es6-collections
+(C) Andrea Giammarchi - @WebReflection - Mit Style License */
+(function(e){function d(a,b){function c(a){if(!this||this.constructor!==c)return new c(a);this._keys=[];this._values=[];this._itp=[];this.objectOnly=b;a&&v.call(this,a)}b||w(a,"size",{get:x});a.constructor=c;c.prototype=a;return c}function v(a){this.add?a.forEach(this.add,this):a.forEach(function(a){this.set(a[0],a[1])},this)}function f(a){this.has(a)&&(this._keys.splice(c,1),this._values.splice(c,1),this._itp.forEach(function(a){c<a[0]&&a[0]--}));return-1<c}function m(a){return this.has(a)?this._values[c]:
+  void 0}function n(a,b){if(this.objectOnly&&b!==Object(b))throw new TypeError("Invalid value used as weak collection key");if(b!=b||0===b)for(c=a.length;c--&&!y(a[c],b););else c=a.indexOf(b);return-1<c}function p(a){return n.call(this,this._values,a)}function q(a){return n.call(this,this._keys,a)}function r(a,b){this.has(a)?this._values[c]=b:this._values[this._keys.push(a)-1]=b;return this}function t(a){this.has(a)||this._values.push(a);return this}function h(){(this._keys||0).length=this._values.length=
+  0}function z(){return k(this._itp,this._keys)}function l(){return k(this._itp,this._values)}function A(){return k(this._itp,this._keys,this._values)}function B(){return k(this._itp,this._values,this._values)}function k(a,b,c){var g=[0],e=!1;a.push(g);return{next:function(){var d=g[0];if(!e&&d<b.length){var f=c?[b[d],c[d]]:b[d];g[0]++}else e=!0,a.splice(a.indexOf(g),1);return{done:e,value:f}}}}function x(){return this._values.length}function u(a,b){for(var c=this.entries();;){var d=c.next();if(d.done)break;
+  a.call(b,d.value[1],d.value[0],this)}}var c,w=Object.defineProperty,y=function(a,b){return a===b||a!==a&&b!==b};"undefined"==typeof WeakMap&&(e.WeakMap=d({"delete":f,clear:h,get:m,has:q,set:r},!0));"undefined"!=typeof Map&&"function"===typeof(new Map).values&&(new Map).values().next||(e.Map=d({"delete":f,has:q,get:m,set:r,keys:z,values:l,entries:A,forEach:u,clear:h}));"undefined"!=typeof Set&&"function"===typeof(new Set).values&&(new Set).values().next||(e.Set=d({has:p,add:t,"delete":f,clear:h,keys:l,
+  values:l,entries:B,forEach:u}));"undefined"==typeof WeakSet&&(e.WeakSet=d({"delete":f,add:t,clear:h,has:p},!0))})(window);
\ No newline at end of file
diff --git a/dist/esm/polyfills/object.js b/dist/esm/polyfills/object.js
new file mode 100644
index 00000000000..e2da2dc2788
--- /dev/null
+++ b/dist/esm/polyfills/object.js
@@ -0,0 +1,19 @@
+/*!
+Object.assign
+*/
+"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(d,f){if(null==d)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(d),b=1;b<arguments.length;b++){var a=arguments[b];if(null!=a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&(e[c]=a[c])}return e},writable:!0,configurable:!0});
+/*!
+Object.entries
+*/
+Object.entries||(Object.entries=function(c){for(var b=Object.keys(c),a=b.length,d=Array(a);a--;)d[a]=[b[a],c[b[a]]];return d});
+/*!
+Object.values
+*/
+Object.values||(Object.values=function(n){return Object.keys(n).map(function(r){return n[r]})});
+
+/*!
+Number
+*/
+void 0===Number.isFinite&&(Number.isFinite=function(a){return"number"===typeof a&&isFinite(a)});
+Number.isNaN=Number.isNaN||function(a){return a!==a};
+Number.isInteger=Number.isInteger||function(a){return"number"===typeof a&&isFinite(a)&&Math.floor(a)===a};
diff --git a/dist/esm/polyfills/promise.js b/dist/esm/polyfills/promise.js
new file mode 100644
index 00000000000..8ab42794287
--- /dev/null
+++ b/dist/esm/polyfills/promise.js
@@ -0,0 +1,8 @@
+/*!
+es6-promise - a tiny implementation of Promises/A+.
+Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+Licensed under MIT license
+See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+v4.2.4+314e4831
+*/
+(window.ES6Promise=function(){function t(){var t=setTimeout;return function(){return t(r,1)}}function r(){for(var t=0;t<y;t+=2)(0,C[t])(C[t+1]),C[t]=void 0,C[t+1]=void 0;y=0}function e(t,r){var e=this,n=new this.constructor(o);void 0===n[O]&&_(n);var i=e._state;if(i){var s=arguments[i-1];g(function(){return v(i,n,s,e._result)})}else l(e,n,t,r);return n}function n(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var r=new this(o);return u(r,t),r}function o(){}function i(t){try{return t.then}catch(t){return q.error=t,q}}function s(t,r,o){r.constructor===t.constructor&&o===e&&r.constructor.resolve===n?function(t,r){r._state===x?a(t,r._result):r._state===F?f(t,r._result):l(r,void 0,function(r){return u(t,r)},function(r){return f(t,r)})}(t,r):o===q?(f(t,q.error),q.error=null):void 0===o?a(t,r):"function"==typeof o?function(t,r,e){g(function(t){var n=!1,o=function(t,r,e,n){try{t.call(r,e,n)}catch(t){return t}}(e,r,function(e){n||(n=!0,r!==e?u(t,e):a(t,e))},function(r){n||(n=!0,f(t,r))},t._label);!n&&o&&(n=!0,f(t,o))},t)}(t,r,o):a(t,r)}function u(t,r){if(t===r)f(t,new TypeError("cannot resolve promise w/ itself"));else{var e=typeof r;null===r||"object"!==e&&"function"!==e?a(t,r):s(t,r,i(r))}}function c(t){t._onerror&&t._onerror(t._result),h(t)}function a(t,r){t._state===P&&(t._result=r,t._state=x,0!==t._subscribers.length&&g(h,t))}function f(t,r){t._state===P&&(t._state=F,t._result=r,g(c,t))}function l(t,r,e,n){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=r,o[i+x]=e,o[i+F]=n,0===i&&t._state&&g(h,t)}function h(t){var r=t._subscribers,e=t._state;if(0!==r.length){for(var n,o,i=t._result,s=0;s<r.length;s+=3)n=r[s],o=r[s+e],n?v(e,n,o,i):o(i);t._subscribers.length=0}}function v(t,r,e,n){var o="function"==typeof e,i=void 0,s=void 0,c=void 0,l=void 0;if(o){try{i=e(n)}catch(t){q.error=t,i=q}if(i===q?(l=!0,s=i.error,i.error=null):c=!0,r===i)return void f(r,new TypeError("Cannot return same promise"))}else i=n,c=!0;r._state===P&&(o&&c?u(r,i):l?f(r,s):t===x?a(r,i):t===F&&f(r,i))}function _(t){t[O]=U++,t._state=void 0,t._result=void 0,t._subscribers=[]}var p,d=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},y=0,w=void 0,m=void 0,g=function(t,e){C[y]=t,C[y+1]=e,2===(y+=2)&&(m?m(r):T())},b=(p="undefined"!=typeof window?window:void 0)||{},A=b.MutationObserver||b.WebKitMutationObserver;b="undefined"==typeof self;var E,S,M,j="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,C=Array(1e3),T=void 0;T=A?(E=0,S=new A(r),M=document.createTextNode(""),S.observe(M,{characterData:!0}),function(){M.data=E=++E%2}):j?function(){var t=new MessageChannel;return t.port1.onmessage=r,function(){return t.port2.postMessage(0)}}():void 0===p&&"function"==typeof require?function(){try{var e=Function("return this")().require("vertx");return void 0!==(w=e.runOnLoop||e.runOnContext)?function(){w(r)}:t()}catch(r){return t()}}():t();var O=Math.random().toString(36).substring(2),P=void 0,x=1,F=2,q={error:null},U=0,D=function(){function t(t,r){this._instanceConstructor=t,this.promise=new t(o),this.promise[O]||_(this.promise),d(r)?(this._remaining=this.length=r.length,this._result=Array(this.length),0===this.length?a(this.promise,this._result):(this.length=this.length||0,this._enumerate(r),0===this._remaining&&a(this.promise,this._result))):f(this.promise,Error("Array Methods must be provided an Array"))}return t.prototype._enumerate=function(t){for(var r=0;this._state===P&&r<t.length;r++)this._eachEntry(t[r],r)},t.prototype._eachEntry=function(t,r){var u=this._instanceConstructor,c=u.resolve;c===n?(c=i(t))===e&&t._state!==P?this._settledAt(t._state,r,t._result):"function"!=typeof c?(this._remaining--,this._result[r]=t):u===K?(s(u=new u(o),t,c),this._willSettleAt(u,r)):this._willSettleAt(new u(function(r){return r(t)}),r):this._willSettleAt(c(t),r)},t.prototype._settledAt=function(t,r,e){var n=this.promise;n._state===P&&(this._remaining--,t===F?f(n,e):this._result[r]=e),0===this._remaining&&a(n,this._result)},t.prototype._willSettleAt=function(t,r){var e=this;l(t,void 0,function(t){return e._settledAt(x,r,t)},function(t){return e._settledAt(F,r,t)})},t}(),K=function(){function t(r){if(this[O]=U++,this._result=this._state=void 0,this._subscribers=[],o!==r){if("function"!=typeof r)throw new TypeError("Must pass a resolver fn as 1st arg");if(!(this instanceof t))throw new TypeError("Failed to construct 'Promise': Use the 'new' operator.");!function(t,r){try{r(function(r){u(t,r)},function(r){f(t,r)})}catch(r){f(t,r)}}(this,r)}}return t.prototype.catch=function(t){return this.then(null,t)},t.prototype.finally=function(t){var r=this.constructor;return this.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})})},t}();return K.prototype.then=e,K.all=function(t){return new D(this,t).promise},K.race=function(t){var r=this;return d(t)?new r(function(e,n){for(var o=t.length,i=0;i<o;i++)r.resolve(t[i]).then(e,n)}):new r(function(t,r){return r(new TypeError("Must pass array to race"))})},K.resolve=n,K.reject=function(t){var r=new this(o);return f(r,t),r},K._setScheduler=function(t){m=t},K._setAsap=function(t){g=t},K._asap=g,K.polyfill=function(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(t){throw Error("polyfill failed")}var r=t.Promise;if(r){var e=null;try{e=Object.prototype.toString.call(r.resolve())}catch(t){}if("[object Promise]"===e&&!r.cast)return}t.Promise=K},K.Promise=K,K.polyfill(),K}());
\ No newline at end of file
diff --git a/dist/esm/polyfills/string.js b/dist/esm/polyfills/string.js
new file mode 100644
index 00000000000..3370e183871
--- /dev/null
+++ b/dist/esm/polyfills/string.js
@@ -0,0 +1,12 @@
+/*!
+String.prototype.endsWith
+*/
+String.prototype.endsWith||Object.defineProperty(String.prototype,"endsWith",{writable:!0,configurable:!0,value:function(b,a){if(void 0===a||a>this.length)a=this.length;return this.substring(a-b.length,a)===b}});
+/*!
+String.prototype.includes
+*/
+String.prototype.includes||(String.prototype.includes=function(b,a){"number"!==typeof a&&(a=0);return a+b.length>this.length?!1:-1!==this.indexOf(b,a)});
+/*!
+String.prototype.startsWith
+*/
+String.prototype.startsWith||Object.defineProperty(String.prototype,"startsWith",{writable:!0,configurable:!0,value:function(b,a){return this.substr(!a||0>a?0:+a,b.length)===b}});
\ No newline at end of file
diff --git a/dist/esm/polyfills/system.js b/dist/esm/polyfills/system.js
new file mode 100644
index 00000000000..3650a048f38
--- /dev/null
+++ b/dist/esm/polyfills/system.js
@@ -0,0 +1,4 @@
+/*
+* SystemJS 3.1.3
+*/
+!function(){const e="undefined"!=typeof self,n=e?self:global;let t;if("undefined"!=typeof location){const e=(t=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==e&&(t=t.slice(0,e+1))}const r=/\\/g,i="undefined"!=typeof Symbol,o=i&&Symbol.toStringTag,c=i?Symbol():"@";function l(){this[c]={}}const s=l.prototype;let u;s.import=function(e,n){const t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){const n=function e(n,t,r){let i=n[c][t];if(i)return i;const l=[],s=Object.create(null);o&&Object.defineProperty(s,o,{value:"Module"});let u=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw new Error("Module "+t+" did not instantiate");const r=e[1](function(e,n){i.h=!0;let t=!1;if("object"!=typeof e)e in s&&s[e]===n||(s[e]=n,t=!0);else for(let n in e){let r=e[n];n in s&&s[n]===r||(s[n]=r,t=!0)}if(t)for(let e=0;e<l.length;e++)l[e](s);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return i.e=r.execute||function(){},[e[0],r.setters||[]]});const f=u.then(function(r){return Promise.all(r[0].map(function(i,o){const c=r[1][o];return Promise.resolve(n.resolve(i,t)).then(function(r){const i=e(n,r,t);return Promise.resolve(i.I).then(function(){return c&&(i.i.push(c),!i.h&&i.I||c(i.n)),i})})})).then(function(e){i.d=e})});return f.catch(function(e){i.e=null,i.er=e}),i=n[c][t]={id:t,i:l,n:s,I:u,L:f,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(r[t.id])return;if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}let i;return t.d.forEach(function(t){{const o=e(n,t,r);o&&(i=i||[]).push(o)}}),i?Promise.all(i).then(o):o();function o(){try{let e=t.e.call(f);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){u=[e,n]},s.getRegister=function(){const e=u;return u=void 0,e};const f=Object.freeze(Object.create(null));let d;n.System=new l,"undefined"!=typeof window&&window.addEventListener("error",function(e){d=e.error});const h=s.register;s.register=function(e,n){d=void 0,h.call(this,e,n)},s.instantiate=function(e,n){const t=this;return new Promise(function(r,i){const o=document.createElement("script");o.charset="utf-8",o.async=!0,o.crossOrigin="anonymous",o.addEventListener("error",function(){i(new Error("Error loading "+e+(n?" from "+n:"")))}),o.addEventListener("load",function(){if(document.head.removeChild(o),d)return i(d),d=void 0;r(t.getRegister())}),o.src=e,document.head.appendChild(o)})},e&&"function"==typeof importScripts&&(s.instantiate=function(e){const n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(e,n){const i=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(r,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){const t=n.slice(0,n.indexOf(":")+1);let r;if(r="/"===n[t.length+1]?"file:"!==t?(r=n.slice(t.length+2)).slice(r.indexOf("/")+1):n.slice(8):n.slice(t.length+("/"===n[t.length])),"/"===e[0])return n.slice(0,n.length-r.length-1)+e;const i=r.slice(0,r.lastIndexOf("/")+1)+e,o=[];let c=-1;for(let e=0;e<i.length;e++)-1!==c?"/"===i[e]&&(o.push(i.slice(c,e+1)),c=-1):"."===i[e]?"."!==i[e+1]||"/"!==i[e+2]&&e+2!==i.length?"/"===i[e+1]||e+1===i.length?e+=1:c=e:(o.pop(),e+=2):c=e;return-1!==c&&o.push(i.slice(c)),n.slice(0,n.length-r.length)+o.join("")}}(e,n||t);if(!i){if(-1!==e.indexOf(":"))return Promise.resolve(e);throw new Error('Cannot resolve "'+e+(n?'" from '+n:'"'))}return Promise.resolve(i)}}();
diff --git a/dist/esm/polyfills/url.js b/dist/esm/polyfills/url.js
new file mode 100644
index 00000000000..1a9373236e4
--- /dev/null
+++ b/dist/esm/polyfills/url.js
@@ -0,0 +1,6 @@
+/*!
+url-polyfill, 1.1.5
+https://github.com/lifaon74/url-polyfill
+MIT Licensed
+*/
+(function(t){var e=function(){try{return!!Symbol.iterator}catch(e){return false}};var r=e();var n=function(t){var e={next:function(){var e=t.shift();return{done:e===void 0,value:e}}};if(r){e[Symbol.iterator]=function(){return e}}return e};var i=function(e){return encodeURIComponent(e).replace(/%20/g,"+")};var o=function(e){return decodeURIComponent(String(e).replace(/\+/g," "))};var a=function(){var a=function(e){Object.defineProperty(this,"_entries",{writable:true,value:{}});var t=typeof e;if(t==="undefined"){}else if(t==="string"){if(e!==""){this._fromString(e)}}else if(e instanceof a){var r=this;e.forEach(function(e,t){r.append(t,e)})}else if(e!==null&&t==="object"){if(Object.prototype.toString.call(e)==="[object Array]"){for(var n=0;n<e.length;n++){var i=e[n];if(Object.prototype.toString.call(i)==="[object Array]"||i.length!==2){this.append(i[0],i[1])}else{throw new TypeError("Expected [string, any] as entry at index "+n+" of URLSearchParams's input")}}}else{for(var o in e){if(e.hasOwnProperty(o)){this.append(o,e[o])}}}}else{throw new TypeError("Unsupported input's type for URLSearchParams")}};var e=a.prototype;e.append=function(e,t){if(e in this._entries){this._entries[e].push(String(t))}else{this._entries[e]=[String(t)]}};e.delete=function(e){delete this._entries[e]};e.get=function(e){return e in this._entries?this._entries[e][0]:null};e.getAll=function(e){return e in this._entries?this._entries[e].slice(0):[]};e.has=function(e){return e in this._entries};e.set=function(e,t){this._entries[e]=[String(t)]};e.forEach=function(e,t){var r;for(var n in this._entries){if(this._entries.hasOwnProperty(n)){r=this._entries[n];for(var i=0;i<r.length;i++){e.call(t,r[i],n,this)}}}};e.keys=function(){var r=[];this.forEach(function(e,t){r.push(t)});return n(r)};e.values=function(){var t=[];this.forEach(function(e){t.push(e)});return n(t)};e.entries=function(){var r=[];this.forEach(function(e,t){r.push([t,e])});return n(r)};if(r){e[Symbol.iterator]=e.entries}e.toString=function(){var r=[];this.forEach(function(e,t){r.push(i(t)+"="+i(e))});return r.join("&")};t.URLSearchParams=a};if(!("URLSearchParams"in t)||new t.URLSearchParams("?a=1").toString()!=="a=1"){a()}var s=t.URLSearchParams.prototype;if(typeof s.sort!=="function"){s.sort=function(){var r=this;var n=[];this.forEach(function(e,t){n.push([t,e]);if(!r._entries){r.delete(t)}});n.sort(function(e,t){if(e[0]<t[0]){return-1}else if(e[0]>t[0]){return+1}else{return 0}});if(r._entries){r._entries={}}for(var e=0;e<n.length;e++){this.append(n[e][0],n[e][1])}}}if(typeof s._fromString!=="function"){Object.defineProperty(s,"_fromString",{enumerable:false,configurable:false,writable:false,value:function(e){if(this._entries){this._entries={}}else{var r=[];this.forEach(function(e,t){r.push(t)});for(var t=0;t<r.length;t++){this.delete(r[t])}}e=e.replace(/^\?/,"");var n=e.split("&");var i;for(var t=0;t<n.length;t++){i=n[t].split("=");this.append(o(i[0]),i.length>1?o(i[1]):"")}}})}})(typeof global!=="undefined"?global:typeof window!=="undefined"?window:typeof self!=="undefined"?self:this);(function(h){var e=function(){try{var e=new h.URL("b","http://a");e.pathname="c%20d";return e.href==="http://a/c%20d"&&e.searchParams}catch(e){return false}};var t=function(){var t=h.URL;var e=function(e,t){if(typeof e!=="string")e=String(e);var r=document,n;if(t&&(h.location===void 0||t!==h.location.href)){r=document.implementation.createHTMLDocument("");n=r.createElement("base");n.href=t;r.head.appendChild(n);try{if(n.href.indexOf(t)!==0)throw new Error(n.href)}catch(e){throw new Error("URL unable to set base "+t+" due to "+e)}}var i=r.createElement("a");i.href=e;if(n){r.body.appendChild(i);i.href=i.href}if(i.protocol===":"||!/:/.test(i.href)){throw new TypeError("Invalid URL")}Object.defineProperty(this,"_anchorElement",{value:i});var o=new h.URLSearchParams(this.search);var a=true;var s=true;var c=this;["append","delete","set"].forEach(function(e){var t=o[e];o[e]=function(){t.apply(o,arguments);if(a){s=false;c.search=o.toString();s=true}}});Object.defineProperty(this,"searchParams",{value:o,enumerable:true});var f=void 0;Object.defineProperty(this,"_updateSearchParams",{enumerable:false,configurable:false,writable:false,value:function(){if(this.search!==f){f=this.search;if(s){a=false;this.searchParams._fromString(this.search);a=true}}}})};var r=e.prototype;var n=function(t){Object.defineProperty(r,t,{get:function(){return this._anchorElement[t]},set:function(e){this._anchorElement[t]=e},enumerable:true})};["hash","host","hostname","port","protocol"].forEach(function(e){n(e)});Object.defineProperty(r,"search",{get:function(){return this._anchorElement["search"]},set:function(e){this._anchorElement["search"]=e;this._updateSearchParams()},enumerable:true});Object.defineProperties(r,{toString:{get:function(){var e=this;return function(){return e.href}}},href:{get:function(){return this._anchorElement.href.replace(/\?$/,"")},set:function(e){this._anchorElement.href=e;this._updateSearchParams()},enumerable:true},pathname:{get:function(){return this._anchorElement.pathname.replace(/(^\/?)/,"/")},set:function(e){this._anchorElement.pathname=e},enumerable:true},origin:{get:function(){var e={"http:":80,"https:":443,"ftp:":21}[this._anchorElement.protocol];var t=this._anchorElement.port!=e&&this._anchorElement.port!=="";return this._anchorElement.protocol+"//"+this._anchorElement.hostname+(t?":"+this._anchorElement.port:"")},enumerable:true},password:{get:function(){return""},set:function(e){},enumerable:true},username:{get:function(){return""},set:function(e){},enumerable:true}});e.createObjectURL=function(e){return t.createObjectURL.apply(t,arguments)};e.revokeObjectURL=function(e){return t.revokeObjectURL.apply(t,arguments)};h.URL=e};if(!e()){t()}if(h.location!==void 0&&!("origin"in h.location)){var r=function(){return h.location.protocol+"//"+h.location.hostname+(h.location.port?":"+h.location.port:"")};try{Object.defineProperty(h.location,"origin",{get:r,enumerable:true})}catch(e){setInterval(function(){h.location.origin=r()},100)}}})(typeof global!=="undefined"?global:typeof window!=="undefined"?window:typeof self!=="undefined"?self:this);
diff --git a/dist/esm/shadow-css-984bac74-549b16dd.js b/dist/esm/shadow-css-984bac74-549b16dd.js
new file mode 100644
index 00000000000..e99600c3b3b
--- /dev/null
+++ b/dist/esm/shadow-css-984bac74-549b16dd.js
@@ -0,0 +1,401 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+function scopeCss(cssText, scopeId, commentOriginalSelector) {
+    const sc = new ShadowCss();
+    return sc.shimCssText(cssText, scopeId, scopeId + '-h', scopeId + '-s', commentOriginalSelector);
+}
+class ShadowCss {
+    constructor() {
+        this.strictStyling = true;
+    }
+    shimCssText(cssText, scopeId, hostScopeId = '', slotScopeId = '', commentOriginalSelector = false) {
+        const commentsWithHash = extractCommentsWithHash(cssText);
+        cssText = stripComments(cssText);
+        const orgSelectors = [];
+        if (commentOriginalSelector) {
+            const processCommentedSelector = (rule) => {
+                const placeholder = `/*!@___${orgSelectors.length}___*/`;
+                const comment = `/*!@${rule.selector}*/`;
+                orgSelectors.push({ placeholder, comment });
+                rule.selector = placeholder + rule.selector;
+                return rule;
+            };
+            cssText = processRules(cssText, rule => {
+                if (rule.selector[0] !== '@') {
+                    return processCommentedSelector(rule);
+                }
+                else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                    rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                    rule.content = processRules(rule.content, processCommentedSelector);
+                    return rule;
+                }
+                return rule;
+            });
+        }
+        const scopedCssText = this._scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        cssText = [scopedCssText, ...commentsWithHash].join('\n');
+        if (commentOriginalSelector) {
+            orgSelectors.forEach(({ placeholder, comment }) => {
+                cssText = cssText.replace(placeholder, comment);
+            });
+        }
+        return cssText;
+    }
+    _scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) {
+        // replace :host and :host-context -shadowcsshost and -shadowcsshost respectively
+        cssText = this._insertPolyfillHostInCssText(cssText);
+        cssText = this._convertColonHost(cssText);
+        cssText = this._convertColonHostContext(cssText);
+        cssText = this._convertColonSlotted(cssText, slotScopeId);
+        cssText = this._convertShadowDOMSelectors(cssText);
+        if (scopeId) {
+            cssText = this._scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+        }
+        cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+        cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
+        return cssText.trim();
+    }
+    /*
+     * convert a rule like :host(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar
+    */
+    _convertColonHost(cssText) {
+        return this._convertColonRule(cssText, _cssColonHostRe, this._colonHostPartReplacer);
+    }
+    /*
+   * convert a rule like ::slotted(.foo) { }
+  */
+    _convertColonSlotted(cssText, slotAttr) {
+        const regExp = _cssColonSlottedRe;
+        return cssText.replace(regExp, function (...m) {
+            if (m[2]) {
+                const compound = m[2].trim();
+                const suffix = m[3];
+                const sel = '.' + slotAttr + ' > ' + compound + suffix;
+                return sel;
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    }
+    /*
+     * convert a rule like :host-context(.foo) > .bar { }
+     *
+     * to
+     *
+     * .foo<scopeName> > .bar, .foo scopeName > .bar { }
+     *
+     * and
+     *
+     * :host-context(.foo:host) .bar { ... }
+     *
+     * to
+     *
+     * .foo<scopeName> .bar { ... }
+    */
+    _convertColonHostContext(cssText) {
+        return this._convertColonRule(cssText, _cssColonHostContextRe, this._colonHostContextPartReplacer);
+    }
+    _convertColonRule(cssText, regExp, partReplacer) {
+        // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+        return cssText.replace(regExp, function (...m) {
+            if (m[2]) {
+                const parts = m[2].split(',');
+                const r = [];
+                for (let i = 0; i < parts.length; i++) {
+                    const p = parts[i].trim();
+                    if (!p)
+                        break;
+                    r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+                }
+                return r.join(',');
+            }
+            else {
+                return _polyfillHostNoCombinator + m[3];
+            }
+        });
+    }
+    _colonHostContextPartReplacer(host, part, suffix) {
+        if (part.indexOf(_polyfillHost) > -1) {
+            return this._colonHostPartReplacer(host, part, suffix);
+        }
+        else {
+            return host + part + suffix + ', ' + part + ' ' + host + suffix;
+        }
+    }
+    _colonHostPartReplacer(host, part, suffix) {
+        return host + part.replace(_polyfillHost, '') + suffix;
+    }
+    /*
+     * Convert combinators like ::shadow and pseudo-elements like ::content
+     * by replacing with space.
+    */
+    _convertShadowDOMSelectors(cssText) {
+        return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
+    }
+    // change a selector like 'div' to 'name div'
+    _scopeSelectors(cssText, scopeSelector, hostSelector, slotSelector, commentOriginalSelector) {
+        return processRules(cssText, (rule) => {
+            let selector = rule.selector;
+            let content = rule.content;
+            if (rule.selector[0] !== '@') {
+                selector =
+                    this._scopeSelector(rule.selector, scopeSelector, hostSelector, slotSelector, this.strictStyling);
+            }
+            else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+                rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
+                content = this._scopeSelectors(rule.content, scopeSelector, hostSelector, slotSelector, commentOriginalSelector);
+            }
+            selector = selector.replace(/\s{2,}/g, ' ').trim();
+            return new CssRule(selector, content);
+        });
+    }
+    _scopeSelector(selector, scopeSelector, hostSelector, slotSelector, strict) {
+        return selector.split(',')
+            .map(shallowPart => {
+            if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
+                return shallowPart.trim();
+            }
+            if (this._selectorNeedsScoping(shallowPart, scopeSelector)) {
+                return strict ?
+                    this._applyStrictSelectorScope(shallowPart, scopeSelector, hostSelector).trim() :
+                    this._applySelectorScope(shallowPart, scopeSelector, hostSelector).trim();
+            }
+            else {
+                return shallowPart.trim();
+            }
+        })
+            .join(', ');
+    }
+    _selectorNeedsScoping(selector, scopeSelector) {
+        const re = this._makeScopeMatcher(scopeSelector);
+        return !re.test(selector);
+    }
+    _makeScopeMatcher(scopeSelector) {
+        const lre = /\[/g;
+        const rre = /\]/g;
+        scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+        return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+    }
+    _applySelectorScope(selector, scopeSelector, hostSelector) {
+        // Difference from webcomponents.js: scopeSelector could not be an array
+        return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
+    }
+    // scope via name and [is=name]
+    _applySimpleSelectorScope(selector, scopeSelector, hostSelector) {
+        // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+        _polyfillHostRe.lastIndex = 0;
+        if (_polyfillHostRe.test(selector)) {
+            const replaceBy = this.strictStyling ? `.${hostSelector}` : scopeSelector;
+            return selector
+                .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
+                return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
+                    return before + replaceBy + colon + after;
+                });
+            })
+                .replace(_polyfillHostRe, replaceBy + ' ');
+        }
+        return scopeSelector + ' ' + selector;
+    }
+    _applyStrictSelectorScope(selector, scopeSelector, hostSelector) {
+        const isRe = /\[is=([^\]]*)\]/g;
+        scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
+        const className = '.' + scopeSelector;
+        const _scopeSelectorPart = (p) => {
+            let scopedP = p.trim();
+            if (!scopedP) {
+                return '';
+            }
+            if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+                scopedP = this._applySimpleSelectorScope(p, scopeSelector, hostSelector);
+            }
+            else {
+                // remove :host since it should be unnecessary
+                const t = p.replace(_polyfillHostRe, '');
+                if (t.length > 0) {
+                    const matches = t.match(/([^:]*)(:*)(.*)/);
+                    if (matches) {
+                        scopedP = matches[1] + className + matches[2] + matches[3];
+                    }
+                }
+            }
+            return scopedP;
+        };
+        const safeContent = new SafeSelector(selector);
+        selector = safeContent.content();
+        let scopedSelector = '';
+        let startIndex = 0;
+        let res;
+        const sep = /( |>|\+|~(?!=))\s*/g;
+        // If a selector appears before :host it should not be shimmed as it
+        // matches on ancestor elements and not on elements in the host's shadow
+        // `:host-context(div)` is transformed to
+        // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+        // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+        // Historically `component-tag:host` was matching the component so we also want to preserve
+        // this behavior to avoid breaking legacy apps (it should not match).
+        // The behavior should be:
+        // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+        // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+        //   `:host-context(tag)`)
+        const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+        // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+        let shouldScope = !hasHost;
+        while ((res = sep.exec(selector)) !== null) {
+            const separator = res[1];
+            const part = selector.slice(startIndex, res.index).trim();
+            shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+            const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+            scopedSelector += `${scopedPart} ${separator} `;
+            startIndex = sep.lastIndex;
+        }
+        const part = selector.substring(startIndex);
+        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+        scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+        // replace the placeholders with their original values
+        return safeContent.restore(scopedSelector);
+    }
+    _insertPolyfillHostInCssText(selector) {
+        selector = selector
+            .replace(_colonHostContextRe, _polyfillHostContext)
+            .replace(_colonHostRe, _polyfillHost)
+            .replace(_colonSlottedRe, _polyfillSlotted);
+        return selector;
+    }
+}
+class SafeSelector {
+    constructor(selector) {
+        this.placeholders = [];
+        this.index = 0;
+        // Replaces attribute selectors with placeholders.
+        // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+        selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+            const replaceBy = `__ph-${this.index}__`;
+            this.placeholders.push(keep);
+            this.index++;
+            return replaceBy;
+        });
+        // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+        // WS and "+" would otherwise be interpreted as selector separators.
+        this._content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+            const replaceBy = `__ph-${this.index}__`;
+            this.placeholders.push(exp);
+            this.index++;
+            return pseudo + replaceBy;
+        });
+    }
+    restore(content) {
+        return content.replace(/__ph-(\d+)__/g, (_, index) => this.placeholders[+index]);
+    }
+    content() { return this._content; }
+}
+const _polyfillHost = '-shadowcsshost';
+const _polyfillSlotted = '-shadowcssslotted';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+const _polyfillHostContext = '-shadowcsscontext';
+const _parenSuffix = ')(?:\\((' +
+    '(?:\\([^)(]*\\)|[^)(]*)+?' +
+    ')\\))?([^,{]*)';
+const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
+const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [
+    /::shadow/g,
+    /::content/g
+];
+const _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
+const _polyfillHostRe = /-shadowcsshost/gim;
+const _colonHostRe = /:host/gim;
+const _colonSlottedRe = /::slotted/gim;
+const _colonHostContextRe = /:host-context/gim;
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+function stripComments(input) {
+    return input.replace(_commentRe, '');
+}
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+function extractCommentsWithHash(input) {
+    return input.match(_commentWithHashRe) || [];
+}
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const OPEN_CURLY = '{';
+const CLOSE_CURLY = '}';
+const BLOCK_PLACEHOLDER = '%BLOCK%';
+class CssRule {
+    constructor(selector, content) {
+        this.selector = selector;
+        this.content = content;
+    }
+}
+function processRules(input, ruleCallback) {
+    const inputWithEscapedBlocks = escapeBlocks(input);
+    let nextBlockIndex = 0;
+    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function (...m) {
+        const selector = m[2];
+        let content = '';
+        let suffix = m[4];
+        let contentPrefix = '';
+        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+            contentPrefix = '{';
+        }
+        const rule = ruleCallback(new CssRule(selector, content));
+        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+    });
+}
+class StringWithEscapedBlocks {
+    constructor(escapedString, blocks) {
+        this.escapedString = escapedString;
+        this.blocks = blocks;
+    }
+}
+function escapeBlocks(input) {
+    const inputParts = input.split(_curlyRe);
+    const resultParts = [];
+    const escapedBlocks = [];
+    let bracketCount = 0;
+    let currentBlockParts = [];
+    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+        const part = inputParts[partIndex];
+        if (part === CLOSE_CURLY) {
+            bracketCount--;
+        }
+        if (bracketCount > 0) {
+            currentBlockParts.push(part);
+        }
+        else {
+            if (currentBlockParts.length > 0) {
+                escapedBlocks.push(currentBlockParts.join(''));
+                resultParts.push(BLOCK_PLACEHOLDER);
+                currentBlockParts = [];
+            }
+            resultParts.push(part);
+        }
+        if (part === OPEN_CURLY) {
+            bracketCount++;
+        }
+    }
+    if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+    }
+    return new StringWithEscapedBlocks(resultParts.join(''), escapedBlocks);
+}
+
+export { ShadowCss, scopeCss };
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 00000000000..b8ff46e2066
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');
\ No newline at end of file
diff --git a/dist/index.mjs b/dist/index.mjs
new file mode 100644
index 00000000000..18e70a30855
--- /dev/null
+++ b/dist/index.mjs
@@ -0,0 +1 @@
+export * from './esm/legacy/index.mjs';
\ No newline at end of file
diff --git a/dist/loader/index.cjs.js b/dist/loader/index.cjs.js
new file mode 100644
index 00000000000..7a8571ed1ee
--- /dev/null
+++ b/dist/loader/index.cjs.js
@@ -0,0 +1,4 @@
+
+  module.exports = require('../cjs/loader.cjs.js');
+  module.exports.applyPolyfills = function() { return Promise.resolve() };
+  
\ No newline at end of file
diff --git a/dist/loader/index.d.ts b/dist/loader/index.d.ts
new file mode 100644
index 00000000000..0e7d17c51dc
--- /dev/null
+++ b/dist/loader/index.d.ts
@@ -0,0 +1,12 @@
+
+export * from '../types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;
diff --git a/dist/loader/index.es2017.mjs b/dist/loader/index.es2017.mjs
new file mode 100644
index 00000000000..70d1024ebfe
--- /dev/null
+++ b/dist/loader/index.es2017.mjs
@@ -0,0 +1,2 @@
+export * from '../esm/polyfills/index.js';
+export * from '../esm/loader.mjs';
\ No newline at end of file
diff --git a/dist/loader/index.mjs b/dist/loader/index.mjs
new file mode 100644
index 00000000000..38a273c3298
--- /dev/null
+++ b/dist/loader/index.mjs
@@ -0,0 +1,21 @@
+(function() {
+  if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+    window.customElements === undefined
+  ) {
+    return;
+  }
+  const BuiltInHTMLElement = HTMLElement;
+  window.HTMLElement = /** @this {!Object} */ function HTMLElement() {
+    return Reflect.construct(
+        BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
+  };
+  HTMLElement.prototype = BuiltInHTMLElement.prototype;
+  HTMLElement.prototype.constructor = HTMLElement;
+  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
+})();
+
+export * from '../esm/polyfills/index.js';
+export * from '../esm/legacy/loader.mjs';
\ No newline at end of file
diff --git a/dist/loader/package.json b/dist/loader/package.json
new file mode 100644
index 00000000000..e850a573d1e
--- /dev/null
+++ b/dist/loader/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "calcite-loader",
+  "typings": "./index.d.ts",
+  "module": "./index.mjs",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.mjs",
+  "es2015": "./index.es2017.mjs",
+  "es2017": "./index.es2017.mjs"
+}
\ No newline at end of file
diff --git a/dist/types/components.d.ts b/dist/types/components.d.ts
new file mode 100644
index 00000000000..9f53d0e6b0a
--- /dev/null
+++ b/dist/types/components.d.ts
@@ -0,0 +1,221 @@
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+
+
+import { HTMLStencilElement, JSXBase } from './stencil.core';
+import {
+  TabRegisterEventDetail,
+} from './interfaces/TabRegister';
+import {
+  TabChangeEventDetail,
+} from './interfaces/TabChange';
+
+
+export namespace Components {
+  interface CalciteAlert {
+    'close': () => Promise<void>;
+    'color': string;
+    'currentAlert': string;
+    'dismiss': boolean;
+    'duration': string;
+    'icon': boolean;
+    'id': string;
+    'queueLength': number;
+    'theme': string;
+  }
+  interface CalciteAlerts {
+    'id': string;
+    'open': (requestedAlert: any) => Promise<void>;
+  }
+  interface CalciteLoader {
+    'isActive': boolean;
+    'text': string;
+  }
+  interface CalciteModal {
+    /**
+    * The first name
+    */
+    'first': string;
+    /**
+    * The last name
+    */
+    'last': string;
+    /**
+    * The middle name
+    */
+    'middle': string;
+  }
+  interface CalciteTab {
+    'getTabIndex': () => Promise<any>;
+    'id': string;
+    'isActive': boolean;
+    'registerLabeledBy': (id: any) => Promise<void>;
+    'tab': string;
+  }
+  interface CalciteTabNav {
+    'id': string;
+    'selectedTab': number | string;
+  }
+  interface CalciteTabTitle {
+    'getTabIndex': () => Promise<any>;
+    'id': string;
+    'isActive': boolean;
+    'setControledBy': (id: string) => Promise<void>;
+    'tab': string;
+  }
+  interface CalciteTabs {
+    'theme': "light" | "dark";
+  }
+}
+
+declare namespace LocalJSX {
+  interface CalciteAlert extends JSXBase.HTMLAttributes {
+    'color'?: string;
+    'currentAlert'?: string;
+    'dismiss'?: boolean;
+    'duration'?: string;
+    'icon'?: boolean;
+    'id'?: string;
+    'onAlertClose'?: (event: CustomEvent<any>) => void;
+    'onAlertOpen'?: (event: CustomEvent<any>) => void;
+    'queueLength'?: number;
+    'theme'?: string;
+  }
+  interface CalciteAlerts extends JSXBase.HTMLAttributes {
+    'id'?: string;
+    'onAlertsClose'?: (event: CustomEvent<any>) => void;
+    'onAlertsOpen'?: (event: CustomEvent<any>) => void;
+  }
+  interface CalciteLoader extends JSXBase.HTMLAttributes {
+    'isActive'?: boolean;
+    'text'?: string;
+  }
+  interface CalciteModal extends JSXBase.HTMLAttributes {
+    /**
+    * The first name
+    */
+    'first'?: string;
+    /**
+    * The last name
+    */
+    'last'?: string;
+    /**
+    * The middle name
+    */
+    'middle'?: string;
+  }
+  interface CalciteTab extends JSXBase.HTMLAttributes {
+    'id'?: string;
+    'isActive'?: boolean;
+    'onCalciteRegisterTab'?: (event: CustomEvent<TabRegisterEventDetail>) => void;
+    'tab'?: string;
+  }
+  interface CalciteTabNav extends JSXBase.HTMLAttributes {
+    'id'?: string;
+    'onCalciteTabChange'?: (event: CustomEvent<TabChangeEventDetail>) => void;
+    'selectedTab'?: number | string;
+  }
+  interface CalciteTabTitle extends JSXBase.HTMLAttributes {
+    'id'?: string;
+    'isActive'?: boolean;
+    'onCalciteActivateTab'?: (event: CustomEvent<TabChangeEventDetail>) => void;
+    'onCalciteFocusNextTab'?: (event: CustomEvent<any>) => void;
+    'onCalciteFocusPreviousTab'?: (event: CustomEvent<any>) => void;
+    'onCalciteRegisterTabTitle'?: (event: CustomEvent<TabRegisterEventDetail>) => void;
+    'tab'?: string;
+  }
+  interface CalciteTabs extends JSXBase.HTMLAttributes {
+    'theme'?: "light" | "dark";
+  }
+
+  interface IntrinsicElements {
+    'calcite-alert': CalciteAlert;
+    'calcite-alerts': CalciteAlerts;
+    'calcite-loader': CalciteLoader;
+    'calcite-modal': CalciteModal;
+    'calcite-tab': CalciteTab;
+    'calcite-tab-nav': CalciteTabNav;
+    'calcite-tab-title': CalciteTabTitle;
+    'calcite-tabs': CalciteTabs;
+  }
+}
+
+export { LocalJSX as JSX };
+
+
+declare module "@stencil/core" {
+  export namespace JSX {
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+  }
+}
+
+
+declare global {
+
+
+
+  interface HTMLCalciteAlertElement extends Components.CalciteAlert, HTMLStencilElement {}
+  var HTMLCalciteAlertElement: {
+    prototype: HTMLCalciteAlertElement;
+    new (): HTMLCalciteAlertElement;
+  };
+
+  interface HTMLCalciteAlertsElement extends Components.CalciteAlerts, HTMLStencilElement {}
+  var HTMLCalciteAlertsElement: {
+    prototype: HTMLCalciteAlertsElement;
+    new (): HTMLCalciteAlertsElement;
+  };
+
+  interface HTMLCalciteLoaderElement extends Components.CalciteLoader, HTMLStencilElement {}
+  var HTMLCalciteLoaderElement: {
+    prototype: HTMLCalciteLoaderElement;
+    new (): HTMLCalciteLoaderElement;
+  };
+
+  interface HTMLCalciteModalElement extends Components.CalciteModal, HTMLStencilElement {}
+  var HTMLCalciteModalElement: {
+    prototype: HTMLCalciteModalElement;
+    new (): HTMLCalciteModalElement;
+  };
+
+  interface HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement {}
+  var HTMLCalciteTabElement: {
+    prototype: HTMLCalciteTabElement;
+    new (): HTMLCalciteTabElement;
+  };
+
+  interface HTMLCalciteTabNavElement extends Components.CalciteTabNav, HTMLStencilElement {}
+  var HTMLCalciteTabNavElement: {
+    prototype: HTMLCalciteTabNavElement;
+    new (): HTMLCalciteTabNavElement;
+  };
+
+  interface HTMLCalciteTabTitleElement extends Components.CalciteTabTitle, HTMLStencilElement {}
+  var HTMLCalciteTabTitleElement: {
+    prototype: HTMLCalciteTabTitleElement;
+    new (): HTMLCalciteTabTitleElement;
+  };
+
+  interface HTMLCalciteTabsElement extends Components.CalciteTabs, HTMLStencilElement {}
+  var HTMLCalciteTabsElement: {
+    prototype: HTMLCalciteTabsElement;
+    new (): HTMLCalciteTabsElement;
+  };
+
+  interface HTMLElementTagNameMap {
+    'calcite-alert': HTMLCalciteAlertElement;
+    'calcite-alerts': HTMLCalciteAlertsElement;
+    'calcite-loader': HTMLCalciteLoaderElement;
+    'calcite-modal': HTMLCalciteModalElement;
+    'calcite-tab': HTMLCalciteTabElement;
+    'calcite-tab-nav': HTMLCalciteTabNavElement;
+    'calcite-tab-title': HTMLCalciteTabTitleElement;
+    'calcite-tabs': HTMLCalciteTabsElement;
+  }
+
+  interface ElementTagNameMap extends HTMLElementTagNameMap {}
+}
+
diff --git a/dist/types/components/calcite-alert/calcite-alert.d.ts b/dist/types/components/calcite-alert/calcite-alert.d.ts
new file mode 100644
index 00000000000..b92c7c20156
--- /dev/null
+++ b/dist/types/components/calcite-alert/calcite-alert.d.ts
@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil.core';
+export declare class CalciteAlert {
+    el: HTMLElement;
+    currentAlert: string;
+    dismiss: boolean;
+    icon: boolean;
+    id: string;
+    queueLength: number;
+    color: string;
+    theme: string;
+    duration: string;
+    isActive: boolean;
+    alertClose: EventEmitter;
+    alertOpen: EventEmitter;
+    close(): Promise<void>;
+    componentWillUpdate(): void;
+    setIcon(): any;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-alerts/calcite-alerts.d.ts b/dist/types/components/calcite-alerts/calcite-alerts.d.ts
new file mode 100644
index 00000000000..b808586d3c6
--- /dev/null
+++ b/dist/types/components/calcite-alerts/calcite-alerts.d.ts
@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil.core';
+export declare class CalciteAlerts {
+    el: HTMLElement;
+    id: string;
+    currentAlert: string;
+    isActive: boolean;
+    queue: string[];
+    alertsClose: EventEmitter;
+    alertsOpen: EventEmitter;
+    open(requestedAlert: any): Promise<void>;
+    updateQueue(event: CustomEvent): void;
+    componentWillUpdate(): void;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-loader/calcite-loader.d.ts b/dist/types/components/calcite-loader/calcite-loader.d.ts
new file mode 100644
index 00000000000..9171896e031
--- /dev/null
+++ b/dist/types/components/calcite-loader/calcite-loader.d.ts
@@ -0,0 +1,6 @@
+export declare class CalciteLoader {
+    el: HTMLElement;
+    isActive: boolean;
+    text: string;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-modal/calcite-modal.d.ts b/dist/types/components/calcite-modal/calcite-modal.d.ts
new file mode 100644
index 00000000000..f11f7e2bfaf
--- /dev/null
+++ b/dist/types/components/calcite-modal/calcite-modal.d.ts
@@ -0,0 +1,16 @@
+export declare class CalciteModal {
+    /**
+     * The first name
+     */
+    first: string;
+    /**
+     * The middle name
+     */
+    middle: string;
+    /**
+     * The last name
+     */
+    last: string;
+    private getText;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-tab-nav/calcite-tab-nav.d.ts b/dist/types/components/calcite-tab-nav/calcite-tab-nav.d.ts
new file mode 100644
index 00000000000..26d27047b52
--- /dev/null
+++ b/dist/types/components/calcite-tab-nav/calcite-tab-nav.d.ts
@@ -0,0 +1,17 @@
+import { EventEmitter } from "../../stencil.core";
+import { TabChangeEventDetail } from "../../interfaces/TabChange";
+import { TabRegisterEventDetail } from "../../interfaces/TabRegister";
+export declare class CalciteTabNav {
+    el: any;
+    id: string;
+    calciteTabChange: EventEmitter<TabChangeEventDetail>;
+    selectedTab: number | string;
+    selectedTabChanged(): void;
+    focusPreviousTabHandler(e: CustomEvent): void;
+    focusNextTabHandler(e: CustomEvent): void;
+    tabTitleRegistationHandler(e: CustomEvent<TabRegisterEventDetail>): void;
+    activateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
+    getIndexOfTabTitle(el: HTMLCalciteTabTitleElement): number;
+    componentWillLoad(): void;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-tab-title/calcite-tab-title.d.ts b/dist/types/components/calcite-tab-title/calcite-tab-title.d.ts
new file mode 100644
index 00000000000..e1008d79159
--- /dev/null
+++ b/dist/types/components/calcite-tab-title/calcite-tab-title.d.ts
@@ -0,0 +1,20 @@
+import { EventEmitter } from "../../stencil.core";
+import { TabChangeEventDetail } from "../../interfaces/TabChange";
+export declare class CalciteTabTitle {
+    id: string;
+    private controls;
+    el: HTMLElement;
+    tab: string;
+    isActive: boolean;
+    calciteActivateTab: EventEmitter<TabChangeEventDetail>;
+    calciteFocusNextTab: EventEmitter;
+    calciteFocusPreviousTab: EventEmitter;
+    private calciteRegisterTabTitle;
+    tabChangeHand(event: CustomEvent<TabChangeEventDetail>): void;
+    onClick(): void;
+    keyDownHandler(e: KeyboardEvent): void;
+    componentDidLoad(): void;
+    getTabIndex(): Promise<any>;
+    setControledBy(id: string): Promise<void>;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-tab/calcite-tab.d.ts b/dist/types/components/calcite-tab/calcite-tab.d.ts
new file mode 100644
index 00000000000..9f6dd92304b
--- /dev/null
+++ b/dist/types/components/calcite-tab/calcite-tab.d.ts
@@ -0,0 +1,16 @@
+import { EventEmitter } from "../../stencil.core";
+import { TabChangeEventDetail } from "../../interfaces/TabChange";
+import { TabRegisterEventDetail } from "../../interfaces/TabRegister";
+export declare class CalciteTab {
+    id: string;
+    private labeledBy;
+    el: HTMLElement;
+    tab: string;
+    isActive: boolean;
+    tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+    calciteRegisterTab: EventEmitter<TabRegisterEventDetail>;
+    componentDidLoad(): void;
+    getTabIndex(): Promise<any>;
+    registerLabeledBy(id: any): Promise<void>;
+    render(): any;
+}
diff --git a/dist/types/components/calcite-tabs/calcite-tabs.d.ts b/dist/types/components/calcite-tabs/calcite-tabs.d.ts
new file mode 100644
index 00000000000..fac499c2a31
--- /dev/null
+++ b/dist/types/components/calcite-tabs/calcite-tabs.d.ts
@@ -0,0 +1,22 @@
+import { TabRegisterEventDetail } from "../../interfaces/TabRegister";
+interface TabRegister {
+    [key: string]: {
+        id: string;
+        tab: HTMLCalciteTabElement;
+    };
+}
+interface TabTitleRegister {
+    [key: string]: {
+        id: string;
+        title: HTMLCalciteTabTitleElement;
+    };
+}
+export declare class CalciteTabs {
+    tabs: TabRegister;
+    tabTitles: TabTitleRegister;
+    theme: "light" | "dark";
+    tabTitleRegistationHandler(e: CustomEvent<TabRegisterEventDetail>): void;
+    tabRegistationHandler(e: CustomEvent<TabRegisterEventDetail>): void;
+    render(): any;
+}
+export {};
diff --git a/dist/types/interfaces/AlertInterface.d.ts b/dist/types/interfaces/AlertInterface.d.ts
new file mode 100644
index 00000000000..196f434f806
--- /dev/null
+++ b/dist/types/interfaces/AlertInterface.d.ts
@@ -0,0 +1,12 @@
+export interface AlertInterface {
+    currentAlert: string;
+    queueLength: number;
+}
+declare const _default: {
+    Provider: import("@stencil/state-tunnel/dist/types/stencil.core").FunctionalComponent<{
+        state: AlertInterface;
+    }>;
+    Consumer: import("@stencil/state-tunnel/dist/types/stencil.core").FunctionalComponent<{}>;
+    injectProps: (Cstr: any, fieldList: import("@stencil/state-tunnel/dist/types/declarations").PropList<AlertInterface>) => void;
+};
+export default _default;
diff --git a/dist/types/interfaces/TabChange.d.ts b/dist/types/interfaces/TabChange.d.ts
new file mode 100644
index 00000000000..e1faa5ea3a2
--- /dev/null
+++ b/dist/types/interfaces/TabChange.d.ts
@@ -0,0 +1,3 @@
+export interface TabChangeEventDetail {
+    tab: number | string;
+}
diff --git a/dist/types/interfaces/TabRegister.d.ts b/dist/types/interfaces/TabRegister.d.ts
new file mode 100644
index 00000000000..1a628a4c308
--- /dev/null
+++ b/dist/types/interfaces/TabRegister.d.ts
@@ -0,0 +1,4 @@
+export interface TabRegisterEventDetail {
+    id: string;
+    index: number;
+}
diff --git a/dist/types/stencil.core.d.ts b/dist/types/stencil.core.d.ts
new file mode 100644
index 00000000000..55774b3e8d1
--- /dev/null
+++ b/dist/types/stencil.core.d.ts
@@ -0,0 +1,1342 @@
+/**
+ * This file gets copied to all distributions of stencil component collections.
+ * - no imports
+ */
+
+export interface ComponentWillLoad {
+  /**
+   * The component is about to load and it has not
+   * rendered yet.
+   *
+   * This is the best place to make any data updates
+   * before the first render.
+   *
+   * componentWillLoad will only be called once.
+   */
+  componentWillLoad: () => Promise<void> | void;
+}
+
+export interface ComponentDidLoad {
+  /**
+   * The component has loaded and has already rendered.
+   *
+   * Updating data in this method will cause the
+   * component to re-render.
+   *
+   * componentDidLoad will only be called once.
+   */
+  componentDidLoad: () => void;
+}
+
+export interface ComponentWillUpdate {
+  /**
+   * The component is about to update and re-render.
+   *
+   * Called multiple times throughout the life of
+   * the component as it updates.
+   *
+   * componentWillUpdate is not called on the first render.
+   */
+  componentWillUpdate: () => Promise<void> | void;
+}
+
+export interface ComponentDidUpdate {
+  /**
+   * The component has just re-rendered.
+   *
+   * Called multiple times throughout the life of
+   * the component as it updates.
+   *
+   * componentWillUpdate is not called on the
+   * first render.
+   */
+  componentDidUpdate: () => void;
+}
+
+export interface ComponentDidUnload {
+  /**
+   * The component did unload and the element
+   * will be destroyed.
+   */
+  componentDidUnload: () => void;
+}
+
+export interface ComponentInstance {
+  connectedCallback?: () => void;
+  disconnectedCallback?: () => void;
+
+  /**
+   * The component is about to load and it has not
+   * rendered yet.
+   *
+   * This is the best place to make any data updates
+   * before the first render.
+   *
+   * componentWillLoad will only be called once.
+   */
+  componentWillLoad?: () => Promise<void> | void;
+
+  /**
+   * The component has loaded and has already rendered.
+   *
+   * Updating data in this method will cause the
+   * component to re-render.
+   *
+   * componentDidLoad will only be called once.
+   */
+  componentDidLoad?: () => void;
+
+  /**
+   * The component is about to update and re-render.
+   *
+   * Called multiple times throughout the life of
+   * the component as it updates.
+   *
+   * componentWillUpdate is not called on the first render.
+   */
+  componentWillUpdate?: () => Promise<void> | void;
+
+  /**
+   * The component has just re-rendered.
+   *
+   * Called multiple times throughout the life of
+   * the component as it updates.
+   *
+   * componentWillUpdate is not called on the
+   * first render.
+   */
+  componentDidUpdate?: () => void;
+
+  /**
+   * The component did unload and the element
+   * will be destroyed.
+   */
+  componentDidUnload?: () => void;
+
+  render?: () => any;
+
+  /**
+   * Used to dynamically set host element attributes.
+   * Should be placed directly above render()
+   */
+  hostData?: () => {
+    class?: {[className: string]: boolean};
+    style?: any;
+    [attrName: string]: any;
+  };
+
+  [memberName: string]: any;
+}
+
+
+/**
+ * General types important to applications using stencil built components
+ */
+export interface EventEmitter<T= any> {
+  emit: (data?: T) => CustomEvent<T>;
+}
+
+export interface QueueApi {
+  tick: (cb: RafCallback) => void;
+  read: (cb: RafCallback) => void;
+  write: (cb: RafCallback) => void;
+  clear?: () => void;
+  flush?: (cb?: () => void) => void;
+}
+
+export interface RafCallback {
+  (timeStamp: number): void;
+}
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  forceUpdate(): void;
+}
+
+
+declare namespace LocalJSX {
+  export interface Element {}
+  export interface IntrinsicElements {}
+}
+export { LocalJSX as JSX };
+
+export namespace JSXBase {
+  export interface IntrinsicElements {
+    // Stencil elements
+    slot: JSXBase.SlotAttributes;
+
+    // HTML
+    a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
+    abbr: JSXBase.HTMLAttributes;
+    address: JSXBase.HTMLAttributes;
+    area: JSXBase.AreaHTMLAttributes<HTMLAreaElement>;
+    article: JSXBase.HTMLAttributes;
+    aside: JSXBase.HTMLAttributes;
+    audio: JSXBase.AudioHTMLAttributes<HTMLAudioElement>;
+    b: JSXBase.HTMLAttributes;
+    base: JSXBase.BaseHTMLAttributes<HTMLBaseElement>;
+    bdi: JSXBase.HTMLAttributes;
+    bdo: JSXBase.HTMLAttributes;
+    big: JSXBase.HTMLAttributes;
+    blockquote: JSXBase.BlockquoteHTMLAttributes<HTMLQuoteElement>;
+    body: JSXBase.HTMLAttributes<HTMLBodyElement>;
+    br: JSXBase.HTMLAttributes<HTMLBRElement>;
+    button: JSXBase.ButtonHTMLAttributes<HTMLButtonElement>;
+    canvas: JSXBase.CanvasHTMLAttributes<HTMLCanvasElement>;
+    caption: JSXBase.HTMLAttributes<HTMLTableCaptionElement>;
+    cite: JSXBase.HTMLAttributes;
+    code: JSXBase.HTMLAttributes;
+    col: JSXBase.ColHTMLAttributes<HTMLTableColElement>;
+    colgroup: JSXBase.ColgroupHTMLAttributes<HTMLTableColElement>;
+    data: JSXBase.HTMLAttributes<HTMLDataElement>;
+    datalist: JSXBase.HTMLAttributes<HTMLDataListElement>;
+    dd: JSXBase.HTMLAttributes;
+    del: JSXBase.DelHTMLAttributes<HTMLModElement>;
+    details: JSXBase.DetailsHTMLAttributes<HTMLElement>;
+    dfn: JSXBase.HTMLAttributes;
+    dialog: JSXBase.DialogHTMLAttributes<HTMLDialogElement>;
+    div: JSXBase.HTMLAttributes<HTMLDivElement>;
+    dl: JSXBase.HTMLAttributes<HTMLDListElement>;
+    dt: JSXBase.HTMLAttributes;
+    em: JSXBase.HTMLAttributes;
+    embed: JSXBase.EmbedHTMLAttributes<HTMLEmbedElement>;
+    fieldset: JSXBase.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    figcaption: JSXBase.HTMLAttributes;
+    figure: JSXBase.HTMLAttributes;
+    footer: JSXBase.HTMLAttributes;
+    form: JSXBase.FormHTMLAttributes<HTMLFormElement>;
+    h1: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h2: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h3: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h4: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h5: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h6: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    head: JSXBase.HTMLAttributes<HTMLHeadElement>;
+    header: JSXBase.HTMLAttributes;
+    hgroup: JSXBase.HTMLAttributes;
+    hr: JSXBase.HTMLAttributes<HTMLHRElement>;
+    html: JSXBase.HTMLAttributes<HTMLHtmlElement>;
+    i: JSXBase.HTMLAttributes;
+    iframe: JSXBase.IframeHTMLAttributes<HTMLIFrameElement>;
+    img: JSXBase.ImgHTMLAttributes<HTMLImageElement>;
+    input: JSXBase.InputHTMLAttributes<HTMLInputElement>;
+    ins: JSXBase.InsHTMLAttributes<HTMLModElement>;
+    kbd: JSXBase.HTMLAttributes;
+    keygen: JSXBase.KeygenHTMLAttributes<HTMLElement>;
+    label: JSXBase.LabelHTMLAttributes<HTMLLabelElement>;
+    legend: JSXBase.HTMLAttributes<HTMLLegendElement>;
+    li: JSXBase.LiHTMLAttributes<HTMLLIElement>;
+    link: JSXBase.LinkHTMLAttributes<HTMLLinkElement>;
+    main: JSXBase.HTMLAttributes;
+    map: JSXBase.MapHTMLAttributes<HTMLMapElement>;
+    mark: JSXBase.HTMLAttributes;
+    menu: JSXBase.MenuHTMLAttributes<HTMLMenuElement>;
+    menuitem: JSXBase.HTMLAttributes;
+    meta: JSXBase.MetaHTMLAttributes<HTMLMetaElement>;
+    meter: JSXBase.MeterHTMLAttributes<HTMLMeterElement>;
+    nav: JSXBase.HTMLAttributes;
+    noscript: JSXBase.HTMLAttributes;
+    object: JSXBase.ObjectHTMLAttributes<HTMLObjectElement>;
+    ol: JSXBase.OlHTMLAttributes<HTMLOListElement>;
+    optgroup: JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>;
+    option: JSXBase.OptionHTMLAttributes<HTMLOptionElement>;
+    output: JSXBase.OutputHTMLAttributes<HTMLOutputElement>;
+    p: JSXBase.HTMLAttributes<HTMLParagraphElement>;
+    param: JSXBase.ParamHTMLAttributes<HTMLParamElement>;
+    picture: JSXBase.HTMLAttributes<HTMLPictureElement>;
+    pre: JSXBase.HTMLAttributes<HTMLPreElement>;
+    progress: JSXBase.ProgressHTMLAttributes<HTMLProgressElement>;
+    q: JSXBase.QuoteHTMLAttributes<HTMLQuoteElement>;
+    rp: JSXBase.HTMLAttributes;
+    rt: JSXBase.HTMLAttributes;
+    ruby: JSXBase.HTMLAttributes;
+    s: JSXBase.HTMLAttributes;
+    samp: JSXBase.HTMLAttributes;
+    script: JSXBase.ScriptHTMLAttributes<HTMLScriptElement>;
+    section: JSXBase.HTMLAttributes;
+    select: JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
+    small: JSXBase.HTMLAttributes;
+    source: JSXBase.SourceHTMLAttributes<HTMLSourceElement>;
+    span: JSXBase.HTMLAttributes<HTMLSpanElement>;
+    strong: JSXBase.HTMLAttributes;
+    style: JSXBase.StyleHTMLAttributes<HTMLStyleElement>;
+    sub: JSXBase.HTMLAttributes;
+    summary: JSXBase.HTMLAttributes;
+    sup: JSXBase.HTMLAttributes;
+    table: JSXBase.TableHTMLAttributes<HTMLTableElement>;
+    tbody: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    td: JSXBase.TdHTMLAttributes<HTMLTableDataCellElement>;
+    textarea: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    tfoot: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    th: JSXBase.ThHTMLAttributes<HTMLTableHeaderCellElement>;
+    thead: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    time: JSXBase.TimeHTMLAttributes<HTMLTimeElement>;
+    title: JSXBase.HTMLAttributes<HTMLTitleElement>;
+    tr: JSXBase.HTMLAttributes<HTMLTableRowElement>;
+    track: JSXBase.TrackHTMLAttributes<HTMLTrackElement>;
+    u: JSXBase.HTMLAttributes;
+    ul: JSXBase.HTMLAttributes<HTMLUListElement>;
+    'var': JSXBase.HTMLAttributes;
+    video: JSXBase.VideoHTMLAttributes<HTMLVideoElement>;
+    wbr: JSXBase.HTMLAttributes;
+
+
+    // SVG
+    animate: JSXBase.SVGAttributes;
+    circle: JSXBase.SVGAttributes;
+    clipPath: JSXBase.SVGAttributes;
+    defs: JSXBase.SVGAttributes;
+    desc: JSXBase.SVGAttributes;
+    ellipse: JSXBase.SVGAttributes;
+    feBlend: JSXBase.SVGAttributes;
+    feColorMatrix: JSXBase.SVGAttributes;
+    feComponentTransfer: JSXBase.SVGAttributes;
+    feComposite: JSXBase.SVGAttributes;
+    feConvolveMatrix: JSXBase.SVGAttributes;
+    feDiffuseLighting: JSXBase.SVGAttributes;
+    feDisplacementMap: JSXBase.SVGAttributes;
+    feDistantLight: JSXBase.SVGAttributes;
+    feDropShadow: JSXBase.SVGAttributes;
+    feFlood: JSXBase.SVGAttributes;
+    feFuncA: JSXBase.SVGAttributes;
+    feFuncB: JSXBase.SVGAttributes;
+    feFuncG: JSXBase.SVGAttributes;
+    feFuncR: JSXBase.SVGAttributes;
+    feGaussianBlur: JSXBase.SVGAttributes;
+    feImage: JSXBase.SVGAttributes;
+    feMerge: JSXBase.SVGAttributes;
+    feMergeNode: JSXBase.SVGAttributes;
+    feMorphology: JSXBase.SVGAttributes;
+    feOffset: JSXBase.SVGAttributes;
+    fePointLight: JSXBase.SVGAttributes;
+    feSpecularLighting: JSXBase.SVGAttributes;
+    feSpotLight: JSXBase.SVGAttributes;
+    feTile: JSXBase.SVGAttributes;
+    feTurbulence: JSXBase.SVGAttributes;
+    filter: JSXBase.SVGAttributes;
+    foreignObject: JSXBase.SVGAttributes;
+    g: JSXBase.SVGAttributes;
+    image: JSXBase.SVGAttributes;
+    line: JSXBase.SVGAttributes;
+    linearGradient: JSXBase.SVGAttributes;
+    marker: JSXBase.SVGAttributes;
+    mask: JSXBase.SVGAttributes;
+    metadata: JSXBase.SVGAttributes;
+    path: JSXBase.SVGAttributes;
+    pattern: JSXBase.SVGAttributes;
+    polygon: JSXBase.SVGAttributes;
+    polyline: JSXBase.SVGAttributes;
+    radialGradient: JSXBase.SVGAttributes;
+    rect: JSXBase.SVGAttributes;
+    stop: JSXBase.SVGAttributes;
+    svg: JSXBase.SVGAttributes;
+    switch: JSXBase.SVGAttributes;
+    symbol: JSXBase.SVGAttributes;
+    text: JSXBase.SVGAttributes;
+    textPath: JSXBase.SVGAttributes;
+    tspan: JSXBase.SVGAttributes;
+    use: JSXBase.SVGAttributes;
+    view: JSXBase.SVGAttributes;
+  }
+
+  export interface SlotAttributes {
+    name?: string;
+    slot?: string;
+  }
+
+  export interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
+    download?: any;
+    href?: string;
+    hrefLang?: string;
+    hreflang?: string;
+    media?: string;
+    rel?: string;
+    target?: string;
+  }
+
+  export interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
+
+  export interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
+    alt?: string;
+    coords?: string;
+    download?: any;
+    href?: string;
+    hrefLang?: string;
+    hreflang?: string;
+    media?: string;
+    rel?: string;
+    shape?: string;
+    target?: string;
+  }
+
+  export interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
+    href?: string;
+    target?: string;
+  }
+
+  export interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+  }
+
+  export interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formaction?: string;
+    formEncType?: string;
+    formenctype?: string;
+    formMethod?: string;
+    formmethod?: string;
+    formNoValidate?: boolean;
+    formnovalidate?: boolean;
+    formTarget?: string;
+    formtarget?: string;
+    name?: string;
+    type?: string;
+    value?: string | string[] | number;
+  }
+
+  export interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
+    height?: number | string;
+    width?: number | string;
+  }
+
+  export interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
+    span?: number;
+  }
+
+  export interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+    span?: number;
+  }
+
+  export interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
+    open?: boolean;
+  }
+
+  export interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+    dateTime?: string;
+    datetime?: string;
+  }
+
+  export interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+    onClose?: (event: Event) => void;
+    open?: boolean;
+    returnValue?: string;
+  }
+
+  export interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
+    height?: number | string;
+    src?: string;
+    type?: string;
+    width?: number | string;
+  }
+
+  export interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+  }
+
+  export interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
+    acceptCharset?: string;
+    acceptcharset?: string;
+    action?: string;
+    autoComplete?: string;
+    autocomplete?: string;
+    encType?: string;
+    enctype?: string;
+    method?: string;
+    name?: string;
+    noValidate?: boolean;
+    novalidate?: boolean | string;
+    target?: string;
+  }
+
+  export interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
+    manifest?: string;
+  }
+
+  export interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
+    allowFullScreen?: boolean;
+    allowfullScreen?: string | boolean;
+    allowTransparency?: boolean;
+    allowtransparency?: string | boolean;
+    frameBorder?: number | string;
+    frameborder?: number | string;
+    importance?: 'low' | 'auto' | 'high';
+    height?: number | string;
+    loading?: 'lazy' | 'auto' | 'eager';
+    marginHeight?: number;
+    marginheight?: string | number;
+    marginWidth?: number;
+    marginwidth?: string | number;
+    name?: string;
+    sandbox?: string;
+    scrolling?: string;
+    seamless?: boolean;
+    src?: string;
+    srcDoc?: string;
+    srcdoc?: string;
+    width?: number | string;
+  }
+
+  export interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    alt?: string;
+    decoding?: 'async' | 'auto' | 'sync';
+    importance?: 'low' | 'auto' | 'high';
+    height?: number | string;
+    loading?: 'lazy' | 'auto' | 'eager';
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    srcset?: string;
+    useMap?: string;
+    usemap?: string;
+    width?: number | string;
+  }
+
+  export interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+    dateTime?: string;
+    datetime?: string;
+  }
+
+  export interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    accept?: string;
+    alt?: string;
+    autoComplete?: string;
+    autocomplete?: string;
+    autoFocus?: boolean;
+    autofocus?: boolean | string;
+    capture?: string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
+    checked?: boolean;
+    crossOrigin?: string;
+    crossorigin?: string;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formaction?: string;
+    formEncType?: string;
+    formenctype?: string;
+    formMethod?: string;
+    formmethod?: string;
+    formNoValidate?: boolean;
+    formnovalidate?: boolean;
+    formTarget?: string;
+    formtarget?: string;
+    height?: number | string;
+    list?: string;
+    max?: number | string;
+    maxLength?: number;
+    maxlength?: number | string;
+    min?: number | string;
+    minLength?: number;
+    minlength?: number | string;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    readonly?: boolean | string;
+    required?: boolean;
+    size?: number;
+    src?: string;
+    step?: number | string;
+    type?: string;
+    value?: string | string[] | number;
+    width?: number | string;
+  }
+
+  export interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
+    autoFocus?: boolean;
+    autofocus?: boolean | string;
+    challenge?: string;
+    disabled?: boolean;
+    form?: string;
+    keyType?: string;
+    keytype?: string;
+    keyParams?: string;
+    keyparams?: string;
+    name?: string;
+  }
+
+  export interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
+    form?: string;
+    htmlFor?: string;
+    htmlfor?: string;
+  }
+
+  export interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: string | string[] | number;
+  }
+
+  export interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
+    href?: string;
+    hrefLang?: string;
+    hreflang?: string;
+    importance?: 'low' | 'auto' | 'high';
+    integrity?: string;
+    media?: string;
+    rel?: string;
+    sizes?: string;
+    type?: string;
+  }
+
+  export interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+  }
+
+  export interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
+    type?: string;
+  }
+
+  export interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
+    autoPlay?: boolean;
+    autoplay?: boolean | string;
+    controls?: boolean;
+    crossOrigin?: string;
+    crossorigin?: string;
+    loop?: boolean;
+    mediaGroup?: string;
+    mediagroup?: string;
+    muted?: boolean;
+    preload?: string;
+    src?: string;
+
+    // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
+    onAbort?: (event: Event) => void;
+    onCanPlay?: (event: Event) => void;
+    onCanPlayThrough?: (event: Event) => void;
+    onDurationChange?: (event: Event) => void;
+    onEmptied?: (event: Event) => void;
+    onEnded?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onInterruptBegin?: (event: Event) => void;
+    onInterruptEnd?: (event: Event) => void;
+    onLoadedData?: (event: Event) => void;
+    onLoadedMetaData?: (event: Event) => void;
+    onLoadStart?: (event: Event) => void;
+    onMozAudioAvailable?: (event: Event) => void;
+    onPause?: (event: Event) => void;
+    onPlay?: (event: Event) => void;
+    onPlaying?: (event: Event) => void;
+    onProgress?: (event: Event) => void;
+    onRateChange?: (event: Event) => void;
+    onSeeked?: (event: Event) => void;
+    onSeeking?: (event: Event) => void;
+    onStalled?: (event: Event) => void;
+    onSuspend?: (event: Event) => void;
+    onTimeUpdate?: (event: Event) => void;
+    onVolumeChange?: (event: Event) => void;
+    onWaiting?: (event: Event) => void;
+  }
+
+  export interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
+    charSet?: string;
+    charset?: string;
+    content?: string;
+    httpEquiv?: string;
+    httpequiv?: string;
+    name?: string;
+  }
+
+  export interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
+    form?: string;
+    high?: number;
+    low?: number;
+    max?: number | string;
+    min?: number | string;
+    optimum?: number;
+    value?: string | string[] | number;
+  }
+
+  export interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+  }
+
+  export interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
+    classID?: string;
+    classid?: string;
+    data?: string;
+    form?: string;
+    height?: number | string;
+    name?: string;
+    type?: string;
+    useMap?: string;
+    usemap?: string;
+    width?: number | string;
+    wmode?: string;
+  }
+
+  export interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+    reversed?: boolean;
+    start?: number;
+  }
+
+  export interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: boolean;
+    label?: string;
+  }
+
+  export interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: boolean;
+    label?: string;
+    selected?: boolean;
+    value?: string | string[] | number;
+  }
+
+  export interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
+    form?: string;
+    htmlFor?: string;
+    htmlfor?: string;
+    name?: string;
+  }
+
+  export interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+    value?: string | string[] | number;
+  }
+
+  export interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
+    max?: number | string;
+    value?: string | string[] | number;
+  }
+
+  export interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
+    async?: boolean;
+    charSet?: string;
+    charset?: string;
+    crossOrigin?: string;
+    crossorigin?: string;
+    defer?: boolean;
+    importance?: 'low' | 'auto' | 'high';
+    integrity?: string;
+    nonce?: string;
+    src?: string;
+    type?: string;
+  }
+
+  export interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    multiple?: boolean;
+    name?: string;
+    required?: boolean;
+    size?: number;
+  }
+
+  export interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+    media?: string;
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    type?: string;
+  }
+
+  export interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+    media?: string;
+    nonce?: string;
+    scoped?: boolean;
+    type?: string;
+  }
+
+  export interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
+    cellPadding?: number | string;
+    cellpadding?: number | string;
+    cellSpacing?: number | string;
+    cellspacing?: number | string;
+    summary?: string;
+  }
+
+  export interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+    autoFocus?: boolean;
+    autofocus?: boolean | string;
+    cols?: number;
+    disabled?: boolean;
+    form?: string;
+    maxLength?: number;
+    maxlength?: number | string;
+    minLength?: number;
+    minlength?: number | string;
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    readonly?: boolean | string;
+    required?: boolean;
+    rows?: number;
+    value?: string | string[] | number;
+    wrap?: string;
+  }
+
+  export interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
+    colSpan?: number;
+    headers?: string;
+    rowSpan?: number;
+  }
+
+  export interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+    colSpan?: number;
+    headers?: string;
+    rowSpan?: number;
+    rowspan?: number | string;
+    scope?: string;
+  }
+
+  export interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
+    dateTime?: string;
+  }
+
+  export interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
+    default?: boolean;
+    kind?: string;
+    label?: string;
+    src?: string;
+    srcLang?: string;
+    srclang?: string;
+  }
+
+  export interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
+    height?: number | string;
+    playsInline?: boolean;
+    playsinline?: boolean | string;
+    poster?: string;
+    width?: number | string;
+  }
+
+  export interface HTMLAttributes<T = HTMLElement> extends DOMAttributes {
+    // vdom specific
+    innerHTML?: string;
+    ref?: (elm?: T) => void;
+    key?: string | number;
+
+    // Standard HTML Attributes
+    accessKey?: string;
+    class?: string | { [className: string]: boolean };
+    contentEditable?: boolean | string;
+    contenteditable?: boolean | string;
+    contextMenu?: string;
+    contextmenu?: string;
+    dir?: string;
+    draggable?: boolean;
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    slot?: string;
+    spellCheck?: boolean;
+    spellcheck?: boolean | string;
+    style?: { [key: string]: string | undefined };
+    tabIndex?: number;
+    tabindex?: number | string;
+    title?: string;
+
+    // Unknown
+    inputMode?: string;
+    inputmode?: string;
+    is?: string;
+    radioGroup?: string; // <command>, <menuitem>
+    radiogroup?: string;
+    part?: string;
+
+    // WAI-ARIA
+    role?: string;
+
+    // RDFa Attributes
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+
+    // Non-standard Attributes
+    autoCapitalize?: string;
+    autocapitalize?: string;
+    autoCorrect?: string;
+    autocorrect?: string;
+    autoSave?: string;
+    autosave?: string;
+    color?: string;
+    itemProp?: string;
+    itemprop?: string;
+    itemScope?: boolean;
+    itemscope?: boolean;
+    itemType?: string;
+    itemtype?: string;
+    itemID?: string;
+    itemid?: string;
+    itemRef?: string;
+    itemref?: string;
+    results?: number;
+    security?: string;
+    unselectable?: boolean;
+  }
+
+  export interface SVGAttributes extends DOMAttributes {
+    // Attributes which also defined in HTMLAttributes
+    // See comment in SVGDOMPropertyConfig.js
+    class?: string | { [className: string]: boolean };
+    color?: string;
+    height?: number | string;
+    id?: string;
+    lang?: string;
+    max?: number | string;
+    media?: string;
+    method?: string;
+    min?: number | string;
+    name?: string;
+    style?: { [key: string]: string | undefined };
+    target?: string;
+    type?: string;
+    width?: number | string;
+
+    // Other HTML properties supported by SVG elements in browsers
+    role?: string;
+    tabIndex?: number;
+
+    // SVG Specific attributes
+    accentHeight?: number | string;
+    accumulate?: 'none' | 'sum';
+    additive?: 'replace' | 'sum';
+    alignmentBaseline?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' |
+    'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
+    allowReorder?: 'no' | 'yes';
+    alphabetic?: number | string;
+    amplitude?: number | string;
+    arabicForm?: 'initial' | 'medial' | 'terminal' | 'isolated';
+    ascent?: number | string;
+    attributeName?: string;
+    attributeType?: string;
+    autoReverse?: number | string;
+    azimuth?: number | string;
+    baseFrequency?: number | string;
+    baselineShift?: number | string;
+    baseProfile?: number | string;
+    bbox?: number | string;
+    begin?: number | string;
+    bias?: number | string;
+    by?: number | string;
+    calcMode?: number | string;
+    capHeight?: number | string;
+    clip?: number | string;
+    clipPath?: string;
+    clipPathUnits?: number | string;
+    clipRule?: number | string;
+    colorInterpolation?: number | string;
+    colorInterpolationFilters?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit';
+    colorProfile?: number | string;
+    colorRendering?: number | string;
+    contentScriptType?: number | string;
+    contentStyleType?: number | string;
+    cursor?: number | string;
+    cx?: number | string;
+    cy?: number | string;
+    d?: string;
+    decelerate?: number | string;
+    descent?: number | string;
+    diffuseConstant?: number | string;
+    direction?: number | string;
+    display?: number | string;
+    divisor?: number | string;
+    dominantBaseline?: number | string;
+    dur?: number | string;
+    dx?: number | string;
+    dy?: number | string;
+    edgeMode?: number | string;
+    elevation?: number | string;
+    enableBackground?: number | string;
+    end?: number | string;
+    exponent?: number | string;
+    externalResourcesRequired?: number | string;
+    fill?: string;
+    fillOpacity?: number | string;
+    fillRule?: 'nonzero' | 'evenodd' | 'inherit';
+    filter?: string;
+    filterRes?: number | string;
+    filterUnits?: number | string;
+    floodColor?: number | string;
+    floodOpacity?: number | string;
+    focusable?: number | string;
+    fontFamily?: string;
+    fontSize?: number | string;
+    fontSizeAdjust?: number | string;
+    fontStretch?: number | string;
+    fontStyle?: number | string;
+    fontVariant?: number | string;
+    fontWeight?: number | string;
+    format?: number | string;
+    from?: number | string;
+    fx?: number | string;
+    fy?: number | string;
+    g1?: number | string;
+    g2?: number | string;
+    glyphName?: number | string;
+    glyphOrientationHorizontal?: number | string;
+    glyphOrientationVertical?: number | string;
+    glyphRef?: number | string;
+    gradientTransform?: string;
+    gradientUnits?: string;
+    hanging?: number | string;
+    horizAdvX?: number | string;
+    horizOriginX?: number | string;
+    ideographic?: number | string;
+    imageRendering?: number | string;
+    in2?: number | string;
+    in?: string;
+    intercept?: number | string;
+    k1?: number | string;
+    k2?: number | string;
+    k3?: number | string;
+    k4?: number | string;
+    k?: number | string;
+    kernelMatrix?: number | string;
+    kernelUnitLength?: number | string;
+    kerning?: number | string;
+    keyPoints?: number | string;
+    keySplines?: number | string;
+    keyTimes?: number | string;
+    lengthAdjust?: number | string;
+    letterSpacing?: number | string;
+    lightingColor?: number | string;
+    limitingConeAngle?: number | string;
+    local?: number | string;
+    markerEnd?: string;
+    markerHeight?: number | string;
+    markerMid?: string;
+    markerStart?: string;
+    markerUnits?: number | string;
+    markerWidth?: number | string;
+    mask?: string;
+    maskContentUnits?: number | string;
+    maskUnits?: number | string;
+    mathematical?: number | string;
+    mode?: number | string;
+    numOctaves?: number | string;
+    offset?: number | string;
+    opacity?: number | string;
+    operator?: number | string;
+    order?: number | string;
+    orient?: number | string;
+    orientation?: number | string;
+    origin?: number | string;
+    overflow?: number | string;
+    overlinePosition?: number | string;
+    overlineThickness?: number | string;
+    paintOrder?: number | string;
+    panose1?: number | string;
+    pathLength?: number | string;
+    patternContentUnits?: string;
+    patternTransform?: number | string;
+    patternUnits?: string;
+    pointerEvents?: number | string;
+    points?: string;
+    pointsAtX?: number | string;
+    pointsAtY?: number | string;
+    pointsAtZ?: number | string;
+    preserveAlpha?: number | string;
+    preserveAspectRatio?: string;
+    primitiveUnits?: number | string;
+    r?: number | string;
+    radius?: number | string;
+    refX?: number | string;
+    refY?: number | string;
+    renderingIntent?: number | string;
+    repeatCount?: number | string;
+    repeatDur?: number | string;
+    requiredExtensions?: number | string;
+    requiredFeatures?: number | string;
+    restart?: number | string;
+    result?: string;
+    rotate?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+    scale?: number | string;
+    seed?: number | string;
+    shapeRendering?: number | string;
+    slope?: number | string;
+    spacing?: number | string;
+    specularConstant?: number | string;
+    specularExponent?: number | string;
+    speed?: number | string;
+    spreadMethod?: string;
+    startOffset?: number | string;
+    stdDeviation?: number | string;
+    stemh?: number | string;
+    stemv?: number | string;
+    stitchTiles?: number | string;
+    stopColor?: string;
+    stopOpacity?: number | string;
+    strikethroughPosition?: number | string;
+    strikethroughThickness?: number | string;
+    string?: number | string;
+    stroke?: string;
+    strokeDasharray?: string | number;
+    strokeDashoffset?: string | number;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
+    strokeMiterlimit?: string;
+    strokeOpacity?: number | string;
+    strokeWidth?: number | string;
+    surfaceScale?: number | string;
+    systemLanguage?: number | string;
+    tableValues?: number | string;
+    targetX?: number | string;
+    targetY?: number | string;
+    textAnchor?: string;
+    textDecoration?: number | string;
+    textLength?: number | string;
+    textRendering?: number | string;
+    to?: number | string;
+    transform?: string;
+    u1?: number | string;
+    u2?: number | string;
+    underlinePosition?: number | string;
+    underlineThickness?: number | string;
+    unicode?: number | string;
+    unicodeBidi?: number | string;
+    unicodeRange?: number | string;
+    unitsPerEm?: number | string;
+    vAlphabetic?: number | string;
+    values?: string;
+    vectorEffect?: number | string;
+    version?: string;
+    vertAdvY?: number | string;
+    vertOriginX?: number | string;
+    vertOriginY?: number | string;
+    vHanging?: number | string;
+    vIdeographic?: number | string;
+    viewBox?: string;
+    viewTarget?: number | string;
+    visibility?: number | string;
+    vMathematical?: number | string;
+    widths?: number | string;
+    wordSpacing?: number | string;
+    writingMode?: number | string;
+    x1?: number | string;
+    x2?: number | string;
+    x?: number | string;
+    xChannelSelector?: string;
+    xHeight?: number | string;
+    xlinkActuate?: string;
+    xlinkArcrole?: string;
+    xlinkHref?: string;
+    xlinkRole?: string;
+    xlinkShow?: string;
+    xlinkTitle?: string;
+    xlinkType?: string;
+    xmlBase?: string;
+    xmlLang?: string;
+    xmlns?: string;
+    xmlnsXlink?: string;
+    xmlSpace?: string;
+    y1?: number | string;
+    y2?: number | string;
+    y?: number | string;
+    yChannelSelector?: string;
+    z?: number | string;
+    zoomAndPan?: string;
+  }
+
+  export interface DOMAttributes {
+    // Clipboard Events
+    onCopy?: (event: ClipboardEvent) => void;
+    onCopyCapture?: (event: ClipboardEvent) => void;
+    onCut?: (event: ClipboardEvent) => void;
+    onCutCapture?: (event: ClipboardEvent) => void;
+    onPaste?: (event: ClipboardEvent) => void;
+    onPasteCapture?: (event: ClipboardEvent) => void;
+
+    // Composition Events
+    onCompositionEnd?: (event: CompositionEvent) => void;
+    onCompositionEndCapture?: (event: CompositionEvent) => void;
+    onCompositionStart?: (event: CompositionEvent) => void;
+    onCompositionStartCapture?: (event: CompositionEvent) => void;
+    onCompositionUpdate?: (event: CompositionEvent) => void;
+    onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+
+    // Focus Events
+    onFocus?: (event: FocusEvent) => void;
+    onFocusCapture?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onBlurCapture?: (event: FocusEvent) => void;
+
+    // Form Events
+    onChange?: (event: Event) => void;
+    onChangeCapture?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    onInputCapture?: (event: Event) => void;
+    onReset?: (event: Event) => void;
+    onResetCapture?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onSubmitCapture?: (event: Event) => void;
+    onInvalid?: (event: Event) => void;
+    onInvalidCapture?: (event: Event) => void;
+
+    // Image Events
+    onLoad?: (event: Event) => void;
+    onLoadCapture?: (event: Event) => void;
+    onError?: (event: Event) => void; // also a Media Event
+    onErrorCapture?: (event: Event) => void; // also a Media Event
+
+    // Keyboard Events
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyDownCapture?: (event: KeyboardEvent) => void;
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onKeyPressCapture?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyUpCapture?: (event: KeyboardEvent) => void;
+
+    // MouseEvents
+    onAuxClick?: (event: MouseEvent) => void;
+    onClick?: (event: MouseEvent) => void;
+    onClickCapture?: (event: MouseEvent) => void;
+    onContextMenu?: (event: MouseEvent) => void;
+    onContextMenuCapture?: (event: MouseEvent) => void;
+    onDblClick?: (event: MouseEvent) => void;
+    onDblClickCapture?: (event: MouseEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onDragCapture?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragEndCapture?: (event: DragEvent) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragEnterCapture?: (event: DragEvent) => void;
+    onDragExit?: (event: DragEvent) => void;
+    onDragExitCapture?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragLeaveCapture?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragOverCapture?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDragStartCapture?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onDropCapture?: (event: DragEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseDownCapture?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onMouseMove?: (event: MouseEvent) => void;
+    onMouseMoveCapture?: (event: MouseEvent) => void;
+    onMouseOut?: (event: MouseEvent) => void;
+    onMouseOutCapture?: (event: MouseEvent) => void;
+    onMouseOver?: (event: MouseEvent) => void;
+    onMouseOverCapture?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    onMouseUpCapture?: (event: MouseEvent) => void;
+
+    // Touch Events
+    onTouchCancel?: (event: TouchEvent) => void;
+    onTouchCancelCapture?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    onTouchEndCapture?: (event: TouchEvent) => void;
+    onTouchMove?: (event: TouchEvent) => void;
+    onTouchMoveCapture?: (event: TouchEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchStartCapture?: (event: TouchEvent) => void;
+
+    // Pointer Events
+    onPointerDown?: (event: PointerEvent) => void;
+    onPointerDownCapture?: (event: PointerEvent) => void;
+    onPointerMove?: (event: PointerEvent) => void;
+    onPointerMoveCapture?: (event: PointerEvent) => void;
+    onPointerUp?: (event: PointerEvent) => void;
+    onPointerUpCapture?: (event: PointerEvent) => void;
+    onPointerCancel?: (event: PointerEvent) => void;
+    onPointerCancelCapture?: (event: PointerEvent) => void;
+    onPointerEnter?: (event: PointerEvent) => void;
+    onPointerEnterCapture?: (event: PointerEvent) => void;
+    onPointerLeave?: (event: PointerEvent) => void;
+    onPointerLeaveCapture?: (event: PointerEvent) => void;
+    onPointerOver?: (event: PointerEvent) => void;
+    onPointerOverCapture?: (event: PointerEvent) => void;
+    onPointerOut?: (event: PointerEvent) => void;
+    onPointerOutCapture?: (event: PointerEvent) => void;
+    onGotPointerCapture?: (event: PointerEvent) => void;
+    onGotPointerCaptureCapture?: (event: PointerEvent) => void;
+    onLostPointerCapture?: (event: PointerEvent) => void;
+    onLostPointerCaptureCapture?: (event: PointerEvent) => void;
+
+    // UI Events
+    onScroll?: (event: UIEvent) => void;
+    onScrollCapture?: (event: UIEvent) => void;
+
+    // Wheel Events
+    onWheel?: (event: WheelEvent) => void;
+    onWheelCapture?: (event: WheelEvent) => void;
+
+    // Animation Events
+    onAnimationStart?: (event: AnimationEvent) => void;
+    onAnimationStartCapture?: (event: AnimationEvent) => void;
+    onAnimationEnd?: (event: AnimationEvent) => void;
+    onAnimationEndCapture?: (event: AnimationEvent) => void;
+    onAnimationIteration?: (event: AnimationEvent) => void;
+    onAnimationIterationCapture?: (event: AnimationEvent) => void;
+
+    // Transition Events
+    onTransitionEnd?: (event: TransitionEvent) => void;
+    onTransitionEndCapture?: (event: TransitionEvent) => void;
+  }
+}
+
+
+export interface Hyperscript {
+  (sel: any): VNode;
+  (sel: Node, data: VNodeData): VNode;
+  (sel: any, data: VNodeData): VNode;
+  (sel: any, text: string): VNode;
+  (sel: any, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, text: string): VNode;
+  (sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, children: VNode): VNode;
+}
+
+
+export interface VNodeData {
+  class?: {[className: string]: boolean};
+  style?: any;
+  [attrName: string]: any;
+}
+
+
+export type ChildType = VNode | number | string;
+export type PropsType = VNodeProdData | number | string | null;
+
+export interface VNodeProdData {
+  key?: string | number;
+  class?: {[className: string]: boolean} | string;
+  className?: {[className: string]: boolean} | string;
+  style?: any;
+  [key: string]: any;
+}
+
+export interface FunctionalUtilities {
+  forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+  map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
+}
+
+export interface FunctionalComponent<T = {}> {
+  (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
+}
+
+export interface VNode {
+  $tag$?: string | number | Function;
+  $key$?: string | number;
+  $text$?: string;
+  $children$?: VNode[];
+  $attrs$?: any;
+  $name$?: string;
+  $flags$: number;
+  $elm$?: any;
+}
+
+export interface ChildNode {
+  vtag?: string | number | Function;
+  vkey?: string | number;
+  vtext?: string;
+  vchildren?: VNode[];
+  vattrs?: any;
+  vname?: string;
+}
diff --git a/dist/types/utils/guid.d.ts b/dist/types/utils/guid.d.ts
new file mode 100644
index 00000000000..607543b88ec
--- /dev/null
+++ b/dist/types/utils/guid.d.ts
@@ -0,0 +1 @@
+export declare function guid(): string;
diff --git a/dist/types/utils/keys.d.ts b/dist/types/utils/keys.d.ts
new file mode 100644
index 00000000000..a255ca4d49a
--- /dev/null
+++ b/dist/types/utils/keys.d.ts
@@ -0,0 +1,8 @@
+export declare const ESCAPE: number;
+export declare const ENTER: number;
+export declare const SPACE: number;
+export declare const TAB: number;
+export declare const UP: number;
+export declare const DOWN: number;
+export declare const LEFT: number;
+export declare const RIGHT: number;
diff --git a/dist/types/utils/utils.d.ts b/dist/types/utils/utils.d.ts
new file mode 100644
index 00000000000..d29658c5e56
--- /dev/null
+++ b/dist/types/utils/utils.d.ts
@@ -0,0 +1 @@
+export declare function format(first: string, middle: string, last: string): string;