@cdx-ui/components 0.3.13 → 0.3.14

package/coverage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 91.6%"><title>coverage: 91.6%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">91.6%</text><text x="835" y="150" fill-opacity=".3" textLength="370">91.6%</text></g><text x="835" y="140" textLength="370">91.6%</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 91.7%"><title>coverage: 91.7%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">91.7%</text><text x="835" y="150" fill-opacity=".3" textLength="370">91.7%</text></g><text x="835" y="140" textLength="370">91.7%</text></g></g></svg>

package/docs/components/alert-dialog/content.md

@@ -58,6 +58,365 @@ export default function AlertDialogBasicDemo() {
 }
 ```
 
+## Sizes
+
+Set `size` on `AlertDialog` to cap the popup width. It accepts the same values as `Dialog`. Alert Dialogs are usually short, so `sm` and `md` fit most confirmations; reserve `lg` for decisions that need more explanation.
+
+```tsx
+import { useState } from 'react';
+import { AlertDialog, Button, HStack, type AlertDialogRootProps } from '@cdx-ui/components';
+
+type AlertDialogSize = NonNullable<AlertDialogRootProps['size']>;
+
+interface SizeScenario {
+  size: AlertDialogSize;
+  title: string;
+  description: string;
+  body: string;
+  cancel: string;
+  action: string;
+}
+
+const scenarios: SizeScenario[] = [
+  {
+    size: 'xs',
+    title: 'Sign out?',
+    description: 'You will need to sign in again.',
+    body: 'Unsaved transfer drafts will be discarded.',
+    cancel: 'Stay',
+    action: 'Sign out',
+  },
+  {
+    size: 'sm',
+    title: 'Remove this device?',
+    description: 'iPad Air · Last used 3 days ago',
+    body: 'This device will no longer receive sign-in codes or account alerts.',
+    cancel: 'Keep device',
+    action: 'Remove',
+  },
+  {
+    size: 'md',
+    title: 'Cancel scheduled payment?',
+    description: 'City Water & Power · Due November 18',
+    body: 'The $84.12 payment will not be sent. You can schedule a new payment at any time before the due date.',
+    cancel: 'Keep payment',
+    action: 'Cancel payment',
+  },
+  {
+    size: 'lg',
+    title: 'Transfer exceeds your daily limit',
+    description: 'Your remaining limit today is $2,500.00.',
+    body: 'Send $2,500.00 now and the remaining $1,250.00 tomorrow morning, or call us to request a one-time limit increase for this transfer.',
+    cancel: 'Edit amount',
+    action: 'Split transfer',
+  },
+];
+
+function SizeAlertDialog({ scenario }: { scenario: SizeScenario }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AlertDialog isOpen={open} onOpenChange={setOpen} size={scenario.size}>
+      <AlertDialog.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>{scenario.size}</Button.Label>
+        </Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Popup>
+        <AlertDialog.Header>
+          <AlertDialog.Title>{scenario.title}</AlertDialog.Title>
+          <AlertDialog.Description>{scenario.description}</AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Content>
+          <AlertDialog.Text>{scenario.body}</AlertDialog.Text>
+        </AlertDialog.Content>
+        <AlertDialog.Footer>
+          <AlertDialog.Cancel>{scenario.cancel}</AlertDialog.Cancel>
+          <AlertDialog.Action onPress={() => setOpen(false)}>{scenario.action}</AlertDialog.Action>
+        </AlertDialog.Footer>
+      </AlertDialog.Popup>
+    </AlertDialog>
+  );
+}
+
+export default function AlertDialogSizesDemo() {
+  return (
+    <HStack space="sm" className="flex-wrap justify-center">
+      {scenarios.map((scenario) => (
+        <SizeAlertDialog key={scenario.size} scenario={scenario} />
+      ))}
+    </HStack>
+  );
+}
+```
+
+## Custom triggers
+
+`AlertDialog.Trigger` with `asChild` turns any pressable element into a trigger, such as a row's `IconButton`. To confirm a change before applying it, such as a `Switch` that locks a card, control the dialog with `isOpen` and open it from the change handler.
+
+```tsx
+import { useState } from 'react';
+import {
+  AlertDialog,
+  Avatar,
+  Card,
+  Heading,
+  IconButton,
+  ListItem,
+  Switch,
+} from '@cdx-ui/components';
+import { CreditCard, Delete, Lock } from '@cdx-ui/icons';
+
+export default function AlertDialogCustomTriggersDemo() {
+  const [locked, setLocked] = useState(false);
+  const [lockOpen, setLockOpen] = useState(false);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [payeeRemoved, setPayeeRemoved] = useState(false);
+
+  const handleLockChange = (next: boolean) => {
+    if (next) {
+      setLockOpen(true);
+    } else {
+      setLocked(false);
+    }
+  };
+
+  return (
+    <Card fullBleed className="w-full max-w-sm">
+      <Card.Header>
+        <Heading size="sm">Card & payees</Heading>
+      </Card.Header>
+      <Card.Content>
+        <ListItem>
+          <ListItem.LeadingSlot>
+            <Avatar color={locked ? 'danger' : 'brand'}>
+              <Avatar.Icon as={locked ? Lock : CreditCard} />
+            </Avatar>
+          </ListItem.LeadingSlot>
+          <ListItem.Content>
+            <ListItem.Title>Lock debit card</ListItem.Title>
+            <ListItem.Description>
+              {locked ? 'Purchases are declined' : 'Debit •••• 4821'}
+            </ListItem.Description>
+          </ListItem.Content>
+          <ListItem.TrailingSlot>
+            <Switch
+              value={locked}
+              onValueChange={handleLockChange}
+              accessibilityLabel="Lock debit card"
+            />
+          </ListItem.TrailingSlot>
+        </ListItem>
+
+        <AlertDialog isOpen={lockOpen} onOpenChange={setLockOpen} size="sm">
+          <AlertDialog.Popup>
+            <AlertDialog.Header>
+              <AlertDialog.Title severity="warning">Lock debit card?</AlertDialog.Title>
+              <AlertDialog.Description>Debit card ending in 4821</AlertDialog.Description>
+            </AlertDialog.Header>
+            <AlertDialog.Content>
+              <AlertDialog.Text>
+                New purchases and ATM withdrawals will be declined. Recurring bills and direct
+                deposits continue as usual.
+              </AlertDialog.Text>
+            </AlertDialog.Content>
+            <AlertDialog.Footer>
+              <AlertDialog.Cancel>Keep unlocked</AlertDialog.Cancel>
+              <AlertDialog.Action
+                onPress={() => {
+                  setLocked(true);
+                  setLockOpen(false);
+                }}
+              >
+                Lock card
+              </AlertDialog.Action>
+            </AlertDialog.Footer>
+          </AlertDialog.Popup>
+        </AlertDialog>
+
+        {payeeRemoved ? null : (
+          <ListItem showSeparator={false}>
+            <ListItem.LeadingSlot>
+              <Avatar color="info">
+                <Avatar.Text>City Water</Avatar.Text>
+              </Avatar>
+            </ListItem.LeadingSlot>
+            <ListItem.Content>
+              <ListItem.Title>City Water & Power</ListItem.Title>
+              <ListItem.Description>Payee · Account •••• 9012</ListItem.Description>
+            </ListItem.Content>
+            <ListItem.TrailingSlot>
+              <AlertDialog isOpen={removeOpen} onOpenChange={setRemoveOpen} size="sm">
+                <AlertDialog.Trigger asChild>
+                  <IconButton
+                    as={Delete}
+                    variant="ghost"
+                    size="small"
+                    accessibilityLabel="Remove City Water & Power"
+                  />
+                </AlertDialog.Trigger>
+                <AlertDialog.Popup>
+                  <AlertDialog.Header>
+                    <AlertDialog.Title severity="danger">Remove this payee?</AlertDialog.Title>
+                    <AlertDialog.Description>City Water & Power</AlertDialog.Description>
+                  </AlertDialog.Header>
+                  <AlertDialog.Content>
+                    <AlertDialog.Text>
+                      One scheduled payment of $84.12 on November 18 will also be canceled.
+                    </AlertDialog.Text>
+                  </AlertDialog.Content>
+                  <AlertDialog.Footer>
+                    <AlertDialog.Cancel>Keep payee</AlertDialog.Cancel>
+                    <AlertDialog.Action
+                      color="danger"
+                      onPress={() => {
+                        setPayeeRemoved(true);
+                        setRemoveOpen(false);
+                      }}
+                    >
+                      Remove
+                    </AlertDialog.Action>
+                  </AlertDialog.Footer>
+                </AlertDialog.Popup>
+              </AlertDialog>
+            </ListItem.TrailingSlot>
+          </ListItem>
+        )}
+      </Card.Content>
+    </Card>
+  );
+}
+```
+
+## Stacked actions
+
+When the user has more than two possible responses, stack the actions in a `Button.Group` with `flexDirection="column"` inside `AlertDialog.Footer`, and pass `fullWidth` to each `AlertDialog.Action` and `AlertDialog.Cancel`. Give the group `className="flex-1"` so it spans the footer. Put the cancel action last.
+
+```tsx
+import { useState } from 'react';
+import { AlertDialog, Avatar, Button, Card, ListItem, Text } from '@cdx-ui/components';
+import { Security, ShoppingBag } from '@cdx-ui/icons';
+
+export default function AlertDialogStackedActionsDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AlertDialog isOpen={open} onOpenChange={setOpen} size="sm">
+      <AlertDialog.Trigger asChild>
+        <Button variant="outline" color="danger">
+          <Button.Icon as={Security} position="leading" />
+          <Button.Label>Simulate fraud alert</Button.Label>
+        </Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Popup>
+        <AlertDialog.Header>
+          <AlertDialog.Title severity="warning">Was this you?</AlertDialog.Title>
+          <AlertDialog.Description>
+            We noticed an unusual purchase on Visa Signature •••• 4821.
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Content>
+          <Card fullBleed>
+            <Card.Content>
+              <ListItem showSeparator={false}>
+                <ListItem.LeadingSlot>
+                  <Avatar color="neutral">
+                    <Avatar.Icon as={ShoppingBag} />
+                  </Avatar>
+                </ListItem.LeadingSlot>
+                <ListItem.Content>
+                  <ListItem.Title>Electronics Outlet Online</ListItem.Title>
+                  <ListItem.Description>Today, 2:14 AM · Miami, FL</ListItem.Description>
+                </ListItem.Content>
+                <ListItem.TrailingSlot>
+                  <Text weight="semibold">$842.19</Text>
+                </ListItem.TrailingSlot>
+              </ListItem>
+            </Card.Content>
+          </Card>
+        </AlertDialog.Content>
+        <AlertDialog.Footer>
+          <Button.Group flexDirection="column" className="flex-1">
+            <AlertDialog.Action fullWidth onPress={() => setOpen(false)}>
+              Yes, it was me
+            </AlertDialog.Action>
+            <AlertDialog.Action fullWidth color="danger" onPress={() => setOpen(false)}>
+              No, lock my card
+            </AlertDialog.Action>
+            <AlertDialog.Cancel fullWidth>Remind me later</AlertDialog.Cancel>
+          </Button.Group>
+        </AlertDialog.Footer>
+      </AlertDialog.Popup>
+    </AlertDialog>
+  );
+}
+```
+
+## Form
+
+Add a small input when the decision needs one more detail. Keep `AlertDialog.Action` disabled until the user has answered, and let its label describe the result of their choice.
+
+```tsx
+import { useState } from 'react';
+import { AlertDialog, Button, Field, Radio } from '@cdx-ui/components';
+import { EventRepeat } from '@cdx-ui/icons';
+
+export default function AlertDialogFormDemo() {
+  const [open, setOpen] = useState(false);
+  const [scope, setScope] = useState('');
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setScope('');
+    }
+  };
+
+  return (
+    <AlertDialog isOpen={open} onOpenChange={handleOpenChange}>
+      <AlertDialog.Trigger asChild>
+        <Button variant="outline">
+          <Button.Icon as={EventRepeat} position="leading" />
+          <Button.Label>Stop recurring transfer</Button.Label>
+        </Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Popup>
+        <AlertDialog.Header>
+          <AlertDialog.Title severity="danger">Stop recurring transfer?</AlertDialog.Title>
+          <AlertDialog.Description>
+            $250.00 monthly from Everyday Checking to Vacation Fund
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Content>
+          <Field isRequired>
+            <Field.Label>Which transfers should stop?</Field.Label>
+            <Radio.Group value={scope} onChange={setScope}>
+              <Radio value="next">
+                <Radio.Label>Only the next transfer on December 1</Radio.Label>
+              </Radio>
+              <Radio value="all">
+                <Radio.Label>This and all future transfers</Radio.Label>
+              </Radio>
+            </Radio.Group>
+            <Field.Helper>Transfers already processing cannot be stopped.</Field.Helper>
+          </Field>
+        </AlertDialog.Content>
+        <AlertDialog.Footer>
+          <AlertDialog.Cancel>Keep transfer</AlertDialog.Cancel>
+          <AlertDialog.Action
+            color="danger"
+            isDisabled={!scope}
+            onPress={() => handleOpenChange(false)}
+          >
+            {scope === 'next' ? 'Skip next transfer' : 'Stop transfers'}
+          </AlertDialog.Action>
+        </AlertDialog.Footer>
+      </AlertDialog.Popup>
+    </AlertDialog>
+  );
+}
+```
+
 ## Destructive action
 
 Pair a danger title with a danger action when the decision has an irreversible consequence.

package/docs/components/bar-chart/content.md

@@ -123,6 +123,110 @@ export default function BarChartHorizontalDemo() {
 }
 ```
 
