import type { ComponentSize, RoundedSize } from '../../types';
import '../icon/icon';
/** Copy command component properties */
export type OreCopyCommandProps = {
    /** Border radius size */
    rounded?: RoundedSize;
    /** Component size */
    size?: ComponentSize;
    /** The command string to display and copy to clipboard */
    value?: string;
    /** Visual style variant */
    variant?: 'flat' | 'bordered' | 'ghost';
};
/** Copy command component events */
export type OreCopyCommandEvents = {
    /** Emitted when the command is successfully copied to the clipboard */
    copy: {
        value: string;
    };
};
/**
 * A styled, copy-to-clipboard command display component.
 * Shows a command string in a monospace code block with a copy button.
 * Clicking the component copies the value to the clipboard, shows a transient
 * check-mark confirmation, and emits a `copy` event.
 *
 * @element ore-copy-command
 *
 * @attr {string} value - The command string to display and copy
 * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
 * @attr {string} variant - Visual style: 'flat' | 'bordered' | 'ghost'
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 *
 * @fires copy - Emitted on successful clipboard write. detail: { value: string }
 *
 * @slot suffix - Optional controls appended after the copy button (e.g. a cycle button)
 *
 * @cssprop --copy-command-bg - Background color of the command block
 * @cssprop --copy-command-color - Text color of the command string
 * @cssprop --copy-command-border-color - Border color
 * @cssprop --copy-command-radius - Border radius (overrides the `rounded` attribute)
 * @cssprop --copy-command-padding - Inner padding of the command button
 * @cssprop --copy-command-font-size - Font size of the command string
 * @cssprop --copy-command-icon-color - Color of the copy/check icon
 * @cssprop --copy-command-hover-bg - Background on hover
 *
 * @part wrapper - Outer flex container
 * @part command - The copy button element
 * @part command-text - The `<code>` element displaying the command string
 * @part copy-icon - The icon wrapper span
 * @part suffix - Suffix slot container
 *
 * @example
 * ```html
 * <ore-copy-command value="npm install @vielzeug/ripple"></ore-copy-command>
 *
 * <ore-copy-command value="npx -y @vielzeug/codex" size="sm" variant="bordered"></ore-copy-command>
 *
 * <!-- With a suffix slot (e.g. a cycle button) -->
 * <ore-copy-command value="npm install @vielzeug/ripple">
 *   <button slot="suffix" type="button" aria-label="Next package">›</button>
 * </ore-copy-command>
 * ```
 */
export declare const COPY_COMMAND_TAG: "ore-copy-command";
//# sourceMappingURL=copy-command.d.ts.map