ionbase-ui 0.70.0 → 0.75.0

package/dist/figma-map.json

@@ -1,8 +1,8 @@
 {
   "package": "ionbase-ui",
-  "version": "0.70.0",
+  "version": "0.75.0",
   "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
-  "figmaExported": "2026-09-24",
+  "figmaExported": "2026-09-25",
   "usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
   "generated": "by scripts/verify-figma-map.mjs — do not edit",
   "byNodeId": {
@@ -1477,6 +1477,33 @@
         }
       }
     },
+    "1418:260": {
+      "figmaComponent": "Setting Row",
+      "figmaNodeId": "1418:260",
+      "figmaPage": "Setting Row",
+      "component": "SettingRow",
+      "import": "import { SettingRow } from 'ionbase-ui';",
+      "docs": "components/setting-row/index.html.md",
+      "props": {
+        "Label#1418:0": {
+          "prop": "label"
+        },
+        "Description#1418:3": {
+          "prop": "description"
+        },
+        "Show Description#1418:6": {
+          "prop": "description",
+          "note": "false means description is omitted"
+        },
+        "Control#1418:9": {
+          "prop": "children",
+          "note": "the control is the row’s child; in code it is named and described by the row automatically, so turn its own label off in Figma too"
+        },
+        "Layout": {
+          "ignore": "not a prop: the row stacks below 30rem of its own width through a container query, the same call Header makes for its Device axis"
+        }
+      }
+    },
     "1396:502": {
       "figmaComponent": "Sidebar",
       "figmaNodeId": "1396:502",
@@ -1620,6 +1647,53 @@
         }
       }
     },
+    "1412:344": {
+      "figmaComponent": "Stat Group",
+      "figmaNodeId": "1412:344",
+      "figmaPage": "Stat Tile",
+      "component": "StatGroup",
+      "import": "import { StatGroup } from 'ionbase-ui';",
+      "docs": "components/stat-group/index.html.md",
+      "props": {}
+    },
+    "1412:343": {
+      "figmaComponent": "Stat Tile",
+      "figmaNodeId": "1412:343",
+      "figmaPage": "Stat Tile",
+      "component": "StatTile",
+      "import": "import { StatTile } from 'ionbase-ui';",
+      "docs": "components/stat-tile/index.html.md",
+      "props": {
+        "Label#1412:0": {
+          "prop": "label"
+        },
+        "Value#1412:10": {
+          "prop": "value"
+        },
+        "Comparison#1412:20": {
+          "prop": "comparison"
+        },
+        "State": {
+          "prop": "isLoading",
+          "values": {
+            "Default": false,
+            "Loading": true
+          }
+        },
+        "Change": {
+          "prop": "goodWhen",
+          "when": {
+            "Better Up": "up",
+            "Better Down": "down",
+            "Worse Up": "down",
+            "Worse Down": "up",
+            "Neutral Up": "neutral",
+            "Neutral Down": "neutral"
+          },
+          "note": "Figma draws what the badge SAYS; code derives it from two props. The direction is the sign of `change` (Up is positive), and Better or Worse follows from that and goodWhen — so Worse Up is a rise where down was good. No Change is a `change` that rounds to zero; None is `change` omitted. The badge text itself is computed from `change` and `changeUnit`."
+        }
+      }
+    },
     "1391:431": {
       "figmaComponent": "Stepper",
       "figmaNodeId": "1391:431",
@@ -2015,6 +2089,48 @@
           "prop": "title"
         }
       }
+    },
+    "1432:282": {
+      "figmaComponent": "Chart Tooltip",
+      "figmaNodeId": "1432:282",
+      "figmaPage": "Chart",
+      "component": "ChartTooltip",
+      "import": "import { ChartTooltip } from 'ionbase-ui';",
+      "docs": "components/chart-tooltip/index.html.md",
+      "props": {
+        "Title#1432:18": {
+          "prop": "title"
+        },
+        "Show Row 2#1432:19": {
+          "prop": "rows",
+          "note": "true draws a second entry in rows; the row count is the length of the array"
+        },
+        "Show Row 3#1432:20": {
+          "prop": "rows",
+          "note": "true draws a third entry in rows"
+        }
+      }
+    },
+    "1432:369": {
+      "figmaComponent": "Chart Legend",
+      "figmaNodeId": "1432:369",
+      "figmaPage": "Chart",
+      "component": "ChartLegend",
+      "import": "import { ChartLegend } from 'ionbase-ui';",
+      "docs": "components/chart-legend/index.html.md",
+      "props": {
+        "Shape": {
+          "prop": "shape",
+          "values": {
+            "Square": "square",
+            "Line": "line"
+          }
+        },
+        "Show Item 3#1432:38": {
+          "prop": "items",
+          "note": "true draws a third entry in items; the entry count is the length of the array"
+        }
+      }
     }
   },
   "byFigmaName": {
@@ -3489,6 +3605,33 @@
         }
       }
     },
