@cdx-ui/components 0.2.3 → 0.2.5

package/docs/getting-started/developers/styling/content.md

@@ -0,0 +1,195 @@
+# Styling and customization (https://design.candescent.com/docs/getting-started/developers/styling)
+
+This guide is for anyone writing screens on top of Forge UI: developers at financial institutions (FIs) building integrations, Candescent product teams, and the AI coding agents that work for either. The rules are the same for everyone, and each one is written so that it can be followed literally. It covers building screens with Forge UI components, not authoring new components.
+
+## Why these rules exist
+
+Forge UI components ship with their look, and that look comes from design tokens. Each FI's theme sets those tokens at runtime, and dark mode swaps them. A style you hard-code on a component doesn't follow the tokens. It shows the wrong brand, it breaks in dark mode, and it can stop working when a Forge UI release changes the component's internals. If you leave the look to the component, your screen stays correct across every theme and every upgrade.
+
+## Where each change belongs
+
+| To change                                      | Use                                                                                                                                     |
+| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Brand colors and fonts across the whole app    | The FI theme: a `ThemeOverride` applied with `applyThemeOverride` from [`@cdx-ui/styles`](https://www.npmjs.com/package/@cdx-ui/styles) |
+| How a component looks                          | Its props, such as `variant`, `color` and `size`                                                                                        |
+| Where a component sits in its parent           | `className`, with placement classes only                                                                                                |
+| Screen layout, padding and section backgrounds | Layout primitives                                                                                                                       |
+| A dark or inverse section                      | `ScopedTheme`                                                                                                                           |
+| Anything none of these cover                   | A request to the Forge UI team. Don't override the component.                                                                           |
+
+## The rules
+
+1. Use components as shipped. Choose their look with props: `variant`, `color`, `size`, `fullWidth`, `fullBleed`, and on `Text`, `weight` and `italic`.
+2. `className` on a Forge UI component, or on any of its parts, only places it in its parent.
+3. Layout primitives can also take layout classes, spacing-scale padding and semantic surface backgrounds.
+4. Use semantic tokens only.
+5. Don't restate a default.
+6. Put dark and inverse sections in `ScopedTheme`.
+7. Import everything from the public `@cdx-ui/*` entry points.
+8. When a design needs something Forge UI doesn't ship, use the closest variant and request the rest. Don't override.
+
+The sections below explain each rule, with a wrong and a right example.
+
+## Set the look with props
+
+Every component's API table lists the props that choose its look. Reach for them first, and treat a missing prop as a request, not a reason to write classes.
+
+```tsx
+// Wrong: a hand-picked color that ignores the FI theme and dark mode
+<Button className="bg-red-600">
+  <Button.Label className="text-white">Close account</Button.Label>
+</Button>
+
+// Right
+<Button color="danger">
+  <Button.Label>Close account</Button.Label>
+</Button>
+```
+
+## Text, Heading and Icon
+
+- **Color:** `Text` and `Icon` take `color`: `primary`, `secondary`, `tertiary`, `action`, `danger`, `warning`, `success` or `info`. Each maps to its `text-content-*` token. `primary` is the default, so leave it off.
+- **Typography:** `Text` takes `size`, `weight` and `italic`. `Heading` takes `size` only.
+- **Nesting:** a `Text` inside another text element (a `Text`, a `Heading`, or a slot such as `Button.Label`) inherits its color, size and weight. Set only what differs.
+- **Alignment:** `text-center`, `text-start` and `text-end` are allowed as classes. Never use `text-left` or `text-right`, which break right-to-left layouts.
+- **Casing:** `uppercase` is allowed as a class.
+- **Icon size:** use a `size-*` class on the spacing scale. The default is `size-5`, so don't restate it, and don't pass a numeric `size`.
+
+```tsx
+// Wrong: color, typography and a default restated through className
+<Text className="body-sm font-semibold text-content-secondary text-left">Pending</Text>
+<Icon as={Info} className="size-5 text-content-action" />
+
+// Right
+<Text size="sm" weight="semibold" color="secondary" className="text-start">
+  Pending
+</Text>
+<Icon as={Info} color="action" />
+```
+
+> [!WARNING]
+>
+> **Text on a colored surface**
+>
+> The `text-content-*-on-strong` and `text-content-*-on-subtle` tokens have no prop. Use them as a
+> class only when your own code paints the surface underneath, such as a `Box` with
+> `bg-surface-action-strong`. For a status message use `Alert`; for a dark section use
+> `ScopedTheme`.
+
+## Place components with className
+
+On a Forge UI component, `className` positions the component in its parent and nothing else.
+
+| Allowed                     | Examples                                                  |
+| --------------------------- | --------------------------------------------------------- |
+| Flex placement              | `flex-1`, `grow`, `shrink-0`, `self-start`, `self-center` |
+| Width constraints           | `w-full`, `max-w-md`, `min-w-0`                           |
+| Margin on the spacing scale | `mt-4`, `mx-2`                                            |
+
+Padding, backgrounds, borders, radii, colors, typography and heights are not allowed, on the component or on any of its parts. Between siblings, prefer a stack's `space` prop to margins.
+
+```tsx
+// Wrong: restyling Card parts to match a mockup
+<Card className="rounded-2xl bg-surface-secondary">
+  <Card.Content className="px-5 py-4">...</Card.Content>
+</Card>
+
+// Right: the card keeps its padding and surface; className only places it
+<Card className="w-full max-w-md">
+  <Card.Content>...</Card.Content>
+</Card>
+```
+
+## Lay out screens with layout primitives
+
+`Box`, `HStack`, `VStack`, `ScrollView`, `SafeAreaView` and `KeyboardAvoidingView` have no look of their own. They can take layout classes (`flex-row`, `items-center`, `justify-between`, `flex-wrap`), padding on the spacing scale, and a semantic surface background (`bg-surface-*`). `Box` is the general-purpose container: use it wherever you would reach for a `View`. On `HStack` and `VStack`, set the gap between children with `space`, not `gap-*`.
+
+```tsx
+// Wrong: a react-native View with pixel values
+import { View } from 'react-native';
+
+<View style={{ padding: 20, gap: 12 }}>...</View>;
+
+// Right
+import { VStack } from '@cdx-ui/components';
+
+<VStack space="md" className="p-5">
+  ...
+</VStack>;
+```
+
+Don't add a `Box` or a stack that does nothing. If a design's spacing doesn't match a component's default, keep the default and raise the difference with whoever owns the design.
+
+## Use semantic tokens
+
+Use the semantic token families: `text-content-*`, `bg-surface-*` and `border-stroke-*`. They resolve to each FI's brand and to dark mode. Never use:
+
+- Primitive tokens, the ones that end in a number (`bg-brand-500`, `text-base-700`).
+- Hex or rgb values, `white` and `black`.
+- Arbitrary `[...]` values and pixel values, in classes or in `style`.
+
+To change what a semantic token resolves to for your brand, change the FI theme, not the class.
+
+## Don't restate defaults
+
+A default written out by hand looks like a deliberate choice and outlives the default when it changes. Leave off `color="primary"` on `Text`, `size-5` on `Icon`, `variant="solid"` on `Button`, `w-full` next to `fullWidth`, and accessibility roles a component already sets.
+
+## Dark and inverse surfaces
+
+Wrap a dark or inverse section in [`ScopedTheme`](https://design.candescent.com/docs/components/scoped-theme/content.md). Every component inside it switches tokens, so you never pick contrast colors by hand.
+
+```tsx
+// Wrong
+<Box className="bg-black">
+  <Text className="text-white">Premium rewards</Text>
+</Box>
+
+// Right
+<ScopedTheme theme="dark">
+  <Card>
+    <Card.Content>
+      <Text>Premium rewards</Text>
+    </Card.Content>
+  </Card>
+</ScopedTheme>
+```
+
+## Imports
+
+- Use `Box` in place of `View`. `View` from `react-native` is not part of the Forge UI API, and the `View` export of `@cdx-ui/components` is deprecated.
+- Import `ScrollView`, `SafeAreaView` and `KeyboardAvoidingView` from `@cdx-ui/components`, not from `react-native`.
+- Don't wrap Forge UI components with `withUniwind`; they already accept `className`.
+- Don't import from `@cdx-ui/primitives` or from deep paths inside a package. Only the public entry points are a stable API across releases.
+- Merge class names with `cn` from `@cdx-ui/utils`.
+
+## When the design needs something Forge UI doesn't ship
+
+1. Use the closest shipped variant, prop or composition.
+2. Leave a `TODO` comment that names what is missing, so the gap is easy to find later.
+3. Request it from the Forge UI team. Candescent teams use `#forge-design-system` on Slack. FI teams go through their Candescent contact.
+
+Don't override the component to close the gap. The override is the part that breaks for the next theme, in dark mode, and in the next release.
+
+## For AI coding agents
+
+Every page on this site is also available as markdown: add `/content.md` to the page URL. `/llms.txt` at the site root indexes every page that way, and `/llms-full.txt` holds them all in one file. Point your agent's instructions file (such as `AGENTS.md`, `CLAUDE.md` or a Cursor rule) at this page's `content.md` instead of copying the rules into it, so the agent picks up changes as Forge UI evolves.
+
+When generating or reviewing code:
+
+- Before writing a class on a Forge UI component, check the API table on that component's page for a prop that does the same job.
+- When a rule blocks the design, don't work around it. Apply the closest variant, leave the `TODO`, and tell the person you're working for what's missing.
+- Review your own output for these patterns before you finish:
+
+| Pattern                                                                                    | Fix                                                          |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------ |
+| `text-content-*`, `body-*` or `font-*` classes on `Text` or `Icon`                         | Use the `color`, `size` and `weight` props                   |
+| Padding, background, border, radius or height classes on a Forge UI component or its parts | Remove them. Use props, or move layout to a layout primitive |
+| `style={...}` on a Forge UI component                                                      | Remove it. Use props or placement classes                    |
+| Primitive tokens, hex or rgb values, `white`, `black`, or `[...]` values                   | Use a semantic token                                         |
+| `text-left` or `text-right`                                                                | Use `text-start` or `text-end`                               |
+| `View` imported from `react-native` or `@cdx-ui/components`                                | Use `Box`                                                    |
+| `ScrollView`, `SafeAreaView` or `KeyboardAvoidingView` imported from `react-native`        | Import it from `@cdx-ui/components`                          |
+| Imports from `@cdx-ui/primitives` or a deep package path                                   | Import from the package's public entry point                 |
+| `withUniwind` around a Forge UI component                                                  | Remove the wrapper                                           |
+| A dark section built from `bg-black` and `text-white`                                      | Use `ScopedTheme`                                            |
+| A default restated, such as `color="primary"` or `size-5` on `Icon`                        | Remove it                                                    |

package/docs/llms.txt

@@ -0,0 +1,195 @@
+# Forge UI
+
+> Forge UI is Candescent's cross-platform component library for digital banking apps. One React Native and React Native Web codebase targets iOS, Android and web, and each financial institution (FI) brand themes it through design tokens.
+
+Links point at each page's `content.md`, which carries the page's prose, demo source and generated prop tables. `design.md`, linked where a page has one, carries design guidance. Drop the `/content.md` suffix for the HTML page. [llms-full.txt](https://design.candescent.com/llms-full.txt) concatenates every page.
+
+- Install and configure Forge UI: [Installation](getting-started/developers/content.md)
+- How to style screens built with Forge UI: [Styling and customization](getting-started/developers/styling/content.md)
+
+## Docs
+
+- Getting Started
+  - [Getting Started](getting-started/content.md): Everything you need to start designing and building with Forge UI.
+  - [Designers](getting-started/designers/content.md): Start designing with our guidelines, best practices, and Figma libraries. Design guidance: [design.md](getting-started/designers/design.md)
+  - Developers: Install and configure Forge UI, then build screens that keep FI theming and dark mode working.
+    - [Installation](getting-started/developers/content.md): Install and configure Forge UI in an Expo, React Native, or Vite + React web project.
+    - [Styling and customization](getting-started/developers/styling/content.md): What to style on a screen built with Forge UI, and what to leave to the components so FI theming, dark mode and upgrades keep working.
+    - [Accessibility](getting-started/developers/accessibility/content.md): What Forge UI components handle for screen readers, keyboards and assistive technology, and what a screen built with them still has to provide.
+- Foundations
+  - [Foundations](foundations/content.md): The core principles, tokens, and shared visual language of the design system.
+
+  - **Styles**
+  - Tokens: Named design decisions for color, type, spacing, and more that keep every brand consistent.
+    - [What are tokens?](foundations/styles/tokens/what-are-tokens/content.md): Design tokens are the single source of truth for foundational design decisions. Design guidance: [design.md](foundations/styles/tokens/what-are-tokens/design.md)
+    - [All design tokens](foundations/styles/tokens/all-tokens/content.md): Design tokens are the single source of truth for foundational design decisions.
+
+  - **Expressions**
+  - [Icons](foundations/expressions/icons/content.md): Browse all available icons in the Forge UI icon library. Search, filter, and copy import statements.
+- Components
+  - [Components](components/content.md): Every component is built for the Votiv experience across web and mobile, on a common React Native architecture.
+
+  - **Action**
+  - [Button](components/button/content.md): A pressable action element for triggering events. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=119-72), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/actions-button--default) Design guidance: [design.md](components/button/design.md)
+  - [Icon Button](components/icon-button/content.md): A button that displays only an icon, used for compact actions where the icon clearly communicates intent. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-5235), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/actions-iconbutton--default) Design guidance: [design.md](components/icon-button/design.md)
+  - [Toggle Button](components/toggle-button/content.md): A button that stays pressed when selected, used standalone or in a group for single- or multiple-choice actions. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/actions-togglebutton--default)
+  - [Link](components/link/content.md): A link is interactive text that navigates to another location, either inside or outside the app. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=457-874), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/actions-link--open-in-new-tab) Design guidance: [design.md](components/link/design.md)
+  - [Quick Action Button](components/quick-action-button/content.md): A circular icon action with a supporting label for compact action groups. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5283-1723), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/actions-quickactionbutton--default) Design guidance: [design.md](components/quick-action-button/design.md)
+
+  - **Input & selection**
+  - [Checkbox](components/checkbox/content.md): A checkbox is an input control that allows the user to select multiple options from a set of options or a single yes/no option. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=366-383), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-checkbox--states) Design guidance: [design.md](components/checkbox/design.md)
+  - [Currency Input](components/currency-input/content.md): A calculator-style monetary input that formats digits as currency while the user types. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10803-8259), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-currencyinput--default)
+  - [Field](components/field/content.md): A form-control wrapper that coordinates labels, supporting text, validation messages, and shared state. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-field--default)
+  - [Form](components/form/content.md): A container that spaces related fields vertically and renders a form on web or a view on native.
+  - [Input Field](components/input/content.md): A single-line text entry with optional label, helper text, and adornments. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-input--default) Design guidance: [design.md](components/input/design.md)
+  - [Menu](components/menu/content.md): Menus present actions or selectable options in an anchored overlay or a standalone list surface. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7606-560), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-menu--default)
+  - [OTP Input Field](components/otp-input/content.md): A controlled multi-cell input for one-time passwords and verification codes. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5653-5035), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-otpinput--default)
+  - [Radio](components/radio/content.md): A radio group is an input control that allows the user to select a single option from a set of mutually exclusive options. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=2603-62), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-radio--default)
+  - [Range Calendar](components/range-calendar/content.md): A two-tap day grid for selecting a start and end date, with a continuous range band, month navigation, and a year picker. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12118-58084), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-rangecalendar--default)
+  - [Select](components/select/content.md): A form control that allows users to choose one option from a dropdown list. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-2296), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-select--default) Design guidance: [design.md](components/select/design.md)
+  - [Textarea](components/textarea/content.md): A multi-line text entry for longer free-form content. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7078-1235), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-textarea--default)
+  - [Slider](components/slider/content.md): A control for selecting a numeric value along a track. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11500-17763), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-slider--default)
+  - [Color Picker](components/color-picker/content.md): A compound color picker that coordinates an opaque color value with a trigger and popover. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorpicker--default)
+  - [Color Area](components/color-area/content.md): A two-dimensional control for selecting saturation and brightness in the HSB color space. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorarea--default)
+  - [Color Slider](components/color-slider/content.md): A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorslider--default)
+  - [Color Field](components/color-field/content.md): A text field for editing an opaque color or one RGB or HSL channel. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorfield--default)
+  - [Color Swatch](components/color-swatch/content.md): A presentational sample of an opaque color in configurable sizes and shapes. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatch--default)
+  - [Color Swatch Picker](components/color-swatch-picker/content.md): A radio-style compound for choosing from consumer-supplied color presets. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatchpicker--default)
+  - [Switch](components/switch/content.md): A toggle control that lets users turn a single option on or off. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=308-19827), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-switch--default) Design guidance: [design.md](components/switch/design.md)
+  - [Tile](components/tile/content.md): A composable, selectable card/row for pick-one or pick-many flows such as account pickers and category selectors. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8843-7101), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-tile--default)
+
+  - **Date & time**
+  - [Calendar](components/calendar/content.md): A single-date day grid for selecting a date, with month navigation and a year picker. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11954-3139), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-calendar--default)
+  - [Date Field](components/date-field/content.md): A segmented input for typing a date or a month, with values exchanged as DateId strings. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11787-9802), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-datefield--default)
+  - [Date Picker](components/date-picker/content.md): A compound date picker pairing a segmented date field with a calendar in a popover, dialog, bottom sheet, or inline surface. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12349-9879), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-datepicker--standalone)
+  - [Date Range Picker](components/date-range-picker/content.md): A compound date range picker pairing dual segmented date fields with a range calendar in a popover, dialog, bottom sheet, or inline surface. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12449-28564), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-daterangepicker--standalone)
+  - [Date Time Field](components/date-time-field/content.md): A segmented input for typing a date and time together, with values exchanged as DateTimeId strings. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11787-10754)
+  - [Date Time List](components/date-time-list/content.md): A scroll-wheel picker for choosing a date and time across separate columns, with values exchanged as DateTimeId strings.
+  - [Date Time Picker](components/date-time-picker/content.md): A compound date and time picker pairing a segmented field with scroll-wheel columns in a popover, dialog, or bottom sheet. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-datetimepicker--dialog)
+  - [Month Calendar](components/month-calendar/content.md): A month and year grid for selecting a single month, with a year picker and year navigation. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12010-27571), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-monthcalendar--default)
+  - [Month Picker](components/month-picker/content.md): A compound month picker pairing a segmented date field in month mode with a month calendar in a popover, dialog, bottom sheet, or inline surface. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-monthpicker--standalone)
+
+  - **Indicators & status**
+  - [Badge](components/badge/content.md): A small status annotation that wraps a child control and positions an indicator at a corner. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=6894-409), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-badge--default)
+  - [Chip](components/chip/content.md): Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=444-13403), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-chip--default) Design guidance: [design.md](components/chip/design.md)
+  - [Progress Bar](components/progress-bar/content.md): A continuous progress bar that visualizes determinate or indeterminate progress with a compound track and indicator. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=4927-541), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-progressbar--default)
+  - [Progress Circle](components/progress-circle/content.md): A circular progress indicator that visualizes determinate or indeterminate progress with a compound ring and indicator. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=2616-182), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-progresscircle--default)
+  - [Progress Segmented](components/progress-segmented/content.md): A segmented progress bar that visualizes step-by-step completion as a row of discrete segments. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-progresssegmented--default)
+  - [Skeleton](components/skeleton/content.md): A pulsing loading placeholder shaped via className — no intrinsic size, layout preserved while content loads. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11476-16576), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-skeleton--default)
+
+  - **Content display**
+  - [Accordion](components/accordion/content.md): A vertically stacked set of disclosure items for showing and hiding related content. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=11210-5320), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-accordion--default)
+  - [Avatar](components/avatar/content.md): A visual representation of a user or entity, displayed as an image, initials, or fallback icon. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=449-377), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-avatar--default) Design guidance: [design.md](components/avatar/design.md)
+  - [Carousel](components/carousel/content.md): A swipeable, paginated carousel for promotional banners, onboarding, and card browsing. Wraps react-native-reanimated-carousel with token-styled Pagination and Prev/Next nav button compounds plus useCarousel hook. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11619-607), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-carousel--default)
+  - [Divider](components/divider/content.md): A horizontal or vertical separator for grouping related content, with an optional inline label. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=6771-8895), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-divider--default)
+  - [FDIC Digital Sign](components/insurance-disclosure/content.md): Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8550-3291), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/domain-insurancedisclosure--default)
+  - [Icon](components/icon/content.md): A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=397-33), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-icon--default)
+  - [Image](components/image/content.md): Displays local or remote images across native and web platforms. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=9091-16186), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-image--default)
+  - [List Item](components/list-item/content.md): A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=3710-4649), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-listitem--default)
+  - [Reorderable List](components/reorderable-list/content.md): A short, mount-all list that lets members drag rows into a new order via an explicit handle. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-reorderablelist--default)
+  - [Virtualized List](components/virtualized-list/content.md): A performant virtualized list for large datasets — only visible rows mount at a time. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=4040-4933), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-virtualizedlist--large-data-set)
+  - [Text](components/text/content.md): Body text with a responsive, token-based typography scale. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=400-3), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-text--default)
+  - [Heading](components/heading/content.md): Semantic heading text with an accessible, token-based typography scale. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=399-3385), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-heading--default)
+
+  - **Feedback**
+  - [Alert](components/alert/content.md): An inline severity banner that renders contextual feedback — danger, warning, success, or info — with an optional title, body, and trailing actions. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=6665-19536), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-alert--default)
+  - [Alert Dialog](components/alert-dialog/content.md): A modal confirmation for destructive or important actions that requires an explicit response. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=4428-496), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-alertdialog--default)
+  - [Dialog](components/dialog/content.md): A modal overlay that interrupts the user with critical information or decisions requiring immediate attention. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=4331-429), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-dialog--default) Design guidance: [design.md](components/dialog/design.md)
+  - [Full Screen Dialog](components/full-screen-dialog/content.md): A modal page that covers the viewport with a back, title, and close header for single-step or multi-step tasks. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-fullscreendialog--default)
+  - [Tooltip](components/tooltip/content.md): A contextual hint overlay anchored to a trigger element. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12996-1099), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-tooltip--default)
+  - [Toast](components/toast/content.md): A brief notification that confirms an action or reports a background result without interrupting the current task. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5170-8043), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/feedback-toast--default)
+
+  - **Surfaces & layout**
+  - [Bottom Sheet](components/bottom-sheet/content.md): A surface that slides up from the bottom of the screen to present secondary tasks without leaving the current context. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=3187-706), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-bottomsheet--default) Design guidance: [design.md](components/bottom-sheet/design.md)
+  - [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)
+  - [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)
+
+  - **Navigation**
+  - [Breadcrumbs](components/breadcrumbs/content.md): A navigation trail that shows the current page within a hierarchy. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/navigation-breadcrumbs--default)
+  - [Tabs](components/tabs/content.md): A set of layered sections that displays one content panel at a time. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10266-3192), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/navigation-tabs--default)
+
+  - **Data & tables**
+  - [Data Grid](components/data-grid/content.md): A web data grid with rows, columns, sort, filters, selection, and pagination. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/data-visualization-datagrid--default)
+  - [Table](components/table/content.md): A presentational compound table for displaying tabular data with consistent Forge styling. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/data-visualization-table--default)
+  - [Table Pagination](components/table-pagination/content.md): A compound pager for moving between pages of a list or table. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/navigation-tablepagination--default)
+- Patterns
+  - [Patterns](patterns/content.md): Reusable combinations of components that address common user experiences. Browse by category to find a ready-to-use pattern.
+  - [Authentication](patterns/authentication/content.md): Login, signup, OTP verification, and biometric authentication screens.
+  - [Account Management](patterns/account-management/content.md): Account summaries, detail headers, and account-level actions.
+  - [Payments](patterns/payments/content.md): Transfers, bill pay, quick actions, and payment confirmation flows.
+  - [Onboarding](patterns/onboarding/content.md): Welcome screens, setup wizards, and guided first-run experiences.
+  - [Settings](patterns/settings/content.md): User preferences, notification controls, and account settings.
+  - [Dashboard](patterns/dashboard/content.md): Home screens, greetings, summaries, and at-a-glance views.
+  - [Forms](patterns/forms/content.md): Data entry patterns for personal info, addresses, and profile editing.
+  - [Empty States](patterns/empty-states/content.md): Placeholder screens shown when content is not yet available.
+- Resources
+  - [Resources](resources/content.md): Release notes and other reference material for working with Forge UI.
+
+  - **Tools**
+  - [Figma libraries](resources/figma-libraries/content.md): Access our official design system Figma libraries
+
+  - **Changelogs**
+  - Release notes
+    - [Release notes](resources/release-notes/content.md): What changed in every published version of the Forge UI packages.
+
+## Release notes
+
+- [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.
+- [0.2.3](resources/release-notes/0.2.3/content.md): ReorderableList brings drag-and-drop list reordering on web and native; Tile flat rows show the selected background again.
+- [0.2.2](resources/release-notes/0.2.2/content.md): Fixes web Text layout in production, Button solid edges on native, and Field required labels on web.
+- [0.2.1](resources/release-notes/0.2.1/content.md): Calendar and DatePicker add isDateUnavailable and shared typed-entry validation integrated with Field and @cdx-ui/formatters.
+- [0.2.0](resources/release-notes/0.2.0/content.md): Native font embedding and per-face utilities removed; adds color picker family, semantic Text/Icon colors, and ToggleButton.Group compound API.
+- [0.1.6](resources/release-notes/0.1.6/content.md): Adds ToggleButton and ToggleButtonGroup for persistent pressed states and single- or multi-select toolbar controls on web and native.
+- [0.1.5](resources/release-notes/0.1.5/content.md): Figma Code Connect templates now cover Switch, progress, tabs, tiles, dates, toasts, sliders, and other components for Dev Mode snippets.
+- [0.1.4](resources/release-notes/0.1.4/content.md): Per-face font utilities are removed on web—use typography composites with font-weight. Adds Drawer, Menu filter rows, Avatar variants, and banking icons.
+- [0.1.2](resources/release-notes/0.1.2/content.md): Radio supports a read-only state for showing a selected option without allowing changes.
+- [0.1.1](resources/release-notes/0.1.1/content.md): Forge UI moves from 0.0.1-beta.188 to 0.1.1 on the 0.x line; update every @cdx-ui/* package to the new version together.
+- [0.0.1-beta.187](resources/release-notes/0.0.1-beta.187/content.md): Adds @cdx-ui/data-grid for web tabular data, plus Table and TablePagination components for data-heavy screens.
+- [0.0.1-beta.185](resources/release-notes/0.0.1-beta.185/content.md): New Table compound component for presenting tabular data with header, body, footer, and cell sub-components on web and native.
+- [0.0.1-beta.182](resources/release-notes/0.0.1-beta.182/content.md): CurrencyInput now accepts returnKeyType to control the keyboard return key on mobile.
+- [0.0.1-beta.179](resources/release-notes/0.0.1-beta.179/content.md): Theme customization now uses explicit ThemeOverride inputs, selections, and token overrides instead of bundled preset themes.
+- [0.0.1-beta.176](resources/release-notes/0.0.1-beta.176/content.md): Finalizes Accordion composition with a single Content slot and fixes Form web data-attribute warnings and Accordion focus rings.
+- [0.0.1-beta.174](resources/release-notes/0.0.1-beta.174/content.md): Icons and checkbox selection groups no longer trigger web accessibility console warnings.
+- [0.0.1-beta.173](resources/release-notes/0.0.1-beta.173/content.md): Theme editor adopts Forge UI instead of MUI, Select shares Menu surface behavior, and ForgeDesignProvider no longer loops on safe-area updates.
+- [0.0.1-beta.172](resources/release-notes/0.0.1-beta.172/content.md): Adds Accordion for expandable single- or multi-select disclosure sections with compound trigger and content slots.
+- [0.0.1-beta.171](resources/release-notes/0.0.1-beta.171/content.md): Slider supports two-thumb range selection with array value, per-thumb labels, and vertical orientation.
+- [0.0.1-beta.169](resources/release-notes/0.0.1-beta.169/content.md): @cdx-ui/styles adds MUI and CDS CSS bridges and a ./theming entry point so Forge UI and MUI can share FI theme overrides.
+- [0.0.1-beta.168](resources/release-notes/0.0.1-beta.168/content.md): ProgressSegmented removes the deprecated total prop; use segments to set the segment count.
+- [0.0.1-beta.167](resources/release-notes/0.0.1-beta.167/content.md): Select.Content adds placement, offset, and crossOffset props to reposition dropdown overlays, with improved anchored overlay positioning near viewport edges.
+- [0.0.1-beta.166](resources/release-notes/0.0.1-beta.166/content.md): Theme overrides expand through a catalog-driven model in @cdx-ui/styles, with Theme Editor persistence fixes and a Chip font token correction.
+- [0.0.1-beta.164](resources/release-notes/0.0.1-beta.164/content.md): The deprecated Button strong variant is removed; replace it with solid before upgrading.
+- [0.0.1-beta.163](resources/release-notes/0.0.1-beta.163/content.md): Button hover and pressed states now use the correct surface design tokens.
+- [0.0.1-beta.161](resources/release-notes/0.0.1-beta.161/content.md): Style Dictionary updates to v5 for a security fix in @cdx-ui/styles token generation.
+- [0.0.1-beta.160](resources/release-notes/0.0.1-beta.160/content.md): Menu adds anchored overlay lists for actions and selections, with checkbox, radio, and placement options.
+- [0.0.1-beta.159](resources/release-notes/0.0.1-beta.159/content.md): Palette generation uses OKLCH with designer contrast ratios; theme override types and getting-started guidance are updated.
+- [0.0.1-beta.158](resources/release-notes/0.0.1-beta.158/content.md): Theme overrides resolve DTCG token-reference aliases at runtime, and Theme Editor preserves custom override fields on round-trip.
+- [0.0.1-beta.156](resources/release-notes/0.0.1-beta.156/content.md): BottomSheet now scrolls correctly on Android when content includes a VirtualizedList.
+- [0.0.1-beta.154](resources/release-notes/0.0.1-beta.154/content.md): Adds @cdx-ui/native for Expo font loading and Metro config; useForgeFonts and withForgeMetroConfig move out of @cdx-ui/styles and @cdx-ui/components.
+- [0.0.1-beta.152](resources/release-notes/0.0.1-beta.152/content.md): Radio draws the focus ring on the indicator only, suppressing the browser default outline around the entire control.
+- [0.0.1-beta.150](resources/release-notes/0.0.1-beta.150/content.md): Dialog and Alert render above Bottom Sheet overlays, fixing stacked modal layering.
+- [0.0.1-beta.149](resources/release-notes/0.0.1-beta.149/content.md): Sparkle custom icon joins @cdx-ui/icons with outlined and filled variants.
+- [0.0.1-beta.147](resources/release-notes/0.0.1-beta.147/content.md): Design token values update for poise, prestige, and pulse presets — review theme overrides if you customize specific tokens.
+- [0.0.1-beta.145](resources/release-notes/0.0.1-beta.145/content.md): Adds Tooltip for short contextual hints with hover, focus, and click triggers, placement control, and an optional arrow on web and native.
+- [0.0.1-beta.144](resources/release-notes/0.0.1-beta.144/content.md): Checkbox isReadOnly now renders with correct read-only styling so the control displays its state without allowing interaction.
+- [0.0.1-beta.143](resources/release-notes/0.0.1-beta.143/content.md): ProgressCircle adds a circular progress indicator with determinate values, indeterminate loading, and small or large sizes.
+- [0.0.1-beta.142](resources/release-notes/0.0.1-beta.142/content.md): Checkbox and Radio keyboard navigation on web keeps tab order through disabled items and focuses the selected radio.
+- [0.0.1-beta.141](resources/release-notes/0.0.1-beta.141/content.md): Date and time pickers join Forge UI with DatePicker, DateRangePicker, DateTimePicker, MonthPicker, and a new @cdx-ui/formatters package.
+- [0.0.1-beta.140](resources/release-notes/0.0.1-beta.140/content.md): @cdx-ui/utils re-exports cva and VariantProps; Select documentation consolidates on the docs site with live demos.
+- [0.0.1-beta.139](resources/release-notes/0.0.1-beta.139/content.md): Carousel adds PrevButton and NextButton for ghost icon prev/next navigation, nested in Carousel or composed via useCarousel().
+- [0.0.1-beta.138](resources/release-notes/0.0.1-beta.138/content.md): WhatsApp icon is themeable again after reverting a premature fixed-color brand-icon carve-out and package license files.
+- [0.0.1-beta.137](resources/release-notes/0.0.1-beta.137/content.md): Tabs indicator animation now completes in 150ms for snappier tab switching.
+- [0.0.1-beta.136](resources/release-notes/0.0.1-beta.136/content.md): Font overrides applied with applyThemeOverride now persist inside ScopedTheme scopes instead of being shadowed.
+- [0.0.1-beta.134](resources/release-notes/0.0.1-beta.134/content.md): Published @cdx-ui packages declare MIT license metadata; versions published before this release are unchanged.
+- [0.0.1-beta.133](resources/release-notes/0.0.1-beta.133/content.md): Button asChild no longer overrides child role and event handlers when composing with Link or other interactive elements.
+- [0.0.1-beta.130](resources/release-notes/0.0.1-beta.130/content.md): Import ForgeDesignProvider directly from @cdx-ui/components.
+- [0.0.1-beta.129](resources/release-notes/0.0.1-beta.129/content.md): Tabs and Breadcrumbs documentation ships; Tabs.Tab interaction props are now internal-only.
+- [0.0.1-beta.128](resources/release-notes/0.0.1-beta.128/content.md): Design token values update from the design system source for poise, prestige, and pulse presets.
+- [0.0.1-beta.127](resources/release-notes/0.0.1-beta.127/content.md): Internal release — docs demo drift guard and a CI coverage-threshold gate.
+- [0.0.1-beta.126](resources/release-notes/0.0.1-beta.126/content.md): ThemeEditor no longer fires onChange on mount before the user edits a control.
+- [0.0.1-beta.124](resources/release-notes/0.0.1-beta.124/content.md): Breadcrumbs joins the component set for hierarchical navigation trails.
+- [0.0.1-beta.122](resources/release-notes/0.0.1-beta.122/content.md): Tabs arrives with a scroll-shadow affordance for overflowing tab strips.
+- [0.0.1-beta.118](resources/release-notes/0.0.1-beta.118/content.md): Color and variant props are standardised across components; tint and default are renamed.

package/docs/patterns/account-management/content.md

@@ -0,0 +1,75 @@
+# Account Management (https://design.candescent.com/docs/patterns/account-management)
+
+## Account List Card
+
+Accounts grouped by type under a gradient section header, with balances, a status chip, and a payment action.
+
+**Platforms:** iOS, Android, Web
+
+```tsx
+import { Button, Card, Chip, HStack, ListItem, Text } from '@cdx-ui/components';
+
+const accounts = [
+  {
+    name: 'Visa Platinum Plus',
+    last4: '0275',
+    balance: '$9,834.67',
+    balanceLabel: 'Outstanding balance',
+  },
+  {
+    name: 'Auto loan',
+    last4: '0865',
+    balance: '$15,620.11',
+    balanceLabel: 'Outstanding balance',
+    status: { label: 'Payment overdue', tone: 'danger' },
+  },
+] as const;
+
+export default function AccountListCardBlock() {
+  return (
+    <Card fullBleed className="w-full max-w-md">
+      <Card.Content>
+        <ListItem.SectionHeader variant="gradient" showDivider={false}>
+          Credit &amp; loans
+        </ListItem.SectionHeader>
+        {accounts.map((account, index) => (
+          <ListItem
+            key={account.last4}
+            crossAlign="start"
+            showSeparator={index < accounts.length - 1}
+            onPress={() => {}}
+          >
+            <ListItem.Content>
+              <HStack space="sm" className="items-baseline">
+                <ListItem.Title>{account.name}</ListItem.Title>
+                <Text size="sm" color="secondary">
+                  •••{account.last4}
+                </Text>
+              </HStack>
+              <Text size="xl" weight="semibold">
+                {account.balance}
+              </Text>
+              <ListItem.Description>{account.balanceLabel}</ListItem.Description>
+              {'status' in account ? (
+                <Chip
+                  variant="subtle"
+                  size="small"
+                  color={account.status.tone}
+                  className="mt-1 self-start"
+                >
+                  <Chip.Label>{account.status.label}</Chip.Label>
+                </Chip>
+              ) : null}
+            </ListItem.Content>
+          </ListItem>
+        ))}
+      </Card.Content>
+      <Card.Footer>
+        <Button variant="outline" color="action" fullWidth onPress={() => {}}>
+          <Button.Label>Pay due bills</Button.Label>
+        </Button>
+      </Card.Footer>
+    </Card>
+  );
+}
+```

package/docs/patterns/authentication/content.md

@@ -0,0 +1,50 @@
+# Authentication (https://design.candescent.com/docs/patterns/authentication)
+
+## Simple Login
+
+A minimal login form with username, password, and a forgot-password link.
+
+**Platforms:** iOS, Android, Web
+
+```tsx
+import { Button, Card, Field, Heading, Input, Link, Text, VStack } from '@cdx-ui/components';
+
+export default function LoginSimpleBlock() {
+  return (
+    <Card className="w-full max-w-sm">
+      <Card.Header>
+        <VStack space="sm" className="items-center">
+          <Heading>Sign in</Heading>
+          <Text color="secondary">Enter your credentials to access your account</Text>
+        </VStack>
+      </Card.Header>
+      <Card.Content>
+        <VStack space="lg">
+          <Field>
+            <Field.Label>Username</Field.Label>
+            <Input>
+              <Input.Field placeholder="Enter your username" />
+            </Input>
+          </Field>
+          <Field>
+            <Field.Label>Password</Field.Label>
+            <Input>
+              <Input.Field placeholder="Enter your password" secureTextEntry />
+            </Input>
+          </Field>
+          <Button fullWidth>
+            <Button.Label>Sign In</Button.Label>
+          </Button>
+        </VStack>
+      </Card.Content>
+      <Card.Footer>
+        <VStack space="sm" className="items-center">
+          <Link>
+            <Link.Label>Forgot password?</Link.Label>
+          </Link>
+        </VStack>
+      </Card.Footer>
+    </Card>
+  );
+}
+```

package/docs/patterns/content.md

@@ -0,0 +1,10 @@
+# Patterns (https://design.candescent.com/docs/patterns)
+
+- [Authentication](https://design.candescent.com/docs/patterns/authentication/content.md) — Login, signup, OTP verification, and biometric authentication screens.
+- [Account Management](https://design.candescent.com/docs/patterns/account-management/content.md) — Account summaries, detail headers, and account-level actions.
+- [Payments](https://design.candescent.com/docs/patterns/payments/content.md) — Transfers, bill pay, quick actions, and payment confirmation flows.
+- [Onboarding](https://design.candescent.com/docs/patterns/onboarding/content.md) — Welcome screens, setup wizards, and guided first-run experiences.
+- [Settings](https://design.candescent.com/docs/patterns/settings/content.md) — User preferences, notification controls, and account settings.
+- [Dashboard](https://design.candescent.com/docs/patterns/dashboard/content.md) — Home screens, greetings, summaries, and at-a-glance views.
+- [Forms](https://design.candescent.com/docs/patterns/forms/content.md) — Data entry patterns for personal info, addresses, and profile editing.
+- [Empty States](https://design.candescent.com/docs/patterns/empty-states/content.md) — Placeholder screens shown when content is not yet available.

package/docs/patterns/dashboard/content.md

@@ -0,0 +1,34 @@
+# Dashboard (https://design.candescent.com/docs/patterns/dashboard)
+
+## Dashboard Greeting
+
+A personalized greeting header with search, notifications, and avatar.
+
+**Platforms:** iOS, Android
+
+```tsx
+import { Avatar, Badge, Heading, HStack, IconButton, Text, VStack } from '@cdx-ui/components';
+import { Notifications, Search } from '@cdx-ui/icons';
+
+export default function DashboardGreetingBlock() {
+  return (
+    <HStack className="w-full max-w-md items-center justify-between py-4 px-4">
+      <VStack space="xs">
+        <Text size="sm" color="secondary">
+          Good morning,
+        </Text>
+        <Heading>Bernadette</Heading>
+      </VStack>
+      <HStack space="sm" className="items-center">
+        <IconButton as={Search} accessibilityLabel="Search" />
+        <Badge label={3} color="danger" overlap="circular" accessibilityLabel="3 notifications">
+          <IconButton as={Notifications} accessibilityLabel="Notifications" />
+        </Badge>
+        <Avatar size="lg">
+          <Avatar.Text>Bernadette Miller</Avatar.Text>
+        </Avatar>
+      </HStack>
+    </HStack>
+  );
+}
+```