React Core Changelog

@cfa/react-core

2.0.0

Major Changes

#2245 83c97b6 Thanks @stevegreco! - Updated Avatar for v2 styling by removing scoped brand theming.
- Removed the color prop. Avatars now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2225 241cc66 Thanks @stevegreco! - Updated Badge for v2 styling by removing scoped brand theming.
- Removed the color prop. Badges now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2222 89a0583 Thanks @stevegreco! - Updated Button and LinkButton for v2 styling and variant naming.
- Renamed variants to primary, secondary, and tertiary (replacing filled, outlined, and text).
- Removed the color prop. Buttons now inherit brand colors from the surrounding app theme.
- Changed the default size from lg to md. Buttons without an explicit size render at medium height (40px) instead of large (48px).
- Updated border width and small-size label typography to match v2 specs.
Migration:
```
// Before
<Button variant="filled" color="secondary">Save</Button>
<Button variant="outlined">Cancel</Button>
<Button variant="text">Dismiss</Button>

// After
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="tertiary">Dismiss</Button>
```
Removing color does not change the button variant. color="secondary" alone should become variant="primary" with color removed, not variant="secondary".

If you relied on the previous implicit large size, add size="lg":
```
// Before (implicit large)
<Button>Save</Button>

// After (explicit large)
<Button size="lg">Save</Button>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2353 66e67bb Thanks @mitchellcarroll! - Graduated calendar primitives from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Calendar → Calendar
- UNSTABLE_RangeCalendar → RangeCalendar
- UNSTABLE_CalendarGrid → CalendarGrid
- UNSTABLE_CalendarCell → CalendarCell
- Corresponding *Props types renamed the same way
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2248 6dc1e69 Thanks @stevegreco! - Updated Calendar and RangeCalendar for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from Calendar and RangeCalendar. Calendars now inherit brand colors from the surrounding app theme.
- DatePicker and DateRangePicker inherit the same behavior through their calendar popovers.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2315 1a8f6df Thanks @stevegreco! - Updated CartInput for v2 styling by removing scoped brand theming.
- Removed the color prop. Cart inputs now inherit brand colors from the surrounding app theme.
- Default size is now md (was lg). Add size="lg" to keep the previous implicit height.
- Visual design updated to match v2 form field specs: form field border radius, default text color, and IconButton increment/decrement controls.
- Read-only state styling aligns with other v2 form fields.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2236 a5eb65f Thanks @stevegreco! - Updated Checkbox for v2 styling by removing scoped brand theming and the success state.
- Checkboxes now inherit brand colors from the surrounding app theme.
- Removed the isSuccess prop and success styling.
- Default, hover, focus, disabled, invalid, and read-only states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2376 13514f2 Thanks @stevegreco! - Removed the bold variant from Chip.
- variant now accepts only "subtle" (default) and "outlined".
- Remove variant="bold" usages or switch to variant="subtle" or variant="outlined".
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2247 85ff504 Thanks @stevegreco! - Updated Chip for v2 styling by renaming filled to subtle.
- Removed color="navy".
- Renamed variant="filled" to variant="subtle", which is now the default. outlined is unchanged.
- Removed hard-coded data-theme scoping from chips. Chips now inherit brand colors from the surrounding app theme.
- Updated success, warning, and error styling to match the v2 Figma spec.
Migration:
```
// Before
<Chip variant="filled" color="navy">Label</Chip>

// After. Drop navy. Use subtle, or omit variant, for the old filled look.
<Chip variant="subtle">Label</Chip>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2390 7270090 Thanks @mitchellcarroll! - Updated Combobox for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) on Combobox.Root and Combobox.Input. Root size sizes the trigger and list; Combobox.Input size overrides the trigger only.
- Deprecated compact. It compiles but no longer applies styles. Use size="sm" for the smallest variant; the old compact height maps to size="md". Add size="lg" to keep the previous default trigger height.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2255 a0edf0e Thanks @stevegreco! - Updated Combobox for v2 by removing the success state and aligning with React Aria’s selection API.
- Removed the isSuccess prop and success styling.
- Renamed ComboboxClearButtonprops to ComboboxClearButtonProps to match SelectClearButtonProps naming.
- Renamed selectedKey / defaultSelectedKey / onSelectionChange to value / defaultValue / onChange.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2357 097fc27 Thanks @mitchellcarroll! - Graduated date and time field components from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_DateField → DateField
- UNSTABLE_DateRangePicker → DateRangePicker
- UNSTABLE_DateRangeField → DateRangeField
- UNSTABLE_TimeInput → TimeInput
- Corresponding *Props types were already unprefixed
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2386 363a7c4 Thanks @mitchellcarroll! - Updated DateField and DatePicker for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to DateField.InputGroup and DatePicker to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2387 a3e0ba1 Thanks @mitchellcarroll! - Updated DateRangeField and DateRangePicker for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to DateRangeField.InputGroup and DateRangePicker to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2352 0d66030 Thanks @mitchellcarroll! - Date utilities from @internationalized/date now live on @cfa/react-core/dates, not the root or /server entries.
- Import parseDate, CalendarDate, today, getLocalTimeZone, and related helpers from @cfa/react-core/dates.
- Component imports from @cfa/react-core stay the same.
```
// Before
import { DatePicker, parseDate } from "@cfa/react-core";

// After
import { DatePicker } from "@cfa/react-core";
import { parseDate } from "@cfa/react-core/dates";
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2251 a12c24a Thanks @stevegreco! - Updated Divider for v2 styling with a bold default and a new subtle option.
- The default divider now uses a bold border treatment.
- Added variant="subtle" for the previous lighter default appearance.
- Menu.Divider defaults to variant="subtle" so menu dividers are unchanged.
Migration:
```
// Before
<Divider />

// After. Keep the previous lighter look.
<Divider variant="subtle" />
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2264 e454d88 Thanks @stevegreco! - Updated form field components for v2 to show description and errorMessage together when a field is invalid.
- description and errorMessage now render together when isInvalid is true, with the error above the description.
- Applies to TextInput, TextAreaInput, NumberInput, SearchInput, TimeInput, DatePicker, DateRangePicker, Checkbox, CheckboxGroup, RadioGroup, Switch, and the CartInput recipe.
- On TextInput and TextAreaInput, character count remains top-right when both messages are visible.
- Review layouts if you previously relied on the description disappearing when invalid.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2259 d3efb0e Thanks @stevegreco! - Updated GridList for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from GridList.Root. Grid lists now inherit brand colors from the surrounding app theme.
- Selected items now use label font-weight in addition to the selected background.
- Disabled items now use the disabled background and text colors.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2260 b669351 Thanks @stevegreco! - Updated IconButton and LinkIconButton for v2 styling aligned with Button.
- Added variant prop (primary, secondary, tertiary, destructive) matching Button semantics. destructive is new. There was no color="destructive" equivalent.
- Removed the color prop. Icon buttons now inherit brand colors from the surrounding app theme.
- Changed the default size from md to xs. Updated sizes to xs, sm, md, and lg. xl is removed.
- Default variant is tertiary (replaces color="gray").
- Icon buttons render as squares at the same height as their Button counterparts where sizes align.
Migration:
```
// Before
<IconButton color="gray" size="xs"><Close /></IconButton>
<IconButton color="primary" size="md"><Download /></IconButton>
<IconButton aria-label="Close"><Close /></IconButton> // implicit md + gray

// After
<IconButton variant="tertiary"><Close /></IconButton>
<IconButton variant="tertiary" size="md"><Download /></IconButton>
<IconButton aria-label="Close" size="md"><Close /></IconButton>
```
Previous color="primary" and color="secondary" were brand-colored ghost icons. Use variant="tertiary". For filled or outlined icon buttons, use variant="primary" or variant="secondary".

For icon buttons on knockout or dark surfaces, replace color="white" with a CSS override:
```
.my-surface {
  --icon-button-content: var(--ds-semantic-color-content-knockout);
}
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2378 957606c Thanks @mitchellcarroll! - Updated Input, TextInput, SearchInput, and NumberInput for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control height, padding, and typography. SearchInput also sizes the search icon and clear button.
- Default height is now 40px (md). Pass size="lg" to keep the previous 48px default.
- Deprecated compact. It compiles but no longer applies styles. compact={false} is also a no-op. Use size="sm" for the smallest variant. The old compact height maps to size="md".
```
<TextInput label="Name" size="lg" />
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2281 2dc4101 Thanks @stevegreco! - Updated Input for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
- Combobox.Input extends InputProps, so it no longer accepts isSuccess either.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2244 4c83a04 Thanks @stevegreco! - Updated ListBox for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from ListBox.Root. List boxes now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2262 9d8e3f1 Thanks @stevegreco! - Updated LoadingIndicator for v2 styling with color variants.
- Added variant prop: "brand" (default), "dark", and "light".
- isDisabled continues to apply muted gray styling and overrides the active variant.
- Default variant="brand" preserves the existing appearance for current usage.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2249 d8e3064 Thanks @stevegreco! - Updated Menu for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from Menu.Popover. Menus now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2279 fb5171a Thanks @stevegreco! - Updated NumberInput for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2291 b9b10a5 Thanks @mitchellcarroll! - Updated PageLoader for v2 styling by removing scoped brand theming.
- Removed the color prop. Page loaders now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2413 584ef62 Thanks @stevegreco! - Graduated Panel from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Panel → Panel
- UNSTABLE_PanelProps → PanelProps
- UNSTABLE_PanelProviderProps → PanelProviderProps
- UNSTABLE_PanelTriggerProps → PanelTriggerProps
- UNSTABLE_PanelInsetProps → PanelInsetProps
- UNSTABLE_PanelHeaderProps → PanelHeaderProps
- UNSTABLE_PanelFooterProps → PanelFooterProps
- UNSTABLE_PanelContentProps → PanelContentProps
- UNSTABLE_PanelSeparatorProps → PanelSeparatorProps
- UNSTABLE_PanelLayout → PanelLayout
- UNSTABLE_PanelSide → PanelSide
- UNSTABLE_PanelContextProps → PanelContextProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2252 3be855a Thanks @stevegreco! - Updated ProgressBar for v2 styling by removing color options and using semantic fill colors.
- Removed the color prop.
- Default fill uses the info semantic color and switches to success green when the value reaches maxValue.
- Exposed --progress-bar-fill-color to override the in-progress fill color.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2414 1244430 Thanks @stevegreco! - Graduated ProgressIndicator from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_ProgressIndicator → ProgressIndicator
- ProgressIndicatorProps and ProgressIndicatorStepProps were already unprefixed.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2237 6ef0f67 Thanks @stevegreco! - Updated RadioGroup for v2 styling by removing scoped brand theming and the success state.
- Removed hard-coded data-theme="cfa-navy" from RadioGroup. Radio groups now inherit brand colors from the surrounding app theme.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2305 5a40a63 Thanks @mitchellcarroll! - Removed the @cfa/design-tokens dependency from @cfa/react-core.
- index.css no longer imports @cfa/design-tokens/dist/tokens-no-fonts.css. Components rely solely on @cfa/design-tokens-core (--ds-* tokens).
- If your app still uses legacy --cfa-* tokens and previously relied on react-core’s CSS import to load them, import @cfa/design-tokens directly in your app.
#2266 94dd282 Thanks @mitchellcarroll! - Updated SearchInput for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2390 7270090 Thanks @mitchellcarroll! - Updated Select for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) on Select.Root and Select.Button. Root size sizes the trigger and list; Select.Button size overrides the trigger only.
- Deprecated compact. It compiles but no longer applies styles. Use size="sm" for the smallest variant; the old compact height maps to size="md". Add size="lg" to keep the previous default trigger height.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2267 6fe0ff1 Thanks @mitchellcarroll! - Updated Select for v2 by removing the success state and aligning with React Aria’s selection API.
- Removed the isSuccess prop and success styling.
- Renamed selectedKey / defaultSelectedKey / onSelectionChange to value / defaultValue / onChange.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2367 e642611 Thanks @mitchellcarroll! - Graduated SidebarNav from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_SidebarNav → SidebarNav
- UNSTABLE_SidebarNavRootProps → SidebarNavRootProps
- UNSTABLE_SidebarNavItemProps → SidebarNavItemProps
- UNSTABLE_SidebarNavAccordionItemProps → SidebarNavAccordionItemProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2256 748f54d Thanks @stevegreco! - Updated SidebarNav for v2 styling by removing scoped brand theming.
- Removed the color prop from SidebarNav.Root, SidebarNav.NavItem, and SidebarNav.AccordionItem. Sidebar navigation now inherits brand colors from the surrounding app theme.
- Removed hard-coded data-theme scoping from sidebar navigation items.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2405 d682e9c Thanks @mitchellcarroll! - Graduated SideNavigation from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_SideNavigation → SideNavigation
- UNSTABLE_SideNavigationProps → SideNavigationProps
- UNSTABLE_SideNavigationTriggerProps → SideNavigationTriggerProps
- UNSTABLE_SideNavigationDataItem → SideNavigationDataItem
- UNSTABLE_SideNavigationLinkItem → SideNavigationLinkItem
- UNSTABLE_SideNavigationNestedLinkItem → SideNavigationNestedLinkItem
- UNSTABLE_SideNavigationSectionItem → SideNavigationSectionItem
- UNSTABLE_SideNavigationDividerItem → SideNavigationDividerItem
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2253 8dbb8fc Thanks @stevegreco! - Updated Slider for v2 styling by removing scoped brand theming.
- Removed the color prop. Sliders now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2254 0896073 Thanks @stevegreco! - Updated Stepper for v2 styling by removing scoped brand theming.
- Removed the color prop. Steppers now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2240 42a9620 Thanks @stevegreco! - Updated Table for v2 styling by stabilizing the export and removing scoped brand theming.
- UNSTABLE_Table is now exported as Table.
- Removed hard-coded data-theme="cfa-navy" from Table.Root. Tables now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2241 abdbe35 Thanks @stevegreco! - Updated Tabs for v2 styling by removing scoped brand theming and aligning sizing with Figma.
- Removed the color prop. Tabs now inherit brand colors from the surrounding app theme.
- Updated tab sizing to match the v2 Figma spec.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2263 ea4cb65 Thanks @stevegreco! - Updated TagGroup for v2 styling by removing scoped brand theming.
- Tags now inherit brand colors from the surrounding app theme.
- Updated tag shape, padding, and interaction states to match the v2 Figma spec.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2278 8c73f8c Thanks @stevegreco! - Updated Text for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
- Select.Description, Combobox.Description, Slider.Description, TagGroup.Description, DatePicker.Description, and DateRangePicker.Description no longer accept isSuccess.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2375 4333a96 Thanks @mitchellcarroll! - Updated TextArea for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control padding and typography.
- Deprecated compact. It compiles but no longer applies styles; use size="sm" instead. Add size="lg" to keep the previous default padding.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2231 4976423 Thanks @mitchellcarroll! - Updated TextArea for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2375 4333a96 Thanks @mitchellcarroll! - Updated TextAreaInput for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control padding and typography.
- Deprecated compact. It compiles but no longer applies styles; use size="sm" instead. Add size="lg" to keep the previous default padding.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2235 1454ff6 Thanks @stevegreco! - Updated TextAreaInput for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2230 7e86326 Thanks @mitchellcarroll! - Updated TextInput for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2389 299181e Thanks @mitchellcarroll! - Removed ThemeProvider and the @cfa/react-core/theme entry point.
- Import @cfa/react-core/index.css directly in your app entry or global stylesheet instead of wrapping with ThemeProvider.
- The @cfa/react-core/theme subpath export is no longer available.
- If your app already imports @cfa/react-core/index.css, remove the ThemeProvider wrapper only.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2388 1ef0b49 Thanks @mitchellcarroll! - Updated TimeInput for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2271 eeaa854 Thanks @stevegreco! - Updated ToggleButton and ToggleButtonGroup for v2 styling aligned with Button and IconButton.
- Updated sm, md, and lg sizes to match Button heights of 32px, 40px, and 48px. Borders are 1px. Label typography is label-small for sm and label-default for md and lg.
- Selected state no longer overrides text color, and pressed/selected-hover styling was removed.
- ToggleButtonGroup size now controls sizing for every child button. Individual ToggleButton size props are ignored inside a group.
Migration:
```
// Before. Per-button size inside a group.
<ToggleButtonGroup>
  <ToggleButton size="sm" id="day">Day</ToggleButton>
  <ToggleButton size="lg" id="week">Week</ToggleButton>
</ToggleButtonGroup>

// After. Set size on the group.
<ToggleButtonGroup size="md">
  <ToggleButton id="day">Day</ToggleButton>
  <ToggleButton id="week">Week</ToggleButton>
</ToggleButtonGroup>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2414 1244430 Thanks @stevegreco! - Graduated UserInfo from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_UserInfo → UserInfo
- UNSTABLE_UserInfoProps → UserInfoProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2413 584ef62 Thanks @stevegreco! - Graduated Virtualizer and layout primitives from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Virtualizer → Virtualizer
- UNSTABLE_TableLayout → TableLayout
- UNSTABLE_GridLayout → GridLayout
- UNSTABLE_ListLayout → ListLayout
- UNSTABLE_WaterfallLayout → WaterfallLayout
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Minor Changes

#2083 862a9e6 Thanks @stevegreco! - Added programmatic query APIs and an MCP server so agents can look up CFA components, props, tokens, and icons without reading source.
- @cfa/design-system-mcp ships the cfa-design-system-mcp server with list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
- @cfa/react-core/query exports listComponents, getComponentProps, and getComponentGuidance.
- @cfa/design-tokens-core/query exports searchTokens and suggestTokens.
- @cfa/icons/query exports searchIcons and getIcon.
#2403 038cb38 Thanks @mitchellcarroll! - Added an optional color prop to Avatar for accent fallback styling.
- Omit color to keep the current behavior: avatars inherit brand colors from the surrounding app theme.
- Set color to a brand accent (red, navy, blue, and others) to distinguish people in a list.
- This is not the v1 primary / secondary theme prop.
```
<Avatar.Root color="navy">
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>
```
#2246 262809d Thanks @stevegreco! - Added alignment prop to BannerMessage for left or center content alignment.
- New alignment prop accepts "left" or "center" (default "center").
- Use alignment="left" when the icon and message should align to the start of the banner.
#2379 947c41b Thanks @stevegreco! - Updated Drawer and Modal layout to match design specifications.
- Added Drawer.Title, Drawer.Content, and Drawer.Footer for composed layouts with sticky footer support.
- Positioned Drawer and Modal close buttons absolutely within container padding.
- Updated Drawer tray padding to 24px with 16px gap between sections.
- Aligned Modal dialog padding and section spacing to design tokens.
- Documented the composition: Title, Content, and Footer as direct children of Modal.Dialog or Drawer.Tray. See packages/react-core/V2-MIGRATION-GUIDE.md.
#2299 38c6955 Thanks @mitchellcarroll! - Added a shared getInitials utility for consistent name-to-initials formatting.
- New getInitials(name) export derives up to two uppercase initials from a display name
```
import { Avatar, getInitials } from "@cfa/react-core";

