@wodira/browser 0.1.0 → 1.0.0

package/dist/ui/boxes/index.js

@@ -0,0 +1,3071 @@
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/css-tag.js
+var NODE_MODE = false;
+var global = globalThis;
+var supportsAdoptingStyleSheets = global.ShadowRoot && (global.ShadyCSS === undefined || global.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var constructionToken = Symbol();
+var cssTagCache = new WeakMap;
+
+class CSSResult {
+  constructor(cssText, strings, safeToken) {
+    this["_$cssResult$"] = true;
+    if (safeToken !== constructionToken) {
+      throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    }
+    this.cssText = cssText;
+    this._strings = strings;
+  }
+  get styleSheet() {
+    let styleSheet = this._styleSheet;
+    const strings = this._strings;
+    if (supportsAdoptingStyleSheets && styleSheet === undefined) {
+      const cacheable = strings !== undefined && strings.length === 1;
+      if (cacheable) {
+        styleSheet = cssTagCache.get(strings);
+      }
+      if (styleSheet === undefined) {
+        (this._styleSheet = styleSheet = new CSSStyleSheet).replaceSync(this.cssText);
+        if (cacheable) {
+          cssTagCache.set(strings, styleSheet);
+        }
+      }
+    }
+    return styleSheet;
+  }
+  toString() {
+    return this.cssText;
+  }
+}
+var textFromCSSResult = (value) => {
+  if (value["_$cssResult$"] === true) {
+    return value.cssText;
+  } else if (typeof value === "number") {
+    return value;
+  } else {
+    throw new Error(`Value passed to 'css' function must be a 'css' function result: ` + `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` + `to ensure page security.`);
+  }
+};
+var unsafeCSS = (value) => new CSSResult(typeof value === "string" ? value : String(value), undefined, constructionToken);
+var css = (strings, ...values) => {
+  const cssText = strings.length === 1 ? strings[0] : values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
+  return new CSSResult(cssText, strings, constructionToken);
+};
+var adoptStyles = (renderRoot, styles) => {
+  if (supportsAdoptingStyleSheets) {
+    renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+  } else {
+    for (const s of styles) {
+      const style = document.createElement("style");
+      const nonce = global["litNonce"];
+      if (nonce !== undefined) {
+        style.setAttribute("nonce", nonce);
+      }
+      style.textContent = s.cssText;
+      renderRoot.appendChild(style);
+    }
+  }
+};
+var cssResultFromStyleSheet = (sheet) => {
+  let cssText = "";
+  for (const rule of sheet.cssRules) {
+    cssText += rule.cssText;
+  }
+  return unsafeCSS(cssText);
+};
+var getCompatibleStyle = supportsAdoptingStyleSheets || NODE_MODE && global.CSSStyleSheet === undefined ? (s) => s : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.js
+var { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf } = Object;
+var NODE_MODE2 = false;
+var global2 = globalThis;
+if (NODE_MODE2) {
+  global2.customElements ??= customElements;
+}
+var DEV_MODE = true;
+var issueWarning;
+var trustedTypes = global2.trustedTypes;
+var emptyStringForBooleanAttribute = trustedTypes ? trustedTypes.emptyScript : "";
+var polyfillSupport = DEV_MODE ? global2.reactiveElementPolyfillSupportDevMode : global2.reactiveElementPolyfillSupport;
+if (DEV_MODE) {
+  global2.litIssuedWarnings ??= new Set;
+  issueWarning = (code, warning) => {
+    warning += ` See https://lit.dev/msg/${code} for more information.`;
+    if (!global2.litIssuedWarnings.has(warning) && !global2.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global2.litIssuedWarnings.add(warning);
+    }
+  };
+  queueMicrotask(() => {
+    issueWarning("dev-mode", `Lit is in dev mode. Not recommended for production!`);
+    if (global2.ShadyDOM?.inUse && polyfillSupport === undefined) {
+      issueWarning("polyfill-support-missing", `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` + `the \`polyfill-support\` module has not been loaded.`);
+    }
+  });
+}
+var debugLogEvent = DEV_MODE ? (event) => {
+  const shouldEmit = global2.emitLitDebugLogEvents;
+  if (!shouldEmit) {
+    return;
+  }
+  global2.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: event
+  }));
+} : undefined;
+var JSCompiler_renameProperty = (prop, _obj) => prop;
+var defaultConverter = {
+  toAttribute(value, type) {
+    switch (type) {
+      case Boolean:
+        value = value ? emptyStringForBooleanAttribute : null;
+        break;
+      case Object:
+      case Array:
+        value = value == null ? value : JSON.stringify(value);
+        break;
+    }
+    return value;
+  },
+  fromAttribute(value, type) {
+    let fromValue = value;
+    switch (type) {
+      case Boolean:
+        fromValue = value !== null;
+        break;
+      case Number:
+        fromValue = value === null ? null : Number(value);
+        break;
+      case Object:
+      case Array:
+        try {
+          fromValue = JSON.parse(value);
+        } catch (e) {
+          fromValue = null;
+        }
+        break;
+    }
+    return fromValue;
+  }
+};
+var notEqual = (value, old) => !is(value, old);
+var defaultPropertyDeclaration = {
+  attribute: true,
+  type: String,
+  converter: defaultConverter,
+  reflect: false,
+  useDefault: false,
+  hasChanged: notEqual
+};
+Symbol.metadata ??= Symbol("metadata");
+global2.litPropertyMetadata ??= new WeakMap;
+
+class ReactiveElement extends HTMLElement {
+  static addInitializer(initializer) {
+    this.__prepare();
+    (this._initializers ??= []).push(initializer);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    return this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()];
+  }
+  static createProperty(name, options = defaultPropertyDeclaration) {
+    if (options.state) {
+      options.attribute = false;
+    }
+    this.__prepare();
+    if (this.prototype.hasOwnProperty(name)) {
+      options = Object.create(options);
+      options.wrapped = true;
+    }
+    this.elementProperties.set(name, options);
+    if (!options.noAccessor) {
+      const key = DEV_MODE ? Symbol.for(`${String(name)} (@property() cache)`) : Symbol();
+      const descriptor = this.getPropertyDescriptor(name, key, options);
+      if (descriptor !== undefined) {
+        defineProperty(this.prototype, name, descriptor);
+      }
+    }
+  }
+  static getPropertyDescriptor(name, key, options) {
+    const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? {
+      get() {
+        return this[key];
+      },
+      set(v) {
+        this[key] = v;
+      }
+    };
+    if (DEV_MODE && get == null) {
+      if ("value" in (getOwnPropertyDescriptor(this.prototype, name) ?? {})) {
+        throw new Error(`Field ${JSON.stringify(String(name))} on ` + `${this.name} was declared as a reactive property ` + `but it's actually declared as a value on the prototype. ` + `Usually this is due to using @property or @state on a method.`);
+      }
+      issueWarning("reactive-property-without-getter", `Field ${JSON.stringify(String(name))} on ` + `${this.name} was declared as a reactive property ` + `but it does not have a getter. This will be an error in a ` + `future version of Lit.`);
+    }
+    return {
+      get,
+      set(value) {
+        const oldValue = get?.call(this);
+        set?.call(this, value);
+        this.requestUpdate(name, oldValue, options);
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  static getPropertyOptions(name) {
+    return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
+  }
+  static __prepare() {
+    if (this.hasOwnProperty(JSCompiler_renameProperty("elementProperties", this))) {
+      return;
+    }
+    const superCtor = getPrototypeOf(this);
+    superCtor.finalize();
+    if (superCtor._initializers !== undefined) {
+      this._initializers = [...superCtor._initializers];
+    }
+    this.elementProperties = new Map(superCtor.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(JSCompiler_renameProperty("finalized", this))) {
+      return;
+    }
+    this.finalized = true;
+    this.__prepare();
+    if (this.hasOwnProperty(JSCompiler_renameProperty("properties", this))) {
+      const props = this.properties;
+      const propKeys = [
+        ...getOwnPropertyNames(props),
+        ...getOwnPropertySymbols(props)
+      ];
+      for (const p of propKeys) {
+        this.createProperty(p, props[p]);
+      }
+    }
+    const metadata = this[Symbol.metadata];
+    if (metadata !== null) {
+      const properties = litPropertyMetadata.get(metadata);
+      if (properties !== undefined) {
+        for (const [p, options] of properties) {
+          this.elementProperties.set(p, options);
+        }
+      }
+    }
+    this.__attributeToPropertyMap = new Map;
+    for (const [p, options] of this.elementProperties) {
+      const attr = this.__attributeNameForProperty(p, options);
+      if (attr !== undefined) {
+        this.__attributeToPropertyMap.set(attr, p);
+      }
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+    if (DEV_MODE) {
+      if (this.hasOwnProperty("createProperty")) {
+        issueWarning("no-override-create-property", "Overriding ReactiveElement.createProperty() is deprecated. " + "The override will not be called with standard decorators");
+      }
+      if (this.hasOwnProperty("getPropertyDescriptor")) {
+        issueWarning("no-override-get-property-descriptor", "Overriding ReactiveElement.getPropertyDescriptor() is deprecated. " + "The override will not be called with standard decorators");
+      }
+    }
+  }
+  static finalizeStyles(styles) {
+    const elementStyles = [];
+    if (Array.isArray(styles)) {
+      const set = new Set(styles.flat(Infinity).reverse());
+      for (const s of set) {
+        elementStyles.unshift(getCompatibleStyle(s));
+      }
+    } else if (styles !== undefined) {
+      elementStyles.push(getCompatibleStyle(styles));
+    }
+    return elementStyles;
+  }
+  static __attributeNameForProperty(name, options) {
+    const attribute = options.attribute;
+    return attribute === false ? undefined : typeof attribute === "string" ? attribute : typeof name === "string" ? name.toLowerCase() : undefined;
+  }
+  constructor() {
+    super();
+    this.__instanceProperties = undefined;
+    this.isUpdatePending = false;
+    this.hasUpdated = false;
+    this.__reflectingProperty = null;
+    this.__initialize();
+  }
+  __initialize() {
+    this.__updatePromise = new Promise((res) => this.enableUpdating = res);
+    this._$changedProperties = new Map;
+    this.__saveInstanceProperties();
+    this.requestUpdate();
+    this.constructor._initializers?.forEach((i) => i(this));
+  }
+  addController(controller) {
+    (this.__controllers ??= new Set).add(controller);
+    if (this.renderRoot !== undefined && this.isConnected) {
+      controller.hostConnected?.();
+    }
+  }
+  removeController(controller) {
+    this.__controllers?.delete(controller);
+  }
+  __saveInstanceProperties() {
+    const instanceProperties = new Map;
+    const elementProperties = this.constructor.elementProperties;
+    for (const p of elementProperties.keys()) {
+      if (this.hasOwnProperty(p)) {
+        instanceProperties.set(p, this[p]);
+        delete this[p];
+      }
+    }
+    if (instanceProperties.size > 0) {
+      this.__instanceProperties = instanceProperties;
+    }
+  }
+  createRenderRoot() {
+    const renderRoot = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    adoptStyles(renderRoot, this.constructor.elementStyles);
+    return renderRoot;
+  }
+  connectedCallback() {
+    this.renderRoot ??= this.createRenderRoot();
+    this.enableUpdating(true);
+    this.__controllers?.forEach((c) => c.hostConnected?.());
+  }
+  enableUpdating(_requestedUpdate) {}
+  disconnectedCallback() {
+    this.__controllers?.forEach((c) => c.hostDisconnected?.());
+  }
+  attributeChangedCallback(name, _old, value) {
+    this._$attributeToProperty(name, value);
+  }
+  __propertyToAttribute(name, value) {
+    const elemProperties = this.constructor.elementProperties;
+    const options = elemProperties.get(name);
+    const attr = this.constructor.__attributeNameForProperty(name, options);
+    if (attr !== undefined && options.reflect === true) {
+      const converter = options.converter?.toAttribute !== undefined ? options.converter : defaultConverter;
+      const attrValue = converter.toAttribute(value, options.type);
+      if (DEV_MODE && this.constructor.enabledWarnings.includes("migration") && attrValue === undefined) {
+        issueWarning("undefined-attribute-value", `The attribute value for the ${name} property is ` + `undefined on element ${this.localName}. The attribute will be ` + `removed, but in the previous version of \`ReactiveElement\`, ` + `the attribute would not have changed.`);
+      }
+      this.__reflectingProperty = name;
+      if (attrValue == null) {
+        this.removeAttribute(attr);
+      } else {
+        this.setAttribute(attr, attrValue);
+      }
+      this.__reflectingProperty = null;
+    }
+  }
+  _$attributeToProperty(name, value) {
+    const ctor = this.constructor;
+    const propName = ctor.__attributeToPropertyMap.get(name);
+    if (propName !== undefined && this.__reflectingProperty !== propName) {
+      const options = ctor.getPropertyOptions(propName);
+      const converter = typeof options.converter === "function" ? { fromAttribute: options.converter } : options.converter?.fromAttribute !== undefined ? options.converter : defaultConverter;
+      this.__reflectingProperty = propName;
+      const convertedValue = converter.fromAttribute(value, options.type);
+      this[propName] = convertedValue ?? this.__defaultValues?.get(propName) ?? convertedValue;
+      this.__reflectingProperty = null;
+    }
+  }
+  requestUpdate(name, oldValue, options, useNewValue = false, newValue) {
+    if (name !== undefined) {
+      if (DEV_MODE && name instanceof Event) {
+        issueWarning(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
+      }
+      const ctor = this.constructor;
+      if (useNewValue === false) {
+        newValue = this[name];
+      }
+      options ??= ctor.getPropertyOptions(name);
+      const changed = (options.hasChanged ?? notEqual)(newValue, oldValue) || options.useDefault && options.reflect && newValue === this.__defaultValues?.get(name) && !this.hasAttribute(ctor.__attributeNameForProperty(name, options));
+      if (changed) {
+        this._$changeProperty(name, oldValue, options);
+      } else {
+        return;
+      }
+    }
+    if (this.isUpdatePending === false) {
+      this.__updatePromise = this.__enqueueUpdate();
+    }
+  }
+  _$changeProperty(name, oldValue, { useDefault, reflect, wrapped }, initializeValue) {
+    if (useDefault && !(this.__defaultValues ??= new Map).has(name)) {
+      this.__defaultValues.set(name, initializeValue ?? oldValue ?? this[name]);
+      if (wrapped !== true || initializeValue !== undefined) {
+        return;
+      }
+    }
+    if (!this._$changedProperties.has(name)) {
+      if (!this.hasUpdated && !useDefault) {
+        oldValue = undefined;
+      }
+      this._$changedProperties.set(name, oldValue);
+    }
+    if (reflect === true && this.__reflectingProperty !== name) {
+      (this.__reflectingProperties ??= new Set).add(name);
+    }
+  }
+  async __enqueueUpdate() {
+    this.isUpdatePending = true;
+    try {
+      await this.__updatePromise;
+    } catch (e) {
+      Promise.reject(e);
+    }
+    const result = this.scheduleUpdate();
+    if (result != null) {
+      await result;
+    }
+    return !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    const result = this.performUpdate();
+    if (DEV_MODE && this.constructor.enabledWarnings.includes("async-perform-update") && typeof result?.then === "function") {
+      issueWarning("async-perform-update", `Element ${this.localName} returned a Promise from performUpdate(). ` + `This behavior is deprecated and will be removed in a future ` + `version of ReactiveElement.`);
+    }
+    return result;
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) {
+      return;
+    }
+    debugLogEvent?.({ kind: "update" });
+    if (!this.hasUpdated) {
+      this.renderRoot ??= this.createRenderRoot();
+      if (DEV_MODE) {
+        const ctor = this.constructor;
+        const shadowedProperties = [...ctor.elementProperties.keys()].filter((p) => this.hasOwnProperty(p) && (p in getPrototypeOf(this)));
+        if (shadowedProperties.length) {
+          throw new Error(`The following properties on element ${this.localName} will not ` + `trigger updates as expected because they are set using class ` + `fields: ${shadowedProperties.join(", ")}. ` + `Native class fields and some compiled output will overwrite ` + `accessors used for detecting changes. See ` + `https://lit.dev/msg/class-field-shadowing ` + `for more information.`);
+        }
+      }
+      if (this.__instanceProperties) {
+        for (const [p, value] of this.__instanceProperties) {
+          this[p] = value;
+        }
+        this.__instanceProperties = undefined;
+      }
+      const elementProperties = this.constructor.elementProperties;
+      if (elementProperties.size > 0) {
+        for (const [p, options] of elementProperties) {
+          const { wrapped } = options;
+          const value = this[p];
+          if (wrapped === true && !this._$changedProperties.has(p) && value !== undefined) {
+            this._$changeProperty(p, undefined, options, value);
+          }
+        }
+      }
+    }
+    let shouldUpdate = false;
+    const changedProperties = this._$changedProperties;
+    try {
+      shouldUpdate = this.shouldUpdate(changedProperties);
+      if (shouldUpdate) {
+        this.willUpdate(changedProperties);
+        this.__controllers?.forEach((c) => c.hostUpdate?.());
+        this.update(changedProperties);
+      } else {
+        this.__markUpdated();
+      }
+    } catch (e) {
+      shouldUpdate = false;
+      this.__markUpdated();
+      throw e;
+    }
+    if (shouldUpdate) {
+      this._$didUpdate(changedProperties);
+    }
+  }
+  willUpdate(_changedProperties) {}
+  _$didUpdate(changedProperties) {
+    this.__controllers?.forEach((c) => c.hostUpdated?.());
+    if (!this.hasUpdated) {
+      this.hasUpdated = true;
+      this.firstUpdated(changedProperties);
+    }
+    this.updated(changedProperties);
+    if (DEV_MODE && this.isUpdatePending && this.constructor.enabledWarnings.includes("change-in-update")) {
+      issueWarning("change-in-update", `Element ${this.localName} scheduled an update ` + `(generally because a property was set) ` + `after an update completed, causing a new update to be scheduled. ` + `This is inefficient and should be avoided unless the next update ` + `can only be scheduled as a side effect of the previous update.`);
+    }
+  }
+  __markUpdated() {
+    this._$changedProperties = new Map;
+    this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this.__updatePromise;
+  }
+  shouldUpdate(_changedProperties) {
+    return true;
+  }
+  update(_changedProperties) {
+    this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p]));
+    this.__markUpdated();
+  }
+  updated(_changedProperties) {}
+  firstUpdated(_changedProperties) {}
+}
+ReactiveElement.elementStyles = [];
+ReactiveElement.shadowRootOptions = { mode: "open" };
+ReactiveElement[JSCompiler_renameProperty("elementProperties", ReactiveElement)] = new Map;
+ReactiveElement[JSCompiler_renameProperty("finalized", ReactiveElement)] = new Map;
+polyfillSupport?.({ ReactiveElement });
+if (DEV_MODE) {
+  ReactiveElement.enabledWarnings = [
+    "change-in-update",
+    "async-perform-update"
+  ];
+  const ensureOwnWarnings = function(ctor) {
+    if (!ctor.hasOwnProperty(JSCompiler_renameProperty("enabledWarnings", ctor))) {
+      ctor.enabledWarnings = ctor.enabledWarnings.slice();
+    }
+  };
+  ReactiveElement.enableWarning = function(warning) {
+    ensureOwnWarnings(this);
+    if (!this.enabledWarnings.includes(warning)) {
+      this.enabledWarnings.push(warning);
+    }
+  };
+  ReactiveElement.disableWarning = function(warning) {
+    ensureOwnWarnings(this);
+    const i = this.enabledWarnings.indexOf(warning);
+    if (i >= 0) {
+      this.enabledWarnings.splice(i, 1);
+    }
+  };
+}
+(global2.reactiveElementVersions ??= []).push("2.1.2");
+if (DEV_MODE && global2.reactiveElementVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning("multiple-versions", `Multiple versions of Lit loaded. Loading multiple versions ` + `is not recommended.`);
+  });
+}
+
+// ../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/development/lit-html.js
+var DEV_MODE2 = true;
+var ENABLE_EXTRA_SECURITY_HOOKS = true;
+var ENABLE_SHADYDOM_NOPATCH = true;
+var NODE_MODE3 = false;
+var global3 = globalThis;
+var debugLogEvent2 = DEV_MODE2 ? (event) => {
+  const shouldEmit = global3.emitLitDebugLogEvents;
+  if (!shouldEmit) {
+    return;
+  }
+  global3.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: event
+  }));
+} : undefined;
+var debugLogRenderId = 0;
+var issueWarning2;
+if (DEV_MODE2) {
+  global3.litIssuedWarnings ??= new Set;
+  issueWarning2 = (code, warning) => {
+    warning += code ? ` See https://lit.dev/msg/${code} for more information.` : "";
+    if (!global3.litIssuedWarnings.has(warning) && !global3.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global3.litIssuedWarnings.add(warning);
+    }
+  };
+  queueMicrotask(() => {
+    issueWarning2("dev-mode", `Lit is in dev mode. Not recommended for production!`);
+  });
+}
+var wrap = ENABLE_SHADYDOM_NOPATCH && global3.ShadyDOM?.inUse && global3.ShadyDOM?.noPatch === true ? global3.ShadyDOM.wrap : (node) => node;
+var trustedTypes2 = global3.trustedTypes;
+var policy = trustedTypes2 ? trustedTypes2.createPolicy("lit-html", {
+  createHTML: (s) => s
+}) : undefined;
+var identityFunction = (value) => value;
+var noopSanitizer = (_node, _name, _type) => identityFunction;
+var setSanitizer = (newSanitizer) => {
+  if (!ENABLE_EXTRA_SECURITY_HOOKS) {
+    return;
+  }
+  if (sanitizerFactoryInternal !== noopSanitizer) {
+    throw new Error(`Attempted to overwrite existing lit-html security policy.` + ` setSanitizeDOMValueFactory should be called at most once.`);
+  }
+  sanitizerFactoryInternal = newSanitizer;
+};
+var _testOnlyClearSanitizerFactoryDoNotCallOrElse = () => {
+  sanitizerFactoryInternal = noopSanitizer;
+};
+var createSanitizer = (node, name, type) => {
+  return sanitizerFactoryInternal(node, name, type);
+};
+var boundAttributeSuffix = "$lit$";
+var marker = `lit$${Math.random().toFixed(9).slice(2)}$`;
+var markerMatch = "?" + marker;
+var nodeMarker = `<${markerMatch}>`;
+var d = NODE_MODE3 && global3.document === undefined ? {
+  createTreeWalker() {
+    return {};
+  }
+} : document;
+var createMarker = () => d.createComment("");
+var isPrimitive = (value) => value === null || typeof value != "object" && typeof value != "function";
+var isArray = Array.isArray;
+var isIterable = (value) => isArray(value) || typeof value?.[Symbol.iterator] === "function";
+var SPACE_CHAR = `[ 	
+\f\r]`;
+var ATTR_VALUE_CHAR = `[^ 	
+\f\r"'\`<>=]`;
+var NAME_CHAR = `[^\\s"'>=/]`;
+var textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var COMMENT_START = 1;
+var TAG_NAME = 2;
+var DYNAMIC_TAG_NAME = 3;
+var commentEndRegex = /-->/g;
+var comment2EndRegex = />/g;
+var tagEndRegex = new RegExp(`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`, "g");
+var ENTIRE_MATCH = 0;
+var ATTRIBUTE_NAME = 1;
+var SPACES_AND_EQUALS = 2;
+var QUOTE_CHAR = 3;
+var singleQuoteAttrEndRegex = /'/g;
+var doubleQuoteAttrEndRegex = /"/g;
+var rawTextElement = /^(?:script|style|textarea|title)$/i;
+var HTML_RESULT = 1;
+var SVG_RESULT = 2;
+var MATHML_RESULT = 3;
+var ATTRIBUTE_PART = 1;
+var CHILD_PART = 2;
+var PROPERTY_PART = 3;
+var BOOLEAN_ATTRIBUTE_PART = 4;
+var EVENT_PART = 5;
+var ELEMENT_PART = 6;
+var COMMENT_PART = 7;
+var tag = (type) => (strings, ...values) => {
+  if (DEV_MODE2 && strings.some((s) => s === undefined)) {
+    console.warn(`Some template strings are undefined.
+` + "This is probably caused by illegal octal escape sequences.");
+  }
+  if (DEV_MODE2) {
+    if (values.some((val) => val?.["_$litStatic$"])) {
+      issueWarning2("", `Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.
+` + `Please use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions`);
+    }
+  }
+  return {
+    ["_$litType$"]: type,
+    strings,
+    values
+  };
+};
+var html = tag(HTML_RESULT);
+var svg = tag(SVG_RESULT);
+var mathml = tag(MATHML_RESULT);
+var noChange = Symbol.for("lit-noChange");
+var nothing = Symbol.for("lit-nothing");
+var templateCache = new WeakMap;
+var walker = d.createTreeWalker(d, 129);
+var sanitizerFactoryInternal = noopSanitizer;
+function trustFromTemplateString(tsa, stringFromTSA) {
+  if (!isArray(tsa) || !tsa.hasOwnProperty("raw")) {
+    let message = "invalid template strings array";
+    if (DEV_MODE2) {
+      message = `
+          Internal Error: expected template strings to be an array
+          with a 'raw' field. Faking a template strings array by
+          calling html or svg like an ordinary function is effectively
+          the same as calling unsafeHtml and can lead to major security
+          issues, e.g. opening your code up to XSS attacks.
+          If you're using the html or svg tagged template functions normally
+          and still seeing this error, please file a bug at
+          https://github.com/lit/lit/issues/new?template=bug_report.md
+          and include information about your build tooling, if any.
+        `.trim().replace(/\n */g, `
+`);
+    }
+    throw new Error(message);
+  }
+  return policy !== undefined ? policy.createHTML(stringFromTSA) : stringFromTSA;
+}
+var getTemplateHtml = (strings, type) => {
+  const l = strings.length - 1;
+  const attrNames = [];
+  let html = type === SVG_RESULT ? "<svg>" : type === MATHML_RESULT ? "<math>" : "";
+  let rawTextEndRegex;
+  let regex = textEndRegex;
+  for (let i = 0;i < l; i++) {
+    const s = strings[i];
+    let attrNameEndIndex = -1;
+    let attrName;
+    let lastIndex = 0;
+    let match;
+    while (lastIndex < s.length) {
+      regex.lastIndex = lastIndex;
+      match = regex.exec(s);
+      if (match === null) {
+        break;
+      }
+      lastIndex = regex.lastIndex;
+      if (regex === textEndRegex) {
+        if (match[COMMENT_START] === "!--") {
+          regex = commentEndRegex;
+        } else if (match[COMMENT_START] !== undefined) {
+          regex = comment2EndRegex;
+        } else if (match[TAG_NAME] !== undefined) {
+          if (rawTextElement.test(match[TAG_NAME])) {
+            rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, "g");
+          }
+          regex = tagEndRegex;
+        } else if (match[DYNAMIC_TAG_NAME] !== undefined) {
+          if (DEV_MODE2) {
+            throw new Error("Bindings in tag names are not supported. Please use static templates instead. " + "See https://lit.dev/docs/templates/expressions/#static-expressions");
+          }
+          regex = tagEndRegex;
+        }
+      } else if (regex === tagEndRegex) {
+        if (match[ENTIRE_MATCH] === ">") {
+          regex = rawTextEndRegex ?? textEndRegex;
+          attrNameEndIndex = -1;
+        } else if (match[ATTRIBUTE_NAME] === undefined) {
+          attrNameEndIndex = -2;
+        } else {
+          attrNameEndIndex = regex.lastIndex - match[SPACES_AND_EQUALS].length;
+          attrName = match[ATTRIBUTE_NAME];
+          regex = match[QUOTE_CHAR] === undefined ? tagEndRegex : match[QUOTE_CHAR] === '"' ? doubleQuoteAttrEndRegex : singleQuoteAttrEndRegex;
+        }
+      } else if (regex === doubleQuoteAttrEndRegex || regex === singleQuoteAttrEndRegex) {
+        regex = tagEndRegex;
+      } else if (regex === commentEndRegex || regex === comment2EndRegex) {
+        regex = textEndRegex;
+      } else {
+        regex = tagEndRegex;
+        rawTextEndRegex = undefined;
+      }
+    }
+    if (DEV_MODE2) {
+      console.assert(attrNameEndIndex === -1 || regex === tagEndRegex || regex === singleQuoteAttrEndRegex || regex === doubleQuoteAttrEndRegex, "unexpected parse state B");
+    }
+    const end = regex === tagEndRegex && strings[i + 1].startsWith("/>") ? " " : "";
+    html += regex === textEndRegex ? s + nodeMarker : attrNameEndIndex >= 0 ? (attrNames.push(attrName), s.slice(0, attrNameEndIndex) + boundAttributeSuffix + s.slice(attrNameEndIndex)) + marker + end : s + marker + (attrNameEndIndex === -2 ? i : end);
+  }
+  const htmlResult = html + (strings[l] || "<?>") + (type === SVG_RESULT ? "</svg>" : type === MATHML_RESULT ? "</math>" : "");
+  return [trustFromTemplateString(strings, htmlResult), attrNames];
+};
+
+class Template {
+  constructor({ strings, ["_$litType$"]: type }, options) {
+    this.parts = [];
+    let node;
+    let nodeIndex = 0;
+    let attrNameIndex = 0;
+    const partCount = strings.length - 1;
+    const parts = this.parts;
+    const [html, attrNames] = getTemplateHtml(strings, type);
+    this.el = Template.createElement(html, options);
+    walker.currentNode = this.el.content;
+    if (type === SVG_RESULT || type === MATHML_RESULT) {
+      const wrapper = this.el.content.firstChild;
+      wrapper.replaceWith(...wrapper.childNodes);
+    }
+    while ((node = walker.nextNode()) !== null && parts.length < partCount) {
+      if (node.nodeType === 1) {
+        if (DEV_MODE2) {
+          const tag = node.localName;
+          if (/^(?:textarea|template)$/i.test(tag) && node.innerHTML.includes(marker)) {
+            const m = `Expressions are not supported inside \`${tag}\` ` + `elements. See https://lit.dev/msg/expression-in-${tag} for more ` + `information.`;
+            if (tag === "template") {
+              throw new Error(m);
+            } else
+              issueWarning2("", m);
+          }
+        }
+        if (node.hasAttributes()) {
+          for (const name of node.getAttributeNames()) {
+            if (name.endsWith(boundAttributeSuffix)) {
+              const realName = attrNames[attrNameIndex++];
+              const value = node.getAttribute(name);
+              const statics = value.split(marker);
+              const m = /([.?@])?(.*)/.exec(realName);
+              parts.push({
+                type: ATTRIBUTE_PART,
+                index: nodeIndex,
+                name: m[2],
+                strings: statics,
+                ctor: m[1] === "." ? PropertyPart : m[1] === "?" ? BooleanAttributePart : m[1] === "@" ? EventPart : AttributePart
+              });
+              node.removeAttribute(name);
+            } else if (name.startsWith(marker)) {
+              parts.push({
+                type: ELEMENT_PART,
+                index: nodeIndex
+              });
+              node.removeAttribute(name);
+            }
+          }
+        }
+        if (rawTextElement.test(node.tagName)) {
+          const strings = node.textContent.split(marker);
+          const lastIndex = strings.length - 1;
+          if (lastIndex > 0) {
+            node.textContent = trustedTypes2 ? trustedTypes2.emptyScript : "";
+            for (let i = 0;i < lastIndex; i++) {
+              node.append(strings[i], createMarker());
+              walker.nextNode();
+              parts.push({ type: CHILD_PART, index: ++nodeIndex });
+            }
+            node.append(strings[lastIndex], createMarker());
+          }
+        }
+      } else if (node.nodeType === 8) {
+        const data = node.data;
+        if (data === markerMatch) {
+          parts.push({ type: CHILD_PART, index: nodeIndex });
+        } else {
+          let i = -1;
+          while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
+            parts.push({ type: COMMENT_PART, index: nodeIndex });
+            i += marker.length - 1;
+          }
+        }
+      }
+      nodeIndex++;
+    }
+    if (DEV_MODE2) {
+      if (attrNames.length !== attrNameIndex) {
+        throw new Error(`Detected duplicate attribute bindings. This occurs if your template ` + `has duplicate attributes on an element tag. For example ` + `"<input ?disabled=\${true} ?disabled=\${false}>" contains a ` + `duplicate "disabled" attribute. The error was detected in ` + `the following template: 
+` + "`" + strings.join("${...}") + "`");
+      }
+    }
+    debugLogEvent2 && debugLogEvent2({
+      kind: "template prep",
+      template: this,
+      clonableTemplate: this.el,
+      parts: this.parts,
+      strings
+    });
+  }
+  static createElement(html, _options) {
+    const el = d.createElement("template");
+    el.innerHTML = html;
+    return el;
+  }
+}
+function resolveDirective(part, value, parent = part, attributeIndex) {
+  if (value === noChange) {
+    return value;
+  }
+  let currentDirective = attributeIndex !== undefined ? parent.__directives?.[attributeIndex] : parent.__directive;
+  const nextDirectiveConstructor = isPrimitive(value) ? undefined : value["_$litDirective$"];
+  if (currentDirective?.constructor !== nextDirectiveConstructor) {
+    currentDirective?.["_$notifyDirectiveConnectionChanged"]?.(false);
+    if (nextDirectiveConstructor === undefined) {
+      currentDirective = undefined;
+    } else {
+      currentDirective = new nextDirectiveConstructor(part);
+      currentDirective._$initialize(part, parent, attributeIndex);
+    }
+    if (attributeIndex !== undefined) {
+      (parent.__directives ??= [])[attributeIndex] = currentDirective;
+    } else {
+      parent.__directive = currentDirective;
+    }
+  }
+  if (currentDirective !== undefined) {
+    value = resolveDirective(part, currentDirective._$resolve(part, value.values), currentDirective, attributeIndex);
+  }
+  return value;
+}
+
+class TemplateInstance {
+  constructor(template, parent) {
+    this._$parts = [];
+    this._$disconnectableChildren = undefined;
+    this._$template = template;
+    this._$parent = parent;
+  }
+  get parentNode() {
+    return this._$parent.parentNode;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _clone(options) {
+    const { el: { content }, parts } = this._$template;
+    const fragment = (options?.creationScope ?? d).importNode(content, true);
+    walker.currentNode = fragment;
+    let node = walker.nextNode();
+    let nodeIndex = 0;
+    let partIndex = 0;
+    let templatePart = parts[0];
+    while (templatePart !== undefined) {
+      if (nodeIndex === templatePart.index) {
+        let part;
+        if (templatePart.type === CHILD_PART) {
+          part = new ChildPart(node, node.nextSibling, this, options);
+        } else if (templatePart.type === ATTRIBUTE_PART) {
+          part = new templatePart.ctor(node, templatePart.name, templatePart.strings, this, options);
+        } else if (templatePart.type === ELEMENT_PART) {
+          part = new ElementPart(node, this, options);
+        }
+        this._$parts.push(part);
+        templatePart = parts[++partIndex];
+      }
+      if (nodeIndex !== templatePart?.index) {
+        node = walker.nextNode();
+        nodeIndex++;
+      }
+    }
+    walker.currentNode = d;
+    return fragment;
+  }
+  _update(values) {
+    let i = 0;
+    for (const part of this._$parts) {
+      if (part !== undefined) {
+        debugLogEvent2 && debugLogEvent2({
+          kind: "set part",
+          part,
+          value: values[i],
+          valueIndex: i,
+          values,
+          templateInstance: this
+        });
+        if (part.strings !== undefined) {
+          part._$setValue(values, part, i);
+          i += part.strings.length - 2;
+        } else {
+          part._$setValue(values[i]);
+        }
+      }
+      i++;
+    }
+  }
+}
+
+class ChildPart {
+  get _$isConnected() {
+    return this._$parent?._$isConnected ?? this.__isConnected;
+  }
+  constructor(startNode, endNode, parent, options) {
+    this.type = CHILD_PART;
+    this._$committedValue = nothing;
+    this._$disconnectableChildren = undefined;
+    this._$startNode = startNode;
+    this._$endNode = endNode;
+    this._$parent = parent;
+    this.options = options;
+    this.__isConnected = options?.isConnected ?? true;
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      this._textSanitizer = undefined;
+    }
+  }
+  get parentNode() {
+    let parentNode = wrap(this._$startNode).parentNode;
+    const parent = this._$parent;
+    if (parent !== undefined && parentNode?.nodeType === 11) {
+      parentNode = parent.parentNode;
+    }
+    return parentNode;
+  }
+  get startNode() {
+    return this._$startNode;
+  }
+  get endNode() {
+    return this._$endNode;
+  }
+  _$setValue(value, directiveParent = this) {
+    if (DEV_MODE2 && this.parentNode === null) {
+      throw new Error(`This \`ChildPart\` has no \`parentNode\` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's \`innerHTML\` or \`textContent\` can do this.`);
+    }
+    value = resolveDirective(this, value, directiveParent);
+    if (isPrimitive(value)) {
+      if (value === nothing || value == null || value === "") {
+        if (this._$committedValue !== nothing) {
+          debugLogEvent2 && debugLogEvent2({
+            kind: "commit nothing to child",
+            start: this._$startNode,
+            end: this._$endNode,
+            parent: this._$parent,
+            options: this.options
+          });
+          this._$clear();
+        }
+        this._$committedValue = nothing;
+      } else if (value !== this._$committedValue && value !== noChange) {
+        this._commitText(value);
+      }
+    } else if (value["_$litType$"] !== undefined) {
+      this._commitTemplateResult(value);
+    } else if (value.nodeType !== undefined) {
+      if (DEV_MODE2 && this.options?.host === value) {
+        this._commitText(`[probable mistake: rendered a template's host in itself ` + `(commonly caused by writing \${this} in a template]`);
+        console.warn(`Attempted to render the template host`, value, `inside itself. This is almost always a mistake, and in dev mode `, `we render some warning text. In production however, we'll `, `render it, which will usually result in an error, and sometimes `, `in the element disappearing from the DOM.`);
+        return;
+      }
+      this._commitNode(value);
+    } else if (isIterable(value)) {
+      this._commitIterable(value);
+    } else {
+      this._commitText(value);
+    }
+  }
+  _insert(node) {
+    return wrap(wrap(this._$startNode).parentNode).insertBefore(node, this._$endNode);
+  }
+  _commitNode(value) {
+    if (this._$committedValue !== value) {
+      this._$clear();
+      if (ENABLE_EXTRA_SECURITY_HOOKS && sanitizerFactoryInternal !== noopSanitizer) {
+        const parentNodeName = this._$startNode.parentNode?.nodeName;
+        if (parentNodeName === "STYLE" || parentNodeName === "SCRIPT") {
+          let message = "Forbidden";
+          if (DEV_MODE2) {
+            if (parentNodeName === "STYLE") {
+              message = `Lit does not support binding inside style nodes. ` + `This is a security risk, as style injection attacks can ` + `exfiltrate data and spoof UIs. ` + `Consider instead using css\`...\` literals ` + `to compose styles, and do dynamic styling with ` + `css custom properties, ::parts, <slot>s, ` + `and by mutating the DOM rather than stylesheets.`;
+            } else {
+              message = `Lit does not support binding inside script nodes. ` + `This is a security risk, as it could allow arbitrary ` + `code execution.`;
+            }
+          }
+          throw new Error(message);
+        }
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit node",
+        start: this._$startNode,
+        parent: this._$parent,
+        value,
+        options: this.options
+      });
+      this._$committedValue = this._insert(value);
+    }
+  }
+  _commitText(value) {
+    if (this._$committedValue !== nothing && isPrimitive(this._$committedValue)) {
+      const node = wrap(this._$startNode).nextSibling;
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        if (this._textSanitizer === undefined) {
+          this._textSanitizer = createSanitizer(node, "data", "property");
+        }
+        value = this._textSanitizer(value);
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit text",
+        node,
+        value,
+        options: this.options
+      });
+      node.data = value;
+    } else {
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        const textNode = d.createTextNode("");
+        this._commitNode(textNode);
+        if (this._textSanitizer === undefined) {
+          this._textSanitizer = createSanitizer(textNode, "data", "property");
+        }
+        value = this._textSanitizer(value);
+        debugLogEvent2 && debugLogEvent2({
+          kind: "commit text",
+          node: textNode,
+          value,
+          options: this.options
+        });
+        textNode.data = value;
+      } else {
+        this._commitNode(d.createTextNode(value));
+        debugLogEvent2 && debugLogEvent2({
+          kind: "commit text",
+          node: wrap(this._$startNode).nextSibling,
+          value,
+          options: this.options
+        });
+      }
+    }
+    this._$committedValue = value;
+  }
+  _commitTemplateResult(result) {
+    const { values, ["_$litType$"]: type } = result;
+    const template = typeof type === "number" ? this._$getTemplate(result) : (type.el === undefined && (type.el = Template.createElement(trustFromTemplateString(type.h, type.h[0]), this.options)), type);
+    if (this._$committedValue?._$template === template) {
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template updating",
+        template,
+        instance: this._$committedValue,
+        parts: this._$committedValue._$parts,
+        options: this.options,
+        values
+      });
+      this._$committedValue._update(values);
+    } else {
+      const instance = new TemplateInstance(template, this);
+      const fragment = instance._clone(this.options);
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template instantiated",
+        template,
+        instance,
+        parts: instance._$parts,
+        options: this.options,
+        fragment,
+        values
+      });
+      instance._update(values);
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template instantiated and updated",
+        template,
+        instance,
+        parts: instance._$parts,
+        options: this.options,
+        fragment,
+        values
+      });
+      this._commitNode(fragment);
+      this._$committedValue = instance;
+    }
+  }
+  _$getTemplate(result) {
+    let template = templateCache.get(result.strings);
+    if (template === undefined) {
+      templateCache.set(result.strings, template = new Template(result));
+    }
+    return template;
+  }
+  _commitIterable(value) {
+    if (!isArray(this._$committedValue)) {
+      this._$committedValue = [];
+      this._$clear();
+    }
+    const itemParts = this._$committedValue;
+    let partIndex = 0;
+    let itemPart;
+    for (const item of value) {
+      if (partIndex === itemParts.length) {
+        itemParts.push(itemPart = new ChildPart(this._insert(createMarker()), this._insert(createMarker()), this, this.options));
+      } else {
+        itemPart = itemParts[partIndex];
+      }
+      itemPart._$setValue(item);
+      partIndex++;
+    }
+    if (partIndex < itemParts.length) {
+      this._$clear(itemPart && wrap(itemPart._$endNode).nextSibling, partIndex);
+      itemParts.length = partIndex;
+    }
+  }
+  _$clear(start = wrap(this._$startNode).nextSibling, from) {
+    this._$notifyConnectionChanged?.(false, true, from);
+    while (start !== this._$endNode) {
+      const n = wrap(start).nextSibling;
+      wrap(start).remove();
+      start = n;
+    }
+  }
+  setConnected(isConnected) {
+    if (this._$parent === undefined) {
+      this.__isConnected = isConnected;
+      this._$notifyConnectionChanged?.(isConnected);
+    } else if (DEV_MODE2) {
+      throw new Error("part.setConnected() may only be called on a " + "RootPart returned from render().");
+    }
+  }
+}
+
+class AttributePart {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  constructor(element, name, strings, parent, options) {
+    this.type = ATTRIBUTE_PART;
+    this._$committedValue = nothing;
+    this._$disconnectableChildren = undefined;
+    this.element = element;
+    this.name = name;
+    this._$parent = parent;
+    this.options = options;
+    if (strings.length > 2 || strings[0] !== "" || strings[1] !== "") {
+      this._$committedValue = new Array(strings.length - 1).fill(new String);
+      this.strings = strings;
+    } else {
+      this._$committedValue = nothing;
+    }
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      this._sanitizer = undefined;
+    }
+  }
+  _$setValue(value, directiveParent = this, valueIndex, noCommit) {
+    const strings = this.strings;
+    let change = false;
+    if (strings === undefined) {
+      value = resolveDirective(this, value, directiveParent, 0);
+      change = !isPrimitive(value) || value !== this._$committedValue && value !== noChange;
+      if (change) {
+        this._$committedValue = value;
+      }
+    } else {
+      const values = value;
+      value = strings[0];
+      let i, v;
+      for (i = 0;i < strings.length - 1; i++) {
+        v = resolveDirective(this, values[valueIndex + i], directiveParent, i);
+        if (v === noChange) {
+          v = this._$committedValue[i];
+        }
+        change ||= !isPrimitive(v) || v !== this._$committedValue[i];
+        if (v === nothing) {
+          value = nothing;
+        } else if (value !== nothing) {
+          value += (v ?? "") + strings[i + 1];
+        }
+        this._$committedValue[i] = v;
+      }
+    }
+    if (change && !noCommit) {
+      this._commitValue(value);
+    }
+  }
+  _commitValue(value) {
+    if (value === nothing) {
+      wrap(this.element).removeAttribute(this.name);
+    } else {
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        if (this._sanitizer === undefined) {
+          this._sanitizer = sanitizerFactoryInternal(this.element, this.name, "attribute");
+        }
+        value = this._sanitizer(value ?? "");
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit attribute",
+        element: this.element,
+        name: this.name,
+        value,
+        options: this.options
+      });
+      wrap(this.element).setAttribute(this.name, value ?? "");
+    }
+  }
+}
+
+class PropertyPart extends AttributePart {
+  constructor() {
+    super(...arguments);
+    this.type = PROPERTY_PART;
+  }
+  _commitValue(value) {
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      if (this._sanitizer === undefined) {
+        this._sanitizer = sanitizerFactoryInternal(this.element, this.name, "property");
+      }
+      value = this._sanitizer(value);
+    }
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit property",
+      element: this.element,
+      name: this.name,
+      value,
+      options: this.options
+    });
+    this.element[this.name] = value === nothing ? undefined : value;
+  }
+}
+
+class BooleanAttributePart extends AttributePart {
+  constructor() {
+    super(...arguments);
+    this.type = BOOLEAN_ATTRIBUTE_PART;
+  }
+  _commitValue(value) {
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit boolean attribute",
+      element: this.element,
+      name: this.name,
+      value: !!(value && value !== nothing),
+      options: this.options
+    });
+    wrap(this.element).toggleAttribute(this.name, !!value && value !== nothing);
+  }
+}
+
+class EventPart extends AttributePart {
+  constructor(element, name, strings, parent, options) {
+    super(element, name, strings, parent, options);
+    this.type = EVENT_PART;
+    if (DEV_MODE2 && this.strings !== undefined) {
+      throw new Error(`A \`<${element.localName}>\` has a \`@${name}=...\` listener with ` + "invalid content. Event listeners in templates must have exactly " + "one expression and no surrounding text.");
+    }
+  }
+  _$setValue(newListener, directiveParent = this) {
+    newListener = resolveDirective(this, newListener, directiveParent, 0) ?? nothing;
+    if (newListener === noChange) {
+      return;
+    }
+    const oldListener = this._$committedValue;
+    const shouldRemoveListener = newListener === nothing && oldListener !== nothing || newListener.capture !== oldListener.capture || newListener.once !== oldListener.once || newListener.passive !== oldListener.passive;
+    const shouldAddListener = newListener !== nothing && (oldListener === nothing || shouldRemoveListener);
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit event listener",
+      element: this.element,
+      name: this.name,
+      value: newListener,
+      options: this.options,
+      removeListener: shouldRemoveListener,
+      addListener: shouldAddListener,
+      oldListener
+    });
+    if (shouldRemoveListener) {
+      this.element.removeEventListener(this.name, this, oldListener);
+    }
+    if (shouldAddListener) {
+      this.element.addEventListener(this.name, this, newListener);
+    }
+    this._$committedValue = newListener;
+  }
+  handleEvent(event) {
+    if (typeof this._$committedValue === "function") {
+      this._$committedValue.call(this.options?.host ?? this.element, event);
+    } else {
+      this._$committedValue.handleEvent(event);
+    }
+  }
+}
+
+class ElementPart {
+  constructor(element, parent, options) {
+    this.element = element;
+    this.type = ELEMENT_PART;
+    this._$disconnectableChildren = undefined;
+    this._$parent = parent;
+    this.options = options;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _$setValue(value) {
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit to element binding",
+      element: this.element,
+      value,
+      options: this.options
+    });
+    resolveDirective(this, value);
+  }
+}
+var polyfillSupport2 = DEV_MODE2 ? global3.litHtmlPolyfillSupportDevMode : global3.litHtmlPolyfillSupport;
+polyfillSupport2?.(Template, ChildPart);
+(global3.litHtmlVersions ??= []).push("3.3.3");
+if (DEV_MODE2 && global3.litHtmlVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning2("multiple-versions", `Multiple versions of Lit loaded. ` + `Loading multiple versions is not recommended.`);
+  });
+}
+var render = (value, container, options) => {
+  if (DEV_MODE2 && container == null) {
+    throw new TypeError(`The container to render into may not be ${container}`);
+  }
+  const renderId = DEV_MODE2 ? debugLogRenderId++ : 0;
+  const partOwnerNode = options?.renderBefore ?? container;
+  let part = partOwnerNode["_$litPart$"];
+  debugLogEvent2 && debugLogEvent2({
+    kind: "begin render",
+    id: renderId,
+    value,
+    container,
+    options,
+    part
+  });
+  if (part === undefined) {
+    const endNode = options?.renderBefore ?? null;
+    partOwnerNode["_$litPart$"] = part = new ChildPart(container.insertBefore(createMarker(), endNode), endNode, undefined, options ?? {});
+  }
+  part._$setValue(value);
+  debugLogEvent2 && debugLogEvent2({
+    kind: "end render",
+    id: renderId,
+    value,
+    container,
+    options,
+    part
+  });
+  return part;
+};
+if (ENABLE_EXTRA_SECURITY_HOOKS) {
+  render.setSanitizer = setSanitizer;
+  render.createSanitizer = createSanitizer;
+  if (DEV_MODE2) {
+    render._testOnlyClearSanitizerFactoryDoNotCallOrElse = _testOnlyClearSanitizerFactoryDoNotCallOrElse;
+  }
+}
+
+// ../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/development/lit-element.js
+var JSCompiler_renameProperty2 = (prop, _obj) => prop;
+var DEV_MODE3 = true;
+var global4 = globalThis;
+var issueWarning3;
+if (DEV_MODE3) {
+  global4.litIssuedWarnings ??= new Set;
+  issueWarning3 = (code, warning) => {
+    warning += ` See https://lit.dev/msg/${code} for more information.`;
+    if (!global4.litIssuedWarnings.has(warning) && !global4.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global4.litIssuedWarnings.add(warning);
+    }
+  };
+}
+
+class LitElement extends ReactiveElement {
+  constructor() {
+    super(...arguments);
+    this.renderOptions = { host: this };
+    this.__childPart = undefined;
+  }
+  createRenderRoot() {
+    const renderRoot = super.createRenderRoot();
+    this.renderOptions.renderBefore ??= renderRoot.firstChild;
+    return renderRoot;
+  }
+  update(changedProperties) {
+    const value = this.render();
+    if (!this.hasUpdated) {
+      this.renderOptions.isConnected = this.isConnected;
+    }
+    super.update(changedProperties);
+    this.__childPart = render(value, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.__childPart?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__childPart?.setConnected(false);
+  }
+  render() {
+    return noChange;
+  }
+}
+LitElement["_$litElement$"] = true;
+LitElement[JSCompiler_renameProperty2("finalized", LitElement)] = true;
+global4.litElementHydrateSupport?.({ LitElement });
+var polyfillSupport3 = DEV_MODE3 ? global4.litElementPolyfillSupportDevMode : global4.litElementPolyfillSupport;
+polyfillSupport3?.({ LitElement });
+(global4.litElementVersions ??= []).push("4.2.2");
+if (DEV_MODE3 && global4.litElementVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning3("multiple-versions", `Multiple versions of Lit loaded. Loading multiple versions ` + `is not recommended.`);
+  });
+}
+// src/index.ts
+class WodiraBrowserApiError extends Error {
+  status;
+  statusText;
+  payload;
+  constructor(params) {
+    super(params.message);
+    this.name = "WodiraBrowserApiError";
+    this.status = params.status;
+    this.statusText = params.statusText;
+    this.payload = params.payload;
+  }
+}
+
+// src/ui/boxes/client.ts
+class WodiraBoxWidgetClient {
+  options;
+  baseUrl;
+  prefix;
+  fetcher;
+  constructor(options) {
+    this.options = options;
+    if (!options.publishableKey?.startsWith("wpk_live_")) {
+      throw new Error("WODira Boxes widgets require a wpk_live_ publishable key.");
+    }
+    if (!options.installationId?.trim()) {
+      throw new Error("WODira Boxes widgets require an installation-id.");
+    }
+    this.baseUrl = (options.baseUrl ?? "https://api.wodira.app").replace(/\/+$/, "");
+    this.prefix = `/external/v1/browser/box-widgets/${encodeURIComponent(options.installationId)}`;
+    this.fetcher = options.fetch ?? globalThis.fetch.bind(globalThis);
+  }
+  getContext(signal) {
+    return this.request("/context", signal ? { signal } : {});
+  }
+  getCalendar(from, weeks = 1, signal) {
+    const query = new URLSearchParams({ from: from.toISOString(), weeks: String(weeks) });
+    return this.request(`/calendar?${query}`, signal ? { signal } : {});
+  }
+  getPlans(signal) {
+    return this.request("/plans", signal ? { signal } : {});
+  }
+  getTrialClasses(signal) {
+    return this.request("/trial-classes", signal ? { signal } : {});
+  }
+  createFlow(input, signal) {
+    return this.request("/flows", {
+      method: "POST",
+      body: input,
+      ...signal ? { signal } : {}
+    });
+  }
+  recordTelemetry(events, signal) {
+    return this.request("/telemetry", {
+      method: "POST",
+      body: { events },
+      ...signal ? { signal } : {}
+    });
+  }
+  verifyResult(resultToken, signal) {
+    return this.request(`/results/${encodeURIComponent(resultToken)}`, signal ? { signal } : {});
+  }
+  async request(path, options) {
+    const headers = new Headers({
+      accept: "application/json",
+      "x-publishable-key": this.options.publishableKey
+    });
+    const init = { method: options.method ?? "GET", headers };
+    if (options.signal)
+      init.signal = options.signal;
+    if (options.body !== undefined) {
+      headers.set("content-type", "application/json");
+      init.body = JSON.stringify(options.body);
+    }
+    const response = await this.fetcher(`${this.baseUrl}${this.prefix}${path}`, init);
+    if (!response.ok) {
+      const text = await response.text();
+      let payload = text || null;
+      try {
+        payload = text ? JSON.parse(text) : null;
+      } catch {}
+      throw new WodiraBrowserApiError({
+        status: response.status,
+        statusText: response.statusText,
+        message: typeof payload === "object" && typeof payload?.["message"] === "string" ? payload["message"] : "WODira Boxes widget request failed.",
+        payload
+      });
+    }
+    const text = await response.text();
+    return text ? JSON.parse(text) : undefined;
+  }
+}
+function createWodiraBoxWidgetClient(options) {
+  return new WodiraBoxWidgetClient(options);
+}
+
+// src/ui/boxes/i18n.ts
+var copy = {
+  es: {
+    calendar: "Horario de clases",
+    trial: "Prueba una clase",
+    plans: "Planes",
+    previous: "Semana anterior",
+    next: "Semana siguiente",
+    reserve: "Continuar",
+    loading: "Cargando…",
+    empty: "No hay opciones disponibles en estas fechas.",
+    error: "No pudimos cargar este contenido. Inténtalo de nuevo.",
+    available: "Disponible",
+    last: "Últimas plazas",
+    waitlist: "Lista de espera",
+    full: "Completa",
+    coach: "Coach",
+    duration: "min",
+    free: "Gratis",
+    unlimited: "Ilimitado",
+    email: "Tu email",
+    privacy: "Acepto la política de privacidad de WODira y del box.",
+    trialCta: "Continuar",
+    chooseClass: "Elige una clase",
+    result: "¡Todo listo! Tu solicitud se ha completado.",
+    powered: "Tecnología de WODira",
+    retry: "Reintentar",
+    per: "por",
+    credits: "créditos",
+    once: "pago único",
+    daily: "diario",
+    weekly: "semanal",
+    monthly: "mensual",
+    yearly: "anual"
+  },
+  en: {
+    calendar: "Class schedule",
+    trial: "Try a class",
+    plans: "Plans",
+    previous: "Previous week",
+    next: "Next week",
+    reserve: "Continue",
+    loading: "Loading…",
+    empty: "No options are available for these dates.",
+    error: "We could not load this content. Try again.",
+    available: "Available",
+    last: "Last spots",
+    waitlist: "Waitlist",
+    full: "Full",
+    coach: "Coach",
+    duration: "min",
+    free: "Free",
+    unlimited: "Unlimited",
+    email: "Your email",
+    privacy: "I accept WODira and the gym privacy policies.",
+    trialCta: "Continue",
+    chooseClass: "Choose a class",
+    result: "All set! Your request is complete.",
+    powered: "Powered by WODira",
+    retry: "Retry",
+    per: "per",
+    credits: "credits",
+    once: "one-time",
+    daily: "daily",
+    weekly: "weekly",
+    monthly: "monthly",
+    yearly: "yearly"
+  },
+  pt: {
+    calendar: "Horário de aulas",
+    trial: "Experimente uma aula",
+    plans: "Planos",
+    previous: "Semana anterior",
+    next: "Semana seguinte",
+    reserve: "Continuar",
+    loading: "A carregar…",
+    empty: "Não há opções disponíveis nestas datas.",
+    error: "Não foi possível carregar. Tente novamente.",
+    available: "Disponível",
+    last: "Últimas vagas",
+    waitlist: "Lista de espera",
+    full: "Lotada",
+    coach: "Coach",
+    duration: "min",
+    free: "Grátis",
+    unlimited: "Ilimitado",
+    email: "O seu email",
+    privacy: "Aceito as políticas de privacidade da WODira e do box.",
+    trialCta: "Continuar",
+    chooseClass: "Escolha uma aula",
+    result: "Tudo pronto! O seu pedido foi concluído.",
+    powered: "Tecnologia WODira",
+    retry: "Tentar novamente",
+    per: "por",
+    credits: "créditos",
+    once: "pagamento único",
+    daily: "diário",
+    weekly: "semanal",
+    monthly: "mensal",
+    yearly: "anual"
+  }
+};
+function resolveBoxWidgetLanguage(locale) {
+  const candidate = locale === "auto" || !locale ? document.documentElement.lang || navigator.language : locale;
+  const language = candidate.toLowerCase().split("-")[0];
+  return language === "en" || language === "pt" ? language : "es";
+}
+function boxText(locale, key) {
+  return copy[resolveBoxWidgetLanguage(locale)][key];
+}
+
+// src/ui/boxes/styles.ts
+var boxWidgetStyles = css`
+  :host {
+    color: var(--wodira-box-text, var(--wodira-color-text, #17132e));
+    display: block;
+    font-family: var(--wodira-box-font-family, var(--wodira-font-family, inherit));
+    font-size: var(--wodira-font-size, 1rem);
+    line-height: 1.5;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    container-type: inline-size;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  button,
+  input {
+    font: inherit;
+  }
+  [part~='shell'] {
+    background: var(--wodira-box-surface, var(--wodira-color-surface, #fff));
+    border: 1px solid var(--wodira-box-border, var(--wodira-color-border, #dcd9e3));
+    border-radius: var(--wodira-box-radius, var(--wodira-radius, 1rem));
+    box-shadow: var(--wodira-box-shadow, var(--wodira-shadow, 0 4px 18px rgb(23 19 46 / 0.04)));
+    overflow: hidden;
+  }
+  [part~='composite'] {
+    display: grid;
+    gap: var(--wodira-space, 0.75rem);
+  }
+  [part~='hero'] {
+    align-items: center;
+    background: linear-gradient(
+      135deg,
+      var(
+        --wodira-box-primary,
+        var(--wodira-color-primary, var(--_wodira-box-brand-primary, #17132e))
+      ),
+      color-mix(
+        in srgb,
+        var(
+            --wodira-box-primary,
+            var(--wodira-color-primary, var(--_wodira-box-brand-primary, #17132e))
+          )
+          76%,
+        #475467
+      )
+    );
+    color: var(--wodira-box-primary-contrast, var(--wodira-color-primary-contrast, #fff));
+    display: flex;
+    gap: 14px;
+    min-height: 86px;
+    overflow: hidden;
+    padding: 18px 20px;
+    position: relative;
+  }
+  [part~='hero'][data-cover] {
+    min-height: 132px;
+  }
+  [part~='hero']::after {
+    background: radial-gradient(
+      circle at 90% 15%,
+      color-mix(
+        in srgb,
+        var(
+            --wodira-box-accent,
+            var(--wodira-color-accent, var(--_wodira-box-brand-accent, #c40072))
+          )
+          55%,
+        transparent
+      ),
+      transparent 45%
+    );
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+  [part~='cover'] {
+    height: 100%;
+    inset: 0;
+    object-fit: cover;
+    opacity: 0.38;
+    position: absolute;
+    width: 100%;
+  }
+  [part~='logo'] {
+    background: var(--wodira-box-surface, var(--wodira-color-surface, #fff));
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    height: 54px;
+    object-fit: contain;
+    padding: 6px;
+    width: 54px;
+    z-index: 1;
+  }
+  [part~='brand'] {
+    min-width: 0;
+    z-index: 1;
+  }
+  [part~='brand-name'] {
+    font-size: 0.8rem;
+    font-weight: 750;
+    letter-spacing: 0.08em;
+    margin: 0 0 4px;
+    opacity: 0.78;
+    text-transform: uppercase;
+  }
+  [part~='title'] {
+    font-size: clamp(1.25rem, 5cqi, 1.8rem);
+    font-weight: 850;
+    letter-spacing: -0.035em;
+    margin: 0;
+  }
+  [part~='body'] {
+    padding: clamp(16px, 4cqi, 24px);
+  }
+  [part~='toolbar'] {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  [part~='nav-button'],
+  [part~='button'] {
+    align-items: center;
+    border: 0;
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    cursor: pointer;
+    display: inline-flex;
+    font-weight: 760;
+    justify-content: center;
+    min-height: var(--wodira-control-height, 2.75rem);
+    padding: 10px 14px;
+  }
+  [part~='nav-button'] {
+    background: var(--wodira-box-subtle, var(--wodira-color-muted, #f6f5f8));
+    color: var(--wodira-box-text, var(--wodira-color-text, #17132e));
+  }
+  [part~='button'] {
+    background: var(
+      --wodira-box-primary,
+      var(--wodira-color-primary, var(--_wodira-box-brand-primary, #17132e))
+    );
+    color: var(--wodira-box-primary-contrast, var(--wodira-color-primary-contrast, #fff));
+    width: 100%;
+  }
+  [part~='button']:hover {
+    transform: translateY(-1px);
+  }
+  button:focus-visible,
+  input:focus-visible {
+    outline: 3px solid
+      color-mix(
+        in srgb,
+        var(
+            --wodira-box-accent,
+            var(--wodira-color-accent, var(--_wodira-box-brand-accent, #c40072))
+          )
+          60%,
+        transparent
+      );
+    outline-offset: 2px;
+  }
+  button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  [part~='grid'] {
+    display: grid;
+    gap: var(--wodira-space, 0.75rem);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wodira-grid-min, 15rem)), 1fr));
+  }
+  [part~='card'] {
+    background: var(--wodira-box-subtle, var(--wodira-color-muted, #f6f5f8));
+    border: 1px solid transparent;
+    border-radius: var(--wodira-box-radius, var(--wodira-radius, 1rem));
+    display: grid;
+    gap: var(--wodira-space, 0.75rem);
+    padding: var(--wodira-card-padding, 1rem);
+  }
+  [part~='card']:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--wodira-box-accent, var(--wodira-color-accent, var(--_wodira-box-brand-accent, #c40072)))
+        50%,
+      var(--wodira-box-border, var(--wodira-color-border, #dcd9e3))
+    );
+  }
+  [part~='card-heading'] {
+    align-items: start;
+    display: flex;
+    gap: var(--wodira-space, 0.75rem);
+    justify-content: space-between;
+  }
+  [part~='card-title'] {
+    font-size: 1rem;
+    font-weight: 820;
+    margin: 0;
+  }
+  [part~='meta'] {
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.86rem;
+    gap: 5px 12px;
+  }
+  [part~='badge'] {
+    background: #e7f8ee;
+    border-radius: 999px;
+    color: #067647;
+    font-size: 0.72rem;
+    font-weight: 800;
+    padding: 5px 8px;
+    white-space: nowrap;
+  }
+  [part~='badge'][data-status='LAST_SPOTS'] {
+    background: #fff3d6;
+    color: #b54708;
+  }
+  [part~='badge'][data-status='WAITLIST'],
+  [part~='badge'][data-status='FULL'] {
+    background: #fee4e2;
+    color: #b42318;
+  }
+  [part~='price'] {
+    font-size: 1.45rem;
+    font-weight: 860;
+    letter-spacing: -0.04em;
+  }
+  [part~='features'] {
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    display: grid;
+    font-size: 0.9rem;
+    gap: 6px;
+    margin: 0;
+    padding-left: 18px;
+  }
+  [part~='field'] {
+    display: grid;
+    gap: 6px;
+  }
+  [part~='input'] {
+    background: var(--wodira-box-surface, var(--wodira-color-surface, #fff));
+    border: 1px solid var(--wodira-box-border, var(--wodira-color-border, #dcd9e3));
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-box-text, var(--wodira-color-text, #17132e));
+    min-height: var(--wodira-control-height, 2.75rem);
+    padding: 10px 12px;
+    width: 100%;
+  }
+  [part~='choice'] {
+    align-items: start;
+    border: 1px solid var(--wodira-box-border, var(--wodira-color-border, #dcd9e3));
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    cursor: pointer;
+    display: flex;
+    gap: 10px;
+    padding: 12px;
+  }
+  [part~='legal'] {
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    font-size: 0.78rem;
+    line-height: 1.5;
+  }
+  [part~='legal'] a {
+    color: inherit;
+  }
+  [part~='state'] {
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    padding: 34px 12px;
+    text-align: center;
+  }
+  [part~='error'] {
+    color: var(--wodira-color-danger, #b42318);
+  }
+  [part~='success'] {
+    background: var(--wodira-box-subtle, var(--wodira-color-muted, #f6f5f8));
+    color: var(--wodira-color-success, #16703c);
+    font-weight: 700;
+    padding: 14px 18px;
+    text-align: center;
+  }
+  [part~='footer'] {
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    font-size: 0.72rem;
+    padding: 13px 18px;
+    text-align: center;
+  }
+  [part~='tabs'] {
+    background: var(--wodira-box-surface, var(--wodira-color-surface, #fff));
+    border: 1px solid var(--wodira-box-border, var(--wodira-color-border, #dcd9e3));
+    border-radius: calc(var(--wodira-box-radius, var(--wodira-radius, 1rem)) - 4px);
+    box-shadow: 0 10px 30px rgb(16 24 40 / 0.08);
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+    padding: 10px;
+  }
+  [part~='tab'] {
+    background: transparent;
+    color: var(--wodira-box-muted, var(--wodira-color-text-muted, #625e70));
+    white-space: nowrap;
+  }
+  [part~='tab'][aria-selected='true'] {
+    background: var(
+      --wodira-box-primary,
+      var(--wodira-color-primary, var(--_wodira-box-brand-primary, #17132e))
+    );
+    color: var(--wodira-box-primary-contrast, var(--wodira-color-primary-contrast, #fff));
+  }
+  @container (max-width: 520px) {
+    [part~='hero'] {
+      padding: var(--wodira-card-padding, 1rem);
+    }
+    [part~='body'] {
+      padding: 14px;
+    }
+    [part~='toolbar'] {
+      align-items: stretch;
+      flex-direction: column;
+    }
+    [part~='toolbar'] button {
+      width: 100%;
+    }
+    [part~='grid'] {
+      grid-template-columns: 1fr;
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [part~='button'],
+    [part~='card'] {
+      transition:
+        border-color 0.18s ease,
+        transform 0.18s ease;
+    }
+  }
+`;
+
+// src/ui/layout-styles.ts
+var wodiraLayoutStyles = css`
+  :host {
+    min-width: 0;
+    color-scheme: var(--wodira-color-scheme, light);
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    accent-color: var(--wodira-color-accent, #c40072);
+  }
+  :host,
+  button,
+  input,
+  select,
+  textarea {
+    font-variant-numeric: tabular-nums;
+  }
+  button,
+  input,
+  select,
+  textarea,
+  a {
+    -webkit-tap-highlight-color: transparent;
+  }
+  input,
+  select,
+  textarea {
+    min-width: 0;
+    font-size: max(1rem, 1em);
+  }
+  button {
+    transition:
+      background-color 160ms ease,
+      transform 160ms ease;
+  }
+  button:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+  :is(button, input, select, textarea, a, summary):focus-visible {
+    outline: 3px solid var(--wodira-color-accent, #c40072);
+    outline-offset: 3px;
+  }
+  [part~='title'] {
+    letter-spacing: -0.025em;
+    text-wrap: balance;
+  }
+  [part~='meta'],
+  [part~='hint'] {
+    margin-block: 0.25rem;
+    line-height: 1.5;
+  }
+  [part~='checkout-flow'] {
+    width: 100%;
+    max-width: var(--wodira-content-width, 76rem);
+    margin-inline: auto;
+  }
+  [part~='event-list'],
+  [part~='pricing-cards'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wodira-grid-min, 16rem)), 1fr));
+    align-items: stretch;
+  }
+  [part~='event-card'],
+  [part~='pricing-card'] {
+    height: 100%;
+  }
+  [part~='pricing-card'] > [part~='stack'],
+  [part~='event-card'] > [part~='stack'] {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  [part~='event-card'] {
+    display: flex;
+    flex-direction: column;
+  }
+  [part~='pricing-card'] [part~='button'],
+  [part~='event-card'] [part~='button']:last-child {
+    margin-top: auto;
+  }
+  [part~='pricing-card'][part~='selected'] {
+    border-color: var(--wodira-color-accent, #c40072);
+    box-shadow: inset 0 0 0 1px var(--wodira-color-accent, #c40072);
+  }
+  [part~='registration-form'] {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  [part~='registration-layout'] {
+    display: grid;
+    gap: calc(var(--wodira-space, 1rem) * 1.5);
+  }
+  [part~='registration-fields'] {
+    min-width: 0;
+    background: var(--wodira-color-surface, #fff);
+    border: 1px solid var(--wodira-color-border, #dcd9e3);
+    border-radius: var(--wodira-radius, 1rem);
+    padding: var(--wodira-card-padding, clamp(1rem, 3cqi, 1.75rem));
+  }
+  [part~='registration-fields'] [part~='card'] {
+    box-shadow: none;
+  }
+  [part~='checkout-sidebar'] {
+    display: grid;
+    align-content: start;
+    gap: var(--wodira-space, 1rem);
+    min-width: 0;
+  }
+  [part~='summary'] {
+    display: grid;
+    gap: 0.8rem;
+  }
+  [part~='summary-row'] {
+    align-items: baseline;
+  }
+  [part~='summary-row'] strong {
+    flex-shrink: 0;
+  }
+  [part~='summary-total'] {
+    border-top: 1px solid var(--wodira-color-border, #dcd9e3);
+    padding-top: 1rem;
+    font-size: 1.2em;
+  }
+  [part~='submit'] {
+    width: 100%;
+  }
+  [part~='progress'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.5rem;
+    list-style: none;
+    padding: 0.25rem 0;
+    margin: 0;
+    color: var(--wodira-color-text-muted, #625e70);
+  }
+  [part~='progress-step'] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+  }
+  [part~='progress-step'][aria-current='step'] {
+    color: var(--wodira-color-text, #17132e);
+    font-weight: 700;
+  }
+  [part~='step-number'] {
+    display: grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    border: 1px solid var(--wodira-color-border, #dcd9e3);
+    border-radius: 50%;
+    background: var(--wodira-color-surface, #fff);
+  }
+  [aria-current='step'] [part~='step-number'] {
+    border-color: currentColor;
+  }
+  [part~='error'],
+  [part~='empty'],
+  [part~='loader'] {
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+  [part~='loader']::before {
+    content: '';
+    display: block;
+    height: 0.5rem;
+    max-width: 16rem;
+    margin: 0 auto 0.75rem;
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    background: var(--wodira-color-border, #dcd9e3);
+  }
+  ::slotted(*) {
+    max-width: 100%;
+  }
+  @container (min-width: 56rem) {
+    [part~='registration-layout'] {
+      grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--wodira-summary-width, 21rem));
+    }
+    [part~='checkout-sidebar'] {
+      position: sticky;
+      top: var(--wodira-sticky-offset, 1rem);
+      align-self: start;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition: none !important;
+      animation: none !important;
+      scroll-behavior: auto !important;
+    }
+    button:hover,
+    button:active {
+      transform: none !important;
+    }
+  }
+  @media (forced-colors: active) {
+    button,
+    [part~='card'],
+    input,
+    select,
+    textarea {
+      border: 1px solid ButtonText;
+    }
+    [aria-pressed='true'],
+    [aria-selected='true'] {
+      outline: 2px solid Highlight;
+    }
+  }
+`;
+
+// src/ui/theme.ts
+var wodiraThemeTokens = {
+  primary: "--wodira-color-primary",
+  primaryContrast: "--wodira-color-primary-contrast",
+  accent: "--wodira-color-accent",
+  accentContrast: "--wodira-color-accent-contrast",
+  surface: "--wodira-color-surface",
+  muted: "--wodira-color-muted",
+  border: "--wodira-color-border",
+  text: "--wodira-color-text",
+  textMuted: "--wodira-color-text-muted",
+  danger: "--wodira-color-danger",
+  success: "--wodira-color-success",
+  fontFamily: "--wodira-font-family",
+  fontSize: "--wodira-font-size",
+  colorScheme: "--wodira-color-scheme",
+  radius: "--wodira-radius",
+  radiusSmall: "--wodira-radius-sm",
+  space: "--wodira-space",
+  shadow: "--wodira-shadow",
+  controlHeight: "--wodira-control-height",
+  cardPadding: "--wodira-card-padding",
+  gridMin: "--wodira-grid-min",
+  contentWidth: "--wodira-content-width",
+  summaryWidth: "--wodira-summary-width",
+  stickyOffset: "--wodira-sticky-offset"
+};
+var wodiraThemes = {
+  light: {
+    colorScheme: "light",
+    primary: "#17132e",
+    primaryContrast: "#ffffff",
+    accent: "#c40072",
+    accentContrast: "#ffffff",
+    surface: "#ffffff",
+    muted: "#f6f5f8",
+    border: "#dcd9e3",
+    text: "#17132e",
+    textMuted: "#625e70",
+    danger: "#b42318",
+    success: "#16703c"
+  },
+  dark: {
+    colorScheme: "dark",
+    primary: "#f6f2fb",
+    primaryContrast: "#211b2f",
+    accent: "#ff8cca",
+    accentContrast: "#211b2f",
+    surface: "#211b2f",
+    muted: "#30293f",
+    border: "#60566e",
+    text: "#f6f2fb",
+    textMuted: "#c3bace",
+    danger: "#ffaba3",
+    success: "#8cdeb2"
+  }
+};
+function applyWodiraTheme(element, theme) {
+  for (const key of Object.keys(wodiraThemeTokens)) {
+    const value = theme[key];
+    if (value === undefined)
+      continue;
+    if (value === null)
+      element.style.removeProperty(wodiraThemeTokens[key]);
+    else
+      element.style.setProperty(wodiraThemeTokens[key], value);
+  }
+}
+var wodiraUiParts = [
+  "stack",
+  "grid",
+  "card",
+  "event-card",
+  "event-list",
+  "pricing-cards",
+  "pricing-card",
+  "registration-form",
+  "registration-layout",
+  "registration-fields",
+  "registration-title",
+  "availability",
+  "legal-signature",
+  "checkout-sidebar",
+  "summary",
+  "summary-row",
+  "summary-total",
+  "button",
+  "submit",
+  "secondary",
+  "text-button",
+  "input",
+  "select",
+  "textarea",
+  "checkbox",
+  "label",
+  "title",
+  "price",
+  "meta",
+  "hint",
+  "description",
+  "description-heading",
+  "description-list",
+  "image",
+  "error",
+  "field-error",
+  "loader",
+  "empty",
+  "success",
+  "waiver",
+  "supplement",
+  "eligibility-summary",
+  "participant-mode",
+  "participant-mode-button",
+  "deferred-participant-hint",
+  "gender-composition",
+  "composition-options",
+  "composition-option",
+  "tier-list",
+  "tier-row",
+  "tier-heading",
+  "tier-name",
+  "tier-price",
+  "badge",
+  "current-tier",
+  "read-more",
+  "event-card-description",
+  "event-card-description-full",
+  "purchaser-grid",
+  "participant",
+  "guest-registration",
+  "terms",
+  "selected",
+  "active",
+  "current",
+  "retry",
+  "inline-code",
+  "tier-meta",
+  "field",
+  "athlete",
+  "deferred",
+  "athlete-grid",
+  "custom-fields",
+  "custom-fields-grid",
+  "custom-field",
+  "supplements",
+  "guest-registrations",
+  "add-guest",
+  "guest-grid",
+  "remove-guest",
+  "guest-athlete",
+  "guest-supplements",
+  "waivers",
+  "guest-summary-row"
+].join(",");
+var wodiraBoxParts = [
+  "shell",
+  "widget-shell",
+  "hero",
+  "widget-hero",
+  "cover",
+  "box-cover",
+  "logo",
+  "box-logo",
+  "brand",
+  "brand-name",
+  "title",
+  "body",
+  "widget-body",
+  "toolbar",
+  "nav-button",
+  "button",
+  "grid",
+  "card",
+  "card-heading",
+  "card-title",
+  "meta",
+  "badge",
+  "price",
+  "features",
+  "field",
+  "input",
+  "choice",
+  "legal",
+  "state",
+  "loader",
+  "error",
+  "success",
+  "footer",
+  "retry",
+  "class-cta",
+  "trial-cta",
+  "plan-cta",
+  "class-card",
+  "class-meta",
+  "availability",
+  "calendar-toolbar",
+  "previous",
+  "next",
+  "empty",
+  "class-grid",
+  "plans-grid",
+  "plan-card",
+  "trial-form",
+  "choices",
+  "trial-class-grid",
+  "trial-choice",
+  "email",
+  "legal-choice"
+].join(",");
+
+// src/ui/boxes/components.ts
+var AVAILABILITY_COPY = {
+  AVAILABLE: "available",
+  LAST_SPOTS: "last",
+  WAITLIST: "waitlist",
+  FULL: "full"
+};
+
+class WodiraBoxElement extends LitElement {
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    installationId: { type: String, attribute: "installation-id" },
+    baseUrl: { type: String, attribute: "base-url" },
+    locale: { type: String },
+    context: { state: true },
+    loading: { state: true },
+    error: { state: true },
+    resultMessage: { state: true }
+  };
+  static styles = [boxWidgetStyles, wodiraLayoutStyles];
+  client = null;
+  abortController = null;
+  didInitialLoad = false;
+  pendingResultToken = "";
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.installationId = "";
+    this.baseUrl = "";
+    this.locale = "auto";
+    this.context = null;
+    this.loading = true;
+    this.error = "";
+    this.resultMessage = "";
+  }
+  firstUpdated() {
+    this.pendingResultToken = this.consumeResult();
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.abortController?.abort();
+    super.disconnectedCallback();
+  }
+  updated(changes) {
+    if (!this.didInitialLoad) {
+      this.didInitialLoad = true;
+      return;
+    }
+    if ((changes.has("publishableKey") || changes.has("installationId") || changes.has("baseUrl")) && this.didInitialLoad) {
+      this.refresh();
+    }
+    if (this.context) {
+      this.style.setProperty("--_wodira-box-brand-primary", this.context.box.theme.primary);
+      this.style.setProperty("--_wodira-box-brand-accent", this.context.box.theme.secondary);
+    }
+  }
+  async refresh() {
+    if (!this.publishableKey || !this.installationId) {
+      this.loading = false;
+      this.error = "publishable-key and installation-id are required.";
+      return;
+    }
+    this.abortController?.abort();
+    this.abortController = new AbortController;
+    this.loading = true;
+    this.error = "";
+    try {
+      this.client = createWodiraBoxWidgetClient({
+        publishableKey: this.publishableKey,
+        installationId: this.installationId,
+        ...this.baseUrl ? { baseUrl: this.baseUrl } : {}
+      });
+      this.context = await this.client.getContext(this.abortController.signal);
+      if (this.pendingResultToken) {
+        await this.verifyResultWithRetry(this.pendingResultToken, this.abortController.signal);
+        this.pendingResultToken = "";
+        this.resultMessage = boxText(this.locale, "result");
+      }
+      if (this.locale === "auto")
+        this.locale = this.context.locale;
+      await this.loadData(this.abortController.signal);
+      this.telemetry("IMPRESSION");
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError")
+        return;
+      this.error = error instanceof Error ? error.message : boxText(this.locale, "error");
+    } finally {
+      this.loading = false;
+    }
+  }
+  frame(title, body) {
+    const context = this.context;
+    return html`
+      <section part="shell widget-shell" aria-busy=${this.loading ? "true" : "false"}>
+        <slot name="header"></slot>
+        ${context ? html`<header part="hero widget-hero" ?data-cover=${Boolean(context.box.coverUrl)}>
+                ${context.box.coverUrl ? html`<img part="cover box-cover" src=${context.box.coverUrl} alt="" />` : nothing}
+                ${context.box.logoUrl ? html`<img part="logo box-logo" src=${context.box.logoUrl} alt="" />` : nothing}
+                <div part="brand">
+                  <p part="brand-name">${context.box.name}</p>
+                  <h2 part="title">${title}</h2>
+                </div>
+              </header>` : nothing}
+        ${this.resultMessage ? html`<div part="success" role="status">${this.resultMessage}</div>` : nothing}
+        <div part="body widget-body">
+          <slot name="intro"></slot>
+          ${this.loading ? html`<div part="state loader" role="status">
+                  ${boxText(this.locale, "loading")}
+                </div>` : this.error ? html`<div part="state error" role="alert">
+                    <p>${boxText(this.locale, "error")}</p>
+                    <button part="nav-button retry" type="button" @click=${() => this.refresh()}>
+                      ${boxText(this.locale, "retry")}
+                    </button>
+                  </div>` : body}
+        </div>
+        <slot name="footer"></slot>
+        <footer part="footer"><span>${boxText(this.locale, "powered")}</span></footer>
+      </section>
+    `;
+  }
+  classCard(entry, action) {
+    const language = resolveBoxWidgetLanguage(this.locale);
+    const date = new Intl.DateTimeFormat(language, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: entry.timezone || this.context?.box.timezone
+    }).format(new Date(entry.startsAt));
+    const isDisabled = entry.availability === "FULL";
+    return html`<article part="card class-card">
+      <div part="card-heading">
+        <div>
+          <h3 part="card-title">${entry.name}</h3>
+          <div part="meta class-meta"><time datetime=${entry.startsAt}>${date}</time></div>
+        </div>
+        <span part="badge availability" data-status=${entry.availability}>
+          ${boxText(this.locale, AVAILABILITY_COPY[entry.availability])}
+        </span>
+      </div>
+      <div part="meta">
+        ${entry.coachName ? html`<span>${boxText(this.locale, "coach")}: ${entry.coachName}</span>` : nothing}
+        ${entry.location ? html`<span>${entry.location}</span>` : nothing}
+        ${entry.durationMinutes ? html`<span>${entry.durationMinutes} ${boxText(this.locale, "duration")}</span>` : nothing}
+        ${entry.directPurchase ? html`<span
+                >${formatMoney(entry.directPurchase.amount, entry.directPurchase.currency, language)}</span
+              >` : nothing}
+      </div>
+      <button part="button class-cta" type="button" ?disabled=${isDisabled} @click=${action}>
+        ${boxText(this.locale, "reserve")}
+      </button>
+    </article>`;
+  }
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  async startFlow(intent, targetId, extra = {}) {
+    if (!this.client)
+      return;
+    const result = await this.client.createFlow({
+      intent,
+      targetId,
+      idempotencyKey: [
+        this.installationId,
+        intent,
+        targetId,
+        extra.privacyVersion ?? "none",
+        sessionId()
+      ].join(":"),
+      ...extra,
+      ...utm()
+    });
+    if (result.continuationUrl)
+      globalThis.location.assign(result.continuationUrl);
+  }
+  telemetry(kind, entityId) {
+    if (!this.client)
+      return Promise.resolve();
+    return this.client.recordTelemetry([
+      {
+        id: cryptoId(),
+        kind,
+        widgetKind: this.widgetKind(),
+        ...entityId ? { entityId } : {},
+        sessionId: sessionId(),
+        occurredAt: new Date().toISOString(),
+        ...utm()
+      }
+    ]).then(() => {
+      return;
+    }).catch(() => {
+      return;
+    });
+  }
+  syncStructuredData(value) {
+    let script = this.querySelector("script[data-wodira-widget-jsonld]");
+    if (!script) {
+      script = document.createElement("script");
+      script.type = "application/ld+json";
+      script.dataset["wodiraWidgetJsonld"] = "";
+      this.append(script);
+    }
+    script.textContent = JSON.stringify(value).replaceAll("<", "\\u003c");
+  }
+  consumeResult() {
+    try {
+      const url = new URL(globalThis.location.href);
+      const result = url.searchParams.get("wodira_widget_result") ?? "";
+      if (!result)
+        return "";
+      url.searchParams.delete("wodira_widget_result");
+      globalThis.history?.replaceState({}, "", url);
+      return result;
+    } catch {
+      return "";
+    }
+  }
+  async verifyResultWithRetry(token, signal) {
+    if (!this.client)
+      return;
+    let lastError;
+    for (let attempt = 0;attempt < 10; attempt += 1) {
+      try {
+        await this.client.verifyResult(token, signal);
+        return;
+      } catch (error) {
+        lastError = error;
+        if (signal.aborted || attempt === 9)
+          break;
+        await new Promise((resolve, reject) => {
+          const timeout = globalThis.setTimeout(resolve, 1000);
+          signal.addEventListener("abort", () => {
+            globalThis.clearTimeout(timeout);
+            reject(new DOMException("Aborted", "AbortError"));
+          }, { once: true });
+        });
+      }
+    }
+    throw lastError;
+  }
+}
+
+class WodiraBoxCalendar extends WodiraBoxElement {
+  static properties = {
+    ...WodiraBoxElement.properties,
+    calendar: { state: true },
+    week: { state: true }
+  };
+  constructor() {
+    super();
+    this.calendar = null;
+    this.week = 0;
+  }
+  widgetKind() {
+    return "CALENDAR";
+  }
+  async loadData(signal) {
+    const from = new Date;
+    from.setDate(from.getDate() + this.week * 7);
+    this.calendar = await this.client?.getCalendar(from, 1, signal) ?? null;
+    this.syncStructuredData({
+      "@context": "https://schema.org",
+      "@type": "SportsActivityLocation",
+      name: this.context?.box.name,
+      event: this.calendar?.classes.map((entry) => ({
+        "@type": "SportsEvent",
+        name: entry.name,
+        startDate: entry.startsAt,
+        location: entry.location ? { "@type": "Place", name: entry.location } : undefined
+      }))
+    });
+  }
+  changeWeek(offset) {
+    this.week = Math.min(3, Math.max(0, this.week + offset));
+    this.refresh();
+  }
+  choose(entry) {
+    this.emit("wodira:box-class-selected", {
+      installationId: this.installationId,
+      classId: entry.id
+    });
+    this.telemetry("CLASS_SELECTED", entry.id);
+    this.startFlow("RESERVE_CLASS", entry.id);
+  }
+  render() {
+    return this.frame(boxText(this.locale, "calendar"), html`
+        <div part="toolbar calendar-toolbar">
+          <button
+            part="nav-button previous"
+            type="button"
+            ?disabled=${this.week === 0}
+            @click=${() => this.changeWeek(-1)}
+          >
+            ← ${boxText(this.locale, "previous")}
+          </button>
+          <button
+            part="nav-button next"
+            type="button"
+            ?disabled=${this.week === 3}
+            @click=${() => this.changeWeek(1)}
+          >
+            ${boxText(this.locale, "next")} →
+          </button>
+        </div>
+        ${this.calendar?.classes.length ? html`<div part="grid class-grid">
+                ${this.calendar.classes.map((entry) => this.classCard(entry, () => this.choose(entry)))}
+              </div>` : html`<div part="state empty">${boxText(this.locale, "empty")}</div>`}
+      `);
+  }
+}
+
+class WodiraBoxPlans extends WodiraBoxElement {
+  static properties = { ...WodiraBoxElement.properties, plans: { state: true } };
+  constructor() {
+    super();
+    this.plans = null;
+  }
+  widgetKind() {
+    return "PLANS";
+  }
+  async loadData(signal) {
+    this.plans = await this.client?.getPlans(signal) ?? null;
+    this.syncStructuredData({
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      itemListElement: this.plans?.plans.map((plan, position) => ({
+        "@type": "Offer",
+        position: position + 1,
+        name: plan.name,
+        price: plan.price,
+        priceCurrency: plan.currency
+      }))
+    });
+  }
+  choose(plan) {
+    this.emit("wodira:box-plan-selected", { installationId: this.installationId, planId: plan.id });
+    this.telemetry("PLAN_SELECTED", plan.id);
+    this.startFlow("BUY_PLAN", plan.id);
+  }
+  render() {
+    const language = resolveBoxWidgetLanguage(this.locale);
+    return this.frame(boxText(this.locale, "plans"), html`
+        ${this.plans?.plans.length ? html`<div part="grid plans-grid">
+                ${this.plans.plans.map((plan) => html` <article part="card plan-card">
+                    <div>
+                      <h3 part="card-title">${plan.name}</h3>
+                      ${plan.description ? html`<p part="meta">${plan.description}</p>` : nothing}
+                    </div>
+                    <div part="price">${formatMoney(plan.price, plan.currency, language)}</div>
+                    <div part="meta">
+                      ${plan.credits === null ? boxText(this.locale, "unlimited") : `${plan.credits} ${boxText(this.locale, "credits")}`}
+                      · ${formatPlanInterval(plan.interval, this.locale)}
+                    </div>
+                    ${plan.features.length ? html`<ul part="features">
+                            ${plan.features.map((feature) => html`<li>${feature}</li>`)}
+                          </ul>` : nothing}
+                    <button
+                      part="button plan-cta"
+                      data-plan-id=${plan.id}
+                      type="button"
+                      @click=${() => this.choose(plan)}
+                    >
+                      ${boxText(this.locale, "reserve")}
+                    </button>
+                  </article>`)}
+              </div>` : html`<div part="state empty">${boxText(this.locale, "empty")}</div>`}
+      `);
+  }
+}
+
+class WodiraBoxTrial extends WodiraBoxElement {
+  static properties = {
+    ...WodiraBoxElement.properties,
+    trials: { state: true },
+    selectedClassId: { state: true },
+    email: { state: true },
+    privacyAccepted: { state: true },
+    submitting: { state: true },
+    formError: { state: true }
+  };
+  constructor() {
+    super();
+    this.trials = null;
+    this.selectedClassId = "";
+    this.email = "";
+    this.privacyAccepted = false;
+    this.submitting = false;
+    this.formError = "";
+  }
+  widgetKind() {
+    return "TRIAL";
+  }
+  async loadData(signal) {
+    this.trials = await this.client?.getTrialClasses(signal) ?? null;
+    this.selectedClassId = this.trials?.classes[0]?.id ?? "";
+  }
+  async submit(event) {
+    event.preventDefault();
+    if (!this.email.includes("@") || !this.selectedClassId || !this.privacyAccepted || !this.context) {
+      this.formError = boxText(this.locale, "error");
+      return;
+    }
+    this.submitting = true;
+    this.formError = "";
+    this.emit("wodira:box-trial-selected", {
+      installationId: this.installationId,
+      classId: this.selectedClassId
+    });
+    this.telemetry("TRIAL_SELECTED", this.selectedClassId);
+    try {
+      const form = event.currentTarget;
+      const website = String(new FormData(form).get("website") ?? "");
+      await this.startFlow("START_TRIAL", this.selectedClassId, {
+        email: this.email,
+        privacyAccepted: true,
+        privacyVersion: this.context.legal.acceptanceVersion,
+        website
+      });
+    } catch (error) {
+      this.formError = error instanceof Error ? error.message : boxText(this.locale, "error");
+    } finally {
+      this.submitting = false;
+    }
+  }
+  render() {
+    return this.frame(boxText(this.locale, "trial"), html`
+        ${this.trials?.enabled && this.trials.classes.length ? html`<form part="trial-form" @submit=${this.submit}>
+                <fieldset part="field choices">
+                  <legend>${boxText(this.locale, "chooseClass")}</legend>
+                  <div part="grid trial-class-grid">
+                    ${this.trials.classes.map((entry) => html` <label part="choice trial-choice"
+                        ><input
+                          type="radio"
+                          name="trialClass"
+                          .value=${entry.id}
+                          .checked=${this.selectedClassId === entry.id}
+                          @change=${() => {
+      this.selectedClassId = entry.id;
+    }}
+                        />
+                        <span
+                          ><strong>${entry.name}</strong><br /><small
+                            >${new Intl.DateTimeFormat(resolveBoxWidgetLanguage(this.locale), { dateStyle: "medium", timeStyle: "short", timeZone: entry.timezone || this.context?.box.timezone }).format(new Date(entry.startsAt))}</small
+                          ></span
+                        >
+                      </label>`)}
+                  </div>
+                </fieldset>
+                <label part="field"
+                  ><span>${boxText(this.locale, "email")}</span
+                  ><input
+                    part="input email"
+                    type="email"
+                    autocomplete="email"
+                    required
+                    .value=${this.email}
+                    @input=${(event) => {
+      this.email = event.currentTarget.value;
+    }}
+                /></label>
+                <input
+                  name="website"
+                  tabindex="-1"
+                  autocomplete="off"
+                  aria-hidden="true"
+                  style="position:absolute;left:-10000px"
+                />
+                <label part="choice legal-choice"
+                  ><input
+                    type="checkbox"
+                    required
+                    .checked=${this.privacyAccepted}
+                    @change=${(event) => {
+      this.privacyAccepted = event.currentTarget.checked;
+    }}
+                  />
+                  <span part="legal"
+                    >${boxText(this.locale, "privacy")}
+                    <a
+                      href=${this.context?.legal.wodiraPrivacyUrl ?? "#"}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      >WODira</a
+                    >
+                    ${this.context?.legal.boxPrivacyUrl ? html` · <a href=${this.context.legal.boxPrivacyUrl} target="_blank" rel="noopener noreferrer">${this.context.box.name}</a>` : nothing}
+                  </span>
+                </label>
+                ${this.formError ? html`<p part="error" role="alert">${this.formError}</p>` : nothing}
+                <button part="button trial-cta" type="submit" ?disabled=${this.submitting}>
+                  ${this.submitting ? boxText(this.locale, "loading") : boxText(this.locale, "trialCta")}
+                </button>
+              </form>` : html`<div part="state empty">${boxText(this.locale, "empty")}</div>`}
+      `);
+  }
+}
+
+class WodiraBoxWidget extends LitElement {
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    installationId: { type: String, attribute: "installation-id" },
+    baseUrl: { type: String, attribute: "base-url" },
+    locale: { type: String },
+    active: { state: true }
+  };
+  static styles = [boxWidgetStyles, wodiraLayoutStyles];
+  panelId = `wodira-box-panel-${cryptoId()}`;
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.installationId = "";
+    this.baseUrl = "";
+    this.locale = "auto";
+    this.active = "calendar";
+  }
+  render() {
+    const attrs = {
+      publishableKey: this.publishableKey,
+      installationId: this.installationId,
+      baseUrl: this.baseUrl,
+      locale: this.locale
+    };
+    return html`<section part="composite composite-shell">
+      <slot name="header"></slot>
+      <nav part="tabs" role="tablist" aria-label="Widgets">
+        ${["calendar", "trial", "plans"].map((tab) => html`<button
+              part="nav-button tab"
+              type="button"
+              role="tab"
+              aria-selected=${this.active === tab ? "true" : "false"}
+              aria-controls=${this.panelId}
+              tabindex=${this.active === tab ? "0" : "-1"}
+              @keydown=${(event) => this.navigateTabs(event, tab)}
+              @click=${() => {
+      this.active = tab;
+    }}
+            >
+              ${boxText(this.locale, tab)}
+            </button>`)}
+      </nav>
+      <div id=${this.panelId} part="composite-content" role="tabpanel" tabindex="0">
+        ${this.active === "calendar" ? html`<wodira-box-calendar exportparts=${wodiraBoxParts} .publishableKey=${attrs.publishableKey} .installationId=${attrs.installationId} .baseUrl=${attrs.baseUrl} .locale=${attrs.locale}><slot name="calendar-intro" slot="intro"></slot></wodira-box-calendar>` : nothing}
+        ${this.active === "trial" ? html`<wodira-box-trial exportparts=${wodiraBoxParts} .publishableKey=${attrs.publishableKey} .installationId=${attrs.installationId} .baseUrl=${attrs.baseUrl} .locale=${attrs.locale}><slot name="trial-intro" slot="intro"></slot></wodira-box-trial>` : nothing}
+        ${this.active === "plans" ? html`<wodira-box-plans exportparts=${wodiraBoxParts} .publishableKey=${attrs.publishableKey} .installationId=${attrs.installationId} .baseUrl=${attrs.baseUrl} .locale=${attrs.locale}><slot name="plans-intro" slot="intro"></slot></wodira-box-plans>` : nothing}
+      </div>
+      <slot name="footer"></slot>
+    </section>`;
+  }
+  navigateTabs(event, current) {
+    const tabs = ["calendar", "trial", "plans"];
+    const currentIndex = tabs.indexOf(current);
+    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (currentIndex + 1) % tabs.length : event.key === "ArrowLeft" ? (currentIndex - 1 + tabs.length) % tabs.length : -1;
+    if (nextIndex < 0)
+      return;
+    const next = tabs[nextIndex];
+    if (!next)
+      return;
+    event.preventDefault();
+    this.active = next;
+    this.updateComplete.then(() => {
+      this.renderRoot.querySelectorAll('[role="tab"]')[nextIndex]?.focus();
+    });
+  }
+}
+function formatPlanInterval(interval, locale) {
+  const key = interval.trim().toLowerCase();
+  if (key === "once" || key === "one_time")
+    return boxText(locale, "once");
+  if (key === "daily" || key === "day")
+    return boxText(locale, "daily");
+  if (key === "weekly" || key === "week")
+    return boxText(locale, "weekly");
+  if (key === "monthly" || key === "month")
+    return boxText(locale, "monthly");
+  if (key === "yearly" || key === "annual" || key === "year")
+    return boxText(locale, "yearly");
+  return interval;
+}
+function formatMoney(value, currency, locale) {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 2
+  }).format(value);
+}
+function cryptoId() {
+  return globalThis.crypto?.randomUUID?.() ?? `widget-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function sessionId() {
+  const key = "wodira:box-widget-session";
+  try {
+    const existing = globalThis.sessionStorage?.getItem(key);
+    if (existing)
+      return existing;
+    const created = cryptoId();
+    globalThis.sessionStorage?.setItem(key, created);
+    return created;
+  } catch {
+    return cryptoId();
+  }
+}
+function utm() {
+  try {
+    const query = new URL(globalThis.location.href).searchParams;
+    const utmSource = query.get("utm_source") ?? undefined;
+    const utmMedium = query.get("utm_medium") ?? undefined;
+    const utmCampaign = query.get("utm_campaign") ?? undefined;
+    return {
+      ...utmSource ? { utmSource } : {},
+      ...utmMedium ? { utmMedium } : {},
+      ...utmCampaign ? { utmCampaign } : {}
+    };
+  } catch {
+    return {};
+  }
+}
+
+// src/ui/boxes/index.ts
+var ELEMENTS = [
+  ["wodira-box-calendar", WodiraBoxCalendar],
+  ["wodira-box-trial", WodiraBoxTrial],
+  ["wodira-box-plans", WodiraBoxPlans],
+  ["wodira-box-widget", WodiraBoxWidget]
+];
+function defineWodiraBoxElements() {
+  if (!globalThis.customElements) {
+    throw new Error("@wodira/browser/ui/boxes requires a Custom Elements environment.");
+  }
+  for (const [tag, element] of ELEMENTS) {
+    if (!customElements.get(tag))
+      customElements.define(tag, element);
+  }
+}
+export {
+  WodiraBoxCalendar,
+  WodiraBoxPlans,
+  WodiraBoxTrial,
+  WodiraBoxWidget,
+  WodiraBoxWidgetClient,
+  applyWodiraTheme,
+  createWodiraBoxWidgetClient,
+  defineWodiraBoxElements,
+  wodiraThemeTokens,
+  wodiraThemes
+};