{
  "version": "0.2.0-preview.1",
  "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721",
  "status": "preview",
  "authority": {
    "repository": "cloakedinc/design",
    "path": "packages/design-system",
    "catalog": "packages/design-system/catalog.json",
    "status": "preview"
  },
  "provenance": {
    "repo": "cloakedinc/automation",
    "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "path": "packages/design-system",
    "imported_spec_status": "approved"
  },
  "adaptations": [
    {
      "id": "button-content-gap",
      "status": "preview",
      "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap."
    },
    {
      "id": "keyboard-focus",
      "status": "preview",
      "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows."
    },
    {
      "id": "supporting-text-contrast",
      "status": "preview",
      "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream."
    },
    {
      "id": "danger-text-contrast",
      "status": "preview",
      "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair."
    },
    {
      "id": "preview-status",
      "status": "preview",
      "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only."
    },
    {
      "id": "motion-comparison-accessibility",
      "status": "preview",
      "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens."
    },
    {
      "id": "list-item-ownership",
      "status": "preview",
      "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics."
    },
    {
      "id": "card-delta-text-contrast",
      "status": "preview",
      "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills."
    },
    {
      "id": "carousel-keyboard-access",
      "status": "preview",
      "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel."
    }
  ],
  "id": "sectionheader",
  "name": "SectionHeader",
  "category": "Organization",
  "summary": "A standalone content heading row with optional leading and trailing slots, sized small, default, or large.",
  "documentation": {
    "summary": "A standalone content heading row with optional leading and trailing slots, sized small, default, or large.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "A titled heading row above a body section, with optional `leading` and `trailing` slots for an icon\nor an action."
      },
      {
        "heading": "When to use",
        "body": "Reach for `SectionHeader` to label a standalone group on a page or screen — \"Scan history\", \"Your\ninfo\" — especially when the heading carries a trailing control (a `Dropdown` filter, an \"Edit\"\naction, a value). It bundles the title, optional description, and slots so you don't hand-assemble\ntype and spacing.\n\n-   Just a run of styled text with no section role? Use `Text` directly.\n-   A label _inside_ a `List` that groups the rows under it? Use `List.Section`, not this.\n-   Only a horizontal rule between blocks, no title? Use `Divider`.\n-   Route-level chrome (back button, title bar)? Use `Screen.Header`."
      }
    ],
    "usage": [],
    "examples": [],
    "source": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.mdx",
    "status": "local-preview",
    "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
  },
  "source": {
    "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
    "code": "import React from 'react';\nimport { cn } from '../../../utilities';\nimport { PAGE_PADDING_X } from '../../../tokens/pagePaddingX';\nimport { resolvePaddingWithGutter, type PaddingProps } from '../../layout/resolvePadding';\nimport { Text, type TextColor, type TextVariant } from '../../primitives/Text/Text';\nimport styles from './SectionHeader.module.scss';\n\nexport type SectionHeaderSize = 'small' | 'default' | 'large';\n\nexport type SectionHeaderContrast = 'default' | 'inverse';\n\n// `large` shares the default's h3 ramp; only its block padding and alignment differ (SectionHeader.module.scss).\nconst TITLE_VARIANT: Record<SectionHeaderSize, TextVariant> = {\n    small: 'body',\n    default: 'h3',\n    large: 'h3',\n};\n\n// `inverse` inherits the surface color so the title picks up a tinted/inverted backdrop's own\n// text token (e.g. --cds-text-inverse), mirroring how FaqCard renders on a feature-tone band.\nconst TITLE_COLOR: Record<SectionHeaderContrast, TextColor> = {\n    default: 'primary',\n    inverse: 'inherit',\n};\n\n/**\n * Props for a standalone content section heading. Use `List.Section` for\n * grouped list labels and `Screen.Header` for route chrome.\n */\nexport interface SectionHeaderProps extends PaddingProps {\n    /** Controls block padding and slot alignment, not the title's type size. Defaults to `default`. */\n    size?: SectionHeaderSize;\n    /** Section label. Always renders as a level-3 heading, whatever visual scale `size` sets. */\n    title: string;\n    /** Title contrast for the surface. Defaults to `default`; use `inverse` on a tinted or inverted backdrop. */\n    contrast?: SectionHeaderContrast;\n    /** Secondary line shown beneath the title (used by the large size). */\n    description?: React.ReactNode;\n    /** Leading content (e.g. an icon) shown before the title block. */\n    leading?: React.ReactNode;\n    /** Trailing control or status — dropdown, action text, value, or icon. */\n    trailing?: React.ReactNode;\n    /**\n     * Cross-axis alignment of the trailing slot. Defaults to `center`; `top` pins it to the title\n     * line above a description, and `baseline` sits text trailing content on the title's baseline.\n     */\n    trailingAlign?: 'center' | 'top' | 'baseline';\n    className?: string;\n    style?: React.CSSProperties;\n    /** Selector for the header row; `leading` and `trailing` content carry their own. */\n    testId?: string;\n}\n\n/**\n * Heading row for a content section: an optional `leading` visual, the title with its optional\n * `description`, and an optional `trailing` control.\n */\nexport function SectionHeader({\n    size = 'default',\n    title,\n    contrast = 'default',\n    description,\n    leading,\n    trailing,\n    trailingAlign = 'center',\n    className,\n    style,\n    testId,\n    ...paddingRest\n}: SectionHeaderProps) {\n    const paddingStyles = resolvePaddingWithGutter(paddingRest, PAGE_PADDING_X);\n\n    // `baseline` puts the trailing slot on the title's own line rather than in the header row, which\n    // is what makes the two share a baseline. Every other alignment keeps it as a row-level slot.\n    const onTitleLine = Boolean(trailing) && trailingAlign === 'baseline';\n\n    const trailingSlot = trailing && (\n        <div className={cn(styles.trailing, trailingAlign === 'top' && styles.trailingTop)}>{trailing}</div>\n    );\n\n    const titleText = (\n        <Text variant={TITLE_VARIANT[size]} color={TITLE_COLOR[contrast]} as='h3' className={styles.title}>\n            {title}\n        </Text>\n    );\n\n    return (\n        <div\n            className={cn(styles.header, className)}\n            style={{ ...paddingStyles, ...style }}\n            data-size={size}\n            data-testid={testId}\n        >\n            {leading && <div className={styles.leading}>{leading}</div>}\n            <div className={styles.body}>\n                {onTitleLine ? (\n                    <div className={styles.titleLine}>\n                        {titleText}\n                        {trailingSlot}\n                    </div>\n                ) : (\n                    titleText\n                )}\n                {description && (\n                    <Text variant='body' color='secondary' as='p' className={styles.description}>\n                        {description}\n                    </Text>\n                )}\n            </div>\n            {!onTitleLine && trailingSlot}\n        </div>\n    );\n}\n"
  },
  "spec": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "SectionHeader",
      "status": "preview",
      "version": "1.3.0",
      "summary": "A standalone content heading row with optional leading and trailing slots, sized small, default, or large."
    },
    "parts": [
      {
        "id": "root",
        "label": "Root",
        "description": "Heading row aligning leading, body, and trailing slots.",
        "required": true
      },
      {
        "id": "leading",
        "label": "Leading",
        "description": "Optional leading visual before the title."
      },
      {
        "id": "body",
        "label": "Body",
        "description": "Title and optional description column."
      },
      {
        "id": "title",
        "label": "Title",
        "description": "Visible section title."
      },
      {
        "id": "description",
        "label": "Description",
        "description": "Secondary line, used mainly by the large size."
      },
      {
        "id": "trailing",
        "label": "Trailing",
        "description": "Optional trailing control or status. Renders as a row-level slot, or on the title's line when trailingAlign is baseline."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "row": {
          "label": "Row",
          "description": "The single heading-row treatment."
        }
      },
      "sizes": {
        "small": {
          "label": "Small",
          "description": "Body-scale title for tight groups."
        },
        "default": {
          "label": "Default",
          "description": "The standard heading."
        },
        "large": {
          "label": "Large",
          "description": "Larger title paired with a description."
        }
      }
    },
    "variants": [
      {
        "id": "row",
        "label": "Row",
        "description": "Content heading row with slots.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [
      {
        "id": "small",
        "label": "Small",
        "description": "Body-scale title with tighter block padding."
      },
      {
        "id": "default",
        "label": "Default",
        "description": "The standard 20-unit heading scale."
      },
      {
        "id": "large",
        "label": "Large",
        "description": "Heading paired with a description line."
      }
    ],
    "measurements": [
      {
        "id": "content-gap",
        "label": "Slot gap",
        "kind": "exact",
        "token": "--cds-space-12",
        "value": 12,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "default-top-inset",
        "label": "Default top inset",
        "kind": "exact",
        "token": "--cds-space-48",
        "value": 48,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "inline-inset",
        "label": "Horizontal inset (default)",
        "kind": "exact",
        "token": "--cds-space-20",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "root"
        ],
        "notes": "Exact as shipped, but the only measurement here a caller can override: it comes from PaddingProps, so a container that already owns the page gutter passes paddingX={0}."
      }
    ],
    "layout": {
      "alignment": "Leading, body, and trailing align on the row center; the large size aligns to the top. The trailing slot can pin to the title line independently via trailingAlign='top'. trailingAlign='baseline' moves it onto the title's own line, so the two share a baseline.",
      "flow": "A single row: optional leading, a flexible title/description body, and an optional trailing slot.",
      "notes": [
        "Use List.Section for labels inside a List and Screen.Header for route chrome.",
        "The horizontal inset is a default, not a fixed value: it comes from PaddingProps so a container that already owns the page gutter can pass paddingX={0} rather than cancelling it with an inline style. The block axis is size-derived and stays owned by the component."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Title",
          "description": "The default and large sizes use the h3 ramp; small uses the body ramp.",
          "token": "--cds-type-h3-size"
        },
        {
          "label": "Description",
          "description": "The description uses the body ramp.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Title",
          "description": "Primary text for the title by default; the `contrast: inverse` prop makes the title inherit the surface color so it reads correctly on a tinted or inverted backdrop.",
          "token": "--cds-text-primary"
        },
        {
          "label": "Description",
          "description": "Secondary text for the description.",
          "token": "--cds-text-secondary"
        }
      ]
    },
    "states": [
      {
        "id": "small",
        "label": "Small",
        "description": "Body-scale title with tighter block padding."
      },
      {
        "id": "default",
        "label": "Default",
        "description": "Standard heading scale."
      },
      {
        "id": "large",
        "label": "Large",
        "description": "Larger title with a description and top-aligned slots."
      }
    ],
    "behavior": [
      {
        "label": "Size choice",
        "description": "Pick small for tight groups, default for standard sections, large when a description is needed."
      },
      {
        "label": "Slots",
        "description": "Use trailing for a dropdown, action text, value, or icon."
      },
      {
        "label": "Trailing alignment",
        "description": "The trailing slot centers with the row by default. Set trailingAlign to top to pin it to the title line when a description makes the body taller, such as a count beside a titled section. Set it to baseline when the trailing content is text smaller than the title: the slot then renders on the title's line and the two sit on one baseline, rather than merely sharing a box top."
      },
      {
        "label": "Title contrast",
        "description": "Defaults to `default` (primary text); set `contrast` to `inverse` when the header sits on a tinted or inverted surface so the title inherits that surface's text color."
      }
    ],
    "accessibility": [
      {
        "label": "Heading",
        "description": "The title renders as a heading so sections are navigable."
      },
      {
        "label": "Trailing controls",
        "description": "Interactive trailing content carries its own accessible name."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Wrapping title",
        "description": "The title/description body flexes and wraps while slots stay aligned."
      },
      {
        "label": "Optional slots",
        "description": "Leading, description, and trailing render only when provided."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Static",
          "description": "SectionHeader does not animate."
        }
      ],
      "haptics": [
        {
          "label": "No feedback",
          "description": "The heading requests no haptics; trailing controls own any feedback."
        }
      ]
    },
    "platformDifferences": []
  },
  "spec_source": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.spec.json",
  "guidance_source": {
    "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.mdx",
    "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec } from '../../../../.storybook/blocks';\nimport * as Stories from './SectionHeader.stories';\nimport sectionHeaderSpec from './SectionHeader.spec.json';\n\n<Meta of={Stories} />\n\n# SectionHeader\n\nA titled heading row above a body section, with optional `leading` and `trailing` slots for an icon\nor an action.\n\n<Canvas of={Stories.Default} />\n\n## When to use\n\nReach for `SectionHeader` to label a standalone group on a page or screen — \"Scan history\", \"Your\ninfo\" — especially when the heading carries a trailing control (a `Dropdown` filter, an \"Edit\"\naction, a value). It bundles the title, optional description, and slots so you don't hand-assemble\ntype and spacing.\n\n-   Just a run of styled text with no section role? Use `Text` directly.\n-   A label _inside_ a `List` that groups the rows under it? Use `List.Section`, not this.\n-   Only a horizontal rule between blocks, no title? Use `Divider`.\n-   Route-level chrome (back button, title bar)? Use `Screen.Header`.\n\n## Design Guidelines\n\n<ComponentSpec spec={sectionHeaderSpec} />\n\n## Props\n\n<Controls of={Stories.Default} />\n"
  },
  "props": [
    {
      "name": "size",
      "type": "SectionHeaderSize | undefined",
      "declared_type": "SectionHeaderSize",
      "required": false,
      "description": "Controls block padding and slot alignment, not the title's type size. Defaults to `default`.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 32
      },
      "values": [
        "default",
        "large",
        "small"
      ],
      "values_complete": true,
      "default": "'default'",
      "default_kind": "source-expression"
    },
    {
      "name": "title",
      "type": "string",
      "declared_type": "string",
      "required": true,
      "description": "Section label. Always renders as a level-3 heading, whatever visual scale `size` sets.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 34
      }
    },
    {
      "name": "contrast",
      "type": "SectionHeaderContrast | undefined",
      "declared_type": "SectionHeaderContrast",
      "required": false,
      "description": "Title contrast for the surface. Defaults to `default`; use `inverse` on a tinted or inverted backdrop.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 36
      },
      "values": [
        "default",
        "inverse"
      ],
      "values_complete": true,
      "default": "'default'",
      "default_kind": "source-expression"
    },
    {
      "name": "description",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": false,
      "description": "Secondary line shown beneath the title (used by the large size).",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 38
      }
    },
    {
      "name": "leading",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": false,
      "description": "Leading content (e.g. an icon) shown before the title block.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 40
      }
    },
    {
      "name": "trailing",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": false,
      "description": "Trailing control or status — dropdown, action text, value, or icon.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 42
      }
    },
    {
      "name": "trailingAlign",
      "type": "\"center\" | \"top\" | \"baseline\" | undefined",
      "declared_type": "'center' | 'top' | 'baseline'",
      "required": false,
      "description": "Cross-axis alignment of the trailing slot. Defaults to `center`; `top` pins it to the title\nline above a description, and `baseline` sits text trailing content on the title's baseline.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 47
      },
      "values": [
        "baseline",
        "center",
        "top"
      ],
      "values_complete": true,
      "default": "'center'",
      "default_kind": "source-expression"
    },
    {
      "name": "className",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 48
      }
    },
    {
      "name": "style",
      "type": "React.CSSProperties | undefined",
      "declared_type": "React.CSSProperties",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 49
      }
    },
    {
      "name": "testId",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Selector for the header row; `leading` and `trailing` content carry their own.",
      "source": {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 51
      }
    },
    {
      "name": "padding",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Padding on all four sides.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 10
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingX",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 12
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingY",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 14
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingTop",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Top padding. Overrides `paddingY` and `padding`.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 16
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingRight",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Right padding. Overrides `paddingX` and `padding`.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 18
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingBottom",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Bottom padding. Overrides `paddingY` and `padding`.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 20
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "paddingLeft",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "CdsSpace",
      "required": false,
      "description": "Left padding. Overrides `paddingX` and `padding`.",
      "source": {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 22
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    }
  ],
  "prop_shapes": {},
  "examples": [],
  "tokens": [
    {
      "name": "--cds-space-12",
      "light": "12px",
      "dark": "12px"
    },
    {
      "name": "--cds-space-48",
      "light": "48px",
      "dark": "48px"
    },
    {
      "name": "--cds-space-20",
      "light": "20px",
      "dark": "20px"
    },
    {
      "name": "--cds-type-h3-size",
      "light": "1.5rem",
      "dark": "1.5rem"
    },
    {
      "name": "--cds-type-body-size",
      "light": "1rem",
      "dark": "1rem"
    },
    {
      "name": "--cds-text-primary",
      "light": "#141410",
      "dark": "#f3f1ed"
    },
    {
      "name": "--cds-text-secondary",
      "light": "#646260",
      "dark": "#ffffff99"
    }
  ],
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-organization-sectionheader--default",
        "name": "Default",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "Default",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--default&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--small",
        "name": "Small",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "Small",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--small&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--large",
        "name": "Large",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "Large",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--large&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--with-leading",
        "name": "With Leading",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "WithLeading",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-leading&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--with-dropdown",
        "name": "With Dropdown",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "WithDropdown",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-dropdown&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--with-action",
        "name": "With Action",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "WithAction",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-action&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--with-value",
        "name": "With Value",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "WithValue",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-value&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--compared-with-list-section",
        "name": "Compared With List Section",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "ComparedWithListSection",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--compared-with-list-section&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--dark-theme",
        "name": "Dark Theme",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "DarkTheme",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--dark-theme&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--inverse",
        "name": "Inverse",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "Inverse",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--inverse&viewMode=story"
      },
      {
        "id": "cloaked-design-system-organization-sectionheader--guttered-container",
        "name": "Guttered Container",
        "title": "Cloaked Design System/Organization/SectionHeader",
        "exportName": "GutteredContainer",
        "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
        "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--guttered-container&viewMode=story"
      }
    ],
    "name": "SectionHeader",
    "id": "sectionheader",
    "category": "Organization"
  },
  "stories": [
    {
      "id": "cloaked-design-system-organization-sectionheader--default",
      "name": "Default",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "Default",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--default&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--small",
      "name": "Small",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "Small",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--small&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--large",
      "name": "Large",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "Large",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--large&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--with-leading",
      "name": "With Leading",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "WithLeading",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-leading&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--with-dropdown",
      "name": "With Dropdown",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "WithDropdown",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-dropdown&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--with-action",
      "name": "With Action",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "WithAction",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-action&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--with-value",
      "name": "With Value",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "WithValue",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--with-value&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--compared-with-list-section",
      "name": "Compared With List Section",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "ComparedWithListSection",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--compared-with-list-section&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--dark-theme",
      "name": "Dark Theme",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "DarkTheme",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--dark-theme&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--inverse",
      "name": "Inverse",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "Inverse",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--inverse&viewMode=story"
    },
    {
      "id": "cloaked-design-system-organization-sectionheader--guttered-container",
      "name": "Guttered Container",
      "title": "Cloaked Design System/Organization/SectionHeader",
      "exportName": "GutteredContainer",
      "source_path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
      "source_digest": "84fc6c885a4975d3205d3f9ec5e770e1c55fcde859a49adbffa746816e847d1d",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-organization-sectionheader--guttered-container&viewMode=story"
    }
  ],
  "stories_source": {
    "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.stories.tsx",
    "code": "import type { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\nimport { SectionHeader } from './SectionHeader';\nimport { Dropdown } from '../../controls/Dropdown/Dropdown';\nimport { List } from '../List/List';\nimport { Text } from '../../primitives/Text/Text';\nimport { IconTile } from '../../primitives/IconTile/IconTile';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { disabledControl, selectArgType } from '../../../storybook/controlOptions';\n\nconst SECTION_HEADER_SIZES = ['small', 'default', 'large'] as const;\nconst SECTION_HEADER_CONTRASTS = ['default', 'inverse'] as const;\n\nconst meta: Meta<typeof SectionHeader> = {\n    title: 'Cloaked Design System/Organization/SectionHeader',\n    component: SectionHeader,\n    parameters: {\n        a11y: { test: 'error' },\n        docs: {\n            description: {\n                component:\n                    'Standalone content heading row for page/body sections. Use List.Section for labels inside a List and Screen.Header for route chrome.',\n            },\n        },\n    },\n    argTypes: {\n        size: {\n            ...selectArgType(SECTION_HEADER_SIZES),\n            description: 'Title scale: `small` (body), `default` (20px h3), `large` (h3 paired with a description).',\n        },\n        title: { control: 'text', description: 'Visible section title.' },\n        contrast: {\n            ...selectArgType(SECTION_HEADER_CONTRASTS),\n            description: 'Title contrast: `default` (primary text) or `inverse` (inherits a tinted/inverted surface).',\n        },\n        description: {\n            control: 'text',\n            description: 'Secondary line beneath the title (mainly for the `large` size).',\n        },\n        leading: {\n            ...disabledControl,\n            description: 'Leading node (e.g. an icon or `IconTile`) shown before the title block.',\n        },\n        trailing: {\n            ...disabledControl,\n            description: 'Trailing control or status — `Dropdown`, action text, value, or icon.',\n        },\n    },\n};\nexport default meta;\ntype Story = StoryObj<typeof SectionHeader>;\n\nexport const Default: Story = { args: { title: 'Scan history' } };\n\nexport const Small: Story = { args: { size: 'small', title: 'Scan history' } };\n\nexport const Large: Story = {\n    args: {\n        size: 'large',\n        title: 'Monitor my data',\n        description: 'Your exposure dropped 22% this week.',\n    },\n};\n\nexport const WithLeading: Story = {\n    args: {\n        title: 'Monitoring',\n        leading: <IconTile glyph='dark-web-monitoring' tone='monitoring' label='Monitoring' />,\n    },\n    parameters: {\n        docs: { description: { story: 'Uses the `leading` slot for an icon before the title block.' } },\n    },\n};\n\nexport const WithDropdown: Story = {\n    args: {\n        title: 'Scan history',\n        trailing: <Dropdown label='All' />,\n    },\n};\n\nexport const WithAction: Story = {\n    args: {\n        title: 'Your info',\n        trailing: (\n            <Text variant='body' color='primary'>\n                Edit\n            </Text>\n        ),\n    },\n};\n\nexport const WithValue: Story = {\n    args: {\n        title: 'Completed tasks',\n        trailing: (\n            <Text variant='body' color='primary'>\n                70%\n            </Text>\n        ),\n    },\n};\n\nexport const ComparedWithListSection: Story = {\n    render: () => (\n        <VStack gap={24}>\n            <VStack gap={8}>\n                <SectionHeader title='SectionHeader' trailing={<Text variant='body'>Action</Text>} />\n                <Text variant='body-small' color='secondary'>\n                    Use this for standalone content headings outside list grouping.\n                </Text>\n            </VStack>\n\n            <VStack gap={8}>\n                <List>\n                    <List.Section title='List.Section'>\n                        <List.Item\n                            title='Grouped row'\n                            description='List.Section expands into a divider label inside List.'\n                        />\n                    </List.Section>\n                </List>\n            </VStack>\n        </VStack>\n    ),\n};\n\nexport const DarkTheme: Story = {\n    args: { title: 'Recent activity' },\n    globals: { theme: 'dark' },\n};\n\nexport const Inverse: Story = {\n    render: () => (\n        <div\n            style={{\n                background: 'var(--cds-feature-monitoring-backdrop)',\n                color: 'var(--cds-text-inverse)',\n                borderRadius: 'var(--cds-radius-lg)',\n            }}\n        >\n            <SectionHeader title='Frequently asked questions' contrast='inverse' />\n        </div>\n    ),\n};\n\nexport const GutteredContainer: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    'The 20px inline inset is a default, not a fixed value. A container that already owns the page ' +\n                    'gutter passes `paddingX={0}` so the title is not double-inset. The block axis stays owned by the ' +\n                    'component, so zeroing the inline axis cannot collapse the heading spacing.',\n            },\n        },\n    },\n    render: () => (\n        <VStack>\n            <div style={{ background: 'var(--cds-bg-surface)', paddingInline: 'var(--cds-space-20)' }}>\n                <SectionHeader title='History' description='Container owns the gutter.' paddingX={0} />\n            </div>\n            <div style={{ background: 'var(--cds-bg-surface)' }}>\n                <SectionHeader title='History' description='Header self-pads (default).' />\n            </div>\n        </VStack>\n    ),\n};\n"
  },
  "links": {
    "human": "/component-sectionheader",
    "json": "/data/components/sectionheader.json",
    "markdown": "/data/components/sectionheader.md",
    "storybook": "/storybook/?path=/story/cloaked-design-system-organization-sectionheader--default"
  },
  "contract_status": "preview",
  "contract_kind": "source-derived",
  "approval": "required",
  "api": {
    "method": "typescript-type-checker",
    "typescript_version": "5.9.3",
    "public_export": "SectionHeader",
    "public_path": "SectionHeader",
    "import_path": "@cloakedinc/design-system",
    "root_kind": "component",
    "entrypoints": [
      {
        "name": "SectionHeader",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
          "line": 58
        },
        "props_type": "SectionHeaderProps",
        "props": [
          {
            "name": "size",
            "type": "SectionHeaderSize | undefined",
            "declared_type": "SectionHeaderSize",
            "required": false,
            "description": "Controls block padding and slot alignment, not the title's type size. Defaults to `default`.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 32
            },
            "values": [
              "default",
              "large",
              "small"
            ],
            "values_complete": true,
            "default": "'default'",
            "default_kind": "source-expression"
          },
          {
            "name": "title",
            "type": "string",
            "declared_type": "string",
            "required": true,
            "description": "Section label. Always renders as a level-3 heading, whatever visual scale `size` sets.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 34
            }
          },
          {
            "name": "contrast",
            "type": "SectionHeaderContrast | undefined",
            "declared_type": "SectionHeaderContrast",
            "required": false,
            "description": "Title contrast for the surface. Defaults to `default`; use `inverse` on a tinted or inverted backdrop.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 36
            },
            "values": [
              "default",
              "inverse"
            ],
            "values_complete": true,
            "default": "'default'",
            "default_kind": "source-expression"
          },
          {
            "name": "description",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "Secondary line shown beneath the title (used by the large size).",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 38
            }
          },
          {
            "name": "leading",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "Leading content (e.g. an icon) shown before the title block.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 40
            }
          },
          {
            "name": "trailing",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "Trailing control or status — dropdown, action text, value, or icon.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 42
            }
          },
          {
            "name": "trailingAlign",
            "type": "\"center\" | \"top\" | \"baseline\" | undefined",
            "declared_type": "'center' | 'top' | 'baseline'",
            "required": false,
            "description": "Cross-axis alignment of the trailing slot. Defaults to `center`; `top` pins it to the title\nline above a description, and `baseline` sits text trailing content on the title's baseline.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 47
            },
            "values": [
              "baseline",
              "center",
              "top"
            ],
            "values_complete": true,
            "default": "'center'",
            "default_kind": "source-expression"
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 48
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 49
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Selector for the header row; `leading` and `trailing` content carry their own.",
            "source": {
              "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
              "line": 51
            }
          },
          {
            "name": "padding",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Padding on all four sides.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 10
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingX",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 12
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingY",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 14
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingTop",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Top padding. Overrides `paddingY` and `padding`.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 16
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingRight",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Right padding. Overrides `paddingX` and `padding`.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 18
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingBottom",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Bottom padding. Overrides `paddingY` and `padding`.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 20
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "paddingLeft",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "CdsSpace",
            "required": false,
            "description": "Left padding. Overrides `paddingX` and `padding`.",
            "source": {
              "path": "packages/design-system/src/components/layout/resolvePadding.ts",
              "line": 22
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      }
    ],
    "type_sources": [
      {
        "path": "packages/design-system/src/components/layout/resolvePadding.ts",
        "line": 8,
        "name": "PaddingProps",
        "code": "export interface PaddingProps {\n    /** Padding on all four sides. */\n    padding?: CdsSpace;\n    /** Horizontal padding (left + right). Overrides `padding` on the X axis. */\n    paddingX?: CdsSpace;\n    /** Vertical padding (top + bottom). Overrides `padding` on the Y axis. */\n    paddingY?: CdsSpace;\n    /** Top padding. Overrides `paddingY` and `padding`. */\n    paddingTop?: CdsSpace;\n    /** Right padding. Overrides `paddingX` and `padding`. */\n    paddingRight?: CdsSpace;\n    /** Bottom padding. Overrides `paddingY` and `padding`. */\n    paddingBottom?: CdsSpace;\n    /** Left padding. Overrides `paddingX` and `padding`. */\n    paddingLeft?: CdsSpace;\n}"
      },
      {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 8,
        "name": "SectionHeaderSize",
        "code": "export type SectionHeaderSize = 'small' | 'default' | 'large';"
      },
      {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 10,
        "name": "SectionHeaderContrast",
        "code": "export type SectionHeaderContrast = 'default' | 'inverse';"
      },
      {
        "path": "packages/design-system/src/components/organization/SectionHeader/SectionHeader.tsx",
        "line": 30,
        "name": "SectionHeaderProps",
        "code": "export interface SectionHeaderProps extends PaddingProps {\n    /** Controls block padding and slot alignment, not the title's type size. Defaults to `default`. */\n    size?: SectionHeaderSize;\n    /** Section label. Always renders as a level-3 heading, whatever visual scale `size` sets. */\n    title: string;\n    /** Title contrast for the surface. Defaults to `default`; use `inverse` on a tinted or inverted backdrop. */\n    contrast?: SectionHeaderContrast;\n    /** Secondary line shown beneath the title (used by the large size). */\n    description?: React.ReactNode;\n    /** Leading content (e.g. an icon) shown before the title block. */\n    leading?: React.ReactNode;\n    /** Trailing control or status — dropdown, action text, value, or icon. */\n    trailing?: React.ReactNode;\n    /**\n     * Cross-axis alignment of the trailing slot. Defaults to `center`; `top` pins it to the title\n     * line above a description, and `baseline` sits text trailing content on the title's baseline.\n     */\n    trailingAlign?: 'center' | 'top' | 'baseline';\n    className?: string;\n    style?: React.CSSProperties;\n    /** Selector for the header row; `leading` and `trailing` content carry their own. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/tokens/CdsSpace.ts",
        "line": 8,
        "name": "PUI_SPACES",
        "code": "PUI_SPACES = [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 120, 240] as const"
      },
      {
        "path": "packages/design-system/src/tokens/CdsSpace.ts",
        "line": 13,
        "name": "CdsSpace",
        "code": "export type CdsSpace = (typeof PUI_SPACES)[number];"
      }
    ],
    "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source."
  },
  "platforms": {
    "implemented": [
      "web"
    ],
    "native": "Imported design guidance only; no native implementation or parity verification in this preview.",
    "react": {
      "implementation": "local",
      "status": "preview",
      "parity": "web-reference"
    },
    "vue": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "swift": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "kotlin": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    }
  },
  "missing_facts": [
    {
      "code": "human-review-pending",
      "detail": "This local preview has no recorded human design or engineering sign-off."
    },
    {
      "code": "platform-parity-unverified",
      "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified."
    },
    {
      "code": "figma-mapping-unverified",
      "detail": "No current component-level Figma node and immutable revision have been verified for this contract."
    }
  ],
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "approved",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  }
}