import "./color-picker-5b7YZduP.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/color-input/color-input.d.ts
/**
 * <sigvelo-color-input>
 *
 * @summary Allows users to enter or select a color and submit it with a form.
 * @tag sigvelo-color-input
 * @documentation https://design-system.sigvelo.com/docs/components/color-input
 * @status stable
 * @since 1.0
 *
 * @dependency - sigvelo-color-picker
 *
 * @slot label - The color input's label. For plain-text labels, you can use the `label` attribute instead.
 * @slot description - The color input's description. For plain-text descriptions, you can use the `description`
 *  attribute instead.
 *
 * @event sigvelo-blur - Emitted when the color input loses focus. This event does not bubble.
 * @event sigvelo-change - Emitted when the user commits changes to the color input's value.
 * @event sigvelo-focus - Emitted when the color input receives focus. This event does not bubble.
 * @event sigvelo-input - Emitted when the color input receives input.
 *
 * @csspart label - The element that contains the color input's label.
 * @csspart description - The element that contains the color input'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.
 *
 * @cssproperty [--show-duration=50ms] - The duration of the show/hide animation.
 * @cssproperty [--preview-size=1.6em] - The size of the color preview.
 *
 * @cssstate disabled - Applied when the color input is disabled.
 * @cssstate blank - Applied when the color input has a blank value.
 * @cssstate focused - Applied when the color input has focus.
 * @cssstate open - Applied when the color picker is open.
 * @cssstate user-valid - Applied when the color input is valid and the user has sufficiently interacted with it.
 * @cssstate user-invalid - Applied when the color input is invalid and the user has sufficiently interacted with it.
 *
 * @example Default
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   description="The cats like violet, but any color works"
 *   name="color"
 *   value="#f0803a"
 *   swatches="
 *     #09090b; #71717a; #ef4444; #f97316;
 *     #f59e0b; #eab308; #84cc16; #22c55e;
 *     #10b981; #14b8a6; #06b6d4; #3b82f6;
 *     #6366f1; #a855f7; #d946ef; #ec4899
 *   "
 *   with-input
 *   with-alpha
 *   with-eye-dropper
 *   with-clear
 * ></sigvelo-color-input>
 * ```
 *
 * @example Labels and descriptions
 * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the color input. If you want to provide HTML, use the `label` and `description` slots instead.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   name="color"
 * >
 *   <span slot="description">
 *     For our cafe branding guidelines, <a href="https://example.com/" target="_blank">visit our style guide</a>.
 *   </span>
 * </sigvelo-color-input>
 * ```
 *
 * @example Providing an initial value
 * Use the `value` attribute to provide an initial value for the color input.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   value="#7578c5"
 * ></sigvelo-color-input>
 * ```
 *
 * @example Enabling alpha
 * Add the `with-alpha` attribute to allow users to adjust opacity. Hex colors will become the eight-value syntax, e.g. `#rrggbbaa`, and other formats will include alpha as well.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   value="#ce238088"
 *   with-alpha
 * ></sigvelo-color-input>
 * ```
 *
 * @example Adding a clear button
 * To add a clear button to the color input, use the `with-clear` attribute. The `sigvelo-input` event will be emitted when the clear button is activated.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   name="color"
 *   value="#21b8bc"
 *   with-clear
 * ></sigvelo-color-input>
 * ```
 *
 * @example Setting the format
 * Use the `format` attribute to set the format of the value. Valid options include `hex` (default), `rgb,` and `hsl`.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color (RGB)"
 *   value="rgb(255, 204, 0)"
 *   format="rgb"
 * ></sigvelo-color-input>
 * ```
 *
 * @example Filled and unstyled color inputs
 * Color inputs support multiple visual styles through the `variant` attribute.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Normal"
 *   variant="normal"
 *   value="#6366f1"
 * ></sigvelo-color-input>
 *
 * <br>
 *
 * <sigvelo-color-input
 *   label="Filled"
 *   variant="filled"
 *   value="#6366f1"
 * ></sigvelo-color-input>
 *
 * <br>
 *
 * <sigvelo-color-input
 *   label="Unstyled"
 *   variant="unstyled"
 *   value="#6366f1"
 * ></sigvelo-color-input>
 * ```
 *
 * @example Pill-shaped color inputs
 * Color inputs can be rendered with pill-shaped edges by adding the `pill` attribute.
 *
 * ```html
 * <sigvelo-color-input pill label="Pill-shaped"></sigvelo-color-input>
 * ```
 *
 * @example Sizes
 * Use the `size` attribute to change the color input's size.
 *
 * ```html
 * <sigvelo-color-input size="xs" label="Extra small"></sigvelo-color-input><br>
 * <sigvelo-color-input size="sm" label="Small"></sigvelo-color-input><br>
 * <sigvelo-color-input size="md" label="Medium"></sigvelo-color-input><br>
 * <sigvelo-color-input size="lg" label="Large"></sigvelo-color-input><br>
 * <sigvelo-color-input size="xl" label="Extra large"></sigvelo-color-input>
 * ```
 *
 * @example Disabling
 * Use the `disabled` attribute to disable the color input.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Disabled color input"
 *   disabled
 *   value="#6366f1"
 * ></sigvelo-color-input>
 * ```
 *
 * @example Showing swatches
 * Set the `swatches` attribute to one or more semicolon-delimited colors to show as preset swatches below the color picker. You can use any valid CSS color format including hex colors, RGB, HSL, named colors, and more. This is useful for providing users with access to recent colors or a predefined color palette.
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   swatches="
 *     #09090b; #71717a; #ef4444; #f97316;
 *     #f59e0b; #eab308; #84cc16; #22c55e;
 *     #10b981; #14b8a6; #06b6d4; #3b82f6;
 *     #6366f1; #a855f7; #d946ef; #ec4899
 *   "
 * ></sigvelo-color-input>
 * ```
 *
 * You can also mix different color formats in the swatches:
 *
 * ```html
 * <sigvelo-color-input
 *   label="Select a color"
 *   swatches="
 *     rgb(255 0 0);
 *     hsl(120, 100%, 50%);
 *     rgb(0 0 255 / 0.5);
 *     lightblue;
 *     #ff00ff
 *   "
 * ></sigvelo-color-input>
 * ```
 *
 * @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 color input. You can control the width of the label by setting the `--label-width` custom property.
 *
 * ```html
 * <sigvelo-color-input
 *   class="sigvelo-side-label"
 *   style="--label-width: 10ch;"
 *   name="color"
 *   label="Brand color"
 *   description="Make it pop"
 * ></sigvelo-color-input>
 * <br>
 * <sigvelo-color-input
 *   class="sigvelo-side-label"
 *   style="--label-width: 10ch;"
 *   name="color"
 *   label="Accent color"
 *   description="Complementary colors work well here"
 * ></sigvelo-color-input>
 * ```
 *
 * @example Validation
 * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission when the color input is missing a value.
 *
 * ```html
 * <form action="about:blank" target="_blank">
 *   <sigvelo-color-input
 *     name="color"
 *     label="Select a color"
 *     required
 *     style="margin-block-end: 1rem;"
 *   ></sigvelo-color-input>
 *   <sigvelo-button type="submit">Submit</sigvelo-button>
 * </form>
 * ```
 *
 * @example Using custom validation
 * Use the `setCustomValidity()` method to make the color input 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="color-input__custom">
 *   <sigvelo-color-input
 *     name="color"
 *     label="Select a color"
 *     description="This field will be invalid until custom validation is removed"
 *   ></sigvelo-color-input>
 *   <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('color-input__custom');
 *   const colorInput = form.querySelector('sigvelo-color-input');
 *
 *   colorInput.setCustomValidity('Please select a different color!');
 * </script>
 * ```
 *
 * @example Styling validation
 * You can style valid and invalid color inputs using the `:valid` and `:invalid` pseudo classes.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="field__validation-pseudo">
 *   <sigvelo-color-input
 *     name="color"
 *     label="Select a color"
 *     description="This field is required"
 *     required
 *   ></sigvelo-color-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .field__validation-pseudo {
 *     sigvelo-color-input:valid {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-color-input: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="field__validation-custom">
 *   <sigvelo-color-input
 *     name="color"
 *     label="Select a color"
 *     description="This field is required"
 *     required
 *   ></sigvelo-color-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .field__validation-custom {
 *     sigvelo-color-input:state(user-valid) {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-color-input:state(user-invalid) {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloColorInput extends SigveloFormControlElement {
  static formAssociated: boolean;
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  private cleanup;
  private localize;
  protected get focusableAnchor(): HTMLInputElement;
  private colorPicker;
  private textBox;
  private preview;
  private visualBox;
  isOpen: boolean;
  isInvalid: boolean;
  hadUserInteraction: boolean;
  wasSubmitted: boolean;
  /**
   * The color input's label. If you need to provide HTML in the label, use the `label` slot instead.
   */
  label: string;
  /**
   * The color input's description. If you need to provide HTML in the description, use the `description` slot instead.
   */
  description: string;
  /** The name of the color input. This will be submitted with the form as a name/value pair. */
  name: string;
  /** The color input's value. */
  value: string;
  /** A placeholder to show in the color input when it's blank. */
  placeholder: string;
  /** Disables the color input. */
  disabled: boolean;
  /** Makes the color input a read-only area. */
  readonly: boolean;
  /** Adds a clear button to the color input when it's not blank. */
  withClear: boolean;
  /** The type of color input to render. */
  variant: "normal" | "filled" | "unstyled";
  /** The color input's size. */
  size: "xs" | "sm" | "md" | "lg" | "xl";
  /** Draws the text field in a pill shape. */
  pill: boolean;
  /** The format to use for the color's value. */
  format: "hex" | "rgb" | "hsl";
  /**
   * One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
   * color picker.
   */
  swatches: string;
  /** Enables the alpha slider. */
  withAlpha: boolean;
  /**
   * Enables the eye dropper button. Only available in
   * [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
   */
  withEyeDropper: boolean;
  /**
   * The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
   * the preferred placement doesn't have enough room.
   */
  placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
  /** The distance of the dropdown menu from its trigger. */
  distance: number;
  /** The offset of the dropdown menu along its trigger. */
  offset: number;
  /**
   * 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 color input required. Form submission will not be allowed when this is set and the color input is blank.
   */
  required: boolean;
  /**
   * Tells the browser how to autocomplete the color input. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   */
  autocomplete: string;
  /** Tells the browser to focus the color input 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";
  updated(changedProperties: PropertyValues<this>): Promise<void>;
  /** @internal Called when the form is reset. */
  formResetCallback(): void;
  private handleBlur;
  private handleChange;
  private handleFocus;
  private handleClearClick;
  private handleColorPickerChange;
  private handleColorPickerInput;
  /** If focus is set outside of the component, close the menu. */
  private handleDocumentFocusIn;
  private handleDocumentKeyDown;
  /** Handles pointer down events when the color picker is open. */
  private handleDocumentPointerDown;
  private handleInput;
  private handleTextBoxButtonPointerDown;
  private handleTextBoxKeyDown;
  private handleVisualBoxPointerDown;
  /** Repositions the dropdown menu */
  private reposition;
  /** Sets the form control's validity */
  private updateValidity;
  /** Removes focus from the color input. */
  blur(): void;
  /** Sets focus to the color input. */
  focus(): void;
  /**
   * Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
   * and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
   * have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
   */
  getValueAs(format?: "hex" | "hex8" | "hsl" | "rgb"): string | import("@ctrl/tinycolor").Numberify<import("@ctrl/tinycolor").HSLA> | import("@ctrl/tinycolor").Numberify<import("@ctrl/tinycolor").RGBA>;
  /** Selects all text in the color input. */
  select(): void;
  /** Sets the start and end positions of the current text selection in the color input. */
  setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
  /** Replaces a range of text in the color input with a new string. */
  setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void;
  /** Shows the color picker. */
  showPicker(): Promise<void>;
  /** Hides the color picker. */
  hidePicker(): Promise<void>;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-color-input": SigveloColorInput;
  }
}
//#endregion
export { SigveloColorInput as t };