@wallarm-org/design-system 3.4.1-rc-fix-data-display-category.3 → 4.0.0

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "3.4.0",
-  "generatedAt": "2026-10-22T11:24:18.052Z",
+  "generatedAt": "2026-10-22T11:42:57.295Z",
   "components": [
     {
       "name": "Accordion",
@@ -14367,12 +14367,12 @@
         },
         {
           "name": "ColorVariants",
-          "code": "() => (\n  <table className='w-full'>\n    <thead>\n      <tr>\n        {Object.keys(BadgeTypeEnum).map(type => (\n          <th key={type} className='sb-annotation p-8 text-left'>\n            {type}\n          </th>\n        ))}\n      </tr>\n    </thead>\n    <tbody>\n      {Object.entries(BadgeColorEnum).map(([label, color]) => (\n        <tr key={color}>\n          {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n            <td key={type} className='p-8'>\n              <Badge type={type} color={color}>\n                {label}\n              </Badge>\n            </td>\n          ))}\n        </tr>\n      ))}\n    </tbody>\n  </table>\n)",
+          "code": "() => (\n  <table className='w-full'>\n    <thead>\n      <tr>\n        {Object.keys(BadgeTypeEnum).map(type => (\n          <th key={type} className='sb-annotation p-8 text-left'>\n            {type}\n          </th>\n        ))}\n      </tr>\n    </thead>\n    <tbody>\n      {Object.entries(BadgeColorEnum).map(([label, color]) => (\n        <tr key={color}>\n          {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n            <td key={type} className='p-8'>\n              <Badge data-testid='badge' type={type} color={color}>\n                {label}\n              </Badge>\n            </td>\n          ))}\n        </tr>\n      ))}\n    </tbody>\n  </table>\n)",
           "description": "The full palette. Every colour already means something in the system, so borrowing one for\ndecoration teaches the reader the wrong thing."
         },
         {
           "name": "ContentVariants",
-          "code": "() => (\n  <table className='w-full'>\n    <thead>\n      <tr>\n        {Object.keys(BadgeTypeEnum).map(type => (\n          <th key={type} className='sb-annotation p-8 text-left'>\n            {type}\n          </th>\n        ))}\n      </tr>\n    </thead>\n    <tbody>\n      {Object.entries(BadgeColorEnum).map(([label, color]) => (\n        <Fragment key={color}>\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  {label}\n\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  <PenTool />\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  <PenTool />\n                  {label}\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color} variant='dotted'>\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color} variant='dotted'>\n                  {label}\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  {label}\n                  <Info />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge type={type} color={color}>\n                  <PenTool />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          {badgeColorsMuted.includes(color) && (\n            <tr key={color}>\n              {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n                <td key={type} className='p-8'>\n                  {isMutedSupported(type, color) ? (\n                    <Badge type={type} color={color} muted>\n                      {capitalize(color)}\n                    </Badge>\n                  ) : null}\n                </td>\n              ))}\n            </tr>\n          )}\n        </Fragment>\n      ))}\n    </tbody>\n  </table>\n)",
+          "code": "() => (\n  <table className='w-full'>\n    <thead>\n      <tr>\n        {Object.keys(BadgeTypeEnum).map(type => (\n          <th key={type} className='sb-annotation p-8 text-left'>\n            {type}\n          </th>\n        ))}\n      </tr>\n    </thead>\n    <tbody>\n      {Object.entries(BadgeColorEnum).map(([label, color]) => (\n        <Fragment key={color}>\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  {label}\n\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  <PenTool />\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  <PenTool />\n                  {label}\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color} variant='dotted'>\n                  {label}\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color} variant='dotted'>\n                  {label}\n                  <X />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  {label}\n                  <Info />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          <tr>\n            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n              <td key={type} className='p-8'>\n                <Badge data-testid='badge' type={type} color={color}>\n                  <PenTool />\n                </Badge>\n              </td>\n            ))}\n          </tr>\n\n          {badgeColorsMuted.includes(color) && (\n            <tr key={color}>\n              {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n                <td key={type} className='p-8'>\n                  {isMutedSupported(type, color) ? (\n                    <Badge data-testid='badge' type={type} color={color} muted>\n                      {capitalize(color)}\n                    </Badge>\n                  ) : null}\n                </td>\n              ))}\n            </tr>\n          )}\n        </Fragment>\n      ))}\n    </tbody>\n  </table>\n)",
           "description": "What happens as the content grows. A badge does not truncate, so long text widens the row\nrather than being cut."
         }
       ]
