Performance

Every component declares performance budgets in its metadata. The end-to-end suite measures them in a production build under a strict Content Security Policy, one test at a time after all functional tests, and fails the release when a budget is exceeded. The numbers below are the values measured in the most recent recorded run.

Environment


Measured	2026-09-29 at commit `f9ec31d`
Machine	Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz, 8 logical cores, 32 GB RAM
System	win32 10.0.26200 (x64), Node.js v22.18.0
Browser	Chromium bundled with Playwright (headless, Desktop Chrome profile), Playwright 1.63.0

85 of 85 measurements within budget.

Measured budgets

Chart performance

Line 5 x 1,000 < 50 ms; bar 50 x 4 < 30 ms; pie 12 slices < 15 ms; sparkline < 1 ms

Measurement	Measured	Budget	Headroom
line	9.30 ms	< 50 ms	81%
resize	8.00 ms	< 50 ms	84%
bar	5.10 ms	< 30 ms	83%
pie	1.90 ms	< 15 ms	87%
spark	0.06 ms	< 1 ms	95%

Data table performance

Render 1,000 x 8 < 150 ms; sort 10,000 rows: text < 100 ms, numeric < 50 ms

Measurement	Measured	Budget	Headroom
render	15.7 ms	< 150 ms	90%
sort	51.1 ms	< 100 ms	49%
numeric sort	4.90 ms	< 50 ms	90%

Data grid performance: 10,000 rows filter < 50 ms, multi-sort < 120 ms, CSV < 150 ms; 100,000 virtual rows create < 200 ms, scroll < 16 ms

Measurement	Measured	Budget	Headroom
rendered	26.0 ms	< 80 ms	68%
filter	4.00 ms	< 50 ms	92%
multi sort	4.10 ms	< 120 ms	97%
csv	36.0 ms	< 150 ms	76%
create	58.8 ms	< 200 ms	71%
scroll	1.60 ms	< 16 ms	90%

Theme Designer

Theme designer: edit -> compliance < 500 ms, edit -> preview < 400 ms (median of 5)

Measurement	Measured	Budget	Headroom
timings compliance	179.7 ms	< 500 ms	64%
timings preview	156.4 ms	< 400 ms	61%

Form performance budgets

TextInput.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.05 ms	< 1 ms	95%

Textarea.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.04 ms	< 1 ms	96%

NumberInput.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.08 ms	< 1 ms	92%

Checkbox.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.05 ms	< 1 ms	95%

Switch.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.03 ms	< 1 ms	97%

CheckboxGroup.create: < 2 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.19 ms	< 2 ms	90%

RadioGroup.create: < 2 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.12 ms	< 2 ms	94%

Select.create with 1,000 options: < 100 ms

Measurement	Measured	Budget	Headroom
t	5.40 ms	< 100 ms	95%

Form validate() over 200 invalid controls: < 150 ms

Measurement	Measured	Budget	Headroom
t	33.5 ms	< 150 ms	78%

Stepper.create (10 steps) < 5 ms; MenuBar.create (8 menus x 20 items) < 50 ms; Sidebar.create (200 items) < 50 ms

Measurement	Measured	Budget	Headroom
stepper	0.40 ms	< 5 ms	92%
menubar	2.40 ms	< 50 ms	95%
sidebar	2.60 ms	< 50 ms	95%

ContextMenu create + open (200 items) < 100 ms; HoverCard.show and BottomSheet.open < 16 ms

Measurement	Measured	Budget	Headroom
context	8.30 ms	< 100 ms	92%
hover	0.70 ms	< 16 ms	96%
sheet	1.60 ms	< 16 ms	90%

SortableList.create (500 items) < 100 ms; one keyboard move with 500 items < 16 ms

Measurement	Measured	Budget	Headroom
create	12.0 ms	< 100 ms	88%
move	0.20 ms	< 16 ms	99%

Picker performance budgets

Calendar.create (2 months, range mode): < 10 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	1.01 ms	< 10 ms	90%

DateRangePicker.create: < 15 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	1.64 ms	< 15 ms	89%

MonthPicker.create: < 5 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.18 ms	< 5 ms	96%

YearPicker.create: < 5 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.17 ms	< 5 ms	97%

QuarterPicker.create: < 5 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.21 ms	< 5 ms	96%

DurationPicker.create: < 2 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.14 ms	< 2 ms	93%

Charts, dashboard, and rich text performance

Charts: scatter 2,000 < 60 ms; combo 3 x 200 < 60 ms; waterfall 200 < 40 ms; histogram 10,000 < 40 ms; heatmap 24 x 30 < 60 ms; radar 5 x 12 < 30 ms; treemap 500 < 60 ms; funnel 20 < 20 ms; box plot 4 x 50 < 80 ms; bullet 30 < 30 ms; gauge < 2 ms

