{
  "example": "import { Swatch } from \"@godxjp/ui/data-display\";\nimport { Text } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n<Flex align=\"center\" gap=\"sm\">\n  <Swatch color={brand.primary_color} aria-label={`プライマリカラー: ${brand.primary_color}`} />\n  <Text weight=\"medium\">{brand.name}</Text>\n</Flex>",
  "group": "data-display",
  "importPath": "@godxjp/ui/data-display",
  "name": "Swatch",
  "props": [
    {
      "description": "The colour to show, as any CSS colour value (#7C3AED, rgb(…), oklch(…)). It is DATA, the same axis as Badge's `color`: a value a person picked in a settings screen, so it arrives as a prop and never enters a stylesheet. A colour that MEANS something (success, overdue) is not this prop — use Badge `tone` or Legend, which name the meaning.",
      "name": "color",
      "required": true,
      "type": "string"
    },
    {
      "description": "The sample's accessible NAME, and the reason a swatch can be shown with no visible label: say what the colour is for AND what it is, e.g. `プライマリカラー: #7C3AED`. With it the mark is role=img and announces that sentence; WITHOUT it the mark is aria-hidden, which is correct only when a visible line beside it already states the colour. Colour is never the sole carrier of meaning either way (WCAG 1.4.1).",
      "name": "aria-label",
      "type": "string"
    }
  ],
  "related": [
    "Legend — the KEY for a colour-coded surface: closed semantic tones, each with required words. Swatch is one sample of an arbitrary value and takes its name from aria-label.",
    "ColorPicker — the INPUT for the same value. Swatch displays; ColorPicker chooses.",
    "Badge — a chip that labels a thing (and can carry the entity's own `color` as a wash). Swatch is the colour itself, with no chip around it."
  ],
  "rules": [],
  "storyPath": "data-display/swatch.tsx",
  "tagline": "A READ-ONLY sample of ONE colour a person chose — a brand's primary_color, a calendar category, a tag tint. The colour is a VALUE on the element, never a token in a stylesheet.",
  "usage": [
    "DO import from `@godxjp/ui/data-display`: `import { Swatch } from \"@godxjp/ui/data-display\";`",
    "DO give it an aria-label whenever it is the only thing on screen saying what the colour is, and omit the label when the row's own text already says it — a swatch that repeats its neighbour announces the same thing twice.",
    "DO let the hairline do its job: it is built in so a white or near-white value is still a visible sample on a white card, and it survives forced-colors (the colour IS the content here, so it is not repainted).",
    "DON'T reach for it for a STATUS colour. success/warning/overdue are meanings, and a meaning belongs on Badge `tone` or in a Legend, which spell the meaning out in words.",
    "DON'T render a disabled ColorPicker to display a colour — that is an input that looks broken. ColorPicker is for CHOOSING the value; Swatch is for showing it.",
    "DON'T size it with a className. The mark's size, radius and hairline are the --swatch-* tokens, so a theme retunes every sample at once."
  ],
  "useCases": [
    "An organisation's brand card: primary_color and secondary_color beside the organisation name, read-only, with the hex in the accessible name.",
    "A list of calendar categories, label colours or tags where each row's own text already names the colour and the mark is purely visual.",
    "A settings screen showing the colour currently saved, next to the ColorPicker that changes it.",
    "A table cell whose column is 'colour' — one sample per row, named by the row header."
  ]
}