@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/{.cursor/rules/skills/design-system-extension-skills/DetailsFields.mdrules → .ai-common/skills/design-system-extension-skills/DetailsFields.md}

@@ -1,8 +1,3 @@
----
-description: DSE component skill: DetailsFields
-alwaysApply: false
----
-
 # Skill: DetailsFields
 
 Read-only field display component that receives an array of PConnect-aware field objects and renders each as a label/value pair. Delegates value rendering to `PConnectComponent` in DISPLAY_ONLY mode.
@@ -16,6 +11,7 @@ Read-only field display component that receives an array of PConnect-aware field
 Renders a vertical list of read-only field name/value pairs for a details/summary panel. Each field is a PConnect-aware object. The component extracts type, label, and view config from each field's PConnect, forces the view into `readOnly + DISPLAY_ONLY` mode, and delegates rendering to `PConnectComponent`.
 
 Supports three item layouts:
+
 - **Reference type:** Renders the value directly (no label/value grid wrapper).
 - **React element value:** Renders value in a single full-width cell (no label).
 - **Label + value pair:** Renders label in a 6-col cell and value in a 6-col cell.
@@ -28,15 +24,65 @@ Supports three item layouts:
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `fields` | `any[]` | Yes | Array of PConnect-aware field objects. Each must have `.getPConnect()` method |
+| Prop     | Type    | Required | Description                                                                   |
+| -------- | ------- | -------- | ----------------------------------------------------------------------------- |
+| `fields` | `any[]` | Yes      | Array of PConnect-aware field objects. Each must have `.getPConnect()` method |
+
+## Component Skeleton
+
+```typescript
+import { createElement, isValidElement } from 'react';
+import { PConnectComponent } from '@pega/sdk-react';
+import { format } from '../../helpers/formatters';
+
+interface DetailsFieldsProps { fields: any[]; }
+
+export default function DetailsFields(props: DetailsFieldsProps) {
+  const { fields = [] } = props;
+  const fieldComponents: any[] = [];
+
+  // 1. Build field components array
+  fields?.forEach((field, index) => {
+    const thePConn = field.getPConnect();
+    const theCompType = thePConn.getComponentName().toLowerCase();
+    const { label } = thePConn.getConfigProps();
+    const configObj = thePConn.getReferencedView();
+    configObj.config.readOnly = true;
+    configObj.config.displayMode = 'DISPLAY_ONLY';
+    if (theCompType === 'reference') configObj.config.label = thePConn.getInheritedProps()?.label;
+    fieldComponents.push({
+      type: theCompType, label,
+      value: createElement(PConnectComponent, thePConn.getReferencedViewPConnect()),
+    });
+  });
+
+  // 2. Render grid items per field
+  return (
+    <>
+      {fieldComponents.map((field, index) => {
+        if (field.type === 'reference') return field.value;
+        if (isValidElement(field.value)) {
+          return <GridRow key={index}><GridItem xs={12}>{field.value}</GridItem></GridRow>;
+        }
+        const formattedValue = field.type === 'date' ? format(field.value, 'date') : field.value;
+        return (
+          <GridRow key={index} style={{ padding: '4px 0' }}>
+            <GridItem xs={6}><Label>{field.label}</Label></GridItem>
+            <GridItem xs={6}><Value>{formattedValue || '---'}</Value></GridItem>
+          </GridRow>
+        );
+      })}
+    </>
+  );
+}
+```
 
 ## Behavioral Contract
 
 ### 1. Field Iteration and PConnect Setup
 
 For each field in `fields`:
+
 1. Call `field.getPConnect()` to get `thePConn`.
 2. Get `theCompType = thePConn.getComponentName().toLowerCase()`.
 3. Get `label = thePConn.getConfigProps().label`.
@@ -50,11 +96,11 @@ For each field in `fields`:
 
 Choose the layout based on the field:
 
