@cdx-ui/components 0.2.4 → 0.3.0

package/docs/components/chip/content.md

@@ -393,7 +393,7 @@ Displays an avatar inside the chip, sized to fit the chip's `size` variant.
 | `accessible?` | `boolean` | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
 | `accessibilityActions?` | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string; }>[]` | — | Provides an array of custom actions available for accessibility. |
 | `accessibilityLabel?` | `string` | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space. |
-| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424 |
+| `aria-label?` | `string` | — | Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/react/react-native/issues/34424 |
 | `accessibilityRole?` | `'none' \| 'button' \| 'togglebutton' \| 'link' \| 'search' \| 'image' \| 'keyboardkey' \| 'text' \| 'adjustable' \| 'imagebutton' \| 'header' \| 'summary' \| 'alert' \| 'checkbox' \| 'combobox' \| 'menu' \| 'menubar' \| 'menuitem' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'scrollbar' \| 'spinbutton' \| 'switch' \| 'tab' \| 'tabbar' \| 'tablist' \| 'timer' \| 'list' \| 'toolbar'` | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. |
 | `accessibilityState?` | `AccessibilityState` | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. |
 | `aria-busy?` | `boolean` | — | alias for accessibilityState see https://reactnative.dev/docs/accessibility#accessibilitystate |

package/docs/components/color-area/content.md

@@ -1,20 +1,18 @@
-# ColorArea (https://design.candescent.com/docs/components/color-area)
+# Color Area (https://design.candescent.com/docs/components/color-area)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorarea--default)
 
 `ColorArea` selects saturation horizontally and brightness vertically.
 
 ```tsx
-import { ColorArea } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorArea, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorArea } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorArea, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-field/content.md

@@ -1,12 +1,11 @@
-# ColorField (https://design.candescent.com/docs/components/color-field)
+# Color Field (https://design.candescent.com/docs/components/color-field)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorfield--default)
 
 `ColorField` parses full hex values or edits a single RGB or HSL channel.
 
 ```tsx
-import { ColorField, ColorSwatch, Field } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorField, ColorSwatch, Field, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
@@ -15,8 +14,7 @@ Compose `Field` for the visible label and place an optional swatch in `ColorFiel
 
 ```tsx
 import { useState } from 'react';
-import { ColorField, ColorSwatch, Field } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorField, ColorSwatch, Field, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-picker/content.md

@@ -1,4 +1,4 @@
-# ColorPicker (https://design.candescent.com/docs/components/color-picker)
+# Color Picker (https://design.candescent.com/docs/components/color-picker)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorpicker--default)
 
@@ -15,8 +15,8 @@ import {
   HStack,
   Select,
   Text,
+  parseColor,
 } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
 ```
 
 ## Basic
@@ -35,8 +35,9 @@ import {
   HStack,
   Select,
   Text,
+  parseColor,
+  type Color,
 } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
 
 type ColorFormat = 'hex' | 'rgb' | 'hsl';
 
