@cdx-ui/components 0.3.12 → 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/components/list-item/content.md

@@ -658,7 +658,7 @@ Group heading row with an optional accent top-border divider and an optional `su
 | `children` | `ReactNode` | — | Primary section label. String or number children are styled as an uppercase label. |
 | `asChild?` | `boolean` | — | Renders the consumer's child element in place of the default `View` host. |
 | `trailing?` | `ReactNode` | — | Optional right-aligned adornment (e.g. section Chip). |
-| `variant?` | `'ghost' \| 'subtle' \| 'gradient'` | `'ghost'` | Background treatment. `ghost` has no fill and a bottom border; `subtle` adds a neutral fill (matching `subtle` on Avatar, Chip, and IconButton) and drops the bottom border. `gradient` fades from the primary surface into a brand tint, left to right, and keeps the bottom border. Label typography is the same for all three. |
+| `variant?` | `'ghost' \| 'subtle' \| 'gradient'` | `'ghost'` | Background treatment. `ghost` has no fill and a bottom border; `subtle` adds a light neutral fill (`surface-neutral-tint`) and drops the bottom border. `gradient` fades from the primary surface into a brand tint, left to right, and keeps the bottom border. Label typography is the same for all three. |
 | `showDivider?` | `boolean` | `true` | Accent top border above the header. |
 
 Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).

package/docs/components/table/content.md

@@ -229,6 +229,90 @@ export default function TableRowActionsDemo() {
 }
 ```
 
+## Section rows
+
+Group rows under section titles, as in a permissions matrix, with one `Table.Body` per section. Start each body with a row holding a single `Table.Head` that has `scope="rowgroup"` and a `colSpan` covering every column, so screen readers announce the section for the rows beneath it. Use `scope="row"` on the first cell of each row and name the section in each checkbox label, such as "Edit Transfers, Payments", so every control stays distinct out of context. On native, `colSpan` merges the cells but `scope` is dropped.
+
+For sortable or filterable data with a hierarchy, use [`DataGrid` tree data](https://design.candescent.com/docs/components/data-grid/content.md#tree-data) instead.
+
+```tsx
+import { useState } from 'react';
+import { Checkbox, Table, Text } from '@cdx-ui/components';
+
+const actions = ['View', 'Edit', 'Delete'] as const;
+type Action = (typeof actions)[number];
+
+const sections = [
+  { title: 'Accounts', resources: ['Balances', 'Statements'] },
+  { title: 'Payments', resources: ['Transfers', 'Payees'] },
+] as const;
+
+export default function TableSectionRowsDemo() {
+  const [granted, setGranted] = useState<ReadonlySet<string>>(
+    new Set(['Balances:View', 'Transfers:View', 'Transfers:Edit']),
+  );
+
+  const toggle = (key: string) => {
+    setGranted((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <Table>
+      <Table.Caption>Role permissions</Table.Caption>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Resource</Table.Head>
+          {actions.map((action) => (
+            <Table.Head key={action} align="center">
+              {action}
+            </Table.Head>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      {sections.map((section) => (
+        <Table.Body key={section.title}>
+          <Table.Row>
+            <Table.Head scope="rowgroup" colSpan={actions.length + 1}>
+              <Text size="sm" weight="semibold">
+                {section.title}
+              </Text>
+            </Table.Head>
+          </Table.Row>
+          {section.resources.map((resource) => (
+            <Table.Row key={resource}>
+              <Table.Head scope="row">{resource}</Table.Head>
+              {actions.map((action: Action) => {
+                const key = `${resource}:${action}`;
+                const label = `${action} ${resource}, ${section.title}`;
+                return (
+                  <Table.Cell key={action} align="center">
+                    <Checkbox
+                      value={key}
+                      isChecked={granted.has(key)}
+                      onChange={() => toggle(key)}
+                      accessibilityLabel={label}
+                      aria-label={label}
+                    />
+                  </Table.Cell>
+                );
+              })}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      ))}
+    </Table>
+  );
+}
+```
+
 ## In card
 
 On mobile, a headerless table can present key-value summaries inside a card. Pair it with a compact visual summary built from layout primitives while chart components are unavailable, and keep the values in the table as the accessible source of detail.

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,8 @@ 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.
 - [0.3.9](resources/release-notes/0.3.9/content.md): DateRangePicker bottom sheets accept custom snap points, stack behavior, and fill; DataGrid keeps column headers within their bounds.

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

@@ -0,0 +1,15 @@
+# 0.3.12 (https://design.candescent.com/docs/resources/release-notes/0.3.12)
+
+DataGrid adds built-in column types, pinning, type-aware filters, and polarity or delta number cells.
+
+This release expands **DataGrid** with typed columns, pinning, and richer filters, bumps the Uniwind styling layer used across Forge UI, and fixes clamped **[SystemAlert](https://design.candescent.com/docs/components/system-alert/content.md)** descriptions on web.
+
+## What's new
+
+**DataGrid** — Set a column `type` to get defaults for display, sorting, and editing instead of wiring everything by hand. Pin columns to the left or right edge of the viewport, use filter operators that match each column’s type, and render financial-style **polarity** and **delta** number cells for signed amounts and period-over-period change. The filter panel closes on outside presses (including Escape) while nested **[DatePicker](https://design.candescent.com/docs/components/date-picker/content.md)** and Select popovers stay usable, pinned-column edge lines extend through the footer on short grids, and overlay focus handling keeps the panel open when a nested control autofocuses on mount ([#958](https://github.com/dfh-candescent/forge-design-system/pull/958)).
+
+**Uniwind** — Forge UI packages move to a newer Uniwind release; **[Icon](https://design.candescent.com/docs/components/icon/content.md)** class handling is updated to match. If your app depends on Uniwind directly alongside `@cdx-ui/web` or `@cdx-ui/native`, align your Uniwind version with the one Forge UI pulls in to avoid duplicate or mismatched styling ([#891](https://github.com/dfh-candescent/forge-design-system/pull/891)).
+
+## Bug fixes
+
+**[SystemAlert](https://design.candescent.com/docs/components/system-alert/content.md)** — Multi-line descriptions with `numberOfLines` no longer show clipped text in the bottom padding on web ([#939](https://github.com/dfh-candescent/forge-design-system/pull/939)).