<Avatar.Fallback>{getInitials("Truett Cathy")}</Avatar.Fallback>;
getInitials("Mary Ann Smith"); // "MS"
```
#2336 851de02 Thanks @stevegreco! - Added official ListBox grid layout support so layout="grid" works without custom CSS.
- layout="grid" renders a 2-column grid by default and keeps React Aria 2D keyboard navigation.
- Set gridColumns to change the column count. The same grid works inside a Switcher popover.
- Override --list-box-grid-column-width to change column width, or --list-box-grid-template-columns to replace the grid template.
- Sections stay grouped. Each section is its own grid, and section headers span all columns.
```
<ListBox.Root layout="grid" aria-label="Apps">
  <ListBox.Item id="ops">Operator Portal</ListBox.Item>
  <ListBox.Item id="admin">Admin Console</ListBox.Item>
</ListBox.Root>
```
#2330 9081840 Thanks @stevegreco! - Added ListBox.LeadingIcon so list items can align a leading icon with the title when a description is present.
- Place ListBox.LeadingIcon inside ListBox.Item instead of a custom flex wrapper.
- The same component is available as Switcher.LeadingIcon, Select.LeadingIcon, and Combobox.LeadingIcon.
- Icon size defaults to 16px. Override with className or style on LeadingIcon.
- List items with href inherit item color and no longer show a browser underline.
```
<ListBox.Item textValue={item.name}>
  <ListBox.LeadingIcon>
    <Restaurant size="sm" />
  </ListBox.LeadingIcon>
  <div>
    <Text slot="label">{item.name}</Text>
    <Text slot="description">{item.description}</Text>
  </div>
</ListBox.Item>
```
#2374 5bd0950 Thanks @stevegreco! - Added size prop to ListBox.Root for small, medium, and large list item styling.
- Pass size="sm", size="md" (default), or size="lg" to control item height, padding, and label typography.
- Selected items use bold body weight per updated Figma specs.
- Select, Combobox, and Switcher are unchanged in this release; they continue to use the default medium size.
```
<ListBox.Root aria-label="Options" size="sm">
  <ListBox.Item id="1">Item 1</ListBox.Item>
</ListBox.Root>
```
#2395 cb0bebe Thanks @mitchellcarroll! - Added Popover.HoverRoot for interactive hover previews.
- Use Popover.HoverRoot instead of Popover.Root to open a non-modal popover on hover, keyboard focus, or long press so preview content can include links and buttons
- Popover.Root stays press-only, so existing usage is unchanged
- Pass inline on Link when the trigger sits in paragraph text
```
<Popover.HoverRoot>
  <Link href={href} inline>
    @{handle}
  </Link>
  <Popover.Panel>Preview content</Popover.Panel>
</Popover.HoverRoot>
```

#2318 fb06242 Thanks @stevegreco! - Added a Switcher component for navigating between apps or contexts.

New composable API: Switcher.Root, Switcher.Trigger, Switcher.Value, Switcher.List, and Switcher.Item
Supports trigger sizes (sm, md, lg), stack and grid list layouts, and optional search filtering via useFilter

import { Switcher } from "@cfa/react-core";

<Switcher.Root
  aria-label="Switch app"
  defaultValue="operator-portal"
  placeholder="Select an app"
>
  <Switcher.Trigger size="md">
    <Switcher.Value />
  </Switcher.Trigger>
  <Switcher.List items={apps}>
    {(item) => <Switcher.Item id={item.id}>{item.name}</Switcher.Item>}
  </Switcher.List>
</Switcher.Root>;

Patch Changes

#2227 e43c79f Thanks @stevegreco! - Updated Breadcrumbs separator spacing for v2 styling.
- Breadcrumb separators now use 8px spacing (--ds-semantic-spacing-md) instead of 16px.
#2286 bf6530e Thanks @stevegreco! - Fixed Button and IconButton variant prop documentation to list literal variant values instead of opaque type aliases.
- variant prop-docs now show "primary" | "secondary" | "tertiary" | "destructive"
- Removed ButtonVariant and IconButtonVariant exports; use ButtonProps["variant"] or IconButtonProps["variant"] if needed
- Updated generated docs for components that compose these buttons
#2331 a30b50f Thanks @mitchellcarroll! - Fixed Card missing the raised elevation box-shadow.
- Card.Root now displays the raised elevation shadow by default.
- Applies to both outlined and non-outlined variants.
- Aligns Card appearance with the Web Card spec.
#2339 b83b4e6 Thanks @mitchellcarroll! - Fixed default accessible names for CartInput increment and decrement buttons.
- Stepper buttons default to “Decrease quantity” and “Increase quantity” when decrementAriaLabel and incrementAriaLabel are omitted.
- incrementAriaLabel and decrementAriaLabel can still be customized.
#2342 ab9b38a Thanks @mitchellcarroll! - Fixed Combobox ignoring shouldFlip on Combobox.Root.
- Combobox.Popover now honors shouldFlip from Combobox.Root, matching Select behavior
- Popover placement near viewport edges now respects the root shouldFlip setting as documented
#2364 ba32b67 Thanks @stevegreco! - Convenience inputs no longer render an empty label when you omit the label prop.
- Applies to TextInput, TextAreaInput, NumberInput, SearchInput, and TimeInput.
- Use aria-label or aria-labelledby when you skip the visible label.
#2355 db8fe23 Thanks @stevegreco! - Renamed semantic background tokens and Tailwind surface utilities.
- color.background.default is now page gray. White surfaces use color.background.surface.
- Replace bg-raised-default with bg-surface, bg-raised-hover with bg-surface-hover, and bg-raised-active with bg-surface-active.
- Replace bg-overlay-backdrop-default with bg-overlay. Overlay panels use bg-surface.
- Removed bg-sunken-default and overflow shadow utilities.
- React Core components use the new tokens internally. Built-in component appearance is unchanged.
Update custom CSS or Tailwind classes that used the old names. See packages/react-core/V2-MIGRATION-GUIDE.md.
#2383 ded6833 Thanks @stevegreco! - Stopped read-only form field labels from flashing on iOS when the field is tapped.
- Suppresses the native iOS tap highlight on field labels and text inputs so focus no longer paints a brief gray flash above read-only values.
- Read-only focus rings are unchanged for keyboard and copy access.
- Applies to labeled text fields such as TextInput and TextAreaInput.
#2383 ded6833 Thanks @stevegreco! - Stopped form fields from flashing a gray hover state when tapped on touch devices.
- Hover border and background now apply only when the pointer can hover, so iOS taps go straight to the focus ring.
- Desktop hover is unchanged.
- Applies to TextInput, SearchInput, NumberInput, ComboBox, TextArea, Select, DatePicker, DateRangePicker, and TimeInput.
#2398 984870a Thanks @mitchellcarroll! - Added documentation pages for Form, Text, and FieldError.
- Import, live examples, and props now live at /components/form/react, /components/text/react, and /components/fielderror/react
- Convenience fields such as TextInput still render FieldError via errorMessage; the FieldError page shows the composition pattern for custom fields
#2298 61cf495 Thanks @mitchellcarroll! - Removed the unsupported inline prop from LinkButton’s TypeScript API and prop docs.
- inline was inherited from LinkProps but never applied by LinkButton
- Use Link when you need inline navigation within body copy
#2330 9081840 Thanks @stevegreco! - Fixed ListBox.Item rest-state background so items use the default surface color.
- Items use the default surface color instead of a transparent background.
- Hover is unchanged.
- Also applies to Select, Combobox, and Switcher list items.
#2338 9b4cd55 Thanks @mitchellcarroll! - Fixed LoadingIndicator and PageLoader to respect prefers-reduced-motion, matching Skeleton.
- Spinners stop when the user has reduced motion enabled.
- LoadingIndicator shows a static dot ring instead.
#2341 e6847b4 Thanks @mitchellcarroll! - Corrected Modal.Overlay and Drawer.Overlay API and stacking documentation.
- Removed isCloseButtonHidden from Modal.Overlay and Drawer.Overlay. Use Modal.Dialog or Drawer.Tray to hide the close button.
- If you passed isCloseButtonHidden to Modal.Overlay or Drawer.Overlay, move it to Modal.Dialog or Drawer.Tray. It never affected Overlay at runtime.
- Updated Modal and Drawer docs. Overlay is for optional custom backdrop styling. For stacking conflicts, set isolation: isolate on the app wrapper instead of overlay z-index.
#2392 bd16f2a Thanks @stevegreco! - Aligned Panel mobile drawer backdrop with the shared overlay background token.
- Panel backdrop now uses the same overlay background token as Modal and Drawer.
- Mobile drawer dimming matches other overlay surfaces when design tokens are loaded.
#2369 0ca0d83 Thanks @mitchellcarroll! - Added a dedicated RangeCalendar documentation page.
- Range selection examples and props now live at /components/rangecalendar/react
- The Calendar page links to RangeCalendar instead of documenting it inline
#2411 b60c8aa Thanks @stevegreco! - Updated selected styling for calendars to match the new tokens.
- Calendar selected days use the solid selected fill and selected text color.
- RangeCalendar shows a subtle track between dates, with solid rounded endpoints. Focus rings on a selected range sit on the day, not the track.
- Button, IconButton, TagGroup, and ListBox use the new selectable and per-variant action tokens. Selected-hover treatments that depended on removed tokens are gone.
#2356 c0ef04f Thanks @seanmcquaid! - Importing a client component from a Server Component now surfaces a more descriptive error.
- Client components are marked client-only, so frameworks propagate a clearer error instead of a generic Server Component failure.
#2401 6988570 Thanks @stevegreco! - Restored design tokens, fonts, and global styles in the published index.css.
- @cfa/react-core/index.css again includes @cfa/design-tokens-core themes, web fonts, and the package globals.
- No adopter import changes. Apps that already import @cfa/react-core/index.css get the missing theme variables back.
#2238 0774f0c Thanks @stevegreco! - Aligned component styling with updated design tokens.
- Chip gray filled styling now uses the renamed chip background token.
- GridList and Menu selected items now use the new selected-state background token.
#2333 33244c7 Thanks @mitchellcarroll! - Fixed Slider and compact ProgressBar track backgrounds not updating when theme track colors are customized.
#2334 cee225a Thanks @mitchellcarroll! - Fixed SearchInput not showing the required indicator on its label.
- SearchInput now passes isRequired to Label, so the required asterisk and data-required match TextInput and NumberInput.
#2104 1e1abbf Thanks @mitchellcarroll! - Added experimental Skeleton loading placeholders behind UNSTABLE_ exports.
- UNSTABLE_Skeleton provides loading context with aria-busy and inert while isLoading is true.
- Supported components (Text, Heading, Link, Card, Avatar, Table, Button, ProgressBar, and others) read useSkeleton() and apply their own skeleton styles.
- SkeletonPrimitive provides manual placeholder blocks with width, height, and borderRadius for layouts that are not built from wired components.
- Export useSkeleton, useSkeletonClassName, and getSkeletonClassName for custom components that should participate in the same loading shell.
Updated dependencies [862a9e6, 0c07914, d5e4b85, b669351, b60c8aa, 0774f0c, 9855ed5, 39e5545, db8fe23, ad0d7fe, 13325cf, 14a6f0b, be66491, d9d764a]:
- @cfa/[email protected]
- @cfa/[email protected]

2.0.0-beta.7

Major Changes

#2376 13514f2 Thanks @stevegreco! - Removed the bold variant from Chip to align with design system guidance.
- variant now accepts only "subtle" (default) and "outlined".
- Remove variant="bold" usages or switch to variant="subtle" or variant="outlined".
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2390 7270090 Thanks @mitchellcarroll! - Updated Combobox for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) on Combobox.Root and Combobox.Input. Root size sizes the trigger and list; Combobox.Input size overrides the trigger only.
- Deprecated compact. It compiles but no longer applies styles. Use size="sm" for the smallest variant; the old compact height maps to size="md". Add size="lg" to keep the previous default trigger height.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2386 363a7c4 Thanks @mitchellcarroll! - Updated DateField and DatePicker by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to DateField.InputGroup and DatePicker to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2387 a3e0ba1 Thanks @mitchellcarroll! - Updated DateRangeField and DateRangePicker by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to DateRangeField.InputGroup and DateRangePicker to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2378 957606c Thanks @mitchellcarroll! - Updated Input, TextInput, SearchInput, and NumberInput for v2 by adding size variants.
- Added size (sm | md | lg, default md) to control height, padding, and typography. SearchInput also sizes the search icon and clear button.
- Default height is now 40px (md). Pass size="lg" to keep the previous 48px default.
- Deprecated compact. It compiles but no longer applies styles. compact={false} is also a no-op. Use size="sm" for the smallest variant; the old compact height maps to size="md".
```
<TextInput label="Name" size="lg" />
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2413 584ef62 Thanks @stevegreco! - Graduated Panel from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Panel → Panel
- UNSTABLE_PanelProps → PanelProps
- UNSTABLE_PanelProviderProps → PanelProviderProps
- UNSTABLE_PanelTriggerProps → PanelTriggerProps
- UNSTABLE_PanelInsetProps → PanelInsetProps
- UNSTABLE_PanelHeaderProps → PanelHeaderProps
- UNSTABLE_PanelFooterProps → PanelFooterProps
- UNSTABLE_PanelContentProps → PanelContentProps
- UNSTABLE_PanelSeparatorProps → PanelSeparatorProps
- UNSTABLE_PanelLayout → PanelLayout
- UNSTABLE_PanelSide → PanelSide
- UNSTABLE_PanelContextProps → PanelContextProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2414 1244430 Thanks @stevegreco! - Graduated ProgressIndicator from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_ProgressIndicator → ProgressIndicator
ProgressIndicatorProps and ProgressIndicatorStepProps were already unprefixed.

See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2305 5a40a63 Thanks @mitchellcarroll! - Removed the @cfa/design-tokens dependency from @cfa/react-core.
- index.css no longer imports @cfa/design-tokens/dist/tokens-no-fonts.css. Components rely solely on @cfa/design-tokens-core (--ds-* tokens).
- If your app still uses legacy --cfa-* tokens and previously relied on react-core’s CSS import to load them, import @cfa/design-tokens directly in your app.
#2390 7270090 Thanks @mitchellcarroll! - Updated Select for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) on Select.Root and Select.Button. Root size sizes the trigger and list; Select.Button size overrides the trigger only.
- Deprecated compact. It compiles but no longer applies styles. Use size="sm" for the smallest variant; the old compact height maps to size="md". Add size="lg" to keep the previous default trigger height.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2367 e642611 Thanks @mitchellcarroll! - Graduated SidebarNav from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_SidebarNav → SidebarNav
- UNSTABLE_SidebarNavRootProps → SidebarNavRootProps
- UNSTABLE_SidebarNavItemProps → SidebarNavItemProps
- UNSTABLE_SidebarNavAccordionItemProps → SidebarNavAccordionItemProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2405 d682e9c Thanks @mitchellcarroll! - Graduated SideNavigation from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_SideNavigation → SideNavigation
- UNSTABLE_SideNavigationProps → SideNavigationProps
- UNSTABLE_SideNavigationTriggerProps → SideNavigationTriggerProps
- UNSTABLE_SideNavigationDataItem → SideNavigationDataItem
- UNSTABLE_SideNavigationLinkItem → SideNavigationLinkItem
- UNSTABLE_SideNavigationNestedLinkItem → SideNavigationNestedLinkItem
- UNSTABLE_SideNavigationSectionItem → SideNavigationSectionItem
- UNSTABLE_SideNavigationDividerItem → SideNavigationDividerItem
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2375 4333a96 Thanks @mitchellcarroll! - Updated TextArea for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control padding and typography.
- Deprecated compact. It compiles but no longer applies styles; use size="sm" instead. Add size="lg" to keep the previous default padding.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2375 4333a96 Thanks @mitchellcarroll! - Updated TextAreaInput for v2 by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control padding and typography.
- Deprecated compact. It compiles but no longer applies styles; use size="sm" instead. Add size="lg" to keep the previous default padding.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2389 299181e Thanks @mitchellcarroll! - Removed ThemeProvider and the @cfa/react-core/theme entry point.
- Import @cfa/react-core/index.css directly in your app entry or global stylesheet instead of wrapping with ThemeProvider.
- The @cfa/react-core/theme subpath export is no longer available.
- If your app already imports @cfa/react-core/index.css, remove the ThemeProvider wrapper only.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2388 1ef0b49 Thanks @mitchellcarroll! - Updated TimeInput by adding size variants and deprecating compact.
- Added size (sm | md | lg, default md) to control field height, padding, and segment typography.
- Default height is now 40px (md). Pass size="lg" to keep the previous ~48px default.
- Deprecated compact. It compiles but no longer applies styles. Use size="md" for the old compact height; use size="sm" for the smallest variant.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2414 1244430 Thanks @stevegreco! - Graduated UserInfo from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_UserInfo → UserInfo
- UNSTABLE_UserInfoProps → UserInfoProps
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2413 584ef62 Thanks @stevegreco! - Graduated Virtualizer and layout primitives from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Virtualizer → Virtualizer
- UNSTABLE_TableLayout → TableLayout
- UNSTABLE_GridLayout → GridLayout
- UNSTABLE_ListLayout → ListLayout
- UNSTABLE_WaterfallLayout → WaterfallLayout
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Minor Changes

