@cxl/build 1.0.0-beta.6 → 1.0.0

package/spec-browser.js

@@ -1,132 +1,1710 @@
-let output = `<style>.thumb{vertical-align:middle;display:inline-block;overflow:hidden;width:320px;position:relative;vertical-align:top}
+// ../../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);
+}`);
+var itemLayout = `
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	padding: 4px 16px;
+	min-height: 56px;
+	align-items: center;
+	column-gap: 16px;
+	${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;
+
+--cxl-font-display-large: 400 57px/64px var(--cxl-font-family);
+--cxl-letter-spacing-display-large: -0.25px;
+--cxl-font-display-medium: 400 45px/52px var(--cxl-font-family);
+--cxl-letter-spacing-display-medium: 0;
+--cxl-font-display-small: 400 36px/44px var(--cxl-font-family);
+--cxl-letter-spacing-display-small: 0;
+--cxl-font-headline-large: 400 32px/40px var(--cxl-font-family);
+--cxl-letter-spacing-headline-large: -0.25px;
+--cxl-font-headline-medium: 400 28px/36px var(--cxl-font-family);
+--cxl-letter-spacing-headline-medium: 0;
+--cxl-font-headline-small: 400 24px/32px var(--cxl-font-family);
+--cxl-letter-spacing-headline-small: 0;
+--cxl-font-title-large: 400 22px/28px var(--cxl-font-family);
+--cxl-letter-spacing-title-large: 0;
+--cxl-font-title-medium: 500 16px/24px var(--cxl-font-family);
+--cxl-letter-spacing-title-medium: 0.15px;
+--cxl-font-title-small: 500 14px/20px var(--cxl-font-family);
+--cxl-letter-spacing-title-small: 0.1px;
+--cxl-font-body-large: 400 16px/24px var(--cxl-font-family);
+--cxl-letter-spacing-body-large: normal;
+--cxl-font-body-medium: 400 14px/20px var(--cxl-font-family);
+--cxl-letter-spacing-body-medium: 0.25px;
+--cxl-font-body-small: 400 12px/16px var(--cxl-font-family);
+--cxl-letter-spacing-body-small: 0.4px;
+--cxl-font-label-large: 500 14px/18px var(--cxl-font-family);
+--cxl-letter-spacing-label-large: 0.1px;
+--cxl-font-label-medium: 500 12px/16px var(--cxl-font-family);
+--cxl-letter-spacing-label-medium: 0.5px;
+--cxl-font-label-small: 500 11px/16px var(--cxl-font-family);
+--cxl-letter-spacing-label-small: 0.5px;
+--cxl-font-code:400 14px var(--cxl-font-monospace);
+--cxl-letter-spacing-code: 0.2px;
+
+--cxl-font-weight-bold: 700;
+--cxl-font-weight-label-large-prominent: var(--cxl-font-weight-bold);
+
+--cxl-speed:200ms;
+
+--cxl-elevation-1: rgb(0 0 0 / .2) 0 2px 1px -1px, rgb(0 0 0 / .14) 0 1px 1px 0, rgb(0 0 0 / .12) 0px 1px 3px 0;
+--cxl-elevation-2: rgb(0 0 0 / .2) 0 3px 3px -2px, rgb(0 0 0 / .14) 0 3px 4px 0, rgb(0 0 0 / .12) 0px 1px 8px 0;
+--cxl-elevation-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;;
+--cxl-elevation-4: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+--cxl-elevation-5: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+
+--cxl-shape-corner-xlarge: 28px;
+--cxl-shape-corner-large: 16px;
+--cxl-shape-corner-medium: 12px;
+--cxl-shape-corner-small: 8px;
+--cxl-shape-corner-xsmall: 4px;
+--cxl-shape-corner-full: 50vh;
+}
+	`,
+  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) ${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 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>`;
-//let baselinePath: string;
 function group(testId, title) {
-    output += `<dl><dt><a data-test="${testId}" href="#">${escapeHtml(title)}</a></dt><dd>`;
+  output += `<dl><dt><a data-test="${testId}" href="#">${escapeHtml(
+    title
+  )}</a></dt><dd>`;
 }
 function groupEnd() {
-    output += '</dd></dl>';
+  output += "</dd></dl>";
 }
-const ENTITIES_REGEX = /[&<>]/g, ENTITIES_MAP = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
+var ENTITIES_REGEX = /[&<>]/g;
+var ENTITIES_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
 };
-export function escapeHtml(str) {
-    return (str &&
-        str.replace(ENTITIES_REGEX, e => ENTITIES_MAP[e] || ''));
+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 += `
+  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>
+			<pre>${escapeHtml(msg.stack || "")}</pre>
 		`;
-    }
-    else
-        output += `<p style="white-space:pre-wrap">${escapeHtml(msg)}</p>`;
-    output += '</div>';
+  } else output += `<p style="white-space:pre-wrap">${escapeHtml(msg)}</p>`;
+  output += "</div>";
 }
 function success() {
-    return '&check;';
+  return "&check;";
 }
 function failure() {
-    return '&times;';
+  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) {
-    output += result.success ? success() : failure();
-    /*const data = result.data;
-    if (data?.type === 'figure') {
-        require('@cxl/workspace.ui/image-diff.js');
-        output += `<div class="thumb">${data.html}</div>
-        <cxl-image-diff src1="spec/${data.name}.png" src2="${baselinePath}/${data.name}.png"></cxl-image-diff>`;
-    }*/
-}
-function renderTestReport(test) {
+  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;
+		fontSize: 0;
+	}
+	.absolute {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: '100%';
+		height: '100%';
+	}
+	:host([hidediff]) .diff { opacity: 0 },
+`),
+    ($) => {
+      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) {
+    results.forEach((r) => {
+      if (r.success === false) {
         failureCount++;
-        results.push({ success: false, message: 'No assertions found' });
+        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);
-        if (!r.success)
-            printError(r);
+    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((test) => renderTestReport(test));
-    else
-        test.tests.forEach((test) => renderTestReport(test));
+      test.only.forEach((test2) => this.renderTestReport(test2));
+    else test.tests.forEach((test2) => this.renderTestReport(test2));
     groupEnd();
-}
-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);
-        }
-    }
-}
-window.__cxlRunner = data => {
-    if (data.type === 'figure')
-        return {
-            success: true,
-            message: 'Screenshot should match baseline',
-            data,
-        };
-    return {
-        success: false,
-        message: `${data.type} not supported.`,
-    };
+  }
+  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);
+  }
 };
-const browserRunner = {
-    async runSuite(suite) {
-        await suite.run();
-        renderTestReport(suite);
-    },
-    async run(suites, _baselineDir) {
-        //baselinePath = baselineDir;
-        await Promise.all(suites.map(suite => this.runSuite(suite)));
-        const container = document.createElement('cxl-content');
-        container.innerHTML = output;
-        container.addEventListener('click', ev => onClick(suites, ev));
-        document.body.appendChild(container);
-    },
+var index_default = BrowserRunner;
+export {
+  ImageDiff,
+  index_default as default,
+  escapeHtml,
+  image,
+  imageData,
+  imageDataDiff,
+  imageDiff,
+  loadImage
 };
-export default browserRunner;