@@ -66,7 +67,7 @@ export default function ColorPickerBasicDemo() {
   return (
     <ColorPicker value={value} onValueChange={setValue} className="w-full max-w-sm">
       <ColorPicker.Trigger accessibilityLabel="Choose brand color">
-        <ColorSwatch size="sm" />
+        <ColorSwatch />
         <Text>{value.toString('hex')}</Text>
       </ColorPicker.Trigger>
       <ColorPicker.Popover>

package/docs/components/color-slider/content.md

@@ -1,20 +1,18 @@
-# ColorSlider (https://design.candescent.com/docs/components/color-slider)
+# Color Slider (https://design.candescent.com/docs/components/color-slider)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorslider--default)
 
 `ColorSlider` adjusts one color channel and renders the channel gradient in its rail.
 
 ```tsx
-import { ColorSlider } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSlider, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorSlider } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSlider, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-swatch/content.md

@@ -1,19 +1,17 @@
-# ColorSwatch (https://design.candescent.com/docs/components/color-swatch)
+# Color Swatch (https://design.candescent.com/docs/components/color-swatch)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatch--default)
 
 `ColorSwatch` displays an explicit color or the current value from a surrounding `ColorPicker`.
 
 ```tsx
-import { ColorSwatch, HStack } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSwatch, HStack, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
-import { ColorSwatch, HStack } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSwatch, HStack, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-swatch-picker/content.md

@@ -1,20 +1,18 @@
-# ColorSwatchPicker (https://design.candescent.com/docs/components/color-swatch-picker)
+# Color Swatch Picker (https://design.candescent.com/docs/components/color-swatch-picker)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatchpicker--default)
 
 `ColorSwatchPicker` selects one color from a consumer-supplied set of presets.
 
 ```tsx
-import { ColorSwatchPicker } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSwatchPicker, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorSwatchPicker } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSwatchPicker, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/content.md

@@ -22,12 +22,12 @@
 - [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one option from a dropdown list.
 - [Textarea](https://design.candescent.com/docs/components/textarea/content.md) — A multi-line text entry for longer free-form content.
 - [Slider](https://design.candescent.com/docs/components/slider/content.md) — A control for selecting a numeric value along a track.
-- [ColorPicker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
-- [ColorArea](https://design.candescent.com/docs/components/color-area/content.md) — A two-dimensional control for selecting saturation and brightness in the HSB color space.
-- [ColorSlider](https://design.candescent.com/docs/components/color-slider/content.md) — A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color.
-- [ColorField](https://design.candescent.com/docs/components/color-field/content.md) — A text field for editing an opaque color or one RGB or HSL channel.
-- [ColorSwatch](https://design.candescent.com/docs/components/color-swatch/content.md) — A presentational sample of an opaque color in configurable sizes and shapes.
-- [ColorSwatchPicker](https://design.candescent.com/docs/components/color-swatch-picker/content.md) — A radio-style compound for choosing from consumer-supplied color presets.
+- [Color Picker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
+- [Color Area](https://design.candescent.com/docs/components/color-area/content.md) — A two-dimensional control for selecting saturation and brightness in the HSB color space.
+- [Color Slider](https://design.candescent.com/docs/components/color-slider/content.md) — A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color.
+- [Color Field](https://design.candescent.com/docs/components/color-field/content.md) — A text field for editing an opaque color or one RGB or HSL channel.
+- [Color Swatch](https://design.candescent.com/docs/components/color-swatch/content.md) — A presentational sample of an opaque color in configurable sizes and shapes.
+- [Color Swatch Picker](https://design.candescent.com/docs/components/color-swatch-picker/content.md) — A radio-style compound for choosing from consumer-supplied color presets.
 - [Switch](https://design.candescent.com/docs/components/switch/content.md) — A toggle control that lets users turn a single option on or off.
 - [Tile](https://design.candescent.com/docs/components/tile/content.md) — A composable, selectable card/row for pick-one or pick-many flows such as account pickers and category selectors.
 
@@ -62,7 +62,7 @@
 - [Icon](https://design.candescent.com/docs/components/icon/content.md) — A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support.
 - [Image](https://design.candescent.com/docs/components/image/content.md) — Displays local or remote images across native and web platforms.
 - [List Item](https://design.candescent.com/docs/components/list-item/content.md) — A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows.
-- [ReorderableList](https://design.candescent.com/docs/components/reorderable-list/content.md) — A short, mount-all list that lets members drag rows into a new order via an explicit handle.
+- [Reorderable List](https://design.candescent.com/docs/components/reorderable-list/content.md) — A short, mount-all list that lets members drag rows into a new order via an explicit handle.
 - [Virtualized List](https://design.candescent.com/docs/components/virtualized-list/content.md) — A performant virtualized list for large datasets — only visible rows mount at a time.
 - [Text](https://design.candescent.com/docs/components/text/content.md) — Body text with a responsive, token-based typography scale.
 - [Heading](https://design.candescent.com/docs/components/heading/content.md) — Semantic heading text with an accessible, token-based typography scale.
@@ -79,10 +79,11 @@
 ## Surfaces & layout
 
 - [Bottom Sheet](https://design.candescent.com/docs/components/bottom-sheet/content.md) — A surface that slides up from the bottom of the screen to present secondary tasks without leaving the current context.
+- [Box](https://design.candescent.com/docs/components/box/content.md) — The layout container for building screens, with semantic web elements through role and an asChild escape hatch.
 - [Card](https://design.candescent.com/docs/components/card/content.md) — A composable surface for grouping related content, with optional brand stripe, header, content, and footer regions.
 - [Drawer](https://design.candescent.com/docs/components/drawer/content.md) — A panel attached to an edge of the viewport or container, with modal and permanent presentations.
-- [ScopedTheme](https://design.candescent.com/docs/components/scoped-theme/content.md) — Forces a specific theme on a component subtree, regardless of the application's global theme.
-- [ScrollShadow](https://design.candescent.com/docs/components/scroll-shadow/content.md) — Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web.
+- [Scoped Theme](https://design.candescent.com/docs/components/scoped-theme/content.md) — Forces a specific theme on a component subtree, regardless of the application's global theme.
+- [Scroll Shadow](https://design.candescent.com/docs/components/scroll-shadow/content.md) — Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web.
 - [Stack](https://design.candescent.com/docs/components/stack/content.md) — Horizontal and vertical layout primitives with token-based spacing and optional reversed order.
 
 ## Navigation

package/docs/components/data-grid/content.md

@@ -15,7 +15,7 @@ Pass `rows` and `columns`. This account grid starts with the features most appli
 
 Search is **not** always on. Set `showToolbar` to show the search field (same opt-in as MUI Community’s toolbar / quick filter). Set `headerFilters` to show per-column filter inputs in a second header row.
 
-The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with `className` or `style` (`h-full`, `h-[520px]`, or `style={{ height: 520 }}`).
+The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with a `className` such as `h-full` or a spacing-scale height (`h-130`).
 
 When `rows` is empty, a centered "No rows" message is shown and pagination is omitted. Pass `noRowsOverlay` to replace the default message.
 
@@ -70,7 +70,7 @@ export default function DataGridBasicDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10, 25]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -138,7 +138,7 @@ const columns: GridColDef<Account>[] = [
           value={row.automation}
           max={100}
           accessibilityLabel={`${row.name} is ${row.automation.toString()}% automated`}
-          className="w-20"
+          className="w-full max-w-20"
         >
           <ProgressBar.Indicator />
         </ProgressBar>
@@ -198,7 +198,7 @@ export default function DataGridRichCellsDemo() {
       columns={columns}
       hideFooter
       aria-label="Account operations"
-      className="h-[520px]"
+      className="h-130"
     />
   );
 }
@@ -259,10 +259,10 @@ export default function DataGridToolbarActionsDemo() {
       onFilterModelChange={setFilterModel}
       toolbarActions={
         <>
-          <Chip color={filterModel.length > 0 ? 'action' : 'neutral'} variant="subtle" size="small">
+          <Chip color={filterModel.length > 0 ? 'action' : 'neutral'} size="small">
             <Chip.Label>{filterModel.length} active</Chip.Label>
           </Chip>
-          <Button variant="ghost" color="action" size="small" onPress={toggleHeaderFilters}>
+          <Button variant="ghost" size="small" onPress={toggleHeaderFilters}>
             <Button.Label>Filters</Button.Label>
             <Button.Icon as={FilterList} position="trailing" />
           </Button>
@@ -271,7 +271,7 @@ export default function DataGridToolbarActionsDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10, 25]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -315,7 +315,6 @@ export default function DataGridSelectionDemo() {
           </Chip>
           <Button
             variant="ghost"
-            color="action"
             size="small"
             isDisabled={selectedCount === 0}
             onPress={() => setSelectionModel({ type: 'include', ids: new Set() })}
@@ -327,7 +326,7 @@ export default function DataGridSelectionDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -408,7 +407,7 @@ export default function DataGridServerDataDemo() {
       onSortModelChange={setSortModel}
       pageSizeOptions={[5, 10]}
       aria-label="Server-managed accounts"
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -478,7 +477,7 @@ export default function DataGridEmptyDemo() {
         </VStack>
       }
       aria-label="Accounts"
-      className="h-[300px]"
+      className="h-75"
     />
   );
 }

package/docs/components/drawer/content.md

@@ -36,7 +36,7 @@ export default function DrawerBasicDemo() {
       <Button onPress={() => setOpen(true)}>
         <Button.Label>Open drawer</Button.Label>
       </Button>
-      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen} size="default">
+      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen}>
         <Drawer.Header>
           <Drawer.Title>Filter accounts</Drawer.Title>
           <Drawer.Description>Choose which accounts appear in this view.</Drawer.Description>
@@ -70,7 +70,7 @@ import { Box, Button, Drawer, Text } from '@cdx-ui/components';
 
 export default function DrawerPermanentDemo() {
   return (
-    <Box className="h-[360px] flex-row border border-stroke-secondary">
+    <Box className="h-90 flex-row border border-stroke-secondary">
       <Box className="flex-1 items-center justify-center gap-4 p-4">
         <Text>Main content area</Text>
         <Button variant="outline">
@@ -116,7 +116,7 @@ export default function DrawerSizesDemo() {
   return (
     <Box className="gap-4">
       {(Object.keys(sizeLabels) as (keyof typeof sizeLabels)[]).map((size) => (
-        <Drawer key={size} variant="permanent" size={size} className="h-[120px]">
+        <Drawer key={size} size={size} className="h-30">
           <Drawer.Header showSeparator={false}>
             <Drawer.Title>{size}</Drawer.Title>
           </Drawer.Header>
@@ -163,13 +163,7 @@ export default function DrawerSidesDemo() {
           </Button>
         ))}
       </Box>
-      <Drawer
-        variant="modal"
-        isOpen={open}
-        onOpenChange={setOpen}
-        placement={placement}
-        size="default"
-      >
+      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen} placement={placement}>
         <Drawer.Header>
           <Drawer.Title>{placement} drawer</Drawer.Title>
           <Drawer.Description>The panel attaches to this edge of the viewport.</Drawer.Description>
@@ -193,25 +187,23 @@ export default function DrawerSidesDemo() {
 Set `fullBleed` on `Drawer.Content` to remove horizontal padding for edge-to-edge lists, dividers, or imagery.
 
 ```tsx
-import { Box, Drawer, Text } from '@cdx-ui/components';
+import { Box, Drawer, ListItem } from '@cdx-ui/components';
 
 export default function DrawerFullBleedDemo() {
   return (
-    <Box className="h-[280px] flex-row border border-stroke-secondary">
-      <Drawer variant="permanent" size="default">
+    <Box className="h-70 flex-row border border-stroke-secondary">
+      <Drawer>
         <Drawer.Header>
           <Drawer.Title>Recent activity</Drawer.Title>
         </Drawer.Header>
         <Drawer.Content fullBleed>
-          <Box className="border-b border-stroke-secondary px-4 py-3">
-            <Text size="sm">Coffee shop</Text>
-          </Box>
-          <Box className="border-b border-stroke-secondary px-4 py-3">
-            <Text size="sm">Direct deposit</Text>
-          </Box>
-          <Box className="px-4 py-3">
-            <Text size="sm">Transfer to savings</Text>
-          </Box>
+          {['Coffee shop', 'Direct deposit', 'Transfer to savings'].map((label, index, labels) => (
+            <ListItem key={label} size="compact" showSeparator={index < labels.length - 1}>
+              <ListItem.Content>
+                <ListItem.Title>{label}</ListItem.Title>
+              </ListItem.Content>
+            </ListItem>
+          ))}
         </Drawer.Content>
       </Drawer>
     </Box>
@@ -232,10 +224,10 @@ import { Box, Drawer, Icon, Text } from '@cdx-ui/components';
 export default function DrawerHeaderVariantsDemo() {
   return (
     <Box className="gap-4">
-      <Drawer variant="permanent" size="default" className="h-[160px]">
+      <Drawer className="h-40">
         <Drawer.Header>
           <Drawer.LeadingSlot>
-            <Icon as={FilterList} size={24} />
+            <Icon as={FilterList} className="size-6" />
           </Drawer.LeadingSlot>
           <Drawer.Title>Filter accounts</Drawer.Title>
           <Drawer.Description>Choose which accounts appear in this view.</Drawer.Description>
@@ -246,7 +238,7 @@ export default function DrawerHeaderVariantsDemo() {
           </Text>
         </Drawer.Content>
       </Drawer>
-      <Drawer variant="permanent" size="default" className="h-[120px]">
+      <Drawer className="h-30">
         <Drawer.Header close={null}>
           <Drawer.Title>Accounts</Drawer.Title>
         </Drawer.Header>

package/docs/components/full-screen-dialog/content.md

@@ -114,7 +114,7 @@ export default function FullScreenDialogWithFooterDemo() {
         <FullScreenDialog.Content className="w-full max-w-md self-center">
           <ScrollView className="flex-1" contentContainerClassName="gap-6 p-4">
             <Box className="items-center gap-3 py-4">
-              <Avatar size="2xl" color="brand" accessibilityLabel="Springfield Electric">
+              <Avatar size="2xl" accessibilityLabel="Springfield Electric">
                 <Avatar.Text>Springfield Electric</Avatar.Text>
               </Avatar>
               <Heading size="xl">$84.12</Heading>
@@ -349,7 +349,7 @@ export default function FullScreenDialogHeaderContentDemo() {
       <FullScreenDialog.Trigger asChild>
         <ListItem showSeparator={false} accessibilityHint="Opens a searchable list of payees">
           <ListItem.LeadingSlot>
-            <Avatar size="lg" color="brand" accessibilityLabel={payee?.name ?? 'Payee'}>
+            <Avatar size="lg" accessibilityLabel={payee?.name ?? 'Payee'}>
               <Avatar.Text>{payee?.name ?? ''}</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>

package/docs/components/icon/content.md

@@ -180,7 +180,7 @@ Inherits all `ForgeIconProps` except the SVG `color`: [`SvgProps`](https://githu
 - A raw `color` value, such as a hex string, is deprecated. It is passed to the SVG unchanged and logs a one-time warning in development. Use a semantic color instead.
 - `className` defaults to `size-5 shrink-0`, so an icon keeps its size in a row of text on web.
 - Consumer classes are merged after the defaults, so `size-*` and `shrink` utilities override them.
-- The inherited `size` prop can set the SVG dimensions directly when a `size-*` class is not appropriate.
+- Don't pass the inherited numeric `size` prop; it bypasses the spacing scale. Use `size-4` or `size-6` when the default doesn't fit.
 - `filled` defaults to `false`.
 
 ## Accessibility

package/docs/components/icon-button/content.md

@@ -34,9 +34,9 @@ import { ArrowCircleUp } from '@cdx-ui/icons';
 export default function IconButtonSolidDemo() {
   return (
     <Box className="flex-row gap-4">
-      <IconButton as={ArrowCircleUp} variant="solid" color="neutral" accessibilityLabel="Neutral" />
-      <IconButton as={ArrowCircleUp} variant="solid" color="action" accessibilityLabel="Action" />
-      <IconButton as={ArrowCircleUp} variant="solid" color="danger" accessibilityLabel="Danger" />
+      <IconButton as={ArrowCircleUp} color="neutral" accessibilityLabel="Neutral" />
+      <IconButton as={ArrowCircleUp} color="action" accessibilityLabel="Action" />
+      <IconButton as={ArrowCircleUp} color="danger" accessibilityLabel="Danger" />
     </Box>
   );
 }

package/docs/components/input/content.md

@@ -101,6 +101,71 @@ export default function InputPasswordDemo() {
 }
 ```
 
+## Character count
+
+Derive the count from the field value and render it as adornment text in a trailing `Input.Slot` — a raw count, or the count alongside a limit.
+
+```tsx
+import { useState } from 'react';
+import { Box, Input, Text } from '@cdx-ui/components';
+
+const MEMO_LIMIT = 40;
+
+export default function InputCharacterCountDemo() {
+  const [nickname, setNickname] = useState('Checking');
+  const [memo, setMemo] = useState('Rent for October');
+  const nicknameCount = String(nickname.length);
+  const memoLength = String(memo.length);
+  const memoLimit = String(MEMO_LIMIT);
+  const memoCount = `${memoLength}/${memoLimit}`;
+
+  return (
+    <Box className="w-full gap-4">
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Count
+        </Text>
+        <Input>
+          <Input.Field
+            accessibilityLabel="Account nickname"
+            value={nickname}
+            onChangeText={setNickname}
+          />
+          <Input.Slot>
+            <Text
+              size="sm"
+              color="tertiary"
+              className="tabular-nums"
+              accessibilityLabel={`${nicknameCount} characters`}
+            >
+              {nicknameCount}
+            </Text>
+          </Input.Slot>
+        </Input>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Count and limit
+        </Text>
+        <Input>
+          <Input.Field accessibilityLabel="Transfer memo" value={memo} onChangeText={setMemo} />
+          <Input.Slot>
+            <Text
+              size="sm"
+              color="tertiary"
+              className="tabular-nums"
+              accessibilityLabel={`${memoLength} of ${memoLimit} characters`}
+            >
+              {memoCount}
+            </Text>
+          </Input.Slot>
+        </Input>
+      </Box>
+    </Box>
+  );
+}
+```
+
 ## States
 
 The root controls disabled, read-only, required, and invalid state for the field.

package/docs/components/list-item/content.md

@@ -22,7 +22,7 @@ export default function ListItemBasicDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>
@@ -102,7 +102,7 @@ export default function ListItemSizesDemo() {
             <Card.Content>
               <ListItem size={size} onPress={() => {}} showSeparator={false}>
                 <ListItem.LeadingSlot>
-                  <Avatar size="md">
+                  <Avatar>
                     <Avatar.Icon as={Person} />
                   </Avatar>
                 </ListItem.LeadingSlot>
@@ -268,7 +268,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Adam White</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -280,7 +280,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Aron Smith</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -296,7 +296,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Bennett Charles</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -308,7 +308,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Brightside Dental</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -392,7 +392,7 @@ export default function ListItemVirtualizedDemo() {
             renderItem={({ item, index }) => (
               <ListItem onPress={() => undefined} showSeparator={index < transactions.length - 1}>
                 <ListItem.LeadingSlot>
-                  <Avatar size="md">
+                  <Avatar>
                     <Avatar.Text>{item.title.slice(0, 2).toUpperCase()}</Avatar.Text>
                   </Avatar>
                 </ListItem.LeadingSlot>
@@ -428,7 +428,7 @@ export default function ListItemMultipleTrailingDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>
@@ -461,7 +461,7 @@ export default function ListItemDisabledDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} isDisabled showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>