import "./icon-CTW4Gr4z.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/text-field/text-field.d.ts
/**
 * <sigvelo-text-field>
 *
 * @summary Allows users to input and edit text.
 * @tag sigvelo-text-field
 * @documentation https://design-system.sigvelo.com/docs/components/text-field
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-icon
 *
 * @slot label - The text field's label. For plain-text labels, you can use the `label` attribute instead.
 * @slot description - The text field's description. For plain-text descriptions, you can use the `description`
 *  attribute instead.
 * @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 text field loses focus. This event does not bubble.
 * @event sigvelo-change - Emitted when the user commits changes to the text field's value.
 * @event sigvelo-focus - Emitted when the text field receives focus. This event does not bubble.
 * @event sigvelo-input - Emitted when the text field receives input.
 *
 * @csspart label - The element that contains the text field's label.
 * @csspart description - The element that contains the text field's description.
 * @csspart visual-box - The element that wraps the internal text box.
 * @csspart text-box - The internal text box, an `<input>` element.
 * @csspart clear-button - The clear button, a `<button>` element.
 * @csspart password-toggle-button - The password toggle button, a `<button>` element.
 *
 * @cssstate disabled - Applied when the text field is disabled.
 * @cssstate blank - Applied when the text field has a blank value.
 * @cssstate focused - Applied when the text field has focus.
 * @cssstate user-valid - Applied when the text field is valid and the user has sufficiently interacted with it.
 * @cssstate user-invalid - Applied when the text field is invalid and the user has sufficiently interacted with it.
 *
 * @example Default
 * ```html
 * <sigvelo-text-field name="name" label="Name"></sigvelo-text-field>
 * ```
 *
 * @example Labels and descriptions
 * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the text field. If you want to provide HTML, use the `label` and `description` slots instead.
 *
 * ```html
 * <sigvelo-text-field name="name" label="Name">
 *   <span slot="description">
 *     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
 *   </span>
 * </sigvelo-text-field>
 * ```
 *
 * @example Providing an initial value
 * Use the `value` attribute to provide an initial value for the text field.
 *
 * ```html
 * <sigvelo-text-field name="name" label="Name" value="Meowy McGee"></sigvelo-text-field>
 * ```
 *
 * @example Changing the type
 * Text fields support more than just text. Use the `type` attribute to change the type of input they accept.
 *
 * ```html
 * <sigvelo-text-field type="color" label="Color" value="#7a7bbe"></sigvelo-text-field><br>
 * <sigvelo-text-field type="date" label="Date" value="1989-03-12"></sigvelo-text-field><br>
 * <sigvelo-text-field type="time" label="Time" value="12:00:00"></sigvelo-text-field><br>
 * <sigvelo-text-field type="number" label="Number" value="42" inputmode="numeric"></sigvelo-text-field><br>
 * <sigvelo-text-field type="password" label="Password" value="hunter2"></sigvelo-text-field>
 * ```
 *
 * @example Adding a placeholder
 * Use the `placeholder` attribute to show a placeholder in the text field when it's empty.
 *
 * ```html
 * <sigvelo-text-field
 *   type="email"
 *   label="Email"
 *   placeholder="you@example.com"
 * ></sigvelo-text-field>
 * ```
 *
 * @example Adding a clear button
 * To add a clear button to the text field, use the `with-clear` attribute. The `sigvelo-input` event will be emitted when the clear button is activated.
 *
 * ```html
 * <sigvelo-text-field
 *   name="name"
 *   label="Name"
 *   value="Meowy McGee"
 *   with-clear
 * ></sigvelo-text-field>
 * ```
 *
 * @example Start and end content
 * Use the `start` and `end` slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with `<sigvelo-icon>` and `<svg>` elements.
 *
 * ```html
 * <sigvelo-text-field name="search" label="Search">
 *   <sigvelo-icon slot="start" name="search"></sigvelo-icon>
 * </sigvelo-text-field>
 *
 * <br>
 *
 * <sigvelo-text-field type="email" name="email" label="Email">
 *   <sigvelo-icon slot="end" name="mail"></sigvelo-icon>
 * </sigvelo-text-field>
 *
 * <br>
 *
 * <sigvelo-text-field type="url" name="url" label="URL">
 *   <span slot="start">https://</span>
 * </sigvelo-text-field>
 * ```
 *
 * @example Autocomplete
 * Slot a `<datalist>` into the text field's default slot to show a list of autocomplete options. Unlike native `<input>` elements, there's no need to provide a `list` attribute.
 *
 * ```html
 * <sigvelo-text-field label="Browser" name="browser">
 *   <datalist>
 *     <option value="Chrome"></option>
 *     <option value="Firefox"></option>
 *     <option value="Safari"></option>
 *     <option value="Edge"></option>
 *     <option value="Opera"></option>
 *     <option value="Other"></option>
 *   </datalist>
 * </sigvelo-text-field>
 * ```
 *
 * @example Filled and unstyled text fields
 * Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the text field's variant.
 *
 * ```html
 * <sigvelo-text-field variant="normal" label="Normal text field" placeholder="Enter some text"></sigvelo-text-field><br>
 * <sigvelo-text-field variant="filled" label="Filled text field" placeholder="Enter some text"></sigvelo-text-field><br>
 * <sigvelo-text-field variant="unstyled" label="Unstyled text field" placeholder="Enter some text"></sigvelo-text-field>
 * ```
 *
 * @example Pill-shaped text fields
 * Text fields can be rendered with pill-shaped edges by adding the `pill` attribute.
 *
 * ```html
 * <sigvelo-text-field pill label="Pill-shaped"></sigvelo-text-field>
 * ```
 *
 * @example Changing the size
 * Use the `size` attribute to change the text field's size.
 *
 * ```html
 * <sigvelo-text-field size="xs" label="Extra small"></sigvelo-text-field><br>
 * <sigvelo-text-field size="sm" label="Small"></sigvelo-text-field><br>
 * <sigvelo-text-field size="md" label="Medium"></sigvelo-text-field><br>
 * <sigvelo-text-field size="lg" label="Large"></sigvelo-text-field><br>
 * <sigvelo-text-field size="xl" label="Extra large"></sigvelo-text-field>
 * ```
 *
 * @example Disabling
 * Use the `disabled` attribute to disable the text field.
 *
 * ```html
 * <sigvelo-text-field label="Disabled" disabled></sigvelo-text-field>
 * ```
 *
 * @example Showing labels on the side
 * With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the text field. You can control the width of the label by setting the `--label-width` custom property.
 *
 * ```html
 * <sigvelo-text-field
 *   class="sigvelo-side-label"
 *   style="--label-width: 8ch;"
 *   name="name"
 *   label="Name"
 *   description="What do people call you?"
 * ></sigvelo-text-field>
 * <br>
 * <sigvelo-text-field
 *   class="sigvelo-side-label"
 *   style="--label-width: 8ch;"
 *   type="email"
 *   name="email"
 *   label="Email"
 *   description="How can we get in touch?"
 * ></sigvelo-text-field>
 * ```
 *
 * @example Validation
 * A number of attributes can be used to enable validation using the Constraint Validation API. These include `required`, `pattern`, `minlength`, `maxlength`, `min`, `max`, and `step`. They work exactly like their native counterparts.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank">
 *   <sigvelo-text-field name="required" label="Required" required></sigvelo-text-field><br>
 *   <sigvelo-text-field name="minlength" label="Minimum length (enter at least five characters)" required minlength="5"></sigvelo-text-field><br>
 *   <sigvelo-text-field name="maxlength" label="Maximum length (enter no more than five characters)" required maxlength="5"></sigvelo-text-field><br>
 *   <sigvelo-text-field name="pattern" label="Pattern (enter three to five letters)" required pattern="[A-Za-z]{3,5}"></sigvelo-text-field><br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 * ```
 *
 * @example Using custom validation
 * Use the `setCustomValidity()` method to make the text field invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" id="text-field__custom-validation">
 *   <sigvelo-text-field
 *     name="name"
 *     label="Name"
 *     description="This field will be invalid until custom validation is removed"
 *   ></sigvelo-text-field>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 * </form>
 *
 * <script type="module">
 *   import { allDefined } from '/dist/sigvelo.js';
 *
 *   await allDefined();
 *
 *   const form = document.getElementById('text-field__custom-validation');
 *   const textField = form.querySelector('sigvelo-text-field');
 *
 *   textField.setCustomValidity('Not so fast, bubba!');
 * </script>
 * ```
 *
 * @example Styling validation
 * You can style valid and invalid text fields using the `:valid` and `:invalid` pseudo classes.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="text-field__validation-pseudo">
 *   <sigvelo-text-field
 *     name="name"
 *     label="Name"
 *     description="This field is required"
 *     required
 *   ></sigvelo-text-field>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .text-field__validation-pseudo {
 *     sigvelo-text-field:valid {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-text-field:invalid {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 *
 * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="text-field__validation-custom">
 *   <sigvelo-text-field
 *     name="name"
 *     label="Name"
 *     description="This field is required"
 *     required
 *   ></sigvelo-text-field>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .text-field__validation-custom {
 *     sigvelo-text-field:state(user-valid) {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-text-field:state(user-invalid) {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloTextField extends SigveloFormControlElement {
  static formAssociated: boolean;
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  private localize;
  protected get focusableAnchor(): HTMLInputElement;
  private defaultSlot;
  private textBox;
  isInvalid: boolean;
  hadUserInteraction: boolean;
  wasSubmitted: boolean;
  isPasswordVisible: boolean;
  /**
   * The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   */
  label: string;
  /**
   * The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   */
  description: string;
  /** The name of the text field. This will be submitted with the form as a name/value pair. */
  name: string;
  /** The text field's value. */
  value: string;
  /** A placeholder to show in the text field when it's blank. */
  placeholder: string;
  /** Disables the text field. */
  disabled: boolean;
  /** Makes the text field a read-only field. */
  readonly: boolean;
  /** Adds a clear button to the text field when it's not blank. */
  withClear: boolean;
  /** The type of text field to render. */
  variant: "normal" | "filled" | "unstyled";
  /** The text field's size. */
  size: "xs" | "sm" | "md" | "lg" | "xl";
  /** Draws the text field in a pill shape. */
  pill: boolean;
  /** The type of data the text field will accept. */
  type: "color" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
  /**
   * 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;
  /**
   * Makes the text field required. Form submission will not be allowed when this is set and the text field is blank.
   */
  required: boolean;
  /** A regular expression the value should match to be considered valid. */
  pattern: string;
  /** The minimum string length that will be considered valid. */
  minLength: number;
  /** The maximum string length that will be considered valid. */
  maxLength: number;
  /** The minimum value for date/time types. */
  min: number;
  /** The maximum value for date/time types. */
  max: number;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  step: number | "any";
  /** Turns autocapitalize on or off in supported browsers. */
  autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
  /**
   * Tells the browser how to autocomplete the text field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   */
  autocomplete: string;
  /** Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable. */
  autocorrect: boolean;
  /** Tells the browser to focus the text field when the page loads or a dialog is shown. */
  autofocus: boolean;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
  /**
   * Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   */
  inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
  /** Turns spell checking on or off in supported browsers. */
  spellcheck: boolean;
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  /** @internal Called when the form is reset. */
  formResetCallback(): void;
  private handleBlur;
  private handleChange;
  private handleClearClick;
  private handleFocus;
  private handleInput;
  private handleKeyDown;
  private handlePasswordToggleClick;
  private handleTextBoxButtonPointerDown;
  private handleVisualBoxPointerDown;
  /** Sets the form control's validity */
  private updateValidity;
  /** Looks for a slotted datalist, clones, and links it to the text field. */
  private syncDatalist;
  /** Sets focus to the text field. */
  focus(): void;
  /** Removes focus from the text field. */
  blur(): void;
  /** Selects all text in the text field. */
  select(): void;
  /** Sets the start and end positions of the current text selection in the text field. */
  setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
  /** Replaces a range of text in the text field with a new string. */
  setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void;
  /** For types that support a picker, such as color and date selectors, this will cause the picker to show. */
  showPicker(): void;
  /**
   * When a supported `type` is used, this method will decrease the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   */
  stepDown(): void;
  /**
   * When a supported `type` is used, this method will increase the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   */
  stepUp(): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-text-field": SigveloTextField;
  }
}
//#endregion
export { SigveloTextField as t };