import type * as CSS from "csstype";
/**
 * A plain style value — a string or number (numbers are treated as px for
 * length-based properties, but we leave that to the browser).
 */
type PlainValue = string | number;
/**
 * Conditional style value (2-element tuple):
 *   [condition, value]
 * The style is only applied when `condition` is truthy.
 */
type ConditionalValue = [condition: unknown, value: PlainValue];
/**
 * Ternary style value (3-element tuple):
 *   [condition, trueValue, falseValue]
 * Applies `trueValue` when condition is truthy, `falseValue` otherwise.
 */
type TernaryValue = [
    condition: unknown,
    trueValue: PlainValue,
    falseValue: PlainValue
];
/**
 * Every value in the style map can be:
 *  - a plain string / number (always applied)
 *  - a 2-element array  → [condition, value]         (conditional)
 *  - a 3-element array  → [condition, ifTrue, ifFalse] (ternary)
 *  - undefined / null / false (ignored)
 */
export type StyleValue = PlainValue | ConditionalValue | TernaryValue | undefined | null | false;
/**
 * The style map accepted by the `style()` directive.
 *
 * Keys are camelCase CSS property names (type-safe via csstype) OR
 * kebab-case strings (for custom properties like `--my-var`).
 */
export type StyleMap = {
    [K in keyof CSS.Properties]?: StyleValue;
} & {
    /** Allow arbitrary kebab-case or custom property names. */
    [key: string]: StyleValue;
};
/**
 * Declarative, conditional style directive for lit-html templates.
 *
 * Accepts a map of CSS property names to values. Values can be:
 *  - **plain**: always applied (`color: "red"`)
 *  - **conditional** (2-element array): applied only when condition is truthy
 *    (`color: [isError, "red"]`)
 *  - **ternary** (3-element array): picks between two values
 *    (`color: [isError, "red", "green"]`)
 *
 * Properties whose conditions are falsy (or whose keys are removed between
 * renders) are automatically cleaned up from the element's inline style.
 *
 * @example
 * ```ts
 * import { html } from "mates";
 * import { style } from "mates";
 *
 * const isEnabled = true;
 * const isError = false;
 *
 * html`
 *   <div ${style({
 *     color: [isEnabled, "red"],
 *     background: "white",
 *     fontWeight: [isError, "bold", "normal"],
 *     "--custom-var": "42px",
 *     opacity: [isEnabled, 1, 0.5],
 *   })}>
 *     Styled content
 *   </div>
 * `;
 * ```
 */
export declare function style(styles: StyleMap): import("lit-html/directive").DirectiveResult<import("lit-html/directive").DirectiveClass>;
/** No-op — kept for backwards compatibility. */
export declare function removeStyle(_el: Element): void;
export {};
//# sourceMappingURL=styleDirective.d.ts.map