{
  "element": "nve-format-number",
  "entrypoint": "@nvidia-elements/core/format-number/format-number.examples.json",
  "items": [
    {
      "id": "format-number",
      "name": "Default",
      "template": "<nve-format-number>1234567.89</nve-format-number>\n",
      "summary": "Basic decimal formatting with localized grouping separators. Use for inline counts and metrics.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-currency",
      "name": "Currency",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"currency\" currency=\"USD\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"EUR\" currency-display=\"code\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"JPY\" currency-display=\"name\">1234</nve-format-number>\n</div>\n",
      "summary": "Currency formatting for monetary values with locale-aware symbols and separators. Use for prices, budgets, and financial totals.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-percent",
      "name": "Percent",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"percent\">0.85</nve-format-number>\n  <nve-format-number format-style=\"percent\">0.126</nve-format-number>\n</div>\n",
      "summary": "Percent formatting for ratios and completion values. Source values should already represent a fraction (such as 0.85 for 85 percent).",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-unit",
      "name": "Unit",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"unit\" unit=\"kilometer\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"byte\" unit-display=\"long\">2048</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"celsius\" unit-display=\"narrow\">22</nve-format-number>\n</div>\n",
      "summary": "Unit formatting for measurements and quantities. Use for distances, storage sizes, or other numeric labels that need a localized unit suffix.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-notation",
      "name": "Notation",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number notation=\"compact\" compact-display=\"short\">1234567</nve-format-number>\n  <nve-format-number notation=\"compact\" compact-display=\"long\">1234567</nve-format-number>\n  <nve-format-number notation=\"scientific\">1234567</nve-format-number>\n  <nve-format-number notation=\"engineering\">1234567</nve-format-number>\n</div>\n",
      "summary": "Notation presets for scientific, engineering, and compact display. Use compact notation in dashboards or cards where space matters.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-sign-display",
      "name": "SignDisplay",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number sign-display=\"always\">42</nve-format-number>\n  <nve-format-number sign-display=\"always\">-42</nve-format-number>\n  <nve-format-number sign-display=\"exceptZero\">0</nve-format-number>\n  <nve-format-number sign-display=\"never\">-42</nve-format-number>\n</div>\n",
      "summary": "Sign display options for controlling positive and negative indicators. Use 'always' for delta values or 'exceptZero' for change indicators.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-fraction-digits",
      "name": "FractionDigits",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number minimum-fraction-digits=\"4\">1.5</nve-format-number>\n  <nve-format-number maximum-fraction-digits=\"0\">1.567</nve-format-number>\n  <nve-format-number minimum-fraction-digits=\"2\" maximum-fraction-digits=\"2\">3</nve-format-number>\n</div>\n",
      "summary": "Fraction digit control for tuning decimal precision. Use to enforce fixed decimal places in financial or scientific contexts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-locale",
      "name": "Locale",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number locale=\"de-DE\" format-style=\"currency\" currency=\"EUR\">1234.56</nve-format-number>\n  <nve-format-number locale=\"ja-JP\" format-style=\"currency\" currency=\"JPY\">1234</nve-format-number>\n  <nve-format-number locale=\"fr-FR\">1234567.89</nve-format-number>\n</div>\n",
      "summary": "Explicit locale settings for internationalized number output. Use when the target audience locale differs from the document language or browser default.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-number-number-attribute",
      "name": "NumberAttribute",
      "template": "<nve-format-number number=\"1234.56\" format-style=\"currency\" currency=\"USD\"></nve-format-number>\n",
      "summary": "Number attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `number` wins when both are present.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}