@@ -22240,17 +22240,17 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ...args }) => {\n  // `data-last-click` records which target handled the click. It renders nothing,\n  // and it is what the click-isolation e2e asserts on — the story used to prove\n  // the same thing by writing to the console.\n  const [lastClick, setLastClick] = useState<'card' | 'button' | 'none'>('none');\n\n  return (\n    <Card\n      onClick={e => {\n        onCardClick(e);\n        setLastClick('card');\n      }}\n      data-last-click={lastClick}\n      {...args}\n    >\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n\n      <CardContent>Card description</CardContent>\n\n      <CardFooter>\n        <Button\n          variant='secondary'\n          color='neutral'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            onButtonClick(e);\n            setLastClick('button');\n          }}\n        >\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}",
+          "code": "({ ...args }) => {\n  // `data-last-click` records which target handled the click. It renders nothing,\n  // and it is what the click-isolation e2e asserts on — the story used to prove\n  // the same thing by writing to the console.\n  const [lastClick, setLastClick] = useState<'card' | 'button' | 'none'>('none');\n\n  return (\n    <Card\n      data-testid='card'\n      onClick={e => {\n        onCardClick(e);\n        setLastClick('card');\n      }}\n      data-last-click={lastClick}\n      {...args}\n    >\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n\n      <CardContent>Card description</CardContent>\n\n      <CardFooter>\n        <Button\n          variant='secondary'\n          color='neutral'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            onButtonClick(e);\n            setLastClick('button');\n          }}\n        >\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}",
           "description": "The full stack — `CardHeader` with a `CardTitle`, `CardContent`, and a `CardFooter`\nfor actions — carrying a handler, so the footer button and the card are two\nseparate targets."
         },
         {
           "name": "Variants",
-          "code": "() => (\n  <VStack gap={24} align='center'>\n    <HStack gap={16} align='center'>\n      <Card color='primary'>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a primary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card color='secondary'>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a secondary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n\n    <HStack gap={16} align='center'>\n      <Card color='primary' onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a primary card variant with onClick event</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card color='secondary' onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a secondary card variant with onClick event</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n\n    <HStack gap={16} align='center'>\n      <Card color='primary' disabled onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a disabled primary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card color='secondary' disabled onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a disabled secondary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n  </VStack>\n)",
+          "code": "() => (\n  <VStack gap={24} align='center'>\n    <HStack gap={16} align='center'>\n      <Card color='primary'>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a primary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card color='secondary'>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a secondary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n\n    <HStack gap={16} align='center'>\n      <Card color='primary' onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a primary card variant with onClick event</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card color='secondary' onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a secondary card variant with onClick event</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n\n    <HStack gap={16} align='center'>\n      <Card data-testid='disabled-card' color='primary' disabled onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Primary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a disabled primary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card data-testid='disabled-card' color='secondary' disabled onClick={onCardClick}>\n        <CardHeader>\n          <CardTitle>Secondary card</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>This is a disabled secondary card variant</CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </HStack>\n  </VStack>\n)",
           "description": "`primary` sits on the page surface and `secondary` on a tinted fill, each shown\nplain, with a handler, and disabled — where the card fades and stops answering\nthe pointer."
         },
         {
           "name": "VariousContent",
-          "code": "() => (\n  <HStack gap={16}>\n    <VStack gap={16} align='stretch'>\n      <Card>\n        <CardHeader>\n          <CardTitle>Card title</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>\n          Card description Very long! Even if it goes to the second line, it won't break anything.\n          It works perfectly! Can you see? Amazing yeah?\n        </CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Card title</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <CodeSnippetRoot code='npx wasd-new@latest add code-snippet' language='bash'>\n            <CodeSnippetActions>\n              <CodeSnippetCopyButton />\n            </CodeSnippetActions>\n            <CodeSnippetContent>\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </VStack>\n\n    <Card>\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n      <CardContent>\n        <Field>\n          <FieldLabel>Label</FieldLabel>\n          <Input placeholder='Placeholder' />\n          <FieldDescription>Input description</FieldDescription>\n        </Field>\n      </CardContent>\n      <CardFooter>\n        <Button variant='secondary' size='small' color='neutral'>\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n\n    <VStack gap={16}>\n      <Card>\n        <CardHeader>\n          <CardTitle icon={<CircleDashed />}>Card title</CardTitle>\n        </CardHeader>\n        <CardContent>Card description.</CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle icon={<CircleDashed />}>Card title</CardTitle>\n        </CardHeader>\n      </Card>\n    </VStack>\n  </HStack>\n)",
+          "code": "() => (\n  <HStack gap={16}>\n    <VStack gap={16} align='stretch'>\n      <Card data-testid='card'>\n        <CardHeader>\n          <CardTitle>Card title</CardTitle>\n          <Badge size='medium' type='solid' color='slate'>\n            Badge\n          </Badge>\n        </CardHeader>\n        <CardContent>\n          Card description Very long! Even if it goes to the second line, it won't break anything.\n          It works perfectly! Can you see? Amazing yeah?\n        </CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Card title</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <CodeSnippetRoot code='npx wasd-new@latest add code-snippet' language='bash'>\n            <CodeSnippetActions>\n              <CodeSnippetCopyButton />\n            </CodeSnippetActions>\n            <CodeSnippetContent>\n              <CodeSnippetCode />\n            </CodeSnippetContent>\n          </CodeSnippetRoot>\n        </CardContent>\n        <CardFooter>\n          <Button variant='secondary' size='small' color='neutral'>\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </VStack>\n\n    <Card>\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n      <CardContent>\n        <Field>\n          <FieldLabel>Label</FieldLabel>\n          <Input placeholder='Placeholder' />\n          <FieldDescription>Input description</FieldDescription>\n        </Field>\n      </CardContent>\n      <CardFooter>\n        <Button variant='secondary' size='small' color='neutral'>\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n\n    <VStack gap={16}>\n      <Card>\n        <CardHeader>\n          <CardTitle icon={<CircleDashed />}>Card title</CardTitle>\n        </CardHeader>\n        <CardContent>Card description.</CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle icon={<CircleDashed />}>Card title</CardTitle>\n        </CardHeader>\n      </Card>\n    </VStack>\n  </HStack>\n)",
           "description": "What the block tolerates: body copy that wraps, a `CodeSnippet`, a whole `Field`,\na `CardTitle` with an `icon`, and a header standing on its own with nothing under it."
         }
       ]
@@ -35356,7 +35356,7 @@
         },
         {
           "name": "ShowMore",
-          "code": "() => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '500px' }}>\n    <div>\n      <p className='sb-annotation mb-8'>12 lines, clipped at 7 — 5 hidden</p>\n      <CodeSnippetRoot code={showMoreCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n    <div>\n      <p className='sb-annotation mb-8'>9 lines, clipped at 7 — 2 hidden, no button</p>\n      <CodeSnippetRoot code={showMoreThresholdCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n    <div>\n      <p className='sb-annotation mb-8'>the button rendered by hand</p>\n      <CodeSnippetRoot code={showMoreCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n        <CodeSnippetShowMoreButton data-analytics-id='CODE_SHOW_MORE' />\n      </CodeSnippetRoot>\n    </div>\n  </div>\n)",
+          "code": "() => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '500px' }}>\n    <div>\n      <p className='sb-annotation mb-8'>12 lines, clipped at 7 — 5 hidden</p>\n      <CodeSnippetRoot\n        code={showMoreCode}\n        language='text'\n        maxLines={7}\n        data-testid='show-more-clipped'\n      >\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n    <div>\n      <p className='sb-annotation mb-8'>9 lines, clipped at 7 — 2 hidden, no button</p>\n      <CodeSnippetRoot\n        code={showMoreThresholdCode}\n        language='text'\n        maxLines={7}\n        data-testid='show-more-threshold'\n      >\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n      </CodeSnippetRoot>\n    </div>\n    <div>\n      <p className='sb-annotation mb-8'>the button rendered by hand</p>\n      <CodeSnippetRoot code={showMoreCode} language='text' maxLines={7}>\n        <CodeSnippetContent>\n          <CodeSnippetCode />\n        </CodeSnippetContent>\n        <CodeSnippetShowMoreButton data-analytics-id='CODE_SHOW_MORE' />\n      </CodeSnippetRoot>\n    </div>\n  </div>\n)",
           "description": "`maxLines` clips the block and adds the control itself — but only when it would hide at\nleast three lines, so the middle snippet stays open; the third passes props to the real\nbutton by rendering `CodeSnippetShowMoreButton` in place of the automatic one."
         },
         {
@@ -39361,7 +39361,7 @@
         },
         {
           "name": "ReadOnly",
-          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date</span>\n      <DateInput readOnly defaultValue={sampleDate} />\n    </VStack>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date + time</span>\n      <DateInput readOnly granularity='minute' defaultValue={sampleDateTime} />\n    </VStack>\n  </HStack>\n)",
+          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date</span>\n      <DateInput readOnly defaultValue={sampleDate} data-testid='date-input-read-only' />\n    </VStack>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date + time</span>\n      <DateInput\n        readOnly\n        granularity='minute'\n        defaultValue={sampleDateTime}\n        data-testid='date-input-read-only-datetime'\n      />\n    </VStack>\n  </HStack>\n)",
           "description": "`readOnly` keeps the value legible and removes every edit affordance. Different from\ndisabled, which says the control exists but is unavailable."
         }
       ]
