import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/share/share.d.ts
/**
 * <sigvelo-share>
 *
 * @summary Allows users to share links, files and text via their operating system's share interface.
 * @tag sigvelo-share
 * @documentation https://design-system.sigvelo.com/docs/components/share
 * @status stable
 * @since 1.0
 *
 * @slot - A custom button to use instead of the default.
 *
 * @csspart share-button - The default share button, a `<sigvelo-button>` element.
 * @csspart share-button__button - The default share button's `button` part.
 * @csspart share-icon - The default share icon, a `<sigvelo-icon>` element.
 * @csspart share-icon__svg - The share icon's `svg` part.
 * @csspart feedback - The feedback that shows when copying (e.g. when the Web Share API is unsupported).
 *
 * @example Default
 * In supportive browsers, the system's share interface will be shown. In unsupportive browsers or unsecure contexts, the data is copied to the user's clipboard instead.
 *
 * ```html
 * <sigvelo-share
 *   label="Sigvelo"
 *   text="An awesome library for building on the Web."
 *   url="https://design-system.sigvelo.com/"
 * ></sigvelo-share>
 * ```
 *
 * **Note:** This component uses the Web Share API's [`share()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). In other words, for maximum browser support, make sure the URL starts with `https://`.
 *
 * @example Using custom buttons
 * Use a custom button by simply slotting it in. Both Sigvelo buttons and native buttons are supported.
 *
 * ```html
 * <sigvelo-share
 *   label="Sigvelo"
 *   text="An awesome library for building on the Web."
 *   url="https://design-system.sigvelo.com/"
 * >
 *   <sigvelo-button>
 *     <sigvelo-icon slot="start" name="share-2"></sigvelo-icon>
 *     Share
 *   </sigvelo-button>
 * </sigvelo-share>
 *
 * <sigvelo-share
 *   label="Sigvelo"
 *   text="An awesome library for building on the Web."
 *   url="https://design-system.sigvelo.com/"
 *   style="margin-inline-end: 0.5rem;"
 * >
 *   <button>
 *     <sigvelo-icon name="share"></sigvelo-icon>
 *     Share
 *   </button>
 * </sigvelo-share>
 * ```
 *
 * @example Sharing a link
 * Set the `url` attribute to the URL you'd like to share. Although optional, it's usually a good idea to also provide a `label`.
 *
 * ```html
 * <sigvelo-share
 *   label="Cat on Wikipedia"
 *   url="https://en.wikipedia.org/wiki/Cat"
 * ></sigvelo-share>
 * ```
 *
 * @example Sharing plain text
 * Set the `text` attribute to the plain text you'd like to share. Although optional, it's usually a good idea to also provide a `label`.
 *
 * ```html
 * <sigvelo-share
 *   label="Check this out"
 *   text="I'm sharing this text with you from my website"
 * ></sigvelo-share>
 * ```
 *
 * @example Sharing a file
 * Set the `files` property to an array of `File` objects you'd like to share. Although optional, it's usually a good idea to also provide a `label`.
 *
 * ```html
 * <div id="share__file">
 *   <sigvelo-file-input label="Select an image to share" accept="image/*"></sigvelo-file-input>
 *   <br>
 *   <sigvelo-share label="Share image">
 *     <sigvelo-button>
 *       <sigvelo-icon slot="start" name="share-2"></sigvelo-icon>
 *       Share selected image
 *     </sigvelo-button>
 *   </sigvelo-share>
 * </div>
 *
 * <script>
 *   const container = document.getElementById('share__file');
 *   const fileInput = container.querySelector('sigvelo-file-input');
 *   const share = container.querySelector('sigvelo-share');
 *
 *   // When a file is selected, try to share it
 *   fileInput.addEventListener('input', async (event) => {
 *     const file = event.target.files[0];
 *
 *     // Pass the selected file to the share component
 *     if (file) {
 *       share.files = [file];
 *     } else {
 *       share.files = [];
 *     }
 *   });
 * </script>
 * ```
 *
 * @example Disabling
 * Add the `disabled` attribute to disable the button and prevent sharing.
 *
 * ```html
 * <sigvelo-share
 *   label="Sigvelo"
 *   text="An awesome library for building on the Web."
 *   url="https://design-system.sigvelo.com/"
 *   disabled
 * ></sigvelo-share>
 * ```
 */
declare class SigveloShare extends SigveloElement {
  static styles: CSSResultGroup;
  private localize;
  private feedback;
  /**
   * A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually
   * provide it as a fallback value.
   */
  label: string;
  /** A string of text to be shared. */
  text: string;
  /** A URL to be shares. */
  url: string;
  /**
   * An array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects to be shared. Property only.
   */
  files: File[];
  /** Disables the button. */
  disabled: boolean;
  /** The placement of the feedback animation when falling back to copying. */
  feedbackPlacement: "top" | "right" | "bottom" | "left" | "hidden";
  updated(changedProperties: PropertyValues<this>): void;
  private handleClick;
  /** Shows copy feedback with an animation */
  private showFeedback;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-share": SigveloShare;
  }
}
//#endregion
export { SigveloShare as t };