Typography · Highlight

Highlight

Substring highlighter primitive. Wraps a {``} shell around the input text and replaces matches of query (string or array) with {``} elements that inherit the same recipe as the standalone Mark primitive. Composes inside any inline-flow primitive. Single part. Eidos-native: no soma backing, no semantic events.

parts{compiled.parts.order.length} events0 colors8 multi-termyes scopeeidos

trace {trace.length === 0 ? 'no semantic events' : `${trace.length} event(s)`} · color {color} terms {queryArray.length} · ignoreCase {ignoreCase ? 'on' : 'off'}
{#if tab === 'live'}

Controls

Highlight is eidos-native — no soma split. Multiple terms via comma-separated input. Terms are regex-escaped automatically.

eidos props · substring match
eidos visual · text + query + intent svelte 
{eidosSnippet}
{/if} {#if tab === 'api'}

API reference

Highlight scans text for matches of query (string or array of strings, regex-escaped) and wraps each match in {``}.

Props
PropTypeDefaultNotes
textstring—Required. The full text to render.
querystring | string[]—Substring(s) to highlight.
ignoreCasebooleantrueCase-insensitive match.
color'primary' | 'secondary' | 'neutral' | 'affirm' | 'fulfill' | 'risk' | 'threat' | 'loss''fulfill'Intent palette for the highlight tint.
asstring'span'Override outer shell tag.
Composability examples
Use caseSnippet
Single-term search result {``}
Multi-term filter {``}
Case-sensitive code search {``}
Inside a Heading {``}
List of results {`{#each results as r}
    • {/each}`}
    Reference comparison
    LibraryClosest equivalentDifference
    radix-themes—Radix has no substring highlighter; consumer composes manually.
    chakra-ui<Highlight>Chakra uses colorScheme; UIX restricts to intent palette.
    mantine<Highlight>Mantine supports regex via highlight={"{ regex: true }"}; UIX reserves for v2.
    react-highlight-wordslibraryBundles highlighting + regex + custom render; UIX is intentionally minimal.
    {/if} {#if tab === 'morfo'}

    Morfo contract

    FieldValue
    name{highlightMorfo.name}
    kebab{highlightMorfo.kebab}
    scope{highlightMorfo.scope.join(', ')}
    parts{partsList.length}
    events0
    Parts
    {#each partsList as part} {/each}
    kebabmarkerelementarchetypeoptional
    {part.kebab} [{part.marker}] <{part.defaultElement}> {part.archetype} {part.optional ? 'yes' : 'no'}

    The Provider stamps data-highlight on the outer shell. Inner matches reuse the Mark recipe via the embedded data-mark attr, sharing data-color.

    {/if} {#if tab === 'sema'}

    sema · events

    Highlight declares no semantic events. The primitive is a formatter: given text + query it produces a tree of segments and decorates the matches. No commit, no emerge. Animating the appearance of matched text belongs to a containing list / popover.

    {/if} {#if tab === 'recipe'}

    Eidos recipe

    Recipe lives in src/uix/eidos/components/highlight/highlight.css. The outer shell is structural (font: inherit); inner Mark elements pick up the palette from the standalone Mark recipe.

    SelectorOwnerPurpose
    [data-highlight]morfoOuter shell. Inherits ambient typography.
    [data-highlight] [data-mark]eidosReuses the Mark recipe via shared data-mark attr.
    {/if} {#if tab === 'a11y'}

    Accessibility

    ConcernContract
    RoleThe shell is a generic {``}; inner matches are {``}.
    Full text in DOMHighlight doesn't truncate or hide content. AT read the full text including the marked segments.
    Multi-term orderingMatches are found left-to-right in text order. Reading order follows the source.
    Color contrastInherits the Mark recipe's contract — each intent's bg + text meets WCAG AA.
    {/if}