@cxl/build 1.0.0-beta.7 → 1.0.0

package/spec-browser.js

@@ -1,7 +1,1061 @@
-var d={},bt=Symbol("terminator");function he(t,e){let r=!1,n={error:o,unsubscribe:i,get closed(){return r},signal:new x,next(s){if(!r)try{t.next?.(s)}catch(c){o(c)}},complete(){if(!r)try{t.complete?.()}finally{i()}}};t.signal?.subscribe(i);function o(s){if(r)throw s;if(!t.error)throw i(),s;try{t.error(s)}finally{i()}}function i(){r||(r=!0,n.signal.next())}try{e?.(n)}catch(s){o(s)}return n}var l=class{__subscribe;constructor(e){this.__subscribe=e}then(e,r){return ye(this).then(e,r)}pipe(...e){return e.reduce((r,n)=>n(r),this)}subscribe(e){return he(!e||typeof e=="function"?{next:e}:e,this.__subscribe)}},g=class extends l{closed=!1;signal=new x;observers=new Set;constructor(){super(e=>this.onSubscribe(e))}next(e){if(!this.closed)for(let r of Array.from(this.observers))r.closed||r.next(e)}error(e){if(!this.closed){this.closed=!0;let r=!1,n;for(let o of Array.from(this.observers))try{o.error(e)}catch(i){r=!0,n=i}if(r)throw n}}complete(){this.closed||(this.closed=!0,Array.from(this.observers).forEach(e=>e.complete()),this.observers.clear())}onSubscribe(e){this.closed?e.complete():(this.observers.add(e),e.signal.subscribe(()=>this.observers.delete(e)))}},x=class extends l{closed=!1;observers=new Set;constructor(){super(e=>{this.closed?(e.next(),e.complete()):this.observers.add(e)})}next(){if(!this.closed){this.closed=!0;for(let e of Array.from(this.observers))e.closed||(e.next(),e.complete());this.observers.clear()}}},S=class extends g{queue=[];emitting=!1;next(e){if(!this.closed)if(this.emitting)this.queue.push(e);else{for(this.emitting=!0,super.next(e);this.queue.length;)super.next(this.queue.shift());this.emitting=!1}}},R=class extends g{currentValue;constructor(e){super(),this.currentValue=e}get value(){return this.currentValue}next(e){this.currentValue=e,super.next(e)}onSubscribe(e){let r=super.onSubscribe(e);return this.closed||e.next(this.currentValue),r}},M=class extends g{bufferSize;buffer=[];hasError=!1;lastError;constructor(e=1/0){super(),this.bufferSize=e}error(e){this.hasError=!0,this.lastError=e,super.error(e)}next(e){return this.buffer.length===this.bufferSize&&this.buffer.shift(),this.buffer.push(e),super.next(e)}onSubscribe(e){this.observers.add(e),this.buffer.forEach(r=>e.next(r)),this.hasError?e.error(this.lastError):this.closed&&e.complete(),e.signal.subscribe(()=>this.observers.delete(e))}},L=class extends g{$value=d;get hasValue(){return this.$value!==d}get value(){if(this.$value===d)throw new Error("Reference not initialized");return this.$value}next(e){return this.$value=e,super.next(e)}onSubscribe(e){!this.closed&&this.$value!==d&&e.next(this.$value),super.onSubscribe(e)}},O=class extends Error{message="No elements in sequence"};function H(...t){return new l(e=>{let r=0,n;function o(){let i=t[r++];i&&!e.closed?(n?.next(),i.subscribe({next:e.next,error:e.error,complete:o,signal:n=new x})):e.complete()}e.signal.subscribe(()=>n?.next()),o()})}function _(t){return new l(e=>{t().subscribe(e)})}function ge(t){return new l(e=>{for(let r of t)e.closed||e.next(r);e.complete()})}function $(...t){return ge(t)}function be(t){return new Promise((e,r)=>{let n=d;t.subscribe({next:o=>n=o,error:o=>r(o),complete:()=>e(n)})})}function ye(t){return be(t).then(e=>e===d?void 0:e)}function b(t,e){return f(r=>({next:t(r),unsubscribe:e}))}function f(t){return e=>new l(r=>{let n=t(r,e);r.signal.subscribe(()=>n.unsubscribe?.()),n.error||(n.error=r.error),n.complete||(n.complete=r.complete),n.signal=r.signal,e.subscribe(n)})}function V(t){return b(e=>r=>e.next(t(r)))}function we(t){let e=d;return b(r=>n=>{let o=t(n);o!==e&&(e=o,r.next(o))})}function ve(t,e){return f(r=>{let n=e,o=0;return{next(i){n=t(n,i,o++)},complete(){r.next(n),r.complete()}}})}function Ee(t){return f(e=>{let r=!0,n;return{next(o){r&&(r=!1,e.next(o),n=setTimeout(()=>r=!0,t))},unsubscribe:()=>clearTimeout(n)}})}function Fe(t){return new l(e=>{let r=setTimeout(()=>{e.next(),e.complete()},t);e.signal.subscribe(()=>clearTimeout(r))})}function Ce(t,e=Fe){return Q(r=>e(t).map(()=>r))}function Q(t){return e=>k(r=>{let n=!1,o=!1,i,s=()=>{i?.next(),n=!1,o&&r.complete()},c=new x;r.signal.subscribe(()=>{s(),c.next()}),e.subscribe({next(a){s(),i=new x,n=!0,t(a).subscribe({next:r.next,error:r.error,complete:s,signal:i})},error:r.error,complete(){o=!0,n||r.complete()},signal:c})})}function $e(t){return e=>k(r=>{let n=r.signal,o=0,i=0,s=!1;e.subscribe({next:c=>{o++,t(c).subscribe({next:r.next,error:r.error,complete:()=>{i++,s&&i===o&&r.complete()},signal:n})},error:r.error,complete(){s=!0,i===o&&r.complete()},signal:n})})}function ke(t){return f(e=>{let r=!0;return{next(n){r&&(r=!1,t(n).subscribe({next:e.next,error:e.error,complete:()=>r=!0,signal:e.signal}))}}})}function D(t){return b(e=>r=>{t(r)&&e.next(r)})}function Ae(t){return b(e=>r=>{t-- >0&&!e.closed&&e.next(r),(t<=0||e.closed)&&e.complete()})}function Se(t){return b(e=>r=>{!e.closed&&t(r)?e.next(r):e.complete()})}function De(){let t=!1;return f(e=>({next(r){t||(t=!0,e.next(r),e.complete())},complete(){e.closed||e.error(new O)}}))}function j(t){return b(e=>r=>{t(r),e.next(r)})}function Ie(t){return f((e,r)=>{let n,o={next:e.next,error(i){try{if(e.closed)return;let s=t(i,r);s&&(n?.next(),n=new x,s.subscribe({...o,signal:n}))}catch(s){e.error(s)}},unsubscribe:()=>n?.next()};return o})}function Pe(){return b(t=>{let e=d;return r=>{r!==e&&(e=r,t.next(r))}})}function Te(){return t=>{let e=new M(1),r=!1;return k(n=>{e.subscribe(n),r||(r=!0,t.subscribe(e))})}}function Ne(){return t=>{let e,r=0;function n(){--r===0&&e.signal.next()}return k(o=>{o.signal.subscribe(n),r++===0?(e=U(),e.subscribe(o),t.subscribe(e)):e.subscribe(o)})}}function ze(){return t=>{let e=new g,r,n,o=!1,i=!1;return k(s=>{i?(s.next(n),s.complete()):e.subscribe(s),r??=t.subscribe({next:c=>{o=!0,n=c},error:s.error,complete(){i=!0,o&&e.next(n),e.complete()},signal:s.signal})})}}function y(...t){return t.length===1?t[0]:new l(e=>{let r=t.length;for(let n of t)e.closed||n.subscribe({next:e.next,error:e.error,complete(){r--===1&&e.complete()},signal:e.signal})})}function Re(t){return f(e=>({next:e.next,unsubscribe:t}))}function Me(){return D(()=>!1)}var Z=new l(t=>t.complete());function ee(t){return new R(t)}function k(t){return new l(t)}function U(){return new L}var J={catchError:Ie,debounceTime:Ce,distinctUntilChanged:Pe,exhaustMap:ke,filter:D,finalize:Re,first:De,ignoreElements:Me,map:V,mergeMap:$e,publishLast:ze,reduce:ve,select:we,share:Ne,shareLatest:Te,switchMap:Q,take:Ae,takeWhile:Se,tap:j,throttleTime:Ee};for(let t in J)l.prototype[t]=function(...e){return this.pipe(J[t](...e))};function te(t,e,r){return new l(n=>{let o=n.next.bind(n);t.addEventListener(e,o,r),n.signal.subscribe(()=>t.removeEventListener(e,o,r))})}function Le(t){let e;return function(...r){e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{t.apply(this,r),e=0})}}function re(t){return f(e=>{let r=Le(o=>{e.closed||(t&&t(o),e.next(o),n&&e.complete())}),n=!1;return{next:r,complete:()=>n=!0}})}function q(t,e,r){return n=>H($(t?n.matches(t):!1),te(n,e).switchMap(()=>y($(!0),te(n,r).map(()=>t?n.matches(t):!1))))}var Et=q("","animationstart","animationend"),Ft=q("","mouseenter","mouseleave"),Ct=q(":focus,:focus-within","focusin","focusout");var Oe=j(t=>console.trace(t));l.prototype.log=function(){return this.pipe(Oe)};l.prototype.raf=function(t){return this.pipe(re(t))};var u=Symbol("bindings"),He={},v=Symbol("augments"),w=Symbol("parser"),G=class{bindings;messageHandlers;internals;attributes$=new S;wasConnected=!1;wasInitialized=!1;subscriptions;prebind;addMessageHandler(e){(this.messageHandlers??=new Set).add(e)}removeMessageHandler(e){this.messageHandlers?.delete(e)}message(e,r){let n=!1;if(this.messageHandlers)for(let o of this.messageHandlers)o.type===e&&(o.next(r),n||=o.stopPropagation);return n}add(e){if(this.wasConnected)throw new Error("Cannot bind connected component.");this.wasInitialized?(this.bindings??=[]).push(e):(this.prebind??=[]).push(e)}connect(){if(this.wasConnected=!0,!this.subscriptions&&(this.prebind||this.bindings)){let e=this.subscriptions=[];if(this.bindings)for(let r of this.bindings)e.push(r.subscribe());if(this.prebind)for(let r of this.prebind)e.push(r.subscribe())}}disconnect(){this.subscriptions?.forEach(e=>e.unsubscribe()),this.subscriptions=void 0}},I=Symbol("css"),m=class extends HTMLElement{static observedAttributes;static[v];static[w];[u]=new G;[I];connectedCallback(){this[u].wasInitialized=!0,this[u].wasConnected||this.constructor[v]?.forEach(e=>e(this)),this[u].connect()}disconnectedCallback(){this[u].disconnect()}attributeChangedCallback(e,r,n){let o=this.constructor[w]?.[e]??_e;r!==n&&(this[e]=o(n,this[e]))}};function _e(t,e){let r=e===!1||e===!0;return t===""?r?!0:"":t===null?r?!1:void 0:t}function ne(t,e){t.hasOwnProperty(v)||(t[v]=t[v]?.slice(0)??[]),t[v]?.push(e)}var Ve={mode:"open"};function K(t){return t.shadowRoot??t.attachShadow(Ve)}function oe(t,e){e instanceof Node?K(t).appendChild(e):t[u].add(e)}function je(t,e){e.length&&ne(t,r=>{for(let n of e){let o=n.call(t,r);o&&o!==r&&oe(r,o)}})}function Ue(t,e){He[t]=e,customElements.define(t,e)}function ie(t,{init:e,augment:r,tagName:n}){if(e)for(let o of e)o(t);r&&je(t,r),n&&Ue(n,t)}function qe(t,e){return t[u].attributes$.pipe(D(r=>r.attribute===e),V(()=>t[e]))}function P(t,e){return y(qe(t,e),_(()=>$(t[e])))}function Ye(t){let e=t.observedAttributes;return e&&!t.hasOwnProperty("observedAttributes")&&(e=t.observedAttributes?.slice(0)),t.observedAttributes=e||[]}function se(t,e,r){return r===!1||r===null||r===void 0?r=null:r===!0&&(r=""),r===null?t.removeAttribute(e):t.setAttribute(e,String(r)),r}function Ge(t,e,r){t.hasOwnProperty(w)||(t[w]={...t[w]}),t[w]&&(t[w][e]=r)}function F(t,e){return r=>{e?.observe!==!1&&Ye(r).push(t),e?.parse&&Ge(r,t,e.parse);let n=`$$${t}`,o=r.prototype,i=Object.getOwnPropertyDescriptor(o,t);i&&Object.defineProperty(o,n,i);let s=e?.persist,c={enumerable:!0,configurable:!1,get(){return this[n]},set(a){this[n]!==a?(this[n]=a,s?.(this,t,a),this[u].attributes$.next({target:this,attribute:t,value:a})):i?.set&&(s?.(this,t,a),this[n]=a)}};ne(r,a=>{if(i||(a[n]=a[t]),Object.defineProperty(a,t,c),s?.(a,t,a[t]),e?.render){let C=e.render(a);C&&oe(a,C)}})}}function ce(t){return F(t,{persist:se,observe:!0})}function Be(t,e){let r=document.createTextNode("");return t[u].add(e.tap(n=>r.textContent=n)),r}var Y=document.createDocumentFragment();function B(t,e,r=t){if(e!=null)if(Array.isArray(e)){for(let n of e)B(t,n,Y);r!==Y&&r.appendChild(Y)}else t instanceof m&&e instanceof l?r.appendChild(Be(t,e)):e instanceof Node?r.appendChild(e):t instanceof m&&typeof e=="function"?B(t,e(t),r):r.appendChild(document.createTextNode(e))}function Ke(t,e){for(let r in e){let n=e[r];t instanceof m?n instanceof l?t[u].add(r==="$"?n:n.tap(o=>t[r]=o)):r==="$"&&typeof n=="function"?t[u].add(n(t)):t[r]=n:t[r]=n}}function E(t,e,...r){if(t!==E&&typeof t=="function"&&!(t.prototype instanceof m))return r.length&&((e??={}).children=r),t(e);let n=t===E?document.createDocumentFragment():typeof t=="string"?document.createElement(t):new t;return e&&Ke(n,e),r.length&&B(n,r),n}var Nt=A(":host{display:contents}");var We=U(),zt=ee(""),Rt=A(`:host([disabled]) {
+// ../../ui-core/dist/ui/rx.js
+var Undefined = {};
+var Terminator = Symbol("terminator");
+function Subscriber(observer, subscribe) {
+  let closed = false;
+  const result = {
+    error: error2,
+    unsubscribe,
+    get closed() {
+      return closed;
+    },
+    signal: new Signal(),
+    next(val) {
+      if (closed)
+        return;
+      try {
+        observer.next?.(val);
+      } catch (e) {
+        error2(e);
+      }
+    },
+    complete() {
+      if (!closed) {
+        try {
+          observer.complete?.();
+        } finally {
+          unsubscribe();
+        }
+      }
+    }
+  };
+  observer.signal?.subscribe(unsubscribe);
+  function error2(e) {
+    if (!closed) {
+      if (!observer.error) {
+        unsubscribe();
+        throw e;
+      }
+      try {
+        observer.error(e);
+      } finally {
+        unsubscribe();
+      }
+    } else
+      throw e;
+  }
+  function unsubscribe() {
+    if (!closed) {
+      closed = true;
+      result.signal.next();
+    }
+  }
+  try {
+    subscribe?.(result);
+  } catch (e) {
+    error2(e);
+  }
+  return result;
+}
+var Observable = class {
+  __subscribe;
+  constructor(__subscribe) {
+    this.__subscribe = __subscribe;
+  }
+  /**
+   * The `then` method allows an Observable to act like a Promise.
+   * It converts the Observable's emissions into a Promise that resolves on completion.
+   */
+  then(resolve, reject) {
+    return toPromise(this).then(resolve, reject);
+  }
+  /**
+   * Used to stitch together functional operators into a chain.
+   */
+  pipe(...extra) {
+    return extra.reduce((prev, fn) => fn(prev), this);
+  }
+  /**
+   * Invokes an execution of an Observable and registers Observer handlers for notifications it will emit.
+   */
+  subscribe(next) {
+    const observer = !next || typeof next === "function" ? { next } : next;
+    return Subscriber(observer, this.__subscribe);
+  }
+};
+var Subject = class extends Observable {
+  closed = false;
+  signal = new Signal();
+  observers = /* @__PURE__ */ new Set();
+  constructor() {
+    super((subscriber) => this.onSubscribe(subscriber));
+  }
+  /**
+   * Emits a new value to all active subscribers if the Subject is not in a closed state.
+   * - Iterates over the list of current subscribers and calls their `next` method with the provided value.
+   * - Inactive or closed subscribers are skipped.
+   * - This ensures only active subscribers receive new emissions.
+   */
+  next(a) {
+    if (!this.closed) {
+      for (const s of Array.from(this.observers))
+        if (!s.closed)
+          s.next(a);
+    }
+  }
+  /*
+   * This method emits an error notification to all active subscribers and sets the Subject's
+   * closed state to `true`, preventing any further emissions.
+   */
+  error(e) {
+    if (!this.closed) {
+      this.closed = true;
+      let shouldThrow = false, lastError;
+      for (const s of Array.from(this.observers))
+        try {
+          s.error(e);
+        } catch (e2) {
+          shouldThrow = true;
+          lastError = e2;
+        }
+      if (shouldThrow)
+        throw lastError;
+    }
+  }
+  /*
+   * `complete` method sends a final completion notification to all active subscribers
+   * and marks the Subject as closed.
+   */
+  complete() {
+    if (!this.closed) {
+      this.closed = true;
+      Array.from(this.observers).forEach((s) => s.complete());
+      this.observers.clear();
+    }
+  }
+  onSubscribe(subscriber) {
+    if (this.closed)
+      subscriber.complete();
+    else {
+      this.observers.add(subscriber);
+      subscriber.signal.subscribe(() => this.observers.delete(subscriber));
+    }
+  }
+};
+var Signal = class extends Observable {
+  closed = false;
+  observers = /* @__PURE__ */ new Set();
+  constructor() {
+    super((subscriber) => {
+      if (this.closed) {
+        subscriber.next();
+        subscriber.complete();
+      } else
+        this.observers.add(subscriber);
+    });
+  }
+  next() {
+    if (!this.closed) {
+      this.closed = true;
+      for (const s of Array.from(this.observers))
+        if (!s.closed) {
+          s.next();
+          s.complete();
+        }
+      this.observers.clear();
+    }
+  }
+};
+var OrderedSubject = class extends Subject {
+  queue = [];
+  emitting = false;
+  next(a) {
+    if (this.closed)
+      return;
+    if (this.emitting)
+      this.queue.push(a);
+    else {
+      this.emitting = true;
+      super.next(a);
+      while (this.queue.length)
+        super.next(this.queue.shift());
+      this.emitting = false;
+    }
+  }
+};
+var BehaviorSubject = class extends Subject {
+  currentValue;
+  constructor(currentValue) {
+    super();
+    this.currentValue = currentValue;
+  }
+  get value() {
+    return this.currentValue;
+  }
+  next(val) {
+    this.currentValue = val;
+    super.next(val);
+  }
+  onSubscribe(subscription) {
+    const result = super.onSubscribe(subscription);
+    if (!this.closed)
+      subscription.next(this.currentValue);
+    return result;
+  }
+};
+var ReplaySubject = class extends Subject {
+  bufferSize;
+  buffer = [];
+  hasError = false;
+  lastError;
+  constructor(bufferSize = Infinity) {
+    super();
+    this.bufferSize = bufferSize;
+  }
+  error(val) {
+    this.hasError = true;
+    this.lastError = val;
+    super.error(val);
+  }
+  next(val) {
+    if (this.buffer.length === this.bufferSize)
+      this.buffer.shift();
+    this.buffer.push(val);
+    return super.next(val);
+  }
+  onSubscribe(subscriber) {
+    this.observers.add(subscriber);
+    this.buffer.forEach((val) => subscriber.next(val));
+    if (this.hasError)
+      subscriber.error(this.lastError);
+    else if (this.closed)
+      subscriber.complete();
+    subscriber.signal.subscribe(() => this.observers.delete(subscriber));
+  }
+};
+var Reference = class extends Subject {
+  $value = Undefined;
+  get hasValue() {
+    return this.$value !== Undefined;
+  }
+  get value() {
+    if (this.$value === Undefined)
+      throw new Error("Reference not initialized");
+    return this.$value;
+  }
+  next(val) {
+    this.$value = val;
+    return super.next(val);
+  }
+  onSubscribe(subscription) {
+    if (!this.closed && this.$value !== Undefined)
+      subscription.next(this.$value);
+    super.onSubscribe(subscription);
+  }
+};
+var EmptyError = class extends Error {
+  message = "No elements in sequence";
+};
+function concat(...observables) {
+  return new Observable((subscriber) => {
+    let index = 0;
+    let innerSignal;
+    function onComplete() {
+      const next = observables[index++];
+      if (next && !subscriber.closed) {
+        innerSignal?.next();
+        next.subscribe({
+          next: subscriber.next,
+          error: subscriber.error,
+          complete: onComplete,
+          signal: innerSignal = new Signal()
+        });
+      } else
+        subscriber.complete();
+    }
+    subscriber.signal.subscribe(() => innerSignal?.next());
+    onComplete();
+  });
+}
+function defer(fn) {
+  return new Observable((subs) => {
+    fn().subscribe(subs);
+  });
+}
+function fromPromise(input) {
+  return new Observable((subs) => {
+    input.then((result) => {
+      if (!subs.closed)
+        subs.next(result);
+      subs.complete();
+    }).catch((err) => subs.error(err));
+  });
+}
+function fromIterable(input) {
+  return new Observable((subs) => {
+    for (const item of input)
+      if (!subs.closed)
+        subs.next(item);
+    subs.complete();
+  });
+}
+function from(input) {
+  if (input instanceof Observable)
+    return input;
+  if (input instanceof Promise)
+    return fromPromise(input);
+  return fromIterable(input);
+}
+function of(...values) {
+  return fromIterable(values);
+}
+function _toPromise(observable2) {
+  return new Promise((resolve, reject) => {
+    let value = Undefined;
+    observable2.subscribe({
+      next: (val) => value = val,
+      error: (e) => reject(e),
+      complete: () => resolve(value)
+    });
+  });
+}
+function toPromise(observable2) {
+  return _toPromise(observable2).then((r) => r === Undefined ? void 0 : r);
+}
+function operatorNext(fn, unsubscribe) {
+  return operator((subs) => ({ next: fn(subs), unsubscribe }));
+}
+function operator(fn) {
+  return (source) => new Observable((subscriber) => {
+    const next = fn(subscriber, source);
+    if (next.unsubscribe)
+      subscriber.signal.subscribe(() => next.unsubscribe?.());
+    if (!next.error)
+      next.error = subscriber.error;
+    if (!next.complete)
+      next.complete = subscriber.complete;
+    next.signal = subscriber.signal;
+    source.subscribe(next);
+  });
+}
+function map(mapFn) {
+  return operatorNext((subscriber) => (val) => subscriber.next(mapFn(val)));
+}
+function select(mapFn) {
+  let lastValue = Undefined;
+  return operatorNext((subscriber) => (val) => {
+    const result = mapFn(val);
+    if (result !== lastValue) {
+      lastValue = result;
+      subscriber.next(result);
+    }
+  });
+}
+function reduce(reduceFn, seed) {
+  return operator((subscriber) => {
+    let acc = seed;
+    let i = 0;
+    return {
+      next(val) {
+        acc = reduceFn(acc, val, i++);
+      },
+      complete() {
+        subscriber.next(acc);
+        subscriber.complete();
+      }
+    };
+  });
+}
+function throttleTime(time) {
+  return operator((subscriber) => {
+    let ready = true;
+    let to;
+    return {
+      next(val) {
+        if (!ready)
+          return;
+        ready = false;
+        subscriber.next(val);
+        to = setTimeout(() => ready = true, time);
+      },
+      unsubscribe: () => clearTimeout(to)
+    };
+  });
+}
+function timer(delay) {
+  return new Observable((subscriber) => {
+    const to = setTimeout(() => {
+      subscriber.next();
+      subscriber.complete();
+    }, delay);
+    subscriber.signal.subscribe(() => clearTimeout(to));
+  });
+}
+function debounceTime(time, useTimer = timer) {
+  return switchMap((val) => useTimer(time).map(() => val));
+}
+function switchMap(project) {
+  return (source) => observable((subscriber) => {
+    let hasSubscription = false;
+    let completed = false;
+    let signal;
+    const cleanUp = () => {
+      signal?.next();
+      hasSubscription = false;
+      if (completed)
+        subscriber.complete();
+    };
+    const outerSignal = new Signal();
+    subscriber.signal.subscribe(() => {
+      cleanUp();
+      outerSignal.next();
+    });
+    source.subscribe({
+      next(val) {
+        cleanUp();
+        signal = new Signal();
+        hasSubscription = true;
+        from(project(val)).subscribe({
+          next: subscriber.next,
+          error: subscriber.error,
+          complete: cleanUp,
+          signal
+        });
+      },
+      error: subscriber.error,
+      complete() {
+        completed = true;
+        if (!hasSubscription)
+          subscriber.complete();
+      },
+      signal: outerSignal
+    });
+  });
+}
+function mergeMap(project) {
+  return (source) => observable((subscriber) => {
+    const signal = subscriber.signal;
+    let count = 0;
+    let completed = 0;
+    let sourceCompleted = false;
+    source.subscribe({
+      next: (val) => {
+        count++;
+        from(project(val)).subscribe({
+          next: subscriber.next,
+          error: subscriber.error,
+          complete: () => {
+            completed++;
+            if (sourceCompleted && completed === count) {
+              subscriber.complete();
+            }
+          },
+          signal
+        });
+      },
+      error: subscriber.error,
+      complete() {
+        sourceCompleted = true;
+        if (completed === count)
+          subscriber.complete();
+      },
+      signal
+    });
+  });
+}
+function concatMap(project) {
+  return operator((subscriber) => {
+    const outerSignal = new Signal();
+    let innerSignal;
+    let innerSubscription;
+    const queue = [];
+    let completed = false;
+    let active = false;
+    const cleanUp = () => {
+      innerSignal?.next();
+      innerSignal = void 0;
+      innerSubscription = void 0;
+      active = false;
+      if (queue.length && !subscriber.closed)
+        run(queue.shift());
+      else if (completed)
+        subscriber.complete();
+    };
+    const run = (val) => {
+      active = true;
+      innerSignal = new Signal();
+      innerSubscription = from(project(val)).subscribe({
+        next: subscriber.next,
+        error: subscriber.error,
+        complete: cleanUp,
+        signal: innerSignal
+      });
+    };
+    subscriber.signal.subscribe(() => {
+      innerSignal?.next();
+      outerSignal.next();
+    });
+    return {
+      next(val) {
+        if (active)
+          queue.push(val);
+        else
+          run(val);
+      },
+      error: subscriber.error,
+      complete() {
+        completed = true;
+        if (!active && queue.length === 0)
+          subscriber.complete();
+      },
+      signal: outerSignal,
+      unsubscribe: () => innerSubscription?.unsubscribe()
+    };
+  });
+}
+function exhaustMap(project) {
+  return operator((subscriber) => {
+    let ready = true;
+    return {
+      next(val) {
+        if (ready) {
+          ready = false;
+          from(project(val)).subscribe({
+            next: subscriber.next,
+            error: subscriber.error,
+            complete: () => ready = true,
+            signal: subscriber.signal
+          });
+        }
+      }
+    };
+  });
+}
+function filter(fn) {
+  return operatorNext((subscriber) => (val) => {
+    if (fn(val))
+      subscriber.next(val);
+  });
+}
+function take(howMany) {
+  return operatorNext((subs) => (val) => {
+    if (howMany-- > 0 && !subs.closed)
+      subs.next(val);
+    if (howMany <= 0 || subs.closed)
+      subs.complete();
+  });
+}
+function takeWhile(fn) {
+  return operatorNext((subs) => (val) => {
+    if (!subs.closed && fn(val))
+      subs.next(val);
+    else
+      subs.complete();
+  });
+}
+function first() {
+  let done = false;
+  return operator((subs) => ({
+    next(val) {
+      if (done)
+        return;
+      done = true;
+      subs.next(val);
+      subs.complete();
+    },
+    complete() {
+      if (!subs.closed)
+        subs.error(new EmptyError());
+    }
+  }));
+}
+function tap(fn) {
+  return operatorNext((subscriber) => (val) => {
+    fn(val);
+    subscriber.next(val);
+  });
+}
+function catchError(selector) {
+  return operator((subscriber, source) => {
+    let signal;
+    const observer = {
+      next: subscriber.next,
+      error(err) {
+        try {
+          if (subscriber.closed)
+            return;
+          const result = selector(err, source);
+          signal?.next();
+          signal = new Signal();
+          result.subscribe({ ...observer, signal });
+        } catch (err2) {
+          subscriber.error(err2);
+        }
+      },
+      unsubscribe: () => signal?.next()
+    };
+    return observer;
+  });
+}
+function distinctUntilChanged() {
+  return operatorNext((subscriber) => {
+    let lastValue = Undefined;
+    return (val) => {
+      if (val !== lastValue) {
+        lastValue = val;
+        subscriber.next(val);
+      }
+    };
+  });
+}
+function shareLatest() {
+  return (source) => {
+    const subject = new ReplaySubject(1);
+    let ready = false;
+    return observable((subs) => {
+      subject.subscribe(subs);
+      if (!ready) {
+        ready = true;
+        source.subscribe(subject);
+      }
+    });
+  };
+}
+function share() {
+  return (source) => {
+    let subject;
+    let subscriptionCount = 0;
+    function complete() {
+      if (--subscriptionCount === 0)
+        subject.signal.next();
+    }
+    return observable((subs) => {
+      subs.signal.subscribe(complete);
+      if (subscriptionCount++ === 0) {
+        subject = ref();
+        subject.subscribe(subs);
+        source.subscribe(subject);
+      } else
+        subject.subscribe(subs);
+    });
+  };
+}
+function publishLast() {
+  return (source) => {
+    const subject = new Subject();
+    let sourceSubscription;
+    let lastValue;
+    let hasEmitted = false;
+    let ready = false;
+    return observable((subs) => {
+      if (ready) {
+        subs.next(lastValue);
+        subs.complete();
+      } else
+        subject.subscribe(subs);
+      sourceSubscription ??= source.subscribe({
+        next: (val) => {
+          hasEmitted = true;
+          lastValue = val;
+        },
+        error: subs.error,
+        complete() {
+          ready = true;
+          if (hasEmitted)
+            subject.next(lastValue);
+          subject.complete();
+        },
+        signal: subs.signal
+      });
+    });
+  };
+}
+function merge(...observables) {
+  if (observables.length === 1)
+    return observables[0];
+  return new Observable((subs) => {
+    let refCount = observables.length;
+    for (const o of observables)
+      if (!subs.closed)
+        o.subscribe({
+          next: subs.next,
+          error: subs.error,
+          complete() {
+            if (refCount-- === 1)
+              subs.complete();
+          },
+          signal: subs.signal
+        });
+  });
+}
+function finalize(unsubscribe) {
+  return operator((subscriber) => ({
+    next: subscriber.next,
+    unsubscribe
+  }));
+}
+function ignoreElements() {
+  return filter(() => false);
+}
+var EMPTY = new Observable((subs) => subs.complete());
+function be(initialValue) {
+  return new BehaviorSubject(initialValue);
+}
+function observable(subscribe) {
+  return new Observable(subscribe);
+}
+function ref() {
+  return new Reference();
+}
+var operators = {
+  catchError,
+  concatMap,
+  debounceTime,
+  distinctUntilChanged,
+  exhaustMap,
+  filter,
+  finalize,
+  first,
+  ignoreElements,
+  map,
+  mergeMap,
+  publishLast,
+  reduce,
+  select,
+  share,
+  shareLatest,
+  switchMap,
+  take,
+  takeWhile,
+  tap,
+  throttleTime
+};
+for (const p in operators) {
+  Observable.prototype[p] = function(...args) {
+    return this.pipe(operators[p](...args));
+  };
+}
+
+// ../../ui-core/dist/ui/dom.js
+function on(element, event, options) {
+  return new Observable((subscriber) => {
+    const handler = subscriber.next.bind(subscriber);
+    element.addEventListener(event, handler, options);
+    subscriber.signal.subscribe(() => element.removeEventListener(event, handler, options));
+  });
+}
+function debounceRaf(fn) {
+  let to;
+  return function(...args) {
+    if (to)
+      cancelAnimationFrame(to);
+    to = requestAnimationFrame(() => {
+      fn.apply(this, args);
+      to = 0;
+    });
+  };
+}
+function raf(fn) {
+  return operator((subscriber) => {
+    const next = debounceRaf((val) => {
+      if (subscriber.closed)
+        return;
+      if (fn)
+        fn(val);
+      subscriber.next(val);
+      if (completed)
+        subscriber.complete();
+    });
+    let completed = false;
+    return {
+      next,
+      complete: () => completed = true
+    };
+  });
+}
+function onEvent(css2, onEv, offEv) {
+  return ($) => concat(of(css2 ? $.matches(css2) : false), on($, onEv).switchMap(() => merge(of(true), on($, offEv).map(() => css2 ? $.matches(css2) : false))));
+}
+var animated = onEvent("", "animationstart", "animationend");
+var hovered = onEvent("", "mouseenter", "mouseleave");
+var focused = onEvent(":focus,:focus-within", "focusin", "focusout");
+
+// ../../ui-core/dist/ui/component.js
+var LOG = tap((val) => console.trace(val));
+Observable.prototype.log = function() {
+  return this.pipe(LOG);
+};
+Observable.prototype.raf = function(fn) {
+  return this.pipe(raf(fn));
+};
+var bindings = Symbol("bindings");
+var registeredComponents = {};
+var augments = Symbol("augments");
+var parserSymbol = Symbol("parser");
+var Bindings = class {
+  bindings;
+  messageHandlers;
+  internals;
+  attributes$ = new OrderedSubject();
+  wasConnected = false;
+  wasInitialized = false;
+  subscriptions;
+  prebind;
+  addMessageHandler(handler) {
+    (this.messageHandlers ??= /* @__PURE__ */ new Set()).add(handler);
+  }
+  removeMessageHandler(handler) {
+    this.messageHandlers?.delete(handler);
+  }
+  message(event, val) {
+    let stop = false;
+    if (this.messageHandlers)
+      for (const m of this.messageHandlers) {
+        if (m.type === event) {
+          m.next(val);
+          stop ||= m.stopPropagation;
+        }
+      }
+    return stop;
+  }
+  add(binding) {
+    if (this.wasConnected)
+      throw new Error("Cannot bind connected component.");
+    if (this.wasInitialized)
+      (this.bindings ??= []).push(binding);
+    else
+      (this.prebind ??= []).push(binding);
+  }
+  connect() {
+    this.wasConnected = true;
+    if (!this.subscriptions && (this.prebind || this.bindings)) {
+      const subs = this.subscriptions = [];
+      if (this.bindings)
+        for (const b of this.bindings)
+          subs.push(b.subscribe());
+      if (this.prebind)
+        for (const b of this.prebind)
+          subs.push(b.subscribe());
+    }
+  }
+  disconnect() {
+    this.subscriptions?.forEach((s) => s.unsubscribe());
+    this.subscriptions = void 0;
+  }
+};
+var cssSymbol = Symbol("css");
+var Component = class extends HTMLElement {
+  static observedAttributes;
+  static [augments];
+  static [parserSymbol];
+  [bindings] = new Bindings();
+  /**
+   * Symbol used to indicate whether the CSS for this node has been applied,
+   * preventing duplicate style insertions.
+   */
+  [cssSymbol];
+  connectedCallback() {
+    this[bindings].wasInitialized = true;
+    if (!this[bindings].wasConnected)
+      this.constructor[augments]?.forEach((f) => f(this));
+    this[bindings].connect();
+  }
+  disconnectedCallback() {
+    this[bindings].disconnect();
+  }
+  attributeChangedCallback(name, oldValue, value) {
+    const parser = this.constructor[parserSymbol]?.[name] ?? defaultAttributeParser;
+    if (oldValue !== value)
+      this[name] = parser(value, this[name]);
+  }
+};
+function defaultAttributeParser(value, oldValue) {
+  const isBoolean = oldValue === false || oldValue === true;
+  if (value === "") {
+    return isBoolean ? true : "";
+  } else
+    return value === null ? isBoolean ? false : void 0 : value;
+}
+function pushRender(ctor, renderFn) {
+  if (!ctor.hasOwnProperty(augments))
+    ctor[augments] = ctor[augments]?.slice(0) ?? [];
+  ctor[augments]?.push(renderFn);
+}
+var shadowConfig = { mode: "open" };
+function getShadow(el) {
+  return el.shadowRoot ?? el.attachShadow(shadowConfig);
+}
+function appendShadow(host, child) {
+  if (child instanceof Node)
+    getShadow(host).appendChild(child);
+  else
+    host[bindings].add(child);
+}
+function doAugment(constructor, augments2) {
+  if (augments2.length)
+    pushRender(constructor, (node) => {
+      for (const d of augments2) {
+        const result = d.call(constructor, node);
+        if (result && result !== node)
+          appendShadow(node, result);
+      }
+    });
+}
+function registerComponent(tagName, ctor) {
+  registeredComponents[tagName] = ctor;
+  customElements.define(tagName, ctor);
+}
+function component(ctor, { init, augment, tagName }) {
+  if (init)
+    for (const fn of init)
+      fn(ctor);
+  if (augment)
+    doAugment(ctor, augment);
+  if (tagName)
+    registerComponent(tagName, ctor);
+}
+function attributeChanged(element, attribute2) {
+  return element[bindings].attributes$.pipe(filter((ev) => ev.attribute === attribute2), map(() => element[attribute2]));
+}
+function get(element, attribute2) {
+  return merge(attributeChanged(element, attribute2), defer(() => of(element[attribute2])));
+}
+function getObservedAttributes(target) {
+  let result = target.observedAttributes;
+  if (result && !target.hasOwnProperty("observedAttributes"))
+    result = target.observedAttributes?.slice(0);
+  return target.observedAttributes = result || [];
+}
+function setAttribute(el, attr, val) {
+  if (val === false || val === null || val === void 0)
+    val = null;
+  else if (val === true)
+    val = "";
+  if (val === null)
+    el.removeAttribute(attr);
+  else
+    el.setAttribute(attr, String(val));
+  return val;
+}
+function pushParser(ctor, name, parser) {
+  if (!ctor.hasOwnProperty(parserSymbol))
+    ctor[parserSymbol] = { ...ctor[parserSymbol] };
+  if (ctor[parserSymbol])
+    ctor[parserSymbol][name] = parser;
+}
+function attribute(name, options) {
+  return (ctor) => {
+    if (options?.observe !== false)
+      getObservedAttributes(ctor).push(name);
+    if (options?.parse)
+      pushParser(ctor, name, options.parse);
+    const prop = `$$${name}`;
+    const proto = ctor.prototype;
+    const descriptor = Object.getOwnPropertyDescriptor(proto, name);
+    if (descriptor)
+      Object.defineProperty(proto, prop, descriptor);
+    const persist = options?.persist;
+    const newDescriptor = {
+      enumerable: true,
+      configurable: false,
+      get() {
+        return this[prop];
+      },
+      set(value) {
+        const current = this[prop];
+        if (current !== value) {
+          this[prop] = value;
+          persist?.(this, name, value);
+          this[bindings].attributes$.next({
+            target: this,
+            attribute: name,
+            value
+          });
+        } else if (descriptor?.set) {
+          persist?.(this, name, value);
+          this[prop] = value;
+        }
+      }
+    };
+    pushRender(ctor, (target) => {
+      if (!descriptor)
+        target[prop] = target[name];
+      Object.defineProperty(target, name, newDescriptor);
+      persist?.(target, name, target[name]);
+      if (options?.render) {
+        const result = options.render(target);
+        if (result)
+          appendShadow(target, result);
+      }
+    });
+  };
+}
+function styleAttribute(name) {
+  return attribute(name, {
+    persist: setAttribute,
+    observe: true
+  });
+}
+function expression(host, binding) {
+  const result = document.createTextNode("");
+  host[bindings].add(binding.tap((val) => result.textContent = val));
+  return result;
+}
+var childrenFragment = document.createDocumentFragment();
+function renderChildren(host, children, appendTo = host) {
+  if (children === void 0 || children === null)
+    return;
+  if (Array.isArray(children)) {
+    for (const child of children)
+      renderChildren(host, child, childrenFragment);
+    if (appendTo !== childrenFragment)
+      appendTo.appendChild(childrenFragment);
+  } else if (host instanceof Component && children instanceof Observable)
+    appendTo.appendChild(expression(host, children));
+  else if (children instanceof Node)
+    appendTo.appendChild(children);
+  else if (host instanceof Component && typeof children === "function")
+    renderChildren(host, children(host), appendTo);
+  else
+    appendTo.appendChild(document.createTextNode(children));
+}
+function renderAttributes(host, attributes) {
+  for (const attr in attributes) {
+    const value = attributes[attr];
+    if (host instanceof Component) {
+      if (value instanceof Observable)
+        host[bindings].add(attr === "$" ? value : value.tap((v) => host[attr] = v));
+      else if (attr === "$" && typeof value === "function")
+        host[bindings].add(value(host));
+      else
+        host[attr] = value;
+    } else
+      host[attr] = value;
+  }
+}
+function tsx(component2, attributes, ...children) {
+  if (component2 !== tsx && typeof component2 === "function" && !(component2.prototype instanceof Component)) {
+    if (children.length)
+      (attributes ??= {}).children = children;
+    return component2(attributes);
+  }
+  const element = component2 === tsx ? document.createDocumentFragment() : typeof component2 === "string" ? document.createElement(component2) : new component2();
+  if (attributes)
+    renderAttributes(element, attributes);
+  if (children.length)
+    renderChildren(element, children);
+  return element;
+}
+
+// ../../ui-core/dist/ui/theme.js
+var displayContents = css(":host{display:contents}");
+var onThemeChange = ref();
+var themeName = be("");
+var disabledStyles = css(`:host([disabled]) {
 	cursor: default;
 	pointer-events: var(--cxl-override-pointer-events, none);
-}`),Mt=`
+}`);
+var itemLayout = `
 	box-sizing: border-box;
 	position: relative;
 	display: flex;
