segmentedItem
Draws one segment.
import { segmentedItem } from "@sdxc/ui/styles";Usage
Draws one segment. A resting segment is muted ink on the track and takes a translucent wash on hover; the chosen one is a raised tile edged in the strong border role, which keeps at least 3:1 against the track in either scheme, with emphasis ink in semibold. The states compose into one rule, so the chosen state wins whatever order layers land in.
Signature
segmentedItem<Node extends Element = Element>(options?: SegmentedItemOptions): UtilityMixin<Node>Returns a css() mixin ready for the segment's mix prop.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | SegmentedItemOptions | No | Selectors for the chosen and focused states. |
Examples
<button aria-pressed={active ? "true" : "false"} mix={[segmentedItem()]}>{label}</button>;<label mix={[segmentedItem({ selected: "&:has(input:checked)", focused: "&:has(input:focus-visible)" })]} />;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.
Interface
SegmentedItemOptions
Options accepted by segmentedItem.
| Member | Type | Required | Description |
|---|---|---|---|
selected | string | No | Selector, relative to the segment, that matches while it is the chosen one. |
focused | string | No | Selector, relative to the segment, that matches while keyboard focus is on it. |