+## Long labels
+
+Category names never overlap. A name wider than its room wraps at word boundaries onto a second line, and anything still too long ends in `…`. In the vertical layout the room is the category's slot; in the horizontal layout it is the label gutter. The full name stays in the tooltip and on each bar's accessibility label.
+
+A name that wraps onto two lines stays readable, and the chart gives up one line of plot height to fit it.
+
+```tsx
+import { BarChart } from '@cdx-ui/components';
+import { CATEGORY_AXIS, EXPENSES, SPEND_SERIES } from './_data';
+
+export default function BarChartLongLabelsWrapDemo() {
+  return (
+    <BarChart
+      dataset={EXPENSES}
+      xAxis={CATEGORY_AXIS}
+      series={SPEND_SERIES}
+      hideLegend
+      scrollable={false}
+      accessibilityLabel="Spend by category"
+    />
+  );
+}
+```
+
+Truncation is a fallback, not a design. On a narrow chart with several categories, single long words such as "Transportation" lose their endings and the reader has to open the tooltip to compare bars.
+
+```tsx
+import { BarChart, Box } from '@cdx-ui/components';
+import { CATEGORY_AXIS, SPEND_SERIES, SPENDING_CATEGORIES } from './_data';
+
+export default function BarChartLongLabelsTruncateDemo() {
+  return (
+    <Box className="w-80">
+      <BarChart
+        dataset={SPENDING_CATEGORIES}
+        xAxis={CATEGORY_AXIS}
+        series={SPEND_SERIES}
+        hideLegend
+        scrollable={false}
+        accessibilityLabel="Spend by category"
+      />
+    </Box>
+  );
+}
+```
+
+Switch to `layout="horizontal"` when names run longer than a word or two, or when there are more categories than fit side by side at phone width. The same data reads in full, and bars stay easy to compare. Keep names short at the source as well: the chart cannot shorten them for you.
+
+```tsx
+import { BarChart, Box } from '@cdx-ui/components';
+import { CATEGORY_AXIS, SPEND_SERIES, SPENDING_CATEGORIES } from './_data';
+
+export default function BarChartLongLabelsHorizontalDemo() {
+  return (
+    <Box className="w-80">
+      <BarChart
+        dataset={SPENDING_CATEGORIES}
+        layout="horizontal"
+        yAxis={CATEGORY_AXIS}
+        series={SPEND_SERIES}
+        hideLegend
+        scrollable={false}
+        height={280}
+        accessibilityLabel="Spend by category"
+      />
+    </Box>
+  );
+}
+```
+
+Set `tickLabelMaxLines` on the category axis to change how far names wrap before the `…`. `1` truncates without wrapping, which keeps every chart in a row the same height; a higher value keeps more of each name and gives up one line of plot height per extra line. A horizontal chart also stops at the lines its rows are tall enough to hold.
+
+```tsx
+import { BarChart, Box, VStack } from '@cdx-ui/components';
+import { MULTI_WORD_CATEGORIES, SPEND_SERIES } from './_data';
+
+export default function BarChartLongLabelsMaxLinesDemo() {
+  return (
+    <VStack space="2xl" className="w-full">
+      <Box className="w-80">
+        <BarChart
+          dataset={MULTI_WORD_CATEGORIES}
+          xAxis={[{ id: 'category', dataKey: 'category', scaleType: 'band', tickLabelMaxLines: 1 }]}
+          series={SPEND_SERIES}
+          hideLegend
+          scrollable={false}
+          accessibilityLabel="Spend by category, one line per name"
+        />
+      </Box>
+      <Box className="w-80">
+        <BarChart
+          dataset={MULTI_WORD_CATEGORIES}
+          xAxis={[{ id: 'category', dataKey: 'category', scaleType: 'band', tickLabelMaxLines: 3 }]}
+          series={SPEND_SERIES}
+          hideLegend
+          scrollable={false}
+          accessibilityLabel="Spend by category, up to three lines per name"
+        />
+      </Box>
+    </VStack>
+  );
+}
+```
+
 ## Axis config
 
 The value axis takes `min`, `max`, and `tickNumber` to set the domain and the number of ticks, and `valueFormatter` for tick text. A series `valueFormatter` wins over the axis one everywhere except ticks, so ticks can read `$1k` while the tooltip reads `$860`. `position: 'none'` on the value axis hides its ticks. On the category axis, `position` moves the names (`'top'` / `'bottom'` when vertical, `'left'` / `'right'` when horizontal, `'none'` to hide them) and a `tickLabelInterval` function picks which names draw.
