import { LitElement } from "lit";
export type SkyDividerDirection = "horizontal" | "vertical";
/**
 * @element sky-divider
 *
 * @summary Visual separator component for horizontal and vertical layout separation.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/divider
 *
 * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).
 *
 * @property {string} color - Divider color token or CSS color.
 * @property {string} thickness - Divider thickness (for example `1px` or `2px`).
 * @property {string} margin - Outer margin around the divider.
 * @property {SkyDividerDirection} direction - Divider orientation.
 * @property {boolean} inset - Enables indented divider layout.
 * @property {string} height - Height used for vertical orientation.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 * @method getComputedColor Returns the resolved runtime divider color.
 * @method getComputedThickness Returns the resolved runtime divider thickness.
 *
 * @cssprop --divider-color - CSS custom property for divider color.
 * @cssprop --divider-thickness - CSS custom property for divider thickness.
 * @cssprop --divider-margin - CSS custom property for divider margin.
 * @cssprop --divider-height - CSS custom property for vertical divider height.
 *
 * @Behavior
 * - Simple visual divider that can be horizontal or vertical
 * - Supports extensive customization via properties
 * - Automatically resolves color values using color resolver
 * - Updates CSS custom properties when properties change
 * - **horizontal**: Renders as `<hr>` element, spans full width
 * - **vertical**: Renders as `<div>` element, spans configurable height
 * - Horizontal dividers use semantic `<hr>` element
 * - Vertical dividers use `<div>` with appropriate styling
 *
 * @example
 * ```html
 * <div style="display: flex; align-items: center;">
 *   <span>Left content</span>
 *   <sky-divider
 *     direction="vertical"
 *     height="50px"
 *     margin="0 16px"
 *   ></sky-divider>
 *   <span>Right content</span>
 * </div>
 * ```
 * ```vue
 * <template>
 *   <div style="display:flex;align-items:center;">
 *     <span>Left content</span>
 *     <sky-divider direction="vertical" height="50px" margin="0 16px"></sky-divider>
 *     <span>Right content</span>
 *   </div>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <div style={{ display: "flex", alignItems: "center" }}>
 *       <span>Left content</span>
 *       <sky-divider direction="vertical" height="50px" margin="0 16px"></sky-divider>
 *       <span>Right content</span>
 *     </div>
 *   );
 * }
 * ```
 */
export declare class SkyDivider extends LitElement {
    /**
     * The color of the divider.
     * @public
     */
    color: string;
    /**
     * The thickness of the divider (e.g., `"1px"`, `"2px"`).
     * @public
     */
    thickness: string;
    /**
     * The margin around the divider.
     * @public
     */
    margin: string;
    /**
     * Divider orientation.
     * @public
     */
    direction: SkyDividerDirection;
    /**
     * Whether the divider should be inset (indented).
     * @public
     */
    inset: boolean;
    /**
     * The height of a vertical divider.
     * @public
     */
    height: string;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    static styles: import("lit").CSSResult;
    /** @protected */
    updated(changedProperties: Map<string, unknown>): void;
    /**
     * Gets the current computed color of the divider.
     * @returns Resolved color value
     * @public
     */
    getComputedColor(): string;
    /**
     * Gets the current computed thickness of the divider.
     * @returns Resolved thickness value
     * @public
     */
    getComputedThickness(): string;
    /** @protected */
    render(): import("lit-html").TemplateResult<1>;
}