Segmented control

One control, a few exclusive choices. Kobalte's SegmentedControl builds it from a hidden radio per item plus an indicator it positions inline.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`segmented`	The track holding the items
`segmented-item`	One choice. Checked state comes from its radio, data-checked, or segmented-item-active
`segmented-indicator`	The sliding highlight. Leave it out and the checked item paints its own

Basic

<div class="segmented">
  <label class="segmented-item"><input type="radio" name="view" checked /> List</label>
  <label class="segmented-item"><input type="radio" name="view" /> Board</label>
  <label class="segmented-item"><input type="radio" name="view" /> Calendar</label>
</div>

<div class="segmented">
  <label class="segmented-item"><input type="radio" name="view" checked /> List</label>
  <label class="segmented-item"><input type="radio" name="view" /> Board</label>
  <label class="segmented-item"><input type="radio" name="view" /> Calendar</label>
</div>

import { SegmentedControl } from "@kobalte/core/segmented-control";

<SegmentedControl class="segmented" value={view()} onChange={setView}>
  <SegmentedControl.Indicator class="segmented-indicator" />
  <For each={["List", "Board", "Calendar"]}>
    {option => (
      <SegmentedControl.Item value={option} class="segmented-item">
        <SegmentedControl.ItemInput />
        <SegmentedControl.ItemLabel>{option}</SegmentedControl.ItemLabel>
      </SegmentedControl.Item>
    )}
  </For>
</SegmentedControl>

<div class="segmented">
  <div class="segmented-indicator" style="left: 0.25rem; width: 4rem"></div>
  <label class="segmented-item" data-checked><input type="radio" name="kview" checked /> List</label>
  <label class="segmented-item"><input type="radio" name="kview" /> Board</label>
  <label class="segmented-item"><input type="radio" name="kview" /> Calendar</label>
</div>

None of Kobalte's parts here carry a role, so the classes go on them by hand. The checked state is read three ways: the item's own radio, Kobalte's data-checked, or .segmented-item-active.