@@ -40287,7 +40287,7 @@
         },
         {
           "name": "Filled",
-          "code": "() => (\n  <VStack gap={16}>\n    <VStack gap={4}>\n      <span className='sb-annotation'>Date range</span>\n      <DateRangeInput defaultValue={sampleRange} />\n    </VStack>\n    <DateFormatProvider order='day-first' hourCycle={24}>\n      <VStack gap={4}>\n        <span className='sb-annotation'>Date + time range (24h)</span>\n        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />\n      </VStack>\n    </DateFormatProvider>\n    <VStack gap={4}>\n      <span className='sb-annotation'>Without icon</span>\n      <DateRangeInput showIcon={false} defaultValue={sampleRange} />\n    </VStack>\n  </VStack>\n)",
+          "code": "() => (\n  <VStack gap={16}>\n    <VStack gap={4}>\n      <span className='sb-annotation'>Date range</span>\n      <DateRangeInput defaultValue={sampleRange} data-testid='date-range-input-filled' />\n    </VStack>\n    <DateFormatProvider order='day-first' hourCycle={24}>\n      <VStack gap={4}>\n        <span className='sb-annotation'>Date + time range (24h)</span>\n        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />\n      </VStack>\n    </DateFormatProvider>\n    <VStack gap={4}>\n      <span className='sb-annotation'>Without icon</span>\n      <DateRangeInput showIcon={false} defaultValue={sampleRange} />\n    </VStack>\n  </VStack>\n)",
           "description": "A complete range beside an empty one, which is the clearest way to see how much width the\nfilled state needs."
         },
         {
@@ -40307,7 +40307,7 @@
         },
         {
           "name": "ReadOnly",
-          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date range</span>\n      <DateRangeInput readOnly defaultValue={sampleRange} />\n    </VStack>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date + time range</span>\n      <DateRangeInput readOnly granularity='minute' defaultValue={sampleRangeDateTime} />\n    </VStack>\n  </HStack>\n)",
+          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date range</span>\n      <DateRangeInput\n        readOnly\n        defaultValue={sampleRange}\n        data-testid='date-range-input-read-only'\n      />\n    </VStack>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Date + time range</span>\n      <DateRangeInput\n        readOnly\n        granularity='minute'\n        defaultValue={sampleRangeDateTime}\n        data-testid='date-range-input-read-only-datetime'\n      />\n    </VStack>\n  </HStack>\n)",
           "description": "Both ends legible, no edit affordances."
         }
       ]
@@ -41258,7 +41258,7 @@
         },
         {
           "name": "ResizableWithOverflowList",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer width={480} open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Resizable Drawer with OverflowList\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n          <Attribute>\n            <AttributeLabel>Attack types</AttributeLabel>\n            <AttributeValue>\n              <OverflowList\n                className='gap-4'\n                items={DRAWER_TAGS}\n                itemRenderer={item => <Tag key={item}>{item}</Tag>}\n              />\n            </AttributeValue>\n          </Attribute>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer data-testid='drawer' width={480} open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Resizable Drawer with OverflowList\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n          <Attribute>\n            <AttributeLabel>Attack types</AttributeLabel>\n            <AttributeValue>\n              <OverflowList\n                data-testid='tags-overflow-list'\n                className='gap-4'\n                items={DRAWER_TAGS}\n                itemRenderer={item => (\n                  <Tag key={item} data-testid='tag'>\n                    {item}\n                  </Tag>\n                )}\n              />\n            </AttributeValue>\n          </Attribute>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
           "description": "Resizing with content that reflows, which is the case worth testing: the panel is only useful\nat its new width if what is inside adapts."
         },
         {
@@ -57183,6 +57183,11 @@
           "type": "string | undefined",
           "required": false,
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        },
+        {
+          "name": "data-testid",
+          "type": "string | undefined",
+          "required": false
         }
       ],
       "variants": [],
@@ -57555,6 +57560,11 @@
               "type": "string | undefined",
               "required": false,
               "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            },
+            {
+              "name": "data-testid",
+              "type": "string | undefined",
+              "required": false
             }
           ]
         },
@@ -57638,6 +57648,11 @@
               "type": "RefObject<HTMLDivElement | null> | undefined",
               "required": false,
               "description": "Ref to the menu content (shared across menus for focus management)."
+            },
+            {
+              "name": "data-testid",
+              "type": "string | undefined",
+              "required": false
             }
           ]
         },
@@ -57705,6 +57720,11 @@
               "type": "RefObject<HTMLDivElement | null> | undefined",
               "required": false,
               "description": "Ref to the menu content element — shared across menus for focus management"
+            },
+            {
+              "name": "data-testid",
+              "type": "string | undefined",
+              "required": false
             }
           ]
         },
@@ -63009,7 +63029,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup data-testid='input-group'>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <Input placeholder='Enter' />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon variant='outline'>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <Input placeholder='Enter' value='wallarm/user-settings' />\n      <InputGroupAddon variant='outline' align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)",
+          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup data-testid='input-group'>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <Input placeholder='Enter' data-testid='input-group-input' />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon variant='outline'>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <Input placeholder='Enter' value='wallarm/user-settings' />\n      <InputGroupAddon variant='outline' align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)",
           "description": "`InputGroupAddon` on either side of the control. The group draws the border, so the input\ninside it draws none — which is why an `Input` used here looks different from one used alone."
         },
         {
@@ -64412,7 +64432,7 @@
         },
         {
           "name": "VerticalMultiple",
-          "code": "() => (\n  <VStack gap={12}>\n    <IpList>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>8.8.8.8</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='AU' />\n        <IpAddress>1.1.1.1</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='DE' />\n        <IpAddress>77.88.8.8</IpAddress>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip>\n        <IpCountry code='NL' />\n        <IpAddress>52.94.76.0</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='NL' />\n        <IpAddress>20.33.0.0</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='AZ' />\n        <IpAddress>35.190.0.0</IpAddress>\n        <IpProvider>GCP</IpProvider>\n      </Ip>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>169.55.0.0</IpAddress>\n        <IpProvider>IBM Cloud</IpProvider>\n      </Ip>\n      <Ip>\n        <IpAddress>88.198.0.0</IpAddress>\n        <IpPort>:8080</IpPort>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip>\n        <IpAddress>10.0.0.1</IpAddress>\n        <IpPort>:8080</IpPort>\n        <IpProvider>Tor</IpProvider>\n      </Ip>\n      <Ip>\n        <IpAddress>10.0.0.2</IpAddress>\n        <IpPort>:443</IpPort>\n        <IpProvider>VPN</IpProvider>\n      </Ip>\n    </IpList>\n  </VStack>\n)",
+          "code": "() => (\n  <VStack gap={12}>\n    <IpList>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>8.8.8.8</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='AU' />\n        <IpAddress>1.1.1.1</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='DE' />\n        <IpAddress>77.88.8.8</IpAddress>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip data-testid='ip'>\n        <IpCountry code='NL' />\n        <IpAddress>52.94.76.0</IpAddress>\n      </Ip>\n      <Ip data-testid='ip'>\n        <IpCountry code='NL' />\n        <IpAddress>20.33.0.0</IpAddress>\n      </Ip>\n      <Ip data-testid='ip'>\n        <IpCountry code='AZ' />\n        <IpAddress>35.190.0.0</IpAddress>\n        <IpProvider>GCP</IpProvider>\n      </Ip>\n      <Ip data-testid='ip'>\n        <IpCountry code='US' />\n        <IpAddress>169.55.0.0</IpAddress>\n        <IpProvider>IBM Cloud</IpProvider>\n      </Ip>\n      <Ip data-testid='ip'>\n        <IpAddress>88.198.0.0</IpAddress>\n        <IpPort>:8080</IpPort>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip>\n        <IpAddress>10.0.0.1</IpAddress>\n        <IpPort>:8080</IpPort>\n        <IpProvider>Tor</IpProvider>\n      </Ip>\n      <Ip>\n        <IpAddress>10.0.0.2</IpAddress>\n        <IpPort>:443</IpPort>\n        <IpProvider>VPN</IpProvider>\n      </Ip>\n    </IpList>\n  </VStack>\n)",
           "description": "Three vertical lists, each showing its first address only and holding the rest behind a\n`+N addresses` link — the link indents to the address when the row opens with a flag."
         }
       ]
