Highlight

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Highlight — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Semantic marker for text that is relevant to the user's current activity —
8// the canonical case is the words that matched a search query. It is a thin,
9// server-rendered wrapper around the native <mark> element; the server splits
10// a string on the query terms and wraps each match in a styled <mark>.
11//
12// Source of truth:
13//   - <mark> semantics + the "search results" use case + the screen-reader
14//     announcement note:
15//     repos/mdn/files/en-us/web/html/reference/elements/mark/index.md
16//     ("`<mark>` indicates a portion of the document's content which is likely
17//      to be relevant to the user's current activity … the words that matched
18//      a search operation." MDN also notes that `<mark>` is NOT announced by
19//      default — which is correct here: a highlighted search match is a visual
20//      affordance, not extra content to read out. Do not abuse the
21//      ::before/::after announcement trick on a results list.)
22//   - Don't use <mark> for syntax highlighting — use <span> (MDN, same file).
23//     This component is strictly for relevance, never decoration.
24//
25// htmx: nothing of its own. The component just produces the marked-up HTML;
26// the server renders it inside whatever fragment htmx swaps in (e.g. the
27// <tr> rows returned to an Active Search `hx-target`). It forwards hx-*/data-*/
28// aria-* via {...rest} so a single highlighted term can also be a swap hook.
29// Verified there is no <mark>-specific htmx attribute:
30//   repos/htmx/www/reference.md
31//
32// JS budget: none. Pure SSR + one CSS rule's worth of utility classes. The
33// native <mark> default is a yellow background; we reset it to theme tokens so
34// it reads on brand in light and dark and never clashes with selection colours.
35//
36// Accessibility:
37//   - Keep highlighting to genuine matches. WCAG 1.4.1 (Use of Color): the
38//     match must not rely on the tint alone to be perceivable — <mark> is a
39//     real semantic element, and the bold weight + rounded chip give a
40//     non-colour cue, so a match survives in a high-contrast / forced-colours
41//     theme.
42//   - Case-insensitive matching by default; the ORIGINAL casing of the source
43//     text is preserved in the output (we slice the source, never the query).
44 
45// … truncated