+    "Setting Row": {
+      "figmaComponent": "Setting Row",
+      "figmaNodeId": "1418:260",
+      "figmaPage": "Setting Row",
+      "component": "SettingRow",
+      "import": "import { SettingRow } from 'ionbase-ui';",
+      "docs": "components/setting-row/index.html.md",
+      "props": {
+        "Label#1418:0": {
+          "prop": "label"
+        },
+        "Description#1418:3": {
+          "prop": "description"
+        },
+        "Show Description#1418:6": {
+          "prop": "description",
+          "note": "false means description is omitted"
+        },
+        "Control#1418:9": {
+          "prop": "children",
+          "note": "the control is the row’s child; in code it is named and described by the row automatically, so turn its own label off in Figma too"
+        },
+        "Layout": {
+          "ignore": "not a prop: the row stacks below 30rem of its own width through a container query, the same call Header makes for its Device axis"
+        }
+      }
+    },
     "Sidebar": {
       "figmaComponent": "Sidebar",
       "figmaNodeId": "1396:502",
@@ -3632,6 +3775,53 @@
         }
       }
     },
+    "Stat Group": {
+      "figmaComponent": "Stat Group",
+      "figmaNodeId": "1412:344",
+      "figmaPage": "Stat Tile",
+      "component": "StatGroup",
+      "import": "import { StatGroup } from 'ionbase-ui';",
+      "docs": "components/stat-group/index.html.md",
+      "props": {}
+    },
+    "Stat Tile": {
+      "figmaComponent": "Stat Tile",
+      "figmaNodeId": "1412:343",
+      "figmaPage": "Stat Tile",
+      "component": "StatTile",
+      "import": "import { StatTile } from 'ionbase-ui';",
+      "docs": "components/stat-tile/index.html.md",
+      "props": {
+        "Label#1412:0": {
+          "prop": "label"
+        },
+        "Value#1412:10": {
+          "prop": "value"
+        },
+        "Comparison#1412:20": {
+          "prop": "comparison"
+        },
+        "State": {
+          "prop": "isLoading",
+          "values": {
+            "Default": false,
+            "Loading": true
+          }
+        },
+        "Change": {
+          "prop": "goodWhen",
+          "when": {
+            "Better Up": "up",
+            "Better Down": "down",
+            "Worse Up": "down",
+            "Worse Down": "up",
+            "Neutral Up": "neutral",
+            "Neutral Down": "neutral"
+          },
+          "note": "Figma draws what the badge SAYS; code derives it from two props. The direction is the sign of `change` (Up is positive), and Better or Worse follows from that and goodWhen — so Worse Up is a rise where down was good. No Change is a `change` that rounds to zero; None is `change` omitted. The badge text itself is computed from `change` and `changeUnit`."
+        }
+      }
+    },
     "Stepper": {
       "figmaComponent": "Stepper",
       "figmaNodeId": "1391:431",
@@ -4027,12 +4217,56 @@
           "prop": "title"
         }
       }