-| Condition | Layout |
-|-----------|--------|
-| `type === 'reference'` | Render `field.value` directly with no wrapper |
-| `isValidElement(field.value)` | Single 12-col cell containing `field.value` (no label) |
-| Default (string/primitive value) | 6-col label cell + 6-col value cell |
+| Condition                        | Layout                                                 |
+| -------------------------------- | ------------------------------------------------------ |
+| `type === 'reference'`           | Render `field.value` directly with no wrapper          |
+| `isValidElement(field.value)`    | Single 12-col cell containing `field.value` (no label) |
+| Default (string/primitive value) | 6-col label cell + 6-col value cell                    |
 
 ### 3. Label/Value Grid Row
 
@@ -78,28 +124,29 @@ Derived from `DetailsFields.tsx` makeStyles:
 
 ### Label
 
-| Property | Value |
-|----------|-------|
-| Display | block |
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| Property    | Value                          |
+| ----------- | ------------------------------ |
+| Display     | block                          |
+| Font weight | 400                            |
+| Color       | `theme.palette.text.secondary` |
+| Typography  | `body2` (≈ 0.875rem / 14px)    |
 
 ### Value
 
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.primary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| Property    | Value                        |
+| ----------- | ---------------------------- |
+| Font weight | 400                          |
+| Color       | `theme.palette.text.primary` |
+| Typography  | `body2` (≈ 0.875rem / 14px)  |
 
 ### Row Padding
 
-| Property | Value |
-|----------|-------|
+| Property  | Value              |
+| --------- | ------------------ |
 | Row style | `padding: 4px 0px` |
 
 **CSS-only implementation notes:**
+
 - Each row: `display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; gap: 8px`.
 - Label: `font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); display: block`.
 - Value: `font-size: 0.875rem; font-weight: 400; color: var(--text-primary)`.