Measurement	Measured	Budget	Headroom
scatter	6.70 ms	< 60 ms	89%
combo	10.7 ms	< 60 ms	82%
waterfall	9.40 ms	< 40 ms	76%
histogram	3.90 ms	< 40 ms	90%
heatmap	14.5 ms	< 60 ms	76%
radar	2.80 ms	< 30 ms	91%
treemap	3.50 ms	< 60 ms	94%
funnel	1.90 ms	< 20 ms	90%
box	18.6 ms	< 80 ms	77%
bullet	4.00 ms	< 30 ms	87%
gauge	0.30 ms	< 2 ms	85%

Dashboard: grid of 50 items < 40 ms; keyboard move step < 16 ms; stat card < 2 ms

Measurement	Measured	Budget	Headroom
create	3.90 ms	< 40 ms	90%
move	0.90 ms	< 16 ms	94%
card	0.30 ms	< 2 ms	85%

Rich text: create with 200 paragraphs < 80 ms; typing in a 200-paragraph document < 16 ms per character

Measurement	Measured	Budget	Headroom
create	14.8 ms	< 80 ms	82%
per char	7.50 ms	< 16 ms	53%

Pivot grid and org chart performance

Pivot: 100,000 records to ready < 600 ms; expanding a group < 250 ms; virtual scroll step with 5,000 rows < 50 ms

Measurement	Measured	Budget	Headroom
ready	243.7 ms	< 600 ms	59%
expand	81.0 ms	< 250 ms	68%
scroll	15.7 ms	< 50 ms	69%

Org chart: 1,000 visible nodes < 80 ms; expand or collapse < 80 ms; layout of 5,000 nodes < 60 ms

Measurement	Measured	Budget	Headroom
create	24.4 ms	< 80 ms	69%
toggle	9.80 ms	< 80 ms	88%
layout	6.80 ms	< 60 ms	89%

Scheduler and scheduling picker performance

Scheduler: week with 300 events < 120 ms; next month with 1,000 events < 120 ms; timeline with 500 resources < 150 ms

Measurement	Measured	Budget	Headroom
week	32.3 ms	< 120 ms	73%
month	40.7 ms	< 120 ms	66%
timeline	52.5 ms	< 150 ms	65%

Pickers: business calendar with 12 months < 40 ms; recurrence picker < 15 ms; schedule picker with recurrence < 30 ms

Measurement	Measured	Budget	Headroom
business	8.60 ms	< 40 ms	78%
recurrence	4.20 ms	< 15 ms	72%
schedule	11.2 ms	< 30 ms	63%

Kanban and Gantt performance

Kanban: 8 columns with 1,000 cards < 120 ms; keyboard move < 40 ms; one virtual cell of 5,000 cards < 80 ms

Measurement	Measured	Budget	Headroom
create	25.8 ms	< 120 ms	78%
move	6.90 ms	< 40 ms	83%
virtual	6.30 ms	< 80 ms	92%

Gantt: 2,000 tasks with 1,500 dependencies < 150 ms; a move < 60 ms; scheduleGantt for 10,000 tasks < 80 ms

Measurement	Measured	Budget	Headroom
create	17.5 ms	< 150 ms	88%
move	17.2 ms	< 60 ms	71%
engine	29.0 ms	< 80 ms	64%

Upload and auth performance budgets

FileUpload.create: < 1 ms average per instance (500 instances)

Measurement	Measured	Budget	Headroom
avg	0.13 ms	< 1 ms	87%

PasswordInput.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.08 ms	< 1 ms	92%

OtpInput.create: < 1 ms average per instance (1000 instances)

Measurement	Measured	Budget	Headroom
avg	0.07 ms	< 1 ms	93%

FileUpload: dropping 200 files (validate and render rows): < 100 ms

Measurement	Measured	Budget	Headroom
t	27.5 ms	< 100 ms	73%

UploadQueue.add with 200 files: < 100 ms

Measurement	Measured	Budget	Headroom
t	38.0 ms	< 100 ms	62%

PasswordStrengthMeter.evaluate (default rules): < 1 ms average

Measurement	Measured	Budget	Headroom
t	0.13 ms	< 1 ms	87%

SessionWarningDialog.open: < 16 ms

Measurement	Measured	Budget	Headroom
t	2.50 ms	< 16 ms	84%

Performance budgets

Button.enhance: < 0.5 ms average per instance (1,000 instances)

Measurement	Measured	Budget	Headroom
avg	0.01 ms	< 0.5 ms	98%

Combobox: create < 100 ms and filter keystroke < 50 ms with 1,000 options

Measurement	Measured	Budget	Headroom
create	4.90 ms	< 100 ms	95%
filter	5.10 ms	< 50 ms	90%

Dialog.open: < 16 ms

Measurement	Measured	Budget	Headroom
elapsed	1.30 ms	< 16 ms	92%

DateInput.create: < 5 ms average per instance (100 instances)

Measurement	Measured	Budget	Headroom
avg	0.55 ms	< 5 ms	89%

Declared budgets per component

Budgets as declared in each component’s metadata (metadata/<name>/component.json, shipped in the package).

