Segmented Item

One segment. Everything it does not decide, the group decides for it.

import { SegmentedItem } from "@dede-style/ui/segmented", then <SegmentedItem value="start" label="Start" /> inside a Segmented. It takes the radio group name, the selected value, the handler, the size and the disabled state from its parent — so what is left here is the four things one segment owns.

StartEnd

The controls below move the first segment. Its neighbour is there because an item cannot stand on its own — and the fact that it does not move is the point.

Prop	Description	Default	Control
label	the words on the segment. With a glyph, the accessible name instead	`Start`
a11yLabel	a longer name for screen readers when the visible label is short, such as H for Horizontal
glyph	an icon in place of the words, for three or four options in a narrow space`noneAlertAlertFillArrowDownArrowLeftArrowRightArrowUpBag`+91 more	`none`	none Alert AlertFill ArrowDown ArrowLeft ArrowRight ArrowUp Bag Bell BellRing BellSlash Bluetooth Bookmark BookmarkFill Calendar Camera Cart Check CheckBold Checkbox CheckboxChecked CheckboxMixed ChevronDown ChevronLeft ChevronRight ChevronUp ChevronsDownUp ChevronsLeft ChevronsRight ChevronsUpDown Clock Close Code CodeAlt Cookie Copy CreditCard DataChart DataColumns DataGrid DataRows Delete Download DragHandle Edit Email Error ErrorFill ExternalLink Eye EyeSlash File Filter Folder Github Heart HeartFill Help HelpFill Home Image Info InfoFill Link Lock LockOpen LogOut Menu Minus MinusBold Moon MoreHorizontal MoreVertical Pause Placeholder Play Plus Radio RadioChecked Refresh Search Settings Share Shield Star StarFill Stop Success SuccessFill Sun SwapVertical Tag TagFill Upload User Warning WarningFill Wifi WifiSlash

Tokens

What a theme can move, where the props above are what an instance can move.

SegmentedItem has none, and that is a decision rather than an omission. Every value it renders already resolves through a foundation token or a role, so a theme moves it by moving those. A component token earns its place only when a theme needs to change one component without changing the role beneath it.

These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.