@@ -566,8 +670,8 @@ Generic over your row type, shown here as `TRow`: `series[].dataKey` and axis `d
 | `accessibilityLabel?` | `string` | — | Accessible summary. Defaults to `localeText.barChartSummary` over every category. |
 | `dataset` | `readonly TRow[]` | — | One object per category. Series and axes read it through `dataKey`. |
 | `series` | `readonly BarChartSeries<TRow>[]` | — | Bars to draw. Each reads one numeric column through `dataKey`. |
-| `xAxis?` | `readonly ChartAxis<TRow>[]` | — | Horizontal axis. In `vertical` layout it is the category (band) axis: `dataKey` names the category column, `position` (`'bottom'`, `'top'`, `'none'`) places its labels, and `tickLabelInterval` picks which labels draw. In `horizontal` layout it is the value axis. Only the first axis is used. |
-| `yAxis?` | `readonly ChartAxis<TRow>[]` | — | Vertical axis. In `vertical` layout it is the value axis (`min`, `max`, `tickNumber`, `valueFormatter`; `position: 'none'` hides its ticks). In `horizontal` layout it is the category axis (`position` `'left'`, `'right'`, or `'none'`). Only the first axis is used. |
+| `xAxis?` | `readonly ChartAxis<TRow>[]` | — | Horizontal axis. In `vertical` layout it is the category (band) axis: `dataKey` names the category column, `position` (`'bottom'`, `'top'`, `'none'`) places its labels, and `tickLabelInterval` picks which labels draw, and `tickLabelMaxLines` caps how far a long name wraps before it ends in `…`. In `horizontal` layout it is the value axis. Only the first axis is used. |
+| `yAxis?` | `readonly ChartAxis<TRow>[]` | — | Vertical axis. In `vertical` layout it is the value axis (`min`, `max`, `tickNumber`, `valueFormatter`; `position: 'none'` hides its ticks). In `horizontal` layout it is the category axis (`position` `'left'`, `'right'`, or `'none'`; `tickLabelMaxLines` as on `xAxis`). Only the first axis is used. |
 | `layout?` | `'vertical' \| 'horizontal'` | `'vertical'` | `vertical` grows bars up from the baseline. `horizontal` grows them to the right. |
 | `hideLegend?` | `boolean` | `false` | Hides the series legend under the chart. Waterfall charts never show one. |
 | `grid?` | `ChartGrid` | `{ horizontal: true } (vertical layout), { vertical: true } (horizontal layout)` | Grid lines along the value axis: `horizontal` in `vertical` layout, `vertical` in `horizontal` layout. The other direction is not drawn. Omit to draw the value-axis lines; pass an object without that key set to `true` to hide them and keep only the baseline. |
@@ -631,6 +735,7 @@ One entry in `xAxis` or `yAxis`. Only the first entry in each direction is read.
 | `valueFormatter?` | `ChartValueFormatter` | — | Formats tick text on this axis (`location: 'tick'`). On a value axis it also formats series values when the series has no `valueFormatter`. On a line chart's x-axis it formats numeric categories, both the tick (`location: 'tick'`) and the tooltip title (`location: 'tooltip'`). |
 | `position?` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'none'` | — | Side the axis labels draw on. `'none'` hides them. Each chart accepts the sides it can draw and falls back to its default side for the others. |
 | `tickLabelInterval?` | `"auto" \| ((value: unknown, index: number) => boolean)` | `'auto'` | Which category labels to draw. A function keeps the label at `index` when it returns `true`. `'auto'` currently draws every label; it does not thin them yet. |
