@cdx-ui/components 0.3.1 → 0.3.3

package/docs/components/insight-stack/content.md

@@ -0,0 +1,231 @@
+# Insight Stack (https://design.candescent.com/docs/components/insight-stack)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13652-32306), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-insightstack--default)
+
+`InsightStack` wraps a summary [`Insight`](https://design.candescent.com/docs/components/insight/content.md) and draws up to two cards behind it, so a single card on Home can stand for a list of insights. The layers are decorative and never interactive.
+
+```tsx
+import { InsightStack } from '@cdx-ui/components';
+```
+
+## Basic
+
+Pass the number of insights as `count`. The layers don't announce it, so include the count in the front Insight's accessible label.
+
+```tsx
+import { Box, Insight, InsightStack } from '@cdx-ui/components';
+
+const insightCount = 3;
+const summary = 'Your spending this month is 12% lower than last month.';
+
+export default function InsightStackBasicDemo() {
+  return (
+    <Box className="w-full max-w-md">
+      <InsightStack count={insightCount}>
+        <Insight
+          aiGenerated
+          onPress={() => {}}
+          accessibilityLabel={`${summary} ${insightCount} insights.`}
+        >
+          <Insight.Description>{summary}</Insight.Description>
+        </Insight>
+      </InsightStack>
+    </Box>
+  );
+}
+```
+
+## Item count
+
+A `count` of 1 draws no layers, 2 draws one, and 3 or more draws two. When pressed, only the front Insight scales; the layers stay still.
+
+```tsx
+import { Box, Insight, InsightStack } from '@cdx-ui/components';
+
+const counts = [1, 2, 3] as const;
+
+export default function InsightStackCountsDemo() {
+  return (
+    <Box className="w-full max-w-md gap-4">
+      {counts.map((count) => {
+        const summary = count === 1 ? 'You have 1 new insight.' : `You have ${count} new insights.`;
+
+        return (
+          <InsightStack key={count} count={count}>
+            <Insight onPress={() => {}}>
+              <Insight.Description>{summary}</Insight.Description>
+            </Insight>
+          </InsightStack>
+        );
+      })}
+    </Box>
+  );
+}
+```
+
+## Colors
+
+The layers are always neutral. The front Insight's `color` and `aiGenerated` tint only the front card.
+
+```tsx
+import { Box, Insight, InsightStack } from '@cdx-ui/components';
+
+const stacks = [
+  { key: 'warning', color: 'warning', count: 2, copy: 'You have 2 bills due before payday.' },
+  { key: 'danger', color: 'danger', count: 3, copy: 'You have 3 overdue payments.' },
+  { key: 'ai', color: 'info', count: 3, copy: 'You have 3 new ways to save.', aiGenerated: true },
+] as const;
+
+export default function InsightStackColorsDemo() {
+  return (
+    <Box className="w-full max-w-md gap-4">
+      {stacks.map((stack) => (
+        <InsightStack key={stack.key} count={stack.count}>
+          <Insight color={stack.color} aiGenerated={'aiGenerated' in stack} onPress={() => {}}>
+            <Insight.Description>{stack.copy}</Insight.Description>
+          </Insight>
+        </InsightStack>
+      ))}
+    </Box>
+  );
+}
+```
+
+## Dismissible
+
+Pass the number of insights left as `count`, so the layers drop away as the user dismisses cards. Keep rendering the same front Insight and swap its copy, so `ref.current?.focus()` returns focus to it after each dismissal. When none is left, remove the stack and move focus elsewhere, here to the button below it.
+
+```tsx
+import { useRef, useState, type ComponentRef } from 'react';
+import { Box, Button, Insight, InsightStack, Text } from '@cdx-ui/components';
+
+const insights = [
+  { id: 'spending', copy: 'Your spending this month is 12% lower than last month.' },
+  { id: 'subscriptions', copy: 'You have three subscriptions renewing in the next seven days.' },
+  { id: 'savings', copy: 'You could save $45.00 a month with annual billing.' },
+  { id: 'paycheck', copy: 'Your paycheck arrived a day early.' },
+];
+
+export default function InsightStackDismissibleDemo() {
+  const [remaining, setRemaining] = useState(insights);
+  const insightRef = useRef<ComponentRef<typeof Insight>>(null);
+  const restoreRef = useRef<ComponentRef<typeof Button>>(null);
+  const front = remaining.at(0);
+  const count = remaining.length;
+
+  const dismiss = () => {
+    setRemaining((current) => current.slice(1));
+    if (count > 1) {
+      insightRef.current?.focus();
+    } else {
+      restoreRef.current?.focus();
+    }
+  };
+
+  return (
+    <Box className="w-full max-w-md gap-4">
+      {front ? (
+        <InsightStack count={count}>
+          <Insight
+            ref={insightRef}
+            aiGenerated
+            onPress={() => {}}
+            onClose={dismiss}
+            accessibilityLabel={`${front.copy} ${count} ${count === 1 ? 'insight' : 'insights'}.`}
+          >
+            <Insight.Description>{front.copy}</Insight.Description>
+          </Insight>
+        </InsightStack>
+      ) : (
+        <Box className="min-h-14 justify-center">
+          <Text color="secondary">{"You're all caught up."}</Text>
+        </Box>
+      )}
+      <Box className="items-start">
+        <Button
+          ref={restoreRef}
+          variant="outline"
+          size="small"
+          onPress={() => setRemaining(insights)}
+        >
+          <Button.Label>Restore insights</Button.Label>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+```
+
+## Detail
+
+The front card can also be a detail Insight. The layers follow its height, so they peek below it however tall it grows.
+
+```tsx
+import { Box, Button, Insight, InsightStack } from '@cdx-ui/components';
+
+export default function InsightStackDetailDemo() {
+  return (
+    <Box className="w-full max-w-md gap-6">
+      <InsightStack count={3}>
+        <Insight layout="detail" onClose={() => {}}>
+          <Insight.Tag>Spending</Insight.Tag>
+          <Insight.Header>
+            <Insight.Title>Dining is trending higher</Insight.Title>
+            <Insight.Description>
+              You have spent $320.00 of your $400.00 dining budget, with 10 days left this month.
+            </Insight.Description>
+          </Insight.Header>
+          <Insight.Footer>
+            <Button variant="outline" size="small">
+              <Button.Label>View transactions</Button.Label>
+            </Button>
+            <Button size="small">
+              <Button.Label>Adjust budget</Button.Label>
+            </Button>
+          </Insight.Footer>
+        </Insight>
+      </InsightStack>
+      <InsightStack count={2}>
+        <Insight layout="detail" aiGenerated onClose={() => {}}>
+          <Insight.Tag>Savings</Insight.Tag>
+          <Insight.Header>
+            <Insight.Title>Grow your emergency fund</Insight.Title>
+            <Insight.Description>
+              Setting aside $150.00 each payday would reach your savings goal by June.
+            </Insight.Description>
+          </Insight.Header>
+          <Insight.Footer>
+            <Button size="small">
+              <Button.Label>Set up transfer</Button.Label>
+            </Button>
+          </Insight.Footer>
+        </Insight>
+      </InsightStack>
+    </Box>
+  );
+}
+```
+
+## API
+
+### InsightStack
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | The front card, usually a summary `Insight`. |
+| `count` | `number` | — | How many insights the stack stands for. `1` or less draws no layers, `2` draws one, and `3` or more draws two. The layers are decorative, so put the count in the front Insight's accessible label or hint. |
+| `asChild?` | `boolean` | — | Merges the root props onto a single child element instead of rendering a `View`. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Anatomy
+
+| `data-slot`           | Element                                  |
+| --------------------- | ---------------------------------------- |
+| `insight-stack`       | Root                                     |
+| `insight-stack-layer` | Decorative card behind the front Insight |
+
+## Accessibility
+
+The root adds no role, so the front Insight stays the only interactive element. The layers are hidden from assistive tech, so `count` is not announced. Include the count in the front Insight's accessible label, for example by appending "3 insights" to its copy in `accessibilityLabel`, or in its `accessibilityHint`.

package/docs/foundations/styles/tokens/all-tokens/content.md

@@ -64,13 +64,13 @@ Text and icon colors, used as `text-*` utilities. Light and Dark name the primit
 | `content.neutral-on-subtle` | `text-content-neutral-on-subtle` | neutral, on subtle | `color.base.800` | `color.base.100` |
 | `content.info` | `text-content-info` | info | `color.sky.700` | `color.sky.500` |
 | `content.info-on-strong` | `text-content-info-on-strong` | info, on strong | `color.white` | `color.white` |
-| `content.info-on-subtle` | `text-content-info-on-subtle` | info, on subtle | `color.sky.900` | `color.sky.900` |
+| `content.info-on-subtle` | `text-content-info-on-subtle` | info, on subtle | `color.sky.900` | `color.sky.100` |
 | `content.success` | `text-content-success` | success | `color.green.700` | `color.green.600` |
 | `content.success-on-strong` | `text-content-success-on-strong` | success, on strong | `color.white` | `color.white` |
-| `content.success-on-subtle` | `text-content-success-on-subtle` | success, on subtle | `color.green.900` | `color.green.900` |
+| `content.success-on-subtle` | `text-content-success-on-subtle` | success, on subtle | `color.green.900` | `color.green.100` |
 | `content.warning` | `text-content-warning` | warning | `color.amber.700` | `color.amber.600` |
 | `content.warning-on-strong` | `text-content-warning-on-strong` | warning, on strong | `color.black` | `color.black` |
-| `content.warning-on-subtle` | `text-content-warning-on-subtle` | warning, on subtle | `color.amber.900` | `color.amber.900` |
+| `content.warning-on-subtle` | `text-content-warning-on-subtle` | warning, on subtle | `color.amber.900` | `color.amber.100` |
 | `content.danger` | `text-content-danger` | danger | `color.red.700` | `color.red.300` |
 | `content.danger-on-strong` | `text-content-danger-on-strong` | danger, on strong | `color.white` | `color.red.900` |
 | `content.danger-on-subtle` | `text-content-danger-on-subtle` | danger, on subtle | `color.red.900` | `color.red.100` |
@@ -106,12 +106,24 @@ Background colors, used as `bg-*` utilities. Light and Dark name the primitive e
 | `surface.action.tint-hover` | `bg-surface-action-tint-hover` | Action, tint, hover | `color.brand.100` | `color.brand.900` |
 | `surface.action.tint-active` | `bg-surface-action-tint-active` | Action, tint, active | `color.brand.200` | `color.brand.800` |
 | `surface.brand.strong` | `bg-surface-brand-strong` | Brand, strong | `color.brand.700` | `color.brand.300` |
+| `surface.brand.strong-hover` | `bg-surface-brand-strong-hover` | Brand, strong, hover | `color.brand.800` | `color.brand.200` |
+| `surface.brand.strong-active` | `bg-surface-brand-strong-active` | Brand, strong, active | `color.brand.900` | `color.brand.100` |
 | `surface.brand.subtle` | `bg-surface-brand-subtle` | Brand, subtle | `color.brand.200` | `color.brand.900` |
+| `surface.brand.subtle-hover` | `bg-surface-brand-subtle-hover` | Brand, subtle, hover | `color.brand.300` | `color.brand.800` |
+| `surface.brand.subtle-active` | `bg-surface-brand-subtle-active` | Brand, subtle, active | `color.brand.400` | `color.brand.700` |
 | `surface.brand.tint` | `bg-surface-brand-tint` | Brand, tint | `color.brand.50` | `color.brand.950` |
+| `surface.brand.tint-hover` | `bg-surface-brand-tint-hover` | Brand, tint, hover | `color.brand.100` | `color.brand.900` |
+| `surface.brand.tint-active` | `bg-surface-brand-tint-active` | Brand, tint, active | `color.brand.200` | `color.brand.800` |
 | `surface.brand.core` | `bg-surface-brand-core` | Brand, core | `color.brand.input` | `color.brand.input` |
 | `surface.accent.strong` | `bg-surface-accent-strong` | Accent, strong | `color.accent.700` | `color.accent.300` |
+| `surface.accent.strong-hover` | `bg-surface-accent-strong-hover` | Accent, strong, hover | `color.accent.800` | `color.accent.200` |
+| `surface.accent.strong-active` | `bg-surface-accent-strong-active` | Accent, strong, active | `color.accent.900` | `color.accent.100` |
 | `surface.accent.subtle` | `bg-surface-accent-subtle` | Accent, subtle | `color.accent.200` | `color.accent.900` |
+| `surface.accent.subtle-hover` | `bg-surface-accent-subtle-hover` | Accent, subtle, hover | `color.accent.300` | `color.accent.800` |
+| `surface.accent.subtle-active` | `bg-surface-accent-subtle-active` | Accent, subtle, active | `color.accent.400` | `color.accent.700` |
 | `surface.accent.tint` | `bg-surface-accent-tint` | Accent, tint | `color.accent.50` | `color.accent.950` |
+| `surface.accent.tint-hover` | `bg-surface-accent-tint-hover` | Accent, tint, hover | `color.accent.100` | `color.accent.900` |
+| `surface.accent.tint-active` | `bg-surface-accent-tint-active` | Accent, tint, active | `color.accent.200` | `color.accent.800` |
 | `surface.accent.core` | `bg-surface-accent-core` | Accent, core | `color.accent.input` | `color.accent.input` |
 | `surface.danger.strong` | `bg-surface-danger-strong` | Danger, strong | `color.red.700` | `color.red.200` |
 | `surface.danger.strong-hover` | `bg-surface-danger-strong-hover` | Danger, strong, hover | `color.red.800` | `color.red.100` |
@@ -175,6 +187,14 @@ Border colors, used as `border-*` utilities. Light and Dark name the primitive e
 | `stroke.focus` | `border-stroke-focus` | focus | `color.brand.700` | `color.brand.300` |
 | `stroke.hover` | `border-stroke-hover` | hover | `color.base.950` | `color.base.50` |
 | `stroke.ring` | `border-stroke-ring` | ring | `color.base.950` | `color.white` |
+| `stroke.accent` | `border-stroke-accent` | accent | `color.accent.700` | `color.accent.300` |
+| `stroke.ai-end` | `border-stroke-ai-end` | ai-end | `color.accent.300` | `color.accent.300` |
+| `stroke.ai-start` | `border-stroke-ai-start` | ai-start | `color.brand.400` | `color.brand.400` |
+| `stroke.brand` | `border-stroke-brand` | brand | `color.brand.700` | `color.brand.300` |
+| `stroke.danger-subtle` | `border-stroke-danger-subtle` | danger-subtle | `color.red.300` | `color.red.300` |
+| `stroke.info-subtle` | `border-stroke-info-subtle` | info-subtle | `color.sky.300` | `color.sky.300` |
+| `stroke.success-subtle` | `border-stroke-success-subtle` | success-subtle | `color.green.300` | `color.green.300` |
+| `stroke.warning-subtle` | `border-stroke-warning-subtle` | warning-subtle | `color.amber.300` | `color.amber.300` |
 
 ### Chart
 

package/docs/llms.txt

@@ -104,6 +104,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
   - [Box](components/box/content.md): The layout container for building screens, with semantic web elements through role and an asChild escape hatch. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-box--default)
   - [Card](components/card/content.md): A composable surface for grouping related content, with optional brand stripe, header, content, and footer regions. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-card--with-stripe)
   - [Drawer](components/drawer/content.md): A panel attached to an edge of the viewport or container, with modal and permanent presentations. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=9956-15204), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-drawer--default)
