import { DDSElement } from "../../base/index.js";
import { IconRegistry } from "../../icon-registry.js";
import { MergeVariantProps } from "../../type-utils.js";
declare const icons: {
    "logo-positive": {
        class: string;
        color: null;
    };
    "logo-negative": {
        class: string;
        color: null;
    };
    alarm: {
        class: string;
        color: null;
    };
    close: {
        class: string;
        color: string;
    };
    information: {
        class: string;
        color: null;
    };
    error: {
        class: string;
        color: null;
    };
    success: {
        class: string;
        color: null;
    };
    warning: {
        class: string;
        color: null;
    };
    "pagination-chevron-left": {
        class: string;
        color: string;
    };
    "pagination-chevron-right": {
        class: string;
        color: string;
    };
    profile: {
        class: string;
        color: null;
    };
    "chevron-up": {
        class: string;
        color: null;
    };
    "chevron-down": {
        class: string;
        color: null;
    };
    "chevron-left": {
        class: string;
        color: null;
    };
    "chevron-right": {
        class: string;
        color: null;
    };
    sort: {
        class: string;
        color: null;
    };
    negative: {
        class: string;
        color: null;
    };
    positive: {
        class: string;
        color: null;
    };
    cross: {
        class: string;
        color: null;
    };
    notification: {
        class: string;
        color: null;
    };
    neutral: {
        class: string;
        color: null;
    };
    download: {
        class: string;
        color: null;
    };
    check: {
        class: string;
        color: null;
    };
};
export declare const iconList: string[];
export type IconType = keyof typeof icons;
declare const cvaIcon: (props?: ({
    color?: "current" | "default" | "black" | "white" | null | undefined;
    mode?: "mask" | "background" | "inline" | "static" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
/**
 * A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.
 * The component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.
 *
 * Predefined DDS icons are automatically rendered using optimized CSS classes.
 * Custom icons can be dynamically loaded from various sources using the icon registry.
 *
 * If an icon cannot be loaded, a blank space is displayed.
 * In development builds, warnings are logged to the console for debugging.
 *
 * ### Using Custom Icons
 *
 * Custom icons must be registered with the icon registry before use.
 * They can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.
 *
 * #### Rendering Modes
 *
 * Custom icons support multiple rendering modes, each with different characteristics:
 *
 * - **mask** (default): Uses CSS `mask-image` to render the icon.
 *   - Secure rendering method (SVG is converted to data URL).
 *   - Supports color customization via the `color` property or CSS `color`.
 *   - Best choice for most use cases with custom icons.
 * - **background**: Uses CSS `background-image` to render the icon.
 *   - Secure rendering method (SVG is converted to data URL).
 *   - Does NOT support color customization; the icon is rendered with its original colors.
 *   - Use this mode when you need to preserve the original colors of multi-color SVG icons.
 * - **inline**: Traditional SVG rendering using `innerHTML`.
 *   - Renders the raw SVG markup directly in the DOM.
 *   - Supports color customization if the SVG uses `currentColor` or inheritable properties.
 *   - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.
 *   - Use `mask` or `background` modes for better security.
 *
 * #### Registration Examples
 *
 * ```js
 * import { iconRegistry } from "@daikin-oss/design-system-web-components/icon-registry.js";
 *
 * // Register a single custom icon using mask mode for secure rendering and color customization
 * iconRegistry.register({
 *   name: "my-custom-icon",
 *   svg: {
 *     svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>',
 *     mode: "mask",
 *     defaultColor: "#0066cc"
 *   },
 * });
 *
 * // Register multiple custom icons dynamically using pattern matching
 * iconRegistry.register({
 *   match: /^dynamic-custom-/,
 *   async fetch: (name) => {
 *     const response = await fetch(`/path/to/custom/icons/${name}.svg`);
 *     if (!response.ok) {
 *       throw new Error(`Failed to load custom icon "${name}"`);
 *     }
 *     // You can return just the SVG content as a string (defaults to mask mode)
 *     // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control
 *     return response.text();
 *   },
 * });
 * ```
 *
 * Once registered, you can use your custom icons in components:
 *
 * ```html
 * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
 * <daikin-icon icon="dynamic-custom-icon-123" color="current" size="m"></daikin-icon>
 * ```
 *
 * ### Changing Icon Color
 *
 * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property:
 *
 * ```html
 * <daikin-icon icon="information" color="current" style="color: red;"></daikin-icon>
 * <!-- or you can inherit the color from a parent element -->
 * <div style="color: blue;">
 *   <daikin-icon icon="information" color="current"></daikin-icon>
 * </div>
 * ```
 *
 * This behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).
 * In `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.
 * Note that `background` mode does not support custom colors.
 *
 * @cssprop [--ddc-icon-size] - The size of the icon. If you set a value other than "current" for the `size` property, this will be automatically overwritten.
 *
 * @example
 *
 * ```js
 * import "@daikin-oss/design-system-web-components/components/icon/index.js";
 * ```
 *
 * ```html
 * <!-- Using a DDS static icon -->
 * <daikin-icon icon="information" color="current" size="m"></daikin-icon>
 *
 * <!-- Using a custom icon -->
 * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
 * ```
 */
export declare class DaikinIcon extends DDSElement {
    static readonly styles: import('lit').CSSResult;
    /**
     * The icon registry instance to use.
     * Defaults to the global icon registry.
     */
    registry: IconRegistry;
    /**
     * The name of the icon to display.
     * Can be a static DDS icon name or a custom icon name registered in the icon registry.
     */
    icon: string;
    /**
     * The color of the icon.
     * Use `"current"` for most cases.
     *
     * **This property will be removed in a future release.**
     * To prepare for this change, start using `color="current"` and set icon colors via the CSS `color` property instead of using predefined color values.
     *
     * @default "default"
     */
    color: IconVariantProps["color"];
    /**
     * The size of the icon.
     * If set to "current", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.
     *
     * @default "current"
     */
    size: "s" | "m" | "l" | "xl" | "current";
    private _iconData;
    connectedCallback(): void;
    updated(changedProperties: Map<string, unknown>): void;
    private loadIcon;
    render(): import('lit-html').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        "daikin-icon": DaikinIcon;
    }
}
export default DaikinIcon;