#2403 038cb38 Thanks @mitchellcarroll! - Added an optional color prop to Avatar for accent fallback styling.
- Omit color to keep the current behavior: avatars inherit brand colors from the surrounding app theme.
- Set color to a brand accent (red, navy, blue, and others) to distinguish people in a list.
- This is not the v1 primary / secondary theme prop.
```
<Avatar.Root color="navy">
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>
```
#2379 947c41b Thanks @stevegreco! - Updated Drawer and Modal layout to match design specifications.
- Added Drawer.Title, Drawer.Content, and Drawer.Footer for composed layouts with sticky footer support
- Positioned Drawer and Modal close buttons absolutely within container padding
- Updated Drawer tray padding to 24px with 16px gap between sections
- Aligned Modal dialog padding and section spacing to design tokens
- Documented canonical composition: Title, Content, and Footer as direct children of Modal.Dialog or Drawer.Tray (see v2 migration guide)
#2374 5bd0950 Thanks @stevegreco! - Added size prop to ListBox.Root for small, medium, and large list item styling.
- Pass size="sm", size="md" (default), or size="lg" to control item height, padding, and label typography.
- Selected items use bold body weight per updated Figma specs.
- Select, Combobox, and Switcher are unchanged in this release; they continue to use the default medium size.
```
<ListBox.Root aria-label="Options" size="sm">
  <ListBox.Item id="1">Item 1</ListBox.Item>
</ListBox.Root>
```
#2395 cb0bebe Thanks @mitchellcarroll! - Added Popover.HoverRoot for interactive hover previews.
- Use Popover.HoverRoot instead of Popover.Root to open a non-modal popover on hover, keyboard focus, or long press so preview content can include links and buttons
- Popover.Root stays press-only, so existing usage is unchanged
- Pass inline on Link when the trigger sits in paragraph text
```
<Popover.HoverRoot>
  <Link href={href} inline>
    @{handle}
  </Link>
  <Popover.Panel>Preview content</Popover.Panel>
</Popover.HoverRoot>
```

Patch Changes

#2383 ded6833 Thanks @stevegreco! - Stopped read-only form field labels from flashing on iOS when the field is tapped.
- Suppresses the native iOS tap highlight on field labels and text inputs so focus no longer paints a brief gray flash above read-only values.
- Read-only focus rings are unchanged for keyboard and copy access.
- Applies to labeled text fields such as TextInput and TextAreaInput.
#2383 ded6833 Thanks @stevegreco! - Stopped form fields from flashing a gray hover state when tapped on touch devices.
- Hover border and background now apply only when the pointer can hover, so iOS taps go straight to the focus ring.
- Desktop hover is unchanged.
- Applies to TextInput, SearchInput, NumberInput, ComboBox, TextArea, Select, DatePicker, DateRangePicker, and TimeInput.
#2398 984870a Thanks @mitchellcarroll! - Added documentation pages for Form, Text, and FieldError.
- Import, live examples, and props now live at /components/form/react, /components/text/react, and /components/fielderror/react
- Convenience fields such as TextInput still render FieldError via errorMessage; the FieldError page shows the composition pattern for custom fields
#2392 bd16f2a Thanks @stevegreco! - Aligned Panel mobile drawer backdrop with the shared overlay background token.
- Panel backdrop now uses the same overlay background token as Modal and Drawer
- Mobile drawer dimming matches other overlay surfaces when design tokens are loaded
#2369 0ca0d83 Thanks @mitchellcarroll! - Added a dedicated RangeCalendar documentation page.
- Range selection examples and props now live at /components/rangecalendar/react
- The Calendar page links to RangeCalendar instead of documenting it inline
#2401 6988570 Thanks @stevegreco! - Restored design tokens, fonts, and global styles in the published index.css.
- @cfa/react-core/index.css again includes @cfa/design-tokens-core themes, web fonts, and the package globals.
- No adopter import changes. Apps that already import @cfa/react-core/index.css get the missing theme variables back.
Updated dependencies [39e5545, ad0d7fe, be66491]:
- @cfa/[email protected]
- @cfa/[email protected]

2.0.0-beta.6

Major Changes

#2353 66e67bb Thanks @mitchellcarroll! - Graduated calendar primitives from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_Calendar → Calendar
- UNSTABLE_RangeCalendar → RangeCalendar
- UNSTABLE_CalendarGrid → CalendarGrid
- UNSTABLE_CalendarCell → CalendarCell
- Corresponding *Props types renamed the same way
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2357 097fc27 Thanks @mitchellcarroll! - Graduated date and time field components from experimental UNSTABLE_* exports to stable unprefixed names.
- UNSTABLE_DateField → DateField
- UNSTABLE_DateRangePicker → DateRangePicker
- UNSTABLE_DateRangeField → DateRangeField
- UNSTABLE_TimeInput → TimeInput
- Corresponding *Props types were already unprefixed
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2352 0d66030 Thanks @mitchellcarroll! - Date utilities from @internationalized/date now live on a dedicated @cfa/react-core/dates subpath instead of the root and /server entries.

Minor Changes

#2336 851de02 Thanks @stevegreco! - Added official ListBox grid layout support so layout="grid" works without custom CSS.
- layout="grid" renders a 2-column grid by default and keeps React Aria 2D keyboard navigation.
- Set gridColumns to change the column count. The same grid works inside a Switcher popover.
- Override --list-box-grid-column-width to change column width, or --list-box-grid-template-columns to replace the grid template.
- Sections stay grouped. Each section is its own grid, and section headers span all columns.
```
<ListBox.Root layout="grid" aria-label="Apps">
  <ListBox.Item id="ops">Operator Portal</ListBox.Item>
  <ListBox.Item id="admin">Admin Console</ListBox.Item>
</ListBox.Root>
```
#2330 9081840 Thanks @stevegreco! - Added ListBox.LeadingIcon so list items can align a leading icon with the title when a description is present.
- Place ListBox.LeadingIcon inside ListBox.Item instead of a custom flex wrapper.
- The same component is available as Switcher.LeadingIcon, Select.LeadingIcon, and Combobox.LeadingIcon.
- Icon size defaults to 16px. Override with className or style on LeadingIcon.
- List items with href inherit item color and no longer show a browser underline.
```
<ListBox.Item textValue={item.name}>
  <ListBox.LeadingIcon>
    <Restaurant size="sm" />
  </ListBox.LeadingIcon>
  <div>
    <Text slot="label">{item.name}</Text>
    <Text slot="description">{item.description}</Text>
  </div>
</ListBox.Item>
```

Patch Changes

#2339 b83b4e6 Thanks @mitchellcarroll! - Fixed default accessible names for CartInput increment and decrement buttons.
- Stepper buttons default to “Decrease quantity” and “Increase quantity” when decrementAriaLabel and incrementAriaLabel are omitted.
- incrementAriaLabel and decrementAriaLabel can still be customized.
#2342 ab9b38a Thanks @mitchellcarroll! - Fixed Combobox ignoring shouldFlip on Combobox.Root.
- Combobox.Popover now honors shouldFlip from Combobox.Root, matching Select behavior
- Popover placement near viewport edges now respects the root shouldFlip setting as documented
#2364 ba32b67 Thanks @stevegreco! - Convenience inputs no longer render an empty label when you omit the label prop.
- Applies to TextInput, TextAreaInput, NumberInput, SearchInput, and TimeInput.
- Use aria-label or aria-labelledby when you skip the visible label.
#2355 db8fe23 Thanks @stevegreco! - Renamed semantic background tokens and Tailwind surface utilities.
- color.background.default is now page gray. White surfaces use color.background.surface.
- Replace bg-raised-default with bg-surface, bg-raised-hover with bg-surface-hover, and bg-raised-active with bg-surface-active.
- Replace bg-overlay-backdrop-default with bg-overlay. Overlay panels use bg-surface.
- Removed bg-sunken-default and overflow shadow utilities.
- React Core components use the new tokens internally. Built-in component appearance is unchanged.
Update custom CSS or Tailwind classes that used the old names. See V2-MIGRATION-GUIDE.md.
#2330 9081840 Thanks @stevegreco! - Fixed ListBox.Item rest-state background so items use the default surface color.
- Items now use var(--ds-semantic-color-background-default) instead of a transparent background.
- Hover is unchanged (background-default-hover).
- Also applies to Select, Combobox, and Switcher list items.
#2341 e6847b4 Thanks @mitchellcarroll! - Corrected Modal.Overlay and Drawer.Overlay API and stacking documentation.
- Removed isCloseButtonHidden from Modal.Overlay and Drawer.Overlay. Use Modal.Dialog or Drawer.Tray to hide the close button.
- If you passed isCloseButtonHidden to Modal.Overlay or Drawer.Overlay, move it to Modal.Dialog or Drawer.Tray — it never affected the Overlay at runtime.
- Updated Modal and Drawer docs: Overlay is for optional custom backdrop styling; use app-wrapper isolation: isolate for stacking conflicts instead of overlay z-index.
#2356 c0ef04f Thanks @seanmcquaid! - Importing a client component from a Server Component now surfaces a more descriptive error.
- Client components are marked client-only, so frameworks propagate a clearer error instead of a generic Server Component failure.
Updated dependencies [db8fe23, 14a6f0b]:
- @cfa/[email protected]
- @cfa/[email protected]

2.0.0-beta.5

Minor Changes

#2083 862a9e6 Thanks @stevegreco! - Add programmatic query APIs and an MCP server so agents and tooling can discover CFA components, props, tokens, and icons without reading source.
- @cfa/design-system-mcp: New MCP server (cfa-design-system-mcp) exposing list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
- @cfa/react-core/query: listComponents, getComponentProps, and getComponentGuidance for component catalog, prop contracts, and generated usage docs.
- @cfa/design-tokens-core/query: searchTokens and suggestTokens for token lookup and CSS-property-based suggestions.
- @cfa/icons/query: searchIcons and getIcon for icon discovery and raw SVG retrieval.

Patch Changes

#2331 a30b50f Thanks @mitchellcarroll! - Fixed Card missing the raised elevation box-shadow.
- Card.Root now displays the raised elevation shadow by default.
- Applies to both outlined and non-outlined variants.
- Aligns Card appearance with the Web Card spec.
#2338 9b4cd55 Thanks @mitchellcarroll! - Fix LoadingIndicator and PageLoader to respect prefers-reduced-motion, matching Skeleton behavior.
- Stop spinner animations when the user has reduced motion enabled in their OS or browser
- Show a static dot ring for LoadingIndicator when motion is reduced
- Improves accessibility for users sensitive to motion (WCAG 2.2.2)
#2333 33244c7 Thanks @mitchellcarroll! - Fixed Slider and compact ProgressBar track backgrounds not updating when theme track colors are customized.
#2334 cee225a Thanks @mitchellcarroll! - Fixed SearchInput not showing the required indicator on its label.
- SearchInput now passes isRequired to Label, so the required asterisk and data-required match TextInput and NumberInput.
Updated dependencies [862a9e6, 13325cf, d9d764a]:
- @cfa/[email protected]
- @cfa/[email protected]

2.0.0-beta.4

Major Changes

#2315 1a8f6df Thanks @stevegreco! - Updated CartInput for v2 styling and theme inheritance.
- Removed the color prop. Cart inputs now inherit brand colors from the surrounding app theme.
- Default size is now md (was lg). Add size="lg" to keep the previous implicit height.
- Visual design updated to match v2 form field specs: form field border radius, default text color, and IconButton increment/decrement controls (replacing custom button styling).
- Read-only state styling aligns with other v2 form fields.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2281 2dc4101 Thanks @stevegreco! - Updated Input for v2 by removing the success state.
- Removed the isSuccess prop from Input and success styling.
- Combobox.Input extends InputProps, so it no longer accepts isSuccess either.
- Default, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2279 fb5171a Thanks @stevegreco! - Updated NumberInput for v2 by removing the success state.
- Removed the isSuccess prop from NumberInput.
- Default, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2291 b9b10a5 Thanks @mitchellcarroll! - Updated PageLoader for v2 by removing scoped brand theming.
- Removed the color prop. Page loaders now inherit brand colors from the surrounding app theme instead of setting data-theme on the component.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2263 ea4cb65 Thanks @stevegreco! - Updated TagGroup for v2 styling to align tags with the Figma spec and inherit app theme.
- Replaced hard-coded tag colors with design tokens. Tags now inherit brand colors from the surrounding app theme.
- Updated tag shape, padding, and interaction states to match v2 Figma.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2278 8c73f8c Thanks @stevegreco! - Updated Text for v2 by removing the success state.
- Removed the isSuccess prop and success styling.
- Select.Description, Combobox.Description, Slider.Description, TagGroup.Description, DatePicker.Description, and DateRangePicker.Description no longer accept isSuccess.
- Invalid state styling is unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2271 eeaa854 Thanks @stevegreco! - Updated ToggleButton and ToggleButtonGroup for v2 styling aligned with Button and IconButton.
- Updated sm, md, and lg sizes to match Button heights (32px, 40px, and 48px) with consistent 1px borders and label typography (label-small for sm, label-default for md and lg).
- Updated icon variant padding and icon sizes (16px, 24px, 24px) to align with IconButton at the same size steps.
- Migrated styling to v2 semantic color tokens. Selected state no longer overrides text color, and pressed/selected-hover styling was removed.
- ToggleButtonGroup size now controls sizing for every child button. Individual ToggleButton size props are ignored inside a group.
Migration:
```
// Before — per-button size inside a group
<ToggleButtonGroup>
  <ToggleButton size="sm" id="day">Day</ToggleButton>
  <ToggleButton size="lg" id="week">Week</ToggleButton>
</ToggleButtonGroup>

// After — set size on the group
<ToggleButtonGroup size="md">
  <ToggleButton id="day">Day</ToggleButton>
  <ToggleButton id="week">Week</ToggleButton>
</ToggleButtonGroup>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Minor Changes

#2299 38c6955 Thanks @mitchellcarroll! - Added a shared getInitials utility for consistent name-to-initials formatting.
- New getInitials(name) export derives up to two uppercase initials from a display name
```
import { Avatar, getInitials } from "@cfa/react-core";

<Avatar.Fallback>{getInitials("Truett Cathy")}</Avatar.Fallback>;
getInitials("Mary Ann Smith"); // "MS"
```

#2318 fb06242 Thanks @stevegreco! - Added a Switcher component for navigating between apps or contexts.

New composable API: Switcher.Root, Switcher.Trigger, Switcher.Value, Switcher.List, and Switcher.Item
Supports trigger sizes (sm, md, lg), stack and grid list layouts, and optional search filtering via useFilter

import { Switcher } from "@cfa/react-core";

<Switcher.Root
  aria-label="Switch app"
  defaultValue="operator-portal"
  placeholder="Select an app"
>
  <Switcher.Trigger size="md">
    <Switcher.Value />
  </Switcher.Trigger>
  <Switcher.List items={apps}>
    {(item) => <Switcher.Item id={item.id}>{item.name}</Switcher.Item>}
  </Switcher.List>
</Switcher.Root>;

Patch Changes

#2286 bf6530e Thanks @stevegreco! - Fixed Button and IconButton variant prop documentation to list literal variant values instead of opaque type aliases.
- variant prop-docs now show "primary" | "secondary" | "tertiary" | "destructive"
- Removed ButtonVariant and IconButtonVariant exports; use ButtonProps["variant"] or IconButtonProps["variant"] if needed
- Updated generated docs for components that compose these buttons
#2298 61cf495 Thanks @mitchellcarroll! - Removed the unsupported inline prop from LinkButton’s TypeScript API and prop docs.
- inline was inherited from LinkProps but never applied by LinkButton
- Use Link when you need inline navigation within body copy
#2104 1e1abbf Thanks @mitchellcarroll! - Added experimental Skeleton loading placeholders behind UNSTABLE_ exports.
- UNSTABLE_Skeleton provides loading context with aria-busy and inert while isLoading is true.
- Supported components (Text, Heading, Link, Card, Avatar, Table, Button, ProgressBar, and others) read useSkeleton() and apply their own skeleton styles.
- SkeletonPrimitive provides manual placeholder blocks with width, height, and borderRadius for layouts that are not built from wired components.
- Export useSkeleton, useSkeletonClassName, and getSkeletonClassName for custom components that should participate in the same loading shell.
Updated dependencies [9855ed5]:
- @cfa/[email protected]

2.0.0-beta.3

Major Changes

#2264 e454d88 Thanks @stevegreco! - Updated form field components for v2 to show description and errorMessage together when a field is invalid.
- description and errorMessage now render together when isInvalid is true, with the error above the description.
- Applies to TextInput, TextAreaInput, NumberInput, SearchInput, TimeInput, DatePicker, DateRangePicker, Checkbox, CheckboxGroup, RadioGroup, Switch, and the CartInput recipe.
- On TextInput and TextAreaInput, character count remains top-right when both messages are visible.
- Review layouts if you previously relied on the description disappearing when invalid.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2260 b669351 Thanks @stevegreco! - Updated IconButton and LinkIconButton for v2 styling aligned with Button.
- Added variant prop (primary, secondary, tertiary, destructive) matching Button semantics. destructive is a new variant — there was no color="destructive" equivalent.
- Removed the color prop. Icon buttons now inherit brand colors from the surrounding app theme instead of setting data-theme on the component.
- Changed the default size from md to xs. Icon buttons without an explicit size render smaller than v1.
- Updated sizes to xs, sm, md, and lg. xl is removed.
- Icon buttons render as squares at the same height as their Button counterparts where sizes align.
- Default variant is tertiary (replaces color="gray").
- Styling can be customized via CSS custom properties (--icon-button-content, --icon-button-surface, and related surface tokens).
If you relied on the previous implicit medium size, add size="md":
```
// Before (implicit md + gray)
<IconButton aria-label="Close"><Close /></IconButton>

// After (explicit md to keep the old height)
<IconButton aria-label="Close" size="md"><Close /></IconButton>
```
Migration:
```
// Before
<IconButton color="gray" size="xs"><Close /></IconButton>
<IconButton color="primary" size="md"><Download /></IconButton>
<IconButton color="white" aria-label="Close"><Close /></IconButton>

