@cdx-ui/components 0.3.13 → 0.3.14

package/docs/components/dialog/content.md

@@ -61,6 +61,141 @@ export default function DialogBasicDemo() {
 }
 ```
 
+## Sizes
+
+Set `size` on `Dialog` to cap the popup width: `xs`, `sm`, `md` (default), `lg`, `xl`, or `full`. Every size except `full` takes 90% of the viewport on narrow screens. Match the size to the content: short confirmations fit `xs` or `sm`, while statements and comparisons need `lg` or wider.
+
+```tsx
+import { useState } from 'react';
+import { Button, Dialog, HStack, Table, Text, type DialogRootProps } from '@cdx-ui/components';
+
+type DialogSize = NonNullable<DialogRootProps['size']>;
+
+interface SizeScenario {
+  size: DialogSize;
+  title: string;
+  description: string;
+  rows: { label: string; value: string }[];
+  action: string;
+}
+
+const scenarios: SizeScenario[] = [
+  {
+    size: 'xs',
+    title: 'Card locked',
+    description: 'Debit card ending in 4821',
+    rows: [{ label: 'Status', value: 'Locked' }],
+    action: 'Done',
+  },
+  {
+    size: 'sm',
+    title: 'Turn on Face ID?',
+    description: 'Sign in faster without typing your password.',
+    rows: [{ label: 'Device', value: 'iPhone 16 Pro' }],
+    action: 'Turn on',
+  },
+  {
+    size: 'md',
+    title: 'Confirm transfer',
+    description: 'From Everyday Checking to High-Yield Savings',
+    rows: [
+      { label: 'Amount', value: '$500.00' },
+      { label: 'Delivery', value: 'Today' },
+    ],
+    action: 'Transfer $500',
+  },
+  {
+    size: 'lg',
+    title: 'October statement',
+    description: 'Everyday Checking •••• 6643',
+    rows: [
+      { label: 'Opening balance', value: '$3,104.22' },
+      { label: 'Deposits', value: '+$4,860.00' },
+      { label: 'Withdrawals', value: '−$5,546.15' },
+      { label: 'Closing balance', value: '$2,418.07' },
+    ],
+    action: 'Download PDF',
+  },
+  {
+    size: 'xl',
+    title: 'Compare savings accounts',
+    description: 'Rates are variable and may change after the account is opened.',
+    rows: [
+      { label: 'High-Yield Savings', value: '4.10% APY' },
+      { label: 'Money Market', value: '3.75% APY' },
+      { label: '12-month CD', value: '4.50% APY' },
+      { label: 'Kids Savings', value: '2.00% APY' },
+    ],
+    action: 'Open an account',
+  },
+  {
+    size: 'full',
+    title: 'Monthly spending',
+    description: 'October 1 – October 31',
+    rows: [
+      { label: 'Housing', value: '$1,850.00' },
+      { label: 'Groceries', value: '$642.18' },
+      { label: 'Dining', value: '$311.40' },
+      { label: 'Transportation', value: '$228.75' },
+      { label: 'Subscriptions', value: '$64.97' },
+    ],
+    action: 'View insights',
+  },
+];
+
+function SizeDialog({ scenario }: { scenario: SizeScenario }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen} size={scenario.size}>
+      <Dialog.Trigger asChild>
+        <Button variant="outline">
+          <Button.Label>{scenario.size}</Button.Label>
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Popup>
+        <Dialog.Header>
+          <Dialog.Title>{scenario.title}</Dialog.Title>
+          <Dialog.Description>{scenario.description}</Dialog.Description>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Content>
+          <Table fullBleed accessibilityLabel={`${scenario.title} details`}>
+            <Table.Body>
+              {scenario.rows.map((row) => (
+                <Table.Row key={row.label}>
+                  <Table.Cell>
+                    <Text color="secondary">{row.label}</Text>
+                  </Table.Cell>
+                  <Table.Cell align="end">
+                    <Text weight="semibold">{row.value}</Text>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button onPress={() => setOpen(false)}>
+            <Button.Label>{scenario.action}</Button.Label>
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Popup>
+    </Dialog>
+  );
+}
+
+export default function DialogSizesDemo() {
+  return (
+    <HStack space="sm" className="flex-wrap justify-center">
+      {scenarios.map((scenario) => (
+        <SizeDialog key={scenario.size} scenario={scenario} />
+      ))}
+    </HStack>
+  );
+}
+```
+
 ## Title severities
 
 Set `severity` on `Dialog.Title` to add a status icon and semantic color treatment.
@@ -158,13 +293,335 @@ export default function DialogTitleSeveritiesDemo() {
 }
 ```
 
+## Custom triggers
+
+`Dialog.Trigger` with `asChild` turns any pressable element into a trigger, such as an `IconButton` or a `ListItem`, and one dialog can have several. To open the dialog from somewhere a trigger can't wrap, such as a `Menu.Item`, control it with `isOpen` and `onOpenChange`.
+
+```tsx
+import { useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Heading,
+  Icon,
+  IconButton,
+  ListItem,
+  Menu,
+  Table,
+  Text,
+} from '@cdx-ui/components';
+import { ChevronRight, CreditCard, Info, MoreHoriz } from '@cdx-ui/icons';
+
+const rewards = [
+  { label: 'Dining · 3x points', value: '6,210 pts' },
+  { label: 'Travel · 2x points', value: '4,180 pts' },
+  { label: 'Everything else · 1x', value: '2,090 pts' },
+];
+
+export default function DialogCustomTriggersDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen}>
+      <Card fullBleed className="w-full max-w-sm">
+        <Card.Header>
+          <Box className="flex-row items-center gap-2">
+            <Heading size="sm">Visa Signature</Heading>
+            <Dialog.Trigger asChild>
+              <IconButton
+                as={Info}
+                variant="ghost"
+                size="small"
+                accessibilityLabel="How rewards are earned"
+              />
+            </Dialog.Trigger>
+          </Box>
+          <Menu placement="bottom-end">
+            <Menu.Trigger asChild>
+              <IconButton
+                as={MoreHoriz}
+                variant="ghost"
+                size="small"
+                accessibilityLabel="Visa Signature actions"
+              />
+            </Menu.Trigger>
+            <Menu.Popup>
+              <Menu.Content accessibilityLabel="Visa Signature actions">
+                <Menu.Item onPress={() => setOpen(true)}>
+                  <Menu.ItemLabel>Rewards summary</Menu.ItemLabel>
+                </Menu.Item>
+                <Menu.Item onPress={() => undefined}>
+                  <Menu.ItemLabel>Lock card</Menu.ItemLabel>
+                </Menu.Item>
+              </Menu.Content>
+            </Menu.Popup>
+          </Menu>
+        </Card.Header>
+        <Card.Content>
+          <Dialog.Trigger asChild>
+            <ListItem showSeparator={false} accessibilityHint="Opens rewards summary">
+              <ListItem.LeadingSlot>
+                <Avatar color="brand">
+                  <Avatar.Icon as={CreditCard} />
+                </Avatar>
+              </ListItem.LeadingSlot>
+              <ListItem.Content>
+                <ListItem.Description>Rewards balance</ListItem.Description>
+                <ListItem.Title>12,480 points</ListItem.Title>
+              </ListItem.Content>
+              <ListItem.TrailingSlot>
+                <Icon as={ChevronRight} />
+              </ListItem.TrailingSlot>
+            </ListItem>
+          </Dialog.Trigger>
+        </Card.Content>
+      </Card>
+
+      <Dialog.Popup>
+        <Dialog.Header>
+          <Dialog.Title>Rewards summary</Dialog.Title>
+          <Dialog.Description>Worth $124.80 as a statement credit.</Dialog.Description>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Content>
+          <Table fullBleed accessibilityLabel="Points by category">
+            <Table.Body>
+              {rewards.map((reward) => (
+                <Table.Row key={reward.label}>
+                  <Table.Cell>
+                    <Text color="secondary">{reward.label}</Text>
+                  </Table.Cell>
+                  <Table.Cell align="end">
+                    <Text weight="semibold">{reward.value}</Text>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button variant="outline" onPress={() => setOpen(false)}>
+            <Button.Label>Close</Button.Label>
+          </Button>
+          <Button onPress={() => setOpen(false)}>
+            <Button.Label>Redeem points</Button.Label>
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Popup>
+    </Dialog>
+  );
+}
+```
+
+## Stacked actions
+
+When a dialog offers more than two choices, or the labels are too long to sit side by side, stack the actions in a `Button.Group` with `flexDirection="column"` inside `Dialog.Footer`, and pass `fullWidth` to each `Button`. Give the group `className="flex-1"` so it spans the footer. Order them from most to least recommended.
+
+```tsx
+import { useState } from 'react';
+import { Button, Dialog, Table, Text } from '@cdx-ui/components';
+import { Event, Savings } from '@cdx-ui/icons';
+
+export default function DialogStackedActionsDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen} size="sm">
+      <Dialog.Trigger asChild>
+        <Button variant="outline" color="warning">
+          <Button.Label>Review upcoming payment</Button.Label>
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Popup>
+        <Dialog.Header>
+          <Dialog.Title severity="warning">Payment may overdraw checking</Dialog.Title>
+          <Dialog.Description>Mortgage payment scheduled for tomorrow</Dialog.Description>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Content>
+          <Table fullBleed accessibilityLabel="Payment details">
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>
+                  <Text color="secondary">Payment amount</Text>
+                </Table.Cell>
+                <Table.Cell align="end">
+                  <Text weight="semibold">$1,250.00</Text>
+                </Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Text color="secondary">Available balance</Text>
+                </Table.Cell>
+                <Table.Cell align="end">
+                  <Text weight="semibold" color="danger">
+                    $1,084.62
+                  </Text>
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button.Group flexDirection="column" className="flex-1">
+            <Button fullWidth onPress={() => setOpen(false)}>
+              <Button.Icon as={Savings} position="leading" />
+              <Button.Label>Transfer $200 from savings</Button.Label>
+            </Button>
+            <Button fullWidth variant="outline" onPress={() => setOpen(false)}>
+              <Button.Icon as={Event} position="leading" />
+              <Button.Label>Reschedule payment</Button.Label>
+            </Button>
+            <Button fullWidth variant="ghost" onPress={() => setOpen(false)}>
+              <Button.Label>Pay anyway</Button.Label>
+            </Button>
+          </Button.Group>
+        </Dialog.Footer>
+      </Dialog.Popup>
+    </Dialog>
+  );
+}
+```
+
+## Form
+
+Wrap fields in `Form` inside `Dialog.Content` for short, focused tasks. Keep the dialog open until validation passes, and show errors with `Field.Error`. Use a `FullScreenDialog` instead when the form needs more than a few fields.
+
+```tsx
+import { useState } from 'react';
+import {
+  Button,
+  CurrencyInput,
+  Dialog,
+  Field,
+  Form,
+  Input,
+  Radio,
+  Select,
+} from '@cdx-ui/components';
+import { Repeat } from '@cdx-ui/icons';
+
+const AVAILABLE_BALANCE = 2418.07;
+
+const accounts = [
+  { value: 'savings', label: 'High-Yield Savings •••• 2290' },
+  { value: 'vacation', label: 'Vacation Fund •••• 7713' },
+  { value: 'emergency', label: 'Emergency Fund •••• 0458' },
+];
+
+export default function DialogFormDemo() {
+  const [open, setOpen] = useState(false);
+  const [destination, setDestination] = useState<string | undefined>();
+  const [amount, setAmount] = useState(0);
+  const [frequency, setFrequency] = useState('monthly');
+  const [submitted, setSubmitted] = useState(false);
+
+  const destinationInvalid = submitted && !destination;
+  const amountInvalid = submitted && (amount <= 0 || amount > AVAILABLE_BALANCE);
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setSubmitted(false);
+    }
+  };
+
+  const handleSubmit = () => {
+    setSubmitted(true);
+    if (destination && amount > 0 && amount <= AVAILABLE_BALANCE) {
+      handleOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog isOpen={open} onOpenChange={handleOpenChange}>
+      <Dialog.Trigger asChild>
+        <Button>
+          <Button.Icon as={Repeat} position="leading" />
+          <Button.Label>Set up recurring transfer</Button.Label>
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Popup>
+        <Dialog.Header>
+          <Dialog.Title>Recurring transfer</Dialog.Title>
+          <Dialog.Description>From Everyday Checking · $2,418.07 available</Dialog.Description>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Content>
+          <Form>
+            <Field isRequired isInvalid={destinationInvalid}>
+              <Field.Label>To account</Field.Label>
+              <Select items={accounts} value={destination} onValueChange={setDestination}>
+                <Select.Trigger>
+                  <Select.Value placeholder="Select an account" />
+                </Select.Trigger>
+                <Select.Content>
+                  {accounts.map((account) => (
+                    <Select.Item key={account.value} value={account.value}>
+                      <Select.ItemLabel>{account.label}</Select.ItemLabel>
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select>
+              <Field.Error>Choose where the money goes.</Field.Error>
+            </Field>
+            <Field isRequired isInvalid={amountInvalid}>
+              <Field.Label>Amount</Field.Label>
+              <CurrencyInput
+                variant="outline"
+                value={amount}
+                onChangeValue={setAmount}
+                isInvalid={amountInvalid}
+              />
+              <Field.Helper>Each transfer runs on the 1st of the period.</Field.Helper>
+              <Field.Error>Enter an amount up to $2,418.07.</Field.Error>
+            </Field>
+            <Field>
+              <Field.Label>Frequency</Field.Label>
+              <Radio.Group value={frequency} onChange={setFrequency} direction="row">
+                <Radio value="weekly">
+                  <Radio.Label>Weekly</Radio.Label>
+                </Radio>
+                <Radio value="monthly">
+                  <Radio.Label>Monthly</Radio.Label>
+                </Radio>
+                <Radio value="quarterly">
+                  <Radio.Label>Quarterly</Radio.Label>
+                </Radio>
+              </Radio.Group>
+            </Field>
+            <Field>
+              <Field.Label>Memo (optional)</Field.Label>
+              <Input>
+                <Input.Field placeholder="e.g. Summer trip" />
+              </Input>
+            </Field>
+          </Form>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button variant="outline" onPress={() => handleOpenChange(false)}>
+            <Button.Label>Cancel</Button.Label>
+          </Button>
+          <Button onPress={handleSubmit}>
+            <Button.Label>Schedule transfer</Button.Label>
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Popup>
+    </Dialog>
+  );
+}
+```
+
 ## Scrollable content
 
-`Dialog.Content` is not scrollable by default. Wrap long content in a `ScrollView` so the header and footer remain visible. On native, set `keyboardShouldPersistTaps="handled"` so a focused field keeps the keyboard open while the body scrolls.
+`Dialog.Content` is not scrollable by default. Wrap long content in a `ScrollView` so the header and footer remain visible, and wrap that in a `ScrollShadow` with `surface="primary"` to fade the edges that still have content. On native, set `keyboardShouldPersistTaps="handled"` so a focused field keeps the keyboard open while the body scrolls.
 
 ```tsx
 import { useState } from 'react';
-import { Button, Dialog, ScrollView } from '@cdx-ui/components';
+import { Button, Dialog, ScrollShadow, ScrollView } from '@cdx-ui/components';
 
 const terms = [
   'Authorization. You authorize us to debit the selected funding account and credit the destination account for the amount shown in the transfer review.',
@@ -198,17 +655,15 @@ export default function DialogScrollableContentDemo() {
           <Dialog.Close />
         </Dialog.Header>
         <Dialog.Content>
-          <ScrollView
-            className="h-60"
-            contentContainerClassName="gap-3"
-            keyboardShouldPersistTaps="handled"
-          >
-            {terms.map((term, index) => (
-              <Dialog.Text key={term}>
-                {index + 1}. {term}
-              </Dialog.Text>
-            ))}
-          </ScrollView>
+          <ScrollShadow className="h-60" surface="primary">
+            <ScrollView contentContainerClassName="gap-3" keyboardShouldPersistTaps="handled">
+              {terms.map((term, index) => (
+                <Dialog.Text key={term}>
+                  {index + 1}. {term}
+                </Dialog.Text>
+              ))}
+            </ScrollView>
+          </ScrollShadow>
         </Dialog.Content>
         <Dialog.Footer>
           <Button variant="outline" onPress={() => setOpen(false)}>

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

@@ -494,6 +494,7 @@ One entry in `series`: a line that reads one `dataset` column.
 | `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. |
 
 ### LineChartMarker
 

package/docs/foundations/expressions/icons/content.md

@@ -2,7 +2,7 @@
 
 Cross-platform icon library for Forge UI, built on [Material Symbols](https://fonts.google.com/icons) (outlined style, weight 400, optical size 24). Renders via `react-native-svg` and targets iOS, Android, and Web.
 
-3,994 icons are available, each with outlined and filled variants, plus support for custom
+3,999 icons are available, each with outlined and filled variants, plus support for custom
 SVGs. Country flags are a separate set and do not appear in the browser below. Render one with
 [`CountryFlag`](https://design.candescent.com/docs/components/country-flag/content.md).
 

package/docs/llms.txt

@@ -151,6 +151,7 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
 
 ## Release notes
 
+- [0.3.13](resources/release-notes/0.3.13/content.md): DataGrid adds tree data, detail panels, and column-targeted filters; ListItem and Menu receive visual and focus fixes.
 - [0.3.12](resources/release-notes/0.3.12/content.md): DataGrid adds built-in column types, pinning, type-aware filters, and polarity or delta number cells.
 - [0.3.11](resources/release-notes/0.3.11/content.md): Read-only Input and CurrencyInput stay non-editable on Android instead of accepting edits again.
 - [0.3.10](resources/release-notes/0.3.10/content.md): CurrencyInput no longer clips the top of default-size amounts on iOS.

package/docs/resources/release-notes/0.3.13/content.md

@@ -0,0 +1,21 @@
+# 0.3.13 (https://design.candescent.com/docs/resources/release-notes/0.3.13)
+
+DataGrid adds tree data, detail panels, and column-targeted filters; ListItem and Menu receive visual and focus fixes.
+
+This release expands **DataGrid** with hierarchical rows, per-row detail panels, and ways to open filtering on a specific column, and it corrects **ListItem** section header styling and **Menu** focus when overlays open.
+
+## What's new
+
+**DataGrid** — Rows can expand for tree data and inline detail panels. Supply tree paths so child rows nest under parents, toggle row detail content without leaving the grid, and combine expansion with the existing selection and column APIs. Text cells in the grid body stay on one line with truncation and a tooltip for the full value ([#965](https://github.com/dfh-candescent/forge-design-system/pull/965)).
+
+**DataGrid** — Header filter affordances and the column menu can open the filter panel already focused on one field, even when the grid has no filter toolbar. The panel anchors to its opener in a portal, focuses the target filter row, and returns focus to the opener on close. If that field has no filter item yet, the grid adds one with the default operator and drops value-less items on other fields without resetting pagination ([#992](https://github.com/dfh-candescent/forge-design-system/pull/992)).
+
+## Bug fixes
+
+**[ListItem](https://design.candescent.com/docs/components/list-item/content.md)** — `ListItem.SectionHeader` in the subtle variant uses the `surface-neutral-tint` fill so it matches design instead of the darker `surface-neutral-subtle` token ([#990](https://github.com/dfh-candescent/forge-design-system/pull/990)).
+
+**[Menu](https://design.candescent.com/docs/components/menu/content.md)** — Opening a menu no longer pulls focus back when the user already moved focus elsewhere before the deferred open-focus runs, so focus does not end up stranded on `<body>` ([#978](https://github.com/dfh-candescent/forge-design-system/pull/978)).
+
+**DataGrid** — Search field focus restores only when the row that had focus is removed, not on every row update after you click away ([#965](https://github.com/dfh-candescent/forge-design-system/pull/965)).
+
+**DataGrid** — Filters on hidden pinned columns no longer log unknown-field warnings ([#965](https://github.com/dfh-candescent/forge-design-system/pull/965)).

package/docs/resources/release-notes/content.md

@@ -8,6 +8,7 @@ Notes are generated from the release commit itself, so the versions and commit r
 each entry are exact. Releases that contained nothing but backlog or dependency bookkeeping
 are omitted.
 
+- [0.3.13](https://design.candescent.com/docs/resources/release-notes/0.3.13/content.md) — 2026-11-11 — DataGrid adds tree data, detail panels, and column-targeted filters; ListItem and Menu receive visual and focus fixes.
 - [0.3.12](https://design.candescent.com/docs/resources/release-notes/0.3.12/content.md) — 2026-11-04 — DataGrid adds built-in column types, pinning, type-aware filters, and polarity or delta number cells.
 - [0.3.11](https://design.candescent.com/docs/resources/release-notes/0.3.11/content.md) — 2026-10-30 — Read-only Input and CurrencyInput stay non-editable on Android instead of accepting edits again.
 - [0.3.10](https://design.candescent.com/docs/resources/release-notes/0.3.10/content.md) — 2026-10-30 — CurrencyInput no longer clips the top of default-size amounts on iOS.