import type { ChildPart, PartInfo } from "lit-html/directive.js";
import { Directive } from "lit-html/directive.js";
/**
 * Configuration for styling the root `<svg>` element.
 * Used by `safeSVG()` / `unsafeSVG()`.
 */
export type SvgConfig = {
    /** Width of the SVG element (px string or any CSS value). */
    width?: string | number;
    /** Height of the SVG element (px string or any CSS value). */
    height?: string | number;
    /** Shorthand — sets both width and height to the same value. */
    size?: string | number;
    /** Sets the `fill` attribute on the root `<svg>`. */
    fill?: string;
    /** Sets the `stroke` attribute on the root `<svg>`. */
    stroke?: string;
    /** Sets the `color` CSS property (works with `currentColor` fills). */
    color?: string;
    /** Sets the `stroke-width` attribute on the root `<svg>`. */
    strokeWidth?: string | number;
    /** Sets the `stroke-linecap` attribute. */
    strokeLinecap?: "butt" | "round" | "square";
    /** Sets the `stroke-linejoin` attribute. */
    strokeLinejoin?: "miter" | "round" | "bevel";
    /** Sets the `opacity` attribute on the root `<svg>`. */
    opacity?: string | number;
    /** Custom CSS class(es) to add to the root `<svg>`. */
    class?: string;
    /** Sets the `viewBox` attribute (e.g. `"0 0 24 24"`). */
    viewBox?: string;
    /** Additional inline style string appended to the element's style attr. */
    style?: string;
    /** Sets `aria-label` for accessibility. */
    ariaLabel?: string;
    /**
     * When true, sets `aria-hidden="true"` (decorative icon).
     * Defaults to `true`.
     */
    ariaHidden?: boolean;
    /** Sets the `transform` attribute on the root `<svg>`. */
    transform?: string;
};
declare class SvgIconDirective extends Directive {
    #private;
    constructor(partInfo: PartInfo);
    update(part: ChildPart, [markup, config]: [string, SvgConfig]): symbol;
    render(_markup: string, _config: SvgConfig): symbol;
}
declare const svgIconDirective: (_markup: string, _config: SvgConfig) => import("lit-html/directive.js").DirectiveResult<typeof SvgIconDirective>;
/**
 * Render a **trusted, developer-authored** SVG string into the DOM as a live
 * `<svg>` element, with optional presentation config applied via
 * `setAttribute` directly on the element.
 *
 * ### How it works
 *
 * - **First render** — the markup is parsed once into a live `SVGSVGElement`
 *   via a `<template>` element (a single DOM parse, no serialization).
 *   The element is inserted at the directive's position in the template.
 * - **Config-only update** — only `setAttribute` / `removeAttribute` calls
 *   are made on the already-live element. No re-parse, no re-serialize.
 * - **Markup change** — the old element is removed, the new markup is parsed
 *   once, and config is applied.
 *
 * There is **zero sanitization** — the markup is assumed to come from your
 * own source code or a vetted asset pipeline.
 *
 * ```ts
 * import { safeSVG, html } from "mates";
 *
 * // markup must be a valid SVG string (starts with <svg ...>)
 * const heartIcon = `<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5…"/></svg>`;
 *
 * html`<button>${safeSVG(heartIcon, { size: 24, fill: "currentColor" })}</button>`;
 * ```
 *
 * @param markup  An inline SVG markup string (must start with `<svg`).
 * @param config  Optional styling / attribute overrides applied to the root `<svg>`.
 */
export declare function safeSVG(markup: string, config?: SvgConfig): ReturnType<typeof svgIconDirective>;
/**
 * Alias for `safeSVG()`. Both functions are identical — they render a trusted
 * SVG string with optional config applied to the root `<svg>` element.
 * There is no sanitization in either.
 *
 * The two names exist so you can use whichever reads more naturally:
 * - `safeSVG`   — emphasises the source is developer-authored / trusted
 * - `unsafeSVG` — emphasises no sanitization is performed (mirrors the
 *   lit-html directive name that powers it internally)
 */
export { safeSVG as unsafeSVG };
//# sourceMappingURL=svgIcon.d.ts.map