// After
<IconButton variant="tertiary"><Close /></IconButton>
<IconButton variant="tertiary" size="md"><Download /></IconButton>
```
Previous color="primary" and color="secondary" were brand-colored ghost icons — use variant="tertiary". For filled or outlined icon buttons, use variant="primary" or variant="secondary".

For icon buttons on knockout or dark surfaces, replace color="white" with a CSS override:
```
.my-surface {
  --icon-button-content: var(--ds-semantic-color-content-knockout);
}
```
Requires an updated @cfa/design-tokens-core release for --ds-semantic-size-xs and v2 button surface tokens used by icon button variants.

See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2262 9d8e3f1 Thanks @stevegreco! - Updated LoadingIndicator for v2 styling with color variants.
- Added variant prop: "brand" (default), "dark", and "light".
- Each variant maps to component-level design tokens.
- isDisabled continues to apply muted gray styling and overrides the active variant.
- Default variant="brand" preserves the existing appearance for current usage.
Migration:
```
// Before — brand styling (unchanged)
<LoadingIndicator />

// After — explicit variants for different backgrounds
<LoadingIndicator variant="dark" />
<LoadingIndicator variant="light" />
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2266 94dd282 Thanks @mitchellcarroll! - Updated SearchInput for v2 by removing the success state.
- Removed the isSuccess prop from SearchInput.
- Default, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2267 6fe0ff1 Thanks @mitchellcarroll! - Updated Select for v2 by removing the success state.
- Removed the isSuccess prop from Select.Root.
- Removed success styling (data-success) from the select field.
- List overlay inherits app theme via ListBox (no hard-coded navy theming).
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Patch Changes

Updated dependencies [0c07914, b669351]:
- @cfa/[email protected]

2.0.0-beta.2

Major Changes

#2248 6dc1e69 Thanks @stevegreco! - Updated Calendar and RangeCalendar for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from Calendar and RangeCalendar. Calendars now inherit brand colors from the surrounding app theme.
- DatePicker and DateRangePicker inherit the same behavior through their calendar popovers.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2255 a0edf0e Thanks @stevegreco! - Updated Combobox for v2 by removing the success state.
- Removed the isSuccess prop from Combobox.Root.
- Removed success styling (data-success) from the combobox field.
- List overlay inherits app theme via ListBox (no hard-coded navy theming).
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2259 d3efb0e Thanks @stevegreco! - Updated GridList for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from GridList.Root. Grid lists now inherit brand colors from the surrounding app theme.
- Updated item interaction states to use v2 semantic tokens for hover, selected, and disabled treatments.
- Selected items now use label font-weight in addition to the selected background.
- Disabled items now use the disabled background and text colors.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2252 3be855a Thanks @stevegreco! - Updated ProgressBar for v2 by removing color options and using semantic fill colors.
- Removed the color prop.
- Default fill uses the info semantic color and switches to success green when the value reaches maxValue.
- Exposed --progress-bar-fill-color to override the in-progress fill color.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2256 748f54d Thanks @stevegreco! - Updated SidebarNav for v2 by removing scoped brand theming.
- Removed the color prop from SidebarNav.Root, SidebarNav.NavItem, and SidebarNav.AccordionItem. Sidebar navigation now inherits brand colors from the surrounding app theme.
- Removed hard-coded data-theme scoping from sidebar navigation items.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2253 8dbb8fc Thanks @stevegreco! - Updated Slider for v2 by removing scoped brand theming.
- Removed the color prop. Sliders now inherit brand colors from the surrounding app theme.
- Track, thumb, and fill colors use semantic tokens under the app theme.
- Marks and ticks remain supported with no API changes.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2254 0896073 Thanks @stevegreco! - Updated Stepper for v2 by removing scoped brand theming.
- Removed the color prop. Steppers now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

2.0.0-beta.1

Major Changes

#2245 83c97b6 Thanks @stevegreco! - Updated Avatar for v2 styling by removing scoped brand theming.
- Removed the color prop. Avatars now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2236 a5eb65f Thanks @stevegreco! - Updated Checkbox for v2 styling by removing scoped brand theming and the success state.
- Checkbox now inherits brand colors from the surrounding app theme.
- Removed the isSuccess prop and success styling.
- Default, hover, focus, disabled, invalid, and read-only states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2247 85ff504 Thanks @stevegreco! - Updated Chip for v2 styling with semantic color refresh, bold/subtle variants, and theme inheritance.
- Removed color="navy".
- Renamed variant="filled" to variant="subtle" (the new default).
- Added variant="bold" for higher-contrast filled chips.
- variant="outlined" is unchanged and does not use bold/subtle background styling.
- Chips no longer set data-theme; they inherit the surrounding app theme.
- Updated success, warning, and error styling to match the v2 Figma spec.
Migration:
```
// Before
<Chip variant="filled" color="navy">Label</Chip>

// After — remove navy; use subtle (or omit variant) for the previous filled look
<Chip variant="subtle">Label</Chip>
<Chip variant="bold" color="success">Label</Chip>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2251 a12c24a Thanks @stevegreco! - Updated Divider for v2 styling with a bold default and a new subtle option.
- The default divider now uses a bold border treatment.
- Added variant="subtle" for the previous lighter default appearance.
- Menu.Divider defaults to variant="subtle" so menu dividers are unchanged.
Migration:
```
// Before
<Divider />

// After — keep the previous lighter look
<Divider variant="subtle" />
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2244 4c83a04 Thanks @stevegreco! - Updated ListBox for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from ListBox.Root. List boxes now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2249 d8e3064 Thanks @stevegreco! - Updated Menu for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from Menu.Popover. Menus now inherit brand colors from the surrounding app theme.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2237 6ef0f67 Thanks @stevegreco! - Updated RadioGroup for v2 styling by removing scoped brand theming and the success state.
- Removed hard-coded data-theme="cfa-navy" from RadioGroup. Radio groups now inherit brand colors from the surrounding app theme.
- Removed the isSuccess prop from Radio and success styling from radio options.
- Default, selected, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2240 42a9620 Thanks @stevegreco! - Updated Table for v2 styling by removing scoped brand theming.
- Removed hard-coded data-theme="cfa-navy" from Table.Root. Tables now inherit brand colors from the surrounding app theme.
- Row, cell, header, and selection states use theme tokens from the app context.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2241 abdbe35 Thanks @stevegreco! - Updated Tabs for v2 styling by removing scoped brand theming and aligning sizing with Figma.
- Removed the color prop. Tabs now inherit brand colors from the surrounding app theme.
- Updated tab sizing to match the v2 Figma spec.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2231 4976423 Thanks @mitchellcarroll! - Updated TextArea for v2 by removing the success state.
- Removed the isSuccess prop from TextArea.
- Default, invalid, disabled, and compact states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2235 1454ff6 Thanks @stevegreco! - Updated TextAreaInput for v2 by removing the success state.
- Removed the isSuccess prop from TextAreaInput.
- Default, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2230 7e86326 Thanks @mitchellcarroll! - Updated TextInput for v2 by removing the success state.
- Removed the isSuccess prop from TextInput.
- Default, invalid, and disabled states are unchanged.
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Minor Changes

#2246 262809d Thanks @stevegreco! - Added alignment prop to BannerMessage for left or center content alignment.
- New alignment prop accepts "left" or "center" (default "center").
- Use alignment="left" when the icon and message should align to the start of the banner.

Patch Changes

#2238 0774f0c Thanks @stevegreco! - Aligned component styling with updated design tokens.
- Chip gray filled styling now uses the renamed chip background token.
- GridList and Menu selected items now use the new selected-state background token.
Updated dependencies [0774f0c]:
- @cfa/[email protected]

2.0.0-beta.0

Major Changes

#2225 241cc66 Thanks @stevegreco! - Updated Badge for v2 styling by removing scoped brand theming.
- Removed the color prop. Badges now inherit brand colors from the surrounding app theme instead of setting data-theme on the component.
- Badge appearance under the default app theme matches the v2 Figma spec.
Migration:
```
// Before
<Badge badgeContent={4} color="primary">
  <Calendar size="md" />
</Badge>
<Badge badgeContent={4} color="secondary" border>
  <Calendar size="md" />
</Badge>

// After — remove `color`; styling comes from the app theme
<Badge badgeContent={4}>
  <Calendar size="md" />
</Badge>
<Badge badgeContent={4} border>
  <Calendar size="md" />
</Badge>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.
#2222 89a0583 Thanks @stevegreco! - Updated Button and LinkButton for v2 styling and variant naming.
- Renamed variants to primary, secondary, and tertiary (replacing filled, outlined, and text).
- Removed the color prop. Buttons now inherit brand colors from the surrounding theme instead of setting data-theme on the component.
- Changed the default size from lg to md. Buttons without an explicit size render at medium height (40px) instead of large (48px).
- Updated border width and small-size label typography to match v2 specs.
- v2 styling aligns with the experimental-red default theme from @cfa/design-tokens-core. If your app relies on the previous cfa-red default, review visual output after upgrading.
Migration:
```
// Before
<Button variant="filled" color="secondary">Save</Button>
<Button variant="outlined">Cancel</Button>
<Button variant="text">Dismiss</Button>

// After
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="tertiary">Dismiss</Button>
```
Removing color does not change the button variant. color="secondary" alone should become variant="primary" with color removed — not variant="secondary".

If you relied on the previous implicit large size, add size="lg":
```
// Before (implicit large)
<Button>Save</Button>

// After (explicit large)
<Button size="lg">Save</Button>
```
See packages/react-core/V2-MIGRATION-GUIDE.md for the full v2 migration guide.

Patch Changes

#2227 e43c79f Thanks @stevegreco! - Updated Breadcrumbs separator spacing for v2 styling.
- Breadcrumb separators now use 8px spacing (--ds-semantic-spacing-md) instead of 16px.
Updated dependencies [d5e4b85]:
- @cfa/[email protected]

1.5.0

Minor Changes

#2076 3e1dc97 Thanks @stevegreco! - Enhanced Checkbox, Radio, and Switch with field-level description and validation support aligned with other form controls.
- Checkbox: Added errorMessage prop to display validation text below the control when isInvalid.
- Radio: Added description prop on individual <Radio /> options for per-choice helper text.
- Switch: Added errorMessage prop to display validation text below the control when isInvalid.
- Description and error messages are now wired through React Aria field slots for improved accessibility (aria-describedby / aria-errormessage).
#2080 d2bb17c Thanks @stevegreco! - Added Combobox.Value for displaying the current selection outside the search input.
- Export Combobox.Value and ComboboxValueProps alongside other Combobox compound parts.
- Supports a placeholder when nothing is selected and a render function with selectedItems for custom displays (for example, tag chips in multiple selection).
- Aligns Combobox composition with Select.Value for multi-select and controlled selection UIs.
#2076 3e1dc97 Thanks @stevegreco! - Added new Table.Footer component
#2092 f0a64be Thanks @stevegreco! - Added LinkIconButton for icon-only navigation links that share IconButton styling.
- Export LinkIconButton and LinkIconButtonProps from @cfa/react-core
- Supports the same color, size, and isDisabled props as IconButton, plus standard anchor attributes like href and target
```
import { LinkIconButton } from "@cfa/react-core";
import { Download } from "@cfa/system-icons";

<LinkIconButton href="/reports" aria-label="Download report">
  <Download />
</LinkIconButton>;
```
#2086 5fc4ce9 Thanks @stevegreco! - Expanded side navigation recipes and panel navigation primitives for application shells.
- Added UNSTABLE_UserInfo recipe for signed-in user summaries in panel footers and similar compact surfaces.
- Enhanced UNSTABLE_SideNavigation with header and footer slots, typed navigation items (link, section, divider), closeOnNavigate, and automatic section expansion when currentKey matches a nested item. Place SideNavigation.Trigger in the content area to reopen the panel after it closes.
- Added isExternal to SidebarNav.NavItem to show an external-link icon and open links in a new tab by default.
- Migration (UNSTABLE_SideNavigation): rename title to header; add type to top-level items; use { type: "divider", id } entries for separators; render SideNavigation.Trigger in children instead of relying on a built-in header trigger.
#2186 da962eb Thanks @mitchellcarroll! - Added Toast for brief, non-blocking status messages.
- Export ToastRegion, toastQueue, and related types from @cfa/react-core.
- Queue-first API: mount ToastRegion once near the app root, then call toastQueue.add() from anywhere.
- Supports info, success, warning, and error severities with optional description, action, and custom icon.
- Configurable viewport placement (default "bottom right"), optional auto-dismiss via timeout, and stacked display of up to three visible toasts.
- Toast content uses MessageBlock styling for consistency with inline alerts.

Patch Changes

#2087 e711501 Thanks @mitchellcarroll! - Reset default list spacing on Breadcrumbs so trails align without browser <ol> inset.
#2073 2ff3729 Thanks @mitchellcarroll! - Fixed outlined Avatar fallback text color so primary and secondary avatars render the expected themed initials.
- Outlined primary Avatar fallback text now renders red on the default background.
- Outlined secondary Avatar fallback text now renders navy on the default background.
#2076 3e1dc97 Thanks @stevegreco! - Fixed spacing issues for descriptions on CheckboxGroup, RadioGroup, Slider, and Switch. Unintended spacing between fields and description text was removed to bring these fields into alignment.
#2211 5671920 Thanks @stevegreco! - Added sideEffects: false to react-core for better tree shaking
#2192 28b4753 Thanks @stevegreco! - Fixed ListBox selection styling and layout stability for structured list items.
- ListBox items now reserve space for the selection checkmark, preventing horizontal layout shift when selecting or unselecting an item (including in Select popover lists). Reserved check space is omitted when selectionMode="none".
- Selected ListBox labels using Text slot="label" now inherit the expected label font-weight.
- Text slot="description" keeps body font-weight when a list item is selected, avoiding description bolding and reflow.
- Updated Text line-height tokens for default, description, and error message slots.
#2023 9da13cb Thanks @mitchellcarroll! - Updated component spacing to better align React Core components with the latest Figma designs.
- Adjusted spacing for Card, CheckboxGroup, Chip, GridList, ListBox, MessageBlock, Tabs, TagGroup, and TextAreaInput.
#2075 9036fe9 Thanks @mitchellcarroll! - Updated outlined Card borders to use the softer subtle border treatment.
#2161 3433d79 Thanks @mitchellcarroll! - Fixed PageLoader color prop styling so primary and secondary themes render correctly again.
- color="primary" and color="secondary" now apply the expected CFA red and navy themes to the spinner and center icon.
- Restores behavior that regressed after recent refactors left the prop documented but visually ineffective.
#2204 c46ffdb Thanks @mitchellcarroll! - Updated React Aria dependencies to react-aria-components 1.19.0.
- Aligns @cfa/react-core with the latest React Aria release, including upstream bug fixes and accessibility improvements.
- No breaking changes or migration steps are required for existing consumers.
#2213 1841125 Thanks @stevegreco! - @cfa/react-core now depends on @cfa/icons instead of @cfa/system-icons and @cfa/brand-icons.
- Add @cfa/icons as a direct dependency if your app imports icons alongside react-core components
- Update icon imports to @cfa/icons/system, @cfa/icons/brand, or @cfa/icons/logos
```
import { Bell } from "@cfa/icons/system";
import { SauceBottle } from "@cfa/icons/brand";
import { Symbol } from "@cfa/icons/logos";
```
#2143 37636cb Thanks @stevegreco! - Removed premature @deprecated annotations from the color prop on themed components.
- Avatar, Badge, Button, LinkButton, IconButton, IconbarNav, PageLoader, ProgressBar, SidebarNav, Slider, Tabs, and CartInput no longer surface @deprecated warnings for color in the IDE, prop tables, or generated docs.
- The color prop is still planned for removal in v2, but deprecation notices were added before a clear alternative theming path was available.
- The color prop continues to work as before in the current release; no migration is required yet.
Updated dependencies [d75460b, 6e7207e, 93e5fbd, bb4c6c6, bb4c6c6]:
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]

1.5.0-beta.6

Patch Changes

#2211 5671920 Thanks @stevegreco! - Added sideEffects: false to react-core for better tree shaking
#2213 1841125 Thanks @stevegreco! - @cfa/react-core now depends on @cfa/icons instead of @cfa/system-icons and @cfa/brand-icons.
- Add @cfa/icons as a direct dependency if your app imports icons alongside react-core components
- Update icon imports to @cfa/icons/system, @cfa/icons/brand, or @cfa/icons/logos
```
import { Bell } from "@cfa/icons/system";
import { SauceBottle } from "@cfa/icons/brand";
import { Symbol } from "@cfa/icons/logos";
```

1.5.0-beta.5

Patch Changes

Updated dependencies []:
- @cfa/[email protected]
- @cfa/[email protected]

1.5.0-beta.4

Patch Changes

#2192 28b4753 Thanks @stevegreco! - Fixed ListBox selection styling and layout stability for structured list items.
- ListBox items now reserve space for the selection checkmark, preventing horizontal layout shift when selecting or unselecting an item (including in Select popover lists). Reserved check space is omitted when selectionMode="none".
- Selected ListBox labels using Text slot="label" now inherit the expected label font-weight.
- Text slot="description" keeps body font-weight when a list item is selected, avoiding description bolding and reflow.
- Updated Text line-height tokens for default, description, and error message slots.
#2204 c46ffdb Thanks @mitchellcarroll! - Updated React Aria dependencies to react-aria-components 1.19.0.
- Aligns @cfa/react-core with the latest React Aria release, including upstream bug fixes and accessibility improvements.
- No breaking changes or migration steps are required for existing consumers.

1.5.0-beta.3

Minor Changes

#2186 da962eb Thanks @mitchellcarroll! - Added Toast for brief, non-blocking status messages.
- Export ToastRegion, toastQueue, and related types from @cfa/react-core.
- Queue-first API: mount ToastRegion once near the app root, then call toastQueue.add() from anywhere.
- Supports info, success, warning, and error severities with optional description, action, and custom icon.
- Configurable viewport placement (default "bottom right"), optional auto-dismiss via timeout, and stacked display of up to three visible toasts.
- Toast content uses MessageBlock styling for consistency with inline alerts.

Patch Changes

#2161 3433d79 Thanks @mitchellcarroll! - Fixed PageLoader color prop styling so primary and secondary themes render correctly again.
- color="primary" and color="secondary" now apply the expected CFA red and navy themes to the spinner and center icon.
- Restores behavior that regressed after recent refactors left the prop documented but visually ineffective.
Updated dependencies [93e5fbd, bb4c6c6, bb4c6c6]:
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]

1.5.0-beta.2

Patch Changes

#2143 37636cb Thanks @stevegreco! - Removed premature @deprecated annotations from the color prop on themed components.
- Avatar, Badge, Button, LinkButton, IconButton, IconbarNav, PageLoader, ProgressBar, SidebarNav, Slider, Tabs, and CartInput no longer surface @deprecated warnings for color in the IDE, prop tables, or generated docs.
- The color prop is still planned for removal in v2, but deprecation notices were added before a clear alternative theming path was available.
- The color prop continues to work as before in the current release; no migration is required yet.

1.5.0-beta.1

Patch Changes

#2087 e711501 Thanks @mitchellcarroll! - Reset default list spacing on Breadcrumbs so trails align without browser <ol> inset.
Updated dependencies [6e7207e]:
- @cfa/[email protected]

1.5.0-beta.0

Minor Changes

#2076 3e1dc97 Thanks @stevegreco! - Enhanced Checkbox, Radio, and Switch with field-level description and validation support aligned with other form controls.
- Checkbox: Added errorMessage prop to display validation text below the control when isInvalid.
- Radio: Added description prop on individual <Radio /> options for per-choice helper text.
- Switch: Added errorMessage prop to display validation text below the control when isInvalid.
- Description and error messages are now wired through React Aria field slots for improved accessibility (aria-describedby / aria-errormessage).
#2080 d2bb17c Thanks @stevegreco! - Added Combobox.Value for displaying the current selection outside the search input.
- Export Combobox.Value and ComboboxValueProps alongside other Combobox compound parts.
- Supports a placeholder when nothing is selected and a render function with selectedItems for custom displays (for example, tag chips in multiple selection).
- Aligns Combobox composition with Select.Value for multi-select and controlled selection UIs.
#2076 3e1dc97 Thanks @stevegreco! - Added new Table.Footer component
#2092 f0a64be Thanks @stevegreco! - Added LinkIconButton for icon-only navigation links that share IconButton styling.
- Export LinkIconButton and LinkIconButtonProps from @cfa/react-core
- Supports the same color, size, and isDisabled props as IconButton, plus standard anchor attributes like href and target
```
import { LinkIconButton } from "@cfa/react-core";
import { Download } from "@cfa/icons/system";

