KQ-553 · GLOSS/WORD
Gloss Word
A glossary term that explains itself without covering the sentence. Hover, focus or tap unfolds the gloss on the line beneath and pushes the following text down on glide, over a height a ResizeObserver measures rather than reserves; bubble mode floats it above instead, entering on snap from 4px and clamped to its paragraph. The term is a real button with aria-expanded and aria-controls, so Enter or Space toggles it and Escape closes it.
Coldbrook meters report on a rather than a raw total, so a site that pumps hard for ten minutes reads the same as one that trickles all hour. Readings arrive with a attached, and anything logged inside it is held back until the line is . The dashboard totals them nightly against the held for the site.
No gloss open
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/gloss-word
Props
- term
- string
- default —
- The word as it reads in the sentence.
- gloss
- React.ReactNode
- default —
- The explanation.
- mode
- "inline" | "bubble"
- default "inline"
- Whether the gloss unfolds beneath the line or floats above it.
- onOpenChange
- (open: boolean) => void
- default —
- Fires when the gloss opens or closes.
| Prop | Type | Default | Description |
|---|---|---|---|
| term | string | — | The word as it reads in the sentence. |
| gloss | React.ReactNode | — | The explanation. |
| mode | "inline" | "bubble" | "inline" | Whether the gloss unfolds beneath the line or floats above it. |
| onOpenChange | (open: boolean) => void | — | Fires when the gloss opens or closes. |