@fusion.dev/helix-docs 0.105.0 → 0.107.0

package/dist/sources.generated.js

@@ -1594,12 +1594,12 @@ title: Iconography
 <helix-icon name="trash"></helix-icon>
 \`\`\`
 
-Helix has 108 glyphs from Phosphor, drawn on a 256 box at Phosphor's bold
-weight. We keep Phosphor's own geometry. Rescaling to a 24 box would change the
-optical weight of every glyph, and the set would stop matching Phosphor. We use
-the bold weight because Phosphor's regular weight is a hairline beside the
-medium weight of Helix text. An icon that looks lighter than the words next to
-it does not work as a mark.
+Helix has 125 glyphs, 120 of them from Phosphor, drawn on a 256 box at
+Phosphor's bold weight. We keep Phosphor's own geometry. Rescaling to a 24 box
+would change the optical weight of every glyph, and the set would stop matching
+Phosphor. We use the bold weight because Phosphor's regular weight is a
+hairline beside the medium weight of Helix text. An icon that looks lighter than
+the words next to it does not work as a mark.
 
 ## Size and color come from the surrounding text
 
@@ -1674,7 +1674,7 @@ both are set, \`icon\` wins.
 
 \`icon\` also keeps your bundle small. \`name\` looks up glyphs in an index of the
 whole set, and no bundler can tree-shake that index. If you render one icon by
-\`name\`, you ship the whole set: 15 kB gzipped for 108 glyphs. With \`icon\`, you
+\`name\`, you ship the whole set: 17 kB gzipped for 125 glyphs. With \`icon\`, you
 ship only the glyph you import.
 
 \`icon\` also draws glyphs from outside this set. Anything that exports the same
@@ -2282,7 +2282,7 @@ title: Maps
 # Maps
 
 Helix Maps puts a frame around a map drawn by MapLibre, Leaflet, or a renderer of
-your own. The frame adds pan and zoom buttons and a place for the map credit. You
+your own. The frame adds a column of controls and a place for the map credit. You
 add places, routes, areas, live positions, and data as elements inside the
 frame, and \`@fusion.dev/helix-map\` connects the frame to the renderer and styles
 the map with your theme.
@@ -2300,7 +2300,11 @@ Add the map frame, an element for MapLibre to draw in, and your places:
 \`\`\`html
 <helix-map label="Our stores">
   <div id="map"></div>
-  <helix-map-marker label="Flagship" lat="30.2672" lng="-97.7431"></helix-map-marker>
+  <helix-map-marker
+    label="Flagship"
+    lat="30.2672"
+    lng="-97.7431"
+  ></helix-map-marker>
 </helix-map>
 \`\`\`
 
@@ -2330,8 +2334,8 @@ followTheme(map, frame, style)
 
 \`connectMap\` links the frame to the renderer:
 
-- The frame's pan and zoom buttons and keys move the map, using your theme's
-  motion settings. The map moves without animation when a user has asked for
+- The frame's pan, zoom, rotate, and tilt buttons and keys move the map, using
+  your theme's motion settings. The map moves without animation when a user has asked for
   reduced motion.
 - The renderer's own keyboard handling and zoom buttons are turned off, so the
   frame's controls are the only ones.
@@ -2354,11 +2358,41 @@ you already have. Leaflet draws routes, areas, and points only when you pass it
 - Main roads use \`primary\`, your brand color.
 - Smaller roads, buildings, borders, and labels use \`foreground\`.
 
+It also draws landmarks, highway signs, and neighborhood names:
+
+- A landmark is an icon on a disc and its name, in a color for its kind:
+  parks, museums, schools, hotels, hospitals, stations, and stadiums from zoom
+  14, and food and shops from zoom 16. Each color is a fixed hue at your brand
+  color's lightness, so the kinds stay apart in any theme.
+- A highway's number is on its sign, drawn to the Federal Highway
+  Administration's outlines: the red and blue Interstate shield, the white US
+  route shield, the white circle of a state route, and a plain plate for other
+  roads.
+- Neighborhoods are in spaced capitals, quieter than the towns.
+
 The same call builds a light map for a light theme and a dark map for a dark
 theme. Map labels meet a contrast target of 4.5 against the land. Pass
 \`contrast\` to change it, \`language\` to choose which name each place is labeled
 with, and \`tiles\` and \`glyphs\` to use your own tile server.
 
+Pass \`font\` to draw the labels in your theme's typeface. MapLibre draws the
+letters in the page from the font your page has loaded, so there are no glyph
+files to fetch. \`mapFontFrom(frame)\` reads the typeface from your theme, and
+\`fontReady(font)\` waits until its weights are loaded. Wait for it before you
+create the map, because MapLibre keeps each letter as first drawn:
+
+\`\`\`js
+const font = mapFontFrom(frame)
+await fontReady(font)
+const map = new maplibregl.Map({ container: 'map', style: mapLibreStyle(colors, { font }) })
+\`\`\`
+
+The style draws the world as a globe when the map is zoomed out. The globe turns
+into the flat map as the map zooms in. \`connectMap\` hides markers on the far side
+of the globe, and a keyboard user who moves to one turns the globe to show it.
+Pass \`globe: false\` for a flat map at every zoom. MapLibre 4 has no globe, so
+pass it there too.
+
 \`followTheme(map, frame, style)\` restyles the map when your theme changes. It
 watches for a new color mode, class, or theme value on the frame or its
 ancestors, and for a change in the system's light or dark setting. If your page
@@ -2369,6 +2403,42 @@ changes its theme another way, such as by replacing a stylesheet, call
 a frame or two after the page loads. If the colors never become available, it
 reports which one is missing.
 
+## Draw the map before it loads
+
+\`mapSnapshot(view)\` draws the map on your server as an SVG, from the same tiles
+and in the same colors as \`mapLibreStyle\`. Put it in the frame after the element
+MapLibre draws in, and the page shows a map from its first paint. \`connectMap\`
+fades it out once MapLibre has drawn its tiles.
+
+\`\`\`js
+import { mapSnapshot } from '@fusion.dev/helix-map/snapshot'
+
+const view = {
+  center: { lat: 30.27, lng: -97.74 },
+  height: 700,
+  pitch: 45,
+  width: 1200,
+  zoom: 14,
+}
+const snapshot = await mapSnapshot(view)
+// Inside helix-map, after <div id="map"></div>, write the snapshot's markup.
+\`\`\`
+
+Give MapLibre the same \`center\`, \`zoom\`, \`pitch\`, and \`bearing\`, and the snapshot
+lines up with the map that replaces it. \`width\` and \`height\` are the box it is
+drawn for, and a smaller box shows its middle. A snapshot draws the land, water,
+parks, buildings, and roads, and leaves the labels to MapLibre. Its colors are
+your theme's tokens, so it is light or dark with the page and follows a theme
+change. It resolves to an empty string when the tiles cannot be read.
+
+In a framework that renders the markup for you, such as React, put the snapshot
+in an element that is a direct child of the frame and has the
+\`data-helix-map-snapshot\` attribute. \`connectMap\` hides that element, and leaves
+removing it to your framework.
+
+A snapshot is a flat map. A map zoomed out past about 6 is a globe in MapLibre,
+so draw snapshots of city and street views.
+
 ## What you can add to a map
 
 | Element | What it adds |
@@ -2378,13 +2448,23 @@ reports which one is missing.
 | \`helix-map-area\` | A shape, such as a delivery zone |
 | \`helix-map-position\` | A moving point or arrow, such as a vehicle |
 | \`helix-map-points\` | Thousands of places loaded from GeoJSON |
+| \`helix-map-buildings\` | The map's buildings, raised to their heights in 3D |
+| \`helix-map-raster\` | Map tiles over the map, such as weather radar or satellite imagery |
+| \`helix-map-terrain\` | Hills and mountains, shaded and raised in 3D |
+| \`helix-map-contours\` | Contour lines, each at one height |
+| \`helix-map-landcover\` | What covers the ground: forest, grass, farmland, sand, rock, and ice |
 
 Each element takes \`tone\`, such as \`primary\` or \`danger\`, for its color.
 
 ### Markers
 
 \`\`\`html
-<helix-map-marker label="Texas Capitol" lat="30.2747" lng="-97.7405" shape="ring">
+<helix-map-marker
+  label="Texas Capitol"
+  lat="30.2747"
+  lng="-97.7405"
+  shape="ring"
+>
   <span slot="icon">B</span>
 </helix-map-marker>
 \`\`\`
@@ -2415,8 +2495,8 @@ panel, pass \`clusterZoom: false\` to \`connectMap\` and listen for
 
 \`\`\`html
 <helix-map-route
-  label="Depot to Mission"
   description="4.2 km"
+  label="Depot to Mission"
   points="37.7955,-122.3937 37.7644,-122.427"
   progress="0.4"
 ></helix-map-route>
@@ -2435,12 +2515,12 @@ service such as OSRM or Valhalla.
 
 \`\`\`html
 <helix-map-position
+  accuracy="30"
+  description="Two stops away"
+  heading="90"
   label="Van 12"
   lat="37.78"
   lng="-122.41"
-  heading="90"
-  accuracy="30"
-  description="Two stops away"
 ></helix-map-position>
 \`\`\`
 
@@ -2452,7 +2532,11 @@ readers announce its \`description\` when it changes, at most once every
 ### Thousands of points
 
 \`\`\`html
-<helix-map-points label="Food and drink" src="/places.geojson" cluster></helix-map-points>
+<helix-map-points
+  cluster
+  label="Food and drink"
+  src="/places.geojson"
+></helix-map-points>
 \`\`\`
 
 Use \`helix-map-points\` for more places than markers can handle. MapLibre draws
@@ -2462,16 +2546,176 @@ count zooms in to it. Pressing a point sends \`helix-activate\` from the layer
 with the point's id, or with the property named by \`name-key\`. Leaflet draws
 each point on its own, which works for hundreds of points.
 
+### Buildings in 3D
+
+\`\`\`html
+<helix-map-buildings></helix-map-buildings>
+\`\`\`
+
+\`helix-map-buildings\` raises the buildings in the map's tiles to the heights the
+tiles record, in your theme's raised surface color. Set \`tone\` to color them by
+meaning. The buildings appear from zoom 13. To see their height, tilt the map by
+setting \`pitch\` when you create it:
+
+\`\`\`js
+const map = new maplibregl.Map({ container: 'map', pitch: 55, style, zoom: 15.5 })
+\`\`\`
+
+To let users tilt the map, add \`tilt\` to the frame's \`controls\`:
+
+\`\`\`html
+<helix-map
+  controls="zoom compass tilt fullscreen"
+  label="Downtown Austin in 3D"
+>
+\`\`\`
+
+The 3D button is a toggle. Pressed, it tilts the map 50 degrees toward the
+horizon and raises the buildings. Pressed again, it makes the map flat, and the
+buildings are the map's own flat footprints. Raised terrain lies flat with them,
+and keeps its shading. The compass's needle points north as the map turns, and
+pressing the compass turns the map back to north.
+
+Leaflet draws maps flat and does not rotate, so a Leaflet map shows no
+buildings, and the compass and the 3D button do nothing.
+
+### Weather and other tile overlays
+
+\`\`\`html
+<helix-map-raster
+  attribution="Radar from Example Weather"
+  frames="https://tiles.example/radar-50m/{z}/{x}/{y}.png https://tiles.example/radar-now/{z}/{x}/{y}.png"
+  label="Weather radar"
+></helix-map-raster>
+\`\`\`
+
+\`helix-map-raster\` draws map tiles over the land and roads, and under your
+routes, areas, and place names. Set \`src\` to one tile URL, or \`frames\` to
+several, and set \`playing\` to show the frames in order, \`interval\` milliseconds
+each. Every frame's tiles load once, so the loop plays without a blank frame.
+
+- Put the tile provider's credit in \`attribution\`. The frame shows it beside
+  the map's credit.
+- The frames do not play while the user has asked for reduced motion.
+- Content that moves for more than five seconds needs a way to pause it, so
+  give \`playing\` a control on your page.
+
+### Satellite imagery and map types
+
+\`\`\`html
+<helix-map-raster
+  attribution="Imagery from USGS The National Map"
+  ground
+  label="Satellite imagery"
+  max-zoom="16"
+  opacity="1"
+  src="https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"
+></helix-map-raster>
+\`\`\`
+
+Set \`ground\` on \`helix-map-raster\` to make its tiles the map's imagery. Imagery
+is a map type, which the frame's \`map-type\` attribute chooses:
+
+- Absent, the Standard map: your themed map, without the imagery.
+- \`hybrid\`: the imagery in place of the map's land, under its roads and names.
+- \`satellite\`: the imagery alone, without the roads and names.
+
+With \`layers\` in the frame's \`controls\`, the layers menu opens with a card for
+each map type, showing a picture of the map in it. Set \`max-zoom\` to the deepest
+zoom your provider has tiles for, and the map enlarges those tiles when a user
+zooms in further.
+
+The imagery above is from the U.S. Geological Survey. It is in the public domain
+and covers the United States. Some providers put \`{y}\` before \`{x}\` in their
+tile URLs, as this one does.
+
+### Terrain
+
+\`\`\`html
+<helix-map-terrain
+  attribution="Elevation from 3DEP and SRTM data, courtesy of the U.S. Geological Survey"
+  max-zoom="15"
+  raised
+  src="https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
+></helix-map-terrain>
+\`\`\`
+
+\`helix-map-terrain\` shades the land by its slopes, so hills and valleys show on a
+flat map. Set \`raised\` to raise the ground to its real height as well, and tilt
+the map to see it. Set \`exaggeration\` to raise it more than its real height,
+such as \`1.5\`. Routes, areas, and buildings lie on the raised ground.
+
+The elevation tiles above are Terrain Tiles on AWS, which are free to use and
+cover the world. Their tiles store heights in the \`terrarium\` encoding, which is
+the default. For tiles in the Mapbox encoding, set \`encoding="mapbox"\`. Credit
+the sources your map shows: in the United States, the U.S. Geological Survey.
+
+Leaflet draws maps flat, so a Leaflet map shows no terrain.
+
+### Contour lines
+
+\`\`\`html
+<helix-map-contours
+  max-zoom="15"
+  src="https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
+  unit="feet"
+></helix-map-contours>
+\`\`\`
+
+\`helix-map-contours\` draws lines of equal height from the same elevation tiles
+as terrain. The lines are closer together as the map zooms in, from 500 meters
+apart over a region to 5 meters at street level. Every fifth line is heavier and
+labeled with its height, in meters, or in feet with \`unit="feet"\`. They show
+from zoom 9, and lie on the ground when it is raised.
+
+### Land cover
+
+\`\`\`html
+<helix-map-landcover></helix-map-landcover>
+\`\`\`
+
+\`helix-map-landcover\` colors the ground by what covers it: forest and grass in
+greens, farmland in wheat, wetland in teal, sand in tan, rock in gray, and ice
+in pale blue. Each color is mixed into your theme's land color. It draws over
+parks and under water and roads, so a park shows its meadows and forests.
+
+### Turn layers on and off
+
+\`\`\`html
+<helix-map
+  controls="zoom compass layers fullscreen"
+  label="Downtown Austin"
+>
+\`\`\`
+
+Add \`layers\` to the frame's \`controls\` for a layers button. It opens a menu with
+a tile for each layer: a picture of what the layer draws, and its \`label\`. A
+tile is lit while its layer is shown. Pressing a tile sets its layer's \`hidden\`
+attribute, and \`connectMap\` does not draw a hidden layer. Write \`hidden\` on a
+layer to start it turned off.
+
+Give layers the same \`group\` to show them as one tile, such as a route and the
+dotted legs at its ends. The tile takes the name of the first layer in the
+group, and shows or hides every layer in it. Keep labels short, such as
+"Walking route", and put the rest in \`description\`, which screen readers read
+after the label.
+
 ## Keyboard and screen readers
 
 - The frame is one tab stop. Arrow keys pan the map, and the plus and minus keys
-  zoom it.
+  zoom it. Shift with Left or Right rotates the map, and Shift with Up or Down
+  tilts it.
 - The markers are one tab stop. Arrow keys move between them in the order you
   wrote them. The map pans to show a marker that is off screen.
 - A points layer is one tab stop over the points and counts in view. Arrow keys
   move top to bottom and along each line. Enter on a count zooms in to it.
-- Screen readers find routes, areas, and points layers in a list inside the
-  frame, named by their \`label\` and \`description\`.
+- Screen readers find the map's shown layers in a list inside the frame, named
+  by their \`label\` and \`description\`.
+- With a pointer, dragging is the only way to move and turn the map. Where your
+  map has to work without dragging, as WCAG 2.2 asks at level AA, add \`pan\` and
+  \`rotate\` to \`controls\` for buttons around the compass that move and turn it.
+- In the layers menu, Tab moves between the tiles, Space or Enter turns a layer
+  on or off, and Escape closes the menu.
 
 ## Write a driver
 
@@ -2491,7 +2735,8 @@ animation. Each optional method turns on a feature:
 | \`layers\` | Drawing routes, areas, and points |
 | \`credits\` | The map credit in the frame's footer |
 | \`silenceKeyboard\`, \`focusTarget\`, \`replaceZoom\` | Using the frame's keys and zoom buttons |
-| \`bearing\` | Arrows that stay correct when the map is rotated |
+| \`bearing\` | Arrows that stay correct when the map is rotated, and the Face north arrow |
+| \`rotate\`, \`tilt\` | The rotate, Face north, and tilt buttons and keys |
 
 Without \`project\`, markers stay hidden. To animate a move your page makes
 itself, read the same motion with \`motionOf(element, pace)\`.
@@ -2544,7 +2789,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 167,631 | 54,135 | 45,804 |
+| Lit and \`@fusion.dev/helix-core\` | 176,094 | 56,735 | 48,133 |
 
 ## Whole packages
 
@@ -2555,11 +2800,11 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 167,185 | 53,719 | 45,579 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 692,504 | 179,427 | 139,511 | Every headless family. The barrel entry includes all of them. |
-| \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
+| \`@fusion.dev/helix-core\` | 175,648 | 56,340 | 47,876 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 715,674 | 185,346 | 144,163 | 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,288 | 1,571 | 1,355 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`@fusion.dev/helix\` | 1,213,542 | 284,037 | 207,956 | Every styled family. |
+| \`@fusion.dev/helix\` | 1,245,495 | 291,270 | 213,669 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -2573,20 +2818,20 @@ shows the whole cost of using the base layer on its own.
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
 | \`base.css\` | 30,672 | 4,430 | 3,844 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
-| \`elements.css\` | 8,457 | 1,433 | 1,282 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
+| \`elements.css\` | 8,760 | 1,482 | 1,323 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 6,390 | 1,260 | 1,084 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
 | \`tokens.css\` | 20,987 | 2,567 | 2,138 | The 191 semantic tokens. Every styled component needs them. |
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 19,792 bytes gzipped alone, and it adds 2,196 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 20,604 bytes gzipped alone, and it adds 2,233 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 103 styled components, the smallest is \`code\` at 9,746 bytes gzipped alone, and the largest is \`data-table\` at 59,994. Every family together is 284,037.
+Across the 103 styled components, the smallest is \`code\` at 9,782 bytes gzipped alone, and the largest is \`data-table\` at 62,714. Every family together is 291,270.
 
-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 179,427 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 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 185,346 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 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 20,674 bytes gzipped alone.
+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,055 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -2598,43 +2843,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 41,947 | 12,322 | 10,856 |
+| \`button\` | **Helix** | 42,297 | 12,358 | 10,881 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Shoelace | 62,628 | 18,287 | 15,805 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
-| \`checkbox\` | **Helix** | 46,351 | 13,506 | 11,862 |
+| \`checkbox\` | **Helix** | 46,701 | 13,549 | 11,892 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Shoelace | 47,614 | 15,177 | 13,301 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
-| \`dialog\` | **Helix** | 39,181 | 11,931 | 10,532 |
+| \`dialog\` | **Helix** | 39,531 | 11,977 | 10,564 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Shoelace | 52,754 | 17,698 | 15,554 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
-| \`radio\` | **Helix** | 50,217 | 14,033 | 12,351 |
+| \`radio\` | **Helix** | 50,567 | 14,074 | 12,400 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Shoelace | 34,865 | 12,027 | 10,559 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
-| \`switch\` | **Helix** | 43,727 | 13,096 | 11,526 |
+| \`switch\` | **Helix** | 44,077 | 13,135 | 11,529 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Shoelace | 37,833 | 11,814 | 10,568 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
-| \`tabs\` | **Helix** | 45,492 | 13,287 | 11,706 |
+| \`tabs\` | **Helix** | 45,842 | 13,332 | 11,742 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Shoelace | 54,573 | 17,140 | 15,068 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
-| \`tooltip\` | **Helix** | 66,072 | 21,770 | 19,269 |
+| \`tooltip\` | **Helix** | 66,422 | 21,810 | 19,328 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-At least one system is smaller than Helix on \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 3,373 bytes gzipped. 7 of 28 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 3,414 bytes gzipped. 7 of 28 peer measurements are smaller than the Helix row.
 
 - **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
 - **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
@@ -2678,103 +2923,103 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 82,901 | 27,154 | 22,228 | 2,875 | 723 | 599 |
-| \`announcement\` | 80,317 | 26,327 | 21,514 | 1,386 | 335 | 293 |
-| \`app-header\` | 31,746 | 10,029 | 8,858 | 1,248 | 272 | 204 |
-| \`area-chart\` | 77,668 | 25,981 | 22,873 | 11,004 | 3,364 | 2,731 |
-| \`avatar\` | 33,795 | 10,619 | 9,376 | 3,257 | 851 | 674 |
-| \`badge\` | 31,282 | 9,961 | 8,768 | 1,163 | 283 | 250 |
-| \`bar-chart\` | 79,319 | 26,337 | 23,258 | 12,644 | 3,701 | 3,090 |
-| \`blockquote\` | 31,296 | 9,982 | 8,795 | 774 | 157 | 103 |
-| \`breadcrumbs\` | 79,357 | 25,667 | 21,199 | 1,965 | 437 | 368 |
-| \`button\` | 35,854 | 11,208 | 9,849 | 3,095 | 794 | 588 |
-| \`button-group\` | 31,152 | 9,869 | 8,691 | 661 | 120 | 65 |
-| \`callout\` | 78,477 | 25,533 | 21,048 | 914 | 217 | 191 |
-| \`canvas\` | 83,665 | 25,431 | 22,249 | 46,815 | 14,052 | 11,876 |
-| \`card\` | 31,186 | 9,883 | 8,719 | 694 | 116 | 122 |
-| \`carousel\` | 88,760 | 28,594 | 23,618 | 10,942 | 2,759 | 2,267 |
-| \`chat\` | 102,068 | 33,433 | 27,460 | 17,447 | 5,117 | 4,235 |
-| \`checkbox\` | 39,842 | 12,090 | 10,632 | 2,335 | 654 | 382 |
-| \`checkbox-group\` | 42,967 | 12,782 | 11,281 | 4,939 | 1,249 | 1,015 |
-| \`code\` | 29,771 | 9,455 | 8,318 | 451 | 62 | 45 |
-| \`code-block\` | 124,101 | 40,739 | 34,366 | 17,201 | 4,506 | 3,737 |
-| \`color-input\` | 141,600 | 44,819 | 37,809 | 25,273 | 5,924 | 4,953 |
-| \`color-picker\` | 108,091 | 34,002 | 28,065 | 19,215 | 4,622 | 3,992 |
-| \`combobox\` | 136,787 | 43,454 | 36,534 | 21,033 | 5,217 | 4,287 |
-| \`command\` | 106,783 | 33,346 | 27,377 | 17,997 | 4,600 | 3,808 |
-| \`copy-button\` | 118,699 | 39,107 | 32,921 | 11,796 | 2,909 | 2,423 |
-| \`data-table\` | 174,981 | 53,493 | 45,112 | 55,522 | 14,090 | 11,680 |
-| \`date-input\` | 135,143 | 42,972 | 36,189 | 19,132 | 4,846 | 3,961 |
-| \`date-picker\` | 90,536 | 29,334 | 24,060 | 9,900 | 2,710 | 2,197 |
-| \`description-list\` | 31,255 | 9,820 | 8,631 | 1,132 | 166 | 133 |
-| \`dialog\` | 34,804 | 10,920 | 9,610 | 2,717 | 764 | 674 |
-| \`divider\` | 31,502 | 10,055 | 8,819 | 981 | 220 | 123 |
-| \`donut-chart\` | 75,451 | 24,938 | 22,046 | 10,214 | 2,960 | 2,616 |
-| \`drawer\` | 33,557 | 10,558 | 9,293 | 1,761 | 453 | 416 |
-| \`drilldown\` | 87,372 | 28,526 | 23,210 | 5,704 | 1,495 | 1,194 |
-| \`empty\` | 31,749 | 10,112 | 8,909 | 956 | 214 | 189 |
-| \`file-input\` | 90,644 | 29,316 | 23,959 | 6,170 | 1,761 | 1,345 |
-| \`filter-input\` | 147,385 | 46,304 | 38,962 | 27,973 | 6,764 | 5,611 |
-| \`format-date\` | 34,765 | 11,036 | 9,757 | 2,867 | 687 | 510 |
-| \`heatmap\` | 76,673 | 25,165 | 22,241 | 10,872 | 2,985 | 2,449 |
-| \`icon\` | 78,044 | 25,357 | 20,849 | 1,018 | 216 | 143 |
-| \`icon-button\` | 36,253 | 11,243 | 9,885 | 3,494 | 825 | 628 |
-| \`image\` | 33,325 | 10,417 | 9,166 | 3,156 | 815 | 691 |
-| \`input\` | 89,734 | 28,797 | 23,541 | 4,702 | 1,281 | 945 |
-| \`kbd\` | 33,106 | 10,647 | 9,406 | 2,976 | 951 | 696 |
-| \`legend\` | 35,158 | 11,146 | 9,802 | 1,080 | 268 | 220 |
-| \`lightbox\` | 39,522 | 12,181 | 10,706 | 4,807 | 1,253 | 1,061 |
-| \`line-chart\` | 77,249 | 25,679 | 22,678 | 10,667 | 3,076 | 2,588 |
-| \`list\` | 32,208 | 10,055 | 8,872 | 1,726 | 328 | 245 |
-| \`listbox\` | 98,495 | 31,487 | 25,684 | 11,194 | 3,014 | 2,433 |
-| \`loader\` | 31,392 | 9,987 | 8,780 | 900 | 207 | 245 |
-| \`map\` | 53,734 | 15,846 | 13,956 | 15,316 | 3,889 | 3,216 |
-| \`megamenu\` | 61,633 | 20,674 | 18,272 | 4,941 | 1,321 | 974 |
-| \`menu\` | 117,475 | 39,035 | 32,785 | 8,848 | 2,208 | 1,774 |
-| \`meter\` | 34,582 | 10,837 | 9,570 | 4,099 | 1,048 | 871 |
-| \`navigation\` | 33,086 | 10,518 | 9,271 | 1,361 | 328 | 243 |
-| \`notifications\` | 94,551 | 30,059 | 24,642 | 11,383 | 2,649 | 2,215 |
-| \`number-input\` | 92,660 | 29,603 | 24,178 | 7,625 | 2,007 | 1,553 |
-| \`object-inspector\` | 131,749 | 43,371 | 36,527 | 19,463 | 5,181 | 4,284 |
-| \`option\` | 33,422 | 10,422 | 9,209 | 2,933 | 641 | 445 |
-| \`outline\` | 36,510 | 11,706 | 10,328 | 4,628 | 1,357 | 1,031 |
-| \`pagination\` | 140,740 | 44,142 | 37,163 | 27,534 | 6,449 | 5,302 |
-| \`pin-input\` | 42,758 | 13,010 | 11,433 | 5,194 | 1,510 | 1,152 |
-| \`popover\` | 58,839 | 19,921 | 17,599 | 1,899 | 477 | 337 |
-| \`progress\` | 32,433 | 10,261 | 9,035 | 1,951 | 477 | 400 |
-| \`qr-code\` | 43,082 | 14,300 | 12,585 | 12,983 | 4,692 | 3,989 |
-| \`quote\` | 30,675 | 9,744 | 8,564 | 552 | 89 | 118 |
-| \`radio\` | 42,020 | 12,549 | 11,057 | 2,822 | 696 | 473 |
-| \`rating\` | 44,493 | 13,597 | 11,997 | 6,605 | 1,856 | 1,535 |
-| \`scatter-chart\` | 77,153 | 25,592 | 22,565 | 11,346 | 3,384 | 2,814 |
-| \`scroll-area\` | 32,918 | 10,423 | 9,151 | 2,743 | 747 | 517 |
-| \`select\` | 128,850 | 41,531 | 34,906 | 15,857 | 4,004 | 3,169 |
-| \`skeleton\` | 29,864 | 9,489 | 8,354 | 544 | 96 | 112 |
-| \`skip-link\` | 31,454 | 10,045 | 8,831 | 1,178 | 335 | 218 |
-| \`slider\` | 43,252 | 13,023 | 11,499 | 5,535 | 1,473 | 1,172 |
-| \`sparkline\` | 37,577 | 12,171 | 10,735 | 2,387 | 771 | 608 |
-| \`speed-dial\` | 109,021 | 36,657 | 30,848 | 3,743 | 931 | 643 |
-| \`splitter\` | 40,957 | 12,491 | 11,063 | 10,282 | 2,578 | 2,226 |
-| \`stat\` | 31,640 | 9,918 | 8,739 | 1,148 | 171 | 115 |
-| \`steps\` | 87,485 | 28,117 | 23,085 | 6,177 | 1,482 | 1,191 |
-| \`switch\` | 39,459 | 12,044 | 10,580 | 1,550 | 449 | 378 |
-| \`table\` | 88,964 | 28,904 | 23,621 | 9,425 | 2,518 | 2,151 |
-| \`tabs\` | 39,256 | 12,020 | 10,599 | 3,925 | 869 | 769 |
-| \`tag\` | 78,757 | 25,623 | 20,999 | 895 | 162 | 167 |
-| \`textarea\` | 42,000 | 12,640 | 11,086 | 3,953 | 1,064 | 726 |
-| \`time-input\` | 148,087 | 46,297 | 38,913 | 28,815 | 7,042 | 5,924 |
-| \`time-picker\` | 107,250 | 34,027 | 27,969 | 18,980 | 5,090 | 4,122 |
-| \`timeline\` | 79,206 | 25,596 | 21,098 | 1,809 | 365 | 300 |
-| \`toast\` | 82,563 | 26,731 | 21,884 | 4,078 | 959 | 769 |
-| \`toggle\` | 44,055 | 13,155 | 11,608 | 3,342 | 817 | 574 |
-| \`toolbar\` | 33,246 | 10,621 | 9,327 | 2,624 | 749 | 601 |
-| \`tooltip\` | 62,994 | 21,020 | 18,657 | 6,369 | 1,736 | 1,416 |
-| \`tour\` | 68,711 | 22,383 | 19,798 | 10,945 | 2,735 | 2,140 |
-| \`tree\` | 89,391 | 28,923 | 23,646 | 7,223 | 1,938 | 1,478 |
-| \`trend\` | 78,084 | 25,393 | 20,935 | 1,056 | 264 | 347 |
-| \`video\` | 145,674 | 45,979 | 38,881 | 32,513 | 7,667 | 6,523 |
-| \`video-playlist\` | 124,965 | 40,646 | 34,154 | 14,933 | 3,484 | 2,875 |
-| \`virtual-list\` | 37,053 | 11,852 | 10,471 | 2,413 | 701 | 486 |
+| \`accordion\` | 91,094 | 29,961 | 24,447 | 2,875 | 746 | 648 |
+| \`announcement\` | 88,510 | 29,143 | 23,730 | 1,386 | 360 | 271 |
+| \`app-header\` | 32,096 | 10,066 | 8,865 | 1,248 | 299 | 205 |
+| \`area-chart\` | 78,018 | 26,017 | 22,902 | 11,004 | 3,383 | 2,774 |
+| \`avatar\` | 34,145 | 10,660 | 9,402 | 3,257 | 893 | 753 |
+| \`badge\` | 31,632 | 10,004 | 8,783 | 1,163 | 301 | 269 |
+| \`bar-chart\` | 79,669 | 26,387 | 23,299 | 12,644 | 3,738 | 3,095 |
+| \`blockquote\` | 31,646 | 10,021 | 8,813 | 774 | 178 | 144 |
+| \`breadcrumbs\` | 87,550 | 28,471 | 23,352 | 1,965 | 464 | 316 |
+| \`button\` | 36,204 | 11,250 | 9,854 | 3,095 | 813 | 639 |
+| \`button-group\` | 31,502 | 9,910 | 8,724 | 661 | 145 | 32 |
+| \`callout\` | 86,670 | 28,326 | 23,244 | 914 | 249 | 266 |
+| \`canvas\` | 84,235 | 25,521 | 22,341 | 46,815 | 14,028 | 11,911 |
+| \`card\` | 31,536 | 9,922 | 8,751 | 694 | 143 | 135 |
+| \`carousel\` | 96,953 | 31,454 | 25,821 | 10,942 | 2,796 | 2,278 |
+| \`chat\` | 110,261 | 36,277 | 29,701 | 17,447 | 5,130 | 4,237 |
+| \`checkbox\` | 40,192 | 12,129 | 10,643 | 2,335 | 673 | 446 |
+| \`checkbox-group\` | 43,317 | 12,822 | 11,295 | 4,939 | 1,284 | 894 |
+| \`code\` | 30,121 | 9,492 | 8,354 | 451 | 84 | 97 |
+| \`code-block\` | 132,294 | 43,489 | 36,582 | 17,201 | 4,527 | 3,861 |
+| \`color-input\` | 149,793 | 47,470 | 39,966 | 25,273 | 5,960 | 5,020 |
+| \`color-picker\` | 116,284 | 36,859 | 30,323 | 19,215 | 4,647 | 3,875 |
+| \`combobox\` | 144,980 | 46,194 | 38,769 | 21,033 | 5,273 | 4,211 |
+| \`command\` | 114,976 | 36,164 | 29,584 | 17,997 | 4,638 | 3,804 |
+| \`copy-button\` | 126,892 | 41,852 | 35,201 | 11,796 | 2,942 | 2,347 |
+| \`data-table\` | 183,174 | 56,117 | 47,455 | 55,522 | 14,122 | 11,635 |
+| \`date-input\` | 143,336 | 45,714 | 38,337 | 19,132 | 4,881 | 3,996 |
+| \`date-picker\` | 98,729 | 32,189 | 26,267 | 9,900 | 2,757 | 2,231 |
+| \`description-list\` | 31,605 | 9,858 | 8,685 | 1,132 | 208 | 130 |
+| \`dialog\` | 35,154 | 10,963 | 9,662 | 2,717 | 802 | 639 |
+| \`divider\` | 31,852 | 10,099 | 8,872 | 981 | 251 | 167 |
+| \`donut-chart\` | 75,801 | 24,975 | 22,109 | 10,214 | 2,990 | 2,493 |
+| \`drawer\` | 33,907 | 10,598 | 9,310 | 1,761 | 481 | 407 |
+| \`drilldown\` | 95,565 | 31,332 | 25,473 | 5,704 | 1,526 | 1,130 |
+| \`empty\` | 32,099 | 10,157 | 8,916 | 956 | 241 | 227 |
+| \`file-input\` | 98,837 | 32,117 | 26,213 | 6,170 | 1,786 | 1,412 |
+| \`filter-input\` | 155,578 | 48,898 | 41,127 | 27,973 | 6,807 | 5,647 |
+| \`format-date\` | 35,115 | 11,078 | 9,788 | 2,867 | 729 | 551 |
+| \`heatmap\` | 77,023 | 25,205 | 22,244 | 10,872 | 3,019 | 2,401 |
+| \`icon\` | 86,237 | 28,154 | 23,061 | 1,018 | 250 | 189 |
+| \`icon-button\` | 36,603 | 11,278 | 9,942 | 3,494 | 850 | 636 |
+| \`image\` | 33,675 | 10,457 | 9,201 | 3,156 | 826 | 627 |
+| \`input\` | 97,927 | 31,604 | 25,803 | 4,702 | 1,307 | 962 |
+| \`kbd\` | 33,456 | 10,687 | 9,426 | 2,976 | 973 | 733 |
+| \`legend\` | 35,508 | 11,188 | 9,838 | 1,080 | 280 | 201 |
+| \`lightbox\` | 39,872 | 12,217 | 10,697 | 4,807 | 1,271 | 1,017 |
+| \`line-chart\` | 77,599 | 25,717 | 22,776 | 10,667 | 3,097 | 2,589 |
+| \`list\` | 32,558 | 10,095 | 8,878 | 1,726 | 362 | 269 |
+| \`listbox\` | 106,688 | 34,289 | 27,995 | 11,194 | 3,052 | 2,438 |
+| \`loader\` | 31,742 | 10,028 | 8,830 | 900 | 233 | 132 |
+| \`map\` | 122,721 | 37,175 | 30,653 | 29,314 | 6,725 | 5,608 |
+| \`megamenu\` | 61,983 | 20,721 | 18,296 | 4,941 | 1,356 | 981 |
+| \`menu\` | 125,668 | 41,786 | 35,006 | 8,848 | 2,234 | 1,840 |
+| \`meter\` | 34,932 | 10,876 | 9,580 | 4,099 | 1,058 | 859 |
+| \`navigation\` | 33,436 | 10,558 | 9,284 | 1,361 | 349 | 257 |
+| \`notifications\` | 102,744 | 32,907 | 26,890 | 11,383 | 2,676 | 2,227 |
+| \`number-input\` | 100,853 | 32,415 | 26,475 | 7,625 | 2,030 | 1,508 |
+| \`object-inspector\` | 139,942 | 46,072 | 38,783 | 19,463 | 5,189 | 4,378 |
+| \`option\` | 33,772 | 10,461 | 9,217 | 2,933 | 672 | 480 |
+| \`outline\` | 36,860 | 11,745 | 10,369 | 4,628 | 1,392 | 1,144 |
+| \`pagination\` | 148,933 | 46,856 | 39,303 | 27,534 | 6,482 | 5,267 |
+| \`pin-input\` | 43,108 | 13,048 | 11,486 | 5,194 | 1,552 | 1,216 |
+| \`popover\` | 59,189 | 19,958 | 17,628 | 1,899 | 507 | 347 |
+| \`progress\` | 32,783 | 10,304 | 9,102 | 1,951 | 481 | 369 |
+| \`qr-code\` | 43,432 | 14,343 | 12,661 | 12,983 | 4,719 | 4,069 |
+| \`quote\` | 31,025 | 9,783 | 8,610 | 552 | 123 | 104 |
+| \`radio\` | 42,370 | 12,589 | 11,040 | 2,822 | 733 | 464 |
+| \`rating\` | 44,843 | 13,635 | 12,041 | 6,605 | 1,900 | 1,477 |
+| \`scatter-chart\` | 77,503 | 25,634 | 22,597 | 11,346 | 3,421 | 2,737 |
+| \`scroll-area\` | 33,268 | 10,471 | 9,200 | 2,743 | 765 | 567 |
+| \`select\` | 137,043 | 44,268 | 37,080 | 15,857 | 4,039 | 3,124 |
+| \`skeleton\` | 30,214 | 9,526 | 8,422 | 544 | 117 | 36 |
+| \`skip-link\` | 31,804 | 10,088 | 8,868 | 1,178 | 357 | 240 |
+| \`slider\` | 43,602 | 13,061 | 11,532 | 5,535 | 1,517 | 1,205 |
+| \`sparkline\` | 37,927 | 12,212 | 10,794 | 2,387 | 781 | 631 |
+| \`speed-dial\` | 117,214 | 39,375 | 33,131 | 3,743 | 960 | 624 |
+| \`splitter\` | 41,307 | 12,532 | 11,098 | 10,282 | 2,625 | 2,168 |
+| \`stat\` | 31,990 | 9,962 | 8,782 | 1,148 | 213 | 119 |
+| \`steps\` | 95,678 | 30,919 | 25,246 | 6,177 | 1,502 | 1,164 |
+| \`switch\` | 39,809 | 12,087 | 10,643 | 1,550 | 472 | 410 |
+| \`table\` | 97,348 | 31,852 | 25,954 | 9,616 | 2,614 | 2,191 |
+| \`tabs\` | 39,606 | 12,059 | 10,597 | 3,925 | 893 | 641 |
+| \`tag\` | 86,950 | 28,406 | 23,212 | 895 | 198 | 155 |
+| \`textarea\` | 42,350 | 12,677 | 11,152 | 3,953 | 1,090 | 749 |
+| \`time-input\` | 156,280 | 48,922 | 41,124 | 28,815 | 7,097 | 5,819 |
+| \`time-picker\` | 115,443 | 36,869 | 30,195 | 18,980 | 5,124 | 4,167 |
+| \`timeline\` | 87,399 | 28,392 | 23,278 | 1,809 | 398 | 322 |
+| \`toast\` | 90,756 | 29,542 | 24,147 | 4,078 | 977 | 763 |
+| \`toggle\` | 44,405 | 13,199 | 11,591 | 3,342 | 854 | 628 |
+| \`toolbar\` | 33,596 | 10,655 | 9,386 | 2,624 | 781 | 479 |
+| \`tooltip\` | 63,344 | 21,055 | 18,665 | 6,369 | 1,774 | 1,363 |
+| \`tour\` | 69,061 | 22,424 | 19,808 | 10,945 | 2,781 | 2,269 |
+| \`tree\` | 97,584 | 31,762 | 25,849 | 7,223 | 1,962 | 1,541 |
+| \`trend\` | 86,277 | 28,181 | 23,125 | 1,056 | 289 | 336 |
+| \`video\` | 153,867 | 48,625 | 41,162 | 32,513 | 7,710 | 6,651 |
+| \`video-playlist\` | 133,158 | 43,416 | 36,409 | 14,933 | 3,508 | 2,872 |
+| \`virtual-list\` | 37,403 | 11,898 | 10,492 | 2,413 | 727 | 521 |
 
 ### Styled tier
 
@@ -2782,109 +3027,109 @@ 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\` | 86,243 | 27,975 | 22,881 | 6,204 | 1,522 | 1,370 |
-| \`announcement\` | 84,879 | 27,390 | 22,450 | 5,932 | 1,398 | 1,231 |
-| \`app-header\` | 35,636 | 10,930 | 9,626 | 5,121 | 1,186 | 968 |
-| \`area-chart\` | 85,054 | 27,582 | 24,425 | 18,366 | 4,989 | 4,120 |
-| \`aura\` | 98,773 | 33,422 | 28,965 | 65,483 | 22,875 | 19,664 |
-| \`avatar\` | 37,381 | 11,380 | 10,043 | 6,833 | 1,625 | 1,385 |
-| \`badge\` | 34,386 | 10,667 | 9,371 | 4,250 | 969 | 771 |
-| \`bar-chart\` | 92,123 | 28,884 | 25,506 | 25,425 | 6,308 | 5,287 |
-| \`blockquote\` | 32,452 | 10,273 | 9,053 | 1,914 | 447 | 347 |
-| \`breadcrumbs\` | 82,923 | 26,471 | 21,873 | 5,518 | 1,215 | 1,004 |
-| \`button\` | 41,947 | 12,322 | 10,856 | 9,170 | 1,896 | 1,563 |
-| \`button-group\` | 32,828 | 10,248 | 9,030 | 2,320 | 501 | 400 |
-| \`callout\` | 80,478 | 26,064 | 21,528 | 2,899 | 744 | 725 |
-| \`canvas\` | 102,743 | 28,891 | 25,198 | 65,878 | 17,483 | 14,799 |
-| \`card\` | 34,419 | 10,712 | 9,427 | 3,915 | 947 | 714 |
-| \`carousel\` | 99,548 | 30,332 | 25,169 | 21,719 | 4,514 | 3,835 |
-| \`chat\` | 116,225 | 35,929 | 29,677 | 31,590 | 7,633 | 6,375 |
-| \`checkbox\` | 46,351 | 13,506 | 11,862 | 8,828 | 2,064 | 1,753 |
-| \`checkbox-group\` | 45,150 | 13,354 | 11,757 | 7,108 | 1,817 | 1,429 |
-| \`code\` | 30,848 | 9,746 | 8,571 | 1,511 | 348 | 324 |
-| \`code-block\` | 140,551 | 43,624 | 36,810 | 33,630 | 7,225 | 6,052 |
-| \`color-input\` | 175,183 | 49,952 | 42,280 | 58,836 | 11,170 | 9,615 |
-| \`color-picker\` | 135,971 | 38,505 | 32,062 | 47,089 | 9,156 | 7,851 |
-| \`combobox\` | 151,739 | 46,130 | 38,874 | 35,962 | 7,871 | 6,514 |
-| \`command\` | 117,437 | 35,400 | 29,194 | 28,637 | 6,693 | 5,567 |
-| \`copy-button\` | 128,703 | 40,894 | 34,435 | 21,784 | 4,647 | 3,838 |
-| \`data-table\` | 212,351 | 59,994 | 50,477 | 92,625 | 20,552 | 16,824 |
-| \`date-input\` | 151,056 | 46,026 | 38,825 | 35,034 | 7,835 | 6,560 |
-| \`date-picker\` | 96,153 | 30,498 | 25,054 | 15,499 | 3,884 | 3,213 |
-| \`description-list\` | 33,633 | 10,391 | 9,137 | 3,502 | 762 | 677 |
-| \`dialog\` | 39,181 | 11,931 | 10,532 | 7,079 | 1,783 | 1,435 |
-| \`divider\` | 33,658 | 10,583 | 9,299 | 3,120 | 729 | 567 |
-| \`donut-chart\` | 84,558 | 26,826 | 23,735 | 19,297 | 4,922 | 4,114 |
-| \`drawer\` | 37,820 | 11,562 | 10,177 | 6,007 | 1,468 | 1,197 |
-| \`drilldown\` | 92,069 | 29,589 | 24,176 | 10,393 | 2,512 | 2,051 |
-| \`empty\` | 33,189 | 10,558 | 9,258 | 2,380 | 655 | 541 |
-| \`file-input\` | 101,924 | 31,552 | 25,919 | 17,451 | 3,979 | 3,317 |
-| \`filter-input\` | 175,598 | 50,781 | 42,812 | 56,180 | 11,354 | 9,494 |
-| \`flex\` | 32,209 | 10,095 | 8,884 | 2,078 | 429 | 354 |
-| \`format-date\` | 35,413 | 11,181 | 9,904 | 3,497 | 850 | 639 |
-| \`grid\` | 32,663 | 10,250 | 9,017 | 2,528 | 571 | 510 |
-| \`heatmap\` | 83,471 | 26,569 | 23,519 | 17,648 | 4,426 | 3,717 |
-| \`icon\` | 78,750 | 25,535 | 20,998 | 1,707 | 395 | 278 |
-| \`icon-button\` | 42,268 | 12,254 | 10,774 | 9,495 | 1,824 | 1,461 |
-| \`image\` | 35,027 | 10,897 | 9,588 | 4,840 | 1,280 | 1,005 |
-| \`input\` | 96,001 | 30,194 | 24,737 | 10,963 | 2,646 | 2,136 |
-| \`kbd\` | 34,518 | 11,102 | 9,772 | 4,373 | 1,397 | 1,125 |
-| \`legend\` | 39,974 | 12,265 | 10,769 | 5,790 | 1,373 | 1,053 |
-| \`lightbox\` | 42,535 | 12,934 | 11,397 | 7,805 | 2,001 | 1,641 |
-| \`line-chart\` | 87,020 | 27,684 | 24,496 | 20,419 | 5,138 | 4,277 |
-| \`list\` | 36,274 | 11,001 | 9,667 | 5,782 | 1,289 | 1,052 |
-| \`listbox\` | 102,914 | 32,484 | 26,576 | 15,602 | 4,043 | 3,239 |
-| \`loader\` | 34,558 | 10,756 | 9,465 | 4,051 | 972 | 882 |
-| \`map\` | 78,398 | 19,792 | 17,409 | 39,970 | 7,880 | 6,635 |
-| \`megamenu\` | 66,514 | 21,751 | 19,257 | 9,805 | 2,400 | 2,031 |
-| \`menu\` | 125,002 | 40,682 | 34,240 | 16,355 | 3,816 | 3,081 |
-| \`meter\` | 39,980 | 11,977 | 10,567 | 9,479 | 2,196 | 1,967 |
-| \`navigation\` | 34,467 | 10,912 | 9,604 | 2,726 | 726 | 537 |
-| \`notifications\` | 107,662 | 32,470 | 26,790 | 24,486 | 5,061 | 4,234 |
-| \`number-input\` | 97,442 | 30,741 | 25,172 | 12,396 | 3,121 | 2,483 |
-| \`object-inspector\` | 145,386 | 45,727 | 38,558 | 33,080 | 7,507 | 6,384 |
-| \`option\` | 36,676 | 11,333 | 9,993 | 6,176 | 1,538 | 1,215 |
-| \`orb\` | 41,405 | 13,728 | 12,132 | 8,623 | 3,194 | 2,772 |
-| \`outline\` | 40,250 | 12,490 | 11,050 | 8,351 | 2,157 | 1,718 |
-| \`pagination\` | 158,625 | 47,196 | 39,768 | 45,401 | 9,510 | 7,909 |
-| \`pin-input\` | 45,825 | 13,797 | 12,162 | 8,244 | 2,321 | 1,836 |
-| \`popover\` | 61,475 | 20,565 | 18,186 | 4,517 | 1,139 | 908 |
-| \`progress\` | 37,462 | 11,435 | 10,114 | 6,962 | 1,631 | 1,440 |
-| \`qr-code\` | 44,745 | 14,729 | 12,988 | 14,629 | 5,141 | 4,411 |
-| \`quote\` | 31,330 | 9,901 | 8,697 | 1,191 | 258 | 173 |
-| \`radio\` | 50,217 | 14,033 | 12,351 | 11,010 | 2,231 | 1,866 |
-| \`rating\` | 48,707 | 14,803 | 13,052 | 10,802 | 3,067 | 2,455 |
-| \`sandbox\` | 66,692 | 17,792 | 15,758 | 35,718 | 7,890 | 6,662 |
-| \`scatter-chart\` | 85,545 | 27,403 | 24,187 | 19,718 | 5,218 | 4,345 |
-| \`scroll-area\` | 36,066 | 11,084 | 9,734 | 5,874 | 1,400 | 1,103 |
-| \`select\` | 141,605 | 43,930 | 36,894 | 28,601 | 6,420 | 5,278 |
-| \`skeleton\` | 32,382 | 10,236 | 9,004 | 2,242 | 571 | 435 |
-| \`skip-link\` | 32,917 | 10,453 | 9,185 | 2,624 | 728 | 562 |
-| \`slider\` | 54,234 | 14,993 | 13,257 | 16,500 | 3,483 | 2,950 |
-| \`sparkline\` | 41,495 | 13,116 | 11,576 | 6,293 | 1,736 | 1,483 |
-| \`speed-dial\` | 116,653 | 38,164 | 32,130 | 11,356 | 2,375 | 1,911 |
-| \`splitter\` | 47,029 | 13,495 | 11,985 | 16,336 | 3,624 | 3,080 |
-| \`stat\` | 34,456 | 10,547 | 9,311 | 3,954 | 814 | 717 |
-| \`steps\` | 101,103 | 30,547 | 25,231 | 19,784 | 3,900 | 3,290 |
-| \`switch\` | 43,727 | 13,096 | 11,526 | 5,803 | 1,510 | 1,260 |
-| \`table\` | 94,492 | 30,072 | 24,671 | 14,947 | 3,695 | 3,121 |
-| \`tabs\` | 45,492 | 13,287 | 11,706 | 10,154 | 2,185 | 1,781 |
-| \`tag\` | 81,960 | 26,491 | 21,687 | 4,083 | 992 | 805 |
-| \`text\` | 34,116 | 10,386 | 9,128 | 3,987 | 800 | 674 |
-| \`textarea\` | 45,337 | 13,450 | 11,805 | 7,277 | 1,904 | 1,528 |
-| \`time-input\` | 169,479 | 49,807 | 42,031 | 50,189 | 10,656 | 8,990 |
-| \`time-picker\` | 118,880 | 36,173 | 29,854 | 30,598 | 7,288 | 6,001 |
-| \`timeline\` | 82,519 | 26,351 | 21,755 | 5,110 | 1,115 | 952 |
-| \`toast\` | 90,096 | 28,398 | 23,346 | 11,599 | 2,602 | 2,126 |
-| \`toggle\` | 49,152 | 14,337 | 12,673 | 8,427 | 2,043 | 1,670 |
-| \`toolbar\` | 34,538 | 10,914 | 9,578 | 3,899 | 1,061 | 803 |
-| \`tooltip\` | 66,072 | 21,770 | 19,269 | 9,429 | 2,459 | 1,945 |
-| \`tour\` | 78,262 | 23,991 | 21,278 | 20,478 | 4,382 | 3,594 |
-| \`tree\` | 95,241 | 30,320 | 24,831 | 13,069 | 3,349 | 2,711 |
-| \`trend\` | 81,303 | 26,123 | 21,520 | 4,271 | 953 | 805 |
-| \`video\` | 165,092 | 49,434 | 41,913 | 51,911 | 11,204 | 9,633 |
-| \`video-playlist\` | 139,082 | 43,237 | 36,399 | 29,031 | 6,050 | 5,047 |
-| \`virtual-list\` | 37,845 | 12,063 | 10,639 | 3,187 | 914 | 780 |
+| \`accordion\` | 94,436 | 30,803 | 25,127 | 6,204 | 1,544 | 1,281 |
+| \`announcement\` | 93,072 | 30,238 | 24,620 | 5,932 | 1,416 | 1,192 |
+| \`app-header\` | 35,986 | 10,967 | 9,679 | 5,121 | 1,230 | 975 |
+| \`area-chart\` | 85,404 | 27,630 | 24,345 | 18,366 | 5,024 | 4,121 |
+| \`aura\` | 99,123 | 33,456 | 29,000 | 65,483 | 23,039 | 19,659 |
+| \`avatar\` | 37,731 | 11,417 | 10,082 | 6,833 | 1,651 | 1,391 |
+| \`badge\` | 34,736 | 10,707 | 9,390 | 4,250 | 1,014 | 791 |
+| \`bar-chart\` | 92,473 | 28,931 | 25,584 | 25,425 | 6,335 | 5,249 |
+| \`blockquote\` | 32,802 | 10,316 | 9,102 | 1,914 | 482 | 367 |
+| \`breadcrumbs\` | 91,116 | 29,289 | 24,028 | 5,518 | 1,250 | 1,004 |
+| \`button\` | 42,297 | 12,358 | 10,881 | 9,170 | 1,923 | 1,560 |
+| \`button-group\` | 33,178 | 10,286 | 9,051 | 2,320 | 538 | 379 |
+| \`callout\` | 88,671 | 28,886 | 23,724 | 2,899 | 776 | 645 |
+| \`canvas\` | 103,414 | 29,000 | 25,323 | 65,979 | 17,556 | 14,869 |
+| \`card\` | 34,769 | 10,747 | 9,440 | 3,915 | 989 | 841 |
+| \`carousel\` | 107,741 | 33,201 | 27,421 | 21,719 | 4,565 | 3,880 |
+| \`chat\` | 124,418 | 38,793 | 31,978 | 31,590 | 7,665 | 6,407 |
+| \`checkbox\` | 46,701 | 13,549 | 11,892 | 8,828 | 2,103 | 1,710 |
+| \`checkbox-group\` | 45,500 | 13,393 | 11,759 | 7,108 | 1,840 | 1,412 |
+| \`code\` | 31,198 | 9,782 | 8,614 | 1,511 | 387 | 289 |
+| \`code-block\` | 148,744 | 46,385 | 38,986 | 33,630 | 7,268 | 6,139 |
+| \`color-input\` | 183,376 | 52,599 | 44,584 | 58,836 | 11,203 | 9,512 |
+| \`color-picker\` | 144,164 | 41,370 | 34,268 | 47,089 | 9,202 | 7,817 |
+| \`combobox\` | 159,990 | 48,783 | 41,021 | 36,020 | 7,936 | 6,553 |
+| \`command\` | 125,630 | 38,230 | 31,442 | 28,637 | 6,743 | 5,562 |
+| \`copy-button\` | 136,896 | 43,653 | 36,646 | 21,784 | 4,665 | 3,972 |
+| \`data-table\` | 220,801 | 62,714 | 52,791 | 92,882 | 20,663 | 16,995 |
+| \`date-input\` | 159,249 | 48,641 | 41,040 | 35,034 | 7,876 | 6,501 |
+| \`date-picker\` | 104,346 | 33,365 | 27,288 | 15,499 | 3,909 | 3,160 |
+| \`description-list\` | 33,983 | 10,434 | 9,183 | 3,502 | 796 | 605 |
+| \`dialog\` | 39,531 | 11,977 | 10,564 | 7,079 | 1,814 | 1,563 |
+| \`divider\` | 34,008 | 10,622 | 9,326 | 3,120 | 774 | 678 |
+| \`donut-chart\` | 84,908 | 26,866 | 23,761 | 19,297 | 4,956 | 4,091 |
+| \`drawer\` | 38,170 | 11,601 | 10,221 | 6,007 | 1,505 | 1,265 |
+| \`drilldown\` | 100,262 | 32,421 | 26,422 | 10,393 | 2,555 | 2,122 |
+| \`empty\` | 33,539 | 10,599 | 9,295 | 2,380 | 698 | 551 |
+| \`file-input\` | 110,117 | 34,378 | 28,171 | 17,451 | 3,989 | 3,327 |
+| \`filter-input\` | 183,791 | 53,397 | 45,052 | 56,180 | 11,403 | 9,421 |
+| \`flex\` | 32,559 | 10,138 | 8,909 | 2,078 | 468 | 364 |
+| \`format-date\` | 35,763 | 11,219 | 9,943 | 3,497 | 885 | 697 |
+| \`grid\` | 33,013 | 10,291 | 9,069 | 2,528 | 609 | 570 |
+| \`heatmap\` | 83,821 | 26,607 | 23,580 | 17,648 | 4,473 | 3,629 |
+| \`icon\` | 86,943 | 28,331 | 23,193 | 1,707 | 425 | 316 |
+| \`icon-button\` | 42,618 | 12,294 | 10,791 | 9,495 | 1,850 | 1,552 |
+| \`image\` | 35,377 | 10,931 | 9,621 | 4,840 | 1,317 | 1,060 |
+| \`input\` | 104,194 | 33,015 | 26,960 | 10,963 | 2,662 | 2,100 |
+| \`kbd\` | 34,868 | 11,148 | 9,814 | 4,373 | 1,429 | 1,235 |
+| \`legend\` | 40,324 | 12,300 | 10,784 | 5,790 | 1,413 | 1,075 |
+| \`lightbox\` | 42,885 | 12,979 | 11,350 | 7,805 | 2,026 | 1,721 |
+| \`line-chart\` | 87,370 | 27,730 | 24,433 | 20,419 | 5,167 | 4,214 |
+| \`list\` | 36,624 | 11,044 | 9,710 | 5,782 | 1,310 | 1,168 |
+| \`listbox\` | 111,107 | 35,309 | 28,775 | 15,602 | 4,061 | 3,343 |
+| \`loader\` | 34,908 | 10,789 | 9,500 | 4,051 | 1,014 | 844 |
+| \`map\` | 156,143 | 42,153 | 35,047 | 62,720 | 11,792 | 9,859 |
+| \`megamenu\` | 66,864 | 21,788 | 19,283 | 9,805 | 2,435 | 2,020 |
+| \`menu\` | 133,195 | 43,427 | 36,394 | 16,355 | 3,832 | 3,154 |
+| \`meter\` | 40,330 | 12,019 | 10,617 | 9,479 | 2,233 | 1,931 |
+| \`navigation\` | 34,817 | 10,954 | 9,632 | 2,726 | 763 | 540 |
+| \`notifications\` | 115,855 | 35,336 | 28,991 | 24,486 | 5,085 | 4,287 |
+| \`number-input\` | 105,635 | 33,578 | 27,453 | 12,396 | 3,149 | 2,506 |
+| \`object-inspector\` | 153,579 | 48,310 | 40,755 | 33,080 | 7,549 | 6,299 |
+| \`option\` | 37,026 | 11,371 | 10,028 | 6,176 | 1,567 | 1,334 |
+| \`orb\` | 41,755 | 13,764 | 12,150 | 8,623 | 3,220 | 2,793 |
+| \`outline\` | 40,600 | 12,532 | 11,084 | 8,351 | 2,202 | 1,753 |
+| \`pagination\` | 166,818 | 49,878 | 41,998 | 45,401 | 9,557 | 7,918 |
+| \`pin-input\` | 46,175 | 13,840 | 12,186 | 8,244 | 2,351 | 1,819 |
+| \`popover\` | 61,825 | 20,604 | 18,244 | 4,517 | 1,174 | 1,004 |
+| \`progress\` | 37,812 | 11,474 | 10,153 | 6,962 | 1,680 | 1,508 |
+| \`qr-code\` | 45,095 | 14,767 | 13,013 | 14,629 | 5,167 | 4,380 |
+| \`quote\` | 31,680 | 9,948 | 8,744 | 1,191 | 293 | 148 |
+| \`radio\` | 50,567 | 14,074 | 12,400 | 11,010 | 2,264 | 1,817 |
+| \`rating\` | 49,057 | 14,833 | 13,064 | 10,802 | 3,090 | 2,572 |
+| \`sandbox\` | 67,042 | 17,834 | 15,810 | 35,718 | 7,929 | 6,736 |
+| \`scatter-chart\` | 85,895 | 27,442 | 24,218 | 19,718 | 5,251 | 4,358 |
+| \`scroll-area\` | 36,416 | 11,121 | 9,800 | 5,874 | 1,445 | 1,147 |
+| \`select\` | 149,798 | 46,656 | 39,120 | 28,601 | 6,454 | 5,257 |
+| \`skeleton\` | 32,732 | 10,282 | 9,043 | 2,242 | 616 | 472 |
+| \`skip-link\` | 33,267 | 10,490 | 9,214 | 2,624 | 757 | 648 |
+| \`slider\` | 54,584 | 15,031 | 13,273 | 16,500 | 3,526 | 2,952 |
+| \`sparkline\` | 41,845 | 13,167 | 11,589 | 6,293 | 1,766 | 1,499 |
+| \`speed-dial\` | 124,846 | 40,915 | 34,302 | 11,356 | 2,407 | 1,956 |
+| \`splitter\` | 47,379 | 13,536 | 12,018 | 16,336 | 3,660 | 3,070 |
+| \`stat\` | 34,806 | 10,587 | 9,343 | 3,954 | 849 | 744 |
+| \`steps\` | 109,296 | 33,391 | 27,447 | 19,784 | 3,926 | 3,283 |
+| \`switch\` | 44,077 | 13,135 | 11,529 | 5,803 | 1,545 | 1,370 |
+| \`table\` | 102,942 | 33,035 | 26,943 | 15,204 | 3,812 | 3,154 |
+| \`tabs\` | 45,842 | 13,332 | 11,742 | 10,154 | 2,208 | 1,761 |
+| \`tag\` | 90,153 | 29,299 | 23,951 | 4,083 | 1,021 | 870 |
+| \`text\` | 34,466 | 10,420 | 9,152 | 3,987 | 846 | 651 |
+| \`textarea\` | 45,687 | 13,497 | 11,850 | 7,277 | 1,925 | 1,489 |
+| \`time-input\` | 177,672 | 52,463 | 44,279 | 50,189 | 10,722 | 8,957 |
+| \`time-picker\` | 127,073 | 39,031 | 32,060 | 30,598 | 7,327 | 6,161 |
+| \`timeline\` | 90,712 | 29,168 | 23,939 | 5,110 | 1,145 | 944 |
+| \`toast\` | 98,289 | 31,259 | 25,616 | 11,599 | 2,619 | 2,152 |
+| \`toggle\` | 49,502 | 14,379 | 12,704 | 8,427 | 2,067 | 1,689 |
+| \`toolbar\` | 34,888 | 10,956 | 9,633 | 3,899 | 1,093 | 937 |
+| \`tooltip\` | 66,422 | 21,810 | 19,328 | 9,429 | 2,504 | 2,074 |
+| \`tour\` | 78,612 | 24,031 | 21,218 | 20,478 | 4,430 | 3,561 |
+| \`tree\` | 103,434 | 33,177 | 27,065 | 13,069 | 3,361 | 2,713 |
+| \`trend\` | 89,496 | 28,957 | 23,734 | 4,271 | 999 | 890 |
+| \`video\` | 173,285 | 52,095 | 44,174 | 51,911 | 11,251 | 9,651 |
+| \`video-playlist\` | 147,275 | 45,994 | 38,622 | 29,031 | 6,080 | 5,111 |
+| \`virtual-list\` | 38,195 | 12,105 | 10,634 | 3,187 | 947 | 691 |
 
 ## What an install adds to \`node_modules\`
 
@@ -2896,12 +3141,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 1,118,596 | 165 | 248,014 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 12,876,176 | 494 | 1,008,417 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
-| \`@fusion.dev/helix-icons\` | 131,512 | 21 | 44,809 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 101,805 | 6 | 0 | none |
+| \`@fusion.dev/helix-core\` | 1,127,867 | 165 | 249,701 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-headless\` | 13,046,911 | 504 | 1,032,260 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-icons\` | 150,162 | 21 | 50,346 | \`svgo\` |
+| \`@fusion.dev/helix-styles\` | 102,108 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
-| \`@fusion.dev/helix\` | 13,914,310 | 848 | 355,824 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix\` | 14,179,532 | 868 | 362,883 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet