import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/include/include.d.ts
/**
 * <sigvelo-include>
 *
 * @summary Pulls content from another file into your page.
 * @tag sigvelo-include
 * @documentation https://design-system.sigvelo.com/docs/components/include
 * @status stable
 * @since 1.0
 *
 * @event sigvelo-included - Emitted when the include file has been fetched and rendered. The HTTP status code will be
 *  available in `event.detail.status`. This event does not bubble.
 * @event sigvelo-include-error - Emitted when the fetch results in a network error or receives an HTTP response outside
 *  of the 200 range. If a network error occurs, it will be available in `event.detail.error`. If an HTTP status code
 *  was returned, it will be available in `event.detail.status`. This event does not bubble.
 *
 * @example Default
 * ```html
 * <sigvelo-include src="/assets/examples/include.html"></sigvelo-include>
 * ```
 *
 * **Note:** The file you're including must be from a [CORS-enabled](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) endpoint.
 *
 * @example Default content
 * You can provide default content inside the include, which will be shown until the request completes. This is useful to show a loading state while the include file is fetched.
 *
 * ```html
 * <sigvelo-include src="/assets/examples/include.html">
 *   Loading content…
 * </sigvelo-include>
 * ```
 *
 * @example Allowing scripts
 * Scripts included in the fetched HTML will not be executed by default. If you trust the content, you can use the `allow-scripts` attribute to allow them to run.
 *
 * ```html
 * <sigvelo-include allow-scripts src="/assets/examples/include-scripts.html"></sigvelo-include>
 * ```
 *
 * **Warning:** Using this option can be dangerous! Make sure you trust the included content, otherwise your app may become vulnerable to XSS exploits!
 *
 * @example Handling events
 * When an include file is successfully rendered, the `sigvelo-included` event will be emitted. When things go wrong, there are two possible events that signal an error.
 *
 * If the HTTP request completes but the response is outside of the acceptable 200 range, the `sigvelo-http-error` event will be emitted. If the HTTP request fails due to a network error, CORS restriction, or similar, the `sigvelo-network-error` event will be emitted.
 *
 * ```html
 * <sigvelo-include src="/assets/examples/include.html" id="include__events"></sigvelo-include>
 *
 * <script>
 *   const include = document.getElementById('include__events');
 *
 *   include.addEventListener('sigvelo-included', () => {
 *     //
 *     // The include file has rendered
 *     //
 *   });
 *
 *   include.addEventListener('sigvelo-http-error', event => {
 *     //
 *     // The request completed, but the HTTP code was outside of
 *     // the 200 range. You can inspect event.detail.status to
 *     // see which HTTP code was provided.
 *     //
 *   });
 *
 *   include.addEventListener('sigvelo-network-error', event => {
 *     //
 *     // The request could not be completed. You can inspect
 *     // event.detail.error to see the response error.
 *     //
 *   });
 * </script>
 * ```
 */
declare class SigveloInclude extends SigveloElement {
  static styles: CSSResultGroup;
  /** The URL of the file to include. Must be a CORS-enabled endpoint. */
  src: string;
  /** The mode to use when fetching the request. */
  mode: RequestMode;
  /**
   * By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
   * this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits.
   */
  allowScripts: boolean;
  updated(changedProperties: PropertyValues<this>): void;
  /** Runs a script by cloning and replacing it. */
  private runScript;
  /** Fetches the include file and handles the response. */
  private fetchInclude;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-include": SigveloInclude;
  }
}
//#endregion
export { SigveloInclude as t };