Input group & search

.talos-input-group and .talos-search are wrappers, not controls. The group owns the visible border and goes borderless on the inner .talos-input, so a $-prefix or /mo-suffix reads as one continuous part rather than three boxes. .talos-search does the same trick for a magnifier and an optional clear button.

Input group — addons

<div class="talos-input-group">
  <span class="talos-input-addon talos-input-addon--leading">$</span>
  <input class="talos-input" placeholder="0.00" />
  <span class="talos-input-addon talos-input-addon--trailing">/mo</span>
</div>

The group draws the 1px border; the inner input drops its own border and chamfer (background: none) so the three cells fuse. --leading sits before the input with a right divider, --trailing after with a left divider. Either is optional — use one, both, or neither.

Focus-within

<div class="talos-input-group">
  <span class="talos-input-addon talos-input-addon--leading">https://</span>
  <input class="talos-input" />
</div>

Because the wrapper owns the outline, focus is handled on the group: :focus-within brightens the border to --talos-edge-strong and adds a 1px ring — the whole assembly lights up as one, not just the input cell.

Search

<div class="talos-search">
  <span class="talos-search__icon">⌕</span>
  <input class="talos-input" placeholder="Filter nodes…" />
</div>

.talos-search is a relative wrapper that pads the input on both sides and absolutely positions __icon over the left pad. The icon is pointer-events: none, so clicks fall through to the input. The input keeps its own chamfer here.

Search — with clear

<div class="talos-search">
  <span class="talos-search__icon">⌕</span>
  <input class="talos-input" value="atlas" />
  <button class="talos-search__clear" type="button" aria-label="Clear">×</button>
</div>

__clear is an optional <button> pinned to the right pad. It is a bare button (no background/border) that brightens to --talos-text-primary on hover; wiring the actual clear is the host’s job.

Classes

Inside a group the .talos-input goes borderless; for a standalone control see .talos-input.