import type { Readable } from '@vielzeug/ripple';
import type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';
import type { ButtonVariant } from '../button/button';
/** Button group properties */
export type OreButtonGroupProps = {
    /** Join buttons together into a single unit */
    attached?: boolean;
    /** Theme color tint for all child buttons */
    color?: ThemeColor;
    /** Group children span full width */
    fullwidth?: boolean;
    /** Label for screen readers */
    label?: string;
    /** Layout direction */
    orientation?: 'horizontal' | 'vertical';
    /** Corner radius of the group container (and its attached-mode end buttons) */
    rounded?: RoundedSize | '';
    /** Shared size for all child buttons */
    size?: ComponentSize;
    /** Shared visual variant for all child buttons */
    variant?: ButtonVariant;
};
/** Shared context propagated from ore-button-group to child ore-button elements */
export type ButtonGroupContext = {
    color: Readable<ThemeColor | undefined>;
    size: Readable<ComponentSize | undefined>;
    variant: Readable<ButtonVariant | undefined>;
};
export declare const BUTTON_GROUP_CTX: import("@vielzeug/ore").InjectionKey<ButtonGroupContext | undefined>;
/**
 * A container for grouping related buttons.
 * Child `ore-button` components automatically inherit the group's color, size, and variant.
 *
 * @element ore-button-group
 *
 * @attr {boolean} attached - Join buttons together into a unit
 * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {boolean} fullwidth - Group spans full width
 * @attr {string} label - Accessible label
 * @attr {string} orientation - 'horizontal' | 'vertical'
 * @attr {string} rounded - Corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute defaults to 'full')
 * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'
 * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'
 *
 * @slot - Place ore-button elements here
 *
 * @cssprop --group-gap - Gap between buttons (non-attached mode)
 * @cssprop --group-radius - Border radius of the group container, defaults to the `rounded` attribute's token
 * @cssprop --button-radius - Passed through to child buttons to control corner radius
 * @cssprop --button-border-start - Passed through to suppress start borders in attached mode
 * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode
 * @part group - Group container.
 * @example
 * ```html
 * <ore-button-group attached rounded="full">
 *   <ore-button variant="solid" color="primary">Save</ore-button>
 *   <ore-button variant="solid" color="primary">Save &amp; Continue</ore-button>
 * </ore-button-group>
 * <ore-button-group orientation="vertical" size="sm">
 *   <ore-button>Top</ore-button>
 *   <ore-button>Middle</ore-button>
 *   <ore-button>Bottom</ore-button>
 * </ore-button-group>
 * ```
 */
export declare const BUTTON_GROUP_TAG: "ore-button-group";
//# sourceMappingURL=button-group.d.ts.map