proposals/LabeledDivider/custom.md24 lines · View on GitHub
Custom and net-new: LabeledDivider
Net-new components
.pds-labeled-divider — a horizontal rule with a pill label centered on it.
Parts and modifiers: .pds-labeled-divider__action, .pds-labeled-divider__icon, .pds-labeled-divider__label, .pds-labeled-divider__line, .pds-labeled-divider__selector, .pds-labeled-divider--agentic, .pds-labeled-divider--xs
Additions to existing PDS components
Net-new props
all: action (a control swapped in for the label, 2026-10-21), className, datePicker (object: maxDate, menuLabel, modalTitle, onChange, pickerLabel, value), id, label, menuItems, prefixIcon, size, suffixIcon, tone. The component has no PDS equivalent, so every prop is new.
Custom CSS variables
--labeled-divider-label-background — set on .pds-labeled-divider; fill of the pill.
--labeled-divider-label-border — set on .pds-labeled-divider; border color of the pill.
--labeled-divider-label-color — set on .pds-labeled-divider; text color of the pill.
--labeled-divider-line-color — set on .pds-labeled-divider; color of the rule on each side.
--labeled-divider-padding-block — set on .pds-labeled-divider; vertical padding of the label.
--labeled-divider-padding-inline — set on .pds-labeled-divider; horizontal padding of the label.