Kappa / Highlight

Mesh convergence reached 92% after the final solve.

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <Highlight
    text="Mesh convergence reached 92% after the final solve."
    query="convergence"
  />
</template>

Installation

Highlight is part of the main Kappa package. Use the barrel import for application code or the component entry point when keeping imports granular.

Barrel

import { Highlight } from "@dicehub/kappa";

Granular

import { Highlight } from "@dicehub/kappa/components/highlight";

Usage

Pass the source string through text and the term or terms throughquery. The component renders an inline span; matching chunks are semantic mark elements.

Solver status: converged

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <p>
    <Highlight
      text="Solver status: converged"
      :query="['solver', 'status']"
      ignore-case
      :match-all="true"
    />
  </p>
</template>

Composition

Typical part hierarchy

Highlight <span>
└── ArkHighlight
    └── <mark>matching chunks</mark>

Kappa wraps the fragment-rendering Ark UI Highlightprimitive in one inline root. Ark UI owns matching, while Kappa owns the root marker and semantic styling. Consumer attributes, listeners, and classes pass to the root span.

Examples

Single Query

A string query marks the first occurrence by default. Set matchAll to mark every occurrence.

The solver is ready; the solver can start the next run.

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <Highlight
    text="The solver is ready; the solver can start the next run."
    query="solver"
  />
</template>

Multiple Queries

An array query marks all terms. Keep matchAll enabled when passing multiple queries; this is the Ark UI contract.

Export includes mesh, field, and mesh metadata.

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <Highlight
    text="Export includes mesh, field, and mesh metadata."
    :query="['mesh', 'field']"
    :match-all="true"
  />
</template>

Case Sensitive

Matching is case-sensitive by default. Set ignoreCase when a search field should treat upper- and lower-case terms as equal.

Kappa and kappa are different matches.

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <Highlight
    text="Kappa and kappa are different matches."
    query="kappa"
  />
</template>

Exact Matching

exactMatch matches complete words, so a query does not mark a longer word that only starts with the same characters.

mesh meshlet mesh

<script setup>
import { Highlight } from "@dicehub/kappa/components/highlight";
</script>

<template>
  <Highlight
    text="mesh meshlet mesh"
    query="mesh"
    :match-all="true"
    :exact-match="true"
  />
</template>

Accessibility

Use the semantic mark output to communicate search context, not only color.
Keep the complete source text available; highlighting does not replace the original copy.
Provide a visible label for the search or filter control that supplies the query.
Check long matches and forced-colors mode in the surrounding layout.

API Reference

Highlight

Wraps Ark UI matching in an inline Kappa root. Attributes and listeners pass to the root span.

Prop	Type	Default	Description
`text`	`string`	`—`	Text rendered by the component and searched for matches.
`query`	`string \| string[]`	`—`	One query or a list of query terms to mark.
`ignoreCase`	`boolean`	`false`	Matches query terms without regard to letter case.
`matchAll`	`boolean`	`false for string; true for string[]`	Marks every matching occurrence. Set true when using multiple queries.
`exactMatch`	`boolean`	`false`	Matches complete words instead of query substrings.

Data Slots

Slot	Element	Description
`highlight`	`span`	Inline Kappa root; consumer attributes and listeners pass through.
`mark`	`mark`	Ark UI-generated matching chunk with Kappa semantic styling.

Exports

Export	Description
`Highlight`	Inline text highlighter with Kappa mark styling.
`HighlightProps`	Public text, query, and matching prop contract.
`HighlightQuery / HighlightChunk`	Public query and generated chunk types.
`useHighlight / UseHighlightProps`	Ark UI matching hook and its prop contract.
`HIGHLIGHT_DEFAULT_IGNORE_CASE / HIGHLIGHT_DEFAULT_EXACT_MATCH`	Boolean defaults used by the Kappa wrapper.
`resolveHighlightMatchAll`	Preserves explicit values and resolves Ark's string-versus-array default.