import type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';
import '../../content/icon/icon';
/** Chip component properties */
type ChipBaseProps = {
    /** Theme color */
    color?: ThemeColor;
    /** Disable interactions */
    disabled?: boolean;
    /** Accessible label (required for icon-only chips) */
    label?: string;
    /** Border radius override */
    rounded?: RoundedSize | '';
    /** Component size */
    size?: ComponentSize;
    /** Value associated with this chip — included in emitted event detail */
    value?: string;
    /** Visual style variant */
    variant?: Exclude<VisualVariant, 'text' | 'frost'>;
};
type OreChipMode = 'static' | 'removable' | 'selectable' | 'action';
/** Read-only presentation chip */
type StaticChipProps = {
    mode?: Extract<OreChipMode, 'static'>;
};
/** Removable chip mode */
type RemovableChipProps = {
    mode: Extract<OreChipMode, 'removable'>;
};
/** Selectable chip mode */
type SelectableChipProps = {
    /** Controlled checked state for `mode="selectable"` */
    checked?: boolean | undefined;
    /** Initial checked state for uncontrolled `mode="selectable"` */
    'default-checked'?: boolean;
    mode: Extract<OreChipMode, 'selectable'>;
};
/** Action chip mode — behaves like a button, fires a click event without maintaining state */
type ActionChipProps = {
    mode: Extract<OreChipMode, 'action'>;
};
export type OreChipEvents = {
    change: {
        checked: boolean;
        originalEvent: Event;
        value: string | undefined;
    };
    click: {
        originalEvent: MouseEvent;
        value: string | undefined;
    };
    remove: {
        originalEvent: MouseEvent;
        value: string | undefined;
    };
};
export type OreChipProps = ChipBaseProps & (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);
/**
 * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.
 * Commonly used to represent tags, filters, or selected options in a multiselect field.
 *
 * @element ore-chip
 *
 * @attr {string}  label     - Accessible label (required for icon-only chips)
 * @attr {string}  color     - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string}  variant   - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
 * @attr {string}  size      - Component size: 'sm' | 'md' | 'lg'
 * @attr {string}  rounded   - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 * @attr {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'
 * @attr {boolean} disabled  - Disable the chip
 * @attr {string}  value     - Value included in emitted event detail
 * @attr {boolean} checked   - Controlled checked state for selectable chips
 * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips
 *
 * @fires remove - Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }
 * @fires change - Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }
 * @fires click  - Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }
 *
 * @slot         - Chip label text
 * @slot icon    - Leading icon or decoration
 *
 * @cssprop --chip-bg              - Background color
 * @cssprop --chip-color           - Text color
 * @cssprop --chip-border-color    - Border color
 * @cssprop --chip-radius          - Border radius
 * @cssprop --chip-font-size       - Font size
 * @cssprop --chip-font-weight     - Font weight
 * @cssprop --chip-padding-x       - Horizontal padding
 * @cssprop --chip-padding-y       - Vertical padding
 * @cssprop --chip-gap             - Gap between icon, label and remove button
 * @cssprop --chip-hover-bg        - Background on hover (interactive modes)
 * @cssprop --chip-hover-color     - Text color on hover (interactive modes)
 * @cssprop --chip-hover-border-color - Border color on hover (interactive modes)
 * @cssprop --chip-active-bg       - Background when pressed (interactive modes)
 * @cssprop --chip-active-color    - Text color when pressed (interactive modes)
 * @cssprop --chip-remove-bg       - Remove button background (bordered/outline variants)
 * @cssprop --chip-remove-color    - Remove button icon color (bordered/outline variants)
 * @cssprop --chip-remove-hover-bg - Remove button background on hover
 *
 * @part remove-btn - Remove action button.
 * @part chip-btn - Shadow part for the `chip-btn` element.
 * @part chip - Shadow part for the `chip` element.
 * @example
 * ```html
 * <!-- Static chip (read-only) -->
 * <ore-chip color="primary">Design</ore-chip>
 *
 * <!-- Removable chip -->
 * <ore-chip color="success" variant="flat" mode="removable" value="ts">
 *   TypeScript
 * </ore-chip>
 *
 * <!-- Selectable chip (controlled) -->
 * <ore-chip color="info" variant="flat" mode="selectable" checked value="ui">
 *   UI
 * </ore-chip>
 *
 * <!-- Selectable chip (uncontrolled) -->
 * <ore-chip color="info" variant="flat" mode="selectable" default-checked value="ui">
 *   UI
 * </ore-chip>
 *
 * <!-- Action chip (acts like a button) -->
 * <ore-chip color="warning" mode="action" value="add">
 *   <svg slot="icon" ...></svg>
 *   Add Item
 * </ore-chip>
 *
 * <!-- Icon-only chip -->
 * <ore-chip color="error" mode="action" label="Delete">
 *   <svg slot="icon" ...></svg>
 * </ore-chip>
 * ```
 */
export declare const CHIP_TAG: "ore-chip";
export {};
//# sourceMappingURL=chip.d.ts.map