@wodira/browser 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,3309 @@
+// ../../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 html2 = 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("/>") ? " " : "";
+    html2 += 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 = html2 + (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 [html2, attrNames] = getTemplateHtml(strings, type);
+    this.el = Template.createElement(html2, 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 tag2 = node.localName;
+          if (/^(?:textarea|template)$/i.test(tag2) && node.innerHTML.includes(marker)) {
+            const m = `Expressions are not supported inside \`${tag2}\` ` + `elements. See https://lit.dev/msg/expression-in-${tag2} for more ` + `information.`;
+            if (tag2 === "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 strings2 = node.textContent.split(marker);
+          const lastIndex = strings2.length - 1;
+          if (lastIndex > 0) {
+            node.textContent = trustedTypes2 ? trustedTypes2.emptyScript : "";
+            for (let i = 0;i < lastIndex; i++) {
+              node.append(strings2[i], createMarker());
+              walker.nextNode();
+              parts.push({ type: CHILD_PART, index: ++nodeIndex });
+            }
+            node.append(strings2[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(html2, _options) {
+    const el = d.createElement("template");
+    el.innerHTML = html2;
+    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;
+  }
+}
+var DEFAULT_BASE_URL = "https://api.wodira.app";
+var BROWSER_API_PREFIX = "/external/v1/browser";
+
+class WodiraBrowserClient {
+  publishableKey;
+  baseUrl;
+  fetcher;
+  headers;
+  constructor(options) {
+    if (!options.publishableKey?.trim()) {
+      throw new Error("WodiraBrowserClient requires a publishableKey.");
+    }
+    if (!options.publishableKey.startsWith("wpk_live_")) {
+      throw new Error("Wodira browser publishable keys must start with wpk_live_.");
+    }
+    this.publishableKey = options.publishableKey.trim();
+    this.baseUrl = (options.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.fetcher = options.fetch ?? globalThis.fetch.bind(globalThis);
+    this.headers = options.headers;
+  }
+  searchEvents(input = {}, signal) {
+    return this.request("/events/search", {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  getEvent(eventId, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}`, { signal });
+  }
+  getPricingCards(eventId, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}/pricing-cards`, { signal });
+  }
+  getRegistrationSummary(input, signal) {
+    return this.request("/checkout/registration/summary", {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  createRegistrationCheckoutSession(input, signal) {
+    return this.request("/checkout/registration/session", {
+      method: "POST",
+      body: serializeRegistrationInput(input),
+      signal
+    });
+  }
+  async request(path, options = {}) {
+    const headers = new Headers(this.headers);
+    headers.set("accept", "application/json");
+    headers.set("x-publishable-key", this.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}${BROWSER_API_PREFIX}${path}`, init);
+    if (!response.ok) {
+      const payload = await readResponsePayload(response);
+      throw new WodiraBrowserApiError({
+        status: response.status,
+        statusText: response.statusText,
+        message: extractErrorMessage(payload, response),
+        payload
+      });
+    }
+    const text = await response.text();
+    return text ? JSON.parse(text) : undefined;
+  }
+}
+function createWodiraBrowserClient(options) {
+  return new WodiraBrowserClient(options);
+}
+async function readResponsePayload(response) {
+  const text = await response.text();
+  if (!text)
+    return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+function extractErrorMessage(payload, response) {
+  if (typeof payload === "string")
+    return payload;
+  const message = payload?.message;
+  if (typeof message === "string")
+    return message;
+  if (Array.isArray(message))
+    return message.filter((item) => typeof item === "string").join(", ");
+  if (typeof payload?.error === "string")
+    return payload.error;
+  return `WODira browser API request failed with ${response.status} ${response.statusText}`;
+}
+function serializeRegistrationInput(input) {
+  return {
+    ...input,
+    athletes: input.athletes.map(serializeAthleteInput),
+    ...input.guestRegistrations ? {
+      guestRegistrations: input.guestRegistrations.map((guest) => ({
+        ...guest,
+        athletes: guest.athletes.map(serializeAthleteInput)
+      }))
+    } : {}
+  };
+}
+function serializeAthleteInput(athlete) {
+  return {
+    ...athlete,
+    birthDate: athlete.birthDate instanceof Date ? athlete.birthDate.toISOString().slice(0, 10) : athlete.birthDate
+  };
+}
+
+// src/ui/events.ts
+function emitWodiraEvent(target, name, detail) {
+  target.dispatchEvent(new CustomEvent(name, {
+    detail,
+    bubbles: true,
+    composed: true
+  }));
+}
+function getErrorMessage(error) {
+  if (error instanceof Error)
+    return error.message;
+  if (typeof error === "string")
+    return error;
+  return "Ha ocurrido un error inesperado.";
+}
+
+// src/ui/validators.ts
+var VALID_GENDERS = new Set(["FEMALE", "MALE"]);
+function isBlank(value) {
+  return value === undefined || value === null || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.length === 0;
+}
+function isEmail(value) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+function isHttpUrl(value) {
+  try {
+    const url = new URL(value.trim());
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function validateRequiredText(value) {
+  return isBlank(value) ? invalid("required") : valid();
+}
+function validateEmail(value, required) {
+  if (isBlank(value))
+    return required ? invalid("required") : valid();
+  return isEmail(value) ? valid() : invalid("email");
+}
+function validateHttpUrl(value, required) {
+  if (isBlank(value))
+    return required ? invalid("required") : valid();
+  return isHttpUrl(value) ? valid() : invalid("url");
+}
+function validateDate(value, required) {
+  if (isBlank(value))
+    return required ? invalid("required") : valid();
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? invalid("date") : valid();
+}
+function validateNumber(value, required) {
+  if (isBlank(value))
+    return required ? invalid("required") : valid();
+  const parsed = typeof value === "number" ? value : Number(String(value).trim());
+  return Number.isFinite(parsed) ? valid() : invalid("number");
+}
+function validateSelect(value, options, required) {
+  if (isBlank(value))
+    return required ? invalid("required") : valid();
+  const normalized = String(value);
+  return options.includes(normalized) ? valid() : invalid("selection");
+}
+function validateCheckbox(value, required) {
+  return required && value !== true ? invalid("required") : valid();
+}
+function validateGender(value) {
+  return VALID_GENDERS.has(value) ? valid() : invalid("selection");
+}
+function validateCustomFieldValue(value, type, options, required) {
+  if (type === "CHECKBOX")
+    return validateCheckbox(value, required);
+  if (type === "SELECT")
+    return validateSelect(value, options, required);
+  if (type === "DATE")
+    return validateDate(String(value ?? ""), required);
+  if (type === "NUMBER")
+    return validateNumber(value, required);
+  return required ? validateRequiredText(value) : valid();
+}
+function normalizeLimit(value, fallback, max) {
+  if (!Number.isFinite(value))
+    return fallback;
+  return Math.min(max, Math.max(1, Math.trunc(value)));
+}
+function valid() {
+  return { valid: true };
+}
+function invalid(reason) {
+  return { valid: false, reason };
+}
+
+// src/ui/i18n.ts
+var es = {
+  availableSlots: "plazas disponibles",
+  buyerEmail: "Email comprador",
+  buyerName: "Nombre comprador",
+  categorySelected: "Categoría seleccionada",
+  checkoutCreating: "Creando checkout…",
+  checkoutSubmit: "Continuar al pago",
+  club: "Club",
+  customFieldsTitle: "Información adicional",
+  documentId: "Documento",
+  emptyCategories: "No hay categorías disponibles.",
+  emptyEvent: "Selecciona un evento.",
+  emptyEvents: "No hay eventos publicados.",
+  eventUnavailable: "Evento no disponible.",
+  female: "Femenino",
+  guestAthlete: "Atleta invitado",
+  guestCategory: "Categoría invitado",
+  guestEmail: "Email invitado",
+  guestName: "Nombre invitado",
+  guestRegistrations: "Inscripciones de invitados",
+  guestRegistrationsHelp: "Añade otra inscripción al mismo pago.",
+  addGuestRegistration: "Agregar invitado",
+  remove: "Eliminar",
+  gender: "Género",
+  invalidDate: "Fecha inválida",
+  invalidEmail: "Email inválido",
+  invalidNumber: "Número inválido",
+  invalidSelection: "Selecciona una opción válida",
+  invalidUrl: "URL inválida",
+  loadingEvent: "Cargando evento…",
+  loadingEvents: "Cargando eventos…",
+  loadingPricing: "Cargando tarifas…",
+  loadingSummary: "Calculando resumen…",
+  male: "Masculino",
+  noPublishableKey: "Configura publishable-key.",
+  promocode: "Promocode",
+  registerData: "Datos de inscripción",
+  requiredField: "Este campo es obligatorio",
+  requiredWaiver: "Debes aceptar este documento",
+  select: "Seleccionar",
+  selectCategory: "Selecciona una categoría.",
+  selectEvent: "Ver inscripciones",
+  selectOption: "Seleccionar",
+  summary: "Resumen",
+  teamName: "Nombre del equipo",
+  teamSize: "Equipo de",
+  terms: "Acepto los términos y condiciones de la inscripción.",
+  total: "Total",
+  waiversTitle: "Documentos legales"
+};
+var en = {
+  availableSlots: "spots available",
+  buyerEmail: "Buyer email",
+  buyerName: "Buyer name",
+  categorySelected: "Category selected",
+  checkoutCreating: "Creating checkout…",
+  checkoutSubmit: "Continue to payment",
+  club: "Club",
+  customFieldsTitle: "Additional information",
+  documentId: "Document ID",
+  emptyCategories: "No categories available.",
+  emptyEvent: "Select an event.",
+  emptyEvents: "No published events.",
+  eventUnavailable: "Event unavailable.",
+  female: "Female",
+  guestAthlete: "Guest athlete",
+  guestCategory: "Guest category",
+  guestEmail: "Guest email",
+  guestName: "Guest name",
+  guestRegistrations: "Guest registrations",
+  guestRegistrationsHelp: "Add another registration to the same payment.",
+  addGuestRegistration: "Add guest",
+  remove: "Remove",
+  gender: "Gender",
+  invalidDate: "Invalid date",
+  invalidEmail: "Invalid email",
+  invalidNumber: "Invalid number",
+  invalidSelection: "Select a valid option",
+  invalidUrl: "Invalid URL",
+  loadingEvent: "Loading event…",
+  loadingEvents: "Loading events…",
+  loadingPricing: "Loading pricing…",
+  loadingSummary: "Calculating summary…",
+  male: "Male",
+  noPublishableKey: "Configure publishable-key.",
+  promocode: "Promo code",
+  registerData: "Registration details",
+  requiredField: "This field is required",
+  requiredWaiver: "You must accept this waiver",
+  select: "Select",
+  selectCategory: "Select a category.",
+  selectEvent: "View registrations",
+  selectOption: "Select",
+  summary: "Summary",
+  teamName: "Team name",
+  teamSize: "Team of",
+  terms: "I accept the registration terms and conditions.",
+  total: "Total",
+  waiversTitle: "Legal documents"
+};
+function t(locale, key) {
+  return locale?.toLowerCase().startsWith("en") ? en[key] : es[key];
+}
+
+// src/ui/styles.ts
+var wodiraUiStyles = css`
+  :host {
+    --wodira-color-primary: #111827;
+    --wodira-color-primary-contrast: #ffffff;
+    --wodira-color-accent: #2563eb;
+    --wodira-color-accent-contrast: #ffffff;
+    --wodira-color-surface: #ffffff;
+    --wodira-color-muted: #f3f4f6;
+    --wodira-color-border: #d1d5db;
+    --wodira-color-text: #111827;
+    --wodira-color-text-muted: #6b7280;
+    --wodira-color-danger: #dc2626;
+    --wodira-radius: 1rem;
+    --wodira-radius-sm: 0.625rem;
+    --wodira-space: 1rem;
+    --wodira-font-family:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --wodira-shadow: 0 20px 45px rgb(15 23 42 / 0.08);
+    box-sizing: border-box;
+    color: var(--wodira-color-text);
+    display: block;
+    font-family: var(--wodira-font-family);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [part~='stack'] {
+    display: grid;
+    gap: var(--wodira-space);
+  }
+
+  [part~='grid'] {
+    display: grid;
+    gap: var(--wodira-space);
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  [part~='card'] {
+    background: var(--wodira-color-surface);
+    border: 1px solid var(--wodira-color-border);
+    border-radius: var(--wodira-radius);
+    box-shadow: var(--wodira-shadow);
+    padding: calc(var(--wodira-space) * 1.25);
+  }
+
+  [part~='button'] {
+    align-items: center;
+    background: var(--wodira-color-primary);
+    border: 0;
+    border-radius: var(--wodira-radius-sm);
+    color: var(--wodira-color-primary-contrast);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: 700;
+    justify-content: center;
+    min-height: 2.75rem;
+    padding: 0.75rem 1rem;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  [part~='button']:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  [part~='button']:focus-visible,
+  [part~='input']:focus-visible,
+  [part~='select']:focus-visible,
+  [part~='textarea']:focus-visible,
+  [part~='checkbox']:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--wodira-color-accent) 35%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part~='button']:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  [part~='button'][part~='secondary'] {
+    background: var(--wodira-color-muted);
+    color: var(--wodira-color-text);
+  }
+
+  [part~='input'],
+  [part~='select'],
+  [part~='textarea'] {
+    background: var(--wodira-color-surface);
+    border: 1px solid var(--wodira-color-border);
+    border-radius: var(--wodira-radius-sm);
+    color: var(--wodira-color-text);
+    font: inherit;
+    min-height: 2.75rem;
+    padding: 0.7rem 0.8rem;
+    width: 100%;
+  }
+
+  [part~='input'][aria-invalid='true'],
+  [part~='select'][aria-invalid='true'],
+  [part~='textarea'][aria-invalid='true'] {
+    border-color: var(--wodira-color-danger);
+  }
+
+  [part~='textarea'] {
+    min-height: 5.5rem;
+    resize: vertical;
+  }
+
+  [part~='label'] {
+    display: grid;
+    gap: 0.35rem;
+    font-size: 0.92rem;
+    font-weight: 700;
+  }
+
+  [part~='checkbox'] {
+    margin-inline-end: 0.5rem;
+  }
+
+  [part~='hint'],
+  [part~='meta'],
+  [part~='field-error'] {
+    color: var(--wodira-color-text-muted);
+    font-size: 0.875rem;
+  }
+
+  [part~='field-error'] {
+    color: var(--wodira-color-danger);
+  }
+
+  [part~='error'] {
+    background: color-mix(in srgb, var(--wodira-color-danger) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--wodira-color-danger) 35%, transparent);
+    border-radius: var(--wodira-radius-sm);
+    color: var(--wodira-color-danger);
+    padding: 0.75rem 0.9rem;
+  }
+
+  [part~='loader'],
+  [part~='empty'] {
+    color: var(--wodira-color-text-muted);
+    padding: var(--wodira-space);
+    text-align: center;
+  }
+
+  [part~='title'] {
+    font-size: clamp(1.15rem, 2vw, 1.5rem);
+    font-weight: 800;
+    line-height: 1.15;
+    margin: 0;
+  }
+
+  [part~='price'] {
+    color: var(--wodira-color-accent);
+    font-size: 1.35rem;
+    font-weight: 850;
+  }
+
+  [part~='image'] {
+    aspect-ratio: 16 / 9;
+    border-radius: calc(var(--wodira-radius) * 0.75);
+    display: block;
+    margin-block-end: var(--wodira-space);
+    object-fit: cover;
+    width: 100%;
+  }
+
+  [part~='summary-row'] {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--wodira-space);
+  }
+`;
+
+// src/ui/components.ts
+var DEFAULT_LIMIT = 12;
+var DEFAULT_LOCALE = "es-ES";
+var DEFAULT_CURRENCY = "EUR";
+function createClient(options) {
+  const clientOptions = { publishableKey: options.publishableKey };
+  if (options.baseUrl)
+    clientOptions.baseUrl = options.baseUrl;
+  return createWodiraBrowserClient(clientOptions);
+}
+function resolveLocale(locale) {
+  const explicitLocale = normalizeLocale(locale);
+  if (explicitLocale)
+    return explicitLocale;
+  const documentLocale = normalizeLocale(globalThis.document?.documentElement?.lang);
+  if (documentLocale)
+    return documentLocale;
+  const navigatorLocales = globalThis.navigator?.languages;
+  const navigatorLocale = normalizeLocale(navigatorLocales && navigatorLocales.length > 0 ? navigatorLocales[0] : globalThis.navigator?.language);
+  return navigatorLocale ?? DEFAULT_LOCALE;
+}
+function normalizeLocale(locale) {
+  const normalized = locale?.trim();
+  if (!normalized)
+    return;
+  try {
+    return Intl.getCanonicalLocales(normalized)[0] ?? normalized;
+  } catch {
+    return normalized;
+  }
+}
+function formatDate(date, locale) {
+  if (!date)
+    return "";
+  const parsed = new Date(date);
+  if (Number.isNaN(parsed.getTime()))
+    return date;
+  return new Intl.DateTimeFormat(resolveLocale(locale), { dateStyle: "medium" }).format(parsed);
+}
+function formatNumber(value, locale, options = {}) {
+  if (value === undefined || value === null || !Number.isFinite(value))
+    return "—";
+  return new Intl.NumberFormat(resolveLocale(locale), {
+    maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
+    ...options
+  }).format(value);
+}
+function formatMoney(value, currency = DEFAULT_CURRENCY, locale, formatOptions = {}) {
+  if (value === undefined)
+    return "—";
+  const resolvedLocale = resolveLocale(locale);
+  if (value === null || formatOptions.zeroAsFree === true && value === 0) {
+    return resolvedLocale.toLowerCase().startsWith("en") ? "Free" : "Gratis";
+  }
+  if (!Number.isFinite(value))
+    return "—";
+  const normalizedCurrency = normalizeCurrency(currency);
+  const absoluteValue = Math.abs(value);
+  const fractionDigits = getCurrencyFractionDigits(absoluteValue, normalizedCurrency, resolvedLocale);
+  const options = {
+    style: "currency",
+    currency: normalizedCurrency,
+    currencyDisplay: "narrowSymbol",
+    minimumFractionDigits: Number.isInteger(absoluteValue) ? 0 : fractionDigits.minimum,
+    maximumFractionDigits: Number.isInteger(absoluteValue) ? 0 : fractionDigits.maximum
+  };
+  try {
+    return new Intl.NumberFormat(resolvedLocale, options).format(value);
+  } catch {
+    return `${formatPlainNumber(value, resolvedLocale, options.maximumFractionDigits ?? 2)} ${normalizedCurrency}`;
+  }
+}
+function normalizeCurrency(currency) {
+  const normalized = (currency ?? DEFAULT_CURRENCY).trim().toUpperCase();
+  return /^[A-Z]{3}$/.test(normalized) ? normalized : DEFAULT_CURRENCY;
+}
+function getCurrencyFractionDigits(value, currency, locale) {
+  if (Number.isInteger(value))
+    return { minimum: 0, maximum: 0 };
+  try {
+    const resolved = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency
+    }).resolvedOptions();
+    const minimumFractionDigits = resolved.minimumFractionDigits ?? 2;
+    const maximumFractionDigits = resolved.maximumFractionDigits ?? minimumFractionDigits;
+    return {
+      minimum: minimumFractionDigits,
+      maximum: Math.max(maximumFractionDigits, 2)
+    };
+  } catch {
+    return { minimum: 2, maximum: 2 };
+  }
+}
+function formatPlainNumber(value, locale, maximumFractionDigits) {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: Number.isInteger(value) ? 0 : Math.min(2, maximumFractionDigits),
+    maximumFractionDigits
+  }).format(value);
+}
+function isCheckboxField(field) {
+  return field.type === "CHECKBOX";
+}
+function emptyAthlete() {
+  return {
+    fullname: "",
+    email: "",
+    phone: "",
+    idNumber: "",
+    gender: "FEMALE",
+    birthDate: ""
+  };
+}
+function createIdempotencyKey() {
+  return globalThis.crypto?.randomUUID?.() ?? `checkout_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+}
+function isFormFieldTargetAthlete(field) {
+  return field.target === "ATHLETE";
+}
+function fieldErrorId(fieldName) {
+  return `wodira-error-${fieldName.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+function validationMessage(locale, result) {
+  if (result.valid)
+    return "";
+  if (result.reason === "email")
+    return t(locale, "invalidEmail");
+  if (result.reason === "url")
+    return t(locale, "invalidUrl");
+  if (result.reason === "date")
+    return t(locale, "invalidDate");
+  if (result.reason === "number")
+    return t(locale, "invalidNumber");
+  if (result.reason === "selection")
+    return t(locale, "invalidSelection");
+  return t(locale, "requiredField");
+}
+function setValidationError(errors, locale, key, result) {
+  if (!result.valid)
+    errors[key] = validationMessage(locale, result);
+}
+function hasText(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+
+class WodiraEventCard extends LitElement {
+  static styles = [wodiraUiStyles];
+  static properties = {
+    event: { attribute: false },
+    locale: { type: String }
+  };
+  constructor() {
+    super();
+    this.locale = "";
+  }
+  render() {
+    if (!this.event)
+      return html`<article part="card empty">${t(this.locale, "eventUnavailable")}</article>`;
+    const event = this.event;
+    return html`
+      <article part="card event-card">
+        ${event.banner ? html`<img part="image" src=${event.banner} alt=${event.name} loading="lazy" />` : nothing}
+        <div part="stack">
+          <h3 part="title">${event.name}</h3>
+          <p part="meta">
+            ${formatDate(event.startDate, this.locale)}${event.locationAddress ? ` · ${event.locationAddress}` : ""}
+          </p>
+          ${event.descriptionText ? html`<p part="description">${event.descriptionText}</p>` : nothing}
+          <button part="button" type="button" @click=${this.selectEvent}>
+            ${t(this.locale, "selectEvent")}
+          </button>
+        </div>
+      </article>
+    `;
+  }
+  selectEvent() {
+    if (!this.event)
+      return;
+    emitWodiraEvent(this, "wodira:event-select", { event: this.event });
+  }
+}
+
+class WodiraEventList extends LitElement {
+  static styles = [wodiraUiStyles];
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    baseUrl: { type: String, attribute: "base-url" },
+    search: { type: String },
+    limit: { type: Number },
+    locale: { type: String },
+    loading: { type: Boolean, state: true },
+    error: { type: String, state: true },
+    eventItems: { state: true }
+  };
+  didInitialLoad = false;
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.search = "";
+    this.limit = DEFAULT_LIMIT;
+    this.locale = "";
+    this.loading = false;
+    this.error = "";
+    this.eventItems = [];
+  }
+  firstUpdated() {
+    this.didInitialLoad = true;
+    this.loadEvents();
+  }
+  updated(changed) {
+    if (this.didInitialLoad && (changed.has("publishableKey") || changed.has("baseUrl") || changed.has("search") || changed.has("limit"))) {
+      this.loadEvents();
+    }
+  }
+  render() {
+    if (!this.publishableKey)
+      return html`<div part="error" role="alert">${t(this.locale, "noPublishableKey")}</div>`;
+    if (this.loading)
+      return html`<div part="loader" role="status" aria-live="polite">
+        ${t(this.locale, "loadingEvents")}
+      </div>`;
+    if (this.error)
+      return html`<div part="error" role="alert">${this.error}</div>`;
+    if (this.eventItems.length === 0)
+      return html`<div part="empty">${t(this.locale, "emptyEvents")}</div>`;
+    return html`
+      <section part="stack event-list" aria-busy=${this.loading ? "true" : "false"}>
+        ${this.eventItems.map((event) => html`<wodira-event-card .event=${event} locale=${this.locale}></wodira-event-card>`)}
+      </section>
+    `;
+  }
+  validateClientConfig() {
+    if (this.baseUrl && !validateHttpUrl(this.baseUrl, false).valid) {
+      throw new Error(t(this.locale, "invalidUrl"));
+    }
+  }
+  async loadEvents() {
+    if (!this.isConnected)
+      return;
+    if (!hasText(this.publishableKey)) {
+      this.eventItems = [];
+      return;
+    }
+    this.loading = true;
+    this.error = "";
+    try {
+      this.validateClientConfig();
+      const client = createClient({
+        publishableKey: this.publishableKey.trim(),
+        baseUrl: this.baseUrl
+      });
+      const limit = normalizeLimit(this.limit, DEFAULT_LIMIT, 100);
+      const searchInput = this.search.trim() ? { search: this.search.trim(), limit } : { limit };
+      const response = await client.searchEvents(searchInput);
+      this.eventItems = response.data;
+    } catch (error) {
+      this.error = getErrorMessage(error);
+      emitWodiraEvent(this, "wodira:error", { error, message: this.error });
+    } finally {
+      this.loading = false;
+    }
+  }
+}
+
+class WodiraPricingCards extends LitElement {
+  static styles = [wodiraUiStyles];
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    baseUrl: { type: String, attribute: "base-url" },
+    eventId: { type: String, attribute: "event-id" },
+    selectedCategoryId: { type: String, attribute: "selected-category-id" },
+    locale: { type: String },
+    pricing: { state: true },
+    loading: { type: Boolean, state: true },
+    error: { type: String, state: true }
+  };
+  didInitialLoad = false;
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.eventId = "";
+    this.selectedCategoryId = "";
+    this.locale = "";
+    this.loading = false;
+    this.error = "";
+  }
+  firstUpdated() {
+    this.didInitialLoad = true;
+    this.loadPricing();
+  }
+  updated(changed) {
+    if (this.didInitialLoad && (changed.has("publishableKey") || changed.has("baseUrl") || changed.has("eventId"))) {
+      this.loadPricing();
+    }
+  }
+  render() {
+    if (!this.eventId)
+      return html`<div part="empty">${t(this.locale, "emptyEvent")}</div>`;
+    if (!this.publishableKey)
+      return html`<div part="error" role="alert">${t(this.locale, "noPublishableKey")}</div>`;
+    if (this.loading)
+      return html`<div part="loader" role="status" aria-live="polite">
+        ${t(this.locale, "loadingPricing")}
+      </div>`;
+    if (this.error)
+      return html`<div part="error" role="alert">${this.error}</div>`;
+    if (!this.pricing?.cards.length)
+      return html`<div part="empty">${t(this.locale, "emptyCategories")}</div>`;
+    return html`
+      <section part="stack pricing-cards">
+        ${this.pricing.cards.map((card) => this.renderCard(card, this.pricing?.currency ?? "EUR"))}
+      </section>
+    `;
+  }
+  renderCard(card, currency) {
+    const selected = this.selectedCategoryId === card.id;
+    const remaining = card.quota === null || card.quota === undefined ? null : Math.max(0, card.quota - card.registered);
+    return html`
+      <article part="card pricing-card ${selected ? "selected" : ""}">
+        <div part="stack">
+          <h3 part="title">${card.name}</h3>
+          ${card.description ? html`<p part="description">${card.description}</p>` : nothing}
+          <div part="price">
+            ${formatMoney(card.activePrice ?? card.price, currency, this.locale, {
+      zeroAsFree: true
+    })}
+          </div>
+          <p part="meta">
+            ${t(this.locale, "teamSize")}
+            ${formatNumber(card.teamSize, this.locale)}${remaining === null ? "" : ` · ${formatNumber(remaining, this.locale)} ${t(this.locale, "availableSlots")}`}
+          </p>
+          <button
+            part="button"
+            type="button"
+            aria-pressed=${selected ? "true" : "false"}
+            @click=${() => this.selectCategory(card)}
+          >
+            ${selected ? t(this.locale, "categorySelected") : t(this.locale, "select")}
+          </button>
+        </div>
+      </article>
+    `;
+  }
+  validateClientConfig() {
+    if (this.baseUrl && !validateHttpUrl(this.baseUrl, false).valid) {
+      throw new Error(t(this.locale, "invalidUrl"));
+    }
+  }
+  async loadPricing() {
+    if (!this.isConnected)
+      return;
+    if (!hasText(this.publishableKey) || !hasText(this.eventId))
+      return;
+    this.loading = true;
+    this.error = "";
+    try {
+      this.validateClientConfig();
+      const client = createClient({
+        publishableKey: this.publishableKey.trim(),
+        baseUrl: this.baseUrl
+      });
+      this.pricing = await client.getPricingCards(this.eventId.trim());
+    } catch (error) {
+      this.error = getErrorMessage(error);
+      emitWodiraEvent(this, "wodira:error", { error, message: this.error });
+    } finally {
+      this.loading = false;
+    }
+  }
+  selectCategory(category) {
+    this.selectedCategoryId = category.id;
+    emitWodiraEvent(this, "wodira:category-select", { category, eventId: this.eventId });
+  }
+}
+
+class WodiraRegistrationForm extends LitElement {
+  static styles = [wodiraUiStyles];
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    baseUrl: { type: String, attribute: "base-url" },
+    eventId: { type: String, attribute: "event-id" },
+    categoryId: { type: String, attribute: "category-id" },
+    successUrl: { type: String, attribute: "success-url" },
+    cancelUrl: { type: String, attribute: "cancel-url" },
+    locale: { type: String },
+    autoRedirect: { type: Boolean, attribute: "auto-redirect" },
+    event: { attribute: false },
+    loading: { type: Boolean, state: true },
+    error: { type: String, state: true },
+    teamName: { state: true },
+    club: { state: true },
+    purchaserName: { state: true },
+    purchaserEmail: { state: true },
+    promocode: { state: true },
+    termsAccepted: { type: Boolean, state: true },
+    athletes: { state: true },
+    customFieldValues: { state: true },
+    waiversAccepted: { state: true },
+    selectedSupplementIds: { state: true },
+    guestRegistrations: { state: true },
+    summary: { state: true },
+    summaryLoading: { type: Boolean, state: true },
+    fieldErrors: { state: true }
+  };
+  summaryRequestId = 0;
+  summaryTimer;
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.eventId = "";
+    this.categoryId = "";
+    this.successUrl = "";
+    this.cancelUrl = "";
+    this.locale = "";
+    this.autoRedirect = true;
+    this.loading = false;
+    this.error = "";
+    this.teamName = "";
+    this.club = "";
+    this.purchaserName = "";
+    this.purchaserEmail = "";
+    this.promocode = "";
+    this.termsAccepted = false;
+    this.athletes = [emptyAthlete()];
+    this.customFieldValues = {};
+    this.waiversAccepted = {};
+    this.selectedSupplementIds = [];
+    this.guestRegistrations = [];
+    this.summary = undefined;
+    this.summaryLoading = false;
+    this.fieldErrors = {};
+  }
+  updated(changed) {
+    if (changed.has("categoryId") || changed.has("event")) {
+      this.syncAthleteCount();
+      this.syncRequiredSupplements();
+      this.syncGuestRegistrations();
+    }
+    if (changed.has("categoryId") || changed.has("purchaserEmail") || changed.has("promocode") || changed.has("selectedSupplementIds") || changed.has("guestRegistrations")) {
+      this.scheduleSummaryLoad();
+    }
+  }
+  render() {
+    const category = this.selectedCategory;
+    if (!this.eventId || !this.categoryId)
+      return html`<div part="empty">${t(this.locale, "selectCategory")}</div>`;
+    if (!this.publishableKey)
+      return html`<div part="error" role="alert">${t(this.locale, "noPublishableKey")}</div>`;
+    return html`
+      <form part="card registration-form" @submit=${this.submit} novalidate>
+        <div part="stack">
+          <h3 part="title">
+            ${t(this.locale, "registerData")}${category ? ` · ${category.name}` : ""}
+          </h3>
+          ${this.error ? html`<div part="error" role="alert">${this.error}</div>` : nothing}
+          <div part="grid purchaser-grid">
+            ${this.renderInput(t(this.locale, "buyerName"), "purchaserName", this.purchaserName, "text", true)}
+            ${this.renderInput(t(this.locale, "buyerEmail"), "purchaserEmail", this.purchaserEmail, "email", true)}
+            ${this.renderInput(t(this.locale, "teamName"), "teamName", this.teamName, "text", true)}
+            ${this.renderInput(t(this.locale, "club"), "club", this.club, "text", false)}
+            ${this.renderInput(t(this.locale, "promocode"), "promocode", this.promocode, "text", false)}
+          </div>
+          ${this.athletes.map((athlete, index) => this.renderAthlete(athlete, index))}
+          ${this.renderCustomFields()} ${this.renderSupplements()} ${this.renderGuestRegistrations()}
+          ${this.renderWaivers()}
+          <label part="label checkbox terms">
+            <span>
+              <input
+                part="checkbox"
+                type="checkbox"
+                .checked=${this.termsAccepted}
+                aria-invalid=${this.fieldErrors.termsAccepted ? "true" : "false"}
+                @change=${(event) => this.setTermsAccepted(event.target.checked)}
+              />
+              ${t(this.locale, "terms")}
+            </span>
+            ${this.renderFieldError("termsAccepted")}
+          </label>
+          ${this.renderSummary()}
+          <button part="button submit" type="submit" ?disabled=${this.loading}>
+            ${this.loading ? t(this.locale, "checkoutCreating") : t(this.locale, "checkoutSubmit")}
+          </button>
+        </div>
+      </form>
+    `;
+  }
+  get selectedCategory() {
+    return this.event?.categories.find((category) => category.id === this.categoryId);
+  }
+  get activeSupplements() {
+    return (this.event?.supplements ?? []).filter((supplement) => supplement.isActive !== false);
+  }
+  renderInput(label, key, value, type = "text", required = false) {
+    const id = fieldErrorId(key);
+    return html`
+      <label part="label field">
+        <span>${label}${required ? " *" : ""}</span>
+        <input
+          part="input"
+          type=${type}
+          .value=${value}
+          aria-invalid=${this.fieldErrors[key] ? "true" : "false"}
+          aria-describedby=${this.fieldErrors[key] ? id : nothing}
+          @input=${(event) => this.updateTextField(key, event.target.value)}
+        />
+        ${this.renderFieldError(key)}
+      </label>
+    `;
+  }
+  renderAthlete(athlete, index) {
+    return html`
+      <fieldset part="card athlete">
+        <legend part="title">Atleta ${index + 1}</legend>
+        <div part="grid athlete-grid">
+          ${this.renderAthleteInput(index, "fullname", "Nombre completo", "text", athlete.fullname)}
+          ${this.renderAthleteInput(index, "email", "Email", "email", athlete.email)}
+          ${this.renderAthleteInput(index, "phone", "Teléfono", "tel", athlete.phone)}
+          ${this.renderAthleteInput(index, "idNumber", t(this.locale, "documentId"), "text", athlete.idNumber)}
+          ${this.renderAthleteInput(index, "birthDate", "Fecha nacimiento", "date", athlete.birthDate)}
+          <label part="label field">
+            <span>${t(this.locale, "gender")} *</span>
+            <select
+              part="select"
+              .value=${athlete.gender}
+              aria-invalid=${this.fieldErrors[`athletes.${index}.gender`] ? "true" : "false"}
+              aria-describedby=${this.fieldErrors[`athletes.${index}.gender`] ? fieldErrorId(`athletes.${index}.gender`) : nothing}
+              @change=${(event) => this.updateAthlete(index, "gender", event.target.value)}
+            >
+              <option value="FEMALE">${t(this.locale, "female")}</option>
+              <option value="MALE">${t(this.locale, "male")}</option>
+            </select>
+            ${this.renderFieldError(`athletes.${index}.gender`)}
+          </label>
+        </div>
+      </fieldset>
+    `;
+  }
+  renderAthleteInput(index, key, label, type, value) {
+    const errorKey = `athletes.${index}.${key}`;
+    const id = fieldErrorId(errorKey);
+    return html`
+      <label part="label field">
+        <span>${label} *</span>
+        <input
+          part="input"
+          type=${type}
+          .value=${value}
+          aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+          aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+          @input=${(event) => this.updateAthlete(index, key, event.target.value)}
+        />
+        ${this.renderFieldError(errorKey)}
+      </label>
+    `;
+  }
+  renderCustomFields() {
+    const fields = this.event?.eventFormFields.filter(isFormFieldTargetAthlete) ?? [];
+    if (!fields.length)
+      return nothing;
+    return html`
+      <fieldset part="card custom-fields">
+        <legend part="title">${t(this.locale, "customFieldsTitle")}</legend>
+        <div part="grid custom-fields-grid">
+          ${fields.map((field) => this.renderCustomField(field))}
+        </div>
+      </fieldset>
+    `;
+  }
+  renderCustomField(field) {
+    const errorKey = `customFields.${field.id}`;
+    const id = fieldErrorId(errorKey);
+    if (field.type === "SELECT") {
+      return html`
+        <label part="label field custom-field">
+          <span>${field.label}${field.isRequired ? " *" : ""}</span>
+          <select
+            part="select"
+            .value=${String(this.customFieldValues[field.id] ?? "")}
+            aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+            aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+            @change=${(event) => this.updateCustomField(field.id, event.target.value)}
+          >
+            <option value="">${t(this.locale, "selectOption")}</option>
+            ${field.options.map((option) => html`<option value=${option}>${option}</option>`)}
+          </select>
+          ${this.renderFieldError(errorKey)}
+        </label>
+      `;
+    }
+    if (isCheckboxField(field)) {
+      return html`
+        <label part="label checkbox custom-field">
+          <span>
+            <input
+              part="checkbox"
+              type="checkbox"
+              .checked=${this.customFieldValues[field.id] === true}
+              aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+              @change=${(event) => this.updateCustomField(field.id, event.target.checked)}
+            />
+            ${field.label}${field.isRequired ? " *" : ""}
+          </span>
+          ${this.renderFieldError(errorKey)}
+        </label>
+      `;
+    }
+    if (field.type === "TEXTAREA") {
+      return html`
+        <label part="label field custom-field">
+          <span>${field.label}${field.isRequired ? " *" : ""}</span>
+          <textarea
+            part="textarea"
+            .value=${String(this.customFieldValues[field.id] ?? "")}
+            aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+            aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+            @input=${(event) => this.updateCustomField(field.id, event.target.value)}
+          ></textarea>
+          ${this.renderFieldError(errorKey)}
+        </label>
+      `;
+    }
+    const inputType = field.type === "DATE" ? "date" : field.type === "NUMBER" ? "number" : "text";
+    return html`
+      <label part="label field custom-field">
+        <span>${field.label}${field.isRequired ? " *" : ""}</span>
+        <input
+          part="input"
+          type=${inputType}
+          .value=${String(this.customFieldValues[field.id] ?? "")}
+          aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+          aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+          @input=${(event) => this.updateCustomField(field.id, event.target.value)}
+        />
+        ${this.renderFieldError(errorKey)}
+      </label>
+    `;
+  }
+  renderSupplements() {
+    const supplements = this.activeSupplements;
+    if (!supplements.length)
+      return nothing;
+    const currency = this.event?.currency ?? "EUR";
+    return html`
+      <fieldset part="card supplements">
+        <legend part="title">Extras</legend>
+        <div part="stack">
+          ${supplements.map((supplement) => html`
+              <label part="label checkbox supplement">
+                <span>
+                  <input
+                    part="checkbox"
+                    type="checkbox"
+                    .checked=${this.selectedSupplementIds.includes(supplement.id)}
+                    ?disabled=${supplement.isRequired}
+                    @change=${(event) => this.updateSupplement(supplement.id, event.target.checked)}
+                  />
+                  ${supplement.name}${supplement.isRequired ? " *" : ""} ·
+                  ${formatMoney(supplement.price, currency, this.locale, { zeroAsFree: true })}
+                </span>
+                ${supplement.description ? html`<small part="hint">${supplement.description}</small>` : nothing}
+              </label>
+            `)}
+        </div>
+      </fieldset>
+    `;
+  }
+  renderGuestRegistrations() {
+    const categories = this.event?.categories.filter((category) => !category.isPrivate) ?? [];
+    return html`
+      <fieldset part="card guest-registrations">
+        <legend part="title">${t(this.locale, "guestRegistrations")}</legend>
+        <p part="hint">${t(this.locale, "guestRegistrationsHelp")}</p>
+        <div part="stack">
+          ${this.guestRegistrations.map((guest, index) => this.renderGuestRegistration(guest, index))}
+          <button part="button secondary add-guest" type="button" @click=${this.addGuestRegistration}>
+            ${t(this.locale, "addGuestRegistration")}
+          </button>
+        </div>
+        ${categories.length === 0 ? html`<small part="hint">${t(this.locale, "emptyCategories")}</small>` : nothing}
+      </fieldset>
+    `;
+  }
+  renderGuestRegistration(guest, index) {
+    const categories = this.event?.categories.filter((category) => !category.isPrivate) ?? [];
+    const guestCategory = this.getCategory(guest.categoryId);
+    return html`
+      <fieldset part="card guest-registration">
+        <legend part="title">${t(this.locale, "guestRegistrations")} #${index + 1}</legend>
+        <div part="stack">
+          <div part="grid guest-grid">
+            ${this.renderGuestInput(index, "guestName", t(this.locale, "guestName"), guest.guestName, "text", true)}
+            ${this.renderGuestInput(index, "guestEmail", t(this.locale, "guestEmail"), guest.guestEmail, "email", true)}
+            <label part="label field">
+              <span>${t(this.locale, "guestCategory")} *</span>
+              <select
+                part="select"
+                .value=${guest.categoryId}
+                aria-invalid=${this.fieldErrors[`guestRegistrations.${index}.categoryId`] ? "true" : "false"}
+                @change=${(event) => this.updateGuestCategory(index, event.target.value)}
+              >
+                <option value="">${t(this.locale, "selectOption")}</option>
+                ${categories.map((category) => html`<option value=${category.id}>${category.name}</option>`)}
+              </select>
+              ${this.renderFieldError(`guestRegistrations.${index}.categoryId`)}
+            </label>
+            ${this.renderGuestInput(index, "teamName", t(this.locale, "teamName"), guest.teamName, "text", true)}
+            ${this.renderGuestInput(index, "club", t(this.locale, "club"), guest.club, "text", false)}
+          </div>
+          ${guest.athletes.map((athlete, athleteIndex) => this.renderGuestAthlete(index, athlete, athleteIndex))}
+          ${this.renderGuestSupplements(guest, index)}
+          <button part="button secondary remove-guest" type="button" @click=${() => this.removeGuestRegistration(index)}>
+            ${t(this.locale, "remove")}
+          </button>
+          ${guestCategory ? html`<small part="hint">${t(this.locale, "teamSize")} ${formatNumber(guestCategory.teamSize, this.locale)}</small>` : nothing}
+        </div>
+      </fieldset>
+    `;
+  }
+  renderGuestInput(index, key, label, value, type, required) {
+    const errorKey = `guestRegistrations.${index}.${key}`;
+    const id = fieldErrorId(errorKey);
+    return html`
+      <label part="label field">
+        <span>${label}${required ? " *" : ""}</span>
+        <input
+          part="input"
+          type=${type}
+          .value=${value}
+          aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+          aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+          @input=${(event) => this.updateGuestField(index, key, event.target.value)}
+        />
+        ${this.renderFieldError(errorKey)}
+      </label>
+    `;
+  }
+  renderGuestAthlete(guestIndex, athlete, athleteIndex) {
+    return html`
+      <fieldset part="card guest-athlete">
+        <legend part="title">${t(this.locale, "guestAthlete")} ${athleteIndex + 1}</legend>
+        <div part="grid athlete-grid">
+          ${this.renderGuestAthleteInput(guestIndex, athleteIndex, "fullname", "Nombre completo", "text", athlete.fullname)}
+          ${this.renderGuestAthleteInput(guestIndex, athleteIndex, "email", "Email", "email", athlete.email)}
+          ${this.renderGuestAthleteInput(guestIndex, athleteIndex, "phone", "Teléfono", "tel", athlete.phone)}
+          ${this.renderGuestAthleteInput(guestIndex, athleteIndex, "idNumber", t(this.locale, "documentId"), "text", athlete.idNumber)}
+          ${this.renderGuestAthleteInput(guestIndex, athleteIndex, "birthDate", "Fecha nacimiento", "date", athlete.birthDate)}
+          <label part="label field">
+            <span>${t(this.locale, "gender")} *</span>
+            <select
+              part="select"
+              .value=${athlete.gender}
+              aria-invalid=${this.fieldErrors[`guestRegistrations.${guestIndex}.athletes.${athleteIndex}.gender`] ? "true" : "false"}
+              @change=${(event) => this.updateGuestAthlete(guestIndex, athleteIndex, "gender", event.target.value)}
+            >
+              <option value="FEMALE">${t(this.locale, "female")}</option>
+              <option value="MALE">${t(this.locale, "male")}</option>
+            </select>
+            ${this.renderFieldError(`guestRegistrations.${guestIndex}.athletes.${athleteIndex}.gender`)}
+          </label>
+        </div>
+      </fieldset>
+    `;
+  }
+  renderGuestAthleteInput(guestIndex, athleteIndex, key, label, type, value) {
+    const errorKey = `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.${key}`;
+    const id = fieldErrorId(errorKey);
+    return html`
+      <label part="label field">
+        <span>${label} *</span>
+        <input
+          part="input"
+          type=${type}
+          .value=${value}
+          aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+          aria-describedby=${this.fieldErrors[errorKey] ? id : nothing}
+          @input=${(event) => this.updateGuestAthlete(guestIndex, athleteIndex, key, event.target.value)}
+        />
+        ${this.renderFieldError(errorKey)}
+      </label>
+    `;
+  }
+  renderGuestSupplements(guest, guestIndex) {
+    const supplements = this.activeSupplements;
+    if (!supplements.length)
+      return nothing;
+    const currency = this.event?.currency ?? "EUR";
+    return html`
+      <fieldset part="card guest-supplements">
+        <legend part="title">Extras</legend>
+        <div part="stack">
+          ${supplements.map((supplement) => html`
+              <label part="label checkbox supplement">
+                <span>
+                  <input
+                    part="checkbox"
+                    type="checkbox"
+                    .checked=${guest.selectedSupplementIds.includes(supplement.id)}
+                    ?disabled=${supplement.isRequired}
+                    @change=${(event) => this.updateGuestSupplement(guestIndex, supplement.id, event.target.checked)}
+                  />
+                  ${supplement.name}${supplement.isRequired ? " *" : ""} ·
+                  ${formatMoney(supplement.price, currency, this.locale, { zeroAsFree: true })}
+                </span>
+              </label>
+            `)}
+        </div>
+      </fieldset>
+    `;
+  }
+  renderWaivers() {
+    const waivers = this.event?.waivers ?? [];
+    if (!waivers.length)
+      return nothing;
+    return html`
+      <fieldset part="card waivers">
+        <legend part="title">${t(this.locale, "waiversTitle")}</legend>
+        <div part="stack">${waivers.map((waiver) => this.renderWaiver(waiver))}</div>
+      </fieldset>
+    `;
+  }
+  renderWaiver(waiver) {
+    const errorKey = `waivers.${waiver.id}`;
+    return html`
+      <label part="label checkbox waiver">
+        <span>
+          <input
+            part="checkbox"
+            type="checkbox"
+            .checked=${this.waiversAccepted[waiver.id] === true}
+            aria-invalid=${this.fieldErrors[errorKey] ? "true" : "false"}
+            @change=${(event) => this.updateWaiver(waiver.id, event.target.checked)}
+          />
+          ${waiver.name}${waiver.isRequired ? " *" : ""}
+        </span>
+        ${waiver.bodyText ? html`<small part="hint">${waiver.bodyText}</small>` : nothing}
+        ${this.renderFieldError(errorKey)}
+      </label>
+    `;
+  }
+  renderSummary() {
+    if (!this.summary && !this.summaryLoading)
+      return nothing;
+    const currency = this.summary?.currency ?? this.event?.currency ?? "EUR";
+    return html`
+      <aside part="card summary" aria-live="polite">
+        <h4 part="title">${t(this.locale, "summary")}</h4>
+        ${this.summaryLoading ? html`<p part="loader">${t(this.locale, "loadingSummary")}</p>` : html`
+              <div part="summary-row">
+                <span>Subtotal</span
+                ><strong>${formatMoney(this.summary?.subtotal, currency, this.locale)}</strong>
+              </div>
+              <div part="summary-row">
+                <span>Extras</span
+                ><strong
+                  >${formatMoney(this.summary?.supplementsTotal, currency, this.locale)}</strong
+                >
+              </div>
+              ${this.summary?.guestRegistrations?.map((guest) => html`<div part="summary-row guest-summary-row">
+                  <span>${guest.categoryName}</span
+                  ><strong>${formatMoney(guest.subtotal, currency, this.locale)}</strong>
+                </div>`)}
+              ${this.summary?.couponDiscount ? html`<div part="summary-row">
+                    <span>Descuento</span
+                    ><strong
+                      >${formatMoney(-this.summary.couponDiscount, currency, this.locale)}</strong
+                    >
+                  </div>` : nothing}
+              <div part="summary-row">
+                <span>${t(this.locale, "total")}</span
+                ><strong>${formatMoney(this.summary?.total, currency, this.locale)}</strong>
+              </div>
+            `}
+      </aside>
+    `;
+  }
+  renderFieldError(key) {
+    const error = this.fieldErrors[key];
+    if (!error)
+      return nothing;
+    return html`<small id=${fieldErrorId(key)} part="field-error" role="alert">${error}</small>`;
+  }
+  syncAthleteCount() {
+    const teamSize = this.selectedCategory?.teamSize ?? 1;
+    if (this.athletes.length === teamSize)
+      return;
+    this.athletes = Array.from({ length: teamSize }, (_, index) => this.athletes[index] ?? emptyAthlete());
+  }
+  syncRequiredSupplements() {
+    const requiredIds = this.getRequiredSupplementIds();
+    const next = [...new Set([...requiredIds, ...this.selectedSupplementIds])];
+    if (next.length !== this.selectedSupplementIds.length)
+      this.selectedSupplementIds = next;
+  }
+  syncGuestRegistrations() {
+    const next = this.guestRegistrations.map((guest) => this.normalizeGuestRegistration(guest));
+    if (JSON.stringify(next) !== JSON.stringify(this.guestRegistrations)) {
+      this.guestRegistrations = next;
+    }
+  }
+  getRequiredSupplementIds() {
+    return this.activeSupplements.filter((supplement) => supplement.isRequired).map((supplement) => supplement.id);
+  }
+  getCategory(categoryId) {
+    return this.event?.categories.find((category) => category.id === categoryId);
+  }
+  createGuestRegistration() {
+    const categoryId = this.categoryId || this.event?.categories.find((category) => !category.isPrivate)?.id || "";
+    return this.normalizeGuestRegistration({
+      guestName: "",
+      guestEmail: "",
+      categoryId,
+      teamName: "",
+      club: "",
+      athletes: [emptyAthlete()],
+      selectedSupplementIds: this.getRequiredSupplementIds()
+    });
+  }
+  normalizeGuestRegistration(guest) {
+    const category = this.getCategory(guest.categoryId);
+    const teamSize = category?.teamSize ?? 1;
+    const athletes = Array.from({ length: teamSize }, (_, index) => guest.athletes[index] ?? emptyAthlete());
+    const selectedSupplementIds = [
+      ...new Set([...this.getRequiredSupplementIds(), ...guest.selectedSupplementIds])
+    ];
+    return { ...guest, athletes, selectedSupplementIds };
+  }
+  addGuestRegistration = () => {
+    this.guestRegistrations = [...this.guestRegistrations, this.createGuestRegistration()];
+  };
+  removeGuestRegistration(index) {
+    this.guestRegistrations = this.guestRegistrations.filter((_, candidateIndex) => candidateIndex !== index);
+  }
+  updateGuestField(index, key, value) {
+    this.guestRegistrations = this.guestRegistrations.map((guest, candidateIndex) => candidateIndex === index ? { ...guest, [key]: value } : guest);
+    this.clearFieldError(`guestRegistrations.${index}.${key}`);
+  }
+  updateGuestCategory(index, categoryId) {
+    this.guestRegistrations = this.guestRegistrations.map((guest, candidateIndex) => candidateIndex === index ? this.normalizeGuestRegistration({ ...guest, categoryId }) : guest);
+    this.clearFieldError(`guestRegistrations.${index}.categoryId`);
+  }
+  updateGuestAthlete(guestIndex, athleteIndex, key, value) {
+    this.guestRegistrations = this.guestRegistrations.map((guest, candidateIndex) => {
+      if (candidateIndex !== guestIndex)
+        return guest;
+      return {
+        ...guest,
+        athletes: guest.athletes.map((athlete, currentAthleteIndex) => currentAthleteIndex === athleteIndex ? { ...athlete, [key]: value } : athlete)
+      };
+    });
+    this.clearFieldError(`guestRegistrations.${guestIndex}.athletes.${athleteIndex}.${key}`);
+  }
+  updateGuestSupplement(guestIndex, supplementId, selected) {
+    this.guestRegistrations = this.guestRegistrations.map((guest, candidateIndex) => {
+      if (candidateIndex !== guestIndex)
+        return guest;
+      const selectedSupplementIds = selected ? [...new Set([...guest.selectedSupplementIds, supplementId])] : guest.selectedSupplementIds.filter((id) => id !== supplementId);
+      return this.normalizeGuestRegistration({ ...guest, selectedSupplementIds });
+    });
+  }
+  updateTextField(key, value) {
+    this[key] = value;
+    this.clearFieldError(key);
+  }
+  updateAthlete(index, key, value) {
+    this.athletes = this.athletes.map((athlete, candidateIndex) => candidateIndex === index ? { ...athlete, [key]: value } : athlete);
+    this.clearFieldError(`athletes.${index}.${key}`);
+  }
+  updateCustomField(fieldId, value) {
+    this.customFieldValues = { ...this.customFieldValues, [fieldId]: value };
+    this.clearFieldError(`customFields.${fieldId}`);
+  }
+  updateWaiver(waiverId, accepted) {
+    this.waiversAccepted = { ...this.waiversAccepted, [waiverId]: accepted };
+    this.clearFieldError(`waivers.${waiverId}`);
+  }
+  updateSupplement(supplementId, selected) {
+    this.selectedSupplementIds = selected ? [...new Set([...this.selectedSupplementIds, supplementId])] : this.selectedSupplementIds.filter((id) => id !== supplementId);
+  }
+  setTermsAccepted(accepted) {
+    this.termsAccepted = accepted;
+    this.clearFieldError("termsAccepted");
+  }
+  clearFieldError(key) {
+    if (!this.fieldErrors[key])
+      return;
+    const { [key]: _removed, ...rest } = this.fieldErrors;
+    this.fieldErrors = rest;
+  }
+  validate() {
+    const errors = {};
+    setValidationError(errors, this.locale, "purchaserName", validateRequiredText(this.purchaserName));
+    setValidationError(errors, this.locale, "purchaserEmail", validateEmail(this.purchaserEmail, true));
+    setValidationError(errors, this.locale, "teamName", validateRequiredText(this.teamName));
+    setValidationError(errors, this.locale, "successUrl", validateHttpUrl(this.successUrl, true));
+    setValidationError(errors, this.locale, "cancelUrl", validateHttpUrl(this.cancelUrl, true));
+    if (this.baseUrl) {
+      setValidationError(errors, this.locale, "baseUrl", validateHttpUrl(this.baseUrl, false));
+    }
+    if (!this.selectedCategory) {
+      errors.categoryId = t(this.locale, "invalidSelection");
+    }
+    for (const [index, athlete] of this.athletes.entries()) {
+      setValidationError(errors, this.locale, `athletes.${index}.fullname`, validateRequiredText(athlete.fullname));
+      setValidationError(errors, this.locale, `athletes.${index}.email`, validateEmail(athlete.email, true));
+      setValidationError(errors, this.locale, `athletes.${index}.phone`, validateRequiredText(athlete.phone));
+      setValidationError(errors, this.locale, `athletes.${index}.idNumber`, validateRequiredText(athlete.idNumber));
+      setValidationError(errors, this.locale, `athletes.${index}.birthDate`, validateDate(athlete.birthDate, true));
+      setValidationError(errors, this.locale, `athletes.${index}.gender`, validateGender(athlete.gender));
+    }
+    for (const [guestIndex, guest] of this.guestRegistrations.entries()) {
+      const guestCategory = this.getCategory(guest.categoryId);
+      setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.guestName`, validateRequiredText(guest.guestName));
+      setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.guestEmail`, validateEmail(guest.guestEmail, true));
+      setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.teamName`, validateRequiredText(guest.teamName));
+      if (!guestCategory || guestCategory.isPrivate) {
+        errors[`guestRegistrations.${guestIndex}.categoryId`] = t(this.locale, "invalidSelection");
+      }
+      for (const [athleteIndex, athlete] of guest.athletes.entries()) {
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.fullname`, validateRequiredText(athlete.fullname));
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.email`, validateEmail(athlete.email, true));
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.phone`, validateRequiredText(athlete.phone));
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.idNumber`, validateRequiredText(athlete.idNumber));
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.birthDate`, validateDate(athlete.birthDate, true));
+        setValidationError(errors, this.locale, `guestRegistrations.${guestIndex}.athletes.${athleteIndex}.gender`, validateGender(athlete.gender));
+      }
+    }
+    for (const field of this.event?.eventFormFields.filter(isFormFieldTargetAthlete) ?? []) {
+      setValidationError(errors, this.locale, `customFields.${field.id}`, validateCustomFieldValue(this.customFieldValues[field.id], field.type, field.options, field.isRequired));
+    }
+    for (const waiver of this.event?.waivers ?? []) {
+      if (waiver.isRequired && this.waiversAccepted[waiver.id] !== true) {
+        errors[`waivers.${waiver.id}`] = t(this.locale, "requiredWaiver");
+      }
+    }
+    setValidationError(errors, this.locale, "termsAccepted", validateCheckbox(this.termsAccepted, true));
+    this.fieldErrors = errors;
+    this.error = this.getConfigurationError(errors);
+    return Object.keys(errors).length === 0;
+  }
+  getConfigurationError(errors) {
+    return errors.successUrl ?? errors.cancelUrl ?? errors.baseUrl ?? errors.categoryId ?? "";
+  }
+  scheduleSummaryLoad() {
+    if (this.summaryTimer)
+      clearTimeout(this.summaryTimer);
+    this.summaryTimer = setTimeout(() => void this.loadSummary(), 250);
+  }
+  buildGuestRegistrationsSummaryInput() {
+    return this.guestRegistrations.filter((guest) => hasText(guest.categoryId)).map((guest) => ({
+      categoryId: guest.categoryId.trim(),
+      ...guest.selectedSupplementIds.length > 0 ? { selectedSupplementIds: guest.selectedSupplementIds } : {}
+    }));
+  }
+  buildGuestRegistrationsCheckoutInput() {
+    if (!this.guestRegistrations.length)
+      return;
+    return this.guestRegistrations.map((guest) => ({
+      guestEmail: guest.guestEmail.trim(),
+      guestName: guest.guestName.trim(),
+      categoryId: guest.categoryId.trim(),
+      teamName: guest.teamName.trim(),
+      ...guest.club.trim() ? { club: guest.club.trim() } : {},
+      selectedSupplementIds: guest.selectedSupplementIds,
+      athletes: guest.athletes.map((athlete) => ({
+        ...athlete,
+        fullname: athlete.fullname.trim(),
+        email: athlete.email.trim(),
+        phone: athlete.phone.trim(),
+        idNumber: athlete.idNumber.trim()
+      }))
+    }));
+  }
+  async loadSummary() {
+    if (!hasText(this.publishableKey) || !hasText(this.categoryId) || !validateEmail(this.purchaserEmail, true).valid || this.baseUrl && !validateHttpUrl(this.baseUrl, false).valid) {
+      this.summary = undefined;
+      return;
+    }
+    const requestId = ++this.summaryRequestId;
+    this.summaryLoading = true;
+    try {
+      const client = createClient({
+        publishableKey: this.publishableKey.trim(),
+        baseUrl: this.baseUrl
+      });
+      const input = {
+        categoryId: this.categoryId.trim(),
+        purchaserEmail: this.purchaserEmail.trim(),
+        selectedSupplementIds: this.selectedSupplementIds,
+        ...this.buildGuestRegistrationsSummaryInput().length > 0 ? { guestRegistrations: this.buildGuestRegistrationsSummaryInput() } : {},
+        ...this.promocode.trim() ? { promocode: this.promocode.trim() } : {}
+      };
+      const summary = await client.getRegistrationSummary(input);
+      if (requestId === this.summaryRequestId)
+        this.summary = summary;
+    } catch {
+      if (requestId === this.summaryRequestId)
+        this.summary = undefined;
+    } finally {
+      if (requestId === this.summaryRequestId)
+        this.summaryLoading = false;
+    }
+  }
+  async submit(event) {
+    event.preventDefault();
+    this.error = "";
+    if (!this.validate())
+      return;
+    this.loading = true;
+    try {
+      emitWodiraEvent(this, "wodira:checkout-start", {
+        eventId: this.eventId,
+        categoryId: this.categoryId
+      });
+      const customFields = Object.entries(this.customFieldValues).filter(([, value]) => !isBlank(value)).map(([fieldId, value]) => ({ fieldId, value }));
+      const client = createClient({
+        publishableKey: this.publishableKey.trim(),
+        baseUrl: this.baseUrl
+      });
+      const checkoutInput = {
+        eventId: this.eventId,
+        categoryId: this.categoryId,
+        purchaserEmail: this.purchaserEmail.trim(),
+        purchaserName: this.purchaserName.trim(),
+        teamName: this.teamName.trim(),
+        termsAccepted: this.termsAccepted,
+        waiversAccepted: this.waiversAccepted,
+        selectedSupplementIds: this.selectedSupplementIds,
+        idempotencyKey: createIdempotencyKey(),
+        successUrl: this.successUrl.trim(),
+        cancelUrl: this.cancelUrl.trim(),
+        customFields,
+        athletes: this.athletes.map((athlete) => ({
+          ...athlete,
+          fullname: athlete.fullname.trim(),
+          email: athlete.email.trim(),
+          phone: athlete.phone.trim(),
+          idNumber: athlete.idNumber.trim()
+        }))
+      };
+      const guestRegistrations = this.buildGuestRegistrationsCheckoutInput();
+      if (guestRegistrations)
+        checkoutInput.guestRegistrations = guestRegistrations;
+      if (this.club.trim())
+        checkoutInput.club = this.club.trim();
+      if (this.promocode.trim())
+        checkoutInput.promocode = this.promocode.trim();
+      const session = await client.createRegistrationCheckoutSession(checkoutInput);
+      this.handleCheckoutSession(session);
+    } catch (error) {
+      this.error = getErrorMessage(error);
+      emitWodiraEvent(this, "wodira:error", { error, message: this.error });
+    } finally {
+      this.loading = false;
+    }
+  }
+  handleCheckoutSession(session) {
+    emitWodiraEvent(this, "wodira:checkout-created", { session });
+    if (!session.sessionUrl)
+      return;
+    emitWodiraEvent(this, "wodira:redirect", { sessionUrl: session.sessionUrl, session });
+    if (this.autoRedirect)
+      globalThis.location.assign(session.sessionUrl);
+  }
+}
+
+class WodiraCheckoutFlow extends LitElement {
+  static styles = [wodiraUiStyles];
+  static properties = {
+    publishableKey: { type: String, attribute: "publishable-key" },
+    baseUrl: { type: String, attribute: "base-url" },
+    eventId: { type: String, attribute: "event-id" },
+    successUrl: { type: String, attribute: "success-url" },
+    cancelUrl: { type: String, attribute: "cancel-url" },
+    locale: { type: String },
+    autoRedirect: { type: Boolean, attribute: "auto-redirect" },
+    selectedEvent: { state: true },
+    selectedCategoryId: { type: String, state: true },
+    loading: { type: Boolean, state: true },
+    error: { type: String, state: true }
+  };
+  didInitialLoad = false;
+  constructor() {
+    super();
+    this.publishableKey = "";
+    this.eventId = "";
+    this.successUrl = "";
+    this.cancelUrl = "";
+    this.locale = "";
+    this.autoRedirect = true;
+    this.selectedCategoryId = "";
+    this.loading = false;
+    this.error = "";
+  }
+  firstUpdated() {
+    this.didInitialLoad = true;
+    this.loadEvent();
+  }
+  updated(changed) {
+    if (this.didInitialLoad && (changed.has("publishableKey") || changed.has("baseUrl") || changed.has("eventId"))) {
+      this.selectedCategoryId = "";
+      this.loadEvent();
+    }
+  }
+  render() {
+    if (!this.publishableKey)
+      return html`<div part="error" role="alert">${t(this.locale, "noPublishableKey")}</div>`;
+    if (this.error)
+      return html`<div part="error" role="alert">${this.error}</div>`;
+    return html`
+      <section part="stack checkout-flow">
+        ${this.eventId ? this.renderSelectedEventFlow() : this.renderEventPicker()}
+      </section>
+    `;
+  }
+  renderEventPicker() {
+    return html`
+      <wodira-event-list
+        publishable-key=${this.publishableKey}
+        .baseUrl=${this.baseUrl}
+        locale=${this.locale}
+        @wodira:event-select=${this.onEventSelect}
+      ></wodira-event-list>
+      ${this.selectedEvent ? this.renderPricingAndForm(this.selectedEvent) : nothing}
+    `;
+  }
+  renderSelectedEventFlow() {
+    if (this.loading)
+      return html`<div part="loader" role="status" aria-live="polite">
+        ${t(this.locale, "loadingEvent")}
+      </div>`;
+    if (!this.selectedEvent)
+      return html`<div part="empty">${t(this.locale, "eventUnavailable")}</div>`;
+    return this.renderPricingAndForm(this.selectedEvent);
+  }
+  renderPricingAndForm(event) {
+    return html`
+      <div part="card event-summary">
+        <h2 part="title">${event.name}</h2>
+        <p part="meta">
+          ${formatDate(event.startDate, this.locale)}${event.locationAddress ? ` · ${event.locationAddress}` : ""}
+        </p>
+      </div>
+      <wodira-pricing-cards
+        publishable-key=${this.publishableKey}
+        .baseUrl=${this.baseUrl}
+        event-id=${event.id}
+        selected-category-id=${this.selectedCategoryId}
+        locale=${this.locale}
+        @wodira:category-select=${this.onCategorySelect}
+      ></wodira-pricing-cards>
+      ${this.selectedCategoryId ? html`
+            <wodira-registration-form
+              publishable-key=${this.publishableKey}
+              .baseUrl=${this.baseUrl}
+              event-id=${event.id}
+              category-id=${this.selectedCategoryId}
+              success-url=${this.successUrl}
+              cancel-url=${this.cancelUrl}
+              locale=${this.locale}
+              .event=${event}
+              .autoRedirect=${this.autoRedirect}
+            ></wodira-registration-form>
+          ` : nothing}
+    `;
+  }
+  validateClientConfig() {
+    if (this.baseUrl && !validateHttpUrl(this.baseUrl, false).valid) {
+      throw new Error(t(this.locale, "invalidUrl"));
+    }
+  }
+  async loadEvent() {
+    if (!this.isConnected)
+      return;
+    if (!hasText(this.publishableKey) || !hasText(this.eventId))
+      return;
+    this.loading = true;
+    this.error = "";
+    try {
+      this.validateClientConfig();
+      const client = createClient({
+        publishableKey: this.publishableKey.trim(),
+        baseUrl: this.baseUrl
+      });
+      this.selectedEvent = await client.getEvent(this.eventId.trim());
+    } catch (error) {
+      this.error = getErrorMessage(error);
+      emitWodiraEvent(this, "wodira:error", { error, message: this.error });
+    } finally {
+      this.loading = false;
+    }
+  }
+  onEventSelect = (event) => {
+    this.selectedEvent = event.detail.event;
+    this.eventId = event.detail.event.id;
+    this.selectedCategoryId = "";
+  };
+  onCategorySelect = (event) => {
+    this.selectedCategoryId = event.detail.category.id;
+  };
+}
+
+// src/ui/index.ts
+var ELEMENTS = [
+  ["wodira-event-card", WodiraEventCard],
+  ["wodira-event-list", WodiraEventList],
+  ["wodira-pricing-cards", WodiraPricingCards],
+  ["wodira-registration-form", WodiraRegistrationForm],
+  ["wodira-checkout-flow", WodiraCheckoutFlow]
+];
+function defineWodiraElements(_options = {}) {
+  if (!globalThis.customElements) {
+    throw new Error("@wodira/browser/ui requires a browser Custom Elements environment.");
+  }
+  for (const [tagName, element] of ELEMENTS) {
+    if (!globalThis.customElements.get(tagName)) {
+      globalThis.customElements.define(tagName, element);
+    }
+  }
+}
+function createWodiraCheckoutFlow(container, options) {
+  defineWodiraElements();
+  const element = document.createElement("wodira-checkout-flow");
+  element.publishableKey = options.publishableKey;
+  if (options.baseUrl)
+    element.baseUrl = options.baseUrl;
+  if (options.eventId)
+    element.eventId = options.eventId;
+  element.successUrl = options.successUrl;
+  element.cancelUrl = options.cancelUrl;
+  if (options.locale)
+    element.locale = options.locale;
+  if (options.autoRedirect !== undefined)
+    element.autoRedirect = options.autoRedirect;
+  container.append(element);
+  return element;
+}
+export {
+  defineWodiraElements,
+  createWodiraCheckoutFlow,
+  WodiraRegistrationForm,
+  WodiraPricingCards,
+  WodiraEventList,
+  WodiraEventCard,
+  WodiraCheckoutFlow
+};