@@ -9,8 +1063,176 @@ var d={},bt=Symbol("terminator");function he(t,e){let r=!1,n={error:o,unsubscrib
 	min-height: 56px;
 	align-items: center;
 	column-gap: 16px;
-	${tt("body-medium")}
-`,Xe=(()=>{for(let t of Array.from(document.fonts.keys()))if(t.family==="Roboto")return!0;return!1})(),pe={primary:"#186584","on-primary":"#FFFFFF","primary-container":"#C1E8FF","on-primary-container":"#004D67",secondary:"#4E616C","on-secondary":"#FFFFFF","secondary-container":"#D1E6F3","on-secondary-container":"#364954",tertiary:"#5F5A7D","on-tertiary":"#FFFFFF","tertiary-container":"#E5DEFF","on-tertiary-container":"#474364",error:"#BA1A1A","on-error":"#FFFFFF","error-container":"#FFDAD6","on-error-container":"#93000A",background:"#F6FAFE","on-background":"#171C1F",surface:"#F6FAFE","on-surface":"#171C1F","surface-variant":"#DCE3E9","on-surface-variant":"#40484D",outline:"#71787D","outline-variant":"#C0C7CD",scrim:"rgb(29 27 32 / 0.5)","inverse-surface":"#2C3134","on-inverse-surface":"#EDF1F5","inverse-primary":"#8ECFF2","primary-fixed":"#C1E8FF","on-primary-fixed":"#001E2B","primary-fixed-dim":"#8ECFF2","on-primary-fixed-variant":"#004D67","secondary-fixed":"#D1E6F3","on-secondary-fixed":"#091E28","secondary-fixed-dim":"#B5C9D7","on-secondary-fixed-variant":"#364954","tertiary-fixed":"#E5DEFF","on-tertiary-fixed":"#1B1736","tertiary-fixed-dim":"#C9C2EA","on-tertiary-fixed-variant":"#474364","surface-dim":"#D6DADE","surface-bright":"#F6FAFE","surface-container-lowest":"#FFFFFF","surface-container-low":"#F0F4F8","surface-container":"#EAEEF2","surface-container-high":"#E5E9ED","surface-container-highest":"#DFE3E7",warning:"#DD2C00","on-warning":"#FFFFFF","warning-container":"#FFF4E5","on-warning-container":"#8C1D18",success:"#2E7D32","on-success":"#FFFFFF","success-container":"#81C784","on-success-container":"#000000"};function Je(t=pe){return Object.entries(t).map(([e,r])=>`--cxl-color--${e}:${r};--cxl-color-${e}:var(--cxl-color--${e});`).join("")}var h={name:"",animation:{flash:{kf:{opacity:[1,0,1,0,1]},options:{easing:"ease-in"}},spin:{kf:{rotate:["0deg","360deg"]}},pulse:{kf:{rotate:["0deg","360deg"]},options:{easing:"steps(8)"}},openY:{kf:t=>({height:["0",`${t.scrollHeight}px`]})},closeY:{kf:t=>({height:[`${t.scrollHeight}px`,"0"]})},expand:{kf:{scale:[0,1]}},expandX:{kf:{scale:["0 1","1 1"]}},expandY:{kf:{scale:["1 0","1 1"]}},zoomIn:{kf:{scale:[.3,1]}},zoomOut:{kf:{scale:[1,.3]}},scaleUp:{kf:{scale:[1,1.25]}},fadeIn:{kf:[{opacity:0},{opacity:1}]},fadeOut:{kf:[{opacity:1},{opacity:0}]},shakeX:{kf:{translate:["0","-10px","10px","-10px","10px","-10px","10px","-10px","10px","0"]}},shakeY:{kf:{translate:["0","0 -10px","0 10px","0 -10px","0 10px","0 -10px","0 10px","0 -10px","0 10px","0"]}},slideOutLeft:{kf:{translate:["0","-100% 0"]}},slideInLeft:{kf:{translate:["-100% 0","0"]}},slideOutRight:{kf:{translate:["0","100% 0"]}},slideInRight:{kf:{translate:["100% 0","0"]}},slideInUp:{kf:{translate:["0 100%","0"]}},slideInDown:{kf:{translate:["0 -100%","0"]}},slideOutUp:{kf:{translate:["0","0 -100%"]}},slideOutDown:{kf:{translate:["0","0 100%"]}},focus:{kf:[{offset:.1,filter:"brightness(150%)"},{filter:"brightness(100%)"}],options:{duration:500}}},easing:{emphasized:"cubic-bezier(0.2, 0.0, 0, 1.0)",emphasized_accelerate:"cubic-bezier(0.05, 0.7, 0.1, 1.0)",emphasized_decelerate:"cubic-bezier(0.3, 0.0, 0.8, 0.15)",standard:"cubic-bezier(0.2, 0.0, 0, 1.0)",standard_accelerate:"cubic-bezier(0, 0, 0, 1)",standard_decelerate:"cubic-bezier(0.3, 0, 1, 1)"},breakpoints:{xsmall:0,small:600,medium:905,large:1240,xlarge:1920,xxlarge:2560},disableAnimations:!1,prefersReducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,colors:pe,imports:Xe?void 0:["https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@300;400;500;700&display=swap"],globalCss:`:root{
+	${font("body-medium")}
+`;
+var hasRobotoFont = (() => {
+  for (const font2 of Array.from(document.fonts.keys()))
+    if (font2.family === "Roboto")
+      return true;
+  return false;
+})();
+var baseColors = {
+  primary: "#186584",
+  "on-primary": "#FFFFFF",
+  "primary-container": "#C1E8FF",
+  "on-primary-container": "#004D67",
+  secondary: "#4E616C",
+  "on-secondary": "#FFFFFF",
+  "secondary-container": "#D1E6F3",
+  "on-secondary-container": "#364954",
+  tertiary: "#5F5A7D",
+  "on-tertiary": "#FFFFFF",
+  "tertiary-container": "#E5DEFF",
+  "on-tertiary-container": "#474364",
+  error: "#BA1A1A",
+  "on-error": "#FFFFFF",
+  "error-container": "#FFDAD6",
+  "on-error-container": "#93000A",
+  background: "#F6FAFE",
+  "on-background": "#171C1F",
+  surface: "#F6FAFE",
+  "on-surface": "#171C1F",
+  "surface-variant": "#DCE3E9",
+  "on-surface-variant": "#40484D",
+  outline: "#71787D",
+  "outline-variant": "#C0C7CD",
+  scrim: "rgb(29 27 32 / 0.5)",
+  "inverse-surface": "#2C3134",
+  "on-inverse-surface": "#EDF1F5",
+  "inverse-primary": "#8ECFF2",
+  "primary-fixed": "#C1E8FF",
+  "on-primary-fixed": "#001E2B",
+  "primary-fixed-dim": "#8ECFF2",
+  "on-primary-fixed-variant": "#004D67",
+  "secondary-fixed": "#D1E6F3",
+  "on-secondary-fixed": "#091E28",
+  "secondary-fixed-dim": "#B5C9D7",
+  "on-secondary-fixed-variant": "#364954",
+  "tertiary-fixed": "#E5DEFF",
+  "on-tertiary-fixed": "#1B1736",
+  "tertiary-fixed-dim": "#C9C2EA",
+  "on-tertiary-fixed-variant": "#474364",
+  "surface-dim": "#D6DADE",
+  "surface-bright": "#F6FAFE",
+  "surface-container-lowest": "#FFFFFF",
+  "surface-container-low": "#F0F4F8",
+  "surface-container": "#EAEEF2",
+  "surface-container-high": "#E5E9ED",
+  "surface-container-highest": "#DFE3E7",
+  warning: "#DD2C00",
+  "on-warning": "#FFFFFF",
+  "warning-container": "#FFF4E5",
+  "on-warning-container": "#8C1D18",
+  success: "#2E7D32",
+  "on-success": "#FFFFFF",
+  "success-container": "#81C784",
+  "on-success-container": "#000000"
+};
+function buildPalette(colors = baseColors) {
+  return Object.entries(colors).map(([key, value]) => `--cxl-color--${key}:${value};--cxl-color-${key}:var(--cxl-color--${key});`).join("");
+}
+var theme = {
+  name: "",
+  animation: {
+    flash: {
+      kf: { opacity: [1, 0, 1, 0, 1] },
+      options: { easing: "ease-in" }
+    },
+    spin: {
+      kf: { rotate: ["0deg", "360deg"] }
+    },
+    pulse: {
+      kf: { rotate: ["0deg", "360deg"] },
+      options: { easing: "steps(8)" }
+    },
+    openY: { kf: (el) => ({ height: ["0", `${el.scrollHeight}px`] }) },
+    closeY: { kf: (el) => ({ height: [`${el.scrollHeight}px`, "0"] }) },
+    expand: { kf: { scale: [0, 1] } },
+    expandX: { kf: { scale: ["0 1", "1 1"] } },
+    expandY: { kf: { scale: ["1 0", "1 1"] } },
+    zoomIn: { kf: { scale: [0.3, 1] } },
+    zoomOut: { kf: { scale: [1, 0.3] } },
+    scaleUp: { kf: { scale: [1, 1.25] } },
+    fadeIn: { kf: [{ opacity: 0 }, { opacity: 1 }] },
+    fadeOut: { kf: [{ opacity: 1 }, { opacity: 0 }] },
+    shakeX: {
+      /*kf: () => ({
+          translate: randomShake(10, 8, 'x'),
+      }),*/
+      kf: {
+        translate: [
+          "0",
+          "-10px",
+          "10px",
+          "-10px",
+          "10px",
+          "-10px",
+          "10px",
+          "-10px",
+          "10px",
+          "0"
+        ]
+      }
+    },
+    shakeY: {
+      /*kf: {
+          translate: [ '0', 'var(--cxl-animation-shakeX)', '0' ],
+      },*/
+      kf: {
+        translate: [
+          "0",
+          "0 -10px",
+          "0 10px",
+          "0 -10px",
+          "0 10px",
+          "0 -10px",
+          "0 10px",
+          "0 -10px",
+          "0 10px",
+          "0"
+        ]
+      }
+    },
+    slideOutLeft: { kf: { translate: ["0", "-100% 0"] } },
+    slideInLeft: { kf: { translate: ["-100% 0", "0"] } },
+    slideOutRight: { kf: { translate: ["0", "100% 0"] } },
+    slideInRight: { kf: { translate: ["100% 0", "0"] } },
+    slideInUp: { kf: { translate: ["0 100%", "0"] } },
+    slideInDown: { kf: { translate: ["0 -100%", "0"] } },
+    slideOutUp: { kf: { translate: ["0", "0 -100%"] } },
+    slideOutDown: { kf: { translate: ["0", "0 100%"] } },
+    focus: {
+      kf: [
+        { offset: 0.1, filter: "brightness(150%)" },
+        { filter: "brightness(100%)" }
+      ],
+      options: { duration: 500 }
+    }
+  },
+  easing: {
+    emphasized: "cubic-bezier(0.2, 0.0, 0, 1.0)",
+    emphasized_accelerate: "cubic-bezier(0.05, 0.7, 0.1, 1.0)",
+    emphasized_decelerate: "cubic-bezier(0.3, 0.0, 0.8, 0.15)",
+    standard: "cubic-bezier(0.2, 0.0, 0, 1.0)",
+    standard_accelerate: "cubic-bezier(0, 0, 0, 1)",
+    standard_decelerate: "cubic-bezier(0.3, 0, 1, 1)"
+  },
+  breakpoints: {
+    xsmall: 0,
+    small: 600,
+    medium: 905,
+    large: 1240,
+    xlarge: 1920,
+    xxlarge: 2560
+  },
+  //isRTL: false as boolean,
+  disableAnimations: false,
+  prefersReducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  colors: baseColors,
+  imports: hasRobotoFont ? void 0 : [
+    "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap"
+  ],
+  globalCss: `:root{
 --cxl-font-family: Roboto;
 --cxl-font-monospace:"Roboto Mono", monospace;
 
@@ -65,29 +1287,325 @@ var d={},bt=Symbol("terminator");function he(t,e){let r=!1,n={error:o,unsubscrib
 --cxl-shape-corner-xsmall: 4px;
 --cxl-shape-corner-full: 50vh;
 }
-	`,css:""};function Qe(t=""){return`:host ${t} {
+	`,
+  css: ""
+};
+function buildMask(sel = "") {
+  return `:host ${sel} {
 --cxl-mask-hover: color-mix(in srgb, var(--cxl-color-on-surface) 8%, transparent);
 --cxl-mask-focus: color-mix(in srgb, var(--cxl-color-on-surface) 10%, transparent);
 --cxl-mask-active: linear-gradient(0, var(--cxl-color-surface-container),var(--cxl-color-surface-container));
 }
-:host(:hover) ${t} { background-image: linear-gradient(0, var(--cxl-mask-hover),var(--cxl-mask-hover)); }
-:host(:focus-visible) ${t} { background-image: linear-gradient(0, var(--cxl-mask-focus),var(--cxl-mask-focus)) }
+:host(:hover) ${sel} { background-image: linear-gradient(0, var(--cxl-mask-hover),var(--cxl-mask-hover)); }
+:host(:focus-visible) ${sel} { background-image: linear-gradient(0, var(--cxl-mask-focus),var(--cxl-mask-focus)) }
 :host{-webkit-tap-highlight-color: transparent}
-`}var Lt=A(Qe());var ae,Ze;function et(t){let e;return We.tap(r=>{let n=r?.theme.override?.[t.tagName];n?e?e.replace(n).catch(o=>console.error(o)):t.shadowRoot?.adoptedStyleSheets.push(e??=T(n)):e&&e.replaceSync("")})}function T(t){let e=new CSSStyleSheet;return t&&e.replaceSync(t),e}function A(t){let e;return r=>{let n=K(r);if(n.adoptedStyleSheets.push(e??=T(t)),!r[I])return h.css&&n.adoptedStyleSheets.unshift(Ze??=T(h.css)),r[I]=!0,et(r)}}var de=["background","primary","primary-container","primary-fixed-dim","primary-fixed","secondary","secondary-container","tertiary","tertiary-container","surface","surface-container","surface-container-low","surface-container-lowest","surface-container-highest","surface-container-high","error","error-container","success","success-container","warning","warning-container","inverse-surface","inverse-primary"],Ot=[...de,"inherit"];function le(t,e="surface"){return`--cxl-color-${e}: var(--cxl-color--${t});
---cxl-color-on-${e}: var(--cxl-color--on-${t}, var(--cxl-color--on-surface));
---cxl-color-surface-variant: var(--cxl-color--${t==="surface"?"surface-variant":t});
---cxl-color-on-surface-variant: ${t.includes("surface")?"var(--cxl-color--on-surface-variant)":`color-mix(in srgb, var(--cxl-color--on-${t}) 80%, transparent)`};
-`}var Ht=de.reduce((t,e)=>(t[e]=`
-${le(e)}
-${e==="inverse-surface"?le("inverse-primary","primary"):""}
-`,t),{inherit:"color:inherit;background-color:inherit;"});function tt(t){return`font:var(--cxl-font-${t});letter-spacing:var(--cxl-letter-spacing-${t});`}var rt=requestAnimationFrame(()=>ot());var ue=document.createElement("template"),fe={};function nt(t){return function(e){let r=t(e),n=fe[r];if(n)return n.cloneNode(!0);let o=document.createElementNS("http://www.w3.org/2000/svg","svg"),i=()=>(o.dispatchEvent(new ErrorEvent("error")),"");return fetch(r).then(s=>s.ok?s.text():i(),i).then(s=>{if(!s)return;ue.innerHTML=s;let c=ue.content.children[0];if(!c)return;let a=c.getAttribute("viewBox");a?o.setAttribute("viewBox",a):c.hasAttribute("width")&&c.hasAttribute("height")&&o.setAttribute("viewBox",`0 0 ${c.getAttribute("width")} ${c.getAttribute("height")}`);for(let C of c.childNodes)o.append(C);fe[e.name]=o}).catch(s=>console.error(s)),o.setAttribute("fill","currentColor"),o}}var _t=nt(({name:t,width:e,fill:r})=>(e!==20&&e!==24&&e!==40&&e!==48&&(e=48),`https://cdn.jsdelivr.net/gh/google/material-design-icons@941fa95/symbols/web/${t}/materialsymbolsoutlined/${t}_${r?"fill1_":""}${e}px.svg`));var W,Vt=new Promise(t=>{W=t});function ot(t){cancelAnimationFrame(rt),ae||(t&&(t.colors&&(h.colors=t.colors),t.globalCss&&(h.globalCss+=t.globalCss)),document.adoptedStyleSheets.push(ae=T(`html{${Je(h.colors)}}${h.globalCss}`)),h.imports?Promise.allSettled(h.imports.map(e=>{let r=document.createElement("link");return r.rel="stylesheet",r.href=e,document.head.append(r),new Promise((n,o)=>(r.onload=n,r.onerror=o))})).then(W,e=>console.error(e)):W())}window.__cxlRunner=t=>t.type==="figure"?{success:!0,message:"Screenshot should match baseline",data:t}:t.type==="run"?(new z(t).run().catch(e=>console.error(e)),{success:!0,message:"",data:t}):{success:!1,message:`${t.type} not supported.`};var p=`<style>.thumb{vertical-align:middle;display:inline-block;overflow:hidden;width:320px;position:relative;vertical-align:top}
+`;
+}
+var maskStyles = css(buildMask());
+var globalCss;
+var themeCss;
+function observeTheme(host) {
+  let themeOverride;
+  return onThemeChange.tap((theme2) => {
+    const css2 = theme2?.theme.override?.[host.tagName];
+    if (css2) {
+      if (!themeOverride)
+        host.shadowRoot?.adoptedStyleSheets.push(themeOverride ??= newStylesheet(css2));
+      else
+        themeOverride.replace(css2).catch((e) => console.error(e));
+    } else if (themeOverride)
+      themeOverride.replaceSync("");
+  });
+}
+function newStylesheet(css2) {
+  const themeCss2 = new CSSStyleSheet();
+  if (css2)
+    themeCss2.replaceSync(css2);
+  return themeCss2;
+}
+function css(styles) {
+  let stylesheet;
+  return (host) => {
+    const shadow = getShadow(host);
+    shadow.adoptedStyleSheets.push(stylesheet ??= newStylesheet(styles));
+    if (!host[cssSymbol]) {
+      if (theme.css)
+        shadow.adoptedStyleSheets.unshift(themeCss ??= newStylesheet(theme.css));
+      host[cssSymbol] = true;
+      return observeTheme(host);
+    }
+  };
+}
+var surfaceColors = [
+  "background",
+  "primary",
+  "primary-container",
+  "primary-fixed-dim",
+  "primary-fixed",
+  "secondary",
+  "secondary-container",
+  "tertiary",
+  "tertiary-container",
+  "surface",
+  "surface-container",
+  "surface-container-low",
+  "surface-container-lowest",
+  "surface-container-highest",
+  "surface-container-high",
+  "error",
+  "error-container",
+  "success",
+  "success-container",
+  "warning",
+  "warning-container",
+  "inverse-surface",
+  "inverse-primary"
+];
+var SurfaceColorNames = [...surfaceColors, "inherit"];
+function resetSurface(color, dest = "surface") {
+  return `--cxl-color-${dest}: var(--cxl-color--${color});
+--cxl-color-on-${dest}: var(--cxl-color--on-${color}, var(--cxl-color--on-surface));
+--cxl-color-surface-variant: var(--cxl-color--${color === "surface" ? "surface-variant" : color});
+--cxl-color-on-surface-variant: ${color.includes("surface") ? "var(--cxl-color--on-surface-variant)" : `color-mix(in srgb, var(--cxl-color--on-${color}) 80%, transparent)`};
+`;
+}
+var ColorStyles = surfaceColors.reduce((r, v) => {
+  r[v] = `
+${resetSurface(v)}
+${v === "inverse-surface" ? resetSurface("inverse-primary", "primary") : ""}
+`;
+  return r;
+}, {
+  inherit: "color:inherit;background-color:inherit;"
+});
+function font(name) {
+  return `font:var(--cxl-font-${name});letter-spacing:var(--cxl-letter-spacing-${name});`;
+}
+var loadingId = requestAnimationFrame(() => applyTheme());
+var iconTemplate = document.createElement("template");
+var iconCache = {};
+function buildIconFactoryCdn(getUrl) {
+  return function(def) {
+    const href = getUrl(def);
+    const cache = iconCache[href];
+    if (cache)
+      return cache.cloneNode(true);
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const error2 = () => (el.dispatchEvent(new ErrorEvent("error")), "");
+    fetch(href).then((res) => res.ok ? res.text() : error2(), error2).then((svgText) => {
+      if (!svgText)
+        return;
+      iconTemplate.innerHTML = svgText;
+      const svg = iconTemplate.content.children[0];
+      if (!svg)
+        return;
+      const viewbox = svg.getAttribute("viewBox");
+      if (viewbox)
+        el.setAttribute("viewBox", viewbox);
+      else if (svg.hasAttribute("width") && svg.hasAttribute("height"))
+        el.setAttribute("viewBox", `0 0 ${svg.getAttribute("width")} ${svg.getAttribute("height")}`);
+      for (const child of svg.childNodes)
+        el.append(child);
+      iconCache[def.name] = el;
+    }).catch((e) => console.error(e));
+    el.setAttribute("fill", "currentColor");
+    return el;
+  };
+}
+var iconFactoryCdn = buildIconFactoryCdn(({ name: id, width, fill }) => {
+  if (width !== 20 && width !== 24 && width !== 40 && width !== 48)
+    width = 48;
+  return `https://cdn.jsdelivr.net/gh/google/material-design-icons@941fa95/symbols/web/${id}/materialsymbolsoutlined/${id}_${fill ? "fill1_" : ""}${width}px.svg`;
+});
+var resolveTheme;
+var themeReady = new Promise((resolve) => {
+  resolveTheme = () => {
+    onThemeChange.next(void 0);
+    resolve();
+  };
+});
+function applyTheme(newTheme) {
+  cancelAnimationFrame(loadingId);
+  if (!globalCss) {
+    if (newTheme) {
+      if (newTheme.colors)
+        theme.colors = newTheme.colors;
+      if (newTheme.globalCss)
+        theme.globalCss += newTheme.globalCss;
+    }
+    document.adoptedStyleSheets.push(globalCss = newStylesheet(`html{${buildPalette(theme.colors)}}${theme.globalCss}`));
+    if (theme.imports)
+      Promise.allSettled(theme.imports.map((imp) => {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = imp;
+        document.head.append(link);
+        return new Promise((resolve, reject) => (link.onload = resolve, link.onerror = reject));
+      })).then(resolveTheme, (e) => console.error(e));
+    else
+      resolveTheme();
+  }
+}
+
+// ../spec-browser/index.ts
+window.__cxlRunner = (data) => {
+  if (data.type === "figure")
+    return {
+      success: true,
+      message: "Screenshot should match baseline",
+      data
+    };
+  if (data.type === "run") {
+    new BrowserRunner(data).run().catch((e) => console.error(e));
+    return {
+      success: true,
+      message: "",
+      data
+    };
+  }
+  return {
+    success: false,
+    message: `${data.type} not supported.`
+  };
+};
+var output = `<style>.thumb{vertical-align:middle;display:inline-block;overflow:hidden;width:320px;position:relative;vertical-align:top}
 	dl { display: flex; margin-top:8px;margin-bottom:8px; } dd { margin-left: 16px}
 	body {font-family:monospace;font-size:16px;tab-size:4}
-	</style>`;function it(t,e){p+=`<dl><dt><a data-test="${t}" href="#">${N(e)}</a></dt><dd>`}function st(){p+="</dd></dl>"}var ct=/[&<>]/g,at={"&":"&amp;","<":"&lt;",">":"&gt;"};function N(t){return t.replace(ct,e=>at[e]||"")}function lt(t){p+='<div style="background-color:#ffcdd2;padding:8px">',t instanceof Error?p+=`
-			<p style="white-space:pre">${N(t.message)}</p>
-			<pre>${N(t.stack||"")}</pre>
-		`:p+=`<p style="white-space:pre-wrap">${N(t)}</p>`,p+="</div>"}function ut(){return"&check;"}function ft(){return"&times;"}function pt(t){console.error(t.message),t.stack&&console.error(t.stack);let e=t.message;lt(e)}function dt(t,e="spec"){p+=t.success?ut():ft();let r=t.data;r?.type==="figure"&&(p+=`<div class="thumb">${r.html}</div>
-		<spec-image-diff src1="spec/${r.name}.png" src2="${e}/${r.name}.png"></cxl-image-diff>`)}function me(t,e){for(let r of t){if(r.id===e)return r;let n=me(r.tests,e);if(n)return n}}async function xt(t,e){let r=e.target.dataset.test;if(r){e.stopPropagation(),e.preventDefault();let n=me(t,+r);n&&(console.log(`Running test "${n.name}"`),n.results=[],await n.run(),console.log(n.results))}}function mt(t){return new Promise((e,r)=>{let n=new Image;n.src=t,n.addEventListener("load",()=>e(n)),n.addEventListener("error",()=>r(n))})}async function xe(t){let e=await mt(t),r=E("canvas"),n=r.getContext("2d");if(!n)throw new Error("Could not create context");let o=r.width=e.width,i=r.height=e.height;return n.drawImage(e,0,0),n.getImageData(0,0,o,i)}function qt(t){let e=new Image;return e.src=t,e}async function ht(t,e){let r=Math.max(t.width,e.width),n=Math.max(t.height,e.height),o=r*n*4,i=new Uint8ClampedArray(o),s=0;for(let c=0;c<o;c+=4){let a=t.data[c]===e.data[c]&&t.data[c+1]===e.data[c+1]&&t.data[c+2]===e.data[c+2]&&t.data[c+3]===e.data[c+3];a||(s+=4),i[c]=i[c+3]=a?0:255}return{imageA:t,imageB:e,diffBytes:s,size:o,diff:new ImageData(i,r,n)}}async function gt(t,e){let[r,n]=await Promise.all([xe(t),xe(e)]);return ht(r,n)}var X=class extends m{src1;src2;ratio=1;hidediff=!1;value};ie(X,{tagName:"spec-image-diff",init:[F("src1"),F("src2"),F("ratio"),ce("hidediff")],augment:[A(`
+	</style>`;
+function group(testId, title) {
+  output += `<dl><dt><a data-test="${testId}" href="#">${escapeHtml(
+    title
+  )}</a></dt><dd>`;
+}
+function groupEnd() {
+  output += "</dd></dl>";
+}
+var ENTITIES_REGEX = /[&<>]/g;
+var ENTITIES_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
+};
+function escapeHtml(str) {
+  return str.replace(
+    ENTITIES_REGEX,
+    (e) => ENTITIES_MAP[e] || ""
+  );
+}
+function error(msg) {
+  output += '<div style="background-color:#ffcdd2;padding:8px">';
+  if (msg instanceof Error) {
+    output += `
+			<p style="white-space:pre">${escapeHtml(msg.message)}</p>
+			<pre>${escapeHtml(msg.stack || "")}</pre>
+		`;
+  } else output += `<p style="white-space:pre-wrap">${escapeHtml(msg)}</p>`;
+  output += "</div>";
+}
+function success() {
+  return "&check;";
+}
+function failure() {
+  return "&times;";
+}
+function printError(fail) {
+  console.error(fail.message);
+  if (fail.stack) console.error(fail.stack);
+  const msg = fail.message;
+  error(msg);
+}
+function printResult(result, baselinePath = "spec") {
+  output += result.success ? success() : failure();
+  const data = result.data;
+  if (data?.type === "figure") {
+    output += `<div class="thumb">${data.html}</div>
+		<spec-image-diff src1="spec/${data.name}.png" src2="${baselinePath}/${data.name}.png"></cxl-image-diff>`;
+  }
+}
+function findTest(tests, id) {
+  for (const test of tests) {
+    if (test.id === id) return test;
+    const childTest = findTest(test.tests, id);
+    if (childTest) return childTest;
+  }
+}
+async function onClick(suite, ev) {
+  const testId = ev.target.dataset.test;
+  if (testId) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    const test = findTest(suite, +testId);
+    if (test) {
+      console.log(`Running test "${test.name}"`);
+      test.results = [];
+      await test.run();
+      console.log(test.results);
+    }
+  }
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.addEventListener("load", () => resolve(img));
+    img.addEventListener("error", () => reject(img));
+  });
+}
+async function imageData(srcA) {
+  const A = await loadImage(srcA);
+  const canvasEl = tsx("canvas");
+  const ctx = canvasEl.getContext("2d");
+  if (!ctx) throw new Error("Could not create context");
+  const w = canvasEl.width = A.width;
+  const h = canvasEl.height = A.height;
+  ctx.drawImage(A, 0, 0);
+  return ctx.getImageData(0, 0, w, h);
+}
+function image(src) {
+  const result = new Image();
+  result.src = src;
+  return result;
+}
+async function imageDataDiff(A, B) {
+  const w = Math.max(A.width, B.width);
+  const h = Math.max(A.height, B.height);
+  const size = w * h * 4;
+  const diff = new Uint8ClampedArray(size);
+  let diffBytes = 0;
+  for (let i = 0; i < size; i += 4) {
+    const match = A.data[i] === B.data[i] && A.data[i + 1] === B.data[i + 1] && A.data[i + 2] === B.data[i + 2] && A.data[i + 3] === B.data[i + 3];
+    if (!match) diffBytes += 4;
+    diff[i] = diff[i + 3] = match ? 0 : 255;
+  }
+  return {
+    imageA: A,
+    imageB: B,
+    diffBytes,
+    size,
+    diff: new ImageData(diff, w, h)
+  };
+}
+async function imageDiff(srcA, srcB) {
+  const [A, B] = await Promise.all([imageData(srcA), imageData(srcB)]);
+  return imageDataDiff(A, B);
+}
+var ImageDiff = class extends Component {
+  src1;
+  src2;
+  ratio = 1;
+  hidediff = false;
+  value;
+};
+component(ImageDiff, {
+  tagName: "spec-image-diff",
+  init: [
+    attribute("src1"),
+    attribute("src2"),
+    attribute("ratio"),
+    styleAttribute("hidediff")
+  ],
+  augment: [
+    css(`
 	:host {
 		display: inline-block;
 		position: relative;
@@ -101,4 +1619,92 @@ ${e==="inverse-surface"?le("inverse-primary","primary"):""}
 		height: '100%';
 	}
 	:host([hidediff]) .diff { opacity: 0 },
-`),t=>{let e=document.createElement("canvas");e.className="absolute diff",e.ariaLabel="rendered diff";let r=E("img",{alt:"source a",className:"absolute"}),n=E("img",{alt:"source b",className:"absolute"}),o=e.getContext("2d");function i(){if(!o)throw new Error("No rendering context");!t.src1||!t.src2||(r.src=t.src2,n.src=t.src1,gt(t.src1,t.src2).then(({diff:s})=>{t.style.width=`${e.width=s.width}px`,t.style.height=`${e.height=s.height}px`,o.putImageData(s,0,0)},s=>console.error(s)))}return t.shadowRoot?.append(n,r,e),y(y(P(t,"src1"),P(t,"src2")).raf(i),P(t,"ratio").raf(s=>r.style.opacity=s.toString()))}]});var z=class{suites;baselinePath;constructor(e){this.suites=e.suites,this.baselinePath=e.baselinePath}async runSuite(e){await e.run(),this.renderTestReport(e)}renderTestReport(e){let r=0,n=[],o=e.results;o.forEach(i=>{i.success===!1&&(r++,n.push(i))}),o.length===0&&e.tests.length===0&&e.only.length===0&&(r++,o.push({success:!1,message:"No assertions found"})),it(e.id,`${e.name}${r>0?` (${r} failures)`:""}`),o.forEach(i=>{dt(i,this.baselinePath),i.success||pt(i)}),e.only.length?e.only.forEach(i=>this.renderTestReport(i)):e.tests.forEach(i=>this.renderTestReport(i)),st()}async run(){await Promise.all(this.suites.map(r=>this.runSuite(r)));let e=document.createElement("cxl-content");e.innerHTML=p,e.addEventListener("click",r=>{xt(this.suites,r).catch(n=>console.error(n))}),document.body.appendChild(e)}},Yt=z;export{X as ImageDiff,Yt as default,N as escapeHtml,qt as image,xe as imageData,ht as imageDataDiff,gt as imageDiff,mt as loadImage};
+`),
+    ($) => {
+      const C = document.createElement("canvas");
+      C.className = "absolute diff";
+      C.ariaLabel = "rendered diff";
+      const A = tsx("img", { alt: "source a", className: "absolute" });
+      const B = tsx("img", { alt: "source b", className: "absolute" });
+      const ctx = C.getContext("2d");
+      function render() {
+        if (!ctx) throw new Error("No rendering context");
+        if (!$.src1 || !$.src2) return;
+        A.src = $.src2;
+        B.src = $.src1;
+        imageDiff($.src1, $.src2).then(
+          ({ diff }) => {
+            $.style.width = `${C.width = diff.width}px`;
+            $.style.height = `${C.height = diff.height}px`;
+            ctx.putImageData(diff, 0, 0);
+          },
+          (e) => console.error(e)
+        );
+      }
+      $.shadowRoot?.append(B, A, C);
+      return merge(
+        merge(get($, "src1"), get($, "src2")).raf(render),
+        get($, "ratio").raf((val) => A.style.opacity = val.toString())
+      );
+    }
+  ]
+});
+var BrowserRunner = class {
+  suites;
+  baselinePath;
+  constructor(config) {
+    this.suites = config.suites;
+    this.baselinePath = config.baselinePath;
+  }
+  async runSuite(suite) {
+    await suite.run();
+    this.renderTestReport(suite);
+  }
+  renderTestReport(test) {
+    let failureCount = 0;
+    const failures = [];
+    const results = test.results;
+    results.forEach((r) => {
+      if (r.success === false) {
+        failureCount++;
+        failures.push(r);
+      }
+    });
+    if (results.length === 0 && test.tests.length === 0 && test.only.length === 0) {
+      failureCount++;
+      results.push({ success: false, message: "No assertions found" });
+    }
+    group(
+      test.id,
+      `${test.name}${failureCount > 0 ? ` (${failureCount} failures)` : ""}`
+    );
+    results.forEach((r) => {
+      printResult(r, this.baselinePath);
+      if (!r.success) printError(r);
+    });
+    if (test.only.length)
+      test.only.forEach((test2) => this.renderTestReport(test2));
+    else test.tests.forEach((test2) => this.renderTestReport(test2));
+    groupEnd();
+  }
+  async run() {
+    await Promise.all(this.suites.map((suite) => this.runSuite(suite)));
+    const container = document.createElement("cxl-content");
+    container.innerHTML = output;
+    container.addEventListener("click", (ev) => {
+      onClick(this.suites, ev).catch((e) => console.error(e));
+    });
+    document.body.appendChild(container);
+  }
+};
+var index_default = BrowserRunner;
+export {
+  ImageDiff,
+  index_default as default,
+  escapeHtml,
+  image,
+  imageData,
+  imageDataDiff,
+  imageDiff,
+  loadImage
+};