@fusion.dev/helix-docs 0.128.0 → 0.128.1

package/dist/sources.generated.js

@@ -1581,6 +1581,353 @@ returns to. In a form, that is usually what you mean by a starting value:
 \`\`\`
 
 See [State and control](./state-and-control).
+`,
+    graphs: `---
+description: Add interactive graphs to your site, styled with your theme and drawn by Sigma.js, cosmos.gl, or three.js.
+section: Essentials
+title: Graphs
+---
+
+# Graphs
+
+Helix Graph puts a frame around a graph drawn by Sigma.js, cosmos.gl, three.js,
+or a renderer of your own. The frame adds a searchable list of every note, zoom
+and fullscreen buttons, and keyboard controls. You give the frame notes and
+links, and \`@fusion.dev/helix-graph\` draws them with the renderer, colored by
+your theme.
+
+## Add a graph
+
+Install Helix, the graph connector, and Sigma.js with its layout:
+
+\`\`\`sh
+bun add @fusion.dev/helix @fusion.dev/helix-graph sigma graphology graphology-layout-forceatlas2
+\`\`\`
+
+Add the frame, with an element inside it for the renderer to draw in:
+
+\`\`\`html
+<helix-graph label="Research notes">
+  <div></div>
+</helix-graph>
+\`\`\`
+
+Give the frame its notes and links, make the renderer, and connect the two:
+
+\`\`\`js
+import '@fusion.dev/helix'
+import { connectGraph } from '@fusion.dev/helix-graph'
+import { sigmaDriver } from '@fusion.dev/helix-graph/sigma'
+import Graph from 'graphology'
+import forceAtlas2 from 'graphology-layout-forceatlas2'
+import FA2Layout from 'graphology-layout-forceatlas2/worker'
+import Sigma from 'sigma'
+
+const frame = document.querySelector('helix-graph')
+frame.nodes = [
+  { id: 'roadmap', label: 'Roadmap', group: 'Product' },
+  { id: 'pricing', label: 'Pricing', group: 'Sales' },
+]
+frame.links = [{ source: 'pricing', target: 'roadmap' }]
+
+const sigma = new Sigma(new Graph(), frame.querySelector('div'))
+const connection = connectGraph(
+  frame,
+  sigmaDriver(sigma, {
+    layout: (graph) => new FA2Layout(graph, { settings: forceAtlas2.inferSettings(graph) }),
+  }),
+)
+\`\`\`
+
+\`nodes\` and \`links\` are properties. Set them in JavaScript, since a graph of
+thousands of notes written as markup would be thousands of elements.
+
+## What the connector does
+
+\`connectGraph\` links the frame to the renderer:
+
+- It draws the notes and links, and lays out the notes that have no place.
+- It colors each group from your theme's series colors, and the names in your
+  theme's typeface. It recolors the graph when your theme or mode changes.
+  After you replace a stylesheet, which changes no attribute, call
+  \`connection.restyle()\`.
+- The note you select in the list is the note selected in the drawing, and the
+  other way round. The selected note's links stand out, and the rest of the
+  graph fades.
+- The frame's zoom buttons and keys move the drawing.
+- \`connection.relayout()\` lays the whole graph out again.
+- \`connection.disconnect()\` puts back everything \`connectGraph\` changed.
+
+## Choose a renderer
+
+| Renderer | Use it for | Install | Driver |
+|---|---|---|---|
+| Sigma.js | Graphs of thousands of notes | \`sigma graphology graphology-layout-forceatlas2\` | \`sigmaDriver\` from \`@fusion.dev/helix-graph/sigma\` |
+| cosmos.gl | Graphs of tens of thousands of notes or more, laid out on the GPU | \`@cosmos.gl/graph\` | \`cosmosDriver\` from \`@fusion.dev/helix-graph/cosmos\` |
+| three.js | Graphs in 3D, and graphs on the surface of a 3D model | \`three d3-force-3d\` | \`threeDriver\` from \`@fusion.dev/helix-graph/three\` |
+
+None of the renderers is bundled with Helix, so you can use the version you
+already have.
+
+With cosmos.gl, make the graph in the frame's box and pass the box as well:
+
+\`\`\`js
+import { Graph } from '@cosmos.gl/graph'
+import { cosmosDriver } from '@fusion.dev/helix-graph/cosmos'
+
+const box = frame.querySelector('div')
+const graph = new Graph(box, { attribution: '', enableSimulation: true, scalePointsOnZoom: false })
+const connection = connectGraph(frame, cosmosDriver(graph, box))
+\`\`\`
+
+With three.js, pass the box, and the driver makes the renderer:
+
+\`\`\`js
+import { threeDriver } from '@fusion.dev/helix-graph/three'
+
+const connection = connectGraph(frame, threeDriver(frame.querySelector('div')))
+\`\`\`
+
+Drag to turn a 3D graph, and use the wheel or a pinch to zoom. It turns slowly
+on its own until someone handles it, unless they asked for reduced motion. Set
+\`autoRotate: false\` to keep it still.
+
+## Free the renderer
+
+Call \`connection.disconnect()\` when the graph leaves the page, then free the
+renderer you made:
+
+\`\`\`js
+connection.disconnect()
+sigma.kill() // Sigma.js
+graph.destroy() // cosmos.gl
+\`\`\`
+
+\`threeDriver\` makes its own renderer, and \`disconnect()\` frees it. A graph you
+remove from the page without disconnecting keeps its renderer running.
+
+## Keep the layout
+
+A layout places every note that has no \`x\` and \`y\`, and moves only those. When
+it settles, the frame sends \`helix-graph-layout\` with where each note ended.
+Save the positions and pass them back as each note's \`x\` and \`y\`, and the graph
+opens in the same places next time, with no layout to wait for:
+
+\`\`\`js
+frame.addEventListener('helix-graph-layout', (event) => {
+  localStorage.setItem('positions', JSON.stringify(event.detail.positions))
+})
+\`\`\`
+
+## Update the graph as your data changes
+
+Give the frame new arrays whenever your data changes. The connector compares
+them with what is drawn, by each note's \`id\` and each link's two ends, and
+draws only what changed. New notes grow in beside their neighbors, and the rest
+stay where they are:
+
+\`\`\`js
+socket.addEventListener('message', ({ data }) => {
+  const note = JSON.parse(data)
+  frame.nodes = [...frame.nodes, note]
+  frame.links = [...frame.links, { source: note.id, target: note.parent }]
+})
+\`\`\`
+
+Call \`signal()\` to show something passing between two notes, such as a message
+or a payment. A comet travels along the link between them, in the first note's
+color turning to the second's, or in the color of a tone you give it:
+
+\`\`\`js
+frame.signal('checkout', 'payments', { tone: 'success' })
+\`\`\`
+
+When someone asked for reduced motion, the link lights up for a moment
+instead. Screen readers do not announce signals, so say anything a reader needs
+to know in your page's own words as well.
+
+## Style the notes
+
+Each note takes these fields, as Helix's other components do:
+
+| Field | Values | What it does |
+|---|---|---|
+| \`group\` | Any name | Colors the note from your theme's series. Each group's name is drawn over its notes |
+| \`shape\` | \`circle\`, \`square\`, \`diamond\`, \`ring\` | Says what kind of note it is at a glance |
+| \`emphasis\` | \`solid\`, \`outlined\`, \`subtle\` | Fills the note, rings it, or tints it |
+| \`material\` | \`glass\`, \`frosted\` | Draws the note as a shaded sphere or as frosted glass |
+| \`tone\` | \`primary\`, \`accent\`, \`info\`, \`success\`, \`warning\`, \`danger\`, \`neutral\` | Colors the note by what it means, over its group's color |
+| \`size\` | A number | How large the note is. A note without one is as large as it is connected |
+
+Set a default for every note with the driver's options, such as
+\`sigmaDriver(sigma, { material: 'glass', shape: 'circle' })\`. cosmos.gl draws a
+note's \`shape\` and not its \`emphasis\` or \`material\`.
+
+## Select a note
+
+Pressing a note selects it, and pressing where no note is clears the selection.
+The frame sends \`helix-activate\` with the note's \`id\`, and its \`active\`
+property holds the selected note. Set \`active\` to select a note from your page,
+and the frame brings it into view with its neighbors. Start with one selected
+with \`default-active\`:
+
+\`\`\`html
+<helix-graph default-active="roadmap" label="Research notes">
+  <div></div>
+</helix-graph>
+\`\`\`
+
+To keep the selection in your own state, cancel \`helix-before-activate\` and set
+\`active\` yourself.
+
+Set \`depth\` to show only the notes within that many links of the selected one,
+for a graph too large to read at once:
+
+\`\`\`html
+<helix-graph default-active="roadmap" depth="2" label="Research notes">
+  <div></div>
+</helix-graph>
+\`\`\`
+
+## Draw the notes in a shape
+
+Pass a \`stencil\` and the connector places the notes in its shape from the first
+frame, with no layout. Each group takes a region of the shape. Give it an SVG
+path and the size of the box it is drawn in:
+
+\`\`\`js
+connectGraph(frame, driver, {
+  stencil: { path: outline.getAttribute('d') ?? '', width: 220, height: 170 },
+})
+\`\`\`
+
+\`@fusion.dev/helix-graph/shapes\` makes shapes from what you have:
+
+| Function | Makes |
+|---|---|
+| \`shapeFromSvg(svg)\` | A shape from an SVG's paths, rectangles, circles, ellipses, and polygons |
+| \`shapeFromImage(image)\` | A shape from an image's opaque pixels |
+| \`shapeFromPath(path, width, height)\` | A shape from one SVG path |
+| \`inflate(shape, { depth })\` | A solid from a flat shape, puffed out as a cushion is |
+| \`onSphere(shape)\` | A flat map wrapped around a globe |
+| \`sphere()\`, \`torus()\`, \`cuboid()\` | Solids |
+
+With three.js, place the notes on the surface of a 3D model.
+\`shapeFromModel\` reads a \`.glb\` or \`.gltf\` file, and is in its own entry,
+\`@fusion.dev/helix-graph/model\`, since it loads three.js:
+
+\`\`\`js
+import { shapeFromModel } from '@fusion.dev/helix-graph/model'
+
+const brain = await shapeFromModel('/models/brain.glb')
+connectGraph(frame, threeDriver(box), {
+  stencil: {
+    ...brain,
+    place: 'surface',
+    regions: { Vision: 'occipital', Hearing: 'temporal' },
+  },
+})
+\`\`\`
+
+- \`place: 'surface'\` puts the notes in a thin shell just inside the surface,
+  and draws the model under them. \`place: 'fill'\`, the default, puts them all
+  through it.
+- \`regions\` sends each group to a named part of the shape. A model's parts are
+  its meshes, and an SVG's are its shapes with an \`id\`. A part the shape does
+  not have is reported in the console, with the parts it has.
+- In TypeScript, write \`place: 'surface' as const\`, so the object keeps the
+  type the stencil takes.
+
+## Share the scroll with the page
+
+By default a graph takes every gesture over it: the wheel zooms it, and one
+finger moves it. A graph embedded in a page takes the wheel from a reader who
+is scrolling past it. Set \`gestures\` on the frame to share them:
+
+\`\`\`html
+<helix-graph gestures="cooperative" label="Research notes">
+  <div></div>
+</helix-graph>
+\`\`\`
+
+- \`cooperative\` leaves the wheel and one finger to the page. The graph takes
+  Ctrl or ⌘ with the wheel, and two fingers, and says so when a gesture passes
+  to the page. Use it for a graph embedded in a page.
+- \`activate\` takes nothing until the graph is pressed, and gives the gestures
+  back on Escape, when the pointer leaves, or on a press elsewhere.
+- \`always\`, the default, takes every gesture.
+
+The keyboard and the frame's buttons work the same in every mode.
+
+## Show the graph large
+
+Set \`no-panel\` to leave the search and the list out of the frame, so the
+drawing takes all of it, as at the top of a page. A Notes button among the
+controls opens them over the drawing:
+
+\`\`\`html
+<helix-graph gestures="cooperative" label="Research notes" no-panel>
+  <div></div>
+</helix-graph>
+\`\`\`
+
+Set the frame's height with \`--graph-block-size\`, and the list's width with
+\`--graph-panel-size\`.
+
+## Show the graph once it is drawn
+
+When the layout settles, the frame sends \`helix-graph-ready\` and matches
+\`:state(ready)\`. Its \`ready\` property is \`true\` from then on. To show a graph
+only once it is laid out, fade it in on the state:
+
+\`\`\`css
+helix-graph > div {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+helix-graph:state(ready) > div {
+  opacity: 1;
+}
+\`\`\`
+
+## Keyboard and screen readers
+
+- The frame is one tab stop. Arrow keys move the drawing, and the plus and
+  minus keys zoom it. Set \`controls="pan zoom fullscreen"\` to add buttons that
+  move it.
+- The list is a listbox, named by \`notes-label\`. Arrow keys, Home, End, Page
+  Up, and Page Down move through it, and Enter or Space selects a note.
+- In the search field, Down moves into the list, and Escape empties the search.
+  With \`no-panel\`, Escape on an empty search closes the list.
+- Screen readers read the selected note first, then how each other note links
+  to it, such as "Linked from Roadmap", and the count as a search narrows it.
+- Change the words with \`search-label\`, \`count-label\`, \`selected-label\`,
+  \`links-to-label\`, \`linked-from-label\`, and \`linked-both-label\`.
+
+## Write a driver
+
+To use another renderer, write a driver: an object with four methods.
+
+- \`draw({ nodes, links })\` draws the graph, each note at its \`x\` and \`y\`.
+- \`look(looks)\` says how each note and link is drawn, from the theme and the
+  selection.
+- \`panBy(x, y, animate)\` moves the view by a number of pixels.
+- \`zoomBy(direction, animate)\` zooms in for \`1\` and out for \`-1\`.
+
+Each optional method turns on a feature:
+
+| Method | Turns on |
+|---|---|
+| \`update\` | Drawing only what changed, for live data |
+| \`settle\` | Laying out notes that have no place |
+| \`onPress\` | Selecting a note by pressing it in the drawing |
+| \`center\`, \`fit\` | Bringing a selected note and its neighbors into view |
+| \`signal\` | Signals between notes |
+| \`groups\` | Each group's name over its notes |
+| \`gestures\`, \`focusTarget\` | Sharing gestures with the page, and the frame's keys |
+| \`shape\` | Drawing a stencil's shape |
+| \`stop\` | Removing what the driver added when the graph disconnects |
 `,
     iconography: `---
 description: Draw icons from the Helix set, import glyphs directly, and build a set of your own.
@@ -2074,6 +2421,7 @@ each framework.
 | \`@fusion.dev/helix-theme\` | You are generating or validating a theme |
 | \`@fusion.dev/helix-icons\` | You are drawing an icon outside a component |
 | \`@fusion.dev/helix-map\` | You are drawing a map with MapLibre, Leaflet, or a renderer of your own. See [Maps](./maps) |
+| \`@fusion.dev/helix-graph\` | You are drawing a graph with Sigma.js, cosmos.gl, three.js, or a renderer of your own. See [Graphs](./graphs) |
 | \`@fusion.dev/helix-core\` | You are building a new Helix component |
 
 React uses the elements directly. Helix ships a \`jsx.d.ts\` that types every
@@ -2946,7 +3294,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 183,921 | 58,601 | 49,628 |
+| Lit and \`@fusion.dev/helix-core\` | 183,972 | 58,625 | 49,668 |
 
 ## Whole packages
 
@@ -2957,11 +3305,11 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 183,475 | 58,165 | 49,355 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 744,132 | 192,737 | 149,437 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 183,526 | 58,197 | 49,382 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 744,183 | 192,766 | 149,315 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 55,565 | 17,727 | 14,864 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`@fusion.dev/helix\` | 1,284,280 | 300,626 | 219,859 | Every styled family. |
+| \`@fusion.dev/helix\` | 1,284,331 | 300,652 | 220,010 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -2982,11 +3330,11 @@ shows the whole cost of using the base layer on its own.
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 21,356 bytes gzipped alone, and it adds 2,261 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
+**Most of your first component is the shared runtime.** The median styled family is 21,356 bytes gzipped alone, and it adds 2,260 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 104 styled components, the smallest is \`code\` at 9,914 bytes gzipped alone, and the largest is \`data-table\` at 63,755. Every family together is 300,626.
+Across the 104 styled components, the smallest is \`code\` at 9,914 bytes gzipped alone, and the largest is \`data-table\` at 63,785. Every family together is 300,652.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 192,737 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
+No family imports a barrel. The \`barrels\` rule in \`fusion workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 192,766 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
 
 The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 21,912 bytes gzipped alone.
 
@@ -3080,104 +3428,104 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 92,320 | 30,104 | 24,545 | 2,875 | 741 | 633 |
-| \`announcement\` | 89,736 | 29,283 | 23,868 | 1,386 | 357 | 381 |
-| \`app-header\` | 33,322 | 10,209 | 8,981 | 1,248 | 273 | 149 |
-| \`area-chart\` | 79,244 | 26,176 | 23,109 | 11,004 | 3,357 | 2,683 |
-| \`avatar\` | 35,371 | 10,801 | 9,527 | 3,257 | 874 | 655 |
-| \`badge\` | 32,858 | 10,137 | 8,912 | 1,163 | 299 | 196 |
-| \`bar-chart\` | 80,895 | 26,537 | 23,439 | 12,644 | 3,704 | 3,059 |
-| \`blockquote\` | 32,872 | 10,162 | 8,928 | 774 | 178 | 130 |
-| \`breadcrumbs\` | 88,776 | 28,630 | 23,481 | 1,965 | 451 | 374 |
-| \`button\` | 37,532 | 11,421 | 10,035 | 3,182 | 813 | 604 |
-| \`button-group\` | 32,728 | 10,043 | 8,831 | 661 | 139 | 22 |
-| \`callout\` | 87,896 | 28,486 | 23,338 | 914 | 237 | 181 |
-| \`canvas\` | 93,945 | 27,721 | 24,258 | 50,034 | 14,929 | 12,590 |
-| \`card\` | 32,762 | 10,060 | 8,842 | 694 | 150 | 49 |
-| \`carousel\` | 98,179 | 31,605 | 25,934 | 10,942 | 2,756 | 2,375 |
-| \`chat\` | 111,517 | 36,428 | 29,865 | 17,447 | 5,119 | 4,240 |
-| \`checkbox\` | 42,243 | 12,451 | 10,940 | 2,703 | 742 | 517 |
-| \`checkbox-group\` | 45,367 | 13,146 | 11,530 | 5,307 | 1,327 | 1,044 |
-| \`code\` | 31,347 | 9,626 | 8,466 | 451 | 74 | 16 |
-| \`code-block\` | 133,622 | 43,657 | 36,760 | 17,288 | 4,500 | 3,805 |
-| \`color-input\` | 151,598 | 47,705 | 40,199 | 25,691 | 5,997 | 5,055 |
-| \`color-picker\` | 118,043 | 37,095 | 30,514 | 19,588 | 4,694 | 3,806 |
-| \`combobox\` | 146,510 | 46,395 | 38,931 | 21,146 | 5,231 | 4,269 |
-| \`command\` | 116,460 | 36,380 | 29,745 | 18,065 | 4,593 | 3,707 |
-| \`copy-button\` | 128,220 | 42,023 | 35,279 | 11,883 | 2,928 | 2,375 |
-| \`data-table\` | 186,662 | 56,832 | 48,057 | 57,295 | 14,502 | 11,994 |
-| \`date-input\` | 144,768 | 45,890 | 38,548 | 19,177 | 4,838 | 4,009 |
-| \`date-picker\` | 99,955 | 32,332 | 26,398 | 9,900 | 2,716 | 2,188 |
-| \`description-list\` | 32,831 | 9,998 | 8,769 | 1,132 | 183 | 154 |
-| \`dialog\` | 36,380 | 11,095 | 9,756 | 2,717 | 771 | 592 |
-| \`divider\` | 33,078 | 10,233 | 8,978 | 981 | 238 | 198 |
-| \`donut-chart\` | 77,027 | 25,133 | 22,183 | 10,214 | 2,953 | 2,399 |
-| \`drawer\` | 35,133 | 10,733 | 9,426 | 1,761 | 472 | 409 |
-| \`drilldown\` | 96,821 | 31,476 | 25,613 | 5,704 | 1,488 | 1,115 |
-| \`empty\` | 33,325 | 10,295 | 9,030 | 956 | 242 | 119 |
-| \`file-input\` | 100,268 | 32,315 | 26,350 | 6,215 | 1,789 | 1,480 |
-| \`filter-input\` | 157,062 | 49,093 | 41,414 | 28,023 | 6,778 | 5,636 |
-| \`format-date\` | 36,341 | 11,211 | 9,892 | 2,867 | 691 | 553 |
-| \`graph\` | 112,930 | 35,999 | 29,558 | 9,932 | 2,821 | 2,319 |
-| \`heatmap\` | 78,249 | 25,359 | 22,345 | 10,872 | 2,971 | 2,475 |
-| \`icon\` | 87,463 | 28,303 | 23,183 | 1,018 | 244 | 228 |
-| \`icon-button\` | 37,931 | 11,453 | 10,064 | 3,581 | 851 | 639 |
-| \`image\` | 34,901 | 10,593 | 9,328 | 3,156 | 811 | 600 |
-| \`input\` | 99,356 | 31,796 | 25,949 | 4,745 | 1,302 | 918 |
-| \`kbd\` | 34,682 | 10,828 | 9,526 | 2,976 | 927 | 796 |
-| \`legend\` | 36,734 | 11,333 | 9,974 | 1,080 | 286 | 170 |
-| \`lightbox\` | 41,116 | 12,371 | 10,866 | 4,807 | 1,242 | 1,084 |
-| \`line-chart\` | 78,825 | 25,867 | 22,831 | 10,667 | 3,065 | 2,574 |
-| \`list\` | 33,784 | 10,241 | 9,005 | 1,726 | 352 | 295 |
-| \`listbox\` | 108,172 | 34,495 | 28,108 | 11,262 | 3,049 | 2,400 |
-| \`loader\` | 32,968 | 10,164 | 8,924 | 900 | 240 | 158 |
-| \`map\` | 133,137 | 39,632 | 32,810 | 33,027 | 7,671 | 6,257 |
-| \`megamenu\` | 63,226 | 20,871 | 18,438 | 4,941 | 1,276 | 942 |
-| \`menu\` | 126,948 | 41,932 | 35,135 | 8,855 | 2,192 | 1,821 |
-| \`meter\` | 36,158 | 11,012 | 9,702 | 4,099 | 1,067 | 822 |
-| \`navigation\` | 34,662 | 10,697 | 9,395 | 1,361 | 307 | 271 |
-| \`notifications\` | 104,000 | 33,057 | 26,940 | 11,383 | 2,636 | 2,136 |
-| \`number-input\` | 102,284 | 32,617 | 26,649 | 7,670 | 2,002 | 1,585 |
-| \`object-inspector\` | 141,270 | 46,229 | 38,905 | 19,550 | 5,220 | 4,260 |
-| \`option\` | 35,023 | 10,607 | 9,342 | 2,958 | 653 | 400 |
-| \`outline\` | 38,086 | 11,889 | 10,459 | 4,628 | 1,322 | 1,025 |
-| \`pagination\` | 150,637 | 47,104 | 39,524 | 27,821 | 6,539 | 5,280 |
-| \`pin-input\` | 44,541 | 13,235 | 11,659 | 5,241 | 1,554 | 1,161 |
-| \`popover\` | 60,432 | 20,114 | 17,726 | 1,899 | 490 | 328 |
-| \`progress\` | 34,009 | 10,438 | 9,187 | 1,951 | 492 | 344 |
-| \`qr-code\` | 44,658 | 14,489 | 12,767 | 12,983 | 4,867 | 4,081 |
-| \`quote\` | 32,251 | 9,916 | 8,695 | 552 | 128 | 95 |
-| \`radio\` | 44,090 | 12,861 | 11,273 | 2,874 | 727 | 541 |
-| \`rating\` | 46,255 | 13,823 | 12,178 | 6,646 | 1,865 | 1,508 |
-| \`scatter-chart\` | 78,729 | 25,800 | 22,693 | 11,346 | 3,365 | 2,783 |
-| \`scroll-area\` | 34,494 | 10,602 | 9,304 | 2,743 | 737 | 567 |
-| \`select\` | 138,747 | 44,523 | 37,301 | 16,144 | 4,088 | 3,267 |
-| \`skeleton\` | 31,440 | 9,658 | 8,486 | 544 | 102 | 109 |
-| \`skip-link\` | 33,030 | 10,223 | 8,986 | 1,178 | 342 | 185 |
-| \`slider\` | 45,080 | 13,265 | 11,697 | 5,627 | 1,513 | 1,258 |
-| \`sparkline\` | 39,153 | 12,367 | 10,898 | 2,387 | 781 | 591 |
-| \`speed-dial\` | 118,457 | 39,524 | 33,181 | 3,743 | 913 | 641 |
-| \`splitter\` | 42,533 | 12,676 | 11,224 | 10,282 | 2,598 | 2,238 |
-| \`stat\` | 33,216 | 10,098 | 8,877 | 1,148 | 196 | 156 |
-| \`steps\` | 97,006 | 31,091 | 25,355 | 6,264 | 1,484 | 1,157 |
-| \`switch\` | 41,592 | 12,370 | 10,837 | 1,650 | 482 | 389 |
-| \`table\` | 99,146 | 32,283 | 26,280 | 10,158 | 2,804 | 2,285 |
-| \`tabs\` | 40,832 | 12,205 | 10,698 | 3,925 | 846 | 703 |
-| \`tag\` | 88,176 | 28,560 | 23,300 | 895 | 186 | 68 |
-| \`textarea\` | 43,779 | 12,879 | 11,289 | 3,996 | 1,079 | 776 |
-| \`time-input\` | 157,898 | 49,104 | 41,306 | 29,016 | 7,059 | 5,866 |
-| \`time-picker\` | 117,015 | 37,083 | 30,307 | 19,136 | 5,113 | 4,220 |
-| \`timeline\` | 88,625 | 28,550 | 23,460 | 1,809 | 391 | 387 |
-| \`toast\` | 91,982 | 29,698 | 24,204 | 4,078 | 950 | 722 |
-| \`toggle\` | 45,776 | 13,386 | 11,799 | 3,342 | 821 | 609 |
-| \`toolbar\` | 34,822 | 10,796 | 9,515 | 2,624 | 721 | 524 |
-| \`tooltip\` | 64,570 | 21,200 | 18,750 | 6,369 | 1,721 | 1,321 |
-| \`tour\` | 70,389 | 22,624 | 19,907 | 11,032 | 2,733 | 2,199 |
-| \`tree\` | 98,840 | 31,909 | 25,969 | 7,223 | 1,881 | 1,538 |
-| \`trend\` | 87,503 | 28,348 | 23,258 | 1,056 | 279 | 287 |
-| \`video\` | 155,165 | 48,771 | 41,158 | 32,520 | 7,642 | 6,529 |
-| \`video-playlist\` | 134,438 | 43,546 | 36,518 | 14,940 | 3,431 | 2,815 |
-| \`virtual-list\` | 38,629 | 12,040 | 10,586 | 2,413 | 715 | 586 |
+| \`accordion\` | 92,320 | 30,104 | 24,545 | 2,875 | 742 | 638 |
+| \`announcement\` | 89,736 | 29,283 | 23,868 | 1,386 | 357 | 233 |
+| \`app-header\` | 33,322 | 10,209 | 8,981 | 1,248 | 274 | 159 |
+| \`area-chart\` | 79,244 | 26,176 | 23,109 | 11,004 | 3,358 | 2,670 |
+| \`avatar\` | 35,371 | 10,801 | 9,527 | 3,257 | 874 | 643 |
+| \`badge\` | 32,858 | 10,137 | 8,912 | 1,163 | 297 | 219 |
+| \`bar-chart\` | 80,895 | 26,537 | 23,439 | 12,644 | 3,707 | 3,021 |
+| \`blockquote\` | 32,872 | 10,162 | 8,928 | 774 | 177 | 168 |
+| \`breadcrumbs\` | 88,776 | 28,630 | 23,481 | 1,965 | 450 | 338 |
+| \`button\` | 37,532 | 11,421 | 10,035 | 3,182 | 812 | 540 |
+| \`button-group\` | 32,728 | 10,043 | 8,831 | 661 | 137 | 84 |
+| \`callout\` | 87,896 | 28,486 | 23,338 | 914 | 237 | 184 |
+| \`canvas\` | 93,945 | 27,721 | 24,258 | 50,034 | 14,929 | 12,517 |
+| \`card\` | 32,762 | 10,060 | 8,842 | 694 | 150 | 73 |
+| \`carousel\` | 98,179 | 31,605 | 25,934 | 10,942 | 2,756 | 2,316 |
+| \`chat\` | 111,568 | 36,458 | 29,867 | 17,447 | 5,119 | 4,327 |
+| \`checkbox\` | 42,243 | 12,451 | 10,940 | 2,703 | 741 | 528 |
+| \`checkbox-group\` | 45,367 | 13,146 | 11,530 | 5,307 | 1,329 | 982 |
+| \`code\` | 31,347 | 9,626 | 8,466 | 451 | 74 | -4 |
+| \`code-block\` | 133,622 | 43,657 | 36,760 | 17,288 | 4,499 | 3,789 |
+| \`color-input\` | 151,598 | 47,705 | 40,199 | 25,691 | 5,996 | 5,040 |
+| \`color-picker\` | 118,043 | 37,095 | 30,514 | 19,588 | 4,695 | 3,962 |
+| \`combobox\` | 146,510 | 46,395 | 38,931 | 21,146 | 5,232 | 4,231 |
+| \`command\` | 116,460 | 36,380 | 29,745 | 18,065 | 4,593 | 3,705 |
+| \`copy-button\` | 128,220 | 42,023 | 35,279 | 11,883 | 2,930 | 2,408 |
+| \`data-table\` | 186,713 | 56,860 | 48,041 | 57,295 | 14,502 | 12,021 |
+| \`date-input\` | 144,768 | 45,890 | 38,548 | 19,177 | 4,836 | 3,923 |
+| \`date-picker\` | 99,955 | 32,332 | 26,398 | 9,900 | 2,716 | 2,148 |
+| \`description-list\` | 32,831 | 9,998 | 8,769 | 1,132 | 182 | 149 |
+| \`dialog\` | 36,380 | 11,095 | 9,756 | 2,717 | 771 | 576 |
+| \`divider\` | 33,078 | 10,233 | 8,978 | 981 | 237 | 97 |
+| \`donut-chart\` | 77,027 | 25,133 | 22,183 | 10,214 | 2,953 | 2,466 |
+| \`drawer\` | 35,133 | 10,733 | 9,426 | 1,761 | 472 | 404 |
+| \`drilldown\` | 96,821 | 31,476 | 25,613 | 5,704 | 1,488 | 1,167 |
+| \`empty\` | 33,325 | 10,295 | 9,030 | 956 | 240 | 124 |
+| \`file-input\` | 100,268 | 32,315 | 26,350 | 6,215 | 1,790 | 1,471 |
+| \`filter-input\` | 157,062 | 49,093 | 41,414 | 28,023 | 6,778 | 5,534 |
+| \`format-date\` | 36,341 | 11,211 | 9,892 | 2,867 | 692 | 461 |
+| \`graph\` | 112,981 | 36,030 | 29,569 | 9,932 | 2,820 | 2,386 |
+| \`heatmap\` | 78,249 | 25,359 | 22,345 | 10,872 | 2,971 | 2,407 |
+| \`icon\` | 87,463 | 28,303 | 23,183 | 1,018 | 243 | 202 |
+| \`icon-button\` | 37,931 | 11,453 | 10,064 | 3,581 | 852 | 625 |
+| \`image\` | 34,901 | 10,593 | 9,328 | 3,156 | 811 | 721 |
+| \`input\` | 99,356 | 31,796 | 25,949 | 4,745 | 1,302 | 965 |
+| \`kbd\` | 34,682 | 10,828 | 9,526 | 2,976 | 927 | 719 |
+| \`legend\` | 36,734 | 11,333 | 9,974 | 1,080 | 285 | 159 |
+| \`lightbox\` | 41,116 | 12,371 | 10,866 | 4,807 | 1,243 | 908 |
+| \`line-chart\` | 78,825 | 25,867 | 22,831 | 10,667 | 3,066 | 2,515 |
+| \`list\` | 33,784 | 10,241 | 9,005 | 1,726 | 353 | 299 |
+| \`listbox\` | 108,172 | 34,495 | 28,108 | 11,262 | 3,049 | 2,431 |
+| \`loader\` | 32,968 | 10,164 | 8,924 | 900 | 240 | 96 |
+| \`map\` | 133,137 | 39,632 | 32,810 | 33,027 | 7,673 | 6,215 |
+| \`megamenu\` | 63,226 | 20,871 | 18,438 | 4,941 | 1,275 | 1,003 |
+| \`menu\` | 126,948 | 41,932 | 35,135 | 8,855 | 2,191 | 1,685 |
+| \`meter\` | 36,158 | 11,012 | 9,702 | 4,099 | 1,066 | 862 |
+| \`navigation\` | 34,662 | 10,697 | 9,395 | 1,361 | 307 | 163 |
+| \`notifications\` | 104,000 | 33,057 | 26,940 | 11,383 | 2,635 | 2,181 |
+| \`number-input\` | 102,284 | 32,617 | 26,649 | 7,670 | 2,002 | 1,521 |
+| \`object-inspector\` | 141,321 | 46,247 | 38,885 | 19,550 | 5,221 | 4,279 |
+| \`option\` | 35,023 | 10,607 | 9,342 | 2,958 | 653 | 403 |
+| \`outline\` | 38,086 | 11,889 | 10,459 | 4,628 | 1,322 | 975 |
+| \`pagination\` | 150,637 | 47,104 | 39,524 | 27,821 | 6,540 | 5,281 |
+| \`pin-input\` | 44,541 | 13,235 | 11,659 | 5,241 | 1,555 | 1,232 |
+| \`popover\` | 60,432 | 20,114 | 17,726 | 1,899 | 490 | 313 |
+| \`progress\` | 34,009 | 10,438 | 9,187 | 1,951 | 491 | 361 |
+| \`qr-code\` | 44,658 | 14,489 | 12,767 | 12,983 | 4,867 | 4,021 |
+| \`quote\` | 32,251 | 9,916 | 8,695 | 552 | 128 | 52 |
+| \`radio\` | 44,090 | 12,861 | 11,273 | 2,874 | 726 | 509 |
+| \`rating\` | 46,255 | 13,823 | 12,178 | 6,646 | 1,865 | 1,465 |
+| \`scatter-chart\` | 78,729 | 25,800 | 22,693 | 11,346 | 3,365 | 2,688 |
+| \`scroll-area\` | 34,494 | 10,602 | 9,304 | 2,743 | 736 | 503 |
+| \`select\` | 138,747 | 44,523 | 37,301 | 16,144 | 4,086 | 3,384 |
+| \`skeleton\` | 31,440 | 9,658 | 8,486 | 544 | 101 | 50 |
+| \`skip-link\` | 33,030 | 10,223 | 8,986 | 1,178 | 341 | 175 |
+| \`slider\` | 45,080 | 13,265 | 11,697 | 5,627 | 1,514 | 1,112 |
+| \`sparkline\` | 39,153 | 12,367 | 10,898 | 2,387 | 781 | 568 |
+| \`speed-dial\` | 118,457 | 39,524 | 33,181 | 3,743 | 913 | 647 |
+| \`splitter\` | 42,533 | 12,676 | 11,224 | 10,282 | 2,598 | 2,120 |
+| \`stat\` | 33,216 | 10,098 | 8,877 | 1,148 | 195 | 95 |
+| \`steps\` | 97,006 | 31,091 | 25,355 | 6,264 | 1,483 | 1,143 |
+| \`switch\` | 41,592 | 12,370 | 10,837 | 1,650 | 481 | 273 |
+| \`table\` | 99,146 | 32,283 | 26,280 | 10,158 | 2,803 | 2,244 |
+| \`tabs\` | 40,832 | 12,205 | 10,698 | 3,925 | 845 | 587 |
+| \`tag\` | 88,176 | 28,560 | 23,300 | 895 | 185 | 125 |
+| \`textarea\` | 43,779 | 12,879 | 11,289 | 3,996 | 1,079 | 823 |
+| \`time-input\` | 157,898 | 49,104 | 41,306 | 29,016 | 7,059 | 5,800 |
+| \`time-picker\` | 117,015 | 37,083 | 30,307 | 19,136 | 5,114 | 4,173 |
+| \`timeline\` | 88,625 | 28,550 | 23,460 | 1,809 | 391 | 317 |
+| \`toast\` | 91,982 | 29,698 | 24,204 | 4,078 | 950 | 728 |
+| \`toggle\` | 45,776 | 13,386 | 11,799 | 3,342 | 820 | 604 |
+| \`toolbar\` | 34,822 | 10,796 | 9,515 | 2,624 | 719 | 542 |
+| \`tooltip\` | 64,570 | 21,200 | 18,750 | 6,369 | 1,720 | 1,278 |
+| \`tour\` | 70,389 | 22,624 | 19,907 | 11,032 | 2,732 | 2,247 |
+| \`tree\` | 98,840 | 31,909 | 25,969 | 7,223 | 1,881 | 1,592 |
+| \`trend\` | 87,503 | 28,348 | 23,258 | 1,056 | 278 | 245 |
+| \`video\` | 155,165 | 48,771 | 41,158 | 32,520 | 7,643 | 6,468 |
+| \`video-playlist\` | 134,438 | 43,546 | 36,518 | 14,940 | 3,432 | 2,768 |
+| \`virtual-list\` | 38,680 | 12,069 | 10,609 | 2,413 | 714 | 513 |
 
 ### Styled tier
 
@@ -3185,110 +3533,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 95,662 | 30,960 | 25,232 | 6,204 | 1,547 | 1,306 |
-| \`announcement\` | 94,298 | 30,394 | 24,787 | 5,932 | 1,408 | 1,232 |
-| \`app-header\` | 37,212 | 11,108 | 9,804 | 5,121 | 1,171 | 971 |
-| \`area-chart\` | 86,630 | 27,780 | 24,508 | 18,366 | 4,984 | 4,100 |
-| \`aura\` | 100,349 | 33,607 | 29,144 | 65,483 | 23,023 | 19,690 |
-| \`avatar\` | 38,957 | 11,565 | 10,219 | 6,833 | 1,646 | 1,332 |
-| \`badge\` | 35,962 | 10,848 | 9,500 | 4,250 | 1,004 | 850 |
-| \`bar-chart\` | 93,699 | 29,090 | 25,706 | 25,425 | 6,301 | 5,198 |
-| \`blockquote\` | 34,028 | 10,452 | 9,175 | 1,914 | 470 | 379 |
-| \`breadcrumbs\` | 92,342 | 29,446 | 24,153 | 5,518 | 1,249 | 1,052 |
-| \`button\` | 43,625 | 12,540 | 11,001 | 9,257 | 1,945 | 1,574 |
-| \`button-group\` | 34,404 | 10,429 | 9,160 | 2,320 | 530 | 446 |
-| \`callout\` | 89,897 | 29,044 | 23,850 | 2,899 | 763 | 635 |
-| \`canvas\` | 114,250 | 31,463 | 27,404 | 70,328 | 18,720 | 15,726 |
-| \`card\` | 36,043 | 10,898 | 9,570 | 3,963 | 986 | 820 |
-| \`carousel\` | 108,967 | 33,342 | 27,506 | 21,719 | 4,518 | 3,869 |
-| \`chat\` | 125,674 | 38,957 | 32,061 | 31,590 | 7,627 | 6,403 |
-| \`checkbox\` | 48,869 | 13,913 | 12,220 | 9,313 | 2,206 | 1,781 |
-| \`checkbox-group\` | 47,648 | 13,738 | 12,043 | 7,574 | 1,921 | 1,427 |
-| \`code\` | 32,424 | 9,914 | 8,735 | 1,511 | 378 | 334 |
-| \`code-block\` | 150,072 | 46,529 | 39,105 | 33,717 | 7,225 | 6,161 |
-| \`color-input\` | 185,279 | 52,850 | 44,776 | 59,352 | 11,291 | 9,556 |
-| \`color-picker\` | 146,021 | 41,643 | 34,498 | 47,560 | 9,287 | 8,002 |
-| \`combobox\` | 161,618 | 49,022 | 41,298 | 36,231 | 7,904 | 6,562 |
-| \`command\` | 127,212 | 38,485 | 31,636 | 28,803 | 6,695 | 5,693 |
-| \`copy-button\` | 138,224 | 43,824 | 36,829 | 21,871 | 4,664 | 3,960 |
-| \`data-table\` | 224,948 | 63,755 | 53,564 | 95,314 | 21,355 | 17,418 |
-| \`date-input\` | 160,779 | 48,867 | 41,264 | 35,177 | 7,837 | 6,646 |
-| \`date-picker\` | 105,572 | 33,511 | 27,376 | 15,499 | 3,872 | 3,202 |
-| \`description-list\` | 35,209 | 10,576 | 9,283 | 3,502 | 778 | 664 |
-| \`dialog\` | 40,757 | 12,115 | 10,693 | 7,079 | 1,793 | 1,492 |
-| \`divider\` | 35,234 | 10,761 | 9,426 | 3,120 | 766 | 664 |
-| \`donut-chart\` | 86,134 | 27,031 | 23,848 | 19,297 | 4,911 | 4,087 |
-| \`drawer\` | 39,396 | 11,745 | 10,321 | 6,007 | 1,496 | 1,310 |
-| \`drilldown\` | 101,518 | 32,568 | 26,478 | 10,393 | 2,519 | 1,965 |
-| \`empty\` | 34,765 | 10,741 | 9,412 | 2,380 | 687 | 541 |
-| \`file-input\` | 111,646 | 34,597 | 28,338 | 17,594 | 4,027 | 3,418 |
-| \`filter-input\` | 185,398 | 53,627 | 45,167 | 56,353 | 11,389 | 9,420 |
-| \`flex\` | 33,785 | 10,276 | 9,018 | 2,078 | 453 | 336 |
-| \`format-date\` | 36,989 | 11,363 | 10,057 | 3,497 | 861 | 615 |
-| \`graph\` | 122,855 | 38,028 | 31,296 | 19,840 | 4,869 | 4,247 |
-| \`grid\` | 34,378 | 10,455 | 9,189 | 2,667 | 624 | 559 |
-| \`heatmap\` | 85,047 | 26,758 | 23,628 | 17,648 | 4,428 | 3,689 |
-| \`icon\` | 88,169 | 28,489 | 23,351 | 1,707 | 425 | 309 |
-| \`icon-button\` | 43,946 | 12,470 | 10,935 | 9,582 | 1,863 | 1,528 |
-| \`image\` | 36,603 | 11,072 | 9,744 | 4,840 | 1,291 | 1,016 |
-| \`input\` | 105,721 | 33,249 | 27,143 | 11,104 | 2,681 | 2,133 |
-| \`kbd\` | 36,094 | 11,290 | 9,930 | 4,373 | 1,366 | 1,161 |
-| \`legend\` | 41,550 | 12,459 | 10,924 | 5,790 | 1,395 | 1,109 |
-| \`lightbox\` | 44,129 | 13,129 | 11,498 | 7,805 | 1,990 | 1,676 |
-| \`line-chart\` | 88,596 | 27,885 | 24,661 | 20,419 | 5,123 | 4,270 |
-| \`list\` | 37,850 | 11,191 | 9,839 | 5,782 | 1,308 | 1,078 |
-| \`listbox\` | 112,689 | 35,554 | 29,011 | 15,768 | 4,083 | 3,262 |
-| \`loader\` | 36,134 | 10,932 | 9,611 | 4,051 | 987 | 791 |
-| \`map\` | 169,380 | 45,150 | 37,620 | 69,255 | 13,215 | 10,947 |
-| \`megamenu\` | 68,107 | 21,944 | 19,465 | 9,805 | 2,345 | 1,904 |
-| \`menu\` | 134,475 | 43,580 | 36,472 | 16,362 | 3,802 | 3,098 |
-| \`meter\` | 41,556 | 12,162 | 10,714 | 9,479 | 2,233 | 1,941 |
-| \`navigation\` | 36,043 | 11,092 | 9,747 | 2,726 | 716 | 569 |
-| \`notifications\` | 117,111 | 35,494 | 29,147 | 24,486 | 5,060 | 4,262 |
-| \`number-input\` | 107,164 | 33,803 | 27,604 | 12,539 | 3,154 | 2,578 |
-| \`object-inspector\` | 154,907 | 48,492 | 40,973 | 33,167 | 7,553 | 6,323 |
-| \`option\` | 38,277 | 11,517 | 10,146 | 6,201 | 1,577 | 1,211 |
-| \`orb\` | 42,981 | 13,915 | 12,267 | 8,623 | 3,224 | 2,798 |
-| \`outline\` | 41,826 | 12,674 | 11,186 | 8,351 | 2,122 | 1,774 |
-| \`pagination\` | 168,620 | 50,145 | 42,237 | 45,786 | 9,628 | 7,895 |
-| \`pin-input\` | 47,706 | 14,054 | 12,317 | 8,389 | 2,389 | 1,941 |
-| \`popover\` | 63,068 | 20,767 | 18,348 | 4,517 | 1,162 | 938 |
-| \`progress\` | 39,038 | 11,616 | 10,242 | 6,962 | 1,668 | 1,413 |
-| \`qr-code\` | 46,321 | 14,913 | 13,142 | 14,629 | 5,299 | 4,418 |
-| \`quote\` | 32,906 | 10,089 | 8,829 | 1,191 | 295 | 190 |
-| \`radio\` | 52,386 | 14,377 | 12,634 | 11,160 | 2,288 | 1,833 |
-| \`rating\` | 50,567 | 15,061 | 13,273 | 10,941 | 3,087 | 2,589 |
-| \`sandbox\` | 68,268 | 17,969 | 15,882 | 35,718 | 7,858 | 6,666 |
-| \`scatter-chart\` | 87,121 | 27,604 | 24,333 | 19,718 | 5,206 | 4,380 |
-| \`scroll-area\` | 37,642 | 11,265 | 9,884 | 5,874 | 1,400 | 1,121 |
-| \`select\` | 151,600 | 46,936 | 39,399 | 28,986 | 6,503 | 5,312 |
-| \`skeleton\` | 33,958 | 10,417 | 9,143 | 2,242 | 593 | 513 |
-| \`skip-link\` | 34,493 | 10,637 | 9,306 | 2,624 | 735 | 559 |
-| \`slider\` | 56,160 | 15,264 | 13,480 | 16,690 | 3,539 | 2,948 |
-| \`sparkline\` | 43,071 | 13,319 | 11,741 | 6,293 | 1,754 | 1,440 |
-| \`speed-dial\` | 126,089 | 41,044 | 34,451 | 11,356 | 2,371 | 1,920 |
-| \`splitter\` | 48,605 | 13,670 | 12,124 | 16,336 | 3,637 | 3,082 |
-| \`stat\` | 36,641 | 10,814 | 9,526 | 4,565 | 916 | 731 |
-| \`steps\` | 110,647 | 33,568 | 27,517 | 19,894 | 3,924 | 3,296 |
-| \`switch\` | 45,958 | 13,443 | 11,806 | 6,001 | 1,580 | 1,268 |
-| \`table\` | 104,740 | 33,466 | 27,286 | 15,746 | 3,983 | 3,283 |
-| \`tabs\` | 47,068 | 13,471 | 11,852 | 10,154 | 2,160 | 1,836 |
-| \`tag\` | 91,379 | 29,452 | 24,044 | 4,083 | 1,019 | 961 |
-| \`text\` | 35,905 | 10,626 | 9,311 | 4,200 | 898 | 656 |
-| \`textarea\` | 47,214 | 13,722 | 12,021 | 7,418 | 1,927 | 1,601 |
-| \`time-input\` | 179,388 | 52,680 | 44,444 | 50,488 | 10,697 | 9,002 |
-| \`time-picker\` | 128,743 | 39,268 | 32,265 | 30,852 | 7,322 | 6,045 |
-| \`timeline\` | 91,938 | 29,325 | 24,151 | 5,110 | 1,137 | 1,029 |
-| \`toast\` | 99,515 | 31,404 | 25,689 | 11,599 | 2,599 | 2,108 |
-| \`toggle\` | 50,971 | 14,593 | 12,822 | 8,525 | 2,070 | 1,713 |
-| \`toolbar\` | 36,114 | 11,095 | 9,765 | 3,899 | 1,025 | 860 |
-| \`tooltip\` | 67,648 | 21,959 | 19,420 | 9,429 | 2,454 | 1,927 |
-| \`tour\` | 79,940 | 24,211 | 21,389 | 20,565 | 4,387 | 3,596 |
-| \`tree\` | 104,690 | 33,320 | 27,207 | 13,069 | 3,303 | 2,690 |
-| \`trend\` | 90,722 | 29,104 | 23,884 | 4,271 | 990 | 859 |
-| \`video\` | 174,583 | 52,245 | 44,246 | 51,918 | 11,161 | 9,554 |
-| \`video-playlist\` | 148,555 | 46,147 | 38,726 | 29,038 | 5,998 | 5,048 |
-| \`virtual-list\` | 39,421 | 12,257 | 10,779 | 3,187 | 934 | 782 |
+| \`accordion\` | 95,662 | 30,960 | 25,232 | 6,204 | 1,546 | 1,300 |
+| \`announcement\` | 94,298 | 30,394 | 24,787 | 5,932 | 1,409 | 1,172 |
+| \`app-header\` | 37,212 | 11,108 | 9,804 | 5,121 | 1,172 | 935 |
+| \`area-chart\` | 86,630 | 27,780 | 24,508 | 18,366 | 4,984 | 4,085 |
+| \`aura\` | 100,349 | 33,607 | 29,144 | 65,483 | 23,028 | 19,584 |
+| \`avatar\` | 38,957 | 11,565 | 10,219 | 6,833 | 1,646 | 1,309 |
+| \`badge\` | 35,962 | 10,848 | 9,500 | 4,250 | 1,004 | 877 |
+| \`bar-chart\` | 93,699 | 29,090 | 25,706 | 25,425 | 6,302 | 5,236 |
+| \`blockquote\` | 34,028 | 10,452 | 9,175 | 1,914 | 470 | 376 |
+| \`breadcrumbs\` | 92,342 | 29,446 | 24,153 | 5,518 | 1,250 | 1,035 |
+| \`button\` | 43,625 | 12,540 | 11,001 | 9,257 | 1,945 | 1,552 |
+| \`button-group\` | 34,404 | 10,429 | 9,160 | 2,320 | 530 | 393 |
+| \`callout\` | 89,897 | 29,044 | 23,850 | 2,899 | 763 | 638 |
+| \`canvas\` | 114,250 | 31,463 | 27,404 | 70,328 | 18,724 | 15,698 |
+| \`card\` | 36,043 | 10,898 | 9,570 | 3,963 | 985 | 779 |
+| \`carousel\` | 108,967 | 33,342 | 27,506 | 21,719 | 4,521 | 3,771 |
+| \`chat\` | 125,725 | 38,987 | 32,099 | 31,590 | 7,630 | 6,344 |
+| \`checkbox\` | 48,869 | 13,913 | 12,220 | 9,313 | 2,207 | 1,810 |
+| \`checkbox-group\` | 47,648 | 13,738 | 12,043 | 7,574 | 1,920 | 1,506 |
+| \`code\` | 32,424 | 9,914 | 8,735 | 1,511 | 377 | 302 |
+| \`code-block\` | 150,072 | 46,529 | 39,105 | 33,717 | 7,228 | 6,096 |
+| \`color-input\` | 185,279 | 52,850 | 44,776 | 59,352 | 11,293 | 9,572 |
+| \`color-picker\` | 146,021 | 41,643 | 34,498 | 47,560 | 9,287 | 7,925 |
+| \`combobox\` | 161,618 | 49,022 | 41,298 | 36,231 | 7,907 | 6,583 |
+| \`command\` | 127,212 | 38,485 | 31,636 | 28,803 | 6,696 | 5,632 |
+| \`copy-button\` | 138,224 | 43,824 | 36,829 | 21,871 | 4,664 | 3,847 |
+| \`data-table\` | 224,999 | 63,785 | 53,661 | 95,314 | 21,356 | 17,352 |
+| \`date-input\` | 160,779 | 48,867 | 41,264 | 35,177 | 7,838 | 6,622 |
+| \`date-picker\` | 105,572 | 33,511 | 27,376 | 15,499 | 3,873 | 3,160 |
+| \`description-list\` | 35,209 | 10,576 | 9,283 | 3,502 | 778 | 691 |
+| \`dialog\` | 40,757 | 12,115 | 10,693 | 7,079 | 1,794 | 1,540 |
+| \`divider\` | 35,234 | 10,761 | 9,426 | 3,120 | 767 | 548 |
+| \`donut-chart\` | 86,134 | 27,031 | 23,848 | 19,297 | 4,913 | 4,047 |
+| \`drawer\` | 39,396 | 11,745 | 10,321 | 6,007 | 1,496 | 1,208 |
+| \`drilldown\` | 101,518 | 32,568 | 26,478 | 10,393 | 2,522 | 2,011 |
+| \`empty\` | 34,765 | 10,741 | 9,412 | 2,380 | 687 | 571 |
+| \`file-input\` | 111,646 | 34,597 | 28,338 | 17,594 | 4,027 | 3,432 |
+| \`filter-input\` | 185,398 | 53,627 | 45,167 | 56,353 | 11,390 | 9,461 |
+| \`flex\` | 33,785 | 10,276 | 9,018 | 2,078 | 453 | 459 |
+| \`format-date\` | 36,989 | 11,363 | 10,057 | 3,497 | 860 | 605 |
+| \`graph\` | 122,906 | 38,060 | 31,321 | 19,840 | 4,869 | 4,125 |
+| \`grid\` | 34,378 | 10,455 | 9,189 | 2,667 | 624 | 499 |
+| \`heatmap\` | 85,047 | 26,758 | 23,628 | 17,648 | 4,428 | 3,703 |
+| \`icon\` | 88,169 | 28,489 | 23,351 | 1,707 | 425 | 279 |
+| \`icon-button\` | 43,946 | 12,470 | 10,935 | 9,582 | 1,863 | 1,527 |
+| \`image\` | 36,603 | 11,072 | 9,744 | 4,840 | 1,292 | 1,024 |
+| \`input\` | 105,721 | 33,249 | 27,143 | 11,104 | 2,682 | 2,185 |
+| \`kbd\` | 36,094 | 11,290 | 9,930 | 4,373 | 1,366 | 1,126 |
+| \`legend\` | 41,550 | 12,459 | 10,924 | 5,790 | 1,395 | 1,057 |
+| \`lightbox\` | 44,129 | 13,129 | 11,498 | 7,805 | 1,990 | 1,581 |
+| \`line-chart\` | 88,596 | 27,885 | 24,661 | 20,419 | 5,125 | 4,203 |
+| \`list\` | 37,850 | 11,191 | 9,839 | 5,782 | 1,308 | 1,123 |
+| \`listbox\` | 112,689 | 35,554 | 29,011 | 15,768 | 4,082 | 3,241 |
+| \`loader\` | 36,134 | 10,932 | 9,611 | 4,051 | 988 | 818 |
+| \`map\` | 169,380 | 45,150 | 37,620 | 69,255 | 13,216 | 10,988 |
+| \`megamenu\` | 68,107 | 21,944 | 19,465 | 9,805 | 2,348 | 1,910 |
+| \`menu\` | 134,475 | 43,580 | 36,472 | 16,362 | 3,800 | 3,193 |
+| \`meter\` | 41,556 | 12,162 | 10,714 | 9,479 | 2,233 | 1,849 |
+| \`navigation\` | 36,043 | 11,092 | 9,747 | 2,726 | 716 | 557 |
+| \`notifications\` | 117,111 | 35,494 | 29,147 | 24,486 | 5,062 | 4,216 |
+| \`number-input\` | 107,164 | 33,803 | 27,604 | 12,539 | 3,156 | 2,513 |
+| \`object-inspector\` | 154,958 | 48,512 | 41,005 | 33,167 | 7,554 | 6,270 |
+| \`option\` | 38,277 | 11,517 | 10,146 | 6,201 | 1,576 | 1,262 |
+| \`orb\` | 42,981 | 13,915 | 12,267 | 8,623 | 3,226 | 2,764 |
+| \`outline\` | 41,826 | 12,674 | 11,186 | 8,351 | 2,122 | 1,741 |
+| \`pagination\` | 168,620 | 50,145 | 42,237 | 45,786 | 9,629 | 7,866 |
+| \`pin-input\` | 47,706 | 14,054 | 12,317 | 8,389 | 2,388 | 1,893 |
+| \`popover\` | 63,068 | 20,767 | 18,348 | 4,517 | 1,162 | 878 |
+| \`progress\` | 39,038 | 11,616 | 10,242 | 6,962 | 1,669 | 1,479 |
+| \`qr-code\` | 46,321 | 14,913 | 13,142 | 14,629 | 5,298 | 4,484 |
+| \`quote\` | 32,906 | 10,089 | 8,829 | 1,191 | 295 | 139 |
+| \`radio\` | 52,386 | 14,377 | 12,634 | 11,160 | 2,287 | 1,846 |
+| \`rating\` | 50,567 | 15,061 | 13,273 | 10,941 | 3,088 | 2,455 |
+| \`sandbox\` | 68,268 | 17,969 | 15,882 | 35,718 | 7,860 | 6,630 |
+| \`scatter-chart\` | 87,121 | 27,604 | 24,333 | 19,718 | 5,206 | 4,225 |
+| \`scroll-area\` | 37,642 | 11,265 | 9,884 | 5,874 | 1,400 | 1,131 |
+| \`select\` | 151,600 | 46,936 | 39,399 | 28,986 | 6,502 | 5,281 |
+| \`skeleton\` | 33,958 | 10,417 | 9,143 | 2,242 | 592 | 498 |
+| \`skip-link\` | 34,493 | 10,637 | 9,306 | 2,624 | 735 | 579 |
+| \`slider\` | 56,160 | 15,264 | 13,480 | 16,690 | 3,539 | 2,921 |
+| \`sparkline\` | 43,071 | 13,319 | 11,741 | 6,293 | 1,754 | 1,426 |
+| \`speed-dial\` | 126,089 | 41,044 | 34,451 | 11,356 | 2,371 | 1,861 |
+| \`splitter\` | 48,605 | 13,670 | 12,124 | 16,336 | 3,637 | 3,029 |
+| \`stat\` | 36,641 | 10,814 | 9,526 | 4,565 | 917 | 771 |
+| \`steps\` | 110,647 | 33,568 | 27,517 | 19,894 | 3,925 | 3,264 |
+| \`switch\` | 45,958 | 13,443 | 11,806 | 6,001 | 1,581 | 1,217 |
+| \`table\` | 104,740 | 33,466 | 27,286 | 15,746 | 3,983 | 3,341 |
+| \`tabs\` | 47,068 | 13,471 | 11,852 | 10,154 | 2,160 | 1,804 |
+| \`tag\` | 91,379 | 29,452 | 24,044 | 4,083 | 1,021 | 872 |
+| \`text\` | 35,905 | 10,626 | 9,311 | 4,200 | 896 | 611 |
+| \`textarea\` | 47,214 | 13,722 | 12,021 | 7,418 | 1,927 | 1,545 |
+| \`time-input\` | 179,388 | 52,680 | 44,444 | 50,488 | 10,698 | 9,022 |
+| \`time-picker\` | 128,743 | 39,268 | 32,265 | 30,852 | 7,320 | 6,138 |
+| \`timeline\` | 91,938 | 29,325 | 24,151 | 5,110 | 1,136 | 952 |
+| \`toast\` | 99,515 | 31,404 | 25,689 | 11,599 | 2,599 | 2,141 |
+| \`toggle\` | 50,971 | 14,593 | 12,822 | 8,525 | 2,071 | 1,665 |
+| \`toolbar\` | 36,114 | 11,095 | 9,765 | 3,899 | 1,025 | 797 |
+| \`tooltip\` | 67,648 | 21,959 | 19,420 | 9,429 | 2,453 | 1,940 |
+| \`tour\` | 79,940 | 24,211 | 21,389 | 20,565 | 4,385 | 3,644 |
+| \`tree\` | 104,690 | 33,320 | 27,207 | 13,069 | 3,304 | 2,790 |
+| \`trend\` | 90,722 | 29,104 | 23,884 | 4,271 | 989 | 878 |
+| \`video\` | 174,583 | 52,245 | 44,246 | 51,918 | 11,162 | 9,518 |
+| \`video-playlist\` | 148,555 | 46,147 | 38,726 | 29,038 | 5,998 | 5,072 |
+| \`virtual-list\` | 39,472 | 12,286 | 10,806 | 3,187 | 935 | 703 |
 
 ## What an install adds to \`node_modules\`
 
@@ -3300,7 +3648,7 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 1,190,142 | 171 | 266,582 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-core\` | 1,190,205 | 171 | 266,642 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
 | \`@fusion.dev/helix-headless\` | 13,487,232 | 510 | 1,074,142 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,162 | 21 | 50,346 | \`svgo\` |
 | \`@fusion.dev/helix-styles\` | 102,155 | 6 | 0 | none |