+| `tickLabelMaxLines?` | `number` | `2` | Most lines a category name may wrap onto before it ends in `…`. `1` truncates without wrapping. Read by `BarChart` on its category axis; a horizontal chart also stops at the lines its rows are tall enough to hold. Forge only; MUI X has no equivalent. |
 
 Formatters resolve per value: the series `valueFormatter`, then the value axis `valueFormatter`, then a `locale` number. Ticks use the axis formatter with `location: 'tick'`.
 
@@ -673,6 +778,7 @@ Forge renders with `react-native-svg` on iOS, Android, and web, and does not dep
 | `grid={{ horizontal, vertical }}`                                                              | `grid`                                                       | Same shape, but only the lines along the value axis draw, and they are on by default. MUI draws no grid unless you pass `grid`.                                                            |
 | axis `position`                                                                                | axis `position`                                              | `'none'` hides an axis. The value axis draws only on its default side.                                                                                                                     |
 | axis `tickLabelInterval`                                                                       | axis `tickLabelInterval`                                     | The function form works on the category axis. `'auto'` draws every label for now.                                                                                                          |
+| —                                                                                              | axis `tickLabelMaxLines`                                     | Forge only. MUI X has no wrap or truncation option; it breaks lines only where a `valueFormatter` returns `\n`.                                                                            |
 | `<ChartsReferenceLine>`                                                                        | `referenceLines`                                             | Forge has no composition API yet, so reference lines are a prop.                                                                                                                           |
 | `highlightedItem` / `onItemClick`                                                              | `selectedItem` / `onSelectedItemChange`                      | Selection is shared by every Forge chart. Pressing the selected bar reports `null`. `defaultSelectedItem` is a Forge addition for uncontrolled use.                                        |
 | `skipAnimation`                                                                                | `animation="disable-all"`                                    | Matches the `animation` prop on other Forge components.                                                                                                                                    |