@microsoft/fast-element 1.10.0 → 1.10.3

package/dist/fast-element.d.ts

@@ -1,4 +1,3 @@
-
 /**
  * A reference to globalThis, with support
  * for browsers that don't yet support the spec.

package/dist/fast-element.js

@@ -321,36 +321,6 @@ const DOM = Object.freeze({
 
 });
 
-function spilloverSubscribe(subscriber) {
-  const spillover = this.spillover;
-  const index = spillover.indexOf(subscriber);
-
-  if (index === -1) {
-    spillover.push(subscriber);
-  }
-}
-
-function spilloverUnsubscribe(subscriber) {
-  const spillover = this.spillover;
-  const index = spillover.indexOf(subscriber);
-
-  if (index !== -1) {
-    spillover.splice(index, 1);
-  }
-}
-
-function spilloverNotifySubscribers(args) {
-  const spillover = this.spillover;
-  const source = this.source;
-
-  for (let i = 0, ii = spillover.length; i < ii; ++i) {
-    spillover[i].handleChange(source, args);
-  }
-}
-
-function spilloverHas(subscriber) {
-  return this.spillover.indexOf(subscriber) !== -1;
-}
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
@@ -362,8 +332,6 @@ function spilloverHas(subscriber) {
  * If the set ever exceeds two subscribers, it upgrades to an array automatically.
  * @public
  */