<LinkIconButton href="/reports" aria-label="Download report">
  <Download />
</LinkIconButton>;
```
#2032 7a52af6 Thanks @mitchellcarroll! - Added Toast for brief, non-blocking status messages.
- Export ToastRegion, toastQueue, and related types from @cfa/react-core.
- Queue-first API: mount ToastRegion once near the app root, then call toastQueue.add() from anywhere.
- Supports info, success, warning, and error severities with optional description, action, and custom icon.
- Configurable viewport placement (default "bottom right"), optional auto-dismiss via timeout, and stacked display of up to three visible toasts.
- Toast content uses MessageBlock styling for consistency with inline alerts.
#2086 5fc4ce9 Thanks @stevegreco! - Expanded side navigation recipes and panel navigation primitives for application shells.
- Added UNSTABLE_UserInfo recipe for signed-in user summaries in panel footers and similar compact surfaces.
- Enhanced UNSTABLE_SideNavigation with header and footer slots, typed navigation items (link, section, divider), closeOnNavigate, and automatic section expansion when currentKey matches a nested item. Place SideNavigation.Trigger in the content area to reopen the panel after it closes.
- Added isExternal to SidebarNav.NavItem to show an external-link icon and open links in a new tab by default.
- Migration (UNSTABLE_SideNavigation): rename title to header; add type to top-level items; use { type: "divider", id } entries for separators; render SideNavigation.Trigger in children instead of relying on a built-in header trigger.

Patch Changes

#2073 2ff3729 Thanks @mitchellcarroll! - Fixed outlined Avatar fallback text color so primary and secondary avatars render the expected themed initials.
- Outlined primary Avatar fallback text now renders red on the default background.
- Outlined secondary Avatar fallback text now renders navy on the default background.
#2076 3e1dc97 Thanks @stevegreco! - Fixed spacing issues for descriptions on CheckboxGroup, RadioGroup, Slider, and Switch. Unintended spacing between fields and description text was removed to bring these fields into alignment.
#2023 9da13cb Thanks @mitchellcarroll! - Updated component spacing to better align React Core components with the latest Figma designs.
- Adjusted spacing for Card, CheckboxGroup, Chip, GridList, ListBox, MessageBlock, Tabs, TagGroup, and TextAreaInput.
#2075 9036fe9 Thanks @mitchellcarroll! - Updated outlined Card borders to use the softer subtle border treatment.

1.4.1

Patch Changes

#2054 e900c4e Thanks @stevegreco! - Mark color and isSuccess props as deprecated ahead of v2.
- @deprecated JSDoc on color for Button, LinkButton, Avatar, Badge, IconButton, navigation components, and other themed components — remove in v2; theming will come from variant and the app theme.
- @deprecated JSDoc on isSuccess for form fields and related text helpers — remove in v2; success styling for fields is going away.
- Chip logs a dev-time warning when color="navy" is used, since a single union value cannot be deprecated in TypeScript.
No breaking changes in this release; existing usage continues to work.
#2055 904fe2a Thanks @stevegreco! - Fixed issue where the default color of the RadioGroup was the brand red instead of navy

1.4.1-beta.0

Patch Changes

#2054 e900c4e Thanks @stevegreco! - Mark color and isSuccess props as deprecated ahead of v2.
- @deprecated JSDoc on color for Button, LinkButton, Avatar, Badge, IconButton, navigation components, and other themed components — remove in v2; theming will come from variant and the app theme.
- @deprecated JSDoc on isSuccess for form fields and related text helpers — remove in v2; success styling for fields is going away.
- Chip logs a dev-time warning when color="navy" is used, since a single union value cannot be deprecated in TypeScript.
No breaking changes in this release; existing usage continues to work.
#2055 904fe2a Thanks @stevegreco! - Fixed issue where the default color of the RadioGroup was the brand red instead of navy

1.4.0

Minor Changes

#2015 44f4aca Thanks @stevegreco! - Add unstable navigation building blocks and hooks for application shell layouts.
- Export UNSTABLE_Panel, UNSTABLE_SidebarNav, and UNSTABLE_SideNavigation from @cfa/react-core/client.
- Export useKeyboardShortcut, useIsMobile, and persistent state helpers from @cfa/react-core/hooks.
- Improve panel accessibility so open mobile panels expose dialog semantics and closed panel content is hidden from interaction.
#2012 c9f9935 Thanks @stevegreco! - Added new MessageBlock.Action component for CTA buttons inside of a MessageBlock

Patch Changes

#2001 8755c66 Thanks @mitchellcarroll! - Added the beta UNSTABLE_ProgressIndicator component for showing progress through multi-step flows.
- Includes default labeled and compact progress indicator layouts.
- Supports complete, active, and inactive step states.
Updates Stepper.Step so it no longer auto-generates id attributes from step numbers; pass an id explicitly when one is needed.
#2007 9176aad Thanks @mitchellcarroll! - Fixed theme scoping for components with primary and secondary color variants.

Components now explicitly apply the default CFA Red theme when using primary/default colors, preventing nested components from accidentally inheriting a parent CFA Navy theme.
#2010 c93883a Thanks @stevegreco! - Synced the latest Figma token export and updated React components to stay aligned with the published token set.
- Updated the published token files in @cfa/design-tokens-core to match the latest Figma source of truth.
- Removed deprecated spacing and button sizing token entries from @cfa/design-tokens-core; consumers using those token names should migrate to the replacement semantic size and spacing tokens.
- Updated Button and PageLoader in @cfa/react-core to use the replacement tokens so their default sizing and spacing continue to render correctly after the token sync.
Updated dependencies [e1ce933, c93883a]:
- @cfa/[email protected]

1.4.0-beta.0

Minor Changes

#2015 44f4aca Thanks @stevegreco! - Add unstable navigation building blocks and hooks for application shell layouts.
- Export UNSTABLE_Panel, UNSTABLE_SidebarNav, and UNSTABLE_SideNavigation from @cfa/react-core/client.
- Export useKeyboardShortcut, useIsMobile, and persistent state helpers from @cfa/react-core/hooks.
- Improve panel accessibility so open mobile panels expose dialog semantics and closed panel content is hidden from interaction.
#2012 c9f9935 Thanks @stevegreco! - Added new MessageBlock.Action component for CTA buttons inside of a MessageBlock

Patch Changes

#2001 8755c66 Thanks @mitchellcarroll! - Added the beta UNSTABLE_ProgressIndicator component for showing progress through multi-step flows.
- Includes default labeled and compact progress indicator layouts.
- Supports complete, active, and inactive step states.
Updates Stepper.Step so it no longer auto-generates id attributes from step numbers; pass an id explicitly when one is needed.
#2007 9176aad Thanks @mitchellcarroll! - Fixed theme scoping for components with primary and secondary color variants.

Components now explicitly apply the default CFA Red theme when using primary/default colors, preventing nested components from accidentally inheriting a parent CFA Navy theme.
#2010 c93883a Thanks @stevegreco! - Synced the latest Figma token export and updated React components to stay aligned with the published token set.
- Updated the published token files in @cfa/design-tokens-core to match the latest Figma source of truth.
- Removed deprecated spacing and button sizing token entries from @cfa/design-tokens-core; consumers using those token names should migrate to the replacement semantic size and spacing tokens.
- Updated Button and PageLoader in @cfa/react-core to use the replacement tokens so their default sizing and spacing continue to render correctly after the token sync.
Updated dependencies [e1ce933, c93883a]:
- @cfa/[email protected]

1.3.0

Minor Changes

#1966 cfb7c8a Thanks @stevegreco! - Updated Table selection composition in Beta so adopters can control where selection UI renders in more complex table layouts before the API stabilizes.
- Added Table.SelectionColumn and Table.SelectionCell for explicit selection composition in Table headers and rows.
- Tables that render selection controls can now place the selection column anywhere in the table structure, including after leading structural columns like drag handles.
- Selection structure is now composed explicitly at the call site instead of being injected automatically by Table.Header and Table.Row.

Patch Changes

#1926 1746946 Thanks @stevegreco! - Updated visual styling for Combobox, Select, ListBox, IconButton, Label, Input, Link, and related form components.
- ListBox, Select, and Combobox now use a clearer selected-item treatment with a checkmark indicator.
- IconButton hover states are more visible, including improved contrast on dark backgrounds.
- Label now uses a heavier font weight for stronger field labeling.
- Disabled and read-only color treatments were refined across several related components.
Refreshed visual styling across form fields and selection controls, including Checkbox, TextArea, TimeInput, FieldError, Chip, CharacterCount, and Table.
- Improved hover, focus, disabled, invalid, and read-only treatments across several form components.
- Updated label, supporting text, and selection-control styling for better consistency with the current design system.
- Fixed a CSS issue that prevented Checkbox from displaying its intended indeterminate styles.
Updated visual styling across buttons and interactive controls, including Button, LinkButton, Tabs, Switch, TagGroup, ToggleButton, Stepper, Slider, SearchInput, RadioGroup, and ProgressBar.
- Refined hover, focus, active, and disabled-state styling across several interactive components.
- Updated typography, spacing, and accent-color treatments to better match the current design system.
Updated visual styling across overlays, feedback, and layout components, including Accordion, BannerMessage, MessageBlock, Menu, Modal, Popover, Tooltip, GridList, Calendar, RangeCalendar, DatePicker, DateRangePicker, PageLoader, Drawer, and Divider.
- Updated surfaces, shadows, spacing, and supporting content styles for better consistency across overlays and feedback components.
- Included calendar and date-picker color refinements for selected, hover, and focus states.
- Fixed Select and Combobox trigger icon layering in scrolling layouts to reduce the need for local z-index workarounds beneath sticky content.
Stabilized beta date field building blocks.
- UNSTABLE_DateField and UNSTABLE_DateRangeField now use shared segmented input behavior, clearer read-only handling, and built-in clear actions.
- If you compose these APIs directly, InputGroup now inherits disabled, invalid, and read-only state from the root component.
Updated react-aria-components and related packages to 1.17.0.
Fixed BannerMessage package exports so it is available from the @cfa/react-core/client entrypoint instead of the @cfa/react-core/server entrypoint.
- Added BannerMessage and BannerMessageProps to @cfa/react-core/client.
- Removed the incorrect BannerMessage export from @cfa/react-core/server.
- If you were importing BannerMessage from @cfa/react-core/server, update that import to @cfa/react-core/client.
Updated dependencies [c291cc2, ac04fcd, 8f9b50c, 445af1c]:
- @cfa/[email protected]

1.3.0-beta.2

Minor Changes

#1966 cfb7c8a Thanks @stevegreco! - Updated Table selection composition in Beta so adopters can control where selection UI renders in more complex table layouts before the API stabilizes.
- Added Table.SelectionColumn and Table.SelectionCell for explicit selection composition in Table headers and rows.
- Tables that render selection controls can now place the selection column anywhere in the table structure, including after leading structural columns like drag handles.
- Selection structure is now composed explicitly at the call site instead of being injected automatically by Table.Header and Table.Row.

Patch Changes

#1954 418c85b Thanks @mitchellcarroll! - Updated consumer-facing styling for FieldError, GridList.
- GridList item line-height has been adjusted. Heading now uses an updated text color.
- FieldError now uses updated text color, line-height, and font size for better consistency with the design system.
#1946 89c9bd4 Thanks @mitchellcarroll! - Updated consumer-facing styling for MessageBlock, Menu, and Modal.
- Menu: Updated box shadow.
- Modal: Updated box shadow and background color.
- MessageBlock: Updated line height.
#1966 cfb7c8a Thanks @stevegreco! - Updated react-aria-components and related packages to v1.17.0
#1953 d3966b9 Thanks @stevegreco! - Fixed BannerMessage package exports so it is available from the @cfa/react-core/client entrypoint instead of the @cfa/react-core/server entrypoint.
- Added BannerMessage and BannerMessageProps to @cfa/react-core/client.
- Removed the incorrect BannerMessage export from @cfa/react-core/server.
- If you were importing BannerMessage from @cfa/react-core/server, update that import to @cfa/react-core/client.
#1960 12932c6 Thanks @stevegreco! - Aligned several @cfa/react-core components with the latest design tokens and refined typography and status-state styling.
- Updated typography label and overline styles to better match the current design system scale.
- Refined component styling across chips, cards, calendars, and form controls to use newer semantic tokens more consistently.
- Removed the legacy success hover treatment on checkbox and radio success states to better align their visual behavior.

1.2.2-beta.1

Patch Changes

#1926 1746946 Thanks @stevegreco! - Updated consumer-facing styling for Combobox, IconButton, Input, Label, Link, ListBox, Select and CartInput.
- ListBox, Select, and Combobox now use an improved selected-item treatment that includes a checkmark indicator.
- IconButton now uses a more visible hover state, including better contrast for buttons shown on dark backgrounds.
- Label now uses a heavier font weight for stronger field labeling.
- Related styling updates also improve disabled and read-only colors across form inputs and supporting components.
#1950 c291cc2 Thanks @stevegreco! - Updated Button and related primary-accent styling to consume the latest synced token contracts.
- Swapped Button filled, outlined, and text variants to the new primary, secondary, and tertiary button tokens, including their default, hover, and pressed state colors.
- Updated Stepper, Tabs, and CartInput to use the remapped primary accent token so branded text and active states keep the expected themed color after the token sync.
- Refreshed the Switch visual baseline for the updated default track background token value.
#1918 632260b Thanks @mitchellcarroll! - Updated visual styles for Tabs, Tag Group, and Switch components.
- Refined font color, font weight, border color, and disabled state styling for Tabs
- Adjusted line height, font color, disabled background, border, and focus ring color for Tag Group
- Updated box shadow, focus ring color, and label font weight and line height for Switch
#1945 ef96a1c Thanks @stevegreco! - Fixed Select and Combobox trigger icon layering in scrolling layouts.
- Updated Select and Combobox so their trailing chevron icons no longer render above nearby sticky content in common page layouts.
- This reduces the need for adopters to add local z-index workarounds when using these fields beneath sticky headers or other sticky surfaces.
#1928 0396896 Thanks @mitchellcarroll! - Stepper: updated font size (14px → 16px), font weight (500 → 700), step line color, and minor font and background color adjustments.

Slider: updated mark and output label font color, font weight (500 → 700), and reduced thumb size (26px → 24px).

SearchInput: updated input value text font color.
#1936 9197d43 Thanks @mitchellcarroll! - Updated Popover elevation shadow and adjusted label font weights for RadioGroup and ProgressBar. Minor spacing updates to RangeCalendar and PageLoader.
#1938 ee9206e Thanks @stevegreco! - Stabilized beta date field building blocks and aligned form field and overlay token styling across react-core.
- Updated UNSTABLE_DateField and UNSTABLE_DateRangeField to use shared segmented input behavior, clearer read-only handling, and built-in clear actions.
- Improved hover, read-only, disabled, invalid, and compact styling consistency across Combobox, Select, Input, TextArea, and TimeInput, and updated Drawer and Divider to use current semantic tokens.
- Removed the old internal DateInput implementation and added coverage for the shared segmented date input behavior.
- If you compose the unstable date field APIs directly, InputGroup now inherits state from the root instead of accepting separate disabled, invalid, or read-only props.
#1923 1e69873 Thanks @mitchellcarroll! - Updated visual styles for ToggleButton, Tooltip, and Typography components
- ToggleButton
  - Updated default border divider and text colors
  - Updated the focus ring color
- Tooltip
  - Updated the box shadow
- Typography
  - Adjusted body text line height from 24px to 22px
#1922 7bc3f45 Thanks @stevegreco! - Refreshed visuals and token wiring so several components match current semantic design tokens (ds-*) instead of legacy cfa-* where equivalents exist.
- Checkbox: Body-small label typography; box colors for default, hover, selected, invalid, disabled, and read-only (read-only is visually distinct from disabled); semantic focus ring and required-indicator color.
- Combobox: Input surface, radius, borders, label color, and disabled trigger color use form-field / semantic tokens. Success variant still uses legacy tokens until a V2 mapping exists.
- Chip: Variant colors, radius, and typography use chip and semantic tokens; navy variant and some paths still use legacy tokens for compatibility.
- CharacterCount and Table: Description typography token for the count
No public props or APIs changed.
Updated dependencies [c291cc2, 8f9b50c]:
- @cfa/[email protected]

1.2.2-beta.0

Patch Changes

#1874 86326b6 Thanks @mitchellcarroll! - Resolved a CSS issue that prevented the checkbox from displaying its intended styles when in the indeterminate state.
#1904 9c8caa0 Thanks @mitchellcarroll! - Updated consumer-facing styling for TextArea and TextAreaInput.
- TextArea now uses updated line-height, border color, focus ring, and disabled/read-only background colors.
#1902 b9fb378 Thanks @stevegreco! - Updated consumer-facing styling for Accordion and BannerMessage.
- Accordion now uses updated box-shadow, border, and disabled-state colors.
- BannerMessage now uses updated color tokens and more compact padding values.
- Other component updates in this release are token migrations with no intended visual changes.
#1861 a3b4156 Thanks @stevegreco! - Updated React Aria to 1.16.0
#1903 a279cd1 Thanks @stevegreco! - Updated visual styles for Button, LinkButton, Calendar, and RangeCalendar.
- Button and LinkButton disabled styles now use a lighter disabled background color.
- Calendar and RangeCalendar received minor color refinements, including selected/hover/focus and content color updates.
- These calendar visual updates also propagate to DatePicker and DateRangePicker because they compose the calendar components.
Updated dependencies [ac04fcd, 445af1c]:
- @cfa/[email protected]

1.2.0

Minor Changes

#1851 2558eeb Thanks @stevegreco! - - Added the design-tokens-core package which contains our new v2 tokens
- Updated the Button to use the new spacing tokens
#1846 2abfe11 Thanks @Dan-Heflin! - Added Typography utility classes and a typography utility function for consistent text styling.

Utility class examples:
- ds-typography--body
- ds-typography--body-small
- ds-typography--header-1
- ds-typography--header-2
- ds-typography--header-3
- ds-typography--header-4
- ds-typography--subtitle-1
- ds-typography--subtitle-2
- ds-typography--subtitle-3
- ds-typography--overline-1
- ds-typography--overline-2
- ds-typography--overline-3
Utility function example:
```
import { typography } from "@cfa/react-core";

