import "./icon-CTW4Gr4z.js";
import "./spinner-DIlC--PL.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/button/button.d.ts
/**
 * <sigvelo-button>
 *
 * @summary Allows users to navigate, submit forms, and perform other actions.
 * @tag sigvelo-button
 * @documentation https://design-system.sigvelo.com/docs/components/button
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-icon
 * @dependency sigvelo-spinner
 *
 * @slot - The button's label.
 * @slot start - An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
 * @slot end - An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
 *
 * @event sigvelo-blur - Emitted when the button loses focus. This event does not bubble.
 * @event sigvelo-long-press - Emitted when the button is pressed and held by tapping or with the mouse. You can look at
 *  `event.detail.originalEvent.type` to see the type of event that initiated the long press.
 * @event sigvelo-focus - Emitted when the button receives focus. This event does not bubble.
 *
 * @csspart button - The internal `<button>` element. Other than `width`, this is where most custom styles should be
 *  applied.
 * @csspart caret - The caret icon, a `<sigvelo-icon>` element. Only present with the `with-caret` attribute.
 * @csspart caret__svg - The caret icon's `<svg>` part.
 * @csspart spinner - The loading indicator, a `<sigvelo-spinner>` element. Only present with the `loading` attribute.
 * @csspart toggle-indicator - When the button is a toggle button, this is the indicator that shows the current state.
 * @cssstate disabled - Applied when the button is disabled.
 * @cssstate focused - Applied when the button has focus.
 * @cssstate loading - Applied when a toggle button is loading.
 * @cssstate toggled - Applied when a toggle button is activated.
 *
 * @example Variants
 * Set the `color` attribute to `neutral`, `primary`, or `destructive` to change the button's color.
 *
 * ```html
 * <sigvelo-button color="neutral">
 *   Neutral
 * </sigvelo-button>
 *
 * <sigvelo-button color="primary">
 *   Primary
 * </sigvelo-button>
 *
 * <sigvelo-button color="destructive">
 *   Destructive
 * </sigvelo-button>
 * ```
 *
 * **Note:** There is no `success` button by design. Use the `primary` color for success actions.
 *
 * @example Start & end icons
 * Use the `start` and `end` slots to add icons. For best results, use a `<sigvelo-icon>` or an `<svg>` element.
 *
 * ```html
 * <sigvelo-button>
 *   <sigvelo-icon slot="start" name="settings"></sigvelo-icon>
 *   Settings
 * </sigvelo-button>
 *
 * <sigvelo-button>
 *   Favorite
 *   <sigvelo-icon slot="end" name="heart"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button>
 *   <sigvelo-icon slot="start" name="link"></sigvelo-icon>
 *   Open
 *   <sigvelo-icon slot="end" name="external-link"></sigvelo-icon>
 * </sigvelo-button>
 * ```
 *
 * @example Link buttons
 * Any button can be rendered as a link by setting the `href` attribute. This is useful to allow buttons to act as navigation. When `href` is present, other link options such as `download`, `rel`, and `target` also become available.
 *
 * ```html
 * <sigvelo-button href="https://example.com/" target="_blank" rel="noreferrer noopener">
 *   I'm secretly a link
 * </sigvelo-button>
 *
 * <sigvelo-button href="/assets/images/logo-light.svg" download>
 *   Download the logo
 * </sigvelo-button>
 * ```
 *
 * **Note:** Link buttons support `disabled`; `loading`, toggle state, and form actions apply only to buttons.
 *
 * @example Changing the width
 * To change a button's width, use the CSS `width` property.
 *
 * ```html
 * <sigvelo-button style="width: 100%">
 *   I'm much longer now
 * </sigvelo-button>
 * ```
 *
 * @example Changing the size
 * Use the `size` attribute to change the button's size. Available sizes include `xs`, `sm`, `md`, `lg`, and `xl`, with the default being `sm`.
 *
 * ```html
 * <sigvelo-button size="xs">Extra small</sigvelo-button>
 * <sigvelo-button size="sm">Small</sigvelo-button>
 * <sigvelo-button size="md">Medium</sigvelo-button>
 * <sigvelo-button size="lg">Large</sigvelo-button>
 * <sigvelo-button size="xl">Extra large</sigvelo-button>
 * ```
 *
 * @example Outline buttons
 * Set the `variant` attribute to `outline` to draw outlined buttons.
 *
 * ```html
 * <sigvelo-button variant="outline" color="neutral">
 *   Neutral
 * </sigvelo-button>
 *
 * <sigvelo-button variant="outline" color="primary">
 *   Primary
 * </sigvelo-button>
 *
 * <sigvelo-button variant="outline" color="destructive">
 *   Destructive
 * </sigvelo-button>
 * ```
 *
 * Set `variant="surface"` for a raised neutral action surface.
 *
 * ```html
 * <sigvelo-button variant="surface">Open details</sigvelo-button>
 * ```
 *
 * @example Text buttons
 * Set the `variant` attribute to `ghost` to draw ghost buttons. Ghost buttons share the same size and padding as normal buttons, but don't have a background.
 *
 * ```html
 * <sigvelo-button variant="ghost">
 *   I'm text
 * </sigvelo-button>
 * ```
 *
 * @example Pill-shaped buttons
 * Buttons can be rendered with pill-shaped edges by adding the `pill` attribute.
 *
 * ```html
 * <sigvelo-button pill color="neutral">
 *   Neutral
 * </sigvelo-button>
 *
 * <sigvelo-button pill color="primary">
 *   Primary
 * </sigvelo-button>
 *
 * <sigvelo-button pill color="destructive">
 *   Destructive
 * </sigvelo-button>
 * ```
 *
 * @example Icon buttons
 * To create an icon button, place an icon into the button's default slot and set the `icon-label` attribute to an appropriate label. The label won't be visible, but it will be available to assistive devices.
 *
 * ```html
 * <sigvelo-button icon-label="Accept" color="primary">
 *   <sigvelo-icon name="check"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button icon-label="Reload">
 *   <sigvelo-icon name="refresh"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button icon-label="Delete" color="destructive">
 *   <sigvelo-icon name="trash"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button icon-label="Close" variant="ghost">
 *   <sigvelo-icon name="x"></sigvelo-icon>
 * </sigvelo-button>
 * ```
 *
 * @example Toggle buttons
 * Create a toggle button by adding the `toggle="off"` attribute. To make it active by default, use `toggle="on"` instead. An indicator is shown to make it obvious when the toggle is selected.
 *
 * ```html
 * <sigvelo-button color="neutral" toggle="off" icon-label="Filter">
 *   <sigvelo-icon name="filter"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button color="primary" toggle="off" icon-label="Alarm">
 *   <sigvelo-icon name="bell"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button color="destructive" toggle="off" icon-label="Record">
 *   <sigvelo-icon name="microphone"></sigvelo-icon>
 * </sigvelo-button>
 *
 * <sigvelo-button variant="ghost" toggle="off" icon-label="Mute">
 *   <sigvelo-icon name="volume-3"></sigvelo-icon>
 * </sigvelo-button>
 * ```
 *
 * **Warning:** Toggle buttons cannot be used with link buttons or submit buttons.
 *
 * @example Loading buttons
 * To show the button in a loading state, add the `loading` attribute. When a button is loading, it is effectively disabled and `click` events will not be emitted.
 *
 * ```html
 * <sigvelo-button loading>
 *   I'm loading
 * </sigvelo-button>
 * ```
 *
 * @example Disabling
 * To disable a button, add the `disabled` attribute. When a button is disabled, the `click` event will not be emitted.
 *
 * ```html
 * <sigvelo-button disabled>Regular button</sigvelo-button>
 * <sigvelo-button href="https://example.com/" disabled>Link button</sigvelo-button>
 * ```
 *
 * @example Adding a dropdown caret
 * A caret can be shown to indicate the button opens a dropdown menu by adding the `with-caret` attribute.
 *
 * ```html
 * <sigvelo-button with-caret>Dropdown</sigvelo-button>
 * ```
 *
 * @example Listening for long press
 * You can detect long presses by listening to the `sigvelo-long-press` event. The event is dispatched when the button is clicked or tapped and held for 700 milliseconds.
 *
 * You can determine if the initiating event was a click (`pointer`) or tap (`touch`) by looking at `event.detail.type`. You can also look at `event.detail.originalEvent` to get the coordinates and other details.
 *
 * ```html
 * <sigvelo-button id="button__long-press">Press and hold</sigvelo-button>
 *
 * <script>
 *   const button = document.getElementById('button__long-press');
 *
 *   button.addEventListener('sigvelo-long-press', async event => {
 *     // Log the coordinates and the type of event that initiated the
 *     // long press, i.e. pointer (mouse) or touch (tap)
 *     const type = event.detail.type;
 *     const { clientX, clientY } = event.detail.originalEvent;
 *
 *     console.log(`${type} at ${parseInt(clientX)}×${parseInt(clientY)}`);
 *
 *     // Animate the button
 *     button.animate([
 *       { scale: 1, offset: 0 },
 *       { scale: 1.2, offset: 0.1 },
 *       { scale: 1, offset: 1 }
 *     ], {
 *       duration: 500,
 *       easing: 'linear'
 *     });
 *   });
 * </script>
 * ```
 */
