Files

18 lines
588 B
Plaintext

---
interface Props {
color?: string | undefined
animated?: boolean
/** accessible name (visually-hidden text inside the dot) */
ariaLabel?: string
class?: string
/** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
[key: string]: unknown
}
const { color, animated, ariaLabel, class: className, ...rest } = Astro.props
const classes = ['status-dot', color && `status-${color}`, animated && 'status-dot-animated', className]
---
<span class:list={classes} {...rest}>{ariaLabel && <span class="visually-hidden">{ariaLabel}</span>}</span>