<p className={typography({ variant: "body" })}>Body text</p>
<h2 className={typography({ variant: "header2" })}>Section heading</h2>
<span className={typography({ variant: "overline1" })}>Overline text</span>
```

Patch Changes

#1869 4648962 Thanks @stevegreco! - Fixed issues with dependencies
Updated dependencies [2558eeb]:
- @cfa/[email protected]

1.1.0

Minor Changes

#1828 865df96 Thanks @stevegreco! - Added new leadingIcon prop to the Select.Button component. You can now easily add a leadingIcon to any Select component

<Select.Root>
  <Select.Label>Location</Select.Label>
  <Select.Button leadingIcon={<Restaurant color="primary" />}>
    <Select.Value />
  </Select.Button>
  <Select.Popover>
    <Select.List>
      <Select.Item id="1">Downtown</Select.Item>
      <Select.Item id="2">Uptown</Select.Item>
      <Select.Item id="3">Midtown</Select.Item>
    </Select.List>
  </Select.Popover>
</Select.Root>

#1800 1791b6c Thanks @mitchellcarroll! - Added new CartInput component. Supports color (primary/secondary), size (sm/md/lg), and optional onRemove behavior where a trash icon replaces the decrement button when the value reaches one above the minValue. Includes form field integration with label, description, and errorMessage support.
```
const [quantity, setQuantity] = useState(1);

<CartInput
  label="Quantity"
  value={quantity}
  onChange={setQuantity}
  onRemove={() => console.log("removed")}
/>;
```
#1797 10e879f Thanks @stevegreco! - Added new ContextualHelp component as an accessible alternative to the Tooltip. The component provides two variants, info and help. These variants determine the icon that is used. The Tooltip is generally not a very accessible component and is not usable on mobile devices, this component provides an accessible and cross-platform alternative.
```
<ContextualHelp aria-label="need-help">
  <Heading variant="headline4">Need Help?</Heading>
  If you're having issues accessing your account, contact our customer support
  team for help.
</ContextualHelp>
```

Patch Changes

#1816 06e2e59 Thanks @stevegreco! - Removed defaultOpen and isOpen from the Combobox, these props do not work with this component
#1814 97d335d Thanks @stevegreco! - Updated react-aria dependencies
#1849 27d7c19 Thanks @stevegreco! - Fixed issue with duplicate keys on the Slider component
Updated dependencies []:
- @cfa/[email protected]
- @cfa/[email protected]

1.0.4

Patch Changes

Updated dependencies [471c05f]:
- @cfa/[email protected]
- @cfa/[email protected]

1.0.3

Patch Changes

#1771 874773d Thanks @stevegreco! - Updated React Aria package versions

1.0.2

Patch Changes

#1765 5434c0b Thanks @stevegreco! - Added beta support for the Virtualizer component. You can now wrap certain collection components with the Virtualizer for Virtualization support.

Here is a basic example, documentation is coming soon.

import {
  UNSTABLE_Virtualizer as Virtualizer,
  UNSTABLE_ListLayout as ListLayout,
} from "@cfa/react-core";

<Combobox.Root>
  <Combobox.Label>Sauces</Combobox.Label>
  <Combobox.Input />
  <Combobox.Button />
  <Combobox.Popover>
    <Virtualizer layout={ListLayout}>
      <Combobox.List items={items}>
        {(item) => <Combobox.Item>{item.name}</Combobox.Item>}
      </Combobox.List>
    </Virtualizer>
  </Combobox.Popover>
</Combobox.Root>;

#1764 ac15906 Thanks @mitchellcarroll! - Stepper: Fixed bug where children prop was accepted but never rendered

1.0.1

Patch Changes

#1758 d884389 Thanks @stevegreco! - Added the renderEmptyState prop to the Select and Combobox. This can be used to render a specific component when no results are available.

1.0.0

Major Changes

#1751 be5937c Thanks @stevegreco! - # 🚨 Breaking Changes 🚨
- Removed deprecated variant prop from the Tooltip
- Removed deprecated orientation prop from the CheckboxGroup and RadioGroup
- Removed deprecated variant prop from the MessageBlock in favor of the severity prop
- Removed the UNSTABLE prefix from the DatePicker component, you can now import the standard component
```
import { DatePicker } from "@cfa/react-core";
```

0.29.1

Patch Changes

#1746 65e9a91 Thanks @stevegreco! - Reverse the positioning of the close button in the Drawer, placing it on the outside edge
#1733 e2bc35b Thanks @mitchellcarroll!
- Updated DatePicker and DateRangePicker to provide easier overrides for the width of the component
- Fixed issue with validations not resetting when clearing the value in the DatePicker and DateRangePicker

0.29.0

Minor Changes

#1740 df7dead Thanks @stevegreco! - Added UNSTABLE_DropZone to support Signal, this component should be used with caution, and is subject to change at any time.

0.28.2

Patch Changes

#1731 91ef659 Thanks @mitchellcarroll! - Fixes the internal padding for the SearchInput

0.28.1

Patch Changes

Updated dependencies []:
- @cfa/[email protected]
- @cfa/[email protected]

0.28.0

Minor Changes

#1718 e2431df Thanks @mitchellcarroll! - Adds new TextField component.
#1717 b2635cf Thanks @mitchellcarroll! - Adds NumberField component to allow users to input and edit numeric values.
#1661 79d60b2 Thanks @mitchellcarroll! - Exports new Calendar, RangeCalendar, CalendarGrid, and CalendarCell components

Patch Changes

#1722 f1cc1f3 Thanks @mitchellcarroll! - DatePicker & DateRangePicker: removes inconsistent focus styling for the calendar icon.
Updated dependencies [cd68a51]:
- @cfa/[email protected]
- @cfa/[email protected]

0.27.0

Minor Changes

#1715 b08a1c2 Thanks @stevegreco! - Added new panelPadding prop to the Accordion.Root and padding to the Accordion.Panel. . These props will help control the padding inside of the Accordion panels
#1706 d66adc0 Thanks @stevegreco! - Added alignment prop to the TextInput to allow for right alignment of the text, similar to the NumberInput

0.26.0

Minor Changes

#1684 8cde6e3 Thanks @stevegreco! - Added support for sections/groups in the ListBox, GridList, Select and Combobox components

0.25.2

Patch Changes

#1698 9047135 Thanks @stevegreco! - Added relative positioning to the Radio to a fix positioning bug with the hidden input

0.25.1

Patch Changes

#1663 56eaf81 Thanks @stevegreco! - Fixed issue with Accordion outline-offset
#1668 561ca40 Thanks @stevegreco! - Fixed issue with the gap in the BannerMessage that caused extra space between components that are passed as children

0.25.0

Minor Changes

#1645 4360225 Thanks @mitchellcarroll! - Modal: Fixed an issue where inputs inside a modal were being pushed off screen when the virual keyboard was rendered on tablets and phones.
#1603 9f0ba71 Thanks @mitchellcarroll! - Add support for aligning tabs. A new alignment prop on the Tabs component allows consumers to control how tab labels are aligned. Supported values are left (default), center, and right. Existing behavior stays the same unless the prop is provided, giving more flexibility for different layout needs.
#1640 9a99303 Thanks @mitchellcarroll! - Adds character counter to the TextInput component. Can be used by adding hasCharacterCount prop + maxLength prop.

Patch Changes

#1543 3bc359d Thanks @mitchellcarroll! - Adds Table component as a wrapper around React Aria table primitives.
#1625 be92114 Thanks @stevegreco! - Surface: updated background-color to be base-1
#1647 e9473dd Thanks @stevegreco! - Adjusted disabled styles for the Switch label to ensure it meets proper contrast ratio
#1607 1553615 Thanks @stevegreco! - Field Changes
- Added global variables for our form fields to more easily control them all once
- Adjusted BaseButton CSS to prevent conflicts with Button variants
- Changed the padding below the CheckboxGroup and RadioGroup label from 12px to 4px
- Moved the compact prop onto the BaseDateInput (internal) to control the padding as opposed to on the DateInput and TimeInput components
- Adjusted widths of form fields to be more consistent

0.24.1

Patch Changes

#1589 2b3c2df Thanks @stevegreco! - Fixed small issue with the Select focus outline offset

0.24.0

Minor Changes

#1582 47cbdf5 Thanks @stevegreco! - Added offset and crossOffset props to the Menu.Popover to allow for more custom positioning

Patch Changes

#1559 84cafff Thanks @stevegreco! - Removed incorrect focus state styling on CalendarCell and the Iconbutton used in the DatePicker
#1567 582be41 Thanks @stevegreco! - Fixed multiple styling issues with the DateInput
- Incorrect focus styling
- Incorrect placeholder styling when the field is disabled
#1552 b2c8ef0 Thanks @stevegreco! - Enhanced focus states
- Updated colors of the focus ring to ensure that it meets color contrast guidelines for accessibility
- Reduced the focus ring size from 4px to 2px and adjusted offset to properly align with border for each component
- Added a positive offset to the Button components to provide a visual gap between the focus ring and the Button
Updated dependencies [b2c8ef0]:
- @cfa/[email protected]

0.23.0

Minor Changes

#1535 0e1ecfa Thanks @stevegreco! - Removed multiline support on the TextInput component and separated it into a new TextAreaInput component.

As a result of this change, the multiline and hasCharacterCount props have been removed from the standard TextInput.

Patch Changes

#1542 f6e0979 Thanks @stevegreco! - Fixed issue with the Button width not respecting the parent containers width
#1540 517eea9 Thanks @stevegreco! - - Avatar.Root was unintentionally overriding any ref that was forwarded in, causing unintended side effects with components like Focusable and Pressable
- Added forwardRef to the Avatar.Root to provide better compatability with React 18 and our Focusable and Pressable components

0.22.1

Patch Changes

#1536 c810051 Thanks @stevegreco! - Fixed issue with internal context of the Select component

0.22.0

Minor Changes

#1530 8313b04 Thanks @stevegreco! - Various quality of life updates for Select and Combobox

Select
- Added compact and shouldFlip props to the Select.Root to provide better DX
- Enhanced the max-height functionality to utilize the maxHeight prop on the Select.Popover to provide more stable sizing
- Added some basic layout styling to the Select.Item and Select.Value to allow for easier composition of additional elements
- Updated docs to reflect some deprecated props. These changes were made to better align with the native select component and support multi selection
  - defaultSelectedKey —> defaultValue
  - selectedKey —> value
  - onSelectionChange —> onChange
Combobox
- Enhanced the max-height functionality to utilize the maxHeight prop on the Combobox.Popover to provide more stable sizing
- Added compact, shouldFlip, disableIconAnimation, iconVariant and isRequired to the Combobox.Root to provide a better DX and prevent having to add these to nested components
- Added some basic layout styling to the Combobox.Item to allow for easier composition of additional elements
#1532 817e692 Thanks @stevegreco! - Added ref to various component types and forwarded it onto the correct element where appropriate.
- BaseButton
- Button
- Checkbox
- CheckboxGroup
- Combobox
- IconButton
- Input
- NumberInput
- RadioGroup
- SearchInput
- Select
- Slider
- TextArea
- TextInput

0.21.1

Patch Changes

#1522 2fd3236 Thanks @stevegreco! - - Added deprecation for the orientation prop on the CheckboxGroup
- Added deprecation for the orientation prop on the RadioGroup

0.21.0

Minor Changes

#1515 3d6ffd0 Thanks @mitchellcarroll! - Add isDateHighlighted prop to DatePicker and DateRangePicker to enable highlighting specific dates in Calendar and RangeCalendar.

Patch Changes

#1519 dee1d74 Thanks @stevegreco! - Fixed various issues with the Select component
- Added text-align: left to the Select.Button to properly align text when wrapping to multiple lines
- Fixed issue where the focus styling was being displayed on the component after selecting an item.

0.20.1

Patch Changes

#1512 2c6012b Thanks @stevegreco! - Added relative positioning to the Checkbox to fix positioning bug with the hidden input

0.20.0

Minor Changes

#1479 60a7623 Thanks @mitchellcarroll! - Exports new DateRangePicker and DateRangeField components. Marking as “Unstable” to gather feedback from adopters
#1485 0cdab78 Thanks @mitchellcarroll! - Exports a new TimeInput component
#1491 a492de8 Thanks @mitchellcarroll! - Adds support for highlighting dates in the Calendar component via an isDateHighlighted option, allowing adopters to mark specific days with a custom style.
#1438 60e2dfb Thanks @mitchellcarroll! - Update DatePicker to follow the current component composition pattern and introduces DateField components for composability/customizations.
#1498 295303e Thanks @mitchellcarroll! - •Added a Clear button to both DatePicker and DateRangePicker.•Introduced a new InputGroup component within the DateField collection to wrap the input, clear button, and calendar trigger, providing greater control over subcomponent composition.•Applied minor style adjustments to DatePicker, setting the default max width to 400px based on feedback from @Dan-Heflin.
#1496 b761d4e Thanks @stevegreco! - Updated react-aria dependencies to most recent versions
- Added multiple Autocomplete stories to show usage with different components
- Added a composed example of a Select that supports multiple selections
- Replaced @react-aria/utils with react-aria for the useId hook
- Updated the Tabs component to utilize the new SelectionIndicator component and added the appropriate animation.
- Updated the Tabs with some other design enhancements, specifically the height was changed from 42px to 40px, and we updated the hover styling to change the font-color instead of adding an underline.
- Updated the Accordion animations to use the new CSS custom properties that RAC makes available for animating. It should now properly animate with the padding workaround that we previously used.
#1444 20f1827 Thanks @stevegreco! - Added new TagGroup component

Patch Changes

#1484 79ce531 Thanks @stevegreco! - Fixed CSS bugs with ListBox, GridList, Select and Combobox
- Resolved border-radius issue with the ListBox and GridList
- Resolved overflow issue with the Select and Combobox
#1442 16ba3b2 Thanks @mitchellcarroll! - Refactors Date and Time components to remove unnecessary prop passing between components.
#1471 d44cb38 Thanks @stevegreco! - Removed clsx dependency
#1495 5af1835 Thanks @stevegreco! - Added custom clear button to the SearchInput to provide better browser/framework compatibility
#1473 f143ced Thanks @stevegreco! - Fixed issue with Breadcrumbs current link font color
#1483 038292f Thanks @mitchellcarroll! - Consolidates css in the Date and Time components
Updated dependencies [8a61111]:
- @cfa/[email protected]
- @cfa/[email protected]

0.19.3

Patch Changes

#1466 e8871c1 Thanks @stevegreco! - Moved exports for @internationalized/date into our server exports so that they can be accessed in server side code.

0.19.2

Patch Changes

#1460 1de1102 Thanks @stevegreco! - Fixed issue with Tab text-decoration when using the href attribute

0.19.1

Patch Changes

#1455 a6db128 Thanks @stevegreco! - Fixed various CSS bugs
- Removed background-color from the Tabs component
- Updated Tabs to use cursor: pointer
- Removed background-color from the default Accordion variant
- Fixed background colors for the states of Checkbox when using isIndeterminate
#1448 0de40c0 Thanks @stevegreco! - Updated css font properties to use current design tokens
#1420 7af5fc6 Thanks @mitchellcarroll! - Flattened DatePicker CSS structure to make custom class overrides easier and fixed an input min-width issue caused by nested styles.
#1449 b62e1f0 Thanks @stevegreco! - Exporting the PressEvent type
#1427 03df90f Thanks @stevegreco! - Fixed max-height issue with the Select and Combobox dropdowns

0.19.0

Minor Changes

#1411 90c0c86 Thanks @stevegreco! - 🚨 Breaking Change

The Tooltip design has been updated to provide a better user experience on light backgrounds. The default background color of the Tooltip is now dark, with light text. You can view these changes on the docs site.

The old variant will still be available for a limited time using the variant="light" prop. This prop will eventually be removed in a later release.

To retain an old design, you must add the variant="light" prop.
```
// New Dark Variant - Default
<Tooltip.Content>Tooltip Content</Tooltip.Content>
// Old Legacy Variant
<Tooltip.Content variant="light">Tooltip Content</Tooltip.Content>
```

0.18.0

Minor Changes

#1382 2e8b99c Thanks @CaseyGarland! - - LoadingIndicator: now uses accessibility role progressbar (was status).
- PageLoader: now uses accessibility role progressbar (was status).
  - Removed ariaLabel(uses standard aria-label).
#1409 47e0e02 Thanks @stevegreco! - Updated the Stepper.Step to forward its ref, allowing the use of the Pressable component
#1390 a8e0d95 Thanks @stevegreco! - 🚨 Breaking Change
- Removed Breadcrumbs.Separator and now just render it automatically
- Changed Separator from a custom icon to the standard font chevron
- Updated the relevant docs

#1387 c159bfa Thanks @stevegreco! - - Slider component has been refactored to use a compound component API, allowing for more flexible and composable usage. The new structure separates the Slider into separate components such as Slider.Root, Slider.Label, Slider.Output, Slider.Track, Slider.Thumb, and Slider.Description.

Old usage:

<Slider label="Slider label" description="Helper text" />

New compound usage:

<Slider.Root>
  <Slider.Label>Slider label</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb />
  </Slider.Track>
  <Slider.Description>Helper text</Slider.Description>
</Slider.Root>

Slider “range” functionality has also been added, allowing users to select a range of values by passing an array to the defaultValue or value prop and using two Slider.Thumb components.

Example of a range slider:

<Slider.Root
  defaultValue={[10, 30]}
  minValue={0}
  maxValue={50}
  step={5}
  marks
>
  <Slider.Label>Range Slider</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb index={0} />
    <Slider.Thumb index={1} />
  </Slider.Track>
  <Slider.Description>Select a value range</Slider.Description>
</Slider.Root>

#1386 3709bfe Thanks @stevegreco! - Added isDisabled prop to the Label component

Patch Changes

#1395 a989abc Thanks @stevegreco! - Optimized CSS variables in the Tooltip to ensure the arrow matches the tooltip background color
#1333 493ac74 Thanks @vincevahala! - Select: flatten CSS for better adopter customizability.
#1403 053bbdc Thanks @stevegreco! - Added default aria-label to the LoadingIndicator component, this can be overwritten by a user passed prop

0.17.0

Minor Changes

#1371 4e60ca5 Thanks @stevegreco! - Updated React Aria libraries to the most recent versions
#1330 e3ee562 Thanks @vincevahala! - Removed isDisabled prop from the Label component and subsequent components using the Label: CheckboxGroup, Combobox, Label, NumberInput, RadioGroup, SearchInput, Select, TextInput, DatePicker, DateInput, DateRangePicker, TimeInput.

Patch Changes

#1319 87db1fe Thanks @vincevahala! - DatePicker:
- Updated BaseButton to use IconButton.
- Added correct isDisabled state and styling to IconButton.
- Disables the IconButton in the isReadOnly state.

0.16.2

Patch Changes

#1298 ef86926 Thanks @stevegreco! - Updated internal dependencies
Updated dependencies [0b0f9c9, ef86926]:
- @cfa/[email protected]
- @cfa/[email protected]

0.16.1

Patch Changes

#1294 b50dc05 Thanks @stevegreco! - Moved react and react-dom to devDependencies to ensure they resolve correctly as peers
#1290 5cc4e61 Thanks @stevegreco! - Select: Fixed an issue that caused the scrollbar to extend past the bottom of the popover

0.16.0

Minor Changes

#1206 0c757fb Thanks @vincevahala! - - Create Stepper component and document examples.
- Create useStepState generic hook and documents examples.
#1283 6be1789 Thanks @stevegreco! - TextInput: No longer renders the character count by default when using the maxLength prop, a new hasCharacterCount prop renders the counter
#1286 5be44ca Thanks @stevegreco! - Added new Description and Error components for the Select and Combobox
#1280 ab6b683 Thanks @stevegreco! - Removed UNSTABLE_onScrollEnd and UNSTABLE_onScrollEndOffset from the Listbox and Combobox components

Patch Changes

#1275 4f3a17b Thanks @vincevahala! - Flatten ListBox CSS, specifically for the .listBoxItem, enabling better adopter styling control.
#1270 8fb071e Thanks @vincevahala! - Add JSDoc descriptions to StandardDOMProps.
#1284 e571a1f Thanks @stevegreco! - MessageBlock: Flattened the CSS for the MessageBlock.Title component for easier overrides.
#1273 03a8644 Thanks @vincevahala! - The data-success attribute is added when the isSuccess boolean prop is true on the following components for state management and styling purposes:
- Checkbox
- Combobox
- NumberInput
- RadioGroup
- SearchInput
- Select
- Text
- TextArea
- TextInput

0.15.0

Minor Changes

#1258 d9e7b2c Thanks @vincevahala! - - Input: refactored to use data-success and data-alignment attributes.
- Accordion: changed elevatedItems prop to isElevated.
#1218 ec4f149 Thanks @stevegreco! - - Enhanced Accordion.Item to be used independently from the Accordion.Root. This is useful if you need to use a singular Accordion.Item. Overall this better encapsulates the component and allows more in depth customizations to the CSS.
- Accordion.Item now has an elevated prop that can be used to render the elevated variant.

Patch Changes

#1231 75c866c Thanks @vincevahala! - Flatten Card CSS for better adopter use.
#1252 5d271e3 Thanks @stevegreco! - Fixed issue with the Modal animation causing the Combobox and Select widths to be calculated incorrectly. The “zoom” animation was causing the --trigger-width variable to calcluate before the animation was finished, causing it to be too small.

This issue was resolved by removing the “zoom” animation and replacing it with the “fade” that was already being used for the Overlay.
#1265 71a9877 Thanks @stevegreco! - Adjusted Modal CSS for better adopter use and customization
#1245 a1ab066 Thanks @vincevahala! - Flatten Combobox CSS for better adopter customizing.
#1251 b0934b1 Thanks @stevegreco! - Added a filled class to the Chip for the default variant
#1243 814ba72 Thanks @stevegreco! - Updated the @react-aria/test-utils dependency to be a dev dependency
#1233 53b167d Thanks @stevegreco! - Simplified CSS for BannerMessage by flattening its DOM structure
#1225 50d1f23 Thanks @stevegreco! - Updated custom CSS properties for the Badge component to be more flexible
#1250 87bd7db Thanks @stevegreco! - Updated React Aria dependencies to latest versions
#1227 c90fd95 Thanks @vincevahala! - Flatten Breadcrumbs CSS for better adopter customization.

0.14.2

Patch Changes

#1217 123fffc Thanks @stevegreco! - Fixed issue with BaseButton border styling that prevented adding border styles with TailwindCSS

0.14.1

Patch Changes

#1199 8216dc4 Thanks @stevegreco! - - Adjusted outline-offset on the Accordion.Item to ensure proper focus styling
- Added open animation when the Accordion.Item opens

0.14.0

Minor Changes

#1183 a05062c Thanks @stevegreco! - Updated Select to ensure it does not render a Dialog in the Popover

Patch Changes

#1177 461dc39 Thanks @stevegreco! - Fixed issues related to labels for Checkbox and Radio
- Updated Checkbox font-weight to 500
- Updated Radio font-weight, font-size and alignment properties to ensure center alignment
#1172 a267c6b Thanks @stevegreco! - Fixed height of Switch component and changed from 22px to 24px

0.13.0

Minor Changes

#1163 2743101 Thanks @vincevahala! - Remove React.HTMLAttributes<HTMLDivElement> from Surface and use StandardDOMProps internal props in its place’.

Patch Changes

#1169 6ce8734 Thanks @stevegreco! - Added missing background-color for the Input component to fix issue with Tailwind base style conflicts

0.12.0

Minor Changes

#1073 70efb42 Thanks @stevegreco! - Removed shouldCloseOnInteractOutside from components using the Dialog, this prop is different from isDismissable which allows the user to close the Modal components by clicking outside.
#1144 4c93759 Thanks @stevegreco! - Removed internal CSS layers to prevent conflicts with tailwindcss@3
#1094 4a700dc Thanks @stevegreco! - Exporting the @internationalized/date package from @cfa/react-core for version unity
#1127 8878f65 Thanks @vincevahala! - 🚨 BREAKING CHANGE: Updated Tooltip API

We have updated the Tooltip API to be more consistent with other components and provide better control over placement and styling.

Previous API:
```
<Tooltip.Trigger>
  <Button>Hover me</Button>
  <Tooltip>Tooltip Content</Tooltip>
