@fusion.dev/helix-docs 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/content/browser-support.mdx +6 -0
- package/content/charting.mdx +26 -0
- package/content/iconography.mdx +14 -0
- package/content/localization.mdx +50 -7
- package/content/metrics.mdx +213 -213
- package/content/overriding-a-component.mdx +6 -0
- package/dist/sources.generated.js +315 -220
- package/package.json +3 -3
|
@@ -229,6 +229,12 @@ they are load-bearing: the first is how every token expresses both color modes
|
|
|
229
229
|
in one declaration, and the second is how every overlay is drawn in the top
|
|
230
230
|
layer.
|
|
231
231
|
|
|
232
|
+
Chromium 132 has both and still misses two things a page's stylesheet can say
|
|
233
|
+
through \`::part()\`, measured 15 Sep 2026: it ignores a range input's
|
|
234
|
+
\`::-webkit-slider-thumb\` and \`::-webkit-slider-runnable-track\` after a part, and
|
|
235
|
+
it looks for the \`@keyframes\` a \`::part()\` rule names inside the component's
|
|
236
|
+
shadow root, so no animation starts; the headless examples use neither.
|
|
237
|
+
|
|
232
238
|
\`:state()\` is the third and is deliberately not with them, because it does
|
|
233
239
|
degrade: a component that cannot record a state keeps whatever its resting rule
|
|
234
240
|
draws, so a checkbox is drawn unchecked rather than drawn wrong or not at all.
|
|
@@ -505,6 +511,32 @@ The legend reads the same table, so the names and the colors cannot disagree
|
|
|
505
511
|
with the chart's. Pointing them at two different tables is the only way to make
|
|
506
512
|
them disagree, and it is not something to do by accident.
|
|
507
513
|
|
|
514
|
+
## Right-to-left
|
|
515
|
+
|
|
516
|
+
On a page with \`dir="rtl"\`, an axis that follows reading order starts where the
|
|
517
|
+
text does, on the right: categories and time. The words around a drawing are
|
|
518
|
+
HTML and turn on their own, and the drawing turns with them, so the name under
|
|
519
|
+
a column is that column's name in either direction. The pointer and the tooltip
|
|
520
|
+
read the drawing the same way. An axis of values keeps its own direction.
|
|
521
|
+
|
|
522
|
+
- **What turns.** \`Bar Chart\`'s columns, and its rows, which grow out of their
|
|
523
|
+
names at the right. \`Line Chart\`, \`Area Chart\` and \`Sparkline\`, with their
|
|
524
|
+
end marks. \`Heatmap\`'s weeks, which were already a grid laid out along the
|
|
525
|
+
line. A half \`Donut Chart\`, which is read across.
|
|
526
|
+
- **What does not.** Up is more in every script, so values keep their vertical
|
|
527
|
+
sense, and numerals are text beside the drawing, so none reads backwards. A
|
|
528
|
+
whole \`Donut Chart\` keeps its first slice at twelve and runs clockwise, which
|
|
529
|
+
is a clock's convention rather than a script's. \`Scatter Chart\` is laid out as
|
|
530
|
+
on a left-to-right page, its y axis on the left and more to the right, because
|
|
531
|
+
both of its axes are measures and a number line runs that way in every
|
|
532
|
+
script. Its axis names read in their own direction, so a name in Arabic reads
|
|
533
|
+
right to left under the plot's far end, and its summary and tooltip read the
|
|
534
|
+
way the page does.
|
|
535
|
+
|
|
536
|
+
A chart that should read left to right anyway, a number line in a mathematics
|
|
537
|
+
text for instance, takes \`dir="ltr"\` on the element, and the platform's own
|
|
538
|
+
attribute is the whole of the switch.
|
|
539
|
+
|
|
508
540
|
## Reduced motion
|
|
509
541
|
|
|
510
542
|
Charts animate on entry and on data change, and every one of them answers
|
|
@@ -1445,6 +1477,20 @@ An icon with no \`label\` is hidden from assistive technology, which is right wh
|
|
|
1445
1477
|
the words are beside it and wrong when they are not. \`Icon.Button\` takes a
|
|
1446
1478
|
\`label\` because it never has words beside it.
|
|
1447
1479
|
|
|
1480
|
+
## One that points along the line
|
|
1481
|
+
|
|
1482
|
+
\`\`\`html
|
|
1483
|
+
<helix-icon
|
|
1484
|
+
mirror
|
|
1485
|
+
name="arrow-right"
|
|
1486
|
+
></helix-icon>
|
|
1487
|
+
\`\`\`
|
|
1488
|
+
|
|
1489
|
+
The names are physical, so \`arrow-right\` points right on every page. An arrow
|
|
1490
|
+
that means forward or back asks with \`mirror\` to turn round on a right-to-left
|
|
1491
|
+
page, which every caret the library draws already does.
|
|
1492
|
+
[Localization](./localization) has the rest.
|
|
1493
|
+
|
|
1448
1494
|
## Importing a glyph directly
|
|
1449
1495
|
|
|
1450
1496
|
\`\`\`ts
|
|
@@ -1797,11 +1843,42 @@ Set \`dir\` and the layout flips:
|
|
|
1797
1843
|
\`\`\`
|
|
1798
1844
|
|
|
1799
1845
|
Every component is written in logical properties, \`inline-start\` rather than
|
|
1800
|
-
\`left\`, \`margin-block\` rather than \`margin-top\`.
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1846
|
+
\`left\`, \`margin-block\` rather than \`margin-top\`. Nothing infers the direction
|
|
1847
|
+
for you and nothing needs to: the document says it and the components follow.
|
|
1848
|
+
|
|
1849
|
+
**A physical side appears only where the thing it places is physical.** A
|
|
1850
|
+
floating panel is placed from coordinates measured from the viewport's left
|
|
1851
|
+
edge, so it and its arrow are written in \`left\` and \`top\`. Everything a reader
|
|
1852
|
+
would expect to mirror still does.
|
|
1853
|
+
|
|
1854
|
+
**Charts mirror too.** A category or time axis starts where the text does, so
|
|
1855
|
+
on a right-to-left page the first reading is on the right and the drawing,
|
|
1856
|
+
its labels, its hover targets and its tooltips all turn together. Values keep
|
|
1857
|
+
their vertical sense and numerals are not reversed. A whole donut stays
|
|
1858
|
+
clockwise from twelve, which is a clock's convention rather than a script's,
|
|
1859
|
+
and a scatter chart keeps its left-to-right plane, both of its axes being
|
|
1860
|
+
measures. [Charting](./charting) has the rest.
|
|
1861
|
+
|
|
1862
|
+
**Carets and arrow keys turn too.** A caret meaning next or previous, the one
|
|
1863
|
+
between two crumbs and a shut disclosure all point along the line, so on a
|
|
1864
|
+
right-to-left page they point the other way, and every arrow key moves where it
|
|
1865
|
+
points on screen: the left arrow moves to the next tab, the next day, the next
|
|
1866
|
+
control in a toolbar, and opens a tree's branch or a menu's submenu, whose caret
|
|
1867
|
+
points left. A slider and a splitter's divider move the way the key points.
|
|
1868
|
+
|
|
1869
|
+
A media player is an exception: its timeline and its skip buttons run left to
|
|
1870
|
+
right in every script, a tape having one direction, so the left arrow rewinds.
|
|
1871
|
+
A pin input is the other. A code is read like a phone number, so its boxes run
|
|
1872
|
+
left to right on every page: the first character typed goes in the leftmost
|
|
1873
|
+
box, a pasted code fills rightward and the right arrow moves on, while its
|
|
1874
|
+
label, hint and error read the way the page does.
|
|
1875
|
+
|
|
1876
|
+
That is also how \`placement\` reads. The side is physical and the alignment is
|
|
1877
|
+
logical: \`right\` is the right of the anchor in either direction, and
|
|
1878
|
+
\`bottom-start\` lines a panel up with the anchor's start edge, which is its right
|
|
1879
|
+
edge on a right-to-left page. A panel with no room on its side still flips to
|
|
1880
|
+
the other one, so a \`right-start\` panel beside a rail at the start of a
|
|
1881
|
+
right-to-left page opens to its left.
|
|
1805
1882
|
|
|
1806
1883
|
The same is true of anything you write on top. Use logical properties and your
|
|
1807
1884
|
layout flips with ours; use \`left\` and \`right\` and it will not.
|
|
@@ -1863,8 +1940,20 @@ would be a second one to keep in step with yours.
|
|
|
1863
1940
|
and font fallback all key off it.
|
|
1864
1941
|
- **Numerals.** \`Intl\` handles the digits; a hardcoded \`%\` or a currency symbol
|
|
1865
1942
|
in your own markup will not move to the right side.
|
|
1866
|
-
- **Icons that point.** A
|
|
1867
|
-
|
|
1943
|
+
- **Icons that point.** A caret a component draws turns on its own. An icon you
|
|
1944
|
+
place does not unless you ask, because the names are physical: \`mirror\` turns
|
|
1945
|
+
one on a right-to-left page, for an arrow that means forward or back.
|
|
1946
|
+
|
|
1947
|
+
\`\`\`html
|
|
1948
|
+
<helix-button>
|
|
1949
|
+
Continue
|
|
1950
|
+
<helix-icon
|
|
1951
|
+
mirror
|
|
1952
|
+
name="arrow-right"
|
|
1953
|
+
slot="end"
|
|
1954
|
+
></helix-icon>
|
|
1955
|
+
</helix-button>
|
|
1956
|
+
\`\`\`
|
|
1868
1957
|
|
|
1869
1958
|
## What is not covered
|
|
1870
1959
|
|
|
@@ -1922,7 +2011,7 @@ nobody ever downloads this floor on its own.
|
|
|
1922
2011
|
|
|
1923
2012
|
| | Raw | Gzip | Brotli |
|
|
1924
2013
|
|---|---|---|---|
|
|
1925
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
2014
|
+
| Lit and \`@fusion.dev/helix-core\` | 145,906 | 48,207 | 40,782 |
|
|
1926
2015
|
|
|
1927
2016
|
## Whole packages
|
|
1928
2017
|
|
|
@@ -1933,11 +2022,11 @@ repository does that. The per-component tables are what a page pays.
|
|
|
1933
2022
|
|
|
1934
2023
|
| Package | Raw | Gzip | Brotli | |
|
|
1935
2024
|
|---|---|---|---|---|
|
|
1936
|
-
| \`@fusion.dev/helix-core\` |
|
|
1937
|
-
| \`@fusion.dev/helix-headless\` |
|
|
2025
|
+
| \`@fusion.dev/helix-core\` | 145,460 | 47,853 | 40,503 | Element base class, mixins, decorators, floating positioning. |
|
|
2026
|
+
| \`@fusion.dev/helix-headless\` | 601,009 | 155,450 | 120,869 | Every headless family, which is what the barrel means. |
|
|
1938
2027
|
| \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
|
|
1939
2028
|
| \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
|
|
1940
|
-
| \`@fusion.dev/helix\` | 1,
|
|
2029
|
+
| \`@fusion.dev/helix\` | 1,071,400 | 250,729 | 183,407 | Every styled family. |
|
|
1941
2030
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
|
|
1942
2031
|
|
|
1943
2032
|
## The stylesheets
|
|
@@ -1958,13 +2047,13 @@ is the whole cost of adopting the base layer on its own.
|
|
|
1958
2047
|
|
|
1959
2048
|
## What the numbers say
|
|
1960
2049
|
|
|
1961
|
-
**Most of a first component is the runtime under it.** The median styled family is 18,
|
|
2050
|
+
**Most of a first component is the runtime under it.** The median styled family is 18,709 bytes gzipped alone and adds 2,213 to a page that already has Helix on it, so 88 percent of the first one is shared and 12 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
|
|
1962
2051
|
|
|
1963
|
-
Across the tier: the cheapest is \`code\` at 9,
|
|
2052
|
+
Across the tier: the cheapest is \`code\` at 9,408 gzipped alone, the dearest \`data-table\` at 58,933, over 100 components. Every family at once is 250,729.
|
|
1964
2053
|
|
|
1965
|
-
**No family imports a barrel, and the \`barrels\` rule in \`fusion workspace\` is what keeps it that way.** \`@fusion.dev/helix-headless\` is \`sideEffects\` over every module in \`dist\`, which is true of a file that calls \`customElements.define\` and which means a bundler may drop none of it: one \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs
|
|
2054
|
+
**No family imports a barrel, and the \`barrels\` rule in \`fusion workspace\` is what keeps it that way.** \`@fusion.dev/helix-headless\` is \`sideEffects\` over every module in \`dist\`, which is true of a file that calls \`customElements.define\` and which means a bundler may drop none of it: one \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 155,450 bytes gzipped whatever else the page does, which is 8 times the median family measured above. The styled tier imports the family it extends instead, all 100 of them, and the check refuses the shape rather than the package name, so the rule follows \`sideEffects\` wherever it goes.
|
|
1966
2055
|
|
|
1967
|
-
The headless tier never had the problem, and it is the control: \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and a headless family is a median of 20,
|
|
2056
|
+
The headless tier never had the problem, and it is the control: \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and a headless family is a median of 20,496 bytes gzipped alone.
|
|
1968
2057
|
|
|
1969
2058
|
## Against other systems
|
|
1970
2059
|
|
|
@@ -1976,43 +2065,43 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
|
|
|
1976
2065
|
|
|
1977
2066
|
| Component | System | Raw | Gzip | Brotli |
|
|
1978
2067
|
|---|---|---|---|---|
|
|
1979
|
-
| \`button\` | **Helix** | 38,
|
|
2068
|
+
| \`button\` | **Helix** | 38,953 | 11,938 | 10,536 |
|
|
1980
2069
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
1981
2070
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
1982
2071
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
1983
2072
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
1984
|
-
| \`checkbox\` | **Helix** | 42,
|
|
2073
|
+
| \`checkbox\` | **Helix** | 42,269 | 12,948 | 11,411 |
|
|
1985
2074
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
1986
2075
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
1987
2076
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
1988
2077
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
1989
|
-
| \`dialog\` | **Helix** | 36,
|
|
2078
|
+
| \`dialog\` | **Helix** | 36,236 | 11,582 | 10,224 |
|
|
1990
2079
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
1991
2080
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
1992
2081
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
1993
2082
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
1994
|
-
| \`radio\` | **Helix** |
|
|
2083
|
+
| \`radio\` | **Helix** | 45,127 | 13,282 | 11,744 |
|
|
1995
2084
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
1996
2085
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
1997
2086
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
1998
2087
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
1999
|
-
| \`switch\` | **Helix** | 39,
|
|
2088
|
+
| \`switch\` | **Helix** | 39,964 | 12,500 | 11,024 |
|
|
2000
2089
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
2001
2090
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
2002
2091
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
2003
2092
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
2004
|
-
| \`tabs\` | **Helix** | 41,
|
|
2093
|
+
| \`tabs\` | **Helix** | 41,452 | 12,679 | 11,189 |
|
|
2005
2094
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
2006
2095
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
2007
2096
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
2008
2097
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
2009
|
-
| \`tooltip\` | **Helix** |
|
|
2098
|
+
| \`tooltip\` | **Helix** | 63,078 | 21,403 | 18,968 |
|
|
2010
2099
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
2011
2100
|
| | Material Web | | not shipped | |
|
|
2012
2101
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
2013
2102
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
2014
2103
|
|
|
2015
|
-
**Where Helix loses**, which is the half of a comparison table worth reading: \`dialog\`, \`radio\`, \`switch\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,
|
|
2104
|
+
**Where Helix loses**, which is the half of a comparison table worth reading: \`dialog\`, \`radio\`, \`switch\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,622 bytes gzipped. 6 of 28 peer measurements come in under ours.
|
|
2016
2105
|
|
|
2017
2106
|
- **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
|
|
2018
2107
|
- **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
|
|
@@ -2057,100 +2146,100 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2057
2146
|
|
|
2058
2147
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2059
2148
|
|---|---|---|---|---|---|---|
|
|
2060
|
-
| \`accordion\` | 79,
|
|
2061
|
-
| \`announcement\` | 76,
|
|
2062
|
-
| \`app-header\` | 28,
|
|
2063
|
-
| \`area-chart\` |
|
|
2064
|
-
| \`avatar\` | 30,
|
|
2065
|
-
| \`badge\` | 28,
|
|
2066
|
-
| \`bar-chart\` |
|
|
2067
|
-
| \`blockquote\` | 28,
|
|
2068
|
-
| \`breadcrumbs\` | 76,
|
|
2069
|
-
| \`button\` | 32,
|
|
2070
|
-
| \`button-group\` | 28,
|
|
2071
|
-
| \`callout\` | 75,
|
|
2072
|
-
| \`card\` | 28,
|
|
2073
|
-
| \`carousel\` |
|
|
2074
|
-
| \`chat\` | 98,
|
|
2075
|
-
| \`checkbox\` | 36,
|
|
2076
|
-
| \`checkbox-group\` | 39,
|
|
2077
|
-
| \`code\` | 26,
|
|
2078
|
-
| \`code-block\` |
|
|
2079
|
-
| \`color-input\` |
|
|
2080
|
-
| \`color-picker\` | 101,
|
|
2081
|
-
| \`combobox\` |
|
|
2082
|
-
| \`command\` | 102,
|
|
2083
|
-
| \`copy-button\` |
|
|
2084
|
-
| \`data-table\` |
|
|
2085
|
-
| \`date-input\` |
|
|
2086
|
-
| \`date-picker\` | 87,
|
|
2087
|
-
| \`description-list\` | 28,
|
|
2088
|
-
| \`dialog\` | 31,
|
|
2089
|
-
| \`divider\` | 28,
|
|
2090
|
-
| \`donut-chart\` |
|
|
2091
|
-
| \`drawer\` | 30,
|
|
2092
|
-
| \`drilldown\` | 82,
|
|
2093
|
-
| \`empty\` | 28,
|
|
2094
|
-
| \`file-input\` | 86,
|
|
2095
|
-
| \`filter-input\` |
|
|
2096
|
-
| \`format-date\` | 31,
|
|
2097
|
-
| \`heatmap\` |
|
|
2098
|
-
| \`icon\` |
|
|
2099
|
-
| \`icon-button\` | 33,
|
|
2100
|
-
| \`image\` | 30,
|
|
2101
|
-
| \`input\` | 86,
|
|
2102
|
-
| \`kbd\` | 30,
|
|
2103
|
-
| \`legend\` | 32,
|
|
2104
|
-
| \`line-chart\` |
|
|
2105
|
-
| \`list\` | 29,
|
|
2106
|
-
| \`listbox\` | 94,
|
|
2107
|
-
| \`loader\` | 28,
|
|
2108
|
-
| \`megamenu\` |
|
|
2109
|
-
| \`menu\` |
|
|
2110
|
-
| \`meter\` | 31,
|
|
2111
|
-
| \`navigation\` | 30,
|
|
2112
|
-
| \`notifications\` | 90,
|
|
2113
|
-
| \`number-input\` | 88,
|
|
2114
|
-
| \`object-inspector\` |
|
|
2115
|
-
| \`option\` | 30,
|
|
2116
|
-
| \`outline\` | 33,
|
|
2117
|
-
| \`pagination\` |
|
|
2118
|
-
| \`pin-input\` | 38,
|
|
2119
|
-
| \`popover\` | 55,
|
|
2120
|
-
| \`progress\` | 29,
|
|
2121
|
-
| \`qr-code\` | 40,
|
|
2122
|
-
| \`quote\` | 27,
|
|
2123
|
-
| \`radio\` | 37,
|
|
2124
|
-
| \`rating\` | 39,
|
|
2125
|
-
| \`scatter-chart\` |
|
|
2126
|
-
| \`scroll-area\` |
|
|
2127
|
-
| \`select\` |
|
|
2128
|
-
| \`skeleton\` | 26,
|
|
2129
|
-
| \`skip-link\` | 28,
|
|
2130
|
-
| \`slider\` | 39,
|
|
2131
|
-
| \`sparkline\` | 34,
|
|
2132
|
-
| \`speed-dial\` |
|
|
2133
|
-
| \`splitter\` | 37,
|
|
2134
|
-
| \`stat\` | 28,
|
|
2135
|
-
| \`steps\` | 84,
|
|
2136
|
-
| \`switch\` | 35,
|
|
2137
|
-
| \`table\` |
|
|
2138
|
-
| \`tabs\` | 35,
|
|
2139
|
-
| \`tag\` | 75,
|
|
2140
|
-
| \`textarea\` | 38,
|
|
2141
|
-
| \`time-input\` |
|
|
2142
|
-
| \`time-picker\` | 102,
|
|
2143
|
-
| \`timeline\` | 76,
|
|
2144
|
-
| \`toast\` | 79,
|
|
2145
|
-
| \`toggle\` | 39,
|
|
2146
|
-
| \`toolbar\` | 30,
|
|
2147
|
-
| \`tooltip\` |
|
|
2148
|
-
| \`tour\` |
|
|
2149
|
-
| \`tree\` |
|
|
2150
|
-
| \`trend\` | 75,
|
|
2151
|
-
| \`video\` |
|
|
2152
|
-
| \`video-playlist\` |
|
|
2153
|
-
| \`virtual-list\` |
|
|
2149
|
+
| \`accordion\` | 79,621 | 26,649 | 21,808 | 2,875 | 765 | 648 |
|
|
2150
|
+
| \`announcement\` | 76,796 | 25,684 | 21,059 | 1,349 | 378 | 243 |
|
|
2151
|
+
| \`app-header\` | 28,843 | 9,685 | 8,548 | 1,248 | 318 | 194 |
|
|
2152
|
+
| \`area-chart\` | 74,493 | 25,490 | 22,501 | 11,180 | 3,423 | 2,797 |
|
|
2153
|
+
| \`avatar\` | 30,892 | 10,287 | 9,088 | 3,257 | 923 | 724 |
|
|
2154
|
+
| \`badge\` | 28,378 | 9,616 | 8,479 | 1,162 | 302 | 308 |
|
|
2155
|
+
| \`bar-chart\` | 76,063 | 25,800 | 22,767 | 12,833 | 3,779 | 3,081 |
|
|
2156
|
+
| \`blockquote\` | 28,231 | 9,575 | 8,441 | 892 | 232 | 59 |
|
|
2157
|
+
| \`breadcrumbs\` | 76,454 | 25,325 | 20,859 | 1,965 | 447 | 265 |
|
|
2158
|
+
| \`button\` | 32,860 | 10,824 | 9,547 | 3,137 | 835 | 573 |
|
|
2159
|
+
| \`button-group\` | 28,249 | 9,532 | 8,370 | 661 | 144 | 34 |
|
|
2160
|
+
| \`callout\` | 75,572 | 25,180 | 20,794 | 912 | 246 | 172 |
|
|
2161
|
+
| \`card\` | 28,283 | 9,543 | 8,409 | 694 | 156 | 161 |
|
|
2162
|
+
| \`carousel\` | 83,032 | 27,443 | 22,633 | 8,255 | 2,154 | 1,606 |
|
|
2163
|
+
| \`chat\` | 98,930 | 32,898 | 27,089 | 17,663 | 5,147 | 4,205 |
|
|
2164
|
+
| \`checkbox\` | 36,225 | 11,556 | 10,213 | 2,306 | 680 | 452 |
|
|
2165
|
+
| \`checkbox-group\` | 39,239 | 12,202 | 10,772 | 4,801 | 1,266 | 828 |
|
|
2166
|
+
| \`code\` | 26,868 | 9,113 | 8,043 | 451 | 79 | 61 |
|
|
2167
|
+
| \`code-block\` | 121,073 | 40,368 | 34,017 | 17,207 | 4,512 | 3,759 |
|
|
2168
|
+
| \`color-input\` | 134,246 | 43,598 | 36,618 | 25,050 | 6,488 | 5,459 |
|
|
2169
|
+
| \`color-picker\` | 101,771 | 32,905 | 27,144 | 19,424 | 5,234 | 4,422 |
|
|
2170
|
+
| \`combobox\` | 132,091 | 42,672 | 35,833 | 20,245 | 5,031 | 4,061 |
|
|
2171
|
+
| \`command\` | 102,478 | 32,589 | 26,678 | 17,560 | 4,503 | 3,699 |
|
|
2172
|
+
| \`copy-button\` | 115,724 | 38,763 | 32,609 | 11,861 | 2,989 | 2,435 |
|
|
2173
|
+
| \`data-table\` | 169,823 | 52,513 | 44,436 | 54,707 | 13,879 | 11,533 |
|
|
2174
|
+
| \`date-input\` | 130,210 | 42,205 | 35,484 | 18,542 | 4,763 | 3,946 |
|
|
2175
|
+
| \`date-picker\` | 87,466 | 28,913 | 23,785 | 9,997 | 2,822 | 2,198 |
|
|
2176
|
+
| \`description-list\` | 28,352 | 9,484 | 8,349 | 1,132 | 186 | 122 |
|
|
2177
|
+
| \`dialog\` | 31,901 | 10,573 | 9,316 | 2,717 | 823 | 637 |
|
|
2178
|
+
| \`divider\` | 28,428 | 9,648 | 8,489 | 1,090 | 289 | 159 |
|
|
2179
|
+
| \`donut-chart\` | 72,174 | 24,429 | 21,596 | 10,300 | 3,037 | 2,457 |
|
|
2180
|
+
| \`drawer\` | 30,654 | 10,208 | 8,977 | 1,761 | 479 | 362 |
|
|
2181
|
+
| \`drilldown\` | 82,953 | 27,534 | 22,524 | 5,697 | 1,528 | 1,170 |
|
|
2182
|
+
| \`empty\` | 28,405 | 9,585 | 8,451 | 816 | 192 | 82 |
|
|
2183
|
+
| \`file-input\` | 86,707 | 28,610 | 23,439 | 6,008 | 1,703 | 1,318 |
|
|
2184
|
+
| \`filter-input\` | 143,086 | 45,527 | 38,253 | 28,036 | 6,807 | 5,680 |
|
|
2185
|
+
| \`format-date\` | 31,862 | 10,699 | 9,457 | 2,867 | 711 | 485 |
|
|
2186
|
+
| \`heatmap\` | 73,226 | 24,578 | 21,763 | 11,228 | 3,181 | 2,444 |
|
|
2187
|
+
| \`icon\` | 75,077 | 24,979 | 20,541 | 952 | 223 | 142 |
|
|
2188
|
+
| \`icon-button\` | 33,259 | 10,854 | 9,548 | 3,536 | 867 | 641 |
|
|
2189
|
+
| \`image\` | 30,422 | 10,083 | 8,879 | 3,156 | 832 | 618 |
|
|
2190
|
+
| \`input\` | 86,133 | 28,284 | 23,222 | 4,734 | 1,304 | 985 |
|
|
2191
|
+
| \`kbd\` | 30,203 | 10,306 | 9,097 | 2,976 | 1,044 | 850 |
|
|
2192
|
+
| \`legend\` | 32,121 | 10,755 | 9,488 | 1,097 | 295 | 211 |
|
|
2193
|
+
| \`line-chart\` | 73,979 | 25,180 | 22,227 | 10,750 | 3,165 | 2,552 |
|
|
2194
|
+
| \`list\` | 29,304 | 9,718 | 8,571 | 1,725 | 345 | 218 |
|
|
2195
|
+
| \`listbox\` | 94,229 | 30,738 | 25,115 | 10,797 | 2,966 | 2,335 |
|
|
2196
|
+
| \`loader\` | 28,489 | 9,649 | 8,489 | 900 | 230 | 177 |
|
|
2197
|
+
| \`megamenu\` | 58,706 | 20,334 | 17,987 | 4,950 | 1,365 | 1,066 |
|
|
2198
|
+
| \`menu\` | 114,058 | 38,538 | 32,327 | 8,835 | 2,251 | 1,728 |
|
|
2199
|
+
| \`meter\` | 31,679 | 10,505 | 9,253 | 4,099 | 1,060 | 946 |
|
|
2200
|
+
| \`navigation\` | 30,127 | 10,165 | 8,969 | 1,361 | 374 | 211 |
|
|
2201
|
+
| \`notifications\` | 90,952 | 29,543 | 24,263 | 11,898 | 2,829 | 2,319 |
|
|
2202
|
+
| \`number-input\` | 88,486 | 28,915 | 23,677 | 7,174 | 1,928 | 1,441 |
|
|
2203
|
+
| \`object-inspector\` | 128,399 | 42,864 | 36,088 | 19,342 | 5,183 | 4,271 |
|
|
2204
|
+
| \`option\` | 30,382 | 10,040 | 8,870 | 2,796 | 618 | 402 |
|
|
2205
|
+
| \`outline\` | 33,451 | 11,294 | 9,948 | 4,633 | 1,430 | 1,067 |
|
|
2206
|
+
| \`pagination\` | 136,253 | 43,361 | 36,448 | 27,007 | 6,291 | 5,174 |
|
|
2207
|
+
| \`pin-input\` | 38,878 | 12,394 | 10,942 | 5,038 | 1,514 | 1,114 |
|
|
2208
|
+
| \`popover\` | 55,903 | 19,554 | 17,330 | 1,901 | 531 | 350 |
|
|
2209
|
+
| \`progress\` | 29,530 | 9,923 | 8,753 | 1,951 | 496 | 367 |
|
|
2210
|
+
| \`qr-code\` | 40,177 | 13,955 | 12,312 | 12,981 | 4,651 | 4,070 |
|
|
2211
|
+
| \`quote\` | 27,772 | 9,397 | 8,288 | 552 | 135 | -6 |
|
|
2212
|
+
| \`radio\` | 37,548 | 11,864 | 10,469 | 3,114 | 821 | 519 |
|
|
2213
|
+
| \`rating\` | 39,796 | 12,722 | 11,217 | 5,806 | 1,662 | 1,312 |
|
|
2214
|
+
| \`scatter-chart\` | 73,937 | 25,111 | 22,133 | 11,494 | 3,459 | 2,889 |
|
|
2215
|
+
| \`scroll-area\` | 30,015 | 10,086 | 8,884 | 2,743 | 793 | 554 |
|
|
2216
|
+
| \`select\` | 124,421 | 40,824 | 34,233 | 15,301 | 3,899 | 3,060 |
|
|
2217
|
+
| \`skeleton\` | 26,961 | 9,146 | 8,073 | 544 | 111 | 48 |
|
|
2218
|
+
| \`skip-link\` | 28,444 | 9,666 | 8,503 | 1,226 | 382 | 194 |
|
|
2219
|
+
| \`slider\` | 39,261 | 12,409 | 10,974 | 5,177 | 1,421 | 1,163 |
|
|
2220
|
+
| \`sparkline\` | 34,607 | 11,782 | 10,423 | 2,559 | 838 | 579 |
|
|
2221
|
+
| \`speed-dial\` | 105,708 | 36,192 | 30,377 | 3,743 | 980 | 748 |
|
|
2222
|
+
| \`splitter\` | 37,690 | 12,054 | 10,689 | 9,967 | 2,536 | 2,128 |
|
|
2223
|
+
| \`stat\` | 28,737 | 9,584 | 8,440 | 1,148 | 195 | 131 |
|
|
2224
|
+
| \`steps\` | 84,565 | 27,752 | 22,798 | 6,293 | 1,514 | 1,184 |
|
|
2225
|
+
| \`switch\` | 35,740 | 11,456 | 10,102 | 1,699 | 536 | 286 |
|
|
2226
|
+
| \`table\` | 85,348 | 28,315 | 23,200 | 9,193 | 2,578 | 2,012 |
|
|
2227
|
+
| \`tabs\` | 35,213 | 11,404 | 10,034 | 4,097 | 901 | 652 |
|
|
2228
|
+
| \`tag\` | 75,856 | 25,278 | 20,723 | 897 | 190 | 149 |
|
|
2229
|
+
| \`textarea\` | 38,342 | 12,083 | 10,661 | 4,018 | 1,109 | 692 |
|
|
2230
|
+
| \`time-input\` | 142,408 | 45,364 | 38,065 | 27,951 | 6,973 | 5,825 |
|
|
2231
|
+
| \`time-picker\` | 102,784 | 33,233 | 27,319 | 18,808 | 5,119 | 4,153 |
|
|
2232
|
+
| \`timeline\` | 76,388 | 25,264 | 20,833 | 1,894 | 399 | 311 |
|
|
2233
|
+
| \`toast\` | 79,587 | 26,362 | 21,603 | 4,005 | 945 | 749 |
|
|
2234
|
+
| \`toggle\` | 39,510 | 12,450 | 10,993 | 3,535 | 927 | 634 |
|
|
2235
|
+
| \`toolbar\` | 30,291 | 10,244 | 9,039 | 2,933 | 942 | 658 |
|
|
2236
|
+
| \`tooltip\` | 60,000 | 20,657 | 18,277 | 6,432 | 1,807 | 1,330 |
|
|
2237
|
+
| \`tour\` | 65,738 | 21,993 | 19,463 | 11,006 | 2,771 | 2,164 |
|
|
2238
|
+
| \`tree\` | 86,155 | 28,426 | 23,245 | 7,125 | 1,950 | 1,518 |
|
|
2239
|
+
| \`trend\` | 75,181 | 25,041 | 20,668 | 1,056 | 278 | 191 |
|
|
2240
|
+
| \`video\` | 139,358 | 44,823 | 37,815 | 33,883 | 8,222 | 7,111 |
|
|
2241
|
+
| \`video-playlist\` | 121,595 | 40,146 | 33,651 | 14,968 | 3,503 | 2,890 |
|
|
2242
|
+
| \`virtual-list\` | 34,007 | 11,448 | 10,112 | 2,485 | 756 | 513 |
|
|
2154
2243
|
|
|
2155
2244
|
### Styled tier
|
|
2156
2245
|
|
|
@@ -2158,106 +2247,106 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2158
2247
|
|
|
2159
2248
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2160
2249
|
|---|---|---|---|---|---|---|
|
|
2161
|
-
| \`accordion\` | 82,
|
|
2162
|
-
| \`announcement\` | 81,
|
|
2163
|
-
| \`app-header\` | 32,
|
|
2164
|
-
| \`area-chart\` |
|
|
2165
|
-
| \`aura\` |
|
|
2166
|
-
| \`avatar\` | 34,
|
|
2167
|
-
| \`badge\` | 31,
|
|
2168
|
-
| \`bar-chart\` |
|
|
2169
|
-
| \`blockquote\` | 29,
|
|
2170
|
-
| \`breadcrumbs\` |
|
|
2171
|
-
| \`button\` | 38,
|
|
2172
|
-
| \`button-group\` | 29,
|
|
2173
|
-
| \`callout\` | 77,
|
|
2174
|
-
| \`card\` | 31,
|
|
2175
|
-
| \`carousel\` | 92,
|
|
2176
|
-
| \`chat\` |
|
|
2177
|
-
| \`checkbox\` | 42,
|
|
2178
|
-
| \`checkbox-group\` | 41,
|
|
2179
|
-
| \`code\` | 27,
|
|
2180
|
-
| \`code-block\` |
|
|
2181
|
-
| \`color-input\` |
|
|
2182
|
-
| \`color-picker\` |
|
|
2183
|
-
| \`combobox\` | 146,
|
|
2184
|
-
| \`command\` | 112,
|
|
2185
|
-
| \`copy-button\` |
|
|
2186
|
-
| \`data-table\` |
|
|
2187
|
-
| \`date-input\` |
|
|
2188
|
-
| \`date-picker\` |
|
|
2189
|
-
| \`description-list\` | 30,
|
|
2190
|
-
| \`dialog\` | 36,
|
|
2191
|
-
| \`divider\` | 30,
|
|
2192
|
-
| \`donut-chart\` |
|
|
2193
|
-
| \`drawer\` | 34,
|
|
2194
|
-
| \`drilldown\` | 87,
|
|
2195
|
-
| \`empty\` | 29,
|
|
2196
|
-
| \`file-input\` | 97,
|
|
2197
|
-
| \`filter-input\` |
|
|
2198
|
-
| \`flex\` | 29,
|
|
2199
|
-
| \`format-date\` | 32,
|
|
2200
|
-
| \`grid\` | 29,
|
|
2201
|
-
| \`heatmap\` |
|
|
2202
|
-
| \`icon\` | 75,
|
|
2203
|
-
| \`icon-button\` | 39,
|
|
2204
|
-
| \`image\` | 32,
|
|
2205
|
-
| \`input\` | 92,
|
|
2206
|
-
| \`kbd\` | 31,
|
|
2207
|
-
| \`legend\` | 36,
|
|
2208
|
-
| \`line-chart\` |
|
|
2209
|
-
| \`list\` | 33,
|
|
2210
|
-
| \`listbox\` | 98,
|
|
2211
|
-
| \`loader\` | 31,
|
|
2212
|
-
| \`megamenu\` |
|
|
2213
|
-
| \`menu\` |
|
|
2214
|
-
| \`meter\` | 37,
|
|
2215
|
-
| \`navigation\` | 31,
|
|
2216
|
-
| \`notifications\` | 103,
|
|
2217
|
-
| \`number-input\` | 93,
|
|
2218
|
-
| \`object-inspector\` |
|
|
2219
|
-
| \`option\` | 33,
|
|
2220
|
-
| \`orb\` | 37,
|
|
2221
|
-
| \`outline\` | 37,
|
|
2222
|
-
| \`pagination\` |
|
|
2223
|
-
| \`pin-input\` | 41,
|
|
2224
|
-
| \`popover\` |
|
|
2225
|
-
| \`progress\` | 34,
|
|
2226
|
-
| \`qr-code\` | 41,
|
|
2227
|
-
| \`quote\` | 28,
|
|
2228
|
-
| \`radio\` |
|
|
2229
|
-
| \`rating\` | 42,
|
|
2230
|
-
| \`sandbox\` | 62,
|
|
2231
|
-
| \`scatter-chart\` |
|
|
2232
|
-
| \`scroll-area\` |
|
|
2233
|
-
| \`select\` |
|
|
2234
|
-
| \`skeleton\` | 29,
|
|
2235
|
-
| \`skip-link\` | 29,
|
|
2236
|
-
| \`slider\` |
|
|
2237
|
-
| \`sparkline\` | 38,
|
|
2238
|
-
| \`speed-dial\` |
|
|
2239
|
-
| \`splitter\` | 43,
|
|
2240
|
-
| \`stat\` | 31,
|
|
2241
|
-
| \`steps\` | 98,
|
|
2242
|
-
| \`switch\` | 39,
|
|
2243
|
-
| \`table\` |
|
|
2244
|
-
| \`tabs\` | 41,
|
|
2245
|
-
| \`tag\` |
|
|
2246
|
-
| \`text\` | 31,
|
|
2247
|
-
| \`textarea\` | 41,
|
|
2248
|
-
| \`time-input\` |
|
|
2249
|
-
| \`time-picker\` | 114,
|
|
2250
|
-
| \`timeline\` | 79,
|
|
2251
|
-
| \`toast\` | 87,
|
|
2252
|
-
| \`toggle\` | 44,
|
|
2253
|
-
| \`toolbar\` | 31,
|
|
2254
|
-
| \`tooltip\` |
|
|
2255
|
-
| \`tour\` |
|
|
2256
|
-
| \`tree\` |
|
|
2257
|
-
| \`trend\` | 78,
|
|
2258
|
-
| \`video\` |
|
|
2259
|
-
| \`video-playlist\` |
|
|
2260
|
-
| \`virtual-list\` | 34,
|
|
2250
|
+
| \`accordion\` | 82,963 | 27,465 | 22,541 | 6,204 | 1,577 | 1,301 |
|
|
2251
|
+
| \`announcement\` | 81,205 | 26,685 | 21,925 | 5,742 | 1,361 | 1,109 |
|
|
2252
|
+
| \`app-header\` | 32,733 | 10,580 | 9,309 | 5,121 | 1,224 | 977 |
|
|
2253
|
+
| \`area-chart\` | 81,879 | 27,087 | 23,936 | 18,546 | 5,029 | 4,110 |
|
|
2254
|
+
| \`aura\` | 90,451 | 31,413 | 27,165 | 62,072 | 21,659 | 18,703 |
|
|
2255
|
+
| \`avatar\` | 34,477 | 11,046 | 9,760 | 6,832 | 1,688 | 1,348 |
|
|
2256
|
+
| \`badge\` | 31,482 | 10,323 | 9,070 | 4,249 | 1,001 | 734 |
|
|
2257
|
+
| \`bar-chart\` | 88,928 | 28,348 | 25,044 | 25,678 | 6,362 | 5,296 |
|
|
2258
|
+
| \`blockquote\` | 29,387 | 9,864 | 8,692 | 2,032 | 526 | 378 |
|
|
2259
|
+
| \`breadcrumbs\` | 80,020 | 26,119 | 21,550 | 5,518 | 1,238 | 1,041 |
|
|
2260
|
+
| \`button\` | 38,953 | 11,938 | 10,536 | 9,212 | 1,948 | 1,644 |
|
|
2261
|
+
| \`button-group\` | 29,925 | 9,910 | 8,725 | 2,320 | 530 | 409 |
|
|
2262
|
+
| \`callout\` | 77,571 | 25,713 | 21,229 | 2,895 | 765 | 657 |
|
|
2263
|
+
| \`card\` | 31,516 | 10,370 | 9,122 | 3,915 | 977 | 767 |
|
|
2264
|
+
| \`carousel\` | 92,791 | 29,027 | 24,087 | 18,003 | 3,719 | 3,161 |
|
|
2265
|
+
| \`chat\` | 113,046 | 35,381 | 29,317 | 31,764 | 7,657 | 6,404 |
|
|
2266
|
+
| \`checkbox\` | 42,269 | 12,948 | 11,411 | 8,334 | 2,062 | 1,731 |
|
|
2267
|
+
| \`checkbox-group\` | 41,422 | 12,772 | 11,262 | 6,970 | 1,835 | 1,296 |
|
|
2268
|
+
| \`code\` | 27,945 | 9,408 | 8,291 | 1,511 | 367 | 267 |
|
|
2269
|
+
| \`code-block\` | 136,794 | 43,118 | 36,320 | 32,908 | 7,111 | 6,069 |
|
|
2270
|
+
| \`color-input\` | 167,660 | 48,717 | 41,179 | 58,447 | 11,656 | 10,079 |
|
|
2271
|
+
| \`color-picker\` | 129,481 | 37,338 | 31,054 | 47,128 | 9,736 | 8,341 |
|
|
2272
|
+
| \`combobox\` | 146,894 | 45,314 | 38,009 | 35,029 | 7,688 | 6,518 |
|
|
2273
|
+
| \`command\` | 112,941 | 34,615 | 28,512 | 28,007 | 6,551 | 5,466 |
|
|
2274
|
+
| \`copy-button\` | 125,779 | 40,540 | 34,159 | 21,898 | 4,696 | 3,896 |
|
|
2275
|
+
| \`data-table\` | 206,548 | 58,933 | 49,595 | 91,413 | 20,361 | 16,892 |
|
|
2276
|
+
| \`date-input\` | 146,080 | 45,236 | 38,121 | 34,389 | 7,724 | 6,576 |
|
|
2277
|
+
| \`date-picker\` | 93,032 | 30,073 | 24,744 | 15,545 | 3,964 | 3,319 |
|
|
2278
|
+
| \`description-list\` | 30,730 | 10,049 | 8,825 | 3,502 | 769 | 666 |
|
|
2279
|
+
| \`dialog\` | 36,236 | 11,582 | 10,224 | 7,037 | 1,826 | 1,568 |
|
|
2280
|
+
| \`divider\` | 30,584 | 10,167 | 8,929 | 3,229 | 801 | 683 |
|
|
2281
|
+
| \`donut-chart\` | 81,277 | 26,320 | 23,264 | 19,383 | 4,963 | 4,106 |
|
|
2282
|
+
| \`drawer\` | 34,885 | 11,217 | 9,888 | 5,975 | 1,486 | 1,160 |
|
|
2283
|
+
| \`drilldown\` | 87,500 | 28,534 | 23,430 | 10,232 | 2,482 | 2,083 |
|
|
2284
|
+
| \`empty\` | 29,692 | 9,949 | 8,761 | 2,087 | 551 | 370 |
|
|
2285
|
+
| \`file-input\` | 97,926 | 30,815 | 25,381 | 17,221 | 3,853 | 3,292 |
|
|
2286
|
+
| \`filter-input\` | 170,946 | 49,938 | 41,976 | 55,883 | 11,280 | 9,437 |
|
|
2287
|
+
| \`flex\` | 29,227 | 9,753 | 8,600 | 1,999 | 457 | 372 |
|
|
2288
|
+
| \`format-date\` | 32,510 | 10,844 | 9,616 | 3,497 | 857 | 623 |
|
|
2289
|
+
| \`grid\` | 29,754 | 9,917 | 8,756 | 2,522 | 619 | 479 |
|
|
2290
|
+
| \`heatmap\` | 80,024 | 25,974 | 22,960 | 18,007 | 4,606 | 3,822 |
|
|
2291
|
+
| \`icon\` | 75,783 | 25,159 | 20,714 | 1,641 | 380 | 234 |
|
|
2292
|
+
| \`icon-button\` | 39,274 | 11,865 | 10,468 | 9,537 | 1,875 | 1,498 |
|
|
2293
|
+
| \`image\` | 32,181 | 10,572 | 9,317 | 4,897 | 1,310 | 1,035 |
|
|
2294
|
+
| \`input\` | 92,336 | 29,629 | 24,271 | 10,930 | 2,622 | 2,091 |
|
|
2295
|
+
| \`kbd\` | 31,615 | 10,753 | 9,447 | 4,373 | 1,494 | 1,200 |
|
|
2296
|
+
| \`legend\` | 36,961 | 11,851 | 10,407 | 5,931 | 1,428 | 1,062 |
|
|
2297
|
+
| \`line-chart\` | 83,750 | 27,169 | 24,024 | 20,506 | 5,200 | 4,298 |
|
|
2298
|
+
| \`list\` | 33,368 | 10,664 | 9,398 | 5,779 | 1,309 | 1,027 |
|
|
2299
|
+
| \`listbox\` | 98,498 | 31,730 | 25,926 | 15,059 | 3,953 | 3,210 |
|
|
2300
|
+
| \`loader\` | 31,655 | 10,415 | 9,171 | 4,051 | 990 | 871 |
|
|
2301
|
+
| \`megamenu\` | 63,583 | 21,401 | 18,957 | 9,810 | 2,421 | 1,921 |
|
|
2302
|
+
| \`menu\` | 121,435 | 40,113 | 33,597 | 16,193 | 3,773 | 3,054 |
|
|
2303
|
+
| \`meter\` | 37,077 | 11,643 | 10,297 | 9,479 | 2,199 | 1,935 |
|
|
2304
|
+
| \`navigation\` | 31,508 | 10,556 | 9,284 | 2,726 | 769 | 541 |
|
|
2305
|
+
| \`notifications\` | 103,908 | 31,888 | 26,362 | 24,840 | 5,169 | 4,429 |
|
|
2306
|
+
| \`number-input\` | 93,268 | 30,048 | 24,599 | 11,944 | 3,031 | 2,421 |
|
|
2307
|
+
| \`object-inspector\` | 142,100 | 45,192 | 38,118 | 33,022 | 7,514 | 6,307 |
|
|
2308
|
+
| \`option\` | 33,636 | 10,946 | 9,654 | 6,038 | 1,512 | 1,193 |
|
|
2309
|
+
| \`orb\` | 37,783 | 13,110 | 11,586 | 10,144 | 3,616 | 3,082 |
|
|
2310
|
+
| \`outline\` | 37,191 | 12,076 | 10,656 | 8,356 | 2,227 | 1,813 |
|
|
2311
|
+
| \`pagination\` | 154,119 | 46,452 | 39,097 | 44,855 | 9,343 | 7,813 |
|
|
2312
|
+
| \`pin-input\` | 41,945 | 13,185 | 11,599 | 8,088 | 2,312 | 1,850 |
|
|
2313
|
+
| \`popover\` | 58,539 | 20,204 | 17,849 | 4,519 | 1,189 | 824 |
|
|
2314
|
+
| \`progress\` | 34,559 | 11,096 | 9,836 | 6,962 | 1,654 | 1,429 |
|
|
2315
|
+
| \`qr-code\` | 41,840 | 14,385 | 12,673 | 14,626 | 5,107 | 4,352 |
|
|
2316
|
+
| \`quote\` | 28,427 | 9,559 | 8,416 | 1,191 | 295 | 143 |
|
|
2317
|
+
| \`radio\` | 45,127 | 13,282 | 11,744 | 10,686 | 2,248 | 1,761 |
|
|
2318
|
+
| \`rating\` | 42,753 | 13,648 | 12,037 | 8,745 | 2,554 | 2,089 |
|
|
2319
|
+
| \`sandbox\` | 62,711 | 17,214 | 15,278 | 34,690 | 7,620 | 6,638 |
|
|
2320
|
+
| \`scatter-chart\` | 82,303 | 26,918 | 23,768 | 19,841 | 5,284 | 4,357 |
|
|
2321
|
+
| \`scroll-area\` | 33,163 | 10,747 | 9,450 | 5,874 | 1,444 | 1,139 |
|
|
2322
|
+
| \`select\` | 137,026 | 43,197 | 36,271 | 27,888 | 6,253 | 5,178 |
|
|
2323
|
+
| \`skeleton\` | 29,479 | 9,897 | 8,717 | 2,242 | 594 | 454 |
|
|
2324
|
+
| \`skip-link\` | 29,907 | 10,068 | 8,837 | 2,672 | 771 | 547 |
|
|
2325
|
+
| \`slider\` | 50,243 | 14,372 | 12,719 | 16,142 | 3,389 | 2,901 |
|
|
2326
|
+
| \`sparkline\` | 38,524 | 12,731 | 11,265 | 6,465 | 1,776 | 1,472 |
|
|
2327
|
+
| \`speed-dial\` | 113,274 | 37,669 | 31,679 | 11,289 | 2,390 | 1,911 |
|
|
2328
|
+
| \`splitter\` | 43,762 | 13,045 | 11,608 | 16,021 | 3,558 | 3,114 |
|
|
2329
|
+
| \`stat\` | 31,553 | 10,204 | 9,037 | 3,954 | 832 | 745 |
|
|
2330
|
+
| \`steps\` | 98,188 | 30,177 | 24,855 | 19,904 | 3,903 | 3,265 |
|
|
2331
|
+
| \`switch\` | 39,964 | 12,500 | 11,024 | 5,908 | 1,579 | 1,207 |
|
|
2332
|
+
| \`table\` | 90,706 | 29,413 | 24,137 | 14,540 | 3,644 | 2,994 |
|
|
2333
|
+
| \`tabs\` | 41,452 | 12,679 | 11,189 | 10,325 | 2,198 | 1,834 |
|
|
2334
|
+
| \`tag\` | 79,060 | 26,140 | 21,473 | 4,086 | 1,025 | 852 |
|
|
2335
|
+
| \`text\` | 31,213 | 10,043 | 8,826 | 3,987 | 789 | 526 |
|
|
2336
|
+
| \`textarea\` | 41,679 | 12,895 | 11,358 | 7,341 | 1,934 | 1,431 |
|
|
2337
|
+
| \`time-input\` | 163,647 | 48,868 | 41,210 | 49,175 | 10,538 | 8,941 |
|
|
2338
|
+
| \`time-picker\` | 114,260 | 35,379 | 29,186 | 30,279 | 7,316 | 6,095 |
|
|
2339
|
+
| \`timeline\` | 79,666 | 26,024 | 21,566 | 5,160 | 1,134 | 857 |
|
|
2340
|
+
| \`toast\` | 87,120 | 28,029 | 23,045 | 11,526 | 2,582 | 2,139 |
|
|
2341
|
+
| \`toggle\` | 44,497 | 13,600 | 12,049 | 8,514 | 2,092 | 1,607 |
|
|
2342
|
+
| \`toolbar\` | 31,583 | 10,541 | 9,268 | 4,208 | 1,250 | 960 |
|
|
2343
|
+
| \`tooltip\` | 63,078 | 21,403 | 18,968 | 9,492 | 2,546 | 2,061 |
|
|
2344
|
+
| \`tour\` | 75,289 | 23,611 | 20,886 | 20,537 | 4,381 | 3,576 |
|
|
2345
|
+
| \`tree\` | 91,242 | 29,636 | 24,321 | 12,201 | 3,165 | 2,607 |
|
|
2346
|
+
| \`trend\` | 78,338 | 25,747 | 21,284 | 4,205 | 948 | 823 |
|
|
2347
|
+
| \`video\` | 158,345 | 48,236 | 40,754 | 52,850 | 11,669 | 10,126 |
|
|
2348
|
+
| \`video-playlist\` | 135,495 | 42,650 | 35,778 | 28,847 | 5,972 | 4,969 |
|
|
2349
|
+
| \`virtual-list\` | 34,799 | 11,657 | 10,290 | 3,259 | 963 | 747 |
|
|
2261
2350
|
|
|
2262
2351
|
## What lands in \`node_modules\`
|
|
2263
2352
|
|
|
@@ -2269,12 +2358,12 @@ column is what was removed rather than part of what remains.
|
|
|
2269
2358
|
|
|
2270
2359
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
2271
2360
|
|---|---|---|---|---|
|
|
2272
|
-
| \`@fusion.dev/helix-core\` |
|
|
2273
|
-
| \`@fusion.dev/helix-headless\` |
|
|
2361
|
+
| \`@fusion.dev/helix-core\` | 837,166 | 123 | 184,846 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
2362
|
+
| \`@fusion.dev/helix-headless\` | 11,010,468 | 472 | 852,738 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
2274
2363
|
| \`@fusion.dev/helix-icons\` | 65,943 | 11 | 20,928 | none |
|
|
2275
2364
|
| \`@fusion.dev/helix-styles\` | 101,139 | 6 | 0 | none |
|
|
2276
2365
|
| \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
|
|
2277
|
-
| \`@fusion.dev/helix\` | 11,
|
|
2366
|
+
| \`@fusion.dev/helix\` | 11,987,123 | 798 | 336,270 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
2278
2367
|
|
|
2279
2368
|
## Not measured yet
|
|
2280
2369
|
|
|
@@ -2654,6 +2743,12 @@ helix-video::part(overflow-header) { … }
|
|
|
2654
2743
|
role stands alone: the tooltip inside \`<helix-copy-button>\` is \`tooltip\`, and
|
|
2655
2744
|
its arrow is \`tooltip-arrow\`.
|
|
2656
2745
|
|
|
2746
|
+
A part that changes with a state takes a second name while the state holds, and
|
|
2747
|
+
that name is forwarded too. A tooltip that landed below its button is also
|
|
2748
|
+
\`tooltip-bottom\`, and its arrow \`tooltip-arrow-bottom\`, which is how a sheet out
|
|
2749
|
+
here draws by a side it cannot otherwise see. The arrow already faces the button
|
|
2750
|
+
whichever side that is; the name is for what you draw on top.
|
|
2751
|
+
|
|
2657
2752
|
**The prefix is not decoration.** Two levels can agree on a word, and did:
|
|
2658
2753
|
\`Command\` forwarded the listbox's \`search-field\` under a name it also rendered
|
|
2659
2754
|
itself, so \`::part(search-field)\` matched two elements at once.
|