{
  "name": "SectionTitle",
  "type": "component",
  "description": "A 24px section heading row: a brand-red icon, a 16/24 title, and an optional badge.",
  "export": "@gtmi/strix-react/atoms/section-title",
  "path": "@gtmi/strix-react/atoms/section-title",
  "props": [
    {
      "name": "title",
      "type": "ReactNode",
      "required": true,
      "description": "The heading text."
    },
    {
      "name": "titleAs",
      "type": "h2 | h3 | h4 | h5 | h6",
      "description": "Heading level wrapped around the title in a display:contents wrapper, so it joins the document outline without adding a layout box. No level is assumed: guessing produces a wrong outline nothing downstream catches."
    },
    {
      "name": "icon",
      "type": "ReactNode",
      "description": "Decorative leading glyph, rendered aria-hidden because the title already names the section."
    },
    {
      "name": "badge",
      "type": "ReactNode",
      "description": "Figma's Show Badge. A string becomes Badge size=\"small\"; any node renders as given so a caller can choose its variant."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "default": "false",
      "description": "Dims the title and icon and sets aria-disabled. Conveys inherited state only; a heading is not a control."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn(), so a caller's utility wins."
    }
  ],
  "parts": [
    {
      "name": "section-title",
      "description": "Root, via data-slot. Carries aria-disabled when disabled."
    },
    {
      "name": "section-title-icon",
      "description": "The decorative glyph wrapper, aria-hidden"
    },
    {
      "name": "section-title-text",
      "description": "The 16/24 title"
    },
    {
      "name": "section-title-badge",
      "description": "The optional badge wrapper"
    }
  ],
  "ai_tags": ["section", "heading", "title", "header", "cintel", "conversation-intelligence"],
  "since": "0.2.0",
  "figma": {
    "file": "zT3vGm4QlFEI2Jp9nxyFKI",
    "fileName": "Demo components library",
    "node": "22:5655",
    "component": ".section-title-label"
  },
  "tokens_used": [
    "--color-text-primary",
    "--color-text-disabled",
    "--color-icon-accent",
    "--color-icon-disabled",
    "--spacing-gap-200",
    "--text-size-body-medium",
    "--leading-height-body-medium",
    "--font-weight-body-medium-semibold"
  ],
  "notes": "THIS ATOM WAS PREVIOUSLY DECLINED, AND THE DECLINE WAS ABOUT STRIX RATHER THAN ABOUT THE DESIGN. The recorded reason was \"Strix has no SectionTitle, and the atom is not an argument for one: it is a heading, which in Strix is Typography in a flex row beside an icon\". That was true when written and had expired by the time it was re-read: InfoSection had since grown exactly this header inline -- icon, 16/24 title, disabled treatment -- so the component already existed, unnamed and unreusable. Extracting it is a smaller change than the duplication was. The general lesson is in docs/AGENTS.md §8: a decline that names a MISSING COMPONENT is provisional, because the library moves; a decline that names a measured contrast failure is not.\n\nTHE HEADLINE IS THE ICON'S RED, AND IT IS THE ONE ATOM WHERE THE TEXT/GRAPHIC DISTINCTION DECIDES THE OUTCOME. Figma binds raw color/brand/twilio-red #db132a, which measures 3.82:1 against its page. A glyph is a non-text graphic, so its floor is WCAG 1.4.11's 3:1 and NOT 1.4.3's 4.5:1 -- 3.82 passes as a graphic and fails as text. The binding records both rows deliberately so the two floors are never conflated: this red may carry the icon and must never carry the title. The contrast test enforces the split structurally, deriving the ink and the fill from two separate cva functions and holding them to 4.5 and 3 respectively.\n\n--color-icon-accent AND NOT --color-icon-destructive, matching InfoSection. Both clear 3:1, so this is a decision about meaning rather than contrast: the red is Twilio brand, and a destructive token would announce danger on every section header and be actively wrong the moment something genuinely destructive appeared beside it. Recorded as Decision 4 of the 0.1.2 GTM-990 plan.\n\nDISABLED IS INHERITED, NOT OWNED. A heading has no disabled state of its own: what a faint section title MEANS is that the section it labels is unavailable, which is a property of the container (a disabled fieldset, a gated step). It is a prop only so a caller who owns that container can pass it down, and it sets aria-disabled and nothing else. Both disabled values are exempt under 1.4.3 and 1.4.11 (inactive components), and the contrast test asserts the disabled treatment uses only *-disabled roles rather than measuring them -- note they do NOT land in colorTokensIn's disabledOnly bucket, which keys off a Tailwind disabled: variant prefix rather than a cva variant.\n\nTHE TITLE INK IS NOT FIGMA'S. gray-100 #dde0e6 measures 1.32:1 against the light surface, a consequence of the file being authored dark-only. --color-text-primary inverts per theme at 19.37:1 / 17.85:1.\n\nThe 24px row height is the title's line-height -- Figma reports no padding on the root -- and the badge is 24px too, so the row does not grow when it appears. Show Badge composes the already-ported .badge atom and is not re-derived here."
}