</Tooltip.Trigger>
```
New API:
```
<Tooltip.Root>
  <Button>Hover me</Button>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip.Root>
```
#1115 836d5a6 Thanks @vincevahala! - Remove CustomCSSProperties from Divider.
#1126 71272a5 Thanks @stevegreco! - Added two new features:
- useFilter - A new hook that simplifies text filtering in components, supporting case sensitivity options and locale-aware string matching
- Autocomplete - A new component that combines input fields with filtered suggestions, enabling searchable dropdown menus and command palettes
#1131 4502b60 Thanks @vincevahala! - Chip:
- Removed React.DetailedHTMLProps of HTMLDivElement
- Added the internal StandardDOMProps
#1065 0ee191e Thanks @vincevahala! - Refactored Avatar into compound API pattern and added documentation.

#1078 c64382c Thanks @stevegreco! - 🚨 BREAKING CHANGE

Updated the GridList and ListBox with a new composition API

Before

<ListBox>
  <ListBox.Item>Item 1</ListBox.Item>
  <ListBox.Item>Item 2</ListBox.Item>
</ListBox>

<GridList>
  <GridList.Item>Item 1</GridList.Item>
  <GridList.Item>Item 2</GridList.Item>
</GridList>

After

<ListBox.Root>
  <ListBox.Item>Item 1</ListBox.Item>
  <ListBox.Item>Item 2</ListBox.Item>
</ListBox.Root>

<GridList.Root>
  <GridList.Item>Item 1</GridList.Item>
  <GridList.Item>Item 2</GridList.Item>
</GridList.Root>

#1044 9f8a2aa Thanks @stevegreco! - Added LinkButton component
#1072 f80ff36 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Popover API

We have updated the Popover API to be more consistent with other components and provide better control over placement and styling.

In the previous iteration of the Popover, the component structure was less clear. Here is the previous API for the Popover.
```
<Popover.Trigger>
  <Button>Open Popover</Button>
  <Popover>Popover Content</Popover>
</Popover.Trigger>
```
The new API provides a more consistent component structure and improved naming.
```
<Popover.Root>
  <Button>Open Popover</Button>
  <Popover.Panel>Popover Content</Popover.Panel>
</Popover.Root>
```
For more advanced use cases, we’ve exposed the composition pattern with separate components.
```
<Popover.Root>
  <Button>Open Popover</Button>
  <Popover.Wrapper>
    <Popover.Dialog>Advanced Composition</Popover.Dialog>
  </Popover.Wrapper>
</Popover.Root>
```
However, we recommend using the simplified Popover.Panel component for most use cases.
#1114 b392dc5 Thanks @vincevahala! - Badge Component:
- Removed CustomCSSProperties.
- Removed DetailedHTMLAttributes of HTMLSpanElement props.
- Added internal StandardDOMProps.
#1118 32a9012 Thanks @vincevahala! - LoadingIndicator:
- Remove React.HTMLAttributes<HTMLDivElement>.
- Add StandardDOMProps and LabelingProps.

Patch Changes

#1113 507a8e7 Thanks @stevegreco! - - Aligned Input placeholder and read-only styles with the proper design tokens
#1096 0bbb907 Thanks @stevegreco! - Added docs for the Breadcrumbs component
#1161 927512a Thanks @stevegreco! - Added missing custom className to Modal.Overlay
#1134 9535a37 Thanks @stevegreco! - Updated react-aria package versions for latest release
- [email protected]
- @internationalized/[email protected]
- @react-aria/[email protected]
- @react-aria/utils@^3.29.0
- @react-stately/[email protected]
You can find the most recent release notes here
#1092 e33a0c7 Thanks @stevegreco! - Fixed issue with sm size prop for the ToggleButton
#1068 e43bddb Thanks @vincevahala! - Add color prop to PageLoader.
#1132 fcdc870 Thanks @vincevahala! - [Bug]: Conditionally render the correct icon (check, dash, or no icon) in the Checkbox component, fixing a bug where it appeared to be checked when isDisabled and isReadOnly.
#1137 55c1a19 Thanks @vincevahala! - Add Checkbox and CheckboxGroup README and document examples
#1113 507a8e7 Thanks @stevegreco! - Added required styles to the SearchInput
#1073 70efb42 Thanks @stevegreco! - Exported proper props for the Modal components

0.11.0

Minor Changes

#961 13ff7d4 Thanks @stevegreco! - - Removed onClick prop from interactive components to ensure consistent handling of click events using onPress as suggested by the React Aria team:
- Select.Button
- Link
- ToggleButton
- ToggleButtonGroup
New React Aria Prop Updates
- Added createCalendar prop to Calendar components, enabling custom calendar implementations via (identifier: CalendarIdentifier) => Calendar function
- Added escapeKeyBehavior prop to ListBox components to control clearing selection on Escape key press (“clearSelection” | “none”)
- Deprecated UNSTABLE_portalContainer prop across all overlay components (Modal, Popover, Tooltip) in favor of using UNSAFE_PortalProvider
#910 126c4d1 Thanks @stevegreco! - Added Breadcrumbs Component
#977 8999b46 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated composition API for Card component

This change adopts a compound component pattern for the Card component, making the API more explicit and consistent with other components in the design system.

Before:
```
<Card outlined>
  <Card.Content>
    <Card.Title>Chick-fil-A Cool Wrap</Card.Title>
  </Card.Content>
</Card>
```
After:
```
<Card.Root outlined>
  <Card.Content>
    <Card.Title>Chick-fil-A Cool Wrap</Card.Title>
  </Card.Content>
</Card.Root>
```
Changes include:
- Renamed the main Card component to Card.Root
- Moved types into types.ts
- Updated all internal implementations and tests to use the new API
- Documentation reflects the new compound component pattern
#910 126c4d1 Thanks @stevegreco! - Added Link component
#1051 7729c60 Thanks @vincevahala! - - Component API changes: Updated component to MessageBlock.Root to follow compound component pattern.
- Prop changes: Remove React.HTMLAttributes<HTMLDivElement> from MessageBlock Props, and use the internal StandardDOMProps and LabelingProps.
#843 f089a1e Thanks @stevegreco! - Updated to [email protected] and [email protected]
#920 0c9bad4 Thanks @stevegreco! - 🚨 BREAKING CHANGE: variant has been marked as deprecated and changed to severity on the MessageBlock
#1043 0775adb Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Drawer API

We have updated the Drawer API to be more user friendly and provide a better default experience.

In the previous iteration of the Drawer, some of the components were obscured behind the scenes, here is the previous API for the Drawer.
```
<Drawer.Trigger>
  <Button>Open Drawer</Button>
  <Drawer>Drawer Content</Drawer>
</Drawer.Trigger>
```
The new API involves more components, but also provides more control over the component itself, along with the styling.
```
<Drawer.Root>
  <Button>Open Drawer</Button>
  <Drawer.Tray>Drawer Content</Drawer.Tray>
</Drawer.Root>
```
✅ New Feature

There is a Drawer.Overlay that is available as an optional component. This would only ever be needed if you needed to make some sort of customization to the Overlay itself. We do not recommend using this unless there is a specific reason to do so.
```
<Drawer.Root>
  <Button>Open Drawer</Button>
  <Drawer.Tray>Drawer Content</Drawer.Tray>
</Drawer.Root>
```
The main change here is
- The Drawer previously combined together the Overlay and the Dialog, now those are independent of each other for greater control
#988 d4ed523 Thanks @stevegreco! - Add CSS Layers
- Added reset, base and core layers
#1045 45d41c7 Thanks @vincevahala! - Remove React.HTMLAttributes from BannerMessage Props.
#960 4a6191e Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated composition API for Accordion component

This change adopts a compound component pattern for the Accordion component, making the API more explicit and consistent with other components in the design system.

Before:
```
<Accordion>
  <Accordion.Item>
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Panel>Content 1</Accordion.Panel>
  </Accordion.Item>
</Accordion>
```
After:
```
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Panel>Content 1</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
```
Changes include:
- Renamed the main Accordion component to Accordion.Root
- Export types for all subcomponents: AccordionTriggerProps, AccordionPanelProps, AccordionItemProps
- Updated all internal implementations and tests to use the new API
- Documentation reflects the new compound component pattern

#987 5af2dac Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated ComboBox and Select to use compound component pattern

Before:

import { ComboBox } from "@cfa/react-core";

<Select items={sauces} label="Select a sauce">
  {(sauce) => <Select.Item id={sauce.id}>{sauce.name}</Select.Item>}
</Select>;

<ComboBox items={sauces} label="Select a sauce">
  {(sauce) => <ComboBox.Item id={sauce.id}>{sauce.name}</ComboBox.Item>}
</ComboBox>;

After:

import { ComboBox } from "@cfa/react-core";

<Combobox.Root>
  <Combobox.Label>Sauces</Combobox.Label>
  <Combobox.Input />
  <Combobox.Button />
  <Combobox.Popover>
    <Combobox.List items={sauces}>
      {(sauce) => <ComboBox.Item id={sauce.id}>{sauce.name}</ComboBox.Item>}
    </Combobox.List>
  </Combobox.Popover>
</Combobox.Root>;

import { Select } from "@cfa/react-core";

<Select.Root>
  <Select.Label>Select</Select.Label>
  <Select.Button>
    <Select.Value />
  </Select.Button>
  <Select.Popover>
    <Select.List items={sauces}>
      {(sauce) => <Select.Item id={sauce.id}>{sauce.name}</Select.Item>}
    </Select.List>
  </Select.Popover>
</Select.Root>;

✅ New Features

New component has been added

ClearButton is now available for both the Combobox and Select. This new button can be used anywhere within the Select.Root and will clear the state onPress. This was previously available, but you would have to use the component in a controlled state, and write this logic yourself. This provides a “batteries included” solution.

import { Select } from "@cfa/react-core";

<Select.Root>
  <Select.Label>Select</Select.Label>
  <Select.Button>
    <Select.Value />
  </Select.Button>
  <Select.ClearButton>Reset</Select.ClearButton>
  <Select.Popover>
    <Select.List>
      <Select.Item id="1">Item 1</Select.Item>
    </Select.List>
  </Select.Popover>
</Select.Root>;

Key Changes:

Renamed ComboBox to ComboBox.Root
Rename Select to Select.Root
Added a ClearButton to both the Combobox and Select for enhancement composability. This new component hooks into the context of the Combobox/Select to allow someone to clear the state.
Updated Stories and Tests to use the new structure

#993 e3884f0 Thanks @vincevahala! - 🚨 BREAKING CHANGE: Refactored Tabs component to adopt a compound component pattern:
- Tabs becomes Tabs.Root
- Tab.List becomes Tabs.List
- Tab becomes Tabs.Item
- Tab.Panel becomes Tabs.Panel
Add README to Tabs:
- Add prop table
- Add examples
- [INTERNAL] Remove autodocs from SB
#915 ee2e9a3 Thanks @stevegreco! - 🚨 BREAKING CHANGE: Updated Modal API

We have updated the Modal API to be more user friendly and provide a better default experience.

In the previous iteration of the Modal, some of the components were obscured behind the scenes, here is the previous API for the Modal.
```
<Modal.Trigger>
  <Button>Open Modal</Button>
  <Modal>Modal Content</Modal>
