@cdx-ui/components 0.3.6 → 0.3.8

package/docs/components/currency-input/content.md

@@ -129,32 +129,72 @@ export default function CurrencyInputCustomSymbolDemo() {
 
 ## States
 
-The root controls disabled, read-only, required, and invalid state for the field.
+The root controls disabled, read-only, required, and invalid state for the field. Disabled, read-only, and invalid apply to both `ghost` and `outline`.
 
 ```tsx
-import { Box, CurrencyInput, Text } from '@cdx-ui/components';
+import { Box, CurrencyInput, Text, type CurrencyInputProps } from '@cdx-ui/components';
+
+const variants = ['ghost', 'outline'] as const satisfies readonly NonNullable<
+  CurrencyInputProps['variant']
+>[];
+
+const states = [
+  { label: 'Disabled', value: 1200, isDisabled: true },
+  { label: 'Read-only', value: 4890, isReadOnly: true },
+  { label: 'Invalid', value: 0, isInvalid: true },
+] as const satisfies readonly {
+  label: string;
+  value: number;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+}[];
+
+function StateRow({
+  variant,
+  label,
+  value,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+}: {
+  variant: NonNullable<CurrencyInputProps['variant']>;
+  label: string;
+  value: number;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+}) {
+  return (
+    <Box className="gap-2">
+      <Text size="sm" color="secondary">
+        {label}
+      </Text>
+      <CurrencyInput
+        accessibilityLabel={`${label} ${variant} transfer amount`}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        variant={variant}
+        value={value}
+      />
+    </Box>
+  );
+}
 
 export default function CurrencyInputStatesDemo() {
   return (
-    <Box className="w-full gap-4">
-      <Box className="gap-2">
-        <Text size="sm" color="secondary">
-          Disabled
-        </Text>
-        <CurrencyInput accessibilityLabel="Disabled transfer amount" isDisabled value={1200} />
-      </Box>
-      <Box className="gap-2">
-        <Text size="sm" color="secondary">
-          Read-only
-        </Text>
-        <CurrencyInput accessibilityLabel="Read-only transfer amount" isReadOnly value={4890} />
-      </Box>
-      <Box className="gap-2">
-        <Text size="sm" color="secondary">
-          Invalid
-        </Text>
-        <CurrencyInput accessibilityLabel="Invalid transfer amount" isInvalid value={0} />
-      </Box>
+    <Box className="w-full gap-6">
+      {variants.map((variant) => (
+        <Box key={variant} className="gap-4">
+          <Text size="sm" color="secondary">
+            {variant}
+          </Text>
+          {states.map((state) => (
+            <StateRow key={state.label} variant={variant} {...state} />
+          ))}
+        </Box>
+      ))}
     </Box>
   );
 }
@@ -200,60 +240,138 @@ export default function CurrencyInputWithFieldDemo() {
 }
 ```
 
-## With field and validation
+## In card
 
-Set invalid state on both `Field` and `CurrencyInput` so the error message and amount styling stay in sync.
+Stack the label above the amount. Align `Field.Label` to the start, and set `align="end"` on `CurrencyInput`.
 
 ```tsx
-import { useState } from 'react';
-import { CurrencyInput, Field } from '@cdx-ui/components';
-
-const DAILY_LIMIT = 1200;
-
-export default function CurrencyInputOutlineWithFieldInvalidDemo() {
-  const [amount, setAmount] = useState(1500);
-  const isInvalid = amount > DAILY_LIMIT;
+import { Card, CurrencyInput, Field } from '@cdx-ui/components';
 
+export default function CurrencyInputInCardDemo() {
   return (
-    <Field className="w-full" isRequired isInvalid={isInvalid}>
-      <Field.Label>Amount</Field.Label>
-      <CurrencyInput
-        isInvalid={isInvalid}
-        isRequired
-        variant="outline"
-        value={amount}
-        onChangeValue={setAmount}
-      />
-      <Field.Error>Amount exceeds your daily limit.</Field.Error>
-    </Field>
+    <Card className="w-full max-w-md">
+      <Card.Content>
+        <Field className="w-full">
+          <Field.Label className="self-start">Available balance</Field.Label>
+          <CurrencyInput align="end" isReadOnly size="small" value={4250.18} />
+        </Field>
+      </Card.Content>
+    </Card>
   );
 }
 ```
 
-The same validation in the `ghost` pattern, with a centered label and error.
+## With field and validation
+
+Set disabled, read-only, and invalid on both `Field` and `CurrencyInput` so the label, message, and amount styling stay in sync. Keep the `outline` label and error aligned to the start. For `ghost`, center the label and error and use `size="small"`.
 
 ```tsx
 import { useState } from 'react';
-import { CurrencyInput, Field } from '@cdx-ui/components';
+import { Box, CurrencyInput, Field, Text } from '@cdx-ui/components';
 
 const DAILY_LIMIT = 1200;
 
-export default function CurrencyInputWithFieldInvalidDemo() {
+function OutlineFields() {
   const [amount, setAmount] = useState(1500);
   const isInvalid = amount > DAILY_LIMIT;
 
   return (
-    <Field className="w-full" isRequired isInvalid={isInvalid}>
-      <Field.Label className="text-center">Amount</Field.Label>
-      <CurrencyInput
-        isInvalid={isInvalid}
-        isRequired
-        size="small"
-        value={amount}
-        onChangeValue={setAmount}
-      />
-      <Field.Error className="justify-center">Amount exceeds your daily limit.</Field.Error>
-    </Field>
+    <Box className="w-full gap-4">
+      <Text size="sm" color="secondary">
+        outline
+      </Text>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Disabled
+        </Text>
+        <Field className="w-full" isDisabled>
+          <Field.Label>Amount</Field.Label>
+          <CurrencyInput isDisabled variant="outline" value={1200} />
+        </Field>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Read-only
+        </Text>
+        <Field className="w-full" isReadOnly>
+          <Field.Label>Amount</Field.Label>
+          <CurrencyInput isReadOnly variant="outline" value={4890} />
+        </Field>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Invalid
+        </Text>
+        <Field className="w-full" isRequired isInvalid={isInvalid}>
+          <Field.Label>Amount</Field.Label>
+          <CurrencyInput
+            isInvalid={isInvalid}
+            isRequired
+            variant="outline"
+            value={amount}
+            onChangeValue={setAmount}
+          />
+          <Field.Error>Amount exceeds your daily limit.</Field.Error>
+        </Field>
+      </Box>
+    </Box>
+  );
+}
+
+function GhostFields() {
+  const [amount, setAmount] = useState(1500);
+  const isInvalid = amount > DAILY_LIMIT;
+
+  return (
+    <Box className="w-full gap-4">
+      <Text size="sm" color="secondary">
+        ghost
+      </Text>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Disabled
+        </Text>
+        <Field className="w-full" isDisabled>
+          <Field.Label className="text-center">Amount</Field.Label>
+          <CurrencyInput isDisabled size="small" variant="ghost" value={1200} />
+        </Field>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Read-only
+        </Text>
+        <Field className="w-full" isReadOnly>
+          <Field.Label className="text-center">Amount</Field.Label>
+          <CurrencyInput isReadOnly size="small" variant="ghost" value={4890} />
+        </Field>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Invalid
+        </Text>
+        <Field className="w-full" isRequired isInvalid={isInvalid}>
+          <Field.Label className="text-center">Amount</Field.Label>
+          <CurrencyInput
+            isInvalid={isInvalid}
+            isRequired
+            size="small"
+            variant="ghost"
+            value={amount}
+            onChangeValue={setAmount}
+          />
+          <Field.Error className="justify-center">Amount exceeds your daily limit.</Field.Error>
+        </Field>
+      </Box>
+    </Box>
+  );
+}
+
+export default function CurrencyInputOutlineWithFieldInvalidDemo() {
+  return (
+    <Box className="w-full gap-6">
+      <OutlineFields />
+      <GhostFields />
+    </Box>
   );
 }
 ```
@@ -278,6 +396,7 @@ Controlled calculator-style monetary entry. The numeric `value` is expressed in
 | `isFullWidth?` | `boolean` | — | If true, the input element will span the full width of its parent. |
 | `variant?` | `'ghost' \| 'outline'` | `'ghost'` | Visual style. `ghost` is the large, centered, borderless amount entry; `outline` renders the bordered `Input` shell with a leading currency-symbol prefix, for amounts that sit alongside other form fields. |
 | `size?` | `'default' \| 'small'` | `'default'` | Height, padding, and text size. |
+| `align?` | `'center' \| 'end'` | — | Horizontal alignment of the amount. Defaults to `center` on `ghost`. On `outline`, the amount stays at the start of the field until `align` is set. |
 
 Supports `accessibilityLabel`, `accessibilityHint`, `testID`, `onFocus`, `onBlur`, and `returnKeyType` from [`TextInputProps`](https://reactnative.dev/docs/textinput#props). `style` applies to the root container, and the forwarded ref targets the underlying `TextInput`.
 

package/docs/components/data-grid/content.md

@@ -2,7 +2,7 @@
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/data-visualization-datagrid--default)
 
-`DataGrid` is a **web-only** data-driven grid. Install `@cdx-ui/data-grid` in addition to `@cdx-ui/components`. For fully custom markup use `Table`. For a standalone pager use `TablePagination`.
+`DataGrid` is a **web-only** data-driven grid. Install `@cdx-ui/data-grid` in addition to `@cdx-ui/components`, and add `@import '@cdx-ui/data-grid/styles.css';` after `@cdx-ui/components/styles.css` in your Tailwind CSS entry; without it the grid renders without its border, header background, or row dividers. For fully custom markup use `Table`. For a standalone pager use `TablePagination`.
 
 ```tsx
 import {
@@ -26,6 +26,8 @@ Search is **not** always on. Set `showToolbar` to show the search field (same op
 
 The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with a `className` such as `h-full` or a spacing-scale height (`h-130`).
 
+Set `autoHeight` to size the grid to its rows instead, so a short table leaves no empty space below the last row. The grid then grows with every row on the page, so pair it with pagination for long data. The empty state keeps a minimum height.
+
 When `rows` is empty, a centered "No rows" message is shown and pagination is omitted. Pass `noRowsOverlay` to replace the default message.
 
 ```tsx

package/docs/components/icon/content.md

@@ -180,7 +180,7 @@ Inherits all `ForgeIconProps` except the SVG `color`: [`SvgProps`](https://githu
 - A raw `color` value, such as a hex string, is deprecated. It is passed to the SVG unchanged and logs a one-time warning in development. Use a semantic color instead.
 - `className` defaults to `size-5 shrink-0`, so an icon keeps its size in a row of text on web.
 - Consumer classes are merged after the defaults, so `size-*` and `shrink` utilities override them.
-- Don't pass the inherited numeric `size` prop; it bypasses the spacing scale. Use `size-4` or `size-6` when the default doesn't fit.
+- Don't pass the inherited numeric `size` prop; it bypasses the spacing scale. Use another `size-*` class on the spacing scale when the default doesn't fit.
 - `filled` defaults to `false`.
 
 ## Accessibility

package/docs/components/input/content.md

@@ -346,6 +346,7 @@ Renders a Forge icon sized to the input. Inherits size from the parent Input con
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | Utility classes for size (`size-*`) and placement, merged after the defaults. |
+| `children?` | `ReactNode` | — | The element rendered when `asChild` is set. |
 | `filled?` | `boolean` | — | When `true`, renders the filled variant of the icon (if available). Defaults to `false` (outlined). |
 | `size?` | `string \| number` | — | Width and height of the icon, in pixels or any SVG length. The bare icon renders at 24 when omitted. |
 | `data-testid?` | `string` | — | Test identifier forwarded to the rendered SVG. |

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

@@ -47,6 +47,165 @@ export default function ProgressBarValuesDemo() {
 }
 ```
 
+## Sizes
+
+`default` is 6px tall; `large` is 8px. Size is set on the root and applied to the track.
+
+```tsx
+import { Box, ProgressBar, Text } from '@cdx-ui/components';
+
+export default function ProgressBarSizesDemo() {
+  return (
+    <Box className="w-full max-w-md gap-4">
+      <Box className="gap-1.5">
+        <Text size="sm" color="secondary">
+          default
+        </Text>
+        <ProgressBar value={60} max={100} size="default" accessibilityLabel="Default size progress">
+          <ProgressBar.Indicator />
+        </ProgressBar>
+      </Box>
+      <Box className="gap-1.5">
+        <Text size="sm" color="secondary">
+          large
+        </Text>
+        <ProgressBar value={60} max={100} size="large" accessibilityLabel="Large size progress">
+          <ProgressBar.Indicator />
+        </ProgressBar>
+      </Box>
+    </Box>
+  );
+}
+```
+
+## Colors
+
+Severity colors use `surface-*-strong` fills. Categorical colors use `chart-categorical-*` so FI theme overrides flow through without a component change. The track is always `surface-neutral-subtle`.
+
+```tsx
+import { Box, ProgressBar, Text, type ProgressBarColor } from '@cdx-ui/components';
+
+const COLORS: readonly ProgressBarColor[] = [
+  'action',
+  'danger',
+  'warning',
+  'success',
+  'info',
+  'categorical-1',
+  'categorical-2',
+  'categorical-3',
+  'categorical-4',
+  'categorical-5',
+  'categorical-6',
+];
+
+export default function ProgressBarColorsDemo() {
+  return (
+    <Box className="w-full max-w-md gap-3">
+      {COLORS.map((color) => (
+        <Box key={color} className="gap-1.5">
+          <Text size="sm" color="secondary">
+            {color}
+          </Text>
+          <ProgressBar value={65} max={100} color={color} accessibilityLabel={`${color} progress`}>
+            <ProgressBar.Indicator />
+          </ProgressBar>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+```
+
+## Indeterminate
+
+Pass `value={null}` for a segment that passes across the track until a value is known.
+
+```tsx
+import { ProgressBar } from '@cdx-ui/components';
+
+export default function ProgressBarIndeterminateDemo() {
+  return (
+    <ProgressBar value={null} accessibilityLabel="Loading">
+      <ProgressBar.Indicator />
+    </ProgressBar>
+  );
+}
+```
+
+## Budget rows
+
+Compose a label, percent, bar, and caption so status is clear in text, not by color alone.
+
+```tsx
+import { Box, HStack, ProgressBar, Text, type ProgressBarColor } from '@cdx-ui/components';
+
+interface BudgetRow {
+  readonly label: string;
+  readonly percent: number;
+  readonly caption: string;
+  readonly color: ProgressBarColor;
+}
+
+const ROWS: readonly BudgetRow[] = [
+  {
+    label: 'Dining',
+    percent: 80,
+    caption: '$320 of $400 — 10 days left',
+    color: 'categorical-1',
+  },
+  {
+    label: 'Groceries',
+    percent: 55,
+    caption: '$275 of $500 — on track',
+    color: 'categorical-2',
+  },
+  {
+    label: 'Transport',
+    percent: 95,
+    caption: '$190 of $200 — near limit',
+    color: 'warning',
+  },
+  {
+    label: 'Entertainment',
+    percent: 40,
+    caption: '$60 of $150 — under budget',
+    color: 'success',
+  },
+];
+
+export default function ProgressBarBudgetRowsDemo() {
+  return (
+    <Box className="w-full max-w-md gap-4">
+      {ROWS.map((row) => (
+        <Box key={row.label} className="gap-1.5">
+          <HStack space="sm" className="items-baseline justify-between">
+            <Text size="sm" weight="medium">
+              {row.label}
+            </Text>
+            <Text size="sm" color="secondary">
+              {row.percent}%
+            </Text>
+          </HStack>
+          <ProgressBar
+            value={row.percent}
+            max={100}
+            size="large"
+            color={row.color}
+            accessibilityLabel={`${row.label} budget ${String(row.percent)} percent used`}
+          >
+            <ProgressBar.Indicator />
+          </ProgressBar>
+          <Text size="sm" color="secondary">
+            {row.caption}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+```
+
 ## API
 
 ### ProgressBar
@@ -55,8 +214,10 @@ Sets `role="progressbar"` and `accessibilityRole="progressbar"`. Pass `value={nu
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `className?` | `string` | — | — |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the track's own styles. |
 | `children?` | `React.ReactNode` | — | — |
+| `size?` | `'default' \| 'large'` | `'default'` | Track height. Inherited by `ProgressBar.Indicator` via style context. |
+| `color?` | `'action' \| 'danger' \| 'warning' \| 'success' \| 'info' \| 'categorical-1' \| 'categorical-2' \| 'categorical-3' \| 'categorical-4' \| 'categorical-5' \| 'categorical-6'` | `'action'` | Indicator fill color. Inherited by `ProgressBar.Indicator` via style context. The track is always `surface-neutral-subtle`. |
 | `value?` | `number \| null` | `0` | Current value in the range `[0, max]`, or `null` for indeterminate progress. Values below `0` clamp to `0`; values above `max` clamp to `max`. Non-finite values (such as `NaN`) are treated as `0`. |
 | `max?` | `number` | `100` | Maximum value. The minimum is always `0`. A `max` of `0` or less is treated as complete. |
 | `getValueLabel?` | `((value: number, max: number) => string)` | — | Screen-reader text for determinate progress (`accessibilityValue.text`). Defaults to a rounded percentage of `max`, such as `"45%"`. No effect when `value` is `null`, or when `accessibilityValue` is set. |
@@ -73,11 +234,11 @@ Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
 
 ### ProgressBar.Indicator
 
-The filled portion of the track. Width is set automatically from `value / max`.
+The filled portion of the track. Width is set automatically from `value / max`. In indeterminate mode a partial segment passes across the track.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `className?` | `string` | — | — |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the indicator's own styles. |
 | `children?` | `React.ReactNode` | — | — |
 
 Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).

package/docs/components/select/content.md

@@ -644,6 +644,7 @@ Renders a Forge icon sized to the select. Use it as the `indicator` value when a
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | Utility classes for size (`size-*`) and placement, merged after the defaults. |
+| `children?` | `ReactNode` | — | The element rendered when `asChild` is set. |
 | `filled?` | `boolean` | — | When `true`, renders the filled variant of the icon (if available). Defaults to `false` (outlined). |
 | `size?` | `string \| number` | — | Width and height of the icon, in pixels or any SVG length. The bare icon renders at 24 when omitted. |
 | `data-testid?` | `string` | — | Test identifier forwarded to the rendered SVG. |

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

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

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

@@ -93,7 +93,7 @@ Create `global.css` in your project root:
 - **`@custom-variant dark`** — Switches Tailwind v4's dark mode from `@media (prefers-color-scheme)` to class-based activation. Required for `ScopedTheme` to work on web. Harmless if you don't use `ScopedTheme` — global dark mode continues to work via `Uniwind.setTheme()`.
 - **`@cdx-ui/styles/theme.css`** — Design tokens (colors, spacing, radii, shadows, fonts) as a Tailwind v4 `@theme static` block, plus light/dark mode and platform font overrides via `@variant`.
 - **`@cdx-ui/styles/utilities.css`** — Composite typography utilities (`heading-xl`…`heading-xs`, `body-xl`…`body-xs`, `label-sm`, `label-xs`) used by `Heading`, `Text`, and `Link`. Each has a `-size` companion (`body-sm-size`) that sets only the font size, line height, and letter spacing, so nested text can change size and keep its inherited font family and weight.
-- **`@cdx-ui/components/styles.css`** — `@source` directive telling Tailwind where to scan for component utility classes.
+- **`@cdx-ui/components/styles.css`** — `@source` directive telling Tailwind where to scan for component utility classes. If you use `DataGrid`, also import `@cdx-ui/data-grid/styles.css`, which does the same for `@cdx-ui/data-grid`.
 
 > [!NOTE]
 >

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

@@ -52,7 +52,7 @@ Every component's API table lists the props that choose its look. Reach for them
 - **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.
+- **Other text styling:** `color`, `size`, `weight` and `italic` are the only typography props, and Forge UI will not add more. Everything else is a plain class, on `Text`, `Heading` and a component's text slot (`Button.Label`, `Chip.Label`): decoration (`underline`, `line-through`), casing (`uppercase`, `capitalize`), truncation and wrapping (`truncate`, `line-clamp-*`, `text-ellipsis`, `whitespace-nowrap`) and numerals (`tabular-nums`). Line height and letter spacing come with `size`, so `leading-*` and `tracking-*` stay off.
 - **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
@@ -86,7 +86,7 @@ On a Forge UI component, `className` positions the component in its parent and n
 | 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.
+Padding, backgrounds, borders, radii, colors, font size, weight and family, and heights are not allowed, on the component or on any of its parts. The text classes under [Text, Heading and Icon](#text-heading-and-icon) are. Between siblings, prefer a stack's `space` prop to margins.
 
 ```tsx
 // Wrong: restyling Card parts to match a mockup

package/docs/llms.txt

@@ -85,6 +85,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
   - [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)
   - [Insurance Disclosure](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)
+  - [Country Flag](components/country-flag/content.md): A flag for a country-flag-icons code, including unofficial codes used by libphonenumber-js. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-countryflag--default)
+  - [Currency Flag](components/currency-flag/content.md): The flag of the country or union that issues an ISO 4217 currency. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-currencyflag--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)
@@ -141,6 +143,7 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
 
   - **Tools**
   - [Figma libraries](resources/figma-libraries/content.md): Access our official design system Figma libraries
+  - [Agent skills](resources/skills/content.md): Teach AI coding agents to build with Forge UI components as they ship, without restyling them.
 
   - **Changelogs**
   - Release notes
@@ -148,6 +151,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
 
 ## Release notes
 
+- [0.3.7](resources/release-notes/0.3.7/content.md): Adds CountryFlag for ISO country flags, ProgressBar size and color props, DataGrid autoHeight, and fixes for web charts and published DataGrid styles.
+- [0.3.6](resources/release-notes/0.3.6/content.md): Adds SystemAlert, bar, line, and pie charts on a shared MUI X-shaped API, Stepper, and a fix for tabs scroll controls.
 - [0.3.5](resources/release-notes/0.3.5/content.md): Selected subtle Chip labels stay visible on Android when the variant changes from outline to subtle.
 - [0.3.4](resources/release-notes/0.3.4/content.md): Select adds multiple selection, in-list search, and a native bottom sheet; Input gains a subtle variant for fields inside popups and sheets.
 - [0.3.3](resources/release-notes/0.3.3/content.md): Insight and InsightStack add dismissible summary cards with status colors, optional AI styling, and stacked depth for insight feeds.