Search Modified Display

<lens-search-modified-display> displays a visual cue when the current query has been modified. It listens to the QueryStore and only renders its slotted content if a change has occurred.

Usage

Use the default <slot> to pass in content:

<lens-search-modified-display>
    <b>You have unsaved changes. Please click "Search" to update results.</b>
</lens-search-modified-display>

Styling

Example

lens-search-modified-display::part(lens-query-modified-display-wrapper) {
    background-color: var(--light-orange);
    color: var(--dark-orange);
    font-weight: bold;
}