</Modal.Trigger>
```
The new API involves more components, but also provides more control over the component itself, along with the styling.
```
<Modal.Root>
  <Button>Open Modal</Button>
  <Modal.Dialog>
    <Modal.Content>Modal Content</Modal.Content>
  </Modal.Dialog>
</Modal.Root>
```
✅ New Feature

There is a Modal.Overlay that is available as an optional component. This would only ever be needed if you needed to make some sort of customization to the Overlay itself. We do not recommend using this unless there is a specific reason to do so.
```
<Modal.Root>
  <Button>Open Modal</Button>
  <Modal.Overlay>
    <Modal.Dialog>
      <Modal.Content>Modal Content</Modal.Content>
    </Modal.Dialog>
  </Modal.Overlay>
</Modal.Root>
```
The two main changes here are
- The Modal previously combined together the Overlay and the Dialog, now those are independent of each other for greater control
- We now provide the Modal.Content component that provides the default layout experience for the Modal as defined in the Design System. It provides basic padding and content width properties.

Patch Changes

#1021 44cf6fe Thanks @vincevahala! - - Create PageLoader README.
- Adjust PageLoaderProps to be more explicit in prop usage.
  - Add StandardDOMProps and LabelingPropsfrom internal types.
  - Remove prop extension of React.HTMLAttributes<HTMLDivElement>.
#946 3c79268 Thanks @stevegreco! - Fixed gap issue on the default Accordion variant to ensure correct spacing
#1054 c847b4a Thanks @stevegreco! - Adjusted margin on RadioGroup and Checkbox group
#935 8669dc8 Thanks @stevegreco! - Updated React Aria to v1.8
- Omitted the new onClick handler from the Button, the suggested approach is to utilize onPress
#1032 3d542d6 Thanks @vincevahala! - Add RadioGroup README.
#1050 425bdfd Thanks @vincevahala! - Add Switch README and examples.
#1010 fadae72 Thanks @stevegreco! - Fixed left padding on the SearchInput when using the compact prop
#902 0b2c0cc Thanks @vincevahala! - Add CheckboxGroup README
#937 12cc071 Thanks @stevegreco! - Updated prop data for Link, Breadcrumb and MessageBlock
#1057 29f6bbc Thanks @vincevahala! - - Add ToggleButton README for ToggleButton and ToggleButtonGroup.
- Remove CustomCSSProperties from ToggleButton.
#843 f089a1e Thanks @stevegreco! - Updated dependencies to be up-to-date
#1039 3a55713 Thanks @vincevahala! - Add IconButton README and documentation.
#1045 45d41c7 Thanks @vincevahala! - Add BannerMessage README.
#963 b8fe496 Thanks @vincevahala! - - Added Props Table documentations to Modal, Badge, Button READMEs.
#756 6451ab0 Thanks @richard-flosi! - Add Menu component
#936 a18f6ce Thanks @vincevahala! - Add link to docs site in JSDoc and move the other data into component READMEs.
#1035 4a6652b Thanks @stevegreco! - Removed padding: 0 from global form fields and added directly to BaseButton
#973 241d194 Thanks @vincevahala! - Add props table component to the following component READMEs:
- Accordion, Checkbox, CheckboxGroup, Chip, DatePicker, Divider, LoadingIndicator, NumberInput, SearchInput, Select, Slider, TextInput.
#980 9dd184f Thanks @vincevahala! - Fixed inconsistent heights across button variants to ensure uniform sizing and alignment.
#1051 7729c60 Thanks @vincevahala! - Add README for MessageBlock with examples and documentation.
Updated dependencies [f089a1e, f089a1e, 11b6be4]:
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]

0.10.0

Minor Changes

#643 47475de Thanks @richard-flosi! - Added Card component
#740 6c6edf1 Thanks @vincevahala! - Added Slider component
#748 a62ee14 Thanks @stevegreco! - Updated Button sizes with new Design guidance
- Removed the min-width from the size variants
- Adjusted padding values across all three sizes
#749 fbd5385 Thanks @stevegreco! - Updated Accordion to match new Design guidance. Accordion is now flat by default.
- Removed surface prop
- Added elevatedItems prop
#816 f55f6f1 Thanks @vincevahala! - Added ProgressBar component

Patch Changes

#781 a1848e8 Thanks @vincevahala! - Correct Chip gap from 6 to 8px
#768 52fd8fd Thanks @stevegreco! - Removed inline style from MessageBlockTitle
#794 11d9927 Thanks @stevegreco! - Fixed issue with BannerMessage that cause the icon to get smaller on smaller screens
#776 b665ebf Thanks @demispartan! - Removed duplicate CSS from Switch
#878 5788eef Thanks @vincevahala! - Fix validation story in RadioGroup
#799 0b5f2ca Thanks @vincevahala! - Add Slider visual tests
#833 02a9a2d Thanks @vincevahala! - Migrate component react.mdx page from apps/design-system-docs to packages/react-core by adding README.mdx to existing docs site components
#875 0fce02e Thanks @stevegreco! - Adjusted spacing for TextInput and Select to allow for better multi column form layouts
- Removed min-height from the description on the TextInput
- Added missing flex property to the Select
Updated dependencies [6c6edf1]:
- @cfa/[email protected]

0.9.0

Minor Changes

#685 f0d5020 Thanks @stevegreco! - Added new /server and /client exports to support frameworks like NextJS
- /server contains components that can be used on the server without the use of the use client directive
- /client contains components that must be imported into components using use client.
All components are still exported from the root @cfa/react-core module, these changes only impact specific use cases in SSR frameworks
#677 2dd0504 Thanks @stevegreco! - Updated the DatePicker to be exported as UNSTABLE_*, this is to support the release of v1 and inform users that these components are still in a beta state, the components are being exported as follows
- Datepicker ---> UNSTABLE_DatePicker
Imports for this component will now be different, so you will have to either update your code, or add an alias to your imports as follows.
```
import { UNSTABLE_DatePicker as DatePicker } from "@cfa/react-core";
```
Also, updated two props on the Select and ComboBox components to be UNSTABLE
- onScrollEnd ---> UNSTABLE_onScrollEnd
- onScrollEndOffset ---> UNSTABLE_onScrollEndOffset

Patch Changes

#735 1d2667e Thanks @stevegreco! - Added display: none for inert Tab.Panel components that are using the shouldForceMount prop
#739 6bfd21d Thanks @stevegreco! - Removed z-index from the Drawer and Modal overlay components
#741 6039672 Thanks @stevegreco! - Updated React Aria patch version to 1.7.1
#653 8a2601c Thanks @vincevahala! - Add examples.mdx to Button/docs
#708 f6bc6da Thanks @vincevahala! - Fix JSDoc storybook link
#707 476b2f4 Thanks @richard-flosi! - Exports Selection type from react-aria-components Removes wrapping <div> from ThemeProvider
#715 5c4e6d5 Thanks @stevegreco! - Updated Button to utilize CSS variables to simplify overriding nested classes
#682 7d09bbe Thanks @stevegreco! - Added component prop documentation for all components
Updated dependencies [258fd95, 258fd95, 258fd95]:
- @cfa/[email protected]
- @cfa/[email protected]

0.8.1

Patch Changes

#688 53d11aa Thanks @stevegreco! - Added cursor: pointer to the BaseButton
#675 0e587bd Thanks @vincevahala! - Added 8px gap to Button

0.8.0

Minor Changes

#605 959bfc3 Thanks @stevegreco! - Added internal TagGroup Component
#657 169fa92 Thanks @stevegreco! - Added an alignment prop to the NumberInput component with options for left (default) and right

Patch Changes

#654 999b112 Thanks @vincevahala! - Remove comment from Button/composability.mdx
#618 83887e3 Thanks @stevegreco! - Updated various components to properly destructure the className prop
#583 698314c Thanks @richard-flosi! - Add RangeCalendar and DateRangePicker components. Exports I18nProvider from react-aria-components.
#671 6e503bf Thanks @stevegreco! - Added new Pressable and Focusable components to allow for custom triggers in the Popover and Tooltip
#671 6e503bf Thanks @stevegreco! - Updated react-aria-components to version 1.7.0, as well as react-aria and @react-aria/test-utils
#661 f8af9b7 Thanks @vincevahala! - Add isPending styles to Button
#624 42afe07 Thanks @stevegreco! - Updated versions of storybook, vite and vitest
#660 d86fb1c Thanks @stevegreco! - Updated composability docs for Button
Updated dependencies [42afe07]:
- @cfa/[email protected]
- @cfa/[email protected]

0.7.1

Patch Changes

#615 c03e653 Thanks @stevegreco! - Fixed issue with placeholder styling in the Select component
#598 e0a0b4a Thanks @vincevahala! - Add GH link to JSDoc in Button component. Add composability.mdx docs in Button.
#596 5b4238a Thanks @richard-flosi! - Added internal TimeInput component
#617 069e8b3 Thanks @stevegreco! - Fixed issue with Accordion.Item custom classNames overriding the internal classes
#615 c03e653 Thanks @stevegreco! - Fixed issue with gap on the Accordion surface variant

0.7.0

Minor Changes

#567 fadb009 Thanks @vincevahala! - Added Tabs
#589 d2dcd33 Thanks @stevegreco! - Exported the RouterProvider component from react-aria-components to support routing functionality in components

Patch Changes

#580 3d1b0ec Thanks @richard-flosi! - Fix: DatePicker a11y errors
#589 d2dcd33 Thanks @stevegreco! - Fixed issue with the alignment of the Chevron in the Accordion.Item
#570 a5f4a92 Thanks @stevegreco! - Enhanced Input Components
- Added additional unit tests
- Updated styles to make the heights consistent across components
- Made small adjustments to the component structures to enable consistent CSS
#578 c301fc1 Thanks @richard-flosi! - Fix: Calendar a11y landmark error
#571 961d111 Thanks @stevegreco! - Update various unit tests to achieve better code coverage
- Updated unit tests to get better code coverage
- Removed inline SVGs and replaced with correct system-icons
- Made small enhancements to various components to enhance testing
#587 d4e85d8 Thanks @vincevahala! - Add color and fullWidth prop to Tabs. Update Tabs styles after design review.
#592 c7ad551 Thanks @vincevahala! - Use cva on Tabs and add CustomCSSProperties interface.

0.6.0

Minor Changes

#560 5ed1b12 Thanks @stevegreco! - Added TextArea component
- New TextArea primitive component added
- Updated TextInput to include a multiline prop to render the TextArea
- Updated Stories and Styles for TextInput to be consistent
- Added e2e tests for <TextInput multiline />
#539 410023c Thanks @stevegreco! - Added isCloseButtonHidden prop that removes the Close button from the Modal and Drawer
- isDismissable now only enables the Modal/Drawer to be closed by clicking outside
#557 bb3d3d9 Thanks @stevegreco! - Updated disabled styles for Accordion.Trigger
#545 cf6af06 Thanks @stevegreco! - Removed duplicate placement prop values for Tooltip and Popover

Patch Changes

#429 c93530b Thanks @richard-flosi! - Adds new BaseDateInput, DateInput, Calendar, and DatePicker components
#523 b8f2740 Thanks @stevegreco! - Fixed CSS issues with the Select component
- Added a min-height to prevent sizing issues when no placeholder is used
- Removed the default placeholder so that its only visible when the placeholder prop is used
#550 b344709 Thanks @vincevahala! - Add JSDoc to Chip.tsx, add docgen config and run pnpm docgen. Update turbo/generators doc-page templates.
#557 bb3d3d9 Thanks @stevegreco! - Fixed issue with padding in the Accordion.Panel

0.5.0

Minor Changes

#496 cb2e567 Thanks @vincevahala! - Extend React detailed html props and attributes for Badge, BannerMessage, Chip

Patch Changes

#500 82a8411 Thanks @vincevahala! - Use span DetailedHTMLProps and HTMLAttributes in Badge. Fix Badge styles.
#512 29e8e33 Thanks @stevegreco! - - Enhanced Unit Tests for TextInput to validate the type prop
- Enhanced Unit Tests for Select to include different interaction types
- Updated Stories for various components to solve a11y warnings
- Added additional Stories for TextInput and Input to allow for better testing
#488 9019e75 Thanks @vincevahala! - Add JSDoc component descriptions to button, checkbox, numberinput, select, and textinput
#506 ecc9fb2 Thanks @stevegreco! - Fixed issue with spacing on the Switch component
#493 c2f23f9 Thanks @vincevahala! - Update Divider Docs
#476 7301d5c Thanks @stevegreco! - Updated playwright dependencies to use pnpm catalogs to maintain consistent versions
Updated dependencies [7301d5c]:
- @cfa/[email protected]

0.4.0

Minor Changes

#465 4f051ab Thanks @stevegreco! - Removed renderIcon prop from the Select component
#465 4f051ab Thanks @stevegreco! - Added the ComboBox component
#483 bf27baf Thanks @stevegreco! - Added Drawer component
#486 42e13f5 Thanks @stevegreco! - Updated the Input, Text and Label to contain their own styles related to states. This will enhance composability and consolidate these styles in one place. The states in question are things like isSuccess, isInvalid and isDisabled
#440 a290956 Thanks @vincevahala! - Adds Divider component

Patch Changes

#473 c79b11b Thanks @stevegreco! - Fixed issues with TailwindCSS usage
- Reset the moz-focusring to none on the BaseButton to prevent unwanted focus styles from appearing after click of the button
- Set cursor: default on the BaseButton
#479 349fb76 Thanks @stevegreco! - Fixed issue with Icon Button Story
Updated dependencies [3f53c68, 3f53c68]:
- @cfa/[email protected]
- @cfa/[email protected]

0.3.1

Patch Changes

#464 7a9eb66 Thanks @stevegreco! - Fixed issue with the icon animation for the Select component.

0.3.0

Minor Changes

#446 d325609 Thanks @stevegreco! - Select component updates
- Added states for isInvalid, isSuccess, isDisabled.
- Added the compact variant
- Updated test cases to account for new states
- Updated docs and examples in the README.md
#399 c78b5c7 Thanks @richard-flosi! - Adds ToggleButton and ToggleButtonGroup components
#454 571ec45 Thanks @stevegreco! - - Removed normalize.css and updated to modern-normalize so our resets can match TailwindCSS to avoid conflicts.
- Added specific resets similar to TailwindCSS to our global index.css to ensure consistency in resetting margin and padding.

Patch Changes

#421 fb09925 Thanks @richard-flosi! - Remove ariaLabel from Avatar component.
#426 a0a9f4e Thanks @stevegreco! - Updated Vitest to v3
#437 49d0f1d Thanks @stevegreco! - Updated docs for Button, Checkbox, Select, NumberInput and TextInput using the new CLI to generate type information.
- Added config files for each of the above components
- Added JSDoc comments to ensure that type data was generated correctly
- Ran the CLI to generate the data
#426 a0a9f4e Thanks @stevegreco! - Enhanced test cases for Select, ListBox and GridList using some of the new utilities provided by @react-aria/test-utils. Also fixed some various small issues with some of the Stories to remove a11y errors.
#454 571ec45 Thanks @stevegreco! - Fixed issue with the IconButton sizing as reported by @donnycheng1204
#426 a0a9f4e Thanks @stevegreco! - Updated Storybook to v8.5, which includes a11y testing out of the box
Updated dependencies [a0a9f4e, a0a9f4e]:
- @cfa/[email protected]
- @cfa/[email protected]

0.2.0

Minor Changes

#370 13d105e Thanks @stevegreco! - Added the Select, Listbox and GridList components
#401 d9ca21e Thanks @stevegreco! - Added a ThemeProvider component to inject our package css
#396 bbcbab3 Thanks @stevegreco! - Added the BaseButton component and used it as the base of Button and IconButton
#375 f08a8d7 Thanks @richard-flosi! - Avatar Components
#410 c1318b0 Thanks @stevegreco! - Updated the Popover to use the compound component pattern to help with composing other components like the Select

Patch Changes

#403 808b384 Thanks @richard-flosi! - Add ESLint Rule for react/function-component-definition as function-declaration
#394 498f70b Thanks @richard-flosi! - Updated size prop values and classnames to match
#418 96486a4 Thanks @stevegreco! - Removed cursor: pointer from the Checkbox, Radio/RadioGroup and Switch
#406 1244781 Thanks @vincevahala! - Added margin zero to PageLoader component in react-core.
Updated dependencies [3d29606, d9ca21e]:
- @cfa/[email protected]

0.1.1

Patch Changes

3ccec96: Created PageLoader component in react-core and created component specific tokens, in the loader collection.
5068945: Fixing typo in the publish workflow
1af715e: Added README files for the Button and Accordion components
2bf7069: Fixed issue with dependencies being listed as devDependencies
8a99191: Attempting to change the author of the most recent commit for Changesets PR releases
61e9b08: Updated deploy keys for GH actions
ca325b8: Updated react-core README
5a1ad3d: Updating publish.yml to attempt to sign commits
7cc54e7: Added new token for changesets github config
527b1e6: First Beta version
Updated dependencies [776fcc3]
Updated dependencies [527b1e6]
- @cfa/[email protected]
- @cfa/[email protected]
- @cfa/[email protected]

0.1.1-beta.0

Patch Changes

First Beta version