+  - [Insight](components/insight/content.md): A bordered card for a personalised, often AI-generated, insight, shown as a pressable summary or a detail card. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13158-18419), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-insight--default)
+  - [Insight Stack](components/insight-stack/content.md): Draws decorative cards behind a summary Insight to show that more insights are waiting. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13652-32306), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-insightstack--default)
   - [Scoped Theme](components/scoped-theme/content.md): Forces a specific theme on a component subtree, regardless of the application's global theme. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/theming-scopedtheme--default)
   - [Scroll Shadow](components/scroll-shadow/content.md): Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-scrollshadow--default)
   - [Stack](components/stack/content.md): Horizontal and vertical layout primitives with token-based spacing and optional reversed order. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-vstack--default)
@@ -138,6 +140,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
 
 ## Release notes
 
+- [0.3.2](resources/release-notes/0.3.2/content.md): CurrencyInput adds an outline variant for bordered amount fields; BottomSheet opens reliably in optimized web production builds.
+- [0.3.1](resources/release-notes/0.3.1/content.md): DataGrid adds filterMode for server-side search and filters; IconButton adds warning, success, and info color options.
 - [0.3.0](resources/release-notes/0.3.0/content.md): Calendar and MonthCalendar year pickers scroll the full selectable range; BottomSheet adds fullBleed and updated Content and Footer padding.
 - [0.2.5](resources/release-notes/0.2.5/content.md): Box is the supported layout primitive with hardened stacks; View from @cdx-ui/components is deprecated. Align Expo apps with SDK 57 and React Native 0.86.
 - [0.2.4](resources/release-notes/0.2.4/content.md): ScrollShadow fades scroll edges on iOS, Android, and web; ListItem.SectionHeader adds a gradient variant for account-style lists.