declare class SigveloButton extends SigveloFormControlElement {
  static formAssociated: boolean;
  static shadowRootOptions: {
    delegatesFocus: boolean;
    clonable?: boolean;
    customElementRegistry?: CustomElementRegistry | null;
    mode: ShadowRootMode;
    serializable?: boolean;
    slotAssignment?: SlotAssignmentMode;
  };
  static styles: CSSResultGroup;
  protected internals: ElementInternals;
  private longPress;
  protected get focusableAnchor(): HTMLElement;
  /** Determines the button's variant. */
  variant: "normal" | "surface" | "outline" | "ghost" | "link";
  /** The semantic color intent of the button. */
  color: "neutral" | "primary" | "destructive";
  /** Disables the button. */
  disabled: boolean;
  /** Draws the button in a loading state. */
  loading: boolean;
  /**
   * Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
   * Cannot be used with links buttons or submit buttons.
   */
  toggle?: "on" | "off";
  /** The button's size. */
  size: "xs" | "sm" | "md" | "lg" | "xl";
  /**
   * To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
   * label. The label won't be visible, but it will be available to assistive devices.
   */
  iconLabel: string;
  /** Draws the button in a pill shape. */
  pill: boolean;
  /** Determines the button's type. */
  type: "button" | "submit" | "reset";
  /** The name to submit when the button is used to submit the form. */
  name: string;
  /** The value to submit when the button is used to submit the form. */
  value: string;
  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
  withCaret: boolean;
  /**
   * Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
   * set, form attributes and features will not work.
   */
  href: string;
  /** Opens the link in the specified target. Only works with link buttons. */
  target: "_blank" | "_parent" | "_self" | "_top" | undefined;
  /**
   * Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
   * probably set this to `noreferrer noopener`.
   */
  rel?: string;
  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons. */
  download?: string;
  /**
   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   */
  form: string;
  /** Overrides the containing form's `action` attribute. */
  formAction: string | undefined;
  /** Overrides the containing form's `enctype` attribute. */
  formEnctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
  /** Overrides the containing form's `method` attribute. */
  formMethod: "post" | "get" | undefined;
  /** Overrides the containing form's `novalidate` attribute. */
  formNoValidate: boolean | undefined;
  /**
   * Overrides the containing form's `target` attribute.
   *
   * `string & {}` keeps the four browsing-context keywords in autocomplete
   * while still accepting an arbitrary frame name; a bare `| string` would
   * absorb the literals and offer no suggestions at all.
   */
  formTarget: "_self" | "_blank" | "_parent" | "_top" | (string & {}) | undefined;
  connectedCallback(): void;
  disconnectedCallback(): void;
  formDisabledCallback(): void;
  private syncLongPress;
  updated(changedProperties: PropertyValues<this>): void;
  private handleBlur;
  private handleFocus;
  private handleClick;
  render(): import("lit-html").TemplateResult;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-button": SigveloButton;
  }
}
//#endregion
export { SigveloButton as t };