import { LitElement } from 'lit';
export interface ButtonGroupProps {
    label?: string;
    orientation?: 'horizontal' | 'vertical';
    variant?: 'connected' | 'spaced';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    selection?: 'none' | 'single' | 'multiple';
    value?: string;
    name?: string;
}
declare const ButtonGroup_base: (new (...args: any[]) => import("../../util/RovingTabindexMixin.js").RovingTabindexInterface) & (new (...args: any[]) => import("../../util/ComponentStatesMixin.js").ComponentStatesMixinInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
/**
 * A semantic container for grouping related buttons together.
 *
 * Supports connected (joined) and spaced layouts, horizontal and vertical
 * orientation, group-level size and disabled propagation, and optional
 * toggle/selection modes (single-select or multi-select).
 *
 * @element btu-button-group
 *
 * @fires {CustomEvent} btu-button-group-ready - Fired after first render and initialization
 * @fires {CustomEvent<{value: string}>} btu-button-group-change - Fired when selection changes (single/multiple modes only)
 * @fires {CustomEvent<{name: string | undefined}>} btu-icon-button-click - Bubbles from child btu-icon-button elements when clicked
 *
 * @slot - One or more `<button class="btu-button …">` or `<btu-icon-button>` elements to display
 *         in the group. The `connected` variant rounds the outer corners on the real `<button>`,
 *         so anchors styled as `.btu-button` slotted directly will not get rounded corners.
 *         Use `<button>` for grouped controls.
 * @slot end - Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right)
 *
 * @cssprop --button-group-gap - Space between buttons when variant="spaced" (default: spacing.sm)
 * @cssprop --button-group-border-radius - Corner radius of outer edges when variant="connected" (default: 0.5rem)
 * @cssprop --button-group-border-color - Internal divider color between connected buttons (default: gray-300)
 * @cssprop --button-group-selection-bg - Background of a toggled/selected child (default: child's --button-tint-subtle)
 * @cssprop --button-group-selection-color - Text/icon color of a toggled/selected child (default: child's --button-tint-strong)
 * @cssprop --button-group-shimmer-highlight - Highlight color of the selection shimmer effect (default: child's --button-tint-highlight)
 *
 * Reads the following CSS custom properties from each child button (set by the
 * button plugin per color variant — see tailwind-plugin-button.ts):
 *
 * @cssprop --button-tint-subtle - Subtle tint of the child button's color family (read-only here)
 * @cssprop --button-tint-strong - Strong tint of the child button's color family (read-only here)
 * @cssprop --button-tint-highlight - Highlight tint of the child button's color family (read-only here)
 *
 * @cssstate btu-connected - Applied when variant="connected", targetable via :state(btu-connected)
 * @cssstate btu-spaced - Applied when variant="spaced", targetable via :state(btu-spaced)
 * @cssstate btu-horizontal - Applied when orientation="horizontal", targetable via :state(btu-horizontal)
 * @cssstate btu-vertical - Applied when orientation="vertical", targetable via :state(btu-vertical)
 * @cssstate btu-disabled - Applied when the group is disabled, targetable via :state(btu-disabled)
 */
export default class ButtonGroup extends ButtonGroup_base {
    static get tagName(): string;
    /**
     * Accessible name for the group, announced by assistive devices via aria-label.
     * @attr
     */
    label: string;
    /**
     * Layout direction of the buttons.
     * @attr
     */
    orientation: 'horizontal' | 'vertical';
    /**
     * `connected` collapses shared borders for a joined appearance.
     * `spaced` renders buttons with a gap.
     * @attr
     */
    variant: 'connected' | 'spaced';
    /**
     * Propagates a uniform size to all child buttons.
     * @attr
     */
    size: 'sm' | 'md' | 'lg';
    /**
     * When true, disables all child buttons as a group.
     * @attr
     */
    disabled: boolean;
    /**
     * Enables toggle/selection behavior.
     * `single` allows one active button; `multiple` allows many.
     * @attr
     */
    selection: 'none' | 'single' | 'multiple';
    /**
     * Reflects the currently selected button value(s).
     * For `single`, the value of the active button.
     * For `multiple`, a comma-delimited list of active values.
     * @attr
     */
    value: string;
    /**
     * When set, creates hidden input(s) for native form participation.
     * @attr
     */
    name: string;
    /** @internal */
    private initialClasses;
    /** @internal */
    private boundHandleClick;
    /** @internal */
    private boundHandleKeyDown;
    /** @internal */
    _getRovingTargets(): HTMLElement[];
    connectedCallback(): void;
    disconnectedCallback(): void;
    createRenderRoot(): this;
    willUpdate(): void;
    firstUpdated(): void;
    updated(changedProperties: Map<string, unknown>): void;
    /** @internal Sync size, disabled, and selection on a direct child */
    private syncChild;
    /** @internal Set aria-pressed on the interactive button element */
    private syncSelection;
    /** @internal Re-sync all children */
    private syncAllChildren;
    /** @internal Set data-all-selected when every selectable button is pressed */
    private syncAllSelected;
    /** @internal Initialize roving tabindex: selected button gets tabindex=0, others -1 */
    private syncRovingTabindex;
    /** @internal Parsed list of currently selected values, filtering empty segments */
    private get selectedValues();
    /** @internal Resolve value: value attr → textContent fallback */
    private resolveButtonValue;
    /** @internal Resolve the value-holding element from a click target */
    private resolveGroupItem;
    /** @internal Create/update/remove hidden inputs */
    private syncHiddenInputs;
    /** @internal Update value and fire change event */
    private setSelection;
    /** @internal Handle click events for selection */
    private handleClick;
    /** @internal */
    private handleKeyDown;
    /** @internal Activate the currently focused button (single-select arrow nav) */
    private activateFocusedButton;
    /** @internal */
    private syncStates;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'btu-button-group': ButtonGroup;
    }
}
export {};
//# sourceMappingURL=ButtonGroup.d.ts.map