package/docs/patterns/forms/content.md

@@ -105,4 +105,259 @@ export default function DateRangeBlock() {
     </Card>
   );
 }
+```
+
+## Add Payee Form
+
+A full-screen form with a contact card, sectioned fields, a bottom-sheet date picker, e-bill consent checkboxes, and a pinned submit button.
+
+**Platforms:** iOS, Android
+
+```tsx
+import { useState } from 'react';
+import {
+  Avatar,
+  BottomSheet,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  CurrencyInput,
+  DateField,
+  DatePicker,
+  Divider,
+  Field,
+  Form,
+  FullScreenDialog,
+  Heading,
+  Input,
+  ListItem,
+  ScrollView,
+  Select,
+  Text,
+  VStack,
+} from '@cdx-ui/components';
+import type { DateId } from '@cdx-ui/formatters';
+
+const PAYEE_TYPES = [
+  { value: 'utility', label: 'Utility' },
+  { value: 'credit-card', label: 'Credit card' },
+  { value: 'loan', label: 'Loan' },
+  { value: 'other', label: 'Other' },
+];
+
+const STATES = [
+  { value: 'ca', label: 'California' },
+  { value: 'ma', label: 'Massachusetts' },
+  { value: 'ny', label: 'New York' },
+  { value: 'tx', label: 'Texas' },
+];
+
+export default function AddPayeeFormBlock() {
+  const [open, setOpen] = useState(true);
+  const [amount, setAmount] = useState(0);
+  const [date, setDate] = useState<DateId | undefined>();
+  const [dateOpen, setDateOpen] = useState(false);
+  const [consents, setConsents] = useState<string[]>([]);
+
+  return (
+    <FullScreenDialog isOpen={open} onOpenChange={setOpen}>
+      <FullScreenDialog.Trigger asChild>
+        <Button>
+          <Button.Label>Add payee</Button.Label>
+        </Button>
+      </FullScreenDialog.Trigger>
+      <FullScreenDialog.Popup>
+        <FullScreenDialog.Header title="Add payee" />
+        <FullScreenDialog.Content>
+          <ScrollView className="flex-1">
+            <Box className="p-4">
+              <Form>
+                <Card fullBleed>
+                  <Card.Stripe />
+                  <Card.Content>
+                    <ListItem showSeparator={false}>
+                      <ListItem.LeadingSlot>
+                        <Avatar color="info">
+                          <Avatar.Text>Wellesley Bank</Avatar.Text>
+                        </Avatar>
+                      </ListItem.LeadingSlot>
+                      <ListItem.Content>
+                        <ListItem.Title>Wellesley Bank MA Checking</ListItem.Title>
+                      </ListItem.Content>
+                    </ListItem>
+                  </Card.Content>
+                </Card>
+
+                <Text color="secondary">
+                  Add a company or person you pay regularly. Details are saved to your payee list,
+                  and you can schedule a payment as soon as the payee is added.
+                </Text>
+
+                <Card>
+                  <Card.Header>
+                    <Heading size="sm">Payee details</Heading>
+                  </Card.Header>
+                  <Card.Content>
+                    <VStack space="lg">
+                      <Field>
+                        <Field.Label>Payee name</Field.Label>
+                        <Input>
+                          <Input.Field placeholder="Enter a name" />
+                        </Input>
+                        <Field.Helper>As it appears on your statement.</Field.Helper>
+                      </Field>
+                      <Field>
+                        <Field.Label>Email</Field.Label>
+                        <Input>
+                          <Input.Field
+                            autoCapitalize="none"
+                            autoComplete="email"
+                            keyboardType="email-address"
+                            placeholder="example@domain.com"
+                          />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>Amount</Field.Label>
+                        <CurrencyInput variant="outline" value={amount} onChangeValue={setAmount} />
+                      </Field>
+                      <Field>
+                        <DatePicker
+                          value={date}
+                          onValueChange={setDate}
+                          isOpen={dateOpen}
+                          onOpenChange={setDateOpen}
+                        >
+                          <Field.Label>Date</Field.Label>
+                          <DateField.Group fullWidth>
+                            <DateField.Input />
+                            <DateField.Suffix>
+                              <DatePicker.Trigger>
+                                <DatePicker.TriggerIndicator />
+                              </DatePicker.Trigger>
+                            </DateField.Suffix>
+                          </DateField.Group>
+                          <DatePicker.BottomSheet>
+                            <BottomSheet.Header
+                              title="Select date"
+                              onClose={() => setDateOpen(false)}
+                            />
+                            <BottomSheet.Content>
+                              <DatePicker.Calendar aria-label="Date" />
+                            </BottomSheet.Content>
+                          </DatePicker.BottomSheet>
+                        </DatePicker>
+                        <Field.Helper>The first date you want to pay this payee.</Field.Helper>
+                      </Field>
+                      <Field>
+                        <Field.Label>Payee type</Field.Label>
+                        <Select items={PAYEE_TYPES}>
+                          <Select.Trigger>
+                            <Select.Value placeholder="Select a type" />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {PAYEE_TYPES.map((type) => (
+                              <Select.Item key={type.value} value={type.value}>
+                                <Select.ItemLabel>{type.label}</Select.ItemLabel>
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select>
+                      </Field>
+                    </VStack>
+                  </Card.Content>
+                </Card>
+
+                <Card>
+                  <Card.Header>
+                    <Heading size="sm">Service address</Heading>
+                  </Card.Header>
+                  <Card.Content>
+                    <VStack space="lg">
+                      <Text color="secondary">
+                        The service address is where the payee provides the service. It may be
+                        different from your current primary address.
+                      </Text>
+                      <Field>
+                        <Field.Label>Address line 1</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="address-line1" />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>City</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="postal-address-locality" />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>State</Field.Label>
+                        <Select items={STATES}>
+                          <Select.Trigger>
+                            <Select.Value placeholder="Select a state" />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {STATES.map((state) => (
+                              <Select.Item key={state.value} value={state.value}>
+                                <Select.ItemLabel>{state.label}</Select.ItemLabel>
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <Field.Label>Zip code</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="postal-code" keyboardType="number-pad" />
+                        </Input>
+                      </Field>
+                    </VStack>
+                  </Card.Content>
+                </Card>
+
+                <Text color="secondary" size="sm">
+                  Please read the terms of use carefully. They include important information about
+                  receiving e-bills from this payee.
+                </Text>
+
+                <Checkbox.Group
+                  value={consents}
+                  onChange={setConsents}
+                  aria-label="E-bill delivery"
+                >
+                  <Card>
+                    <Card.Content>
+                      <Checkbox value="paperless">
+                        <Checkbox.Label>
+                          Send my bill here and stop delivering paper in the mail.
+                        </Checkbox.Label>
+                      </Checkbox>
+                    </Card.Content>
+                  </Card>
+                  <Card>
+                    <Card.Content>
+                      <Checkbox value="trial">
+                        <Checkbox.Label>
+                          I want to try it first, for 15 days, and I will decide later if I want to
+                          stop my paper bill. Send my bill both here and in the mail.
+                        </Checkbox.Label>
+                      </Checkbox>
+                    </Card.Content>
+                  </Card>
+                </Checkbox.Group>
+              </Form>
+            </Box>
+          </ScrollView>
+          <Divider />
+          <Box className="p-4">
+            <Button onPress={() => setOpen(false)}>
+              <Button.Label>Submit</Button.Label>
+            </Button>
+          </Box>
+        </FullScreenDialog.Content>
+      </FullScreenDialog.Popup>
+    </FullScreenDialog>
+  );
+}
 ```

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

@@ -0,0 +1,13 @@
+# 0.3.1 (https://design.candescent.com/docs/resources/release-notes/0.3.1)
+
+DataGrid adds filterMode for server-side search and filters; IconButton adds warning, success, and info color options.
+
+This release extends **DataGrid** for server-driven filtering and adds status-colored variants to **[IconButton](https://design.candescent.com/docs/components/icon-button/content.md)** and **[Toast](https://design.candescent.com/docs/components/toast/content.md)**.
+
+## What's new
+
+**DataGrid** — Set `filterMode="server"` when pagination or sorting already runs on the server so quick search and column filters no longer run only against the rows on the current page. The grid emits `quickFilter` and `filterModel` changes and leaves filtering to your data source; `filterMode` defaults to match `paginationMode`, so server pagination does not silently filter a single page. `GridFilterItem.operator` is optional and defaults to `contains` ([#813](https://github.com/dfh-candescent/forge-design-system/pull/813)).
+
+**[IconButton](https://design.candescent.com/docs/components/icon-button/content.md)** — `color` accepts `warning`, `success`, and `info` across solid, subtle, and ghost variants so icon actions can match semantic status without custom styling ([#793](https://github.com/dfh-candescent/forge-design-system/pull/793)).
+
+**[Toast](https://design.candescent.com/docs/components/toast/content.md)** — The close control uses the toast’s semantic color so dismiss actions stay visually aligned with warning, success, info, and error toasts ([#793](https://github.com/dfh-candescent/forge-design-system/pull/793)).

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

@@ -0,0 +1,17 @@
+# 0.3.2 (https://design.candescent.com/docs/resources/release-notes/0.3.2)
+
+CurrencyInput adds an outline variant for bordered amount fields; BottomSheet opens reliably in optimized web production builds.
+
+This release adds a bordered **[CurrencyInput](https://design.candescent.com/docs/components/currency-input/content.md)** style and fixes **[BottomSheet](https://design.candescent.com/docs/components/bottom-sheet/content.md)** sizing on optimized web builds.
+
+## What's new
+
+**[CurrencyInput](https://design.candescent.com/docs/components/currency-input/content.md)** — Set `variant="outline"` for a bordered field that matches the outlined currency control in design specs. The outline layout keeps the currency prefix in secondary content color with tighter spacing to the amount, and pairs with `Field` for labels, hints, and validation like the default ghost style ([#826](https://github.com/dfh-candescent/forge-design-system/pull/826)).
+
+## Bug fixes
+
+**[BottomSheet](https://design.candescent.com/docs/components/bottom-sheet/content.md)** — Modal sheets open at the correct height in production web bundles, so dynamic detents are no longer clipped below the backdrop and footers no longer cover scrollable content ([#829](https://github.com/dfh-candescent/forge-design-system/pull/829)).
+
+## Dependencies
+
+**@cdx-ui/\*** — Upgrade every installed Forge UI package to `0.3.2` together when you adopt this release.

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

@@ -8,6 +8,8 @@ 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.2](https://design.candescent.com/docs/resources/release-notes/0.3.2/content.md) — 2026-10-13 — CurrencyInput adds an outline variant for bordered amount fields; BottomSheet opens reliably in optimized web production builds.
+- [0.3.1](https://design.candescent.com/docs/resources/release-notes/0.3.1/content.md) — 2026-10-13 — DataGrid adds filterMode for server-side search and filters; IconButton adds warning, success, and info color options.
 - [0.3.0](https://design.candescent.com/docs/resources/release-notes/0.3.0/content.md) — 2026-10-13 — Calendar and MonthCalendar year pickers scroll the full selectable range; BottomSheet adds fullBleed and updated Content and Footer padding.
 - [0.2.5](https://design.candescent.com/docs/resources/release-notes/0.2.5/content.md) — 2026-10-12 — Box is the supported layout primitive with hardened stacks; View from @cdx-ui/components is deprecated. Align Expo apps with SDK 57 and React Native 0.86.
 - [0.2.4](https://design.candescent.com/docs/resources/release-notes/0.2.4/content.md) — 2026-10-09 — ScrollShadow fades scroll edges on iOS, Android, and web; ListItem.SectionHeader adds a gradient variant for account-style lists.