Component	Budget	Tested scale
Accordion	Accordion.create with 50 items: < 5 ms in headless Chromium	Unit-tested with up to 7 items; designed for tens of items.
Alert	Alert.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; alerts are not data-driven.
Avatar	Avatar.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; one avatar per row in lists of thousands is expected.
Avatar Group	AvatarGroup.create with 6 items, max 4: < 2 ms average in headless Chromium	Up to 10,000 items accepted; at most max (up to 50) avatars are rendered.
Badge	Badge.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; not data-driven.
Bar Chart	BarChart.create, 50 categories x 4 series (grouped and stacked), including the first render: < 30 ms in headless Chromium (e2e performance test, median of 5)	Up to about 200 bars at once (each bar is one focusable node plus one texture overlay). For hundreds of categories, aggregate first or use a Data Table.
Bottom Sheet	BottomSheet.open(): < 16 ms (one frame) in headless Chromium	One sheet at a time, alongside other overlays arbitrated by the overlay stack; up to three snap points in the unit tests.
Box Plot	BoxPlot.create, 4 series x 50 categories from raw values (100 values each), including the first render: < 80 ms in headless Chromium (e2e performance test)	Up to about 200 boxes (each box is one focusable node plus whiskers, a median line, an optional texture overlay, and one dot per outlier). Raw values are sorted per box on every render; for very large samples pass precomputed statistics (boxStats) instead.
Breadcrumb	Breadcrumb.create with 10 items: < 1 ms in headless Chromium	Trails of up to 6 items in the unit tests.
Bullet Chart	BulletChart.create, 30 measures with targets and ranges, including the first render: < 30 ms in headless Chromium (e2e performance test)	Up to about 30 measures per chart (each row is one focusable bar, up to three range bands, a target tick, and a label); increase height with the number of rows.
Business Calendar	BusinessCalendar.create with 12 months: < 40 ms in headless Chromium (e2e performance test)	Up to 12 visible months (about 370 day cells) and a few hundred holidays and exceptions; the engine caches day lookups.
Button	Button.enhance, per instance (1,000 instances): < 0.5 ms average in headless Chromium	1,000 buttons on one page in the performance test.
Button Group	ButtonGroup.create with 10 buttons: < 2 ms in headless Chromium	Unit-tested with up to 3 buttons; intended for small groups (2 to 7 buttons).
Calendar	Calendar.create, per instance (100 instances): < 5 ms average in headless Chromium Calendar.create with visibleMonths 2 and selectionMode ‘range’, per instance (100 instances): < 10 ms average in headless Chromium	One to three months (up to 42 day cells each) per instance; cells are reused across months.
Carousel	Carousel.create with 5 slides: < 3 ms average in headless Chromium	Up to 100 slides; all slides are in the DOM (inert when not shown).
Checkbox	Checkbox.create, per instance (1,000 instances): < 1 ms average in headless Chromium (target; not yet covered by the performance test)	Unit-tested per instance; not yet included in the 1,000-instance performance test.
Checkbox Group	CheckboxGroup.create with 10 options, per instance: < 2 ms average in headless Chromium (target; not yet covered by the performance test)	Unit-tested with up to 4 options per group; intended for short lists (up to about 20 options).
Collapsible	Collapsible.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; not data-driven.
Combo Chart	ComboChart.create, 3 series x 200 categories, including the first render: < 60 ms in headless Chromium (e2e performance test)	Measured in tests/e2e/perf-r3.spec.ts with 3 series x 200 categories. One DOM node per bar and per line/area point (no virtual marks); use zoom for long category lists. The data table is built only when opened (toggle mode).
Combobox	Combobox.create with 1,000 options: < 100 ms in headless Chromium Filter keystroke with 1,000 options (open): < 50 ms in headless Chromium	1,000 options. Larger lists require virtualization, which is not available; use loadOptions instead.
Context Menu	ContextMenu.create plus open() with 200 items: < 100 ms in headless Chromium	200 items in one level; three nested levels; one context menu per target.
Dashboard Grid	DashboardGrid.create with 50 items: < 40 ms in headless Chromium (e2e performance test) One keyboard move step with 50 items: < 16 ms in headless Chromium (e2e performance test)	50 items for the performance budgets; 3 to 4 items in the behavior unit tests.
Dashboard Widget	DashboardWidget.create: Not separately budgeted; covered by the Dashboard Grid create budget (50 items < 40 ms in headless Chromium, e2e performance test)	Behavior unit tests with single widgets; dashboards of 50 widgets are the Dashboard Grid target.
Data Grid	DataGrid.create with 1,000,000 rows x 20 columns: < 800 ms in headless Chromium (validating a million unique row ids dominates) Render work per vertical scroll frame, 1,000,000 rows: < 16 ms Render work per horizontal scroll frame, 200 columns: < 16 ms First locale-aware text sort of 100,000 rows: < 1300 ms (collator comparisons; ranks are cached per column) Repeated sort of 100,000 rows (cached ranks): < 150 ms applyTransaction with 1,000 updates on 100,000 sorted rows: < 250 ms (unchanged rows keep their cached sort ranks) Filter 100,000 rows with two text conditions: < 80 ms (one normalized text per row; ASCII fast path) First quick filter, 100,000 rows x 20 columns, words that most rows miss: < 2500 ms (displayed text is formatted per column until one matches; texts are cached per row) Repeated quick filter, 100,000 rows: < 200 ms Open a set filter panel with 100,000 distinct values: < 2000 ms (values sorted with the locale collator; cached until the rows change; 1,000 rendered) Parse and apply an advanced filter of 3 conditions on 100,000 rows: < 120 ms Group 100,000 rows by two columns with three aggregates: < 900 ms (filter, sort, group, flatten, render) Expand every group of 100,000 grouped rows: < 200 ms	1,000,000 rows; 300 columns.
Data Table	DataTable.create with 1,000 rows x 8 columns, pageSize null (client mode): < 150 ms in headless Chromium (e2e performance test) Sorting 10,000 rows with pageSize 25 (update({ sort })), text column (locale collation with numeric ordering): < 100 ms in headless Chromium (e2e performance test, median of 5; measured about 60 ms) Sorting 10,000 rows with pageSize 25, numeric column: < 50 ms in headless Chromium (e2e performance test, median of 5) Since 0.3.0: multi-column sort of 10,000 rows (text then number) with pageSize 25: < 120 ms in headless Chromium (e2e performance test, median of 5) Since 0.3.0: filtering 10,000 rows (text contains, number range, and global search) with pageSize 25: < 50 ms in headless Chromium (e2e performance test, median of 5, displayed-text cache warm) Since 0.3.0: DataTable.create with 100,000 rows, virtual: true, pageSize null: < 200 ms in headless Chromium (e2e performance test) Since 0.3.0: re-rendering the virtual window after a scroll, 100,000 rows: < 16 ms per scroll update in headless Chromium (e2e performance test, median of 10 jumps) Since 0.3.0: toCsv() of 10,000 rows x 8 columns (formatted values): < 150 ms in headless Chromium (e2e performance test, median of 5)	10,000 rows client-side with paging, filtering, and multi-sort; 1,000 rows x 8 columns rendered at once; 100,000 rows with virtual scrolling (about 40 rows rendered for a 70vh region). Row elements are reused by row id; only the current page (or the virtual window) is in the DOM. Virtual scrolling is bounded by the browser’s maximum element height (about 33,000,000 px in Chromium: roughly 800,000 rows at 40 px); use server mode beyond that.
Date Input	DateInput.create, per instance (100 instances): < 5 ms average in headless Chromium	100 instances on one page in the performance test.
Date Picker	DatePicker.create, per instance (100 instances): < 10 ms average in headless Chromium	One calendar per picker, created once and reused on every open.
Date Range Picker	DateRangePicker.create, per instance (100 instances): < 15 ms average in headless Chromium	Two Date Inputs and one calendar per picker, created once; the calendar is reused on every open.
DateTime Picker	DateTimePicker.create, per instance (100 instances): < 15 ms average in headless Chromium	One calendar and one listbox (1440 / step options, 48 by default) per picker, created once and reused on every open.
Dialog	Dialog.open() to showModal() completion: < 16 ms (one frame) in headless Chromium	Nested dialog stacking is native; tested with one dialog containing a combobox.
Drawer	Drawer.open() to showModal() completion: < 16 ms (one frame) in headless Chromium	One drawer at a time, alongside other overlays arbitrated by the overlay stack.
Duration Picker	DurationPicker.create, per instance (100 instances): < 2 ms average in headless Chromium	Up to four unit segments per instance; the largest segment holds up to the digits of max (default 3 digits for days and hours, 4 for minutes, 5 for seconds).
Error Summary	ErrorSummary.show: No dedicated performance test; renders one list item per error	Unit tests cover summaries with up to four items.
Fieldset	Fieldset.enhance, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; not data-driven.
File Upload	FileUpload.create, per instance (500 instances): < 1 ms average in headless Chromium Select 200 files (validate and render rows): < 100 ms in headless Chromium	200 files in one selection in the performance test; tested with 500 fields on a page.
Form	Form.validate / submit: < 150 ms for 200 invalid Text Inputs in headless Chromium, including rendering 200 messages and moving focus (about 25 ms of script; the rest is the layout for the new messages)	200 controls in the performance test; unit tests cover forms with up to 6 controls plus plain native elements.
Form Field	FormField.create: No dedicated performance test; one render per input/change/blur event	Unit tests cover single fields of each supported element type.
Funnel Chart	FunnelChart.create, 20 stages, including the first render: < 20 ms in headless Chromium (e2e performance test)	Up to about 20 stages (each stage is one focusable node, one connector, and two text labels). Funnels with more stages lose readability; aggregate stages first.
Gantt Chart	Gantt.create with 2,000 tasks and 1,500 dependencies: < 150 ms in headless Chromium (e2e performance test) Keyboard move of a task with 2,000 tasks (reschedule and render): < 60 ms in headless Chromium (e2e performance test) scheduleGantt for 10,000 tasks and 9,000 dependencies: < 80 ms in headless Chromium (e2e performance test)	2,000 visible tasks (10,000 in the engine budget) for the budgets; 6 to 2,000 tasks in the unit tests. Rows are virtual; timeline columns are not (a day scale over several years renders a long scale).
Gauge	Gauge.create with bands and a target, per instance: < 2 ms in headless Chromium (e2e performance test)	Dozens of instances per page; no layout reads and no resize observer.
Heatmap	Heatmap.create with 24 x 30 cells, including the first render: < 60 ms in headless Chromium (e2e performance test)	Designed for up to about 1,000 cells (for example 24 x 30 or 52 x 7); every cell is a focusable SVG rect.
Histogram	Histogram.create, 10,000 values, including binning and the first render: < 40 ms in headless Chromium (e2e performance test)	Measured in tests/e2e/perf-r3.spec.ts with 10,000 values. Binning is one pass for the extent plus a binary search per value; the DOM has one node per bin (Sturges asks for 15 bins at 10,000 values; a bin count of up to 500 gives about that many). The data table is built only when opened (toggle mode).
Hover Card	HoverCard.show(): < 16 ms (one frame) in headless Chromium	One visible hover card at a time by design; many closed instances per page (four listeners on the trigger, three on the card, one configuration subscription each).
Inline Message	InlineMessage.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; not data-driven.
Kanban Board	Kanban.create with 8 columns and 1,000 cards: < 120 ms in headless Chromium (e2e performance test) Keyboard move of a card with 1,000 cards on the board: < 40 ms in headless Chromium (e2e performance test) Kanban.create with one cell of 5,000 cards (virtual): < 80 ms in headless Chromium (e2e performance test)	1,000 cards over 8 columns and 5,000 cards in one virtual cell for the budgets; 4 to 500 cards in the behavior unit tests. Columns are not virtualized (tens of columns).
Kbd	Kbd.create, per instance: < 1 ms average in headless Chromium	Unit-tested per instance; not data-driven.
Line Chart	LineChart.create, 5 series x 1,000 points (time axis, with gaps), including the first render: < 50 ms in headless Chromium (e2e performance test, median of 5) Re-render after update() for the same data: < 50 ms (e2e performance test)	5 series x 1,000 points; above 600 visible points points are virtual (two proxy marks), so DOM size is independent of point count except for the line paths. The data table is built only when opened (toggle mode).
Menu	Menu.create plus open() with 200 items: < 100 ms in headless Chromium	200 items in one level; three nested levels.
Menu Bar	MenuBar.create with 8 menus of 20 items: < 50 ms in headless Chromium	8 menubar items with 20 menu items each; submenus two levels deep.
Month Picker	MonthPicker.create, per instance (100 instances): < 5 ms average in headless Chromium	100 instances per page in the performance test; the popup grid (12 cells) is created once per picker and re-rendered per page.
Multi Select	MultiSelect.create with 1,000 options: < 100 ms in headless Chromium	1,000 options; larger lists should use loadOptions (no virtualization).
Number Input	NumberInput.create, per instance (1,000 instances): < 1 ms average in headless Chromium	Target: 1,000 inputs on one page (performance test pending the e2e harness entry).
Organization Chart	OrgChart.create with 1,000 visible nodes: < 80 ms in headless Chromium (e2e performance test) Expand or collapse a node with 1,000 visible nodes: < 80 ms in headless Chromium (e2e performance test) layoutOrgChart for 5,000 nodes: < 60 ms in headless Chromium (e2e performance test)	1,000 visible nodes (5,000 in the layout budget) for the budgets; 7 nodes in the behavior unit tests. Every visible node is a DOM element (no virtualization): collapse levels (expandDepth) for larger organizations.
OTP Input	OtpInput.create, per instance (1,000 instances): < 1 ms average in headless Chromium	1,000 inputs on one page in the performance test.
Pagination	Pagination.create with 10,000 pages: < 1 ms in headless Chromium (rendered items are bounded by siblingCount and boundaryCount)	getPageItems exhaustively tested for page counts 0 to 30 across 7 sibling/boundary combinations; 12,345 items in the unit tests.
Password Input	PasswordInput.create, per instance (1,000 instances): < 1 ms average in headless Chromium	1,000 inputs on one page in the performance test.
Password Strength Meter	evaluate() with the default rules: < 1 ms in headless Chromium	Evaluated on every keystroke; announcements are debounced to one per second of pause.
Pie Chart	PieChart.create with 12 slices (pie and donut), including the first render: < 15 ms in headless Chromium (e2e performance test, median of 5)	Designed for up to about 12 slices; more work but become unreadable (colors repeat after 8).
Pivot Grid	Local engine: create to ready with 100,000 records (2 row fields, 1 column field, all expanded): < 600 ms in headless Chromium (e2e performance test) Expanding a row group (local engine, 100,000 records): < 250 ms in headless Chromium (e2e performance test) Virtual scroll step with 5,000 visible rows: < 50 ms in headless Chromium (e2e performance test)	100,000 records and 5,000 visible rows (virtual) for the budgets; up to 100 visible value columns; 6 records in the behavior unit tests. Without virtual, more than about 1,000 visible rows slows rendering.
Popover	Popover.open() to visible and positioned: < 16 ms (one frame) in headless Chromium	One popover open at a time, nested inside a Dialog; many closed instances per page (listeners only on the trigger and popup).
Progress Bar	setValue() re-render: < 1 ms in headless Chromium	One bar per operation; tested with frequent setValue() calls (every animation frame).
Quarter Picker	QuarterPicker.create, per instance (100 instances): < 5 ms average in headless Chromium	100 instances per page in the performance test; the popup grid (4 cells) is created once per picker and re-rendered per page.
Radar Chart	RadarChart.create with 5 series x 12 axes, including the first render: < 30 ms in headless Chromium (e2e performance test)	Designed for up to about 5 series and 12 axes; every vertex is a focusable SVG path.
Radio Group	RadioGroup.create with 7 options, per instance: < 2 ms average in headless Chromium (target; not yet covered by the performance test)	Unit-tested with up to 4 options per group; intended for short lists (up to about 20 options).
Recurrence Picker	RecurrencePicker.create with a start and a 5-occurrence preview: < 15 ms per instance in headless Chromium (e2e performance test)	One rule per instance; previews up to 20 occurrences.
Rich Text Editor	RichTextEditor.create with a 200-paragraph document: < 80 ms in headless Chromium (e2e performance test) Typing a character in a 200-paragraph document: < 16 ms in headless Chromium (e2e performance test)	Documents of a few hundred blocks. Each edit re-renders only changed blocks (unchanged block elements are reused).
Scatter Chart	ScatterChart.create, 2,000 points, including the first render: < 60 ms in headless Chromium (e2e performance test)	Measured in tests/e2e/perf-r3.spec.ts with 2,000 points. Above 600 visible points points are virtual (two proxy marks plus one decorative path per series), so DOM size is independent of point count. Hover uses a spatial hash. The data table is built only when opened (toggle mode).
Schedule Picker	SchedulePicker.create with recurrence: < 30 ms per instance in headless Chromium (e2e performance test)	One schedule per instance (four inner pickers and an optional Recurrence Picker).
Scheduler	Scheduler.create, week view with 300 events: < 120 ms in headless Chromium (e2e performance test) Next period, month view with 1,000 events (200 recurring): < 120 ms in headless Chromium (e2e performance test) Timeline with 500 resources and 2,000 events, create: < 150 ms in headless Chromium (e2e performance test)	Up to 1,000 occurrences in a visible range and 500 timeline resources (rows are virtualized above 60 resources). Series are expanded per visible range, fast-forwarded without COUNT.
Scroll Area	ScrollArea.enhance, per instance: < 1 ms average in headless Chromium	Edge state updates at most once per animation frame while scrolling; observers watch the element and its direct children.
Select	Select.create with 1,000 options: < 100 ms in headless Chromium	1,000 options in one select in the unit test.
Session Warning Dialog	SessionWarningDialog open(): < 16 ms in headless Chromium	One dialog per page; one timer at a time.
Sidebar	Sidebar.create with 200 items in nested groups: < 50 ms (headless Chromium)	4 top-level items with a group nested two levels deep in the unit tests.
Skeleton	Skeleton.create() with 100 lines: < 2 ms in headless Chromium	Up to 100 lines per instance.
Slider	Slider.create, per instance: < 2 ms average in headless Chromium	Any finite min, max, and step; tick marks are limited to 100 (otherwise only the ends).
Sortable List	SortableList.create with 500 items: < 100 ms in headless Chromium One keyboard move with 500 items: < 16 ms in headless Chromium	500 items for the performance budgets; 4 items in the behavior unit tests.
Sparkline	Sparkline.create, 30 values, per instance (average of 200): < 1 ms in headless Chromium (e2e performance test)	Hundreds of instances per page; one to a few hundred values each (bars create one rect per value).
Spinner	Spinner.create(): < 1 ms in headless Chromium	Tested with one spinner per region; many simultaneous spinners are an anti-pattern.
Stat Card	StatCard.create: < 2 ms in headless Chromium (e2e performance test)	Dashboards of tens of cards; trend arrays are passed to Sparkline (see its limits).
Stepper	Stepper.create with 10 steps: < 5 ms (headless Chromium)	4-step flows in the unit tests.
Switch	Switch.create, per instance (1,000 instances): < 1 ms average in headless Chromium (target; not yet covered by the performance test)	Unit-tested per instance; not yet included in the 1,000-instance performance test.
Tabs	Tabs.create with 20 tabs: < 2 ms in headless Chromium	20 tabs in an overflowing tablist in the unit tests.
Tag Group	TagGroup.create with 50 tags: < 5 ms average in headless Chromium	Up to 1,000 tags accepted; intended for tens.
Text Input	TextInput.create, per instance (1,000 instances): < 1 ms average in headless Chromium	1,000 inputs on one page in the performance test.
Textarea	Textarea.create, per instance (1,000 instances): < 1 ms average in headless Chromium	Target: 1,000 textareas on one page (performance test pending the e2e harness entry).
Time Picker	open() with step 1 (1,440 suggestions): < 100 ms in headless Chromium	1,440 suggestions (step 1 over a whole day) in the unit test.
Toast	Toaster.show, per toast: < 1 ms average in headless Chromium	Queueing tested with more toasts than max; at most max (default 3, limit 20) toasts are in the DOM at once.
Toggle Group	ToggleGroup.create with 5 items: < 2 ms average in headless Chromium	Up to 100 items accepted; intended for a handful.
Tooltip	Tooltip.create, per instance: < 1 ms average in headless Chromium	One visible tooltip at a time by design; instances attach five listeners to the trigger and two to the tooltip.
Treemap	Treemap.create with 500 leaves, including the first render: < 60 ms in headless Chromium (e2e performance test)	Hundreds of leaves in total; only the shown level is drawn (one focusable rect per tile), so keep each level to a few dozen items for readable tiles.
Upload Queue	UploadQueue.add, 200 files: < 100 ms in headless Chromium Progress updates: coalesced to one render per animation frame	200 items in the performance test; progress reported for every chunk.
Validation Message	ValidationMessage.update: No dedicated performance test; re-renders icon and text on each update	Unit tests cover single messages linked to one target.
Waterfall Chart	WaterfallChart.create, 200 steps, including the first render: < 40 ms in headless Chromium (e2e performance test)	Measured in tests/e2e/perf-r3.spec.ts with 200 steps. One DOM node per step. The data table is built only when opened (toggle mode).
Year Picker	YearPicker.create, per instance (100 instances): < 5 ms average in headless Chromium	100 instances per page in the performance test; the popup grid (10 cells) is created once per picker and re-rendered per page.

