import { type Readable } from '@vielzeug/ripple';
import { type ChoiceChangeDetail } from '../../core';
import type { ComponentSize, ThemeColor } from '../../types';
export type CheckboxGroupContext = {
    color: Readable<ThemeColor | undefined>;
    disabled: Readable<boolean>;
    size: Readable<ComponentSize | undefined>;
    toggle: (value: string, originalEvent?: Event) => void;
    values: Readable<string[]>;
};
export declare const CHECKBOX_GROUP_CTX: import("@vielzeug/ore").InjectionKey<CheckboxGroupContext>;
export type OreCheckboxGroupProps = {
    /** Theme color — propagated to all child ore-checkbox elements */
    color?: ThemeColor;
    /** Disable all checkboxes in the group */
    disabled?: boolean;
    /** Error message shown below the group */
    error?: string;
    /** Helper text shown below the group */
    helper?: string;
    /** Legend / label for the fieldset. Required for accessibility. */
    label?: string;
    /** Form field name used during submission */
    name?: string;
    /** Layout direction of the checkbox options */
    orientation?: 'vertical' | 'horizontal';
    /** Mark the group as required */
    required?: boolean;
    /** Size — propagated to all child ore-checkbox elements */
    size?: ComponentSize;
    /** Comma-separated list of currently checked values */
    values?: string;
};
export type OreCheckboxGroupEvents = {
    change: ChoiceChangeDetail;
};
/**
 * A fieldset wrapper that groups `ore-checkbox` elements, provides shared
 * `color` and `size` via context, and manages multi-value selection state.
 *
 * @element ore-checkbox-group
 *
 * @attr {string} label - Legend text (required for a11y)
 * @attr {string} values - Comma-separated list of checked values
 * @attr {boolean} disabled - Disable all checkboxes in the group
 * @attr {string} error - Error message
 * @attr {string} helper - Helper text
 * @attr {string} name - Form field name
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
 * @attr {string} orientation - Layout: 'vertical' | 'horizontal'
 * @attr {boolean} required - Required field
 *
 * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }
 *
 * @slot - Place `ore-checkbox` elements here
 *
 * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')
 * @cssprop --checkbox-group-gap - Gap between checkbox items
 * @part items - Items container.
 * @example
 * ```html
 * <ore-checkbox-group name="fruits" label="Favourite fruits" required>
 *   <ore-checkbox value="apple">Apple</ore-checkbox>
 *   <ore-checkbox value="banana">Banana</ore-checkbox>
 *   <ore-checkbox value="cherry">Cherry</ore-checkbox>
 * </ore-checkbox-group>
 * <ore-checkbox-group name="options" orientation="horizontal" color="primary">
 *   <ore-checkbox value="a">Option A</ore-checkbox>
 *   <ore-checkbox value="b">Option B</ore-checkbox>
 * </ore-checkbox-group>
 * ```
 */
export declare const CHECKBOX_GROUP_TAG: "ore-checkbox-group";
//# sourceMappingURL=checkbox-group.d.ts.map