+    },
+    "Chart Tooltip": {
+      "figmaComponent": "Chart Tooltip",
+      "figmaNodeId": "1432:282",
+      "figmaPage": "Chart",
+      "component": "ChartTooltip",
+      "import": "import { ChartTooltip } from 'ionbase-ui';",
+      "docs": "components/chart-tooltip/index.html.md",
+      "props": {
+        "Title#1432:18": {
+          "prop": "title"
+        },
+        "Show Row 2#1432:19": {
+          "prop": "rows",
+          "note": "true draws a second entry in rows; the row count is the length of the array"
+        },
+        "Show Row 3#1432:20": {
+          "prop": "rows",
+          "note": "true draws a third entry in rows"
+        }
+      }
+    },
+    "Chart Legend": {
+      "figmaComponent": "Chart Legend",
+      "figmaNodeId": "1432:369",
+      "figmaPage": "Chart",
+      "component": "ChartLegend",
+      "import": "import { ChartLegend } from 'ionbase-ui';",
+      "docs": "components/chart-legend/index.html.md",
+      "props": {
+        "Shape": {
+          "prop": "shape",
+          "values": {
+            "Square": "square",
+            "Line": "line"
+          }
+        },
+        "Show Item 3#1432:38": {
+          "prop": "items",
+          "note": "true draws a third entry in items; the entry count is the length of the array"
+        }
+      }
     }
   },
   "unmapped": {
     ".Status Indicator": "The dot Avatar draws in its corners. Avatar owns both instances — Top is Intent=Primary with the check glyph, Bottom is Intent=Success with Show Icon off — and exposes them as `topIndicator` / `bottomIndicator`.\n\nThe leading dot in the name is Figma's own marker for a private component: it is excluded from the published library, so a designer cannot place one on a canvas even if they wanted to. That settles a question this entry used to argue: it is internal by the file's own declaration, not merely by our reading of it. The same call Line, Progress and Progress Heading get for being internal to ScrollProgress — with better evidence.\n\nMap it only if the dot is ever removed.",
     "Calendar": "The open calendar both pickers render internally — Calendar and CalendarPopover are not exported, because a grid with no field to own its value is not a control a caller should mount. Mode=Single is DatePicker’s, Mode=Range is DateRangePicker’s; Months=Two is `visibleMonths={2}`, Show Presets is `presets` and Show Clear is `isClearable`, all on DateRangePicker. Drawn separately because a frame cannot both hug a field and overlay a grid on it — the same reason Combobox Menu is its own frame.",
     "Calendar Day": "A day cell inside Calendar — internal to it the way Pagination Item is internal to Pagination. A caller never places one; `isDateUnavailable`, `minValue` and `maxValue` on the pickers decide which state each day draws in.",
+    "Chart Legend Item": "One entry of Chart Legend — `items[n]` in code, `{ label, series }`. Its Shape follows the legend’s `shape`; Series picks chart/1…8. Internal to the legend.",
+    "Chart Tooltip Row": "One entry of Chart Tooltip — `rows[n]` in code, `{ label, value, series }`. Series picks the swatch from chart/1…8, exactly as `series` does. Internal to the tooltip the way Pagination Item is internal to Pagination.",
     "Combobox Menu": "The list Combobox opens. It is not a separate export: the React component renders its own menu, because the two are one control and splitting them would let a caller mount a listbox with no combobox to own it. Drawn separately in Figma because a frame cannot both hug a field and overlay a list on top of it.",
     "Form Field": "Label, helper text and error wiring are built into Input and Select rather than a separate wrapper — the wrapper is how Figma composes them, not how React does.",
     "Line": "An internal part of the Scroll Progress rail, not a component a caller composes.",

package/dist/meta/ChartLegend.json

@@ -0,0 +1,125 @@
+{
+  "name": "ChartLegend",
+  "source": "src/components/Chart.tsx",
+  "propsType": "ChartLegendProps",
+  "description": "ChartLegend — which colour is which series.\n\nColour alone never identifies a series (SC 1.4.1), so any chart with more\nthan one series needs this, or direct labels on the lines. The swatch reads\nthe same `--chart-<n>` as the series itself, through `chartSeriesClass`, so\nthe two cannot drift apart.",
+  "import": "import { ChartLegend } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.74.0",
+  "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.",
+  "useWhen": [
+    "a chart has more than one series",
+    "a single-series chart sits beside others and its colour needs naming"
+  ],
+  "useInstead": [
+    {
+      "when": "the lines are few and there is room to label each at its end",
+      "use": "direct labels in the SVG, with the series class on the text"
+    },
+    {
+      "when": "the scale is a magnitude ramp (a heatmap), not categories",
+      "use": "a Less-to-More row of .ion-chart__heat--0…5 cells"
+    }
+  ],
+  "composition": {
+    "note": "Items are listed in the order the series are drawn, with the same series numbers the chart uses. Place it above or below the plot inside the same .ion-chart figure.",
+    "example": "<ChartLegend shape=\"line\" items={[{ label: 'Production', series: 1 }, { label: 'Staging', series: 2 }]} />"
+  },
+  "variants": {
+    "shape": {
+      "square": {
+        "use": "the default — bars, areas and heatmap-like marks"
+      },
+      "line": {
+        "use": "line charts, so the key looks like the mark it names"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "a list, so a screen reader announces how many series there are",
+      "swatches are aria-hidden; every series is named in text"
+    ],
+    "requires": [
+      "series numbers matching the chart — the legend cannot see the chart"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a multi-series chart with no legend and no direct labels",
+      "why": "colour becomes the only way to tell series apart, which fails SC 1.4.1 and fails anyone who cannot tell blue from purple"
+    },
+    {
+      "dont": "listing series in a different order from the chart",
+      "why": "the reader matches legend to chart by position as much as by colour"
+    }
+  ],
+  "stylesheet": "src/styles/chart.css",
+  "tokens": [
+    "--border-default",
+    "--border-strong",
+    "--border-stronger",
+    "--border-subtle",
+    "--border-width-default",
+    "--chart-1",
+    "--chart-2",
+    "--chart-3",
+    "--chart-4",
+    "--chart-5",
+    "--chart-6",
+    "--chart-7",
+    "--chart-8",
+    "--chart-sequential-1",
+    "--chart-sequential-2",
+    "--chart-sequential-3",
+    "--chart-sequential-4",
+    "--chart-sequential-5",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-semibold",
+    "--ion-chart-series",
+    "--ion-shadow-shadow-lg",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-md",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-raised",
+    "--surface-sunken",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
+  ],
+  "props": {
+    "items": {
+      "type": "ChartLegendItem[]",
+      "required": true,
+      "origin": "own",
+      "description": "One per series, in the order the series are drawn."
+    },
+    "shape": {
+      "type": "ChartLegendShape | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "`square` for bars and areas, `line` for line charts.",
+      "values": [
+        "square",
+        "line"
+      ]
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/ChartTooltip.json

@@ -0,0 +1,126 @@
+{
+  "name": "ChartTooltip",
+  "source": "src/components/Chart.tsx",
+  "propsType": "ChartTooltipProps",
+  "description": "ChartTooltip — the panel that shows the values under the pointer.\n\nPut it inside visx's Tooltip with `chartTooltipProps`, so visx places it and\nthis draws it: raised, rimmed and shadowed like Popover and Toast.\n\nIT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard\nor screen-reader user never sees it. Every chart still needs a text summary\nand the values in a table (visually hidden is fine) — the tooltip is a\nconvenience for pointer users, never the only route to a number.",
+  "import": "import { ChartTooltip } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.74.0",
+  "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.",
+  "useWhen": [
+    "a chart drawn with visx shows exact values on hover",
+    "several series share an x value and the reader compares them at a point"
+  ],
+  "useInstead": [
+    {
+      "when": "it explains a control rather than a data point",
+      "use": "Tooltip"
+    },
+    {
+      "when": "it holds interactive content",
+      "use": "Popover"
+    },
+    {
+      "when": "the reader needs every value, or needs them without a pointer",
+      "use": "Table"
+    }
+  ],
+  "composition": {
+    "note": "Render it inside visx's Tooltip, TooltipWithBounds or TooltipInPortal with {...chartTooltipProps}, which turns off visx's own box so this one is the only panel. Axes take {...chartAxisProps} and gridlines {...chartGridProps}; a series takes className={chartSeriesClass(n)} plus ion-chart__line, __area, __bar or __point.",
+    "example": "<TooltipWithBounds top={top} left={left} {...chartTooltipProps}><ChartTooltip title=\"12 Sep\" rows={[{ label: 'Success rate', value: '96.2%', series: 1 }]} /></TooltipWithBounds>"
+  },
+  "a11y": {
+    "guarantees": [
+      "rows are a <dl>, so each value is announced with its label",
+      "the series swatch is aria-hidden; the label carries the name"
+    ],
+    "requires": [
+      "a text summary and the values in a table (visually hidden is fine) — the tooltip appears on hover, so keyboard and screen-reader users never reach it",
+      "`value` already formatted — the tooltip cannot know the unit or precision"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "making the tooltip the only way to read a value",
+      "why": "it exists only under a mouse pointer; without a table the data is invisible to keyboard and screen-reader users"
+    },
+    {
+      "dont": "leaving visx's default tooltip styles on",
+      "why": "it draws a second white box with a hardcoded shadow around this one, and that box does not theme"
+    },
+    {
+      "dont": "a swatch colour that does not match the series",
+      "why": "pass the same `series` number the line or bar uses — the swatch reads the same token only if it is told the same index"
+    }
+  ],
+  "stylesheet": "src/styles/chart.css",
+  "tokens": [
+    "--border-default",
+    "--border-strong",
+    "--border-stronger",
+    "--border-subtle",
+    "--border-width-default",
+    "--chart-1",
+    "--chart-2",
+    "--chart-3",
+    "--chart-4",
+    "--chart-5",
+    "--chart-6",
+    "--chart-7",
+    "--chart-8",
+    "--chart-sequential-1",
+    "--chart-sequential-2",
+    "--chart-sequential-3",
+    "--chart-sequential-4",
+    "--chart-sequential-5",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-semibold",
+    "--ion-chart-series",
+    "--ion-shadow-shadow-lg",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-md",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-raised",
+    "--surface-sunken",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
+  ],
+  "props": {
+    "title": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "What the pointer is over — usually the x value, e.g. a date."
+    },
+    "rows": {
+      "type": "ChartTooltipRow[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "One row per series at that point."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Free content after the rows, for anything that is not label/value."
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/SettingRow.json

@@ -0,0 +1,102 @@
+{
+  "name": "SettingRow",
+  "source": "src/components/SettingRow.tsx",
+  "propsType": "SettingRowProps",
+  "description": "SettingRow — one setting: its name and what it does on the left, the control\non the right. The row the SettingsPanel pattern is built from.\n\nTHE WIRING IS THE POINT, NOT THE LAYOUT\n\nA label placed beside a Toggle looks labelled and is not: a screen reader\nannounces \"switch, off\" and nothing else, and the description is never read\nat all. The pattern names this as its first a11y requirement, and the demo\napp's stand-in handed the ids to a render function — which still left the\nwiring as a step to remember. Here an element child is cloned with\n`aria-labelledby` and `aria-describedby` already set, so the row cannot be\nused without them. A value the caller passes explicitly wins, so an\nexisting name is never overwritten.\n\nA CONTROL WITH ITS OWN TEXT KEEPS ITS OWN NAME\n\nA Button reading \"Delete workspace…\" must be announced by that text — WCAG\n2.5.3 wants the visible words inside the accessible name, and a row label of\n\"Danger zone\" would replace them. So a child with children of its own is\nleft named by them, and the row's label joins its description instead: the\nsetting is still announced, just as context rather than as the name.\n\nThe label is text rather than a `<label>` because the control may not be a\nform field, and a `<label>` pointing at a button is invalid.\n\nIt stacks below 30rem of its OWN width, not the viewport's, so the same row\nworks in a full page and in a narrow drawer.",
+  "import": "import { SettingRow } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.72.0",
+  "summary": "One setting: its name and description on the left, the control on the right — and the control named and described by them automatically.",
+  "useWhen": [
+    "a settings or preferences panel, one row per setting",
+    "a control whose meaning needs a sentence of explanation beside it"
+  ],
+  "useInstead": [
+    {
+      "when": "it is a form field with its own visible label above it",
+      "use": "Input",
+      "why": "Input, Select and the pickers carry their own label and description; a SettingRow around them names the field twice"
+    },
+    {
+      "when": "a group of options answers one question",
+      "use": "RadioGroup",
+      "why": "the group has its own label; put the RadioGroup under a heading rather than in a row"
+    }
+  ],
+  "slots": {
+    "children": {
+      "accepts": [
+        "Toggle",
+        "Checkbox",
+        "Select",
+        "Button"
+      ],
+      "note": "an element is cloned with aria-labelledby and aria-describedby pointing at the row's text; a function receives the ids instead, for a control that needs them somewhere else"
+    }
+  },
+  "a11y": {
+    "namesChild": true,
+    "guarantees": [
+      "an element child with no text of its own — a Toggle, a Checkbox with no label — is named by the row's label and described by its description, so it is announced as \"Weekly digest, switch, off\" plus what it does, not \"switch, off\"",
+      "a child with its own text — a Button — keeps that text as its name (WCAG 2.5.3), and the row's label and description are attached as its description instead",
+      "an aria-labelledby or aria-describedby the caller passes explicitly is kept, never overwritten",
+      "it stacks by its own width, so it reads the same in a page and in a narrow drawer"
+    ],
+    "requires": [
+      "one control per row — the ids name one element"
+    ],
+    "notes": [
+      "The label is text, not a <label>, because the control may be a Button; a <label> pointing at a button is invalid."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a Toggle or Checkbox with its own visible label inside a SettingRow",
+      "why": "the control then names itself, the row's label becomes a description, and the setting's name is shown twice"
+    },
+    {
+      "dont": "a Checkbox row that saves immediately",
+      "why": "Toggle is immediate and Checkbox is saved with a submit — the SettingsPanel pattern's first rule"
+    }
+  ],
+  "stylesheet": "src/styles/setting-row.css",
+  "tokens": [
+    "--font-family-sans",
+    "--font-weight-semibold",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-8",
+    "--text-default",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": true,
+      "origin": "own",
+      "description": "The setting's name. It becomes the control's accessible name."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "What the setting does, announced with the control."
+    },
+    "children": {
+      "type": "React.ReactElement<{ 'aria-labelledby'?: string; 'aria-describedby'?: string; children?: React.ReactNode; }, string | React.JSXElementConstructor<any>> | ((ids: SettingRowIds) => React.ReactNode)",
+      "required": true,
+      "origin": "own",
+      "description": "The control. Pass it as an element — `<Toggle />`, `<Select />`,\n`<Button />` — and the row names and describes it for you. Pass a\nfunction when the ids have to go somewhere other than the element's own\nprops; it receives them."
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}