import { CustomElement } from "../../internal/custom-element.js";
import { Constructor } from "../../internal/utils/dedupe-mixin.js";
import { FormAssociated } from "../../internal/behaviors/form-associated.js";
import { OdxOption } from "../list-box/option.js";
import { PropertyValues, TemplateResult } from "lit";
import { OdxIconName } from "@odx/icons";
declare global {
  interface HTMLElementTagNameMap {
    'odx-spin-box': OdxSpinBox;
  }
}
type SpinBoxAlignment = (typeof SpinBoxAlignment)[keyof typeof SpinBoxAlignment];
declare const SpinBoxAlignment: {
  readonly CENTER: "center";
  readonly END: "end";
};
type SpinBoxSize = (typeof SpinBoxSize)[keyof typeof SpinBoxSize];
declare const SpinBoxSize: {
  readonly SM: "sm";
  readonly MD: "md";
  readonly LG: "lg";
};
type SpinBoxVariant = (typeof SpinBoxVariant)[keyof typeof SpinBoxVariant];
declare const SpinBoxVariant: {
  readonly NEUTRAL: "neutral";
  readonly GHOST: "ghost";
};
declare const OdxSpinBox_base: Constructor<FormAssociated> & typeof CustomElement;
/**
 * @summary A spin box component that allows users to select a value from a list of options by clicking on the previous and next buttons or by using the keyboard.
 *
 * @event change - Fired when the selected value changes.
 */
declare class OdxSpinBox extends OdxSpinBox_base {
  #private;
  static tagName: string;
  static styles: import("lit").CSSResult[];
  alignment: SpinBoxAlignment;
  interactive: boolean;
  iconPrevious: OdxIconName;
  iconNext: OdxIconName;
  size: SpinBoxSize;
  variant: SpinBoxVariant;
  value: string;
  loop: boolean;
  get selectedIndex(): number;
  get options(): OdxOption[];
  get selectedOption(): OdxOption | null;
  constructor();
  first(): void;
  last(): void;
  next(): void;
  previous(): void;
  click(): void;
  protected firstUpdated(props: PropertyValues<this>): void;
  protected updated(props: PropertyValues<this>): void;
  protected render(): TemplateResult;
}
export { OdxSpinBox, SpinBoxAlignment, SpinBoxSize, SpinBoxVariant };