{
  "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": "hstack",
  "name": "HStack",
  "category": "Layout",
  "summary": "A horizontal flex row with a token-scale gap, cross-axis alignment, main-axis distribution, wrap, and scroll options.",
  "documentation": {
    "summary": "A horizontal flex row with a token-scale gap, cross-axis alignment, main-axis distribution, wrap, and scroll options.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "Horizontal flex row with a token-scale `gap` — the default replacement for hand-rolled\n`display:flex; flex-direction:row` wrappers."
      },
      {
        "heading": "When to use",
        "body": "Reach for `HStack` when items sit side by side in a single row — an icon beside a label, a\ntitle with a trailing action, a footer's paired buttons. `align` is the cross (vertical) axis\nand `justify` the main (horizontal) axis, so `justify=\"between\"` pins the first and last child\nto the row edges.\n\n-   Stacking elements **top to bottom** instead? Use `VStack`.\n-   Laying out **equal-width tiles** that wrap into a fixed column count? Use `Grid`.\n-   Row that **overflows and should swipe**? Use `scroll` for a plain overflow strip, or `Carousel`\n    for snapping one-per-view paging."
      }
    ],
    "usage": [],
    "examples": [],
    "source": "packages/design-system/src/components/layout/HStack/HStack.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/layout/HStack/HStack.tsx",
    "code": "import React from 'react';\nimport { Stack } from '../Stack';\nimport type { StackOwnProps } from '../Stack';\n\n/**\n * Shared Stack props as they apply to a row: `align` is the vertical axis, `justify` the horizontal.\n */\nexport type HStackProps = StackOwnProps;\n\n/**\n * Horizontal flex container with a token-scale `gap`. Replaces one-off\n * `display: flex; flex-direction: row` wrappers in app and DS code.\n */\nexport function HStack(props: HStackProps) {\n    return <Stack direction='row' {...props} />;\n}\n"
  },
  "spec": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "HStack",
      "status": "preview",
      "version": "1.0.0",
      "summary": "A horizontal flex row with a token-scale gap, cross-axis alignment, main-axis distribution, wrap, and scroll options."
    },
    "parts": [
      {
        "id": "root",
        "label": "Root",
        "description": "Flex row container. Structural: it lays out children and paints no surface of its own.",
        "required": true
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "row": {
          "label": "Row",
          "description": "The single horizontal flex layout."
        }
      },
      "sizes": {},
      "alignments": {
        "start": {
          "label": "Start"
        },
        "center": {
          "label": "Center"
        },
        "end": {
          "label": "End"
        },
        "stretch": {
          "label": "Stretch"
        },
        "baseline": {
          "label": "Baseline"
        }
      },
      "justifications": {
        "start": {
          "label": "Start"
        },
        "center": {
          "label": "Center"
        },
        "end": {
          "label": "End"
        },
        "between": {
          "label": "Between"
        },
        "around": {
          "label": "Around"
        },
        "evenly": {
          "label": "Evenly"
        }
      }
    },
    "variants": [
      {
        "id": "row",
        "label": "Row",
        "description": "Horizontal flex container.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [],
    "measurements": [
      {
        "id": "stack-gap",
        "label": "Row gap",
        "kind": "example-only",
        "token": "--cds-space-12",
        "value": 12,
        "unit": "px",
        "appliesTo": [
          "root"
        ],
        "notes": "Representative value: gap is author-configurable and accepts any step on the spacing scale. 12 is the value rendered and verified by the Playground story."
      }
    ],
    "layout": {
      "alignment": "align sets the cross (vertical) axis; justify sets the main (horizontal) axis.",
      "flow": "Children flow left to right and may wrap or scroll on overflow.",
      "notes": [
        "Use VStack for a column, Grid for equal-width tiles, and scroll or Carousel for a swipe strip."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Inherited",
          "description": "HStack sets no type; children own their text. Ramp noted for parity.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Transparent",
          "description": "HStack paints no background; the surface behind shows through.",
          "token": "--cds-bg-page"
        }
      ]
    },
    "states": [
      {
        "id": "default",
        "label": "Default",
        "description": "Static row that flexes to its children."
      },
      {
        "id": "wrap",
        "label": "Wrapped",
        "description": "Children wrap onto additional rows on overflow."
      },
      {
        "id": "scroll",
        "label": "Scroll",
        "description": "The row becomes a horizontal overflow strip with a hidden scrollbar."
      }
    ],
    "behavior": [
      {
        "label": "Token gap",
        "description": "gap uses the spacing scale; avoid hand-rolled flex wrappers."
      },
      {
        "label": "Padding",
        "description": "Padding props map to the spacing scale per edge."
      }
    ],
    "accessibility": [
      {
        "label": "Presentational",
        "description": "HStack is a layout container and adds no roles; order follows DOM order."
      },
      {
        "label": "Focus order",
        "description": "Reordering visually via justify does not change tab order."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Wrap vs scroll",
        "description": "Choose wrap to reflow onto new rows or scroll to keep a single overflow strip."
      },
      {
        "label": "Distribution",
        "description": "between, around, and evenly need free space to distribute children."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "None",
          "description": "HStack does not animate layout changes on its own."
        }
      ],
      "haptics": [
        {
          "label": "None",
          "description": "A layout container requests no haptics."
        }
      ]
    },
    "platformDifferences": []
  },
  "spec_source": "packages/design-system/src/components/layout/HStack/HStack.spec.json",
  "guidance_source": {
    "path": "packages/design-system/src/components/layout/HStack/HStack.mdx",
    "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec } from '../../../../.storybook/blocks';\nimport * as Stories from './HStack.stories';\nimport hStackSpec from './HStack.spec.json';\n\n<Meta of={Stories} />\n\n# HStack\n\nHorizontal flex row with a token-scale `gap` — the default replacement for hand-rolled\n`display:flex; flex-direction:row` wrappers.\n\n<Canvas of={Stories.Playground} />\n\n## When to use\n\nReach for `HStack` when items sit side by side in a single row — an icon beside a label, a\ntitle with a trailing action, a footer's paired buttons. `align` is the cross (vertical) axis\nand `justify` the main (horizontal) axis, so `justify=\"between\"` pins the first and last child\nto the row edges.\n\n-   Stacking elements **top to bottom** instead? Use `VStack`.\n-   Laying out **equal-width tiles** that wrap into a fixed column count? Use `Grid`.\n-   Row that **overflows and should swipe**? Use `scroll` for a plain overflow strip, or `Carousel`\n    for snapping one-per-view paging.\n\n<Canvas of={Stories.ScrollStrip} />\n\n## Design Guidelines\n\n<ComponentSpec spec={hStackSpec} />\n\n## Props\n\n<Controls of={Stories.Playground} />\n"
  },
  "props": [
    {
      "name": "gap",
      "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
      "declared_type": "StackGap",
      "required": false,
      "description": "Space between children, in `--cds-space-*` steps.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 34
      },
      "values": [
        0,
        12,
        120,
        16,
        20,
        24,
        240,
        32,
        4,
        40,
        48,
        56,
        64,
        72,
        8,
        80,
        96
      ],
      "values_complete": true
    },
    {
      "name": "align",
      "type": "StackAlign | undefined",
      "declared_type": "StackAlign",
      "required": false,
      "description": "Cross-axis alignment (`align-items`).",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 36
      },
      "values": [
        "baseline",
        "center",
        "end",
        "start",
        "stretch"
      ],
      "values_complete": true
    },
    {
      "name": "justify",
      "type": "StackJustify | undefined",
      "declared_type": "StackJustify",
      "required": false,
      "description": "Main-axis distribution (`justify-content`).",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 38
      },
      "values": [
        "around",
        "between",
        "center",
        "end",
        "evenly",
        "start"
      ],
      "values_complete": true
    },
    {
      "name": "wrap",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Reflow children onto new lines on overflow, where `scroll` keeps them on one line.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 40
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    },
    {
      "name": "scroll",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Turn the stack into a swipeable overflow strip on the main axis (HStack\nscrolls horizontally, VStack vertically) and hide the scrollbar. For\ncarousels, set `scroll-snap-align` on the children.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 46
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    },
    {
      "name": "as",
      "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
      "declared_type": "React.ElementType",
      "required": false,
      "description": "Rendered element. Defaults to `div`.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 48
      }
    },
    {
      "name": "className",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 49
      }
    },
    {
      "name": "style",
      "type": "React.CSSProperties | undefined",
      "declared_type": "React.CSSProperties",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 50
      }
    },
    {
      "name": "children",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 51
      }
    },
    {
      "name": "testId",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Optional test selector, placed on the `as` element.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 53
      }
    },
    {
      "name": "id",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "DOM id for aria relationships such as `aria-describedby`.",
      "source": {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 55
      }
    },
    {
      "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-type-body-size",
      "light": "1rem",
      "dark": "1rem"
    },
    {
      "name": "--cds-bg-page",
      "light": "#f3f1ed",
      "dark": "#141410"
    }
  ],
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-layout-hstack--playground",
        "name": "Playground",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "Playground",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--playground&viewMode=story"
      },
      {
        "id": "cloaked-design-system-layout-hstack--space-between",
        "name": "Space Between",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "SpaceBetween",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--space-between&viewMode=story"
      },
      {
        "id": "cloaked-design-system-layout-hstack--align-matrix",
        "name": "Align Matrix",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "AlignMatrix",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--align-matrix&viewMode=story"
      },
      {
        "id": "cloaked-design-system-layout-hstack--justify-matrix",
        "name": "Justify Matrix",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "JustifyMatrix",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--justify-matrix&viewMode=story"
      },
      {
        "id": "cloaked-design-system-layout-hstack--wrapped",
        "name": "Wrapped",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "Wrapped",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--wrapped&viewMode=story"
      },
      {
        "id": "cloaked-design-system-layout-hstack--scroll-strip",
        "name": "Scroll Strip",
        "title": "Cloaked Design System/Layout/HStack",
        "exportName": "ScrollStrip",
        "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
        "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--scroll-strip&viewMode=story"
      }
    ],
    "name": "HStack",
    "id": "hstack",
    "category": "Layout"
  },
  "stories": [
    {
      "id": "cloaked-design-system-layout-hstack--playground",
      "name": "Playground",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "Playground",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--playground&viewMode=story"
    },
    {
      "id": "cloaked-design-system-layout-hstack--space-between",
      "name": "Space Between",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "SpaceBetween",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--space-between&viewMode=story"
    },
    {
      "id": "cloaked-design-system-layout-hstack--align-matrix",
      "name": "Align Matrix",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "AlignMatrix",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--align-matrix&viewMode=story"
    },
    {
      "id": "cloaked-design-system-layout-hstack--justify-matrix",
      "name": "Justify Matrix",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "JustifyMatrix",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--justify-matrix&viewMode=story"
    },
    {
      "id": "cloaked-design-system-layout-hstack--wrapped",
      "name": "Wrapped",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "Wrapped",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--wrapped&viewMode=story"
    },
    {
      "id": "cloaked-design-system-layout-hstack--scroll-strip",
      "name": "Scroll Strip",
      "title": "Cloaked Design System/Layout/HStack",
      "exportName": "ScrollStrip",
      "source_path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
      "source_digest": "4571818bad2143ed59949a90a10013324d43c3127ebececa9e518d1493296c5b",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-hstack--scroll-strip&viewMode=story"
    }
  ],
  "stories_source": {
    "path": "packages/design-system/src/components/layout/HStack/HStack.stories.tsx",
    "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { cn } from '../../../utilities';\nimport {\n    SPACE_OPTIONS,\n    STACK_ALIGN_OPTIONS,\n    STACK_JUSTIFY_OPTIONS,\n    selectArgType,\n} from '../../../storybook/controlOptions';\nimport { HStack } from './HStack';\nimport { Card } from '../../cards/Card/Card';\nimport { Text } from '../../primitives/Text/Text';\nimport { VStack } from '../VStack/VStack';\nimport styles from './HStack.stories.module.scss';\n\nconst Box = ({ label }: { label: string }) => (\n    <Card radius='sm'>\n        <Card.Body padding='compact'>\n            <Text variant='body-small'>{label}</Text>\n        </Card.Body>\n    </Card>\n);\n\nconst AlignmentItem = ({ label, tall, action }: { label: string; tall?: boolean; action?: boolean }) => (\n    <Card\n        radius='md'\n        className={cn(styles.alignmentItem, tall && styles.alignmentItemTall, action && styles.alignmentItemAction)}\n    >\n        <Card.Body padding='compact' align='center' justify='center' grow>\n            <Text variant='body-small'>{label}</Text>\n        </Card.Body>\n    </Card>\n);\n\nconst meta: Meta<typeof HStack> = {\n    title: 'Cloaked Design System/Layout/HStack',\n    component: HStack,\n    parameters: {\n        a11y: { test: 'error' },\n        docs: {\n            description: {\n                component:\n                    'Horizontal flex row with a token-scale `gap` — the default replacement for hand-rolled ' +\n                    '`display:flex; flex-direction:row` wrappers. `align` is the cross (vertical) axis and ' +\n                    '`justify` the main (horizontal) axis. Reach for `VStack` for a column, `Grid` for ' +\n                    'equal-width tiles, and `scroll` (or `Carousel`) for an overflowing swipe strip.',\n            },\n        },\n    },\n    args: {\n        gap: 12,\n        align: 'center',\n        children: [<Box key='a' label='One' />, <Box key='b' label='Two' />, <Box key='c' label='Three' />],\n    },\n    argTypes: {\n        gap: { ...selectArgType(SPACE_OPTIONS), description: 'Space between children, in `--cds-space-*` steps.' },\n        align: {\n            ...selectArgType(STACK_ALIGN_OPTIONS),\n            description: 'Cross-axis (vertical) alignment of children (`align-items`).',\n        },\n        justify: {\n            ...selectArgType(STACK_JUSTIFY_OPTIONS),\n            description: 'Main-axis (horizontal) distribution of children (`justify-content`).',\n        },\n        wrap: { description: 'Allow children to wrap onto multiple rows when they overflow.' },\n        scroll: { description: 'Turn the row into a horizontal overflow strip with a hidden scrollbar.' },\n        padding: { ...selectArgType(SPACE_OPTIONS), description: 'Uniform inner padding, in `--cds-space-*` steps.' },\n        paddingX: {\n            ...selectArgType(SPACE_OPTIONS),\n            description: 'Horizontal padding override, in `--cds-space-*` steps.',\n        },\n        paddingY: {\n            ...selectArgType(SPACE_OPTIONS),\n            description: 'Vertical padding override, in `--cds-space-*` steps.',\n        },\n        paddingTop: { ...selectArgType(SPACE_OPTIONS), description: 'Top padding override, in `--cds-space-*` steps.' },\n        paddingRight: {\n            ...selectArgType(SPACE_OPTIONS),\n            description: 'Right padding override, in `--cds-space-*` steps.',\n        },\n        paddingBottom: {\n            ...selectArgType(SPACE_OPTIONS),\n            description: 'Bottom padding override, in `--cds-space-*` steps.',\n        },\n        paddingLeft: {\n            ...selectArgType(SPACE_OPTIONS),\n            description: 'Left padding override, in `--cds-space-*` steps.',\n        },\n    },\n};\nexport default meta;\ntype Story = StoryObj<typeof HStack>;\n\nexport const Playground: Story = {};\n\nexport const SpaceBetween: Story = {\n    parameters: {\n        docs: { description: { story: '`justify=\"between\"` pins the first and last child to the row edges.' } },\n    },\n    args: {\n        justify: 'between',\n        children: [<Box key='a' label='Left' />, <Box key='b' label='Right' />],\n    },\n};\n\nexport const AlignMatrix: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    'Every `align` value against items of differing height. `stretch` fills the row height; ' +\n                    '`baseline` aligns text baselines rather than boxes.',\n            },\n        },\n    },\n    render: () => (\n        <VStack gap={16}>\n            {STACK_ALIGN_OPTIONS.map(align => (\n                <VStack key={align} gap={8}>\n                    <Text variant='body-small' color='secondary'>\n                        align {align}\n                    </Text>\n                    <Card surface='highlight' radius='lg' className={styles.alignmentPanel}>\n                        <HStack gap={12} align={align} padding={12}>\n                            <AlignmentItem label='Short' />\n                            <AlignmentItem label='Tall' tall />\n                            <AlignmentItem label='Action' action />\n                        </HStack>\n                    </Card>\n                </VStack>\n            ))}\n        </VStack>\n    ),\n};\n\nexport const JustifyMatrix: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    'Every `justify` value. Distribution needs free space: `between`/`around`/`evenly` spread ' +\n                    'items across the row, while `start`/`center`/`end` cluster them.',\n            },\n        },\n    },\n    render: () => (\n        <VStack gap={16}>\n            {STACK_JUSTIFY_OPTIONS.map(justify => (\n                <VStack key={justify} gap={8}>\n                    <Text variant='body-small' color='secondary'>\n                        justify {justify}\n                    </Text>\n                    <HStack gap={8} justify={justify}>\n                        <Box label='One' />\n                        <Box label='Two' />\n                        <Box label='Three' />\n                    </HStack>\n                </VStack>\n            ))}\n        </VStack>\n    ),\n};\n\nexport const Wrapped: Story = {\n    parameters: {\n        docs: {\n            description: { story: '`wrap` lets children flow onto a new row once they exceed the container width.' },\n        },\n    },\n    args: {\n        gap: 8,\n        wrap: true,\n        children: ['Identity', 'Inbox', 'Automations', 'Guard', 'Numbers'].map(label => (\n            <Box key={label} label={label} />\n        )),\n    },\n    decorators: [Story => <div style={{ width: 'var(--cds-size-240)' }}>{Story()}</div>],\n};\n\nexport const ScrollStrip: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: '`scroll` makes the row a horizontal overflow strip (hidden scrollbar) instead of wrapping.',\n            },\n        },\n    },\n    args: {\n        gap: 12,\n        scroll: true,\n        paddingX: 16,\n        children: ['Scan', 'Remove', 'Monitor', 'Protect', 'Review'].map(label => (\n            <div key={label} style={{ flex: '0 0 var(--cds-size-160)' }}>\n                <Box label={label} />\n            </div>\n        )),\n    },\n    decorators: [Story => <div style={{ width: 'var(--cds-size-320)' }}>{Story()}</div>],\n};\n"
  },
  "links": {
    "human": "/component-hstack",
    "json": "/data/components/hstack.json",
    "markdown": "/data/components/hstack.md",
    "storybook": "/storybook/?path=/story/cloaked-design-system-layout-hstack--playground"
  },
  "contract_status": "preview",
  "contract_kind": "source-derived",
  "approval": "required",
  "api": {
    "method": "typescript-type-checker",
    "typescript_version": "5.9.3",
    "public_export": "HStack",
    "public_path": "HStack",
    "import_path": "@cloakedinc/design-system",
    "root_kind": "component",
    "entrypoints": [
      {
        "name": "HStack",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/layout/HStack/HStack.tsx",
          "line": 14
        },
        "props_type": "StackOwnProps",
        "props": [
          {
            "name": "gap",
            "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined",
            "declared_type": "StackGap",
            "required": false,
            "description": "Space between children, in `--cds-space-*` steps.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 34
            },
            "values": [
              0,
              12,
              120,
              16,
              20,
              24,
              240,
              32,
              4,
              40,
              48,
              56,
              64,
              72,
              8,
              80,
              96
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "StackAlign | undefined",
            "declared_type": "StackAlign",
            "required": false,
            "description": "Cross-axis alignment (`align-items`).",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 36
            },
            "values": [
              "baseline",
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "StackJustify | undefined",
            "declared_type": "StackJustify",
            "required": false,
            "description": "Main-axis distribution (`justify-content`).",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 38
            },
            "values": [
              "around",
              "between",
              "center",
              "end",
              "evenly",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "wrap",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Reflow children onto new lines on overflow, where `scroll` keeps them on one line.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 40
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          },
          {
            "name": "scroll",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Turn the stack into a swipeable overflow strip on the main axis (HStack\nscrolls horizontally, VStack vertically) and hide the scrollbar. For\ncarousels, set `scroll-snap-align` on the children.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 46
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          },
          {
            "name": "as",
            "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
            "declared_type": "React.ElementType",
            "required": false,
            "description": "Rendered element. Defaults to `div`.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 48
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 49
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 50
            }
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 51
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Optional test selector, placed on the `as` element.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 53
            }
          },
          {
            "name": "id",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "DOM id for aria relationships such as `aria-describedby`.",
            "source": {
              "path": "packages/design-system/src/components/layout/Stack.tsx",
              "line": 55
            }
          },
          {
            "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/HStack/HStack.tsx",
        "line": 8,
        "name": "HStackProps",
        "code": "export type HStackProps = StackOwnProps;"
      },
      {
        "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/layout/Stack.tsx",
        "line": 8,
        "name": "StackGap",
        "code": "export type StackGap = CdsSpace;"
      },
      {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 9,
        "name": "StackAlign",
        "code": "export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';"
      },
      {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 10,
        "name": "StackJustify",
        "code": "export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';"
      },
      {
        "path": "packages/design-system/src/components/layout/Stack.tsx",
        "line": 32,
        "name": "StackOwnProps",
        "code": "export interface StackOwnProps extends PaddingProps {\n    /** Space between children, in `--cds-space-*` steps. */\n    gap?: StackGap;\n    /** Cross-axis alignment (`align-items`). */\n    align?: StackAlign;\n    /** Main-axis distribution (`justify-content`). */\n    justify?: StackJustify;\n    /** Reflow children onto new lines on overflow, where `scroll` keeps them on one line. */\n    wrap?: boolean;\n    /**\n     * Turn the stack into a swipeable overflow strip on the main axis (HStack\n     * scrolls horizontally, VStack vertically) and hide the scrollbar. For\n     * carousels, set `scroll-snap-align` on the children.\n     */\n    scroll?: boolean;\n    /** Rendered element. Defaults to `div`. */\n    as?: React.ElementType;\n    className?: string;\n    style?: React.CSSProperties;\n    children?: React.ReactNode;\n    /** Optional test selector, placed on the `as` element. */\n    testId?: string;\n    /** DOM id for aria relationships such as `aria-describedby`. */\n    id?: 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."
  }
}