@@ -74085,7 +74105,7 @@
         },
         {
           "name": "Content",
-          "code": "() => (\n  <VStack gap={16} align='start'>\n    {(['default', 'small'] as const).map(size => (\n      <HStack key={size} gap={12} align='center'>\n        <span className='sb-annotation w-96 text-right'>{size}</span>\n        <NumericBadge size={size}>1</NumericBadge>\n        <NumericBadge size={size}>99</NumericBadge>\n        <NumericBadge size={size} color='danger' aria-label='Needs attention'>\n          !\n        </NumericBadge>\n        <NumericBadge size={size} color='info' aria-label='Unknown'>\n          ?\n        </NumericBadge>\n        <NumericBadge size={size} color='success' aria-label='Completed'>\n          <Check />\n        </NumericBadge>\n      </HStack>\n    ))}\n  </VStack>\n)",
+          "code": "() => (\n  <VStack gap={16} align='start'>\n    {(['default', 'small'] as const).map(size => (\n      <HStack key={size} gap={12} align='center'>\n        <span className='sb-annotation w-96 text-right'>{size}</span>\n        <NumericBadge data-testid='numeric-badge' size={size}>\n          1\n        </NumericBadge>\n        <NumericBadge data-testid='numeric-badge' size={size}>\n          99\n        </NumericBadge>\n        <NumericBadge\n          data-testid='numeric-badge'\n          size={size}\n          color='danger'\n          aria-label='Needs attention'\n        >\n          !\n        </NumericBadge>\n        <NumericBadge data-testid='numeric-badge' size={size} color='info' aria-label='Unknown'>\n          ?\n        </NumericBadge>\n        <NumericBadge\n          data-testid='numeric-badge'\n          size={size}\n          color='success'\n          aria-label='Completed'\n        >\n          <Check />\n        </NumericBadge>\n      </HStack>\n    ))}\n  </VStack>\n)",
           "description": "Numbers, short glyphs, and icons share the same badge heights."
         },
         {
@@ -80189,7 +80209,7 @@
       "examples": [
         {
           "name": "FullPath",
-          "code": "() => (\n  <ParameterPath method='POST' segments={['JSON', 'nginx_config']} encoding='BASE64' attack />\n)",
+          "code": "() => (\n  <ParameterPath\n    data-testid='parameter-path'\n    method='POST'\n    segments={['JSON', 'nginx_config']}\n    encoding='BASE64'\n    attack\n  />\n)",
           "description": "Every part at once: a method, two segments, an encoding, and the `attack` bolt on the\nparameter that was hit."
         },
         {
@@ -80214,7 +80234,7 @@
         },
         {
           "name": "DeepNestedTruncated",
-          "code": "() => (\n  <div style={{ width: 280 }}>\n    <ParameterPath\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n    />\n  </div>\n)",
+          "code": "() => (\n  <div style={{ width: 280 }}>\n    <ParameterPath\n      data-testid='parameter-path'\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n    />\n  </div>\n)",
           "description": "Seven segments in 280px: the middle collapses to an ellipsis and the full path moves into\na tooltip. The truncation is measured, not a CSS clip, so it reacts to the real width."
         },
         {
@@ -80224,12 +80244,12 @@
         },
         {
           "name": "ExpandableTruncated",
-          "code": "() => (\n  <div style={{ width: 600 }}>\n    {/* The root is w-full (it must span the available space to measure it),\n        so centering happens inside the component, not on the container. */}\n    <ParameterPath\n      className='justify-center'\n      method='POST'\n      segments={[\n        'multipart',\n        'json_abc',\n        'json_doc',\n        'qwerty_doc',\n        'hash',\n        'formData',\n        'session_token',\n        'nested_payload',\n        'get',\n      ]}\n      attack\n      expandable\n    />\n  </div>\n)",
+          "code": "() => (\n  <div style={{ width: 600 }}>\n    {/* The root is w-full (it must span the available space to measure it),\n        so centering happens inside the component, not on the container. */}\n    <ParameterPath\n      data-testid='parameter-path'\n      className='justify-center'\n      method='POST'\n      segments={[\n        'multipart',\n        'json_abc',\n        'json_doc',\n        'qwerty_doc',\n        'hash',\n        'formData',\n        'session_token',\n        'nested_payload',\n        'get',\n      ]}\n      attack\n      expandable\n    />\n  </div>\n)",
           "description": "`expandable` makes a truncated path clickable and focusable: it opens inline to show every\nsegment, and the tooltip stands down while it is open."
         },
         {
           "name": "ExpandableFitsInline",
-          "code": "() => (\n  <div style={{ width: 720, display: 'flex', justifyContent: 'center' }}>\n    <ParameterPath\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n      expandable\n    />\n  </div>\n)",
+          "code": "() => (\n  <div style={{ width: 720, display: 'flex', justifyContent: 'center' }}>\n    <ParameterPath\n      data-testid='parameter-path'\n      method='POST'\n      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}\n      attack\n      expandable\n    />\n  </div>\n)",
           "description": "The same path given room to fit. `expandable` leaves no affordance behind when there is\nnothing to expand — no ellipsis, no cursor, no focus stop."
         },
         {
@@ -93812,47 +93832,47 @@
       "examples": [
         {
           "name": "Default",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onDuplicate(selected)}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onDuplicate(selected)}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "The shape at its smallest: `Selection` around the collection, a `SelectionItem` per card,\nand a `SelectionBulkBar` that stays out of the way until something is selected."
         },
         {
           "name": "WithSelectAll",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={16}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={16}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "`SelectionAll` is the header checkbox — indeterminate while the selection is partial, and\na press while everything is selected clears it rather than reselecting."
         },
         {
           "name": "Grid",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <div className='grid grid-cols-3 gap-12'>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </div>\n\n      <SelectionBulkBar>\n        <Button onClick={() => onInspect(selected)}>Inspect</Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <div className='grid grid-cols-3 gap-12'>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </div>\n\n      <SelectionBulkBar>\n        <Button onClick={() => onInspect(selected)}>Inspect</Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "The same machinery over a three-column grid: `Selection` lays nothing out, so the\narrangement stays entirely yours."
         },
         {
           "name": "WithDisabled",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={8}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all (locked items skipped)\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id} disabled={c.locked}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={8}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all (locked items skipped)\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id} disabled={c.locked}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "A `disabled` item leaves both select-all and any shift range, so \"all\" means all the ones\nthis user is allowed to touch — and the header checkbox counts only those."
         },
         {
           "name": "RangeSelection",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        <span className='sb-annotation'>hold shift and click another checkbox</span>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onConfirm(selected)}>\n          Confirm\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={12}>\n        <span className='sb-annotation'>hold shift and click another checkbox</span>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => onConfirm(selected)}>\n          Confirm\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "Shift-click selects everything between the last checkbox you touched and this one,\nfollowing the order of `items` rather than the order you clicked in."
         },
         {
           "name": "BulkActions",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onMove(selected)}>\n          <Folder /> Move\n        </Button>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onDuplicate(selected)}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onMove(selected)}>\n          <Folder /> Move\n        </Button>\n        <Button variant='ghost' color='neutral-alt' onClick={() => onDuplicate(selected)}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => onDelete(selected)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}",
           "description": "Three actions in one bar. Only the destructive one is solid, so a bar with several verbs\nstill has a single obvious primary."
         },
         {
           "name": "EmptyAndPartial",
-          "code": "() => {\n  const [items, setItems] = useState<Cluster[]>(clusters);\n  const [selected, setSelected] = useState<string[]>(['1', 'ghost']);\n\n  // Demonstrate cleanup pattern: drop ids that no longer exist in items.\n  useEffect(() => {\n    setSelected(prev => prev.filter(id => items.some(c => c.id === id)));\n  }, [items]);\n\n  return (\n    <VStack gap={16}>\n      <HStack gap={8}>\n        <Button onClick={() => setItems([])} variant='outline'>\n          Clear items\n        </Button>\n        <Button onClick={() => setItems(clusters)} variant='outline'>\n          Restore items\n        </Button>\n      </HStack>\n\n      <Selection items={items} getItemId={c => c.id} value={selected} onChange={setSelected}>\n        <VStack gap={12}>\n          {items.length === 0 ? (\n            <Text size='sm' color='secondary'>\n              No items.\n            </Text>\n          ) : (\n            items.map(c => (\n              <SelectionItem key={c.id} itemId={c.id}>\n                <ClusterCard cluster={c} />\n              </SelectionItem>\n            ))\n          )}\n        </VStack>\n\n        <SelectionBulkBar>\n          <Button color='brand' onClick={() => onDelete(selected)}>\n            <Trash2 /> Delete\n          </Button>\n        </SelectionBulkBar>\n      </Selection>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const [items, setItems] = useState<Cluster[]>(clusters);\n  const [selected, setSelected] = useState<string[]>(['1', 'ghost']);\n\n  // Demonstrate cleanup pattern: drop ids that no longer exist in items.\n  useEffect(() => {\n    setSelected(prev => prev.filter(id => items.some(c => c.id === id)));\n  }, [items]);\n\n  return (\n    <VStack gap={16}>\n      <HStack gap={8}>\n        <Button onClick={() => setItems([])} variant='outline'>\n          Clear items\n        </Button>\n        <Button onClick={() => setItems(clusters)} variant='outline'>\n          Restore items\n        </Button>\n      </HStack>\n\n      <Selection\n        data-testid='selection'\n        items={items}\n        getItemId={c => c.id}\n        value={selected}\n        onChange={setSelected}\n      >\n        <VStack gap={12}>\n          {items.length === 0 ? (\n            <Text size='sm' color='secondary'>\n              No items.\n            </Text>\n          ) : (\n            items.map(c => (\n              <SelectionItem key={c.id} itemId={c.id}>\n                <ClusterCard cluster={c} />\n              </SelectionItem>\n            ))\n          )}\n        </VStack>\n\n        <SelectionBulkBar>\n          <Button color='brand' onClick={() => onDelete(selected)}>\n            <Trash2 /> Delete\n          </Button>\n        </SelectionBulkBar>\n      </Selection>\n    </VStack>\n  );\n}",
           "description": "Emptying the list strands the ids that were selected, because the component keeps them on\npurpose — the effect here is the cleanup pattern, dropping any id the list no longer has."
         },
         {
           "name": "WithoutBulkBar",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={16}>\n        <Text size='sm' color='secondary'>\n          Selected: {selected.length}\n        </Text>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={clusters}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={16}>\n        <Text size='sm' color='secondary'>\n          Selected: {selected.length}\n        </Text>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n    </Selection>\n  );\n}",
           "description": "No bar at all: the selection still works and the count is rendered from state, for a page\nthat acts on the selection somewhere else entirely."
         },
         {
           "name": "CompoundBulkBar",
-          "code": "() => {\n  const [items, setItems] = useState<Cluster[]>(clusters);\n  const [selected, setSelected] = useState<string[]>([]);\n\n  // Delete actually deletes here: a bulk action that only logged left nothing to\n  // observe, and the row leaving is the honest demonstration of one.\n  const deleteSelected = (ids: string[]) => {\n    setItems(prev => prev.filter(c => !ids.includes(c.id)));\n    setSelected([]);\n  };\n\n  return (\n    <Selection items={items} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        {items.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <CompoundToolbar onDeleteSelected={deleteSelected} />\n    </Selection>\n  );\n}",
+          "code": "() => {\n  const [items, setItems] = useState<Cluster[]>(clusters);\n  const [selected, setSelected] = useState<string[]>([]);\n\n  // Delete actually deletes here: a bulk action that only logged left nothing to\n  // observe, and the row leaving is the honest demonstration of one.\n  const deleteSelected = (ids: string[]) => {\n    setItems(prev => prev.filter(c => !ids.includes(c.id)));\n    setSelected([]);\n  };\n\n  return (\n    <Selection\n      data-testid='selection'\n      items={items}\n      getItemId={c => c.id}\n      value={selected}\n      onChange={setSelected}\n    >\n      <VStack gap={12}>\n        {items.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <CompoundToolbar onDeleteSelected={deleteSelected} />\n    </Selection>\n  );\n}",
           "description": "Composing the summary — count, select-all, clear — instead of taking the default. It has\nto be a direct child of the bar; a wrapper component hides it and the default appears too."
         },
         {
@@ -108653,12 +108673,12 @@
         },
         {
           "name": "WithInput",
-          "code": "args => (\n  <Slider {...args}>\n    <SliderControl>\n      <SliderThumb aria-label='Value' />\n    </SliderControl>\n    <SliderInput />\n  </Slider>\n)",
+          "code": "args => (\n  <Slider {...args} data-testid='slider-with-input'>\n    <SliderControl>\n      <SliderThumb aria-label='Value' />\n    </SliderControl>\n    <SliderInput />\n  </Slider>\n)",
           "description": "`SliderInput` is the precision escape hatch: the track for approximate moves, the field for\nan exact figure. Typing commits on blur or Enter rather than live, so clamping never fights a\nhalf-typed number."
         },
         {
           "name": "RangeWithInput",
-          "code": "args => (\n  <Slider {...args} defaultValue={[20, 80]}>\n    <SliderInput index={0} />\n    <SliderControl>\n      <SliderThumb index={0} />\n      <SliderThumb index={1} />\n    </SliderControl>\n    <SliderInput index={1} />\n  </Slider>\n)",
+          "code": "args => (\n  <Slider {...args} defaultValue={[20, 80]} data-testid='slider-range-with-input'>\n    <SliderInput index={0} />\n    <SliderControl>\n      <SliderThumb index={0} />\n      <SliderThumb index={1} />\n    </SliderControl>\n    <SliderInput index={1} />\n  </Slider>\n)",
           "description": "A field at each end, low on the left and high on the right. Neither crosses the other, so the\nfields cannot produce a range the track could not."
         },
         {
@@ -121538,7 +121558,7 @@
         },
         {
           "name": "ColumnResizingWithOverflowList",
-          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      ...securityColumns.slice(0, 1),\n      securityColumnHelper.display({\n        id: 'tags',\n        header: 'Tags',\n        size: 240,\n        cell: ({ row }) => (\n          <OverflowList\n            className='gap-4'\n            items={row.original.tags}\n            itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n          />\n        ),\n      }),\n      ...securityColumns.slice(1),\n    ],\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}",
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      ...securityColumns.slice(0, 1),\n      securityColumnHelper.display({\n        id: 'tags',\n        header: 'Tags',\n        size: 240,\n        cell: ({ row }) => (\n          <OverflowList\n            data-testid='tags-overflow-list'\n            className='gap-4'\n            items={row.original.tags}\n            itemRenderer={(item: string) => (\n              <Tag key={item} data-testid='tag'>\n                {item}\n              </Tag>\n            )}\n          />\n        ),\n      }),\n      ...securityColumns.slice(1),\n    ],\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      data-testid='resizing-overflow-table'\n    />\n  );\n}",
           "description": "A resizable column whose cell holds an `OverflowList`: the tags re-measure as the column\nnarrows instead of being clipped by it."
         },
         {
@@ -121728,7 +121748,7 @@
         },
         {
           "name": "InlineCellEditing",
-          "code": "() => {\n  const [data, setData] = useState<SecurityEvent[]>(() => securityEvents.slice(0, 6));\n  // Category starts unselected for every row, so the select shows its placeholder.\n  const [categories, setCategories] = useState<Record<string, string>>({});\n\n  const updateCell = useCallback(\n    <K extends keyof SecurityEvent>(rowId: string, key: K, value: SecurityEvent[K]) => {\n      setData(prev => prev.map(row => (row.id === rowId ? { ...row, [key]: value } : row)));\n    },\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      // The first column is the Table's pinned \"master\" column — keep it\n      // read-only; editable cells live in the plain columns after it.\n      securityColumnHelper.accessor('sourceIp', {\n        header: 'Source',\n        size: 200,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,\n      }),\n      securityColumnHelper.accessor('objectName', {\n        header: 'Object name',\n        size: 400,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableTextCell\n            value={getValue()}\n            aria-label='Edit object name'\n            onCommit={value => updateCell(row.id, 'objectName', value)}\n          />\n        ),\n      }),\n      securityColumnHelper.accessor('status', {\n        header: 'Status',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableSelectCell\n            value={getValue()}\n            items={statusItems}\n            onCommit={value => updateCell(row.id, 'status', value as SecurityEvent['status'])}\n          >\n            <StatusBadge value={getValue()} />\n          </EditableSelectCell>\n        ),\n      }),\n      // Empty-by-default select: consumer supplies the `placeholder` text.\n      securityColumnHelper.display({\n        id: 'category',\n        header: 'Category',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row }) => {\n          const value = categories[row.id] ?? '';\n          return (\n            <EditableSelectCell\n              value={value}\n              items={categoryItems}\n              placeholder='Select'\n              aria-label='Edit category'\n              onCommit={next => setCategories(prev => ({ ...prev, [row.id]: next }))}\n            >\n              {categoryItems.find(item => item.value === value)?.label}\n            </EditableSelectCell>\n          );\n        },\n      }),\n      securityColumnHelper.accessor('parameter', {\n        header: 'Parameters',\n        size: 240,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,\n      }),\n    ],\n    [updateCell, categories],\n  );\n\n  return (\n    <VStack gap={12} align='stretch'>\n      <span className='sb-annotation'>click a cell to edit it</span>\n      <Table data={data} columns={columns} getRowId={row => row.id} />\n    </VStack>\n  );\n}"
+          "code": "() => {\n  const [data, setData] = useState<SecurityEvent[]>(() => securityEvents.slice(0, 6));\n  // Category starts unselected for every row, so the select shows its placeholder.\n  const [categories, setCategories] = useState<Record<string, string>>({});\n\n  const updateCell = useCallback(\n    <K extends keyof SecurityEvent>(rowId: string, key: K, value: SecurityEvent[K]) => {\n      setData(prev => prev.map(row => (row.id === rowId ? { ...row, [key]: value } : row)));\n    },\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      // The first column is the Table's pinned \"master\" column — keep it\n      // read-only; editable cells live in the plain columns after it.\n      securityColumnHelper.accessor('sourceIp', {\n        header: 'Source',\n        size: 200,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,\n      }),\n      securityColumnHelper.accessor('objectName', {\n        header: 'Object name',\n        size: 400,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableTextCell\n            data-testid='editable-text-cell'\n            value={getValue()}\n            aria-label='Edit object name'\n            onCommit={value => updateCell(row.id, 'objectName', value)}\n          />\n        ),\n      }),\n      securityColumnHelper.accessor('status', {\n        header: 'Status',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableSelectCell\n            data-testid='editable-select-cell'\n            value={getValue()}\n            items={statusItems}\n            onCommit={value => updateCell(row.id, 'status', value as SecurityEvent['status'])}\n          >\n            <StatusBadge value={getValue()} />\n          </EditableSelectCell>\n        ),\n      }),\n      // Empty-by-default select: consumer supplies the `placeholder` text.\n      securityColumnHelper.display({\n        id: 'category',\n        header: 'Category',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row }) => {\n          const value = categories[row.id] ?? '';\n          return (\n            <EditableSelectCell\n              value={value}\n              items={categoryItems}\n              placeholder='Select'\n              aria-label='Edit category'\n              onCommit={next => setCategories(prev => ({ ...prev, [row.id]: next }))}\n            >\n              {categoryItems.find(item => item.value === value)?.label}\n            </EditableSelectCell>\n          );\n        },\n      }),\n      securityColumnHelper.accessor('parameter', {\n        header: 'Parameters',\n        size: 240,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,\n      }),\n    ],\n    [updateCell, categories],\n  );\n\n  return (\n    <VStack gap={12} align='stretch'>\n      <span className='sb-annotation'>click a cell to edit it</span>\n      <Table data={data} columns={columns} getRowId={row => row.id} />\n    </VStack>\n  );\n}"
         },
         {
           "name": "StickyGroupParentStory",
@@ -123803,7 +123823,7 @@
         },
         {
           "name": "ReadOnly",
-          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Locale</span>\n      <TimeInput readOnly defaultValue={new Time(22, 0)} />\n    </VStack>\n    <DateFormatProvider order='day-first' hourCycle={12}>\n      <VStack gap={12}>\n        <span className='sb-annotation'>12-hour</span>\n        <TimeInput readOnly defaultValue={new Time(22, 0)} />\n      </VStack>\n    </DateFormatProvider>\n    <DateFormatProvider order='day-first' hourCycle={24}>\n      <VStack gap={12}>\n        <span className='sb-annotation'>24-hour</span>\n        <TimeInput readOnly defaultValue={new Time(22, 0)} />\n      </VStack>\n    </DateFormatProvider>\n  </HStack>\n)",
+          "code": "() => (\n  <HStack gap={24}>\n    <VStack gap={12}>\n      <span className='sb-annotation'>Locale</span>\n      <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only' />\n    </VStack>\n    <DateFormatProvider order='day-first' hourCycle={12}>\n      <VStack gap={12}>\n        <span className='sb-annotation'>12-hour</span>\n        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-12h' />\n      </VStack>\n    </DateFormatProvider>\n    <DateFormatProvider order='day-first' hourCycle={24}>\n      <VStack gap={12}>\n        <span className='sb-annotation'>24-hour</span>\n        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-24h' />\n      </VStack>\n    </DateFormatProvider>\n  </HStack>\n)",
           "description": "Value legible, every edit affordance gone, as on `DateInput`."
         }
       ]