Import cost

Size of importing one component by its subpath, as an application bundler ships it: minified JavaScript including every AbsoluteUI dependency it pulls in (core, utilities, icons, and composed components), then compressed. Components share those dependencies, so the cost of several components together is less than the sum. There are no third-party runtime dependencies to add.

Component	JS minified	JS gzip	JS brotli	CSS brotli
Accordion	22.8 kB	8.4 kB	7.4 kB	0.8 kB
Alert	26.3 kB	9.2 kB	8.1 kB	0.6 kB
Avatar	21.6 kB	7.9 kB	6.9 kB	0.6 kB
Avatar Group	24.2 kB	8.6 kB	7.5 kB	0.3 kB
Badge	18.8 kB	6.9 kB	6.0 kB	0.7 kB
Bar Chart	40.6 kB	14.8 kB	13.4 kB	1.5 kB
Bottom Sheet	35.0 kB	12.1 kB	10.7 kB	1.0 kB
Box Plot	41.1 kB	14.9 kB	13.4 kB	1.6 kB
Breadcrumb	21.1 kB	7.7 kB	6.8 kB	0.6 kB
Bullet Chart	36.7 kB	13.3 kB	12.0 kB	1.7 kB
Business Calendar	64.9 kB	22.4 kB	19.9 kB	1.0 kB
Button	22.2 kB	8.0 kB	7.0 kB	1.0 kB
Button Group	25.4 kB	8.9 kB	7.8 kB	0.4 kB
Calendar	41.7 kB	14.9 kB	13.2 kB	1.1 kB
Card and Surface	10.2 kB	4.1 kB	3.5 kB	0.8 kB
Carousel	29.3 kB	10.2 kB	8.9 kB	0.6 kB
Checkbox	27.2 kB	9.5 kB	8.3 kB	1.0 kB
Checkbox Group	29.6 kB	10.2 kB	9.0 kB	1.0 kB
Collapsible	20.3 kB	7.4 kB	6.4 kB	0.9 kB
Combo Chart	65.1 kB	23.1 kB	20.4 kB	1.8 kB
Combobox	39.3 kB	13.5 kB	12.0 kB	1.2 kB
Context Menu	37.9 kB	13.2 kB	11.7 kB	0.2 kB
Dashboard Grid	43.3 kB	14.8 kB	13.1 kB	1.0 kB
Dashboard Widget	26.6 kB	9.5 kB	8.3 kB	0.7 kB
Data Grid	331.6 kB	104.9 kB	88.7 kB	4.8 kB
Data Table	122.5 kB	39.2 kB	34.6 kB	2.3 kB
Date Input	40.6 kB	14.1 kB	12.5 kB	0.9 kB
Date Picker	69.1 kB	23.0 kB	20.3 kB	0.7 kB
Date Range Picker	75.2 kB	24.8 kB	21.6 kB	0.9 kB
DateTime Picker	75.8 kB	24.9 kB	21.9 kB	1.1 kB
Dialog	28.8 kB	10.1 kB	8.8 kB	0.9 kB
Drawer	30.5 kB	10.6 kB	9.3 kB	1.0 kB
Duration Picker	34.5 kB	12.0 kB	10.7 kB	1.0 kB
Error Summary	20.2 kB	7.4 kB	6.5 kB	0.5 kB
Fieldset	22.3 kB	8.0 kB	7.0 kB	0.5 kB
File Upload	36.1 kB	12.4 kB	11.0 kB	1.2 kB
Form	33.6 kB	11.8 kB	10.4 kB	0.3 kB
Form Field	28.9 kB	10.1 kB	8.9 kB	0.7 kB
Funnel Chart	32.8 kB	11.8 kB	10.6 kB	1.7 kB
Gantt Chart	99.4 kB	33.2 kB	29.5 kB	2.5 kB
Gauge	10.7 kB	4.4 kB	3.9 kB	0.6 kB
Heatmap	37.0 kB	13.5 kB	12.2 kB	1.7 kB
Histogram	38.6 kB	14.0 kB	12.6 kB	1.6 kB
Hover Card	14.2 kB	5.5 kB	4.9 kB	0.6 kB
Inline Message	19.2 kB	7.0 kB	6.1 kB	0.5 kB
Kanban Board	59.8 kB	18.9 kB	16.8 kB	1.9 kB
Kbd	9.3 kB	4.0 kB	3.5 kB	0.5 kB
Layout (Container, Stack, Flex, Grid, Divider)	10.6 kB	4.2 kB	3.7 kB	0.8 kB
Line Chart	73.1 kB	26.3 kB	23.2 kB	1.8 kB
Menu	35.3 kB	12.2 kB	10.8 kB	1.1 kB
Menu Bar	40.8 kB	13.6 kB	12.0 kB	0.5 kB
Month Picker	48.9 kB	16.9 kB	15.1 kB	1.6 kB
Multi Select	43.1 kB	14.5 kB	12.9 kB	1.5 kB
Number Input	36.5 kB	12.6 kB	11.2 kB	0.9 kB
Organization Chart	47.6 kB	16.4 kB	14.6 kB	1.3 kB
OTP Input	29.4 kB	10.3 kB	9.1 kB	0.9 kB
Pagination	26.3 kB	9.4 kB	8.3 kB	0.9 kB
Password Input	31.4 kB	10.9 kB	9.6 kB	0.9 kB
Password Strength Meter	26.5 kB	9.4 kB	8.3 kB	0.6 kB
Pie Chart	31.9 kB	11.6 kB	10.4 kB	1.6 kB
Pivot Grid	71.6 kB	23.2 kB	20.7 kB	1.7 kB
Popover	32.3 kB	11.3 kB	9.9 kB	0.7 kB
Progress Bar	22.9 kB	8.2 kB	7.2 kB	0.8 kB
Quarter Picker	49.5 kB	17.1 kB	15.2 kB	1.6 kB
Radar Chart	35.3 kB	12.8 kB	11.6 kB	1.7 kB
Radio Group	28.6 kB	9.9 kB	8.8 kB	1.0 kB
Recurrence Picker	104.4 kB	33.4 kB	29.3 kB	1.1 kB
Rich Text Editor	80.8 kB	27.2 kB	24.1 kB	1.5 kB
Scatter Chart	64.0 kB	22.7 kB	20.0 kB	1.8 kB
Schedule Picker	135.9 kB	40.6 kB	35.1 kB	0.8 kB
Scheduler	140.2 kB	45.3 kB	39.7 kB	2.2 kB
Scroll Area	8.6 kB	3.6 kB	3.1 kB	0.5 kB
Select	38.2 kB	13.2 kB	11.7 kB	1.2 kB
Session Warning Dialog	36.5 kB	12.4 kB	10.9 kB	0.3 kB
Sidebar	46.5 kB	15.4 kB	13.7 kB	1.1 kB
Skeleton	7.2 kB	3.0 kB	2.6 kB	0.4 kB
Slider	29.0 kB	10.3 kB	9.1 kB	1.2 kB
Sortable List	28.3 kB	10.2 kB	9.0 kB	0.7 kB
Sparkline	10.1 kB	4.2 kB	3.8 kB	0.4 kB
Spinner	19.4 kB	7.1 kB	6.2 kB	0.5 kB
Stat Card	28.0 kB	9.9 kB	8.8 kB	0.7 kB
Stepper	23.2 kB	8.4 kB	7.3 kB	1.0 kB
Switch	26.2 kB	9.2 kB	8.1 kB	1.0 kB
Tabs	23.2 kB	8.6 kB	7.5 kB	0.8 kB
Tag Group	25.8 kB	9.5 kB	8.4 kB	0.8 kB
Text Input	31.4 kB	11.0 kB	9.7 kB	1.0 kB
Textarea	30.5 kB	10.6 kB	9.3 kB	0.9 kB
Time Picker	43.9 kB	15.4 kB	13.7 kB	1.3 kB
Toast	32.3 kB	11.3 kB	10.0 kB	1.0 kB
Toggle Group	28.4 kB	10.2 kB	9.0 kB	0.4 kB
Tooltip	13.0 kB	5.2 kB	4.6 kB	0.5 kB
Treemap	36.2 kB	13.1 kB	11.7 kB	1.9 kB
Typography (Heading, Text, Link, Code, Prose)	10.7 kB	4.1 kB	3.6 kB	1.0 kB
Upload Queue	33.8 kB	11.6 kB	10.3 kB	0.6 kB
Validation Message	18.3 kB	6.6 kB	5.8 kB	0.3 kB
Waterfall Chart	40.2 kB	14.5 kB	13.0 kB	1.7 kB
Year Picker	48.2 kB	16.7 kB	14.9 kB	1.6 kB