import { Directive } from '@alwatr/directive';
import { type BindingValue } from './main.js';
/**
 * A declarative DOM directive that binds CSS custom properties (variables) to view model properties.
 *
 * Syntax: `bind_css_var="--var-name: namespace.propertyName; --another-var: namespace.anotherProperty"`
 *
 * Supports binding multiple CSS variables on the same element separated by semicolons (`;`).
 *
 * Behavior:
 * - `null` / `undefined` value: Removes the CSS variable from the element's inline style.
 * - Any other type: Coerced via `String(value)` and set as the CSS variable's value on the element's style.
 *
 * Includes a redundant write guard (via `lastValues_`) that skips calls to the DOM if the property value hasn't changed.
 * Supports deferred viewport initialization if the `lazy_bind` attribute is present on the element.
 *
 * @example
 * ```html
 * <!-- Binds '--player-progress' to 'player.progress' -->
 * <div bind_css_var="--player-progress: player.progress"></div>
 *
 * <!-- Binds multiple CSS variables -->
 * <div bind_css_var="--color: theme.primaryColor; --font-size: theme.fontSize"></div>
 *
 * <!-- Lazy CSS variable binding -->
 * <div bind_css_var="--opacity: ui.opacity" lazy_bind></div>
 * ```
 */
export declare class BindCssVarDirective extends Directive {
    /**
     * Attribute flag used to defer binding initialization until the element enters the viewport.
     * If `lazy_bind` attribute exists, this is non-null.
     */
    protected accessor lazyBinding_: null | string;
    /**
     * Initializes the directive.
     * Checks if lazy binding is enabled via `lazy_bind`.
     * If yes, delegates the initialization to `lazyInit_`; otherwise, initializes immediately.
     */
    protected init_(): void;
    /**
     * Cache of the last applied values to guard against redundant DOM modifications.
     */
    protected lastValues_: Record<string, BindingValue>;
    /**
     * Main binding initialization logic. Parses each CSS variable-binding pair,
     * retrieves the corresponding ViewModel signals, subscribes to updates,
     * and applies the initial CSS variable state.
     */
    protected bindingInit_(): void;
    /**
     * Applies the bound value to a specific CSS variable on the element's style.
     *
     * @param name The name of the CSS variable (e.g., `'--player-progress'`).
     * @param value The value to apply.
     */
    protected applyCssVar_(name: string, value: BindingValue): void;
}
/**
 * Helper to register `BindCssVarDirective` lazily under the `bind_css_var` attribute.
 */
export declare const registerBindCssVarDirective: import("@alwatr/directive").RegisterDirectiveFunction;
//# sourceMappingURL=directive_bind_css_var.d.ts.map