import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup } from 'lit';

/**
 * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 *
 * @description According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/),
 * "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers.
 * For instance, hiding a search field's label as a common magnifying glass icon is used in its stead." </br> </br>
 *
 * Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus.
 * This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
 *
 * @slot (default) - The content to be visually hidden.
 */
export default class CxVisuallyHidden extends CortexElement {
    static styles: CSSResultGroup;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-visually-hidden': CxVisuallyHidden;
    }
}
