2021-11-16 14:31:38 +00:00
|
|
|
import { customElement } from 'lit/decorators.js';
|
2023-01-13 20:43:55 +00:00
|
|
|
import { html } from 'lit';
|
2022-08-17 15:37:37 +00:00
|
|
|
import ShoelaceElement from '../../internal/shoelace-element';
|
2021-11-16 14:31:38 +00:00
|
|
|
import styles from './visually-hidden.styles';
|
2022-07-19 12:27:39 +00:00
|
|
|
import type { CSSResultGroup } from 'lit';
|
2021-11-16 14:31:38 +00:00
|
|
|
|
|
|
|
/**
|
2022-10-21 13:56:35 +00:00
|
|
|
* @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
2023-01-12 15:26:25 +00:00
|
|
|
* @documentation https://shoelace.style/components/visually-hidden
|
2022-03-14 12:50:25 +00:00
|
|
|
* @status stable
|
2023-01-12 15:26:25 +00:00
|
|
|
* @since 2.0
|
2021-11-16 14:31:38 +00:00
|
|
|
*
|
2022-12-06 16:18:14 +00:00
|
|
|
* @slot - The content to be visually hidden.
|
2021-11-16 14:31:38 +00:00
|
|
|
*/
|
|
|
|
@customElement('sl-visually-hidden')
|
2022-08-17 15:37:37 +00:00
|
|
|
export default class SlVisuallyHidden extends ShoelaceElement {
|
2022-07-19 12:27:39 +00:00
|
|
|
static styles: CSSResultGroup = styles;
|
2021-11-16 14:31:38 +00:00
|
|
|
|
|
|
|
render() {
|
|
|
|
return html` <slot></slot> `;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-visually-hidden': SlVisuallyHidden;
|
|
|
|
}
|
|
|
|
}
|