@@ -132,15 +179,16 @@ Derived from `DetailsFields.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS grid 2-column rows per field pair |
-| MUI | `<Grid container spacing={1}>` per row with `<Typography>` label and value |
-| Ant Design | `<Descriptions layout='horizontal' column={1}>` with PConnect-rendered values |
-| Chakra UI | `<Grid templateColumns='1fr 1fr'>` rows with `<Text>` label/value |
-| Shadcn/ui | `<div class='grid grid-cols-2'>` rows |
+| Design System      | Recommended Component                                                         |
+| ------------------ | ----------------------------------------------------------------------------- |
+| Default (CSS only) | CSS grid 2-column rows per field pair                                         |
+| MUI                | `<Grid container spacing={1}>` per row with `<Typography>` label and value    |
+| Ant Design         | `<Descriptions layout='horizontal' column={1}>` with PConnect-rendered values |
+| Chakra UI          | `<Grid templateColumns='1fr 1fr'>` rows with `<Text>` label/value             |
+| Shadcn/ui          | `<div class='grid grid-cols-2'>` rows                                         |
 
 When implementing in a specific design system, map the following:
+
 - Label → secondary muted text, `body2` size
 - Value → primary text, `body2` size
 - Row padding → `4px 0` vertical spacing between pairs

package/templates/react-sdk-reference/{.cursor/rules/skills/design-system-extension-skills/FieldGroup.mdrules → .ai-common/skills/design-system-extension-skills/FieldGroup.md}

@@ -1,8 +1,3 @@
----
-description: DSE component skill: FieldGroup
-alwaysApply: false
----
-
 # Skill: FieldGroup
 
 Collapsible or static container that groups related fields under an optional section header and instructions text.
@@ -14,6 +9,7 @@ Collapsible or static container that groups related fields under an optional sec
 ## Component Purpose
 
 Renders a labeled section that wraps one or more field components. Supports optional:
+
 - **Section name** — rendered as a bold header above the fields.
 - **Collapsible behavior** — the name header becomes a toggle that shows/hides the fields.
 - **Instructions text** — rendered as HTML below the header and above the fields.
@@ -28,12 +24,56 @@ Children are rendered inside a full-width inner container.
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | No | Field components to render inside the group |
-| `name` | `string` | No | Section heading displayed above the fields |
-| `collapsible` | `boolean` | No | If `true`, the header acts as a collapse/expand toggle. Default `false` |
-| `instructions` | `string` | No | HTML string of instruction text shown between header and fields |
+| Prop           | Type        | Required | Description                                                             |
+| -------------- | ----------- | -------- | ----------------------------------------------------------------------- |
+| `children`     | `ReactNode` | No       | Field components to render inside the group                             |
+| `name`         | `string`    | No       | Section heading displayed above the fields                              |
+| `collapsible`  | `boolean`   | No       | If `true`, the header acts as a collapse/expand toggle. Default `false` |
+| `instructions` | `string`    | No       | HTML string of instruction text shown between header and fields         |
+
+## Component Skeleton
+
+```typescript
+import { type PropsWithChildren, useState } from 'react';
+
+interface FieldGroupProps {
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
+}
+
+export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
+  const { children, name, collapsible = false, instructions } = props;
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <OuterContainer spacing={4}>
+      <InnerFullWidth>
+        {/* Header */}
+        {name && (
+          <div className="field-margin">
+            {collapsible ? (
+              <span id="field-group-header" className="header-clickable"
+                style={{ cursor: 'pointer' }} onClick={() => setCollapsed(c => !c)}>
+                {collapsed ? <ArrowRightIcon /> : <ArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
+          </div>
+        )}
+        {/* Instructions (skip if === 'none') */}
+        {instructions && instructions !== 'none' && (
+          <div className="instruction-text" dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {/* Children (hidden when collapsed) */}
+        {!collapsed && <div style={{ width: '100%' }}>{children}</div>}
+      </InnerFullWidth>
+    </OuterContainer>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -57,43 +97,44 @@ Derived from `FieldGroup.tsx` makeStyles:
 
 ### Outer Container
 
-| Property | Value |
-|----------|-------|
-| Spacing | 4 units (≈ 32px in MUI default) |
+| Property | Value                           |
+| -------- | ------------------------------- |
+| Spacing  | 4 units (≈ 32px in MUI default) |
 
 ### Component Root Margins
 
-| Property | Value |
-|----------|-------|
-| Margin right | `theme.spacing(1)` (≈ 8px) |
-| Margin left | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
-| Margin bottom | `theme.spacing(1)` |
+| Property      | Value                      |
+| ------------- | -------------------------- |
+| Margin right  | `theme.spacing(1)` (≈ 8px) |
+| Margin left   | `theme.spacing(1)`         |
+| Margin top    | `theme.spacing(1)`         |
+| Margin bottom | `theme.spacing(1)`         |
 
 ### Field Margin (name row)
 
-| Property | Value |
-|----------|-------|
-| Padding top | `theme.spacing(1)` |
+| Property       | Value              |
+| -------------- | ------------------ |
+| Padding top    | `theme.spacing(1)` |
 | Padding bottom | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
+| Margin top     | `theme.spacing(1)` |
 
 ### Header Row (collapsible)
 
-| Property | Value |
-|----------|-------|
-| Display | flex |
-| Align items | center |
-| Gap | 5px |
-| Cursor | `pointer` (collapsible) or `auto` (non-collapsible) |
+| Property    | Value                                               |
+| ----------- | --------------------------------------------------- |
+| Display     | flex                                                |
+| Align items | center                                              |
+| Gap         | 5px                                                 |
+| Cursor      | `pointer` (collapsible) or `auto` (non-collapsible) |
 
 ### Instructions
 
-| Property | Value |
-|----------|-------|
-| Padding | `5px 0` |
+| Property | Value   |
+| -------- | ------- |
+| Padding  | `5px 0` |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `margin: 8px`.
 - Name row: `padding: 8px 0; margin-top: 8px`.
 - Collapsible header: `display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none`.
@@ -121,15 +162,16 @@ Derived from `FieldGroup.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header |
-| MUI | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
-| Ant Design | `<Collapse>` or `<Card>` with collapsible panels |
-| Chakra UI | `<Accordion>` or manual `<Box>` with toggle state |
-| Shadcn/ui | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>` |
+| Design System      | Recommended Component                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header          |
+| MUI                | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
+| Ant Design         | `<Collapse>` or `<Card>` with collapsible panels                        |
+| Chakra UI          | `<Accordion>` or manual `<Box>` with toggle state                       |
+| Shadcn/ui          | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>`       |
 
 When implementing in a specific design system, map the following:
+
 - `collapsed` toggle → design system's collapse/expand state or controlled component
 - Arrow direction → visual indicator of expand/collapse state (chevron or arrow icon)
 - `instructions` HTML → design system's `dangerouslySetInnerHTML` or rich content slot

package/templates/react-sdk-reference/{.cursor/rules/skills/design-system-extension-skills/FieldGroupList.mdrules → .ai-common/skills/design-system-extension-skills/FieldGroupList.md}

@@ -1,8 +1,3 @@
----
-description: DSE component skill: FieldGroupList
-alwaysApply: false
----
-
 # Skill: FieldGroupList
 
 Repeating list of named field groups, each with its own children. Supports per-item delete and a global "+Add" link at the bottom.
@@ -23,11 +18,54 @@ Renders a vertical list of field group items. Each item has a bold name header,
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `items` | `Array<{ name: string; id: string; children: ReactNode }>` | Yes | List of field group items to render |
-| `onDelete` | `(id: string) => void` | No | Called with the item's `id` when the delete button is clicked. If not provided, no delete button is shown |
-| `onAdd` | `() => void` | No | Called when the "+Add" link is clicked. If not provided, no add link or dividers are shown |
+| Prop       | Type                                                       | Required | Description                                                                                               |
+| ---------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `items`    | `Array<{ name: string; id: string; children: ReactNode }>` | Yes      | List of field group items to render                                                                       |
+| `onDelete` | `(id: string) => void`                                     | No       | Called with the item's `id` when the delete button is clicked. If not provided, no delete button is shown |
+| `onAdd`    | `() => void`                                               | No       | Called when the "+Add" link is clicked. If not provided, no add link or dividers are shown                |
+
+## Component Skeleton
+
+```typescript
+import { Utils } from '../../helpers/utils';
+
+interface FieldGroupListProps {
+  items: Array<{ name: string; id: string; children: any }>;
+  onDelete?: (id: string) => void;
+  onAdd?: () => void;
+}
+
+export default function FieldGroupList(props: FieldGroupListProps) {
+  const trashIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
+
+  return (
+    <OuterContainer spacing={4}>
+      <InnerFullWidth>
+        <InnerGrid spacing={1}>
+          {props.items.map(item => (
+            <FullWidthItem key={item.name}>
+              <b>{item.name}</b>
+              {props.onDelete && (
+                <button type="button" style={{ float: 'right' }} className="psdk-utility-button"
+                  id={`delete-row-${item.id}`} aria-label="Delete Row"
+                  onClick={() => props.onDelete(item.id)}>
+                  <img className="psdk-utility-card-action-svg-icon" src={trashIcon} />
+                </button>
+              )}
+              {item.children}
+              <br />
+              {props.onAdd && <><Divider /><br /></>}
+            </FullWidthItem>
+          ))}
+          {props.onAdd && (
+            <LinkButton onClick={props.onAdd} style={{ cursor: 'pointer' }}>+Add</LinkButton>
+          )}
+        </InnerGrid>
+      </InnerFullWidth>
+    </OuterContainer>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -54,27 +92,28 @@ Derived from `FieldGroupList.tsx`:
 
 ### Outer Layout
 
-| Property | Value |
-|----------|-------|
+| Property               | Value      |
+| ---------------------- | ---------- |
 | Grid container spacing | 4 (≈ 32px) |
 
 ### Delete Button
 
-| Property | Value |
-|----------|-------|
-| Float | right |
-| Style class | `psdk-utility-button` |
+| Property    | Value                                                       |
+| ----------- | ----------------------------------------------------------- |
+| Float       | right                                                       |
+| Style class | `psdk-utility-button`                                       |
 | Icon source | `Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl())` |
 
 ### "+Add" Link
 
-| Property | Value |
-|----------|-------|
-| Cursor | pointer |
-| Underline | hover |
-| Text | `'+Add'` |
+| Property  | Value    |
+| --------- | -------- |
+| Cursor    | pointer  |
+| Underline | hover    |
+| Text      | `'+Add'` |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `display: flex; flex-direction: column; gap: 32px`.
 - Item wrapper: `display: flex; flex-direction: column; gap: 8px; width: 100%`.
 - Item header row: `display: flex; justify-content: space-between; align-items: center`.
@@ -101,15 +140,16 @@ Derived from `FieldGroupList.tsx`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Flex column layout with `<hr>` divider and `<button>` delete |
-| MUI | `<Grid container>` items with `<Divider>` and `<Link>` for "+Add" |
-| Ant Design | `<List>` items with `<Divider>` and `<Button type='link'>` for "+Add" |
-| Chakra UI | `<VStack>` with `<Divider>` and `<Button variant='link'>` |
-| Shadcn/ui | `<div>` flex column with `<Separator>` and a link button |
+| Design System      | Recommended Component                                                 |
+| ------------------ | --------------------------------------------------------------------- |
+| Default (CSS only) | Flex column layout with `<hr>` divider and `<button>` delete          |
+| MUI                | `<Grid container>` items with `<Divider>` and `<Link>` for "+Add"     |
+| Ant Design         | `<List>` items with `<Divider>` and `<Button type='link'>` for "+Add" |
+| Chakra UI          | `<VStack>` with `<Divider>` and `<Button variant='link'>`             |
+| Shadcn/ui          | `<div>` flex column with `<Separator>` and a link button              |
 
 When implementing in a specific design system, map the following:
+
 - Delete button → icon button or `danger` variant button placed at the item top-right
 - Divider between items → `<Divider>` / `<hr>` (only when `onAdd` is present)
 - "+Add" link → a text link / `Button variant='link'` that calls `onAdd`

package/templates/react-sdk-reference/{.cursor/rules/skills/design-system-extension-skills/FieldValueList.mdrules → .ai-common/skills/design-system-extension-skills/FieldValueList.md}

@@ -1,8 +1,3 @@
----
-description: DSE component skill: FieldValueList
-alwaysApply: false
----
-
 # Skill: FieldValueList
 
 Single field-value pair display component. Renders a label and value in either an inline (side-by-side) or stacked layout. Also used as a display mode renderer by field components (e.g., `TextInput`, `Dropdown`, etc.).
@@ -14,6 +9,7 @@ Single field-value pair display component. Renders a label and value in either a
 ## Component Purpose
 
 Renders a single name/value pair in a compact read-only layout. Supports two layout variants:
+
 - **Inline:** Label and value are side by side (label 4/12 cols, value 8/12 cols).
 - **Stacked:** Label is on top, value is larger below (both 12/12 cols).
 
@@ -27,12 +23,58 @@ When no name is provided, only the value is rendered at full width. Used directl
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `name` | `string` | No | Field label. If omitted, only the value is rendered |
-| `value` | `any` | Yes | Field value to display |
-| `variant` | `string` | No | Layout: `'inline'` (default) or `'stacked'` |
-| `isHtml` | `boolean` | No | If `true`, render value as raw HTML (default `false`) |
+| Prop      | Type      | Required | Description                                           |
+| --------- | --------- | -------- | ----------------------------------------------------- |
+| `name`    | `string`  | No       | Field label. If omitted, only the value is rendered   |
+| `value`   | `any`     | Yes      | Field value to display                                |
+| `variant` | `string`  | No       | Layout: `'inline'` (default) or `'stacked'`           |
+| `isHtml`  | `boolean` | No       | If `true`, render value as raw HTML (default `false`) |
+
+## Component Skeleton
+
+```typescript
+interface FieldValueListProps {
+  name?: string;
+  value: any;
+  variant?: string;
+  isHtml?: boolean;
+}
+
+export default function FieldValueList({ name, value, variant, isHtml = false }: FieldValueListProps) {
+  // 1. Fallback for empty value
+  const formattedValue = (value === undefined || value === '') ? '---' : value;
+
+  // 2. No-name case: render value only at full width
+  if (!name) {
+    const typography = variant === 'stacked' ? 'h6' : 'body2';
+    return isHtml
+      ? <ValueContainer typography={typography} dangerouslySetInnerHTML={{ __html: formattedValue }} />
+      : <ValueContainer typography={typography}>{formattedValue}</ValueContainer>;
+  }
+
+  // 3. Stacked variant: label on top, larger value below
+  if (variant === 'stacked') {
+    return (
+      <Row direction="column">
+        <Label style={{ paddingBottom: 0 }}>{name}</Label>
+        {isHtml
+          ? <Value typography="h6" style={{ paddingTop: 0 }} dangerouslySetInnerHTML={{ __html: formattedValue }} />
+          : <Value typography="h6" style={{ paddingTop: 0 }}>{formattedValue}</Value>}
+      </Row>
+    );
+  }
+
+  // 4. Inline variant (default): label 4 cols, value 8 cols
+  return (
+    <Row>
+      <Label xs={4}>{name}</Label>
+      {isHtml
+        ? <Value xs={8} dangerouslySetInnerHTML={{ __html: formattedValue }} />
+        : <Value xs={8}>{formattedValue}</Value>}
+    </Row>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -57,28 +99,29 @@ Derived from `FieldValueList.tsx` makeStyles:
 
 ### Label
 
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` (muted/secondary text) |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| Property    | Value                                                 |
+| ----------- | ----------------------------------------------------- |
+| Font weight | 400                                                   |
+| Color       | `theme.palette.text.secondary` (muted/secondary text) |
+| Typography  | `body2` (≈ 0.875rem / 14px)                           |
 
 ### Value
 
-| Property | Value |
-|----------|-------|
-| Color | `theme.palette.text.primary` (default text) |
-| Typography (inline) | `body2` (≈ 0.875rem / 14px) |
-| Typography (stacked) | `h6` (≈ 1.25rem / 20px, weight 500) |
+| Property             | Value                                       |
+| -------------------- | ------------------------------------------- |
+| Color                | `theme.palette.text.primary` (default text) |
+| Typography (inline)  | `body2` (≈ 0.875rem / 14px)                 |
+| Typography (stacked) | `h6` (≈ 1.25rem / 20px, weight 500)         |
 
 ### Padding Adjustments (stacked only)
 
-| Property | Value |
-|----------|-------|
+| Property             | Value          |
+| -------------------- | -------------- |
 | Label bottom padding | `0 !important` |
-| Value top padding | `0 !important` |
+| Value top padding    | `0 !important` |
 
 **CSS-only implementation notes:**
+
 - Root row: `display: flex; justify-content: space-between; align-items: baseline; gap: 1rem`.
 - **Inline label:** `flex: 0 0 33%; font-weight: 400; font-size: 0.875rem; color: var(--text-secondary)`.
 - **Inline value:** `flex: 1; font-size: 0.875rem; color: var(--text-primary)`.
@@ -104,15 +147,16 @@ Derived from `FieldValueList.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div class='field-value-inline'>` or `<div class='field-value-stacked'>` with CSS |
-| MUI | `<Grid container>` with `<Typography>` for label and value |
-| Ant Design | `<Descriptions>` item, or `<Typography.Text type='secondary'>` + `<Typography.Text>` |
-| Chakra UI | `<Stack direction='row'>` (inline) or `<Stack spacing={0}>` (stacked) |
-| Shadcn/ui | Custom label/value pair with Tailwind flex utilities |
+| Design System      | Recommended Component                                                                |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| Default (CSS only) | `<div class='field-value-inline'>` or `<div class='field-value-stacked'>` with CSS   |
+| MUI                | `<Grid container>` with `<Typography>` for label and value                           |
+| Ant Design         | `<Descriptions>` item, or `<Typography.Text type='secondary'>` + `<Typography.Text>` |
+| Chakra UI          | `<Stack direction='row'>` (inline) or `<Stack spacing={0}>` (stacked)                |
+| Shadcn/ui          | Custom label/value pair with Tailwind flex utilities                                 |
 
 When implementing in a specific design system, map the following:
+
 - Label → secondary/muted text style
 - Value inline → same size as label
 - Value stacked → larger typography (h6 equivalent)