import type { OverlayOpenChangeDetail } from '../../core';
import type { SelectableFieldProps } from '../../shared';
import type { VisualVariant } from '../../types';
import '../../feedback/chip/chip';
import '../../content/icon/icon';
import '../input/input';
export type OreSelectOptionInput = {
    disabled?: boolean;
    group?: string;
    label?: string;
    value: string;
};
/** Select component properties */
export type OreSelectEvents = {
    change: Event;
    input: Event;
    'open-change': OverlayOpenChangeDetail;
};
export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'frost'>> & {
    /** Show loading state in dropdown */
    loading?: boolean;
    /** Allow selecting multiple options */
    multiple?: boolean;
    /** JS options array (alternative to slotted <option> elements) */
    options?: OreSelectOptionInput[];
    /** Mark the field as required */
    required?: boolean;
};
/**
 * A fully custom form-associated select dropdown with keyboard navigation and ARIA support.
 * Reads `<option>` and `<optgroup>` children from the default slot.
 *
 * @element ore-select
 *
 * @attr {string} label - Label text
 * @attr {string} label-placement - 'inset' | 'outside'
 * @attr {string} value - Current selected value(s) (comma-separated for multiple)
 * @attr {string} placeholder - Placeholder when no option selected
 * @attr {string} name - Form field name
 * @attr {boolean} multiple - Enable multi-select
 * @attr {boolean} disabled - Disable the select
 * @attr {boolean} required - Required field
 * @attr {string} helper - Helper text below the select
 * @attr {string} error - Error message
 * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'
 * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 * @attr {boolean} fullwidth - Expand to full width
 *
 * @fires input - Fired when selection changes.
 * @fires change - Fired when selection changes.
 * @fires open-change - Fired when the dropdown state changes. detail: { open, reason }
 *
 * @slot - `<option>` and `<optgroup>` elements
 *
 * @cssprop --select-bg - Background
 * @cssprop --select-border-color - Border color
 * @cssprop --select-radius - Border radius
 * @cssprop --select-padding - Padding
 * @cssprop --select-font-size - Font size
 * @cssprop --select-placeholder-color - Placeholder text color
 *
 * @part trigger - The `ore-input` trigger element that opens the dropdown.
 * @part dropdown - The dropdown listbox panel container.
 *
 * @example
 * ```html
 * <ore-select label="Role" value="admin">
 *   <option value="admin">Administrator</option>
 *   <option value="editor">Editor</option>
 *   <option value="viewer">Viewer</option>
 * </ore-select>
 *
 * <ore-select label="Tags" multiple color="primary">
 *   <optgroup label="Frontend">
 *     <option value="react">React</option>
 *     <option value="vue">Vue</option>
 *   </optgroup>
 *   <optgroup label="Backend">
 *     <option value="node">Node.js</option>
 *   </optgroup>
 * </ore-select>
 * ```
 */
export declare const SELECT_TAG: "ore-select";
//# sourceMappingURL=select.d.ts.map