@sandlada/mdc/build/components/focus-ring/focus-ring.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 *
 * [Modified by Kai-Orion & Sandlada]
 */
import { LitElement, type PropertyValues } from 'lit';
import type { IFocusRing } from './focus-ring.interface';
declare global {
    interface HTMLElementTagNameMap {
        "mdc-focus-ring": MDCFocusRing;
    }
}
/**
 * The parent element of the focus ring used to provide perspective focus
 * must be set to relative and the tabindex must not be -1.
 *
 * The ring can also be attached to an external control through the `for`
 * attribute or the `attach(control)` method.
 *
 * @example
 * ```html
 * <div tabindex="0" class="my-box">
 *     <mdc-focus-ring></mdc-focus-ring>
 * </div>
 * <style>
 * .my-box {
 *     position: relative;
 *     height: 40px;
 *     width: 72px;
 *     background: red;
 *     border: none;
 *     outline: none;
 * }
 * </style>
 * ```
 *
 * @version "Material Design 3"
 * @version "Material Design 3 - Non-Standardized"
 */
export declare class MDCFocusRing extends LitElement implements IFocusRing {
    static styles: import("lit").CSSResult;
    private _ignoreGlobalConfig;
    private _disabled;
    private _disabledConfigured;
    private _configAttributeSyncSource;
    private _lastEffectiveDisabled;
    private readonly globalMDCContextConsumer;
    inward: boolean;
    shapeInherit: boolean;
    animationDisabled: boolean;
    get ignoreGlobalConfig(): boolean;
    set ignoreGlobalConfig(value: boolean);
    get disabled(): boolean;
    set disabled(value: boolean);
    get focused(): boolean;
    set focused(value: boolean);
    constructor();
    private get effectiveDisabled();
    private get globalFocusRingConfig();
    private syncDisabledAttribute;
    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
    private readonly attachableController;
    private static readonly FocusRingEvents;
    private readonly boundHandleEvent;
    private onControlChange;
    private timer;
    private clearTimer;
    private handleEvent;
    /**
     * Initiates a closing transition for the focus ring, mirroring the
     * behaviour triggered by native focusout/pointerdown events.
     *
     * If the ring is currently focused, this adds the `closing` attribute
     * and schedules `focused = false` after half the configured duration
     * (so the CSS opacity transition can complete). If the ring is
     * already closed, this is a no-op. If the ring is disabled, it is
     * closed immediately without a transition.
     *
     * Use this method from host components (e.g. switch, radio-button,
     * icon-button) that need to programmatically reset focus visuals
     * without bypassing the focus-ring's own transition lifecycle.
     */
    close(): void;
    private closeWithDuration;
    protected updated(_changedProperties: PropertyValues<this>): void;
    get htmlFor(): string | null;
    set htmlFor(htmlFor: string | null);
    get control(): HTMLElement | null;
    set control(control: HTMLElement | null);
    attach(control: HTMLElement): void;
    detach(): void;
}
//# sourceMappingURL=focus-ring.d.ts.map