@@ -126135,7 +126155,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => (\n  <Timeline>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>1</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>2</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>3</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>4</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>5</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n  </Timeline>\n)",
+          "code": "() => (\n  <Timeline data-testid='timeline'>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>1</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>2</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>3</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>4</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n    <TimelineItem>\n      <TimelineConnector>\n        <TimelineIndicator>5</TimelineIndicator>\n        <TimelineSeparator />\n      </TimelineConnector>\n    </TimelineItem>\n  </Timeline>\n)",
           "description": "The rail on its own — numbered indicators with the line between them, and no line trailing\noff the bottom of the last one."
         },
         {
@@ -129869,470 +129889,6 @@
         }
       ]
     },
-    {
-      "name": "TreeBase",
-      "importPath": "@wallarm-org/design-system/TreeBase",
-      "props": [],
-      "variants": [],
-      "subComponents": [
-        {
-          "name": "TreeBaseRoot",
-          "props": [
-            {
-              "name": "slot",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "title",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "defaultChecked",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "defaultValue",
-              "type": "string | number | readonly string[] | undefined",
-              "required": false
-            },
-            {
-              "name": "suppressContentEditableWarning",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "suppressHydrationWarning",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "accessKey",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "autoCapitalize",
-              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
-              "required": false
-            },
-            {
-              "name": "autoFocus",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "contentEditable",
-              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
-              "required": false
-            },
-            {
-              "name": "contextMenu",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "dir",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "draggable",
-              "type": "Booleanish | undefined",
-              "required": false
-            },
-            {
-              "name": "enterKeyHint",
-              "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
-              "required": false
-            },
-            {
-              "name": "hidden",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "id",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "lang",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "nonce",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "spellCheck",
-              "type": "Booleanish | undefined",
-              "required": false
-            },
-            {
-              "name": "tabIndex",
-              "type": "number | undefined",
-              "required": false
-            },
-            {
-              "name": "translate",
-              "type": "\"yes\" | \"no\" | undefined",
-              "required": false
-            },
-            {
-              "name": "radioGroup",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "role",
-              "type": "AriaRole | undefined",
-              "required": false
-            },
-            {
-              "name": "about",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "content",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "datatype",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "inlist",
-              "type": "any",
-              "required": false
-            },
-            {
-              "name": "prefix",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "property",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "rel",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "resource",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "rev",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "typeof",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "vocab",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "autoCorrect",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "autoSave",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "color",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "itemProp",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "itemScope",
-              "type": "boolean | undefined",
-              "required": false
-            },
-            {
-              "name": "itemType",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "itemID",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "itemRef",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "results",
-              "type": "number | undefined",
-              "required": false
-            },
-            {
-              "name": "security",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "unselectable",
-              "type": "\"off\" | \"on\" | undefined",
-              "required": false
-            },
-            {
-              "name": "popover",
-              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
-              "required": false
-            },
-            {
-              "name": "popoverTargetAction",
-              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
-              "required": false
-            },
-            {
-              "name": "popoverTarget",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "inert",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
-            },
-            {
-              "name": "inputMode",
-              "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
-              "required": false,
-              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
-            },
-            {
-              "name": "is",
-              "type": "string | undefined",
-              "required": false,
-              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
-            },
-            {
-              "name": "exportparts",
-              "type": "string | undefined",
-              "required": false,
-              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
-            },
-            {
-              "name": "part",
-              "type": "string | undefined",
-              "required": false,
-              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
-            },
-            {
-              "name": "collection",
-              "type": "TreeCollection<T>",
-              "required": true,
-              "description": "The collection of tree nodes"
-            },
-            {
-              "name": "translations",
-              "type": "IntlTranslations | undefined",
-              "required": false,
-              "description": "Specifies the localized strings that identifies the accessibility elements and their states"
-            },
-            {
-              "name": "ids",
-              "type": "ElementIds | undefined",
-              "required": false,
-              "description": "The ids of the tree elements. Useful for composition."
-            },
-            {
-              "name": "expandedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The controlled expanded node ids"
-            },
-            {
-              "name": "defaultExpandedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The initial expanded node ids when rendered.\nUse when you don't need to control the expanded node value."
-            },
-            {
-              "name": "selectedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The controlled selected node value"
-            },
-            {
-              "name": "defaultSelectedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The initial selected node value when rendered.\nUse when you don't need to control the selected node value."
-            },
-            {
-              "name": "defaultCheckedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The initial checked node value when rendered.\nUse when you don't need to control the checked node value."
-            },
-            {
-              "name": "checkedValue",
-              "type": "string[] | undefined",
-              "required": false,
-              "description": "The controlled checked node value"
-            },
-            {
-              "name": "defaultFocusedValue",
-              "type": "string | null | undefined",
-              "required": false,
-              "description": "The initial focused node value when rendered.\nUse when you don't need to control the focused node value."
-            },
-            {
-              "name": "focusedValue",
-              "type": "string | null | undefined",
-              "required": false,
-              "description": "The value of the focused node"
-            },
-            {
-              "name": "selectionMode",
-              "type": "\"single\" | \"multiple\" | undefined",
-              "required": false,
-              "description": "Whether the tree supports multiple selection\n- \"single\": only one node can be selected\n- \"multiple\": multiple nodes can be selected"
-            },
-            {
-              "name": "onExpandedChange",
-              "type": "complex",
-              "required": false,
-              "description": "Called when the tree is opened or closed"
-            },
-            {
-              "name": "onSelectionChange",
-              "type": "complex",
-              "required": false,
-              "description": "Called when the selection changes"
-            },
-            {
-              "name": "onFocusChange",
-              "type": "complex",
-              "required": false,
-              "description": "Called when the focused node changes"
-            },
-            {
-              "name": "onCheckedChange",
-              "type": "complex",
-              "required": false,
-              "description": "Called when the checked value changes"
-            },
-            {
-              "name": "canRename",
-              "type": "((node: T, indexPath: IndexPath) => boolean) | undefined",
-              "required": false,
-              "description": "Function to determine if a node can be renamed"
-            },
-            {
-              "name": "onRenameStart",
-              "type": "complex",
-              "required": false,
-              "description": "Called when a node starts being renamed"
-            },
-            {
-              "name": "onBeforeRename",
-              "type": "complex",
-              "required": false,
-              "description": "Called before a rename is completed. Return false to prevent the rename."
-            },
-            {
-              "name": "onRenameComplete",
-              "type": "complex",
-              "required": false,
-              "description": "Called when a node label rename is completed"
-            },
-            {
-              "name": "onLoadChildrenComplete",
-              "type": "complex",
-              "required": false,
-              "description": "Called when a node finishes loading children"
-            },
-            {
-              "name": "onLoadChildrenError",
-              "type": "complex",
-              "required": false,
-              "description": "Called when loading children fails for one or more nodes"
-            },
-            {
-              "name": "expandOnClick",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether clicking on a branch should open it or not"
-            },
-            {
-              "name": "typeahead",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether the tree supports typeahead search"
-            },
-            {
-              "name": "loadChildren",
-              "type": "complex",
-              "required": false,
-              "description": "Function to load children for a node asynchronously.\nWhen provided, branches will wait for this promise to resolve before expanding."
-            },
-            {
-              "name": "scrollToIndexFn",
-              "type": "complex",
-              "required": false,
-              "description": "Function to scroll to a specific index.\nUseful for virtualized tree views."
-            },
-            {
-              "name": "lazyMount",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether to enable lazy mounting"
-            },
-            {
-              "name": "unmountOnExit",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether to unmount on exit."
-            },
-            {
-              "name": "hideMode",
-              "type": "\"display-none\" | \"activity\"",
-              "required": false,
-              "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+."
-            },
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Use the provided child element as the default rendered element, combining their props and behavior."
-            }
-          ]
-        }
-      ],
-      "examples": []
-    },
     {
       "name": "TreeView",
       "description": "Horizontal indentation added per nesting level, in pixels.",
@@ -130427,7 +129983,7 @@
         },
         {
           "name": "enterKeyHint",
-          "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
           "required": false
         },
         {
@@ -130618,7 +130174,7 @@
         },
         {
           "name": "inputMode",
-          "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
           "required": false,
           "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
         },
