@wallarm-org/design-system 1.2.0 → 1.4.0

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.1.0",
-  "generatedAt": "2026-08-20T19:01:27.582Z",
+  "version": "1.3.0",
+  "generatedAt": "2026-08-20T21:26:32.176Z",
   "components": [
     {
       "name": "Accordion",
@@ -31504,169 +31504,810 @@
         }
       ]
     },
+    {
+      "name": "FormatNumber",
+      "importPath": "@wallarm-org/design-system/FormatNumber",
+      "props": [
+        {
+          "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": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"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": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | 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": "\"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"
+        },
+        {
+          "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": "value",
+          "type": "number | null | undefined",
+          "required": true,
+          "description": "Numeric value to display. null/undefined renders em dash + \"No data\" tooltip."
+        },
+        {
+          "name": "type",
+          "type": "FormatNumberType | undefined",
+          "required": false,
+          "description": "Formatting category. Default: 'decimal'.\n- 'decimal': plain number with optional abbreviation\n- 'percent': percentage with boundary safety\n- 'byte': decimal byte units: 512 B, 2.3 GB",
+          "defaultValue": "decimal"
+        },
+        {
+          "name": "notation",
+          "type": "FormatNumberNotation | undefined",
+          "required": false,
+          "description": "'compact' abbreviates (12k, 59.6M); 'standard' shows full value.\nDefault: 'compact'. Only applies to type='decimal' and type='byte'.",
+          "defaultValue": "compact"
+        },
+        {
+          "name": "unit",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Unit label for accessible name + tooltip: \"requests\", \"errors\".\nAppended after a space. Only meaningful for type='decimal'."
+        },
+        {
+          "name": "decimals",
+          "type": "number | undefined",
+          "required": false,
+          "description": "Decimal places for percent. Default: 0.",
+          "defaultValue": "0"
+        }
+      ],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Compact",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    {compactValues.map(v => (\n      <>\n        <Text key={`label-${v}`} size='sm' color='secondary' align='right'>\n          {v.toLocaleString('en-US')}\n        </Text>\n        <FormatNumber key={v} value={v} />\n      </>\n    ))}\n  </div>\n)"
+        },
+        {
+          "name": "Standard",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    {compactValues.map(v => (\n      <>\n        <Text key={`label-${v}`} size='sm' color='secondary' align='right'>\n          {v.toLocaleString('en-US')}\n        </Text>\n        <FormatNumber key={v} value={v} notation='standard' />\n      </>\n    ))}\n  </div>\n)"
+        },
+        {
+          "name": "WithUnit",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      42\n    </Text>\n    <FormatNumber value={42} unit='requests' />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,042\n    </Text>\n    <FormatNumber value={12_042} unit='requests' />\n\n    <Text size='sm' color='secondary' align='right'>\n      59,614,283\n    </Text>\n    <FormatNumber value={59_614_283} unit='errors' />\n\n    <Text size='sm' color='secondary' align='right'>\n      500 (standard)\n    </Text>\n    <FormatNumber value={500} unit='requests' notation='standard' />\n  </div>\n)"
+        },
+        {
+          "name": "Percent",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      0%\n    </Text>\n    <FormatNumber value={0} type='percent' />\n\n    <Text size='sm' color='secondary' align='right'>\n      0.02% (decimals=0)\n    </Text>\n    <FormatNumber value={0.02} type='percent' />\n\n    <Text size='sm' color='secondary' align='right'>\n      0.02% (decimals=1)\n    </Text>\n    <FormatNumber value={0.02} type='percent' decimals={1} />\n\n    <Text size='sm' color='secondary' align='right'>\n      25.5%\n    </Text>\n    <FormatNumber value={25.5} type='percent' decimals={1} />\n\n    <Text size='sm' color='secondary' align='right'>\n      50%\n    </Text>\n    <FormatNumber value={50} type='percent' />\n\n    <Text size='sm' color='secondary' align='right'>\n      99.97% (decimals=0)\n    </Text>\n    <FormatNumber value={99.97} type='percent' />\n\n    <Text size='sm' color='secondary' align='right'>\n      99.97% (decimals=1)\n    </Text>\n    <FormatNumber value={99.97} type='percent' decimals={1} />\n\n    <Text size='sm' color='secondary' align='right'>\n      100%\n    </Text>\n    <FormatNumber value={100} type='percent' />\n  </div>\n)"
+        },
+        {
+          "name": "Bytes",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      512 (compact)\n    </Text>\n    <FormatNumber value={512} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      3,400 (compact)\n    </Text>\n    <FormatNumber value={3_400} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,700,000 (compact)\n    </Text>\n    <FormatNumber value={12_700_000} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      2,345,678,901 (compact)\n    </Text>\n    <FormatNumber value={2_345_678_901} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      1,100,000,000,000 (compact)\n    </Text>\n    <FormatNumber value={1_100_000_000_000} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,700,000 (standard)\n    </Text>\n    <FormatNumber value={12_700_000} type='byte' notation='standard' />\n  </div>\n)"
+        },
+        {
+          "name": "NegativeValues",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      -42\n    </Text>\n    <FormatNumber value={-42} />\n\n    <Text size='sm' color='secondary' align='right'>\n      -12,042\n    </Text>\n    <FormatNumber value={-12_042} />\n\n    <Text size='sm' color='secondary' align='right'>\n      -59,614,283\n    </Text>\n    <FormatNumber value={-59_614_283} />\n  </div>\n)"
+        },
+        {
+          "name": "NullValue",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      null\n    </Text>\n    <FormatNumber value={null} />\n\n    <Text size='sm' color='secondary' align='right'>\n      undefined\n    </Text>\n    <FormatNumber value={undefined} />\n  </div>\n)"
+        },
+        {
+          "name": "SpecialValues",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      0\n    </Text>\n    <FormatNumber value={0} />\n\n    <Text size='sm' color='secondary' align='right'>\n      NaN\n    </Text>\n    <FormatNumber value={Number.NaN} />\n\n    <Text size='sm' color='secondary' align='right'>\n      Infinity\n    </Text>\n    <FormatNumber value={Number.POSITIVE_INFINITY} />\n  </div>\n)"
+        }
+      ]
+    },
     {
       "name": "Heading",
       "importPath": "@wallarm-org/design-system/Heading",
       "props": [
         {
-          "name": "size",
-          "type": "{ sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; '6xl': string; '7xl': string; }",
-          "required": false,
-          "defaultValue": "xl"
+          "name": "size",
+          "type": "{ sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; '6xl': string; '7xl': string; }",
+          "required": false,
+          "defaultValue": "xl"
+        },
+        {
+          "name": "weight",
+          "type": "{ light: string; regular: string; medium: string; bold: string; }",
+          "required": false,
+          "defaultValue": "bold"
+        },
+        {
+          "name": "color",
+          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; inherit: string; }",
+          "required": false,
+          "defaultValue": "inherit"
+        },
+        {
+          "name": "align",
+          "type": "{ left: string; center: string; right: string; }",
+          "required": false
+        },
+        {
+          "name": "grow",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "truncate",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "lineClamp",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "as",
+          "type": "C | undefined",
+          "required": false,
+          "defaultValue": "h1"
+        }
+      ],
+      "variants": [
+        {
+          "name": "size",
+          "options": [
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl",
+            "4xl",
+            "5xl",
+            "6xl",
+            "7xl"
+          ]
+        },
+        {
+          "name": "weight",
+          "options": [
+            "light",
+            "regular",
+            "medium",
+            "bold"
+          ]
+        },
+        {
+          "name": "color",
+          "options": [
+            "primary",
+            "primary-alt",
+            "secondary",
+            "secondary-alt",
+            "inherit"
+          ]
+        },
+        {
+          "name": "align",
+          "options": [
+            "left",
+            "center",
+            "right"
+          ]
+        },
+        {
+          "name": "grow",
+          "options": [
+            "true"
+          ]
+        },
+        {
+          "name": "truncate",
+          "options": [
+            "true"
+          ]
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "({ ...args }) => (\n  <Heading {...args}>Default Heading</Heading>\n)"
+        },
+        {
+          "name": "Sizes",
+          "code": "({ ...args }) => (\n  <VStack gap={24} align='start'>\n    {SIZES.map(({ size, metrics }) => (\n      <VStack key={size} gap={4} align='start'>\n        <Text size='xs' color='secondary'>\n          size=&apos;{size}&apos; · {metrics}\n        </Text>\n        <Heading {...args} size={size}>\n          The quick brown fox\n        </Heading>\n      </VStack>\n    ))}\n  </VStack>\n)"
+        },
+        {
+          "name": "Weights",
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='3xl' weight='light'>\n      Light Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='regular'>\n      Regular Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='medium'>\n      Medium Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='bold'>\n      Bold Weight Heading\n    </Heading>\n  </VStack>\n)"
+        },
+        {
+          "name": "AsChild",
+          "code": "({ ...args }) => (\n  <Heading {...args} size='4xl' weight='bold' asChild>\n    <h2>Custom H2 Element with AsChild</h2>\n  </Heading>\n)"
+        },
+        {
+          "name": "PolymorphicElements",
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} as='h1' size='4xl'>\n      H1 Heading\n    </Heading>\n    <Heading {...args} as='h2' size='3xl'>\n      H2 Heading\n    </Heading>\n    <Heading {...args} as='h3' size='2xl'>\n      H3 Heading\n    </Heading>\n    <Heading {...args} as='h4' size='xl'>\n      H4 Heading\n    </Heading>\n    <Heading {...args} as='h5' size='lg'>\n      H5 Heading\n    </Heading>\n    <Heading {...args} as='h6' size='md'>\n      H6 Heading\n    </Heading>\n  </VStack>\n)"
+        },
+        {
+          "name": "AsSpan",
+          "code": "({ ...args }) => (\n  <Text>\n    This is a paragraph with{' '}\n    <Heading {...args} as='span' size='lg' weight='bold'>\n      inline heading text\n    </Heading>{' '}\n    using span element.\n  </Text>\n)"
+        },
+        {
+          "name": "AsDiv",
+          "code": "({ ...args }) => (\n  <Heading {...args} as='div' size='2xl' weight='medium'>\n    This heading is rendered as a div element\n  </Heading>\n)"
+        }
+      ]
+    },
+    {
+      "name": "HttpMethod",
+      "description": "Domain primitive that renders an HTTP method as a colored Badge.\n\nWrap-free; if you need to align it inside a flex row with non-badge\nneighbours, place it in a parent flex container with `items-center`.",
+      "importPath": "@wallarm-org/design-system/HttpMethod",
+      "props": [
+        {
+          "name": "method",
+          "type": "HttpMethodName | (string & {})",
+          "required": true,
+          "description": "HTTP method to render. Known values from `HttpMethodName` get a dedicated\ncolor via `HTTP_METHOD_COLOR`; any other string renders in slate as the\n\"Other\" fallback (the text itself is shown verbatim)."
+        },
+        {
+          "name": "size",
+          "type": "\"small\" | \"medium\" | \"large\" | null | undefined",
+          "required": false,
+          "description": "Badge size — defaults to `medium`.",
+          "defaultValue": "medium"
+        },
+        {
+          "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": "(string & {}) | \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | 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": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"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": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | 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": "weight",
-          "type": "{ light: string; regular: string; medium: string; bold: string; }",
-          "required": false,
-          "defaultValue": "bold"
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "color",
-          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; inherit: string; }",
-          "required": false,
-          "defaultValue": "inherit"
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "align",
-          "type": "{ left: string; center: string; right: string; }",
+          "name": "rev",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "grow",
-          "type": "{ true: string; }",
-          "required": false,
-          "defaultValue": "false"
+          "name": "typeof",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "truncate",
-          "type": "{ true: string; }",
-          "required": false,
-          "defaultValue": "false"
+          "name": "vocab",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "asChild",
+          "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,
-          "defaultValue": "false"
+          "required": false
         },
         {
-          "name": "lineClamp",
-          "type": "number | undefined",
+          "name": "itemType",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "as",
-          "type": "C | undefined",
-          "required": false,
-          "defaultValue": "h1"
-        }
-      ],
-      "variants": [
+          "name": "itemID",
+          "type": "string | undefined",
+          "required": false
+        },
         {
-          "name": "size",
-          "options": [
-            "sm",
-            "md",
-            "lg",
-            "xl",
-            "2xl",
-            "3xl",
-            "4xl",
-            "5xl",
-            "6xl",
-            "7xl"
-          ]
+          "name": "itemRef",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "weight",
-          "options": [
-            "light",
-            "regular",
-            "medium",
-            "bold"
-          ]
+          "name": "results",
+          "type": "number | undefined",
+          "required": false
         },
         {
-          "name": "color",
-          "options": [
-            "primary",
-            "primary-alt",
-            "secondary",
-            "secondary-alt",
-            "inherit"
-          ]
+          "name": "security",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "align",
-          "options": [
-            "left",
-            "center",
-            "right"
-          ]
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
+          "required": false
         },
         {
-          "name": "grow",
-          "options": [
-            "true"
-          ]
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+          "required": false
         },
         {
-          "name": "truncate",
-          "options": [
-            "true"
-          ]
-        }
-      ],
-      "subComponents": [],
-      "examples": [
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+          "required": false
+        },
         {
-          "name": "Basic",
-          "code": "({ ...args }) => (\n  <Heading {...args}>Default Heading</Heading>\n)"
+          "name": "popoverTarget",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "Sizes",
-          "code": "({ ...args }) => (\n  <VStack gap={24} align='start'>\n    {SIZES.map(({ size, metrics }) => (\n      <VStack key={size} gap={4} align='start'>\n        <Text size='xs' color='secondary'>\n          size=&apos;{size}&apos; · {metrics}\n        </Text>\n        <Heading {...args} size={size}>\n          The quick brown fox\n        </Heading>\n      </VStack>\n    ))}\n  </VStack>\n)"
+          "name": "inert",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
         },
         {
-          "name": "Weights",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='3xl' weight='light'>\n      Light Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='regular'>\n      Regular Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='medium'>\n      Medium Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='bold'>\n      Bold Weight Heading\n    </Heading>\n  </VStack>\n)"
+          "name": "inputMode",
+          "type": "\"text\" | \"none\" | \"search\" | \"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": "AsChild",
-          "code": "({ ...args }) => (\n  <Heading {...args} size='4xl' weight='bold' asChild>\n    <h2>Custom H2 Element with AsChild</h2>\n  </Heading>\n)"
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
         },
         {
-          "name": "PolymorphicElements",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} as='h1' size='4xl'>\n      H1 Heading\n    </Heading>\n    <Heading {...args} as='h2' size='3xl'>\n      H2 Heading\n    </Heading>\n    <Heading {...args} as='h3' size='2xl'>\n      H3 Heading\n    </Heading>\n    <Heading {...args} as='h4' size='xl'>\n      H4 Heading\n    </Heading>\n    <Heading {...args} as='h5' size='lg'>\n      H5 Heading\n    </Heading>\n    <Heading {...args} as='h6' size='md'>\n      H6 Heading\n    </Heading>\n  </VStack>\n)"
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
         },
         {
-          "name": "AsSpan",
-          "code": "({ ...args }) => (\n  <Text>\n    This is a paragraph with{' '}\n    <Heading {...args} as='span' size='lg' weight='bold'>\n      inline heading text\n    </Heading>{' '}\n    using span element.\n  </Text>\n)"
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        }
+      ],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Playground",
+          "code": "args => <HttpMethod {...args} />"
         },
         {
-          "name": "AsDiv",
-          "code": "({ ...args }) => (\n  <Heading {...args} as='div' size='2xl' weight='medium'>\n    This heading is rendered as a div element\n  </Heading>\n)"
+          "name": "AllMethods",
+          "code": "() => (\n  <VStack align='start' gap={8}>\n    {HTTP_METHODS.map(method => (\n      <HttpMethod key={method} method={method} />\n    ))}\n    <HttpMethod method='OTHER' />\n  </VStack>\n)"
+        },
+        {
+          "name": "Sizes",
+          "code": "() => (\n  <VStack gap={16}>\n    <HStack align='center' gap={8}>\n      {HTTP_METHODS.map(method => (\n        <HttpMethod key={method} method={method} size='medium' />\n      ))}\n    </HStack>\n    <HStack align='center' gap={8}>\n      {HTTP_METHODS.map(method => (\n        <HttpMethod key={method} method={method} size='large' />\n      ))}\n    </HStack>\n  </VStack>\n)"
+        },
+        {
+          "name": "UnknownMethodFallsBackToSlate",
+          "code": "() => (\n  <HStack align='center' gap={8}>\n    <HttpMethod method='TRACE' />\n    <HttpMethod method='CONNECT' />\n    <HttpMethod method='LINK' />\n  </HStack>\n)"
         }
       ]
     },
     {
-      "name": "HttpMethod",
-      "description": "Domain primitive that renders an HTTP method as a colored Badge.\n\nWrap-free; if you need to align it inside a flex row with non-badge\nneighbours, place it in a parent flex container with `items-center`.",
-      "importPath": "@wallarm-org/design-system/HttpMethod",
+      "name": "Indicator",
+      "importPath": "@wallarm-org/design-system/Indicator",
       "props": [
-        {
-          "name": "method",
-          "type": "HttpMethodName | (string & {})",
-          "required": true,
-          "description": "HTTP method to render. Known values from `HttpMethodName` get a dedicated\ncolor via `HTTP_METHOD_COLOR`; any other string renders in slate as the\n\"Other\" fallback (the text itself is shown verbatim)."
-        },
-        {
-          "name": "size",
-          "type": "\"small\" | \"medium\" | \"large\" | null | undefined",
-          "required": false,
-          "description": "Badge size — defaults to `medium`.",
-          "defaultValue": "medium"
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -31694,7 +32335,7 @@
         },
         {
           "name": "autoCapitalize",
-          "type": "(string & {}) | \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | undefined",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
           "required": false
         },
         {
@@ -31850,7 +32491,8 @@
         {
           "name": "color",
           "type": "string | undefined",
-          "required": false
+          "required": false,
+          "defaultValue": "info"
         },
         {
           "name": "itemProp",
@@ -31915,7 +32557,7 @@
         },
         {
           "name": "inputMode",
-          "type": "\"text\" | \"none\" | \"search\" | \"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"
         },
@@ -31936,26 +32578,45 @@
           "type": "string | undefined",
           "required": false,
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        },
+        {
+          "name": "size",
+          "type": "{ sm: string; md: string; }",
+          "required": false,
+          "defaultValue": "md"
         }
       ],
-      "variants": [],
-      "subComponents": [],
-      "examples": [
+      "variants": [
         {
-          "name": "Playground",
-          "code": "args => <HttpMethod {...args} />"
+          "name": "size",
+          "options": [
+            "sm",
+            "md"
+          ],
+          "defaultValue": "md"
         },
         {
-          "name": "AllMethods",
-          "code": "() => (\n  <VStack align='start' gap={8}>\n    {HTTP_METHODS.map(method => (\n      <HttpMethod key={method} method={method} />\n    ))}\n    <HttpMethod method='OTHER' />\n  </VStack>\n)"
-        },
+          "name": "color",
+          "options": [
+            "info",
+            "brand",
+            "warning",
+            "success",
+            "ai",
+            "danger"
+          ],
+          "defaultValue": "info"
+        }
+      ],
+      "subComponents": [],
+      "examples": [
         {
-          "name": "Sizes",
-          "code": "() => (\n  <VStack gap={16}>\n    <HStack align='center' gap={8}>\n      {HTTP_METHODS.map(method => (\n        <HttpMethod key={method} method={method} size='medium' />\n      ))}\n    </HStack>\n    <HStack align='center' gap={8}>\n      {HTTP_METHODS.map(method => (\n        <HttpMethod key={method} method={method} size='large' />\n      ))}\n    </HStack>\n  </VStack>\n)"
+          "name": "Basic",
+          "code": "({ ...args }) => <Indicator {...args} />"
         },
         {
-          "name": "UnknownMethodFallsBackToSlate",
-          "code": "() => (\n  <HStack align='center' gap={8}>\n    <HttpMethod method='TRACE' />\n    <HttpMethod method='CONNECT' />\n    <HttpMethod method='LINK' />\n  </HStack>\n)"
+          "name": "AllVariants",
+          "code": "() => (\n  <VStack gap={12}>\n    <HStack align='center' gap={8}>\n      <Text size='sm'>sm</Text>\n      <Text size='sm'>md</Text>\n    </HStack>\n    {colors.map(color => (\n      <HStack key={color} align='center' gap={24}>\n        <Indicator size='sm' color={color} />\n        <Indicator size='md' color={color} />\n        <Text size='sm'>{color}</Text>\n      </HStack>\n    ))}\n  </VStack>\n)"
         }
       ]
     },