-
-
 class SubscriberSet {
   /**
    * Creates an instance of SubscriberSet for the specified source.
@@ -384,7 +352,7 @@ class SubscriberSet {
 
 
   has(subscriber) {
-    return this.sub1 === subscriber || this.sub2 === subscriber;
+    return this.spillover === void 0 ? this.sub1 === subscriber || this.sub2 === subscriber : this.spillover.indexOf(subscriber) !== -1;
   }
   /**
    * Subscribes to notification of changes in an object's state.
@@ -393,27 +361,33 @@ class SubscriberSet {
 
 
   subscribe(subscriber) {
-    if (this.has(subscriber)) {
-      return;
-    }
+    const spillover = this.spillover;
 
-    if (this.sub1 === void 0) {
-      this.sub1 = subscriber;
-      return;
-    }
+    if (spillover === void 0) {
+      if (this.has(subscriber)) {
+        return;
+      }
 
-    if (this.sub2 === void 0) {
-      this.sub2 = subscriber;
-      return;
-    }
+      if (this.sub1 === void 0) {
+        this.sub1 = subscriber;
+        return;
+      }
 
-    this.spillover = [this.sub1, this.sub2, subscriber];
-    this.subscribe = spilloverSubscribe;
-    this.unsubscribe = spilloverUnsubscribe;
-    this.notify = spilloverNotifySubscribers;
-    this.has = spilloverHas;
-    this.sub1 = void 0;
-    this.sub2 = void 0;
+      if (this.sub2 === void 0) {
+        this.sub2 = subscriber;
+        return;
+      }
+
+      this.spillover = [this.sub1, this.sub2, subscriber];
+      this.sub1 = void 0;
+      this.sub2 = void 0;
+    } else {
+      const index = spillover.indexOf(subscriber);
+
+      if (index === -1) {
+        spillover.push(subscriber);
+      }
+    }
   }
   /**
    * Unsubscribes from notification of changes in an object's state.
@@ -422,10 +396,20 @@ class SubscriberSet {
 
 
   unsubscribe(subscriber) {
-    if (this.sub1 === subscriber) {
-      this.sub1 = void 0;
-    } else if (this.sub2 === subscriber) {
-      this.sub2 = void 0;
+    const spillover = this.spillover;
+
+    if (spillover === void 0) {
+      if (this.sub1 === subscriber) {
+        this.sub1 = void 0;
+      } else if (this.sub2 === subscriber) {
+        this.sub2 = void 0;
+      }
+    } else {
+      const index = spillover.indexOf(subscriber);
+
+      if (index !== -1) {
+        spillover.splice(index, 1);
+      }
     }
   }
   /**
@@ -435,16 +419,24 @@ class SubscriberSet {
 
 
   notify(args) {
-    const sub1 = this.sub1;
-    const sub2 = this.sub2;
+    const spillover = this.spillover;
     const source = this.source;
 
-    if (sub1 !== void 0) {
-      sub1.handleChange(source, args);
-    }
+    if (spillover === void 0) {
+      const sub1 = this.sub1;
+      const sub2 = this.sub2;
+
+      if (sub1 !== void 0) {
+        sub1.handleChange(source, args);
+      }
 
-    if (sub2 !== void 0) {
-      sub2.handleChange(source, args);
+      if (sub2 !== void 0) {
+        sub2.handleChange(source, args);
+      }
+    } else {
+      for (let i = 0, ii = spillover.length; i < ii; ++i) {
+        spillover[i].handleChange(source, args);
+      }
     }
   }
 
@@ -3518,6 +3510,11 @@ class ArrayObserver extends SubscriberSet {
     });
   }
 
+  subscribe(subscriber) {
+    this.flush();
+    super.subscribe(subscriber);
+  }
+
   addSplice(splice) {
     if (this.splices === void 0) {
       this.splices = [splice];
@@ -3929,7 +3926,7 @@ class RepeatBehavior {
     let views = this.views;
     let viewsLength = views.length;
 
-    if (itemsLength === 0 || templateChanged) {
+    if (itemsLength === 0 || templateChanged || !this.options.recycle) {
       // all views need to be removed
       HTMLView.disposeContiguousBatch(views);
       viewsLength = 0;

package/dist/fast-element.min.js

@@ -1 +1 @@
-const t=function(){if("undefined"!=typeof globalThis)return globalThis;if("undefined"!=typeof global)return global;if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;try{return new Function("return this")()}catch(t){return{}}}();void 0===t.trustedTypes&&(t.trustedTypes={createPolicy:(t,e)=>e});const e={configurable:!1,enumerable:!1,writable:!1};void 0===t.FAST&&Reflect.defineProperty(t,"FAST",Object.assign({value:Object.create(null)},e));const s=t.FAST;if(void 0===s.getById){const t=Object.create(null);Reflect.defineProperty(s,"getById",Object.assign({value(e,s){let i=t[e];return void 0===i&&(i=s?t[e]=s():null),i}},e))}const i=Object.freeze([]),n=t.FAST.getById(1,()=>{const e=[],s=[];function i(){if(s.length)throw s.shift()}function n(t){try{t.call()}catch(t){s.push(t),setTimeout(i,0)}}function r(){let t=0;for(;t<e.length;)if(n(e[t]),t++,t>1024){for(let s=0,i=e.length-t;s<i;s++)e[s]=e[s+t];e.length-=t,t=0}e.length=0}return Object.freeze({enqueue:function(s){e.length<1&&t.requestAnimationFrame(r),e.push(s)},process:r})}),r=t.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let o=r;const l="fast-"+Math.random().toString(36).substring(2,8),h=l+"{",a="}"+l,c=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(o!==r)throw new Error("The HTML policy can only be set once.");o=t},createHTML:t=>o.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(l),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(l+":","")),createInterpolationPlaceholder:t=>`${h}${t}${a}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${l}:${t}--\x3e`,queueUpdate:n.enqueue,processUpdates:n.process,nextUpdate:()=>new Promise(n.enqueue),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});function d(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function u(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function f(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function g(t){return-1!==this.spillover.indexOf(t)}class p{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=d,this.unsubscribe=u,this.notify=f,this.has=g,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class b{constructor(t){this.subscribers={},this.sourceSubscribers=null,this.source=t}notify(t){var e;const s=this.subscribers[t];void 0!==s&&s.notify(t),null===(e=this.sourceSubscribers)||void 0===e||e.notify(t)}subscribe(t,e){var s;if(e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new p(this.source)),s.subscribe(t)}else this.sourceSubscribers=null!==(s=this.sourceSubscribers)&&void 0!==s?s:new p(this.source),this.sourceSubscribers.subscribe(t)}unsubscribe(t,e){var s;if(e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}else null===(s=this.sourceSubscribers)||void 0===s||s.unsubscribe(t)}}const v=s.getById(2,()=>{const t=/(:|&&|\|\||if)/,e=new WeakMap,s=new WeakMap,i=c.queueUpdate;let n=void 0,r=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};function o(t){let s=t.$fastController||e.get(t);return void 0===s&&(Array.isArray(t)?s=r(t):e.set(t,s=new b(t))),s}function l(t){let e=s.get(t);if(void 0===e){let i=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==i;)e=s.get(i),i=Reflect.getPrototypeOf(i);e=void 0===e?[]:e.slice(0),s.set(t,e)}return e}class h{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==n&&n.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];if(i!==e){t[s]=e;const n=t[this.callback];"function"==typeof n&&n.call(t,i,e),o(t).notify(this.name)}}}class a extends p{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=n;n=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return n=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=this.needsQueue=!0}}watch(t,e){const s=this.last,i=o(t),r=null===s?this.first:{};if(r.propertySource=t,r.propertyName=e,r.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){let e;n=void 0,e=s.propertySource[s.propertyName],n=this,t===e&&(this.needsRefresh=!0)}s.next=r}this.last=r}handleChange(){this.needsQueue&&(this.needsQueue=!1,i(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}records(){let t=this.first;return{next:()=>{const e=t;return void 0===e?{value:void 0,done:!0}:(t=t.next,{value:e,done:!1})},[Symbol.iterator]:function(){return this}}}}return Object.freeze({setArrayObserverFactory(t){r=t},getNotifier:o,track(t,e){void 0!==n&&n.watch(t,e)},trackVolatile(){void 0!==n&&(n.needsRefresh=!0)},notify(t,e){o(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new h(e)),l(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors:l,binding(t,e,s=this.isVolatileBinding(t)){return new a(t,e,s)},isVolatileBinding:e=>t.test(e.toString())})});function m(t,e){v.defineProperty(t,e)}function y(t,e,s){return Object.assign({},s,{get:function(){return v.trackVolatile(),s.get.apply(this)}})}const C=s.getById(3,()=>{let t=null;return{get:()=>t,set(e){t=e}}});class x{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return C.get()}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}static setEvent(t){C.set(t)}}v.defineProperty(x.prototype,"index"),v.defineProperty(x.prototype,"length");const w=Object.seal(new x);class S{constructor(){this.targetIndex=0}}class B extends S{constructor(){super(...arguments),this.createPlaceholder=c.createInterpolationPlaceholder}}class T extends S{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return c.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function O(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=v.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function A(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function N(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function k(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function V(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function F(t){c.setAttribute(this.target,this.targetName,t)}function I(t){c.setBooleanAttribute(this.target,this.targetName,t)}function $(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function _(t){this.target[this.targetName]=t}function M(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,r=n.length;t<r;++t){const r=n[t];""!==r&&(e[r]=i,s.classList.add(r))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class P extends B{constructor(t){super(),this.binding=t,this.bind=O,this.unbind=N,this.updateTarget=F,this.isBindingVolatile=v.isVolatileBinding(this.binding)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=_,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>c.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=I;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=A,this.unbind=V;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=M)}}targetAtContent(){this.updateTarget=$,this.unbind=k}createBehavior(t){return new E(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class E{constructor(t,e,s,i,n,r,o){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=r,this.targetName=o}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){x.setEvent(t);const e=this.binding(this.source,this.context);x.setEvent(null),!0!==e&&t.preventDefault()}}let L=null;class j{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){L=this}static borrow(t){const e=L||new j;return e.directives=t,e.reset(),L=null,e}}function R(t){if(1===t.length)return t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,t.binding)),n=new P((t,e)=>{let n="";for(let r=0;r<s;++r)n+=i[r](t,e);return n});return n.targetName=e,n}const z=a.length;function H(t,e){const s=e.split(h);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],r=n.indexOf(a);let o;if(-1===r)o=n;else{const e=parseInt(n.substring(0,r));i.push(t.directives[e]),o=n.substring(r+z)}""!==o&&i.push(o)}return i}function q(t,e,s=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],l=o.value,h=H(t,l);let a=null;null===h?s&&(a=new P(()=>l),a.targetName=o.name):a=R(h),null!==a&&(e.removeAttributeNode(o),n--,r--,t.addFactory(a))}}function Q(t,e,s){const i=H(t,e.textContent);if(null!==i){let n=e;for(let r=0,o=i.length;r<o;++r){const o=i[r],l=0===r?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof o?l.textContent=o:(l.textContent=" ",t.captureContentBinding(o)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function U(t,e){const s=t.content;document.adoptNode(s);const i=j.borrow(e);q(i,t,!0);const n=i.behaviorFactories;i.reset();const r=c.createTemplateWalker(s);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:q(i,o);break;case 3:Q(i,o,r);break;case 8:c.isMarker(o)&&i.addFactory(e[c.extractDirectiveIndexFromMarker(o)])}let l=0;(c.isMarker(s.firstChild)||1===s.childNodes.length&&e.length)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const h=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:h,hostBehaviorFactories:n,targetOffset:l}}const W=document.createRange();class D{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,r=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(r)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,r=s.length;n<r;++n){const r=s[n];r.unbind(i),r.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){W.setStartBefore(t[0].firstChild),W.setEndAfter(t[t.length-1].lastChild),W.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class G{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=c.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=U(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=c.createTemplateWalker(e);let r=0,o=this.targetOffset,l=n.nextNode();for(let t=s.length;r<t;++r){const t=s[r],e=t.targetIndex;for(;null!==l;){if(o===e){i[r]=t.createBehavior(l);break}l=n.nextNode(),o++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++r)i[r]=e[s].createBehavior(t)}return new D(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,w),i.appendTo(e),i}}const J=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function K(t,...e){const s=[];let i="";for(let n=0,r=t.length-1;n<r;++n){const r=t[n];let o=e[n];if(i+=r,o instanceof G){const t=o;o=()=>t}if("function"==typeof o&&(o=new P(o)),o instanceof B){const t=J.exec(r);null!==t&&(o.targetName=t[2])}o instanceof S?(i+=o.createPlaceholder(s.length),s.push(o)):i+=o}return i+=t[t.length-1],new G(i,s)}class X{constructor(){this.targets=new WeakSet}addStylesTo(t){this.targets.add(t)}removeStylesFrom(t){this.targets.delete(t)}isAttachedTo(t){return this.targets.has(t)}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}}function Y(t){return t.map(t=>t instanceof X?Y(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function Z(t){return t.map(t=>t instanceof X?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}X.create=(()=>{if(c.supportsAdoptedStyleSheets){const t=new Map;return e=>new tt(e,t)}return t=>new st(t)})();class tt extends X{constructor(t,e){super(),this.styles=t,this.styleSheetCache=e,this._styleSheets=void 0,this.behaviors=Z(t)}get styleSheets(){if(void 0===this._styleSheets){const t=this.styles,e=this.styleSheetCache;this._styleSheets=Y(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}return this._styleSheets}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets],super.addStylesTo(t)}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t)),super.removeStylesFrom(t)}}let et=0;class st extends X{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=Z(t),this.styleSheets=Y(t),this.styleClass="fast-style-class-"+ ++et}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t=this.normalizeTarget(t);for(let i=0;i<e.length;i++){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.append(n)}super.addStylesTo(t)}removeStylesFrom(t){const e=(t=this.normalizeTarget(t)).querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s]);super.removeStylesFrom(t)}isAttachedTo(t){return super.isAttachedTo(this.normalizeTarget(t))}normalizeTarget(t){return t===document?document.body:t}}const it={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},nt={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class rt{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=it)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return v.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||c.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;c.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":c.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new rt(t,i)):s.push(new rt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function ot(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const lt={mode:"open"},ht={},at=s.getById(4,()=>{const t=new Map;return Object.freeze({register:e=>!t.has(e.type)&&(t.set(e.type,e),!0),getByType:e=>t.get(e)})});class ct{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=rt.collect(t,e.attributes),i=new Array(s.length),n={},r={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,r[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=r,this.shadowOptions=void 0===e.shadowOptions?lt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},lt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?ht:Object.assign(Object.assign({},ht),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?X.create(e.styles):e.styles instanceof X?e.styles:X.create([e.styles])}get isDefined(){return!!at.getByType(this.type)}define(t=customElements){const e=this.type;if(at.register(this)){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)v.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0})}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}}ct.forType=at.getByType;const dt=new WeakMap,ut={bubbles:!0,composed:!0,cancelable:!0};function ft(t){return t.shadowRoot||dt.get(t)||null}class gt extends b{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&dt.set(t,e)}const i=v.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,r=t[n];void 0!==r&&(delete t[n],e[n]=r)}}}get isConnected(){return v.track(this,"isConnected"),this._isConnected}setIsConnected(t){this._isConnected=t,v.notify(this,"isConnected")}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=ft(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.append(t);else if(!t.isAttachedTo(e)){const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=ft(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else if(t.isAttachedTo(e)){const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}addBehaviors(t){const e=this.behaviors||(this.behaviors=new Map),s=t.length,i=[];for(let n=0;n<s;++n){const s=t[n];e.has(s)?e.set(s,e.get(s)+1):(e.set(s,1),i.push(s))}if(this._isConnected){const t=this.element;for(let e=0;e<i.length;++e)i[e].bind(t,w)}}removeBehaviors(t,e=!1){const s=this.behaviors;if(null===s)return;const i=t.length,n=[];for(let r=0;r<i;++r){const i=t[r];if(s.has(i)){const t=s.get(i)-1;0===t||e?s.delete(i)&&n.push(i):s.set(i,t)}}if(this._isConnected){const t=this.element;for(let e=0;e<n.length;++e)n[e].unbind(t)}}onConnectedCallback(){if(this._isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,w);const e=this.behaviors;if(null!==e)for(const[s]of e)s.bind(t,w);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(const[s]of e)s.unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this._isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},ut),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=ft(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||c.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=ct.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new gt(t,s)}}function pt(t){return class extends t{constructor(){super(),gt.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const bt=Object.assign(pt(HTMLElement),{from:t=>pt(t),define:(t,e)=>new ct(t,e).define().type});function vt(t){return function(e){new ct(e,t).define()}}class mt{createCSS(){return""}createBehavior(){}}function yt(t,e){const s=[];let i="";const n=[];for(let r=0,o=t.length-1;r<o;++r){i+=t[r];let o=e[r];if(o instanceof mt){const t=o.createBehavior();o=o.createCSS(),t&&n.push(t)}o instanceof X||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),{styles:s,behaviors:n}}function Ct(t,...e){const{styles:s,behaviors:i}=yt(t,e),n=X.create(s);return i.length&&n.withBehaviors(...i),n}class xt extends mt{constructor(t,e){super(),this.behaviors=e,this.css="";const s=t.reduce((t,e)=>("string"==typeof e?this.css+=e:t.push(e),t),[]);s.length&&(this.styles=X.create(s))}createBehavior(){return this}createCSS(){return this.css}bind(t){this.styles&&t.$fastController.addStyles(this.styles),this.behaviors.length&&t.$fastController.addBehaviors(this.behaviors)}unbind(t){this.styles&&t.$fastController.removeStyles(this.styles),this.behaviors.length&&t.$fastController.removeBehaviors(this.behaviors)}}function wt(t,...e){const{styles:s,behaviors:i}=yt(t,e);return new xt(s,i)}function St(t,e,s){return{index:t,removed:e,addedCount:s}}function Bt(t,e,s,n,r,o){let l=0,h=0;const a=Math.min(s-e,o-r);if(0===e&&0===r&&(l=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,n,a)),s===t.length&&o===n.length&&(h=function(t,e,s){let i=t.length,n=e.length,r=0;for(;r<s&&t[--i]===e[--n];)r++;return r}(t,n,a-l)),r+=l,o-=h,(s-=h)-(e+=l)==0&&o-r==0)return i;if(e===s){const t=St(e,[],0);for(;r<o;)t.removed.push(n[r++]);return[t]}if(r===o)return[St(e,[],s-e)];const c=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const r=t[e-1][s-1],o=t[e-1][s],l=t[e][s-1];let h;h=o<l?o<r?o:r:l<r?l:r,h===r?(r===i?n.push(0):(n.push(1),i=r),e--,s--):h===o?(n.push(3),e--,i=o):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,r){const o=r-n+1,l=s-e+1,h=new Array(o);let a,c;for(let t=0;t<o;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<o;++s)for(let r=1;r<l;++r)t[e+r-1]===i[n+s-1]?h[s][r]=h[s-1][r-1]:(a=h[s-1][r]+1,c=h[s][r-1]+1,h[s][r]=a<c?a:c);return h}(t,e,s,n,r,o)),d=[];let u=void 0,f=e,g=r;for(let t=0;t<c.length;++t)switch(c[t]){case 0:void 0!==u&&(d.push(u),u=void 0),f++,g++;break;case 1:void 0===u&&(u=St(f,[],0)),u.addedCount++,f++,u.removed.push(n[g]),g++;break;case 2:void 0===u&&(u=St(f,[],0)),u.addedCount++,f++;break;case 3:void 0===u&&(u=St(f,[],0)),u.removed.push(n[g]),g++}return void 0!==u&&d.push(u),d}const Tt=Array.prototype.push;function Ot(t,e,s,i){const n=St(e,s,i);let r=!1,o=0;for(let e=0;e<t.length;e++){const s=t[e];if(s.index+=o,r)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,o-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);Tt.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);Tt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else r=!0}else if(n.index<s.index){r=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,o+=i}}var l,h,a,c;r||t.push(n)}function At(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Ot(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat(Bt(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Nt=!1;function kt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class Vt extends p{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,Reflect.defineProperty(t,"$fastController",{value:this,enumerable:!1})}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,c.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,c.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?At(this.source,t):Bt(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function Ft(){if(Nt)return;Nt=!0,v.setArrayObserverFactory(t=>new Vt(t));const t=Array.prototype;if(t.$fastPatch)return;Reflect.defineProperty(t,"$fastPatch",{value:1,enumerable:!1});const e=t.pop,s=t.push,i=t.reverse,n=t.shift,r=t.sort,o=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(St(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(kt(St(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(St(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=r.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=o.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(kt(St(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(kt(St(0,[],arguments.length),this)),t}}class It{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function $t(t){return new T("fast-ref",It,t)}function _t(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const Mt=Object.freeze({positioning:!1,recycle:!0});function Pt(t,e,s,i){t.bind(e[s],i)}function Et(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Lt{constructor(t,e,s,i,n,r){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=r,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Pt,this.itemsBindingObserver=v.binding(e,this,s),this.templateBindingObserver=v.binding(i,this,n),r.positioning&&(this.bindView=Et)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.childContext.parentContext=this.originalContext,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(!0),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(t=!1){if(!this.items)return void(this.items=i);const e=this.itemsObserver,s=this.itemsObserver=v.getNotifier(this.items),n=e!==s;n&&null!==e&&e.unsubscribe(this),(n||t)&&s.subscribe(this)}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let r=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],o=n.removed;i.push(...s.splice(n.index+r,o.length)),r-=n.addedCount}const o=this.items,l=this.template;for(let r=0,h=t.length;r<h;++r){const h=t[r];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],r=t?t.firstChild:this.location,h=this.options.recycle&&i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,o,a,e),h.insertBefore(r)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,r=this.bindView;let o=e.length,l=this.views,h=l.length;if((0===o||t)&&(D.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(o);for(let t=0;t<o;++t){const o=i.create();r(o,e,t,s),l[t]=o,o.insertBefore(n)}}else{let t=0;for(;t<o;++t)if(t<h){r(l[t],e,t,s)}else{const o=i.create();r(o,e,t,s),l.push(o),o.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,o=a.length;t<o;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class jt extends S{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=c.createBlockPlaceholder,Ft(),this.isItemsBindingVolatile=v.isVolatileBinding(t),this.isTemplateBindingVolatile=v.isVolatileBinding(e)}createBehavior(t){return new Lt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Rt(t,e,s=Mt){return new jt(t,"function"==typeof e?e:()=>e,s)}function zt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class Ht{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=v.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(i),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class qt extends Ht{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function Qt(t){return"string"==typeof t&&(t={property:t}),new T("fast-slotted",qt,t)}class Ut extends Ht{constructor(t,e){super(t,e),this.observer=null,e.childList=!0}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function Wt(t){return"string"==typeof t&&(t={property:t}),new T("fast-children",Ut,t)}export{t as $global,T as AttachedBehaviorHTMLDirective,rt as AttributeDefinition,E as BindingBehavior,mt as CSSDirective,Ut as ChildrenBehavior,gt as Controller,c as DOM,X as ElementStyles,x as ExecutionContext,s as FAST,bt as FASTElement,ct as FASTElementDefinition,P as HTMLBindingDirective,S as HTMLDirective,D as HTMLView,v as Observable,b as PropertyChangeNotifier,It as RefBehavior,Lt as RepeatBehavior,jt as RepeatDirective,qt as SlottedBehavior,p as SubscriberSet,B as TargetedHTMLDirective,G as ViewTemplate,ot as attr,it as booleanConverter,Wt as children,U as compileTemplate,Ct as css,wt as cssPartial,vt as customElement,w as defaultExecutionContext,zt as elements,i as emptyArray,Ft as enableArrayObservation,K as html,nt as nullableNumberConverter,m as observable,$t as ref,Rt as repeat,Qt as slotted,y as volatile,_t as when};
+const t=function(){if("undefined"!=typeof globalThis)return globalThis;if("undefined"!=typeof global)return global;if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;try{return new Function("return this")()}catch(t){return{}}}();void 0===t.trustedTypes&&(t.trustedTypes={createPolicy:(t,e)=>e});const e={configurable:!1,enumerable:!1,writable:!1};void 0===t.FAST&&Reflect.defineProperty(t,"FAST",Object.assign({value:Object.create(null)},e));const s=t.FAST;if(void 0===s.getById){const t=Object.create(null);Reflect.defineProperty(s,"getById",Object.assign({value(e,s){let i=t[e];return void 0===i&&(i=s?t[e]=s():null),i}},e))}const i=Object.freeze([]),n=t.FAST.getById(1,()=>{const e=[],s=[];function i(){if(s.length)throw s.shift()}function n(t){try{t.call()}catch(t){s.push(t),setTimeout(i,0)}}function r(){let t=0;for(;t<e.length;)if(n(e[t]),t++,t>1024){for(let s=0,i=e.length-t;s<i;s++)e[s]=e[s+t];e.length-=t,t=0}e.length=0}return Object.freeze({enqueue:function(s){e.length<1&&t.requestAnimationFrame(r),e.push(s)},process:r})}),r=t.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let o=r;const l="fast-"+Math.random().toString(36).substring(2,8),h=l+"{",a="}"+l,c=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(o!==r)throw new Error("The HTML policy can only be set once.");o=t},createHTML:t=>o.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(l),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(l+":","")),createInterpolationPlaceholder:t=>`${h}${t}${a}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${l}:${t}--\x3e`,queueUpdate:n.enqueue,processUpdates:n.process,nextUpdate:()=>new Promise(n.enqueue),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});class d{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return void 0===this.spillover?this.sub1===t||this.sub2===t:-1!==this.spillover.indexOf(t)}subscribe(t){const e=this.spillover;if(void 0===e){if(this.has(t))return;if(void 0===this.sub1)return void(this.sub1=t);if(void 0===this.sub2)return void(this.sub2=t);this.spillover=[this.sub1,this.sub2,t],this.sub1=void 0,this.sub2=void 0}else{-1===e.indexOf(t)&&e.push(t)}}unsubscribe(t){const e=this.spillover;if(void 0===e)this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0);else{const s=e.indexOf(t);-1!==s&&e.splice(s,1)}}notify(t){const e=this.spillover,s=this.source;if(void 0===e){const e=this.sub1,i=this.sub2;void 0!==e&&e.handleChange(s,t),void 0!==i&&i.handleChange(s,t)}else for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}}class u{constructor(t){this.subscribers={},this.sourceSubscribers=null,this.source=t}notify(t){var e;const s=this.subscribers[t];void 0!==s&&s.notify(t),null===(e=this.sourceSubscribers)||void 0===e||e.notify(t)}subscribe(t,e){var s;if(e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new d(this.source)),s.subscribe(t)}else this.sourceSubscribers=null!==(s=this.sourceSubscribers)&&void 0!==s?s:new d(this.source),this.sourceSubscribers.subscribe(t)}unsubscribe(t,e){var s;if(e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}else null===(s=this.sourceSubscribers)||void 0===s||s.unsubscribe(t)}}const f=s.getById(2,()=>{const t=/(:|&&|\|\||if)/,e=new WeakMap,s=new WeakMap,i=c.queueUpdate;let n=void 0,r=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};function o(t){let s=t.$fastController||e.get(t);return void 0===s&&(Array.isArray(t)?s=r(t):e.set(t,s=new u(t))),s}function l(t){let e=s.get(t);if(void 0===e){let i=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==i;)e=s.get(i),i=Reflect.getPrototypeOf(i);e=void 0===e?[]:e.slice(0),s.set(t,e)}return e}class h{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==n&&n.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];if(i!==e){t[s]=e;const n=t[this.callback];"function"==typeof n&&n.call(t,i,e),o(t).notify(this.name)}}}class a extends d{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=n;n=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return n=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=this.needsQueue=!0}}watch(t,e){const s=this.last,i=o(t),r=null===s?this.first:{};if(r.propertySource=t,r.propertyName=e,r.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){let e;n=void 0,e=s.propertySource[s.propertyName],n=this,t===e&&(this.needsRefresh=!0)}s.next=r}this.last=r}handleChange(){this.needsQueue&&(this.needsQueue=!1,i(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}records(){let t=this.first;return{next:()=>{const e=t;return void 0===e?{value:void 0,done:!0}:(t=t.next,{value:e,done:!1})},[Symbol.iterator]:function(){return this}}}}return Object.freeze({setArrayObserverFactory(t){r=t},getNotifier:o,track(t,e){void 0!==n&&n.watch(t,e)},trackVolatile(){void 0!==n&&(n.needsRefresh=!0)},notify(t,e){o(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new h(e)),l(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors:l,binding(t,e,s=this.isVolatileBinding(t)){return new a(t,e,s)},isVolatileBinding:e=>t.test(e.toString())})});function p(t,e){f.defineProperty(t,e)}function g(t,e,s){return Object.assign({},s,{get:function(){return f.trackVolatile(),s.get.apply(this)}})}const b=s.getById(3,()=>{let t=null;return{get:()=>t,set(e){t=e}}});class v{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return b.get()}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}static setEvent(t){b.set(t)}}f.defineProperty(v.prototype,"index"),f.defineProperty(v.prototype,"length");const m=Object.seal(new v);class y{constructor(){this.targetIndex=0}}class C extends y{constructor(){super(...arguments),this.createPlaceholder=c.createInterpolationPlaceholder}}class x extends y{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return c.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function w(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=f.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function S(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function B(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function T(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function O(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function A(t){c.setAttribute(this.target,this.targetName,t)}function N(t){c.setBooleanAttribute(this.target,this.targetName,t)}function k(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function V(t){this.target[this.targetName]=t}function F(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,r=n.length;t<r;++t){const r=n[t];""!==r&&(e[r]=i,s.classList.add(r))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class I extends C{constructor(t){super(),this.binding=t,this.bind=w,this.unbind=B,this.updateTarget=A,this.isBindingVolatile=f.isVolatileBinding(this.binding)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=V,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>c.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=N;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=S,this.unbind=O;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=F)}}targetAtContent(){this.updateTarget=k,this.unbind=T}createBehavior(t){return new $(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class ${constructor(t,e,s,i,n,r,o){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=r,this.targetName=o}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){v.setEvent(t);const e=this.binding(this.source,this.context);v.setEvent(null),!0!==e&&t.preventDefault()}}let _=null;class M{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){_=this}static borrow(t){const e=_||new M;return e.directives=t,e.reset(),_=null,e}}function P(t){if(1===t.length)return t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,t.binding)),n=new I((t,e)=>{let n="";for(let r=0;r<s;++r)n+=i[r](t,e);return n});return n.targetName=e,n}const E=a.length;function L(t,e){const s=e.split(h);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],r=n.indexOf(a);let o;if(-1===r)o=n;else{const e=parseInt(n.substring(0,r));i.push(t.directives[e]),o=n.substring(r+E)}""!==o&&i.push(o)}return i}function j(t,e,s=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],l=o.value,h=L(t,l);let a=null;null===h?s&&(a=new I(()=>l),a.targetName=o.name):a=P(h),null!==a&&(e.removeAttributeNode(o),n--,r--,t.addFactory(a))}}function R(t,e,s){const i=L(t,e.textContent);if(null!==i){let n=e;for(let r=0,o=i.length;r<o;++r){const o=i[r],l=0===r?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof o?l.textContent=o:(l.textContent=" ",t.captureContentBinding(o)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function z(t,e){const s=t.content;document.adoptNode(s);const i=M.borrow(e);j(i,t,!0);const n=i.behaviorFactories;i.reset();const r=c.createTemplateWalker(s);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:j(i,o);break;case 3:R(i,o,r);break;case 8:c.isMarker(o)&&i.addFactory(e[c.extractDirectiveIndexFromMarker(o)])}let l=0;(c.isMarker(s.firstChild)||1===s.childNodes.length&&e.length)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const h=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:h,hostBehaviorFactories:n,targetOffset:l}}const H=document.createRange();class q{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,r=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(r)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,r=s.length;n<r;++n){const r=s[n];r.unbind(i),r.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){H.setStartBefore(t[0].firstChild),H.setEndAfter(t[t.length-1].lastChild),H.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class Q{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=c.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=z(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=c.createTemplateWalker(e);let r=0,o=this.targetOffset,l=n.nextNode();for(let t=s.length;r<t;++r){const t=s[r],e=t.targetIndex;for(;null!==l;){if(o===e){i[r]=t.createBehavior(l);break}l=n.nextNode(),o++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++r)i[r]=e[s].createBehavior(t)}return new q(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,m),i.appendTo(e),i}}const U=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function W(t,...e){const s=[];let i="";for(let n=0,r=t.length-1;n<r;++n){const r=t[n];let o=e[n];if(i+=r,o instanceof Q){const t=o;o=()=>t}if("function"==typeof o&&(o=new I(o)),o instanceof C){const t=U.exec(r);null!==t&&(o.targetName=t[2])}o instanceof y?(i+=o.createPlaceholder(s.length),s.push(o)):i+=o}return i+=t[t.length-1],new Q(i,s)}class D{constructor(){this.targets=new WeakSet}addStylesTo(t){this.targets.add(t)}removeStylesFrom(t){this.targets.delete(t)}isAttachedTo(t){return this.targets.has(t)}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}}function G(t){return t.map(t=>t instanceof D?G(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function J(t){return t.map(t=>t instanceof D?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}D.create=(()=>{if(c.supportsAdoptedStyleSheets){const t=new Map;return e=>new K(e,t)}return t=>new Y(t)})();class K extends D{constructor(t,e){super(),this.styles=t,this.styleSheetCache=e,this._styleSheets=void 0,this.behaviors=J(t)}get styleSheets(){if(void 0===this._styleSheets){const t=this.styles,e=this.styleSheetCache;this._styleSheets=G(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}return this._styleSheets}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets],super.addStylesTo(t)}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t)),super.removeStylesFrom(t)}}let X=0;class Y extends D{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=J(t),this.styleSheets=G(t),this.styleClass="fast-style-class-"+ ++X}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t=this.normalizeTarget(t);for(let i=0;i<e.length;i++){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.append(n)}super.addStylesTo(t)}removeStylesFrom(t){const e=(t=this.normalizeTarget(t)).querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s]);super.removeStylesFrom(t)}isAttachedTo(t){return super.isAttachedTo(this.normalizeTarget(t))}normalizeTarget(t){return t===document?document.body:t}}const Z={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},tt={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class et{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=Z)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return f.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||c.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;c.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":c.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new et(t,i)):s.push(new et(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function st(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const it={mode:"open"},nt={},rt=s.getById(4,()=>{const t=new Map;return Object.freeze({register:e=>!t.has(e.type)&&(t.set(e.type,e),!0),getByType:e=>t.get(e)})});class ot{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=et.collect(t,e.attributes),i=new Array(s.length),n={},r={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,r[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=r,this.shadowOptions=void 0===e.shadowOptions?it:null===e.shadowOptions?void 0:Object.assign(Object.assign({},it),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?nt:Object.assign(Object.assign({},nt),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?D.create(e.styles):e.styles instanceof D?e.styles:D.create([e.styles])}get isDefined(){return!!rt.getByType(this.type)}define(t=customElements){const e=this.type;if(rt.register(this)){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)f.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0})}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}}ot.forType=rt.getByType;const lt=new WeakMap,ht={bubbles:!0,composed:!0,cancelable:!0};function at(t){return t.shadowRoot||lt.get(t)||null}class ct extends u{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&lt.set(t,e)}const i=f.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,r=t[n];void 0!==r&&(delete t[n],e[n]=r)}}}get isConnected(){return f.track(this,"isConnected"),this._isConnected}setIsConnected(t){this._isConnected=t,f.notify(this,"isConnected")}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=at(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.append(t);else if(!t.isAttachedTo(e)){const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=at(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else if(t.isAttachedTo(e)){const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}addBehaviors(t){const e=this.behaviors||(this.behaviors=new Map),s=t.length,i=[];for(let n=0;n<s;++n){const s=t[n];e.has(s)?e.set(s,e.get(s)+1):(e.set(s,1),i.push(s))}if(this._isConnected){const t=this.element;for(let e=0;e<i.length;++e)i[e].bind(t,m)}}removeBehaviors(t,e=!1){const s=this.behaviors;if(null===s)return;const i=t.length,n=[];for(let r=0;r<i;++r){const i=t[r];if(s.has(i)){const t=s.get(i)-1;0===t||e?s.delete(i)&&n.push(i):s.set(i,t)}}if(this._isConnected){const t=this.element;for(let e=0;e<n.length;++e)n[e].unbind(t)}}onConnectedCallback(){if(this._isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,m);const e=this.behaviors;if(null!==e)for(const[s]of e)s.bind(t,m);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(const[s]of e)s.unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this._isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},ht),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=at(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||c.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=ot.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new ct(t,s)}}function dt(t){return class extends t{constructor(){super(),ct.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const ut=Object.assign(dt(HTMLElement),{from:t=>dt(t),define:(t,e)=>new ot(t,e).define().type});function ft(t){return function(e){new ot(e,t).define()}}class pt{createCSS(){return""}createBehavior(){}}function gt(t,e){const s=[];let i="";const n=[];for(let r=0,o=t.length-1;r<o;++r){i+=t[r];let o=e[r];if(o instanceof pt){const t=o.createBehavior();o=o.createCSS(),t&&n.push(t)}o instanceof D||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),{styles:s,behaviors:n}}function bt(t,...e){const{styles:s,behaviors:i}=gt(t,e),n=D.create(s);return i.length&&n.withBehaviors(...i),n}class vt extends pt{constructor(t,e){super(),this.behaviors=e,this.css="";const s=t.reduce((t,e)=>("string"==typeof e?this.css+=e:t.push(e),t),[]);s.length&&(this.styles=D.create(s))}createBehavior(){return this}createCSS(){return this.css}bind(t){this.styles&&t.$fastController.addStyles(this.styles),this.behaviors.length&&t.$fastController.addBehaviors(this.behaviors)}unbind(t){this.styles&&t.$fastController.removeStyles(this.styles),this.behaviors.length&&t.$fastController.removeBehaviors(this.behaviors)}}function mt(t,...e){const{styles:s,behaviors:i}=gt(t,e);return new vt(s,i)}function yt(t,e,s){return{index:t,removed:e,addedCount:s}}function Ct(t,e,s,n,r,o){let l=0,h=0;const a=Math.min(s-e,o-r);if(0===e&&0===r&&(l=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,n,a)),s===t.length&&o===n.length&&(h=function(t,e,s){let i=t.length,n=e.length,r=0;for(;r<s&&t[--i]===e[--n];)r++;return r}(t,n,a-l)),r+=l,o-=h,(s-=h)-(e+=l)==0&&o-r==0)return i;if(e===s){const t=yt(e,[],0);for(;r<o;)t.removed.push(n[r++]);return[t]}if(r===o)return[yt(e,[],s-e)];const c=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const r=t[e-1][s-1],o=t[e-1][s],l=t[e][s-1];let h;h=o<l?o<r?o:r:l<r?l:r,h===r?(r===i?n.push(0):(n.push(1),i=r),e--,s--):h===o?(n.push(3),e--,i=o):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,r){const o=r-n+1,l=s-e+1,h=new Array(o);let a,c;for(let t=0;t<o;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<o;++s)for(let r=1;r<l;++r)t[e+r-1]===i[n+s-1]?h[s][r]=h[s-1][r-1]:(a=h[s-1][r]+1,c=h[s][r-1]+1,h[s][r]=a<c?a:c);return h}(t,e,s,n,r,o)),d=[];let u=void 0,f=e,p=r;for(let t=0;t<c.length;++t)switch(c[t]){case 0:void 0!==u&&(d.push(u),u=void 0),f++,p++;break;case 1:void 0===u&&(u=yt(f,[],0)),u.addedCount++,f++,u.removed.push(n[p]),p++;break;case 2:void 0===u&&(u=yt(f,[],0)),u.addedCount++,f++;break;case 3:void 0===u&&(u=yt(f,[],0)),u.removed.push(n[p]),p++}return void 0!==u&&d.push(u),d}const xt=Array.prototype.push;function wt(t,e,s,i){const n=yt(e,s,i);let r=!1,o=0;for(let e=0;e<t.length;e++){const s=t[e];if(s.index+=o,r)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,o-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);xt.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);xt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else r=!0}else if(n.index<s.index){r=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,o+=i}}var l,h,a,c;r||t.push(n)}function St(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];wt(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat(Ct(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Bt=!1;function Tt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class Ot extends d{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,Reflect.defineProperty(t,"$fastController",{value:this,enumerable:!1})}subscribe(t){this.flush(),super.subscribe(t)}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,c.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,c.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?St(this.source,t):Ct(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function At(){if(Bt)return;Bt=!0,f.setArrayObserverFactory(t=>new Ot(t));const t=Array.prototype;if(t.$fastPatch)return;Reflect.defineProperty(t,"$fastPatch",{value:1,enumerable:!1});const e=t.pop,s=t.push,i=t.reverse,n=t.shift,r=t.sort,o=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(yt(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Tt(yt(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(yt(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=r.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=o.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Tt(yt(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Tt(yt(0,[],arguments.length),this)),t}}class Nt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function kt(t){return new x("fast-ref",Nt,t)}function Vt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const Ft=Object.freeze({positioning:!1,recycle:!0});function It(t,e,s,i){t.bind(e[s],i)}function $t(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class _t{constructor(t,e,s,i,n,r){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=r,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=It,this.itemsBindingObserver=f.binding(e,this,s),this.templateBindingObserver=f.binding(i,this,n),r.positioning&&(this.bindView=$t)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.childContext.parentContext=this.originalContext,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(!0),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(t=!1){if(!this.items)return void(this.items=i);const e=this.itemsObserver,s=this.itemsObserver=f.getNotifier(this.items),n=e!==s;n&&null!==e&&e.unsubscribe(this),(n||t)&&s.subscribe(this)}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let r=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],o=n.removed;i.push(...s.splice(n.index+r,o.length)),r-=n.addedCount}const o=this.items,l=this.template;for(let r=0,h=t.length;r<h;++r){const h=t[r];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],r=t?t.firstChild:this.location,h=this.options.recycle&&i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,o,a,e),h.insertBefore(r)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,r=this.bindView;let o=e.length,l=this.views,h=l.length;if(0!==o&&!t&&this.options.recycle||(q.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(o);for(let t=0;t<o;++t){const o=i.create();r(o,e,t,s),l[t]=o,o.insertBefore(n)}}else{let t=0;for(;t<o;++t)if(t<h){r(l[t],e,t,s)}else{const o=i.create();r(o,e,t,s),l.push(o),o.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,o=a.length;t<o;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class Mt extends y{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=c.createBlockPlaceholder,At(),this.isItemsBindingVolatile=f.isVolatileBinding(t),this.isTemplateBindingVolatile=f.isVolatileBinding(e)}createBehavior(t){return new _t(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Pt(t,e,s=Ft){return new Mt(t,"function"==typeof e?e:()=>e,s)}function Et(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class Lt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=f.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(i),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class jt extends Lt{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function Rt(t){return"string"==typeof t&&(t={property:t}),new x("fast-slotted",jt,t)}class zt extends Lt{constructor(t,e){super(t,e),this.observer=null,e.childList=!0}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function Ht(t){return"string"==typeof t&&(t={property:t}),new x("fast-children",zt,t)}export{t as $global,x as AttachedBehaviorHTMLDirective,et as AttributeDefinition,$ as BindingBehavior,pt as CSSDirective,zt as ChildrenBehavior,ct as Controller,c as DOM,D as ElementStyles,v as ExecutionContext,s as FAST,ut as FASTElement,ot as FASTElementDefinition,I as HTMLBindingDirective,y as HTMLDirective,q as HTMLView,f as Observable,u as PropertyChangeNotifier,Nt as RefBehavior,_t as RepeatBehavior,Mt as RepeatDirective,jt as SlottedBehavior,d as SubscriberSet,C as TargetedHTMLDirective,Q as ViewTemplate,st as attr,Z as booleanConverter,Ht as children,z as compileTemplate,bt as css,mt as cssPartial,ft as customElement,m as defaultExecutionContext,Et as elements,i as emptyArray,At as enableArrayObservation,W as html,tt as nullableNumberConverter,p as observable,kt as ref,Pt as repeat,Rt as slotted,g as volatile,Vt as when};

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.8.1"
+      "packageVersion": "7.23.1"
     }
   ]
 }

package/docs/guide/declaring-templates.md

@@ -3,6 +3,7 @@ id: declaring-templates
 title: Declaring Templates
 sidebar_label: Declaring Templates
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/declaring-templates.md
+description: While you can create and update nodes in the Shadow DOM manually, FASTElement provides a streamlined templating system for the most common rendering scenarios.
 ---
 
 ## Basic templates
@@ -143,7 +144,7 @@ When binding to `class`, the underlying engine will not over-write classes added
 
 **Example: Nullish value**
 
-Some cases may occur where an attribute needs to have a value when used however not present if unused. These are different than boolean attributes by where their presence alone triggers their effect. In this situation a nullish value (`null` or `undefined`) may be provided so the attribute won't exist in that condition.
+Some cases may occur where an attribute needs to have a value when used however not present if unused. These are different than boolean attributes by where their presence alone triggers their effect. In this situation, a nullish value (`null` or `undefined`) may be provided so the attribute won't exist in that condition.
 
 ```html
 <div aria-hidden="${x => x.isViewable ? 'true' : null}"></div>
@@ -217,13 +218,13 @@ The second example demonstrates an important characteristic of the templating en
 It is during the `connectedCallback` phase of the Custom Element lifecycle that `FASTElement` creates templates and binds the resulting view. The creation of the template only occurs the first time the element is connected, while binding happens every time the element is connected (with unbinding happening during the `disconnectedCallback` for symmetry).
 
 :::note
-In the future we're planning new optimizations that will enable us to safely determine when we do not need to unbind/rebind certain views.
+In the future, we're planning new optimizations that will enable us to safely determine when we do not need to unbind/rebind certain views.
 :::
 
 In most cases, the template that `FASTElement` renders is determined by the `template` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveTemplate()` that returns a template instance. If this method is present, it will be called during `connectedCallback` to obtain the template to use. This allows the element author to dynamically select completely different templates based on the state of the element at the time of connection.
 
-In addition to dynamic template selection during the `connectedCallback`, the `$fastController` property of `FASTElement` enables dynamically changing the template at any time through setting the controller's `template` property to any valid template.
+In addition to dynamic template selection during the `connectedCallback`, the `$fastController` property of `FASTElement` enables dynamically changing the template at any time by setting the controller's `template` property to any valid template.
 
 :::tip
-Check out [our Cheat Sheet](/docs/resources/cheat-sheet#bindings) for a quick guide on bindings.
+Check out [our Cheat Sheet](../resources/cheat-sheet.md#bindings) for a quick guide on bindings.
 :::

package/docs/guide/defining-elements.md

@@ -3,6 +3,7 @@ id: defining-elements
 title: Defining Elements
 sidebar_label: Defining Elements
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/defining-elements.md
+description: To define a custom element, begin by creating a class that extends FASTElement and decorate it with the @customElement decorator, providing the element name.
 ---
 
 ## Basic elements
@@ -57,7 +58,7 @@ export class NameTag extends FASTElement {
 To add attributes to your HTML element, create properties decorated by the `@attr` decorator. All attributes defined this way will be automatically registered with the platform so that they can be updated through the browser's native `setAttribute` API as well as the property. You can optionally add a method with the naming convention *propertyName*Changed to your class (e.g. `greeting` and `greetingChanged()`), and this method will be called whenever your property changes, whether it changes through the property or the attribute API.
 
 :::note
-All properties decorated with `@attr` are also *observable*. See [observables and state](./observables-and-state) for information about how observables enable efficient rendering.
+All properties decorated with `@attr` are also *observable*. See [observables and state](./observables-and-state.md) for information about how observables enable efficient rendering.
 :::
 
 By default, anything extending from `FASTElement` will automatically have a `ShadowRoot` attached in order to enable encapsulated rendering. 
@@ -141,7 +142,7 @@ export class MyCounter extends FASTElement {
 
 ## The element lifecycle
 
-All Web Components support a series of lifecycle events that you can tap into to execute custom code at specific points in time. `FASTElement` implements several of these callbacks automatically in order to enable features of its templating engine (described in [declaring templates](./declaring-templates)). However, you can override them to provide your own code. Here's an example of how you would execute custom code when your element is inserted into the DOM.
+All Web Components support a series of lifecycle events that you can tap into to execute custom code at specific points in time. `FASTElement` implements several of these callbacks automatically in order to enable features of its templating engine (described in [declaring templates](./declaring-templates.md)). However, you can override them to provide your own code. Here's an example of how you would execute custom code when your element is inserted into the DOM.
 
 **Example: Tapping into the Custom Element Lifecycle**
 

package/docs/guide/leveraging-css.md

@@ -3,6 +3,7 @@ id: leveraging-css
 title: Leveraging CSS
 sidebar_label: Leveraging CSS
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/leveraging-css.md
+description: Similar to HTML, FASTElement provides a css tagged template helper to allow creating and re-using CSS.
 ---
 
 ## Basic styles

package/docs/guide/next-steps.md

@@ -3,10 +3,11 @@ id: next-steps
 title: Next Steps
 sidebar_label: Next Steps
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/next-steps.md
+description: Now that you're familiar with the robust and powerful features of FASTElement, you're ready to build your own components and apps.
 ---
 
 We've seen how to use `FASTElement` to declaratively build Web Components. In addition to the basics of element and attribute definition, `FASTElement` also provides a way to declare templates capable of high-performance rendering, and efficient, incremental batched updates. Finally, CSS can easily be associated with an element in a way that leverages core platform optimizations for performance and low memory allocation.
 
-Now that you're familiar with the robust and powerful features of `FASTElement`, you're ready to build your own components and apps. But you don't have to start from scratch there either! If you haven't already explored them, check out our [FAST Components](../components/getting-started), which provide all the basic UI building-blocks you'd expect in a modern component library. You can also leverage the same adaptive design system that our own components use to enable robust theming throughout all you create. Read more on that in [Styling Components](/docs/design-systems/fast-frame#configuring-components). Finally, you'll want to take advantage of a modern toolset by installing [a powerful editor and plugins](../tools/vscode).
+Now that you're familiar with the robust and powerful features of `FASTElement`, you're ready to build your own components and apps. But you don't have to start from scratch there either! If you haven't already explored them, check out our [FAST Components](../components/getting-started.md), which provide all the basic UI building-blocks you'd expect in a modern component library. You can also leverage the same adaptive design system that our own components use to enable robust theming throughout all you create. Read more on that in [Styling Components](../design-systems/fast-frame.md#configuring-components). Finally, you'll want to take advantage of a modern toolset by installing [a powerful editor and plugins](../tools/vscode.md).
 
-For a quick reference, check out [our Cheat Sheet](/docs/resources/cheat-sheet).
+For a quick reference, check out [our Cheat Sheet](../resources/cheat-sheet.md).

package/docs/guide/observables-and-state.md

@@ -3,6 +3,7 @@ id: observables-and-state
 title: Observables and State
 sidebar_label: Observables and State
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/observables-and-state.md
+description: To enable binding tracking and change notification, properties must be decorated with either @attr or @observable.
 ---
 
 ## Reactivity
@@ -122,7 +123,7 @@ export class Person {
 
 ### External observation
 
-Decorated properties can be subscribed to, to receive notification of changes in the property value. The templating engine uses this, but you can also directly subscribe as well. Here's how you would subscribe to changes in the `name` property of a `Person` class:
+Decorated properties can be subscribed to, to receive notification of changes in the property value. The templating engine uses this, but you can also directly subscribe. Here's how you would subscribe to changes in the `name` property of a `Person` class:
 
 **Example: Subscribing to an Observable**
 

package/docs/guide/using-directives.md

@@ -3,6 +3,7 @@ id: using-directives
 title: Using Directives
 sidebar_label: Using Directives
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/using-directives.md
+description: In addition to declaring dynamic parts of templates with expressions, you also have access to several powerful directives, which aid in common scenarios.
 ---
 
 In addition to declaring dynamic parts of templates with expressions, you also have access to several powerful *directives*, which aid in common scenarios.
@@ -508,7 +509,7 @@ If using the `subtree` option for `children` then a `selector` is *required* in
 
 ### The `slotted` directive
 
-Sometimes you may want references to all nodes that are assigned to a particular slot. To accomplish this, use the `slotted` directive. (For more on slots, see [Working with Shadow DOM](./working-with-shadow-dom).)
+Sometimes you may want references to all nodes that are assigned to a particular slot. To accomplish this, use the `slotted` directive. (For more on slots, see [Working with Shadow DOM](./working-with-shadow-dom.md).)
 
 ```ts
 import { FASTElement, customElement, html, slotted } from '@microsoft/fast-element';

package/docs/guide/working-with-shadow-dom.md

@@ -3,6 +3,7 @@ id: working-with-shadow-dom
 title: Working with Shadow DOM
 sidebar_label: Working with Shadow DOM
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-element/docs/guide/working-with-shadow-dom.md
+description: See how our custom elements can be composed together with standard HTML or other custom elements.
 ---
 
 So far we've looked at how to define elements, how to define attributes on those elements, and how to control element rendering through declarative templates. However, we haven't yet seen how our custom elements can be composed together with standard HTML or other custom elements.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
   "sideEffects": false,
-  "version": "1.10.0",
+  "version": "1.10.3",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -46,13 +46,15 @@
     "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.8.1",
+    "@microsoft/api-extractor": "7.23.1",
     "@types/chai": "^4.2.11",
+    "@types/chai-spies": "^1.0.3",
     "@types/karma": "^5.0.0",
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "^1.15.2",
     "@types/web-ie11": "^0.0.0",
     "chai": "^4.2.0",
+    "chai-spies": "^1.0.0",
     "esm": "^3.2.25",
     "ignore-loader": "^0.1.2",
     "istanbul": "^0.4.5",