@@ -130719,16 +130275,6 @@
               "description": "Dim the row and disable all interaction (toggle, selection, checkbox).",
               "defaultValue": "false"
             },
-            {
-              "name": "slot",
-              "type": "string | undefined",
-              "required": false
-            },
-            {
-              "name": "title",
-              "type": "string | undefined",
-              "required": false
-            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -130786,7 +130332,7 @@
             },
             {
               "name": "enterKeyHint",
-              "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
               "required": false
             },
             {
@@ -130804,6 +130350,11 @@
               "type": "string | undefined",
               "required": false
             },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
             {
               "name": "spellCheck",
               "type": "Booleanish | undefined",
@@ -130814,6 +130365,11 @@
               "type": "number | undefined",
               "required": false
             },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
             {
               "name": "translate",
               "type": "\"yes\" | \"no\" | undefined",
@@ -130962,7 +130518,7 @@
             },
             {
               "name": "inputMode",
-              "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
               "required": false,
               "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
             },
@@ -131025,7 +130581,7 @@
         },
         {
           "name": "WithHeaderAndSearch",
-          "code": "() => {\n  const [query, setQuery] = useState('');\n  const q = query.trim().toLowerCase();\n  const [openIds, setOpenIds] = useState<Set<string>>(() => new Set(['src', 'components']));\n\n  const isOpen = (id: string) => (q ? true : openIds.has(id));\n  const toggle = (id: string, v: boolean) =>\n    setOpenIds(prev => {\n      const next = new Set(prev);\n      if (v) {\n        next.add(id);\n      } else {\n        next.delete(id);\n      }\n      return next;\n    });\n  const setAll = (open: boolean) => setOpenIds(open ? new Set(BRANCH_IDS) : new Set());\n\n  const renderNode = (node: SearchNode): ReactNode => {\n    const selfMatch = !q || node.label.toLowerCase().includes(q);\n    const icon = node.type === 'folder' ? <Folder /> : <FileText />;\n\n    if (node.children) {\n      const kids = node.children.map(renderNode).filter(Boolean);\n      if (q && !selfMatch && kids.length === 0) {\n        return null;\n      }\n      return (\n        <TreeViewItem key={node.id} open={isOpen(node.id)} onOpenChange={v => toggle(node.id, v)}>\n          {icon}\n          {node.label}\n          {kids}\n        </TreeViewItem>\n      );\n    }\n\n    if (!selfMatch) {\n      return null;\n    }\n    return (\n      <TreeViewItem key={node.id}>\n        {icon}\n        {node.label}\n      </TreeViewItem>\n    );\n  };\n\n  const nodes = TREE_DATA.map(renderNode).filter(Boolean);\n\n  return (\n    <div className='w-320'>\n      <TreeView>\n        {/* Header — expand/collapse buttons grouped tightly, close set apart */}\n        <div className='flex items-center gap-8 px-8 pt-8 pb-4'>\n          <Text size='xs' weight='medium' color='secondary' grow truncate>\n            Header\n          </Text>\n          <div className='flex shrink-0 items-center gap-8'>\n            <div className='flex items-center gap-2'>\n              <Button\n                variant='ghost'\n                color='neutral'\n                size='small'\n                aria-label='Collapse all'\n                onClick={() => setAll(false)}\n              >\n                <ChevronsDownUp size='sm' />\n              </Button>\n              <Button\n                variant='ghost'\n                color='neutral'\n                size='small'\n                aria-label='Expand all'\n                onClick={() => setAll(true)}\n              >\n                <ChevronsUpDown size='sm' />\n              </Button>\n            </div>\n            <Button variant='ghost' color='neutral' size='small' aria-label='Close panel'>\n              <PanelRightClose size='sm' />\n            </Button>\n          </div>\n        </div>\n\n        {/* Search — full width, aligned with the items' selection highlight */}\n        <div className='pb-4'>\n          <div className='relative'>\n            <Search\n              size='md'\n              className='pointer-events-none absolute top-1/2 left-12 -translate-y-1/2 text-text-secondary'\n            />\n            <Input\n              placeholder='Search'\n              value={query}\n              onChange={e => setQuery(e.target.value)}\n              className='pl-40'\n            />\n          </div>\n        </div>\n\n        {nodes}\n      </TreeView>\n    </div>\n  );\n}",
+          "code": "() => {\n  const [query, setQuery] = useState('');\n  const q = query.trim().toLowerCase();\n  const [openIds, setOpenIds] = useState<Set<string>>(() => new Set(['src', 'components']));\n\n  const isOpen = (id: string) => (q ? true : openIds.has(id));\n  const toggle = (id: string, v: boolean) =>\n    setOpenIds(prev => {\n      const next = new Set(prev);\n      if (v) {\n        next.add(id);\n      } else {\n        next.delete(id);\n      }\n      return next;\n    });\n  const setAll = (open: boolean) => setOpenIds(open ? new Set(BRANCH_IDS) : new Set());\n\n  const renderNode = (node: SearchNode): ReactNode => {\n    const selfMatch = !q || node.label.toLowerCase().includes(q);\n    const icon = node.type === 'folder' ? <Folder /> : <FileText />;\n\n    if (node.children) {\n      const kids = node.children.map(renderNode).filter(Boolean);\n      if (q && !selfMatch && kids.length === 0) {\n        return null;\n      }\n      return (\n        <TreeViewItem key={node.id} open={isOpen(node.id)} onOpenChange={v => toggle(node.id, v)}>\n          {icon}\n          {node.label}\n          {kids}\n        </TreeViewItem>\n      );\n    }\n\n    if (!selfMatch) {\n      return null;\n    }\n    return (\n      <TreeViewItem key={node.id}>\n        {icon}\n        {node.label}\n      </TreeViewItem>\n    );\n  };\n\n  const nodes = TREE_DATA.map(renderNode).filter(Boolean);\n\n  return (\n    <div className='w-320'>\n      <TreeView data-testid='tree-view'>\n        {/* Header — expand/collapse buttons grouped tightly, close set apart */}\n        <div className='flex items-center gap-8 px-8 pt-8 pb-4'>\n          <Text size='xs' weight='medium' color='secondary' grow truncate>\n            Header\n          </Text>\n          <div className='flex shrink-0 items-center gap-8'>\n            <div className='flex items-center gap-2'>\n              <Button\n                variant='ghost'\n                color='neutral'\n                size='small'\n                aria-label='Collapse all'\n                onClick={() => setAll(false)}\n              >\n                <ChevronsDownUp size='sm' />\n              </Button>\n              <Button\n                variant='ghost'\n                color='neutral'\n                size='small'\n                aria-label='Expand all'\n                onClick={() => setAll(true)}\n              >\n                <ChevronsUpDown size='sm' />\n              </Button>\n            </div>\n            <Button variant='ghost' color='neutral' size='small' aria-label='Close panel'>\n              <PanelRightClose size='sm' />\n            </Button>\n          </div>\n        </div>\n\n        {/* Search — full width, aligned with the items' selection highlight */}\n        <div className='pb-4'>\n          <div className='relative'>\n            <Search\n              size='md'\n              className='pointer-events-none absolute top-1/2 left-12 -translate-y-1/2 text-text-secondary'\n            />\n            <Input\n              placeholder='Search'\n              value={query}\n              onChange={e => setQuery(e.target.value)}\n              className='pl-40'\n            />\n          </div>\n        </div>\n\n        {nodes}\n      </TreeView>\n    </div>\n  );\n}",
           "description": "The toolbar is assembled from `Text`, `Button` and `Input` — there is no TreeView toolbar. Expand-all drives the items’ controlled `open` state, and the search keeps ancestors of matches and opens them."
         }
       ]