import { DDSElement } from "../../base/index.js";
/**
 * The input group component serves as a wrapper for an input control component (full list below), providing additional elements such as label text, helper text, or a counter.
 * It enhances the user experience by associating supplementary information or functionality directly with the input field.
 * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
 *
 * Hierarchies:
 * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
 * - `daikin-input-group` > `daikin-combobox`
 * - `daikin-input-group` > `daikin-date-picker`
 * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
 * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
 * - `daikin-input-group` > `daikin-select`
 * - `daikin-input-group` > `daikin-text-area`
 * - `daikin-input-group` > `daikin-text-field`
 * - `daikin-input-group` > `daikin-time-picker`
 *
 * @slot - A slot for an input component. See **Hierarchies** for supported components.
 *
 * @example
 *
 * ```js
 * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
 * <!-- Import the following as necessary. -->
 * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
 * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
 * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
 * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
 * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
 * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
 * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
 * import "@daikin-oss/design-system-web-components/components/radio/index.js";
 * import "@daikin-oss/design-system-web-components/components/select/index.js";
 * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
 * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
 * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
 * ```
 *
 * With Checkbox Group:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-checkbox-group>
 *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
 *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
 *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
 *   </daikin-checkbox-group>
 * </daikin-input-group>
 * ```
 *
 * With Combobox:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-combobox></daikin-combobox>
 * </daikin-input-group>
 *
 * <script>
 *   const combobox = document.querySelector("daikin-combobox");
 *   combobox.items = ["Apple", "Banana", "Cherry"];
 * </script>
 * ```
 *
 * With Date Picker:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-date-picker></daikin-date-picker>
 * </daikin-input-group>
 * ```
 *
 * With Dropdown:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-dropdown>
 *     <daikin-dropdown-item value="value1">
 *       Dropdown item 1
 *     </daikin-dropdown-item>
 *     <daikin-dropdown-item value="value2">
 *       Dropdown item 2
 *     </daikin-dropdown-item>
 *     <daikin-dropdown-item value="value3">
 *       Dropdown item 3
 *     </daikin-dropdown-item>
 *   </daikin-dropdown>
 * </daikin-input-group>
 * ```
 *
 * With Radio Group:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-radio-group>
 *     <daikin-radio value="value1">Radio option 1</daikin-radio>
 *     <daikin-radio value="value2">Radio option 2</daikin-radio>
 *     <daikin-radio value="value3">Radio option 3</daikin-radio>
 *   </daikin-radio-group>
 * </daikin-input-group>
 * ```
 *
 * With Select:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-select>
 *     <select name="select">
 *       <option value="value1">Option 1</option>
 *       <option value="value2">Option 2</option>
 *       <option value="value3">Option 3</option>
 *     </select>
 *   </daikin-select>
 * </daikin-input-group>
 * ```
 *
 * With Text Field:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-text-field value="Content of Text Field"></daikin-text-field>
 * </daikin-input-group>
 * ```
 *
 * With TextArea:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
 * </daikin-input-group>
 * ```
 *
 * With Time Picker:
 *
 * ```html
 * <daikin-input-group>
 *   <daikin-time-picker></daikin-time-picker>
 * </daikin-input-group>
 * ```
 */
export declare class DaikinInputGroup extends DDSElement {
    static readonly styles: import('lit').CSSResult;
    /**
     * Label text displayed at the top of the field.
     */
    label: string | null;
    /**
     * Helper text displayed at the top of the field.
     * If `error` is specified and `disabled` is `false`, that takes precedence and helper text is not displayed.
     */
    helper: string | null;
    /**
     * Text indicating that the field is required.
     * If a non-empty string is set,
     * - the text will be displayed in red to the right of the label, and
     * - the `required` attribute will be set for the input control in the slot.
     * Ignored if `disabled` is `true`.
     */
    required: string | null;
    /**
     * Error text displayed at the top of the field.
     * Ignored if `disabled` is `true`.
     * Reflected in presence of `error` attribute of the input control in the slot.
     */
    error: string | null;
    /**
     * Whether the field is disabled.
     * Reflected in `disabled` attribute of the input control in the slot.
     */
    disabled: boolean;
    /**
     * The maximum number of characters that can be input into the text area.
     * If set, a counter will be displayed at the bottom of the text area.
     * Users can enter more characters than the limit, but in that case the counter will turn red and an error message will be displayed (if specified) to indicate that the limit has been exceeded.
     */
    textareaMaxCount: number | null;
    /**
     * An error message displayed when the number of characters in the text area exceeds the limit (optional).
     * When the number of characters in the text area exceeds the limit, this is displayed below the label by overriding `helper` and `error`.
     * Only used when a text area is assigned to a slot and `textareaMaxCount` is set.
     */
    textareaLimitExceedError: string | null;
    private readonly _textareas;
    private readonly _controls;
    private _textareaCount;
    get textareaLimitExceeded(): boolean;
    private _handleSlotChange;
    private _handleInput;
    private _reflectSlotProperties;
    render(): import('lit-html').TemplateResult<1>;
    updated(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "daikin-input-group": DaikinInputGroup;
    }
}
export default DaikinInputGroup;