@fusion.dev/helix-docs 0.176.0 → 0.177.0

package/dist/sources.generated.js

@@ -522,6 +522,148 @@ Building on the headless tier needs none of these.
 You own the presentation layer, the tags, and the build. If we stopped
 tomorrow, you would keep a working design system. You would lose our fixes to
 the behavior underneath it.
+`,
+    canvases: `---
+description: Add a board of cards and connections that people can move, connect, and read with any input, and save it as JSON Canvas.
+section: Essentials
+title: Canvases
+---
+
+# Canvases
+
+Helix Canvas draws a board of cards and the connections between them. People
+pan and zoom the board, move and resize cards, draw connections, and walk the
+board in reading order from the keyboard. The board reads and writes
+[JSON Canvas](https://jsoncanvas.org), an open format.
+
+## Add a board
+
+Write each card as a \`helix-canvas-node\` and each connection as a
+\`helix-canvas-edge\`. A card's \`x\`, \`y\`, \`width\`, and \`height\` are in the
+document's own units, and a connection names its two cards by \`name\`:
+
+\`\`\`html
+<helix-canvas label="Launch plan">
+  <helix-canvas-node name="draft" x="0" y="0" width="160" height="64">Draft the email</helix-canvas-node>
+  <helix-canvas-node name="ship" tone="success" x="256" y="0" width="160" height="64">Publish the release</helix-canvas-node>
+  <helix-canvas-edge from="draft" to="ship"></helix-canvas-edge>
+</helix-canvas>
+\`\`\`
+
+\`\`\`js
+import '@fusion.dev/helix/canvas'
+\`\`\`
+
+Give the board a \`label\` that says what it holds. A screen reader announces it
+as "Launch plan, canvas".
+
+## Load and save a document
+
+\`fromJsonCanvas\` turns a JSON Canvas document into the props of the elements.
+What a card shows is yours to render, so this example writes each text card's
+text:
+
+\`\`\`js
+import { fromJsonCanvas } from '@fusion.dev/helix/canvas'
+
+const board = document.querySelector('helix-canvas')
+const { nodes, edges } = fromJsonCanvas(saved)
+for (const node of nodes) {
+  const card = document.createElement('helix-canvas-node')
+  const { group, height, label, name, tone, width, x, y } = node
+  Object.assign(card, { group, height, label, name, tone, width, x, y })
+  card.textContent = node.text ?? ''
+  board.append(card)
+}
+for (const edge of edges) {
+  const line = document.createElement('helix-canvas-edge')
+  const { from, fromSide, label, name, to, toSide, tone } = edge
+  Object.assign(line, { from, fromSide, label, name, to, toSide, tone })
+  board.append(line)
+}
+\`\`\`
+
+\`board.toJsonCanvas()\` writes the board back out as a JSON Canvas document.
+
+## Keep the board in your state
+
+The board moves a card itself and sends \`helix-move\` when the move is finished.
+To keep positions in your own state, cancel \`helix-before-move\` and write the
+positions from its detail:
+
+\`\`\`js
+board.addEventListener('helix-before-move', (event) => {
+  event.preventDefault()
+  for (const { name, x, y } of event.detail.nodes) {
+    const card = board.querySelector(\`[name="\${name}"]\`)
+    card.x = x
+    card.y = y
+  }
+})
+\`\`\`
+
+Connecting and removing are requests that your page applies, because a new
+connection is a new element:
+
+- \`helix-connect\` names two cards and their sides. Add a \`helix-canvas-edge\`
+  that joins them.
+- \`helix-remove\` names the cards and connections to remove, including every
+  connection that removing a card would leave without an end. Remove those
+  elements.
+- \`helix-canvas-edit\` asks you to edit a card. Open your own editor in it.
+
+Set \`readonly\` on the board to keep every card in place, or on one card or
+connection to keep only that one.
+
+## Keyboard and screen readers
+
+The board is one tab stop. A card holds it, and Tab leaves the board.
+
+| Keys | On | What they do |
+|---|---|---|
+| Arrow keys | A card or a connection | Move through the cards in reading order, each card's connections straight after it, and select what they land on |
+| Home, End | A card or a connection | Move to the first or the last stop |
+| Control or Command with an arrow key, Home, or End | A card or a connection | Move without changing the selection |
+| Space | A card or a connection | Add it to the selection or take it out |
+| Control or Command with A | A card or a connection | Select everything |
+| Shift with an arrow key | A card | Move the card by 16 units, or to the next multiple of \`snap\` |
+| Alt with an arrow key | A card | Resize the card from its bottom right corner |
+| Enter or F2 | A card | Ask to edit it, with \`helix-canvas-edit\`, or edit a group's name |
+| Enter | A connection | Move to the card it arrives at |
+| F2 | A connection | Edit its label |
+| C, then Enter on another card | A card | Ask to connect the two, with \`helix-connect\` |
+| C | A connection | Pick up its end, to move it to another card with Enter |
+| Delete or Backspace | A card or a connection | Ask to remove what is selected, with \`helix-remove\` |
+| Control or Command with C, V | The board | Copy the selected cards as JSON Canvas, and paste a document |
+| Control or Command with Z | The board | Undo the last move or resize. With Shift, or Control with Y, make it again |
+| Plus, minus | The board, a card, or a connection | Zoom in or out |
+| Escape | A card or a connection | Stop connecting, or go out to the board |
+| Arrow keys | The board, after Escape | Pan the board |
+
+Every drag also works with clicks. Click a selected card's move handle, a
+corner, a card's connection point, or the end of a selected connection to pick
+it up, then click where it goes. Escape puts it back.
+
+Screen readers meet these roles and names:
+
+| Part | Role | Named by |
+|---|---|---|
+| The board | \`group\`, described as "canvas" | \`label\` |
+| A card | \`article\` | Its content, or its \`label\` |
+| A group card | \`group\` | Its \`label\` |
+| A connection | \`button\` | "From Draft to Ship", from \`connection-label\` |
+| The controls | \`group\` | "Board controls", from \`controls-label\` |
+| What changed | \`status\` | The board's own words |
+
+A card is also described by its connections, such as "leads to Ship", and by
+whether it is selected and what its tone means, from \`tone-labels\`. After a key
+moves, resizes, selects, copies, pastes, undoes, or zooms, screen readers hear
+what changed, such as "Ship moved to 16, 200". Each sentence is a \`-label\`
+property, so you can write it in your page's language, or register the words
+for a language with \`registerWords\` (see [Localization](./localization)).
+
+When your page removes the card that has focus, focus moves to the next stop,
+or to the one before when it was the last.
 `,
     charting: `---
 description: Which chart to use, and how charts read their data from a table in the document.
@@ -2176,9 +2318,16 @@ leaves removing it to your framework.
   whose name starts with 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.
+- The legend is a toolbar and one tab stop. Arrow keys, Home, and End move
+  between its groups, typing a letter moves to the next group whose name
+  starts with it, and Space or Enter shows or hides a group.
 - Screen readers read the selected note first, then how each other note links
   to it, such as "Linked from Roadmap". They hear the count when a search or
   the legend changes it.
+- When you select a note, in the list or in the drawing, screen readers hear
+  its name and how many notes the list holds, such as "Roadmap, selected. 4
+  notes", from \`selection-label\`. A selection your page writes to \`active\` is
+  not said.
 - After the arrow keys, plus, minus, or the buttons move the drawing, screen
   readers hear which way it went, such as "Moved right" or "Zoomed in".
   \`connectGraph\` tells the frame once the drawing has moved. If you answer
@@ -2187,6 +2336,7 @@ leaves removing it to your framework.
 - When you change \`nodes\` or \`links\`, the list keeps the note the keys are on.
   When that note is removed, the keys move to the note that took its row.
 - Change the words with \`search-label\`, \`count-label\`, \`selected-label\`,
+  \`selection-label\`,
   \`links-to-label\`, \`linked-from-label\`, \`linked-both-label\`,
   \`moved-up-label\`, \`moved-down-label\`, \`moved-left-label\`,
   \`moved-right-label\`, \`zoomed-in-label\`, and \`zoomed-out-label\`, or register
@@ -3788,28 +3938,169 @@ compass sets \`--map-needle-turn\` to the angle that points north, so an icon in
 
 ## Write a driver
 
-To use another renderer, write a driver: an object with two methods.
-
-- \`panBy(x, y, motion)\` moves the map by a number of pixels.
-- \`zoomBy(direction, motion)\` zooms in for \`1\` and out for \`-1\`.
+To use another renderer, write a driver: an object that moves the renderer's
+view when the frame asks, and tells the frame when the view moved. \`connectMap\`
+calls it. \`mapLibreDriver\` and \`leafletDriver\` are drivers, and the \`MapDriver\`
+type in \`@fusion.dev/helix-map\` describes every method.
 
-\`motion\` is your theme's \`{ duration, easing }\`, or \`null\` to move without
-animation. Each optional method turns on a feature:
+### Units
 
-| Method | Turns on |
+| Quantity | Unit |
 |---|---|
-| \`project\`, \`onView\` | Placing markers and positions |
-| \`show\` | Bringing a focused marker into view |
-| \`fit\` | \`connection.fit()\` and zooming in to clusters |
-| \`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, and the Face north arrow |
-| \`rotate\`, \`tilt\` | The rotate, Face north, and tilt buttons and keys |
-| \`zoom\` | Saying the zoom level after a zoom |
-
-Without \`project\`, markers stay hidden. To animate a move your page makes
-itself, read the same motion with \`motionOf(element, pace)\`.
+| A place | \`{ lat, lng }\` in degrees |
+| A position on screen | CSS pixels from the top left of the renderer's box, right and down positive |
+| Bearing | Degrees clockwise from north |
+| Tilt | Degrees from looking straight down, \`0\` being flat |
+| Zoom | The renderer's own levels |
+| Motion | \`{ duration, easing }\`, where \`duration\` is in milliseconds and \`easing(t)\` maps 0 to 1 onto 0 to 1, or \`null\` |
+
+\`motion\` comes from your theme's motion tokens. It is \`null\` when the user has
+asked for reduced motion, and the driver then moves at once.
+
+### Required methods
+
+- \`panBy(x, y, motion)\` moves the view by \`x\` and \`y\` CSS pixels. The frame
+  asks for a fraction of its own box, so an arrow key moves the map by the same
+  share of the screen at every zoom. On a right-to-left page, \`connectMap\`
+  turns the frame's start and end into left and right before it calls the
+  driver.
+- \`zoomBy(direction, motion)\` zooms one step in, for \`1\`, or out, for \`-1\`. A
+  step is whatever the renderer calls one, usually one level.
+
+### Optional methods
+
+Each optional method turns on a feature. Without it, the feature is off and
+nothing fails.
+
+| Method | When \`connectMap\` calls it | What it must do | Turns on |
+|---|---|---|---|
+| \`onView(moved)\` | Once, at connect | Call \`moved\` on every frame the view moves, and return a function that stops | Markers that follow the map, and the announcements after a move |
+| \`project(place)\` | On every view change, for each marker | Return where \`place\` falls, in CSS pixels | Placing markers and positions. Without it, markers stay hidden |
+| \`zoom()\` | After each view change | Return the zoom | Saying "Zoom level 14" after a zoom |
+| \`bearing()\`, \`pitch()\` | After each view change | Return the bearing and the tilt | The compass needle, the 3D button's pressed state, and arrows that stay correct on a turned map |
+| \`rotate({ by, to }, motion)\` | On the rotate buttons, Face north, and Shift with Left or Right | Turn by \`by\` degrees, or to the bearing \`to\` | Rotating |
+| \`tilt({ by, to }, motion)\` | On the 3D button, and Shift with Up or Down | Tilt by \`by\` degrees, or to \`to\` | Tilting |
+| \`show(place, motion)\` | When the keyboard reaches a marker that is off screen | Bring \`place\` to the middle of the view, at \`place.zoom\` where it has one | Walking markers off screen |
+| \`fit(bounds, padding, motion)\` | On \`connection.fit()\`, and on a press on a cluster | Frame the \`northEast\` and \`southWest\` corners, inset by \`padding\` pixels | \`connection.fit()\` and zooming in to clusters |
+| \`silenceKeyboard()\` | Once, at connect | Turn off the renderer's own keys, and return a function that turns them back on | One set of keys |
+| \`focusTarget()\` | Once, at connect | Return the element the renderer made focusable | One tab stop. \`connectMap\` sets its \`tabindex\` to \`-1\` and puts it back on disconnect |
+| \`replaceZoom()\` | Once the frame has drawn its zoom buttons | Remove the renderer's zoom buttons, and return a function that puts them back | One set of zoom buttons |
+| \`credits(changed)\` | Once, at connect | Return \`read()\`, the credits as markup, and \`stop()\`; call \`changed\` when they change | The map credit in the frame's footer |
+| \`ready(done)\` | Once, at connect | Call \`done\` when the view is drawn whole, and return a function that stops waiting | \`helix-map-ready\` and \`:state(ready)\` |
+| \`gestures(mode)\` | When the frame's \`gestures\` changes | Take the wheel and touches as \`free\`, \`cooperative\`, or \`off\` says | Sharing the scroll with the page |
+| \`layers(read, events)\` | Once, at connect | Draw \`read()\`, and draw it again on \`update()\` | Routes, areas, points, and tile layers |
+| \`labels(shown)\` | When the map type changes | Show or hide the renderer's own roads and names | The Satellite map type |
+| \`previews(ask)\` | When the layers menu opens after the view moved | Resolve to an image URL for each map type | Pictures in the layers menu |
+| \`behind(place)\` | With \`project\` | Return \`true\` for a place on the far side of a globe | Hiding markers behind a globe |
+
+\`connection.disconnect()\` calls every function a method returned, gives the
+renderer its gestures back with \`gestures('free')\`, takes the markers off their
+places, puts the focus target's \`tabindex\` back as it was, and stops listening
+to the frame. Call it before you remove the renderer.
+
+### How the frame says a move
+
+The frame's keys and buttons only ask. The frame says "Moved left" or "Zoom
+level 14" after the driver calls the \`moved\` it gave to \`onView\`, and once the
+view has been still for a moment. A driver without \`onView\` never makes the
+frame speak, so the frame never describes a move that did not happen.
+
+### Example
+
+This driver shows a plan drawn as one image, such as a floor plan, whose edges
+are at known latitudes and longitudes. It moves the image with a CSS transform,
+places markers, and animates over the page's motion. The same driver runs in
+our specs, so this example stays correct.
+
+\`\`\`js
+import { connectMap } from '@fusion.dev/helix-map'
+
+const planDriver = (image, plan) => {
+  const view = { scale: 1, x: 0, y: 0 }
+  const listeners = new Set()
+  let moving = 0
+
+  const draw = () => {
+    image.style.transformOrigin = '0 0'
+    image.style.transform = \`translate(\${view.x}px, \${view.y}px) scale(\${view.scale})\`
+    for (const moved of listeners) {
+      moved()
+    }
+  }
+
+  // Moves the view to \`next\` over the page's motion, or at once where it is null.
+  const go = (next, motion) => {
+    const run = ++moving
+    if (!motion || motion.duration <= 0) {
+      Object.assign(view, next)
+      draw()
+      return
+    }
+    const from = { ...view }
+    const start = performance.now()
+    const step = (now) => {
+      if (run !== moving) {
+        return
+      }
+      const t = Math.min(1, (now - start) / motion.duration)
+      const k = motion.easing(t)
+      view.x = from.x + (next.x - from.x) * k
+      view.y = from.y + (next.y - from.y) * k
+      view.scale = from.scale + (next.scale - from.scale) * k
+      draw()
+      if (t < 1) {
+        requestAnimationFrame(step)
+      }
+    }
+    requestAnimationFrame(step)
+  }
+
+  return {
+    onView: (moved) => {
+      listeners.add(moved)
+      return () => listeners.delete(moved)
+    },
+    panBy: (x, y, motion) => go({ ...view, x: view.x - x, y: view.y - y }, motion),
+    project: ({ lat, lng }) => ({
+      x: view.x + ((lng - plan.west) / (plan.east - plan.west)) * plan.width * view.scale,
+      y: view.y + ((plan.north - lat) / (plan.north - plan.south)) * plan.height * view.scale,
+    }),
+    zoom: () => Math.log2(view.scale),
+    zoomBy: (direction, motion) => {
+      const box = image.parentElement.getBoundingClientRect()
+      const k = direction > 0 ? 2 : 0.5
+      const [cx, cy] = [box.width / 2, box.height / 2]
+      go({ scale: view.scale * k, x: cx - (cx - view.x) * k, y: cy - (cy - view.y) * k }, motion)
+    },
+  }
+}
+
+const frame = document.querySelector('helix-map')
+const connection = connectMap(
+  frame,
+  planDriver(frame.querySelector('img'), {
+    east: 0.004,
+    height: 600,
+    north: 51.502,
+    south: 51.5,
+    west: 0,
+    width: 800,
+  }),
+)
+\`\`\`
+
+\`width\` and \`height\` are the image's size in CSS pixels at zoom \`0\`. To animate
+a move your page makes itself, read the same motion with
+\`motionOf(element, pace)\`.
+
+### Test a driver
+
+Our specs test each driver twice. A stand-in renderer records what the driver
+asks it, which runs anywhere. Then the browser specs connect a frame to the real
+MapLibre and Leaflet with a style that loads nothing, press the frame's keys and
+buttons, and check that the view moved and that the frame said so. Test your
+driver the same way: connect it to a frame, press a key on the frame's \`region\`
+part, and wait for the \`live\` part to say the move.
 `,
     metrics: `---
 description: How much Helix adds to a page, measured from the built packages.
@@ -3859,7 +4150,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 248,690 | 77,760 | 66,584 |
+| Lit and \`@fusion.dev/helix-core\` | 249,985 | 78,265 | 67,056 |
 
 ## Whole packages
 
@@ -3870,12 +4161,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 247,899 | 77,582 | 66,267 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,363,815 | 369,657 | 276,784 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 249,194 | 78,054 | 66,758 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,368,237 | 371,024 | 277,785 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
 | \`fusion_helix_theme_bg.wasm\` | 490,971 | 155,905 | 125,923 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,078,222 | 515,607 | 365,735 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,083,183 | 517,203 | 366,564 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -3896,13 +4187,13 @@ 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 17,735 bytes gzipped alone, and it adds 3,860 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 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 17,254 bytes gzipped alone, and it adds 3,839 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 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 105 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 81,126. Every family together is 515,607.
+Across the 105 styled components, the smallest is \`code\` at 8,472 bytes gzipped alone, and the largest is \`data-table\` at 80,953. Every family together is 517,203.
 
-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 369,657 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 105 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 371,024 bytes gzipped, whatever else the page imports. That is 22 times the median family above. All 105 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 16,812 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 16,540 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -3914,32 +4205,32 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 45,416 | 15,062 | 13,427 |
+| \`button\` | **Helix** | 43,933 | 14,538 | 12,956 |
 | | 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** | 49,014 | 15,669 | 13,995 |
+| \`checkbox\` | **Helix** | 47,530 | 15,121 | 13,473 |
 | | 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** | 46,626 | 15,892 | 14,154 |
+| \`dialog\` | **Helix** | 45,141 | 15,337 | 13,680 |
 | | 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** | 53,541 | 16,539 | 14,734 |
+| \`radio\` | **Helix** | 52,058 | 15,999 | 14,201 |
 | | 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** | 45,727 | 15,127 | 13,486 |
+| \`switch\` | **Helix** | 44,243 | 14,585 | 12,983 |
 | | 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** | 60,663 | 19,011 | 16,874 |
+| \`tabs\` | **Helix** | 59,178 | 18,452 | 16,403 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Shoelace | 54,573 | 17,140 | 15,068 |
@@ -3950,7 +4241,7 @@ The table has no whole-library row. That row would compare how many components e
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is tabs against Material Web, at 6,191 bytes gzipped. 16 of 27 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is tabs against Material Web, at 5,632 bytes gzipped. 12 of 27 peer measurements are smaller than the Helix row.
 
 Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
 
@@ -3996,104 +4287,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\` | 32,745 | 11,983 | 10,615 | 6,019 | 1,768 | 1,315 |
-| \`announcement\` | 38,688 | 14,000 | 12,523 | 5,014 | 1,567 | 1,167 |
-| \`app-header\` | 34,283 | 12,590 | 11,169 | 6,204 | 1,899 | 1,328 |
-| \`area-chart\` | 91,007 | 31,647 | 28,019 | 14,707 | 4,512 | 3,589 |
-| \`avatar\` | 31,417 | 11,890 | 10,607 | 4,588 | 1,381 | 1,053 |
-| \`badge\` | 26,985 | 10,575 | 9,439 | 3,276 | 1,054 | 803 |
-| \`bar-chart\` | 93,972 | 32,488 | 28,757 | 17,525 | 5,307 | 4,166 |
-| \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,053 | 761 |
-| \`breadcrumbs\` | 37,187 | 14,184 | 12,614 | 8,000 | 2,591 | 2,027 |
-| \`button\` | 38,294 | 13,620 | 12,214 | 5,229 | 1,611 | 1,132 |
-| \`button-group\` | 27,883 | 10,537 | 9,328 | 5,322 | 1,714 | 1,198 |
-| \`callout\` | 36,184 | 13,854 | 12,291 | 3,217 | 1,126 | 826 |
-| \`canvas\` | 109,942 | 35,061 | 30,623 | 69,740 | 21,207 | 17,602 |
-| \`card\` | 23,959 | 9,173 | 8,113 | 2,422 | 787 | 423 |
-| \`carousel\` | 43,284 | 15,475 | 13,782 | 15,311 | 4,314 | 3,264 |
-| \`chat\` | 80,299 | 26,454 | 23,386 | 28,478 | 8,288 | 6,439 |
-| \`checkbox\` | 42,185 | 14,168 | 12,640 | 3,391 | 1,099 | 678 |
-| \`checkbox-group\` | 49,740 | 16,116 | 14,395 | 8,941 | 2,513 | 1,715 |
-| \`code\` | 20,483 | 8,144 | 7,222 | 466 | 236 | 192 |
-| \`code-block\` | 106,283 | 35,526 | 31,385 | 38,282 | 10,948 | 8,752 |
-| \`color-input\` | 145,309 | 45,564 | 39,725 | 56,972 | 14,702 | 11,789 |
-| \`color-picker\` | 105,874 | 33,345 | 29,134 | 48,468 | 12,971 | 10,332 |
-| \`combobox\` | 139,109 | 43,088 | 37,839 | 40,531 | 10,027 | 7,814 |
-| \`command\` | 106,034 | 32,615 | 28,623 | 35,072 | 9,143 | 7,250 |
-| \`copy-button\` | 84,961 | 28,726 | 25,446 | 19,635 | 5,175 | 3,995 |
-| \`data-table\` | 208,879 | 62,482 | 53,383 | 97,585 | 25,228 | 20,158 |
-| \`date-input\` | 144,106 | 44,576 | 39,175 | 38,523 | 9,504 | 7,512 |
-| \`date-picker\` | 61,849 | 20,929 | 18,761 | 20,319 | 5,598 | 4,303 |
-| \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 698 | 476 |
-| \`dialog\` | 41,146 | 14,623 | 12,994 | 6,219 | 1,913 | 1,367 |
-| \`divider\` | 23,173 | 9,044 | 8,008 | 1,745 | 659 | 467 |
-| \`donut-chart\` | 88,261 | 30,734 | 27,201 | 14,884 | 4,496 | 3,588 |
-| \`drawer\` | 45,790 | 16,148 | 14,371 | 8,080 | 2,463 | 1,889 |
-| \`drilldown\` | 44,814 | 15,590 | 13,895 | 10,162 | 2,824 | 2,137 |
-| \`empty\` | 24,376 | 9,367 | 8,289 | 2,282 | 803 | 523 |
-| \`file-input\` | 59,249 | 20,257 | 17,994 | 13,726 | 4,276 | 3,290 |
-| \`filter-input\` | 96,953 | 32,080 | 28,460 | 19,508 | 5,484 | 4,198 |
-| \`format-date\` | 30,056 | 11,305 | 10,099 | 4,769 | 1,419 | 1,041 |
-| \`graph\` | 69,368 | 22,845 | 20,296 | 18,116 | 5,536 | 4,390 |
-| \`heatmap\` | 95,438 | 32,614 | 28,798 | 17,395 | 5,033 | 3,846 |
-| \`icon\` | 31,354 | 11,873 | 10,459 | 8,833 | 3,013 | 2,226 |
-| \`icon-button\` | 38,731 | 13,658 | 12,177 | 5,666 | 1,670 | 1,183 |
-| \`image\` | 25,686 | 9,596 | 8,498 | 4,159 | 1,301 | 941 |
-| \`input\` | 48,634 | 16,661 | 14,691 | 7,688 | 2,549 | 1,781 |
-| \`kbd\` | 27,537 | 10,603 | 9,364 | 3,825 | 1,258 | 828 |
-| \`legend\` | 34,902 | 12,915 | 11,476 | 3,289 | 1,150 | 873 |
-| \`lightbox\` | 57,264 | 19,108 | 16,935 | 17,408 | 4,849 | 3,557 |
-| \`line-chart\` | 92,042 | 31,812 | 28,228 | 15,412 | 4,573 | 3,613 |
-| \`list\` | 62,852 | 21,627 | 19,299 | 15,975 | 4,654 | 3,535 |
-| \`listbox\` | 82,406 | 26,536 | 23,468 | 19,854 | 5,538 | 4,236 |
-| \`loader\` | 27,624 | 10,571 | 9,381 | 2,682 | 972 | 630 |
-| \`map\` | 82,956 | 25,077 | 21,806 | 40,792 | 10,629 | 8,239 |
-| \`megamenu\` | 60,537 | 21,791 | 19,316 | 8,929 | 2,526 | 1,685 |
-| \`menu\` | 105,284 | 34,851 | 30,782 | 33,419 | 8,662 | 6,980 |
-| \`meter\` | 32,441 | 12,317 | 10,985 | 5,291 | 1,610 | 1,290 |
-| \`navigation\` | 34,753 | 13,102 | 11,627 | 3,696 | 1,327 | 951 |
-| \`notifications\` | 60,012 | 19,977 | 17,770 | 18,781 | 5,042 | 3,985 |
-| \`number-input\` | 57,454 | 19,134 | 17,075 | 13,860 | 3,753 | 2,824 |
-| \`object-inspector\` | 117,096 | 38,878 | 34,183 | 37,093 | 10,508 | 8,301 |
-| \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,394 | 1,049 |
-| \`outline\` | 35,323 | 13,262 | 11,792 | 8,200 | 2,721 | 1,962 |
-| \`pagination\` | 139,794 | 43,807 | 38,099 | 47,844 | 12,136 | 9,547 |
-| \`pin-input\` | 48,309 | 16,697 | 14,891 | 7,048 | 2,341 | 1,721 |
-| \`popover\` | 65,839 | 23,559 | 20,899 | 6,748 | 2,022 | 1,461 |
-| \`progress\` | 28,742 | 11,015 | 9,783 | 3,305 | 1,076 | 756 |
-| \`qr-code\` | 43,379 | 16,926 | 15,075 | 17,336 | 6,513 | 5,385 |
-| \`quote\` | 22,698 | 9,004 | 7,945 | 1,539 | 704 | 493 |
-| \`radio\` | 45,040 | 15,003 | 13,371 | 4,432 | 1,380 | 929 |
-| \`rating\` | 51,294 | 17,519 | 15,606 | 8,141 | 2,512 | 1,748 |
-| \`scatter-chart\` | 91,677 | 31,544 | 27,873 | 16,469 | 4,921 | 3,852 |
-| \`scroll-area\` | 30,549 | 11,169 | 9,898 | 8,810 | 2,707 | 2,126 |
-| \`select\` | 121,666 | 39,277 | 34,376 | 30,668 | 8,126 | 6,175 |
-| \`skeleton\` | 22,510 | 8,765 | 7,771 | 1,321 | 540 | 297 |
-| \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,553 | 627 | 344 |
-| \`slider\` | 54,135 | 18,111 | 16,204 | 13,495 | 3,950 | 2,984 |
-| \`sparkline\` | 47,807 | 17,537 | 15,632 | 6,103 | 2,208 | 1,652 |
-| \`speed-dial\` | 71,335 | 25,366 | 22,527 | 11,841 | 3,135 | 2,311 |
-| \`splitter\` | 44,408 | 15,452 | 13,790 | 14,732 | 3,984 | 3,111 |
-| \`stat\` | 25,480 | 9,707 | 8,601 | 2,962 | 937 | 628 |
-| \`steps\` | 56,704 | 19,395 | 17,259 | 14,578 | 4,081 | 3,101 |
-| \`switch\` | 41,039 | 13,981 | 12,476 | 1,963 | 737 | 415 |
-| \`table\` | 120,335 | 37,107 | 32,243 | 46,796 | 12,752 | 10,131 |
-| \`tabs\` | 50,666 | 17,118 | 15,240 | 11,170 | 2,985 | 2,252 |
-| \`tag\` | 44,780 | 16,253 | 14,510 | 9,054 | 2,668 | 1,952 |
-| \`textarea\` | 46,124 | 15,614 | 13,909 | 5,738 | 1,772 | 1,170 |
-| \`time-input\` | 173,070 | 52,833 | 45,831 | 49,682 | 12,560 | 9,888 |
-| \`time-picker\` | 101,533 | 31,655 | 27,793 | 34,757 | 9,328 | 7,221 |
-| \`timeline\` | 32,605 | 12,200 | 10,862 | 5,055 | 1,391 | 987 |
-| \`toast\` | 52,128 | 18,240 | 16,244 | 12,791 | 3,690 | 2,803 |
-| \`toggle\` | 46,641 | 15,299 | 13,635 | 6,703 | 2,029 | 1,421 |
-| \`toolbar\` | 32,712 | 12,211 | 10,876 | 5,487 | 1,814 | 1,302 |
-| \`tooltip\` | 59,114 | 21,174 | 18,859 | 8,757 | 2,493 | 1,928 |
-| \`tour\` | 86,798 | 29,409 | 25,984 | 20,827 | 5,728 | 4,387 |
-| \`tree\` | 69,456 | 23,081 | 20,513 | 17,795 | 5,165 | 4,025 |
-| \`trend\` | 30,375 | 11,863 | 10,580 | 3,822 | 1,253 | 864 |
-| \`video\` | 146,529 | 45,265 | 39,490 | 69,861 | 17,635 | 14,290 |
-| \`video-playlist\` | 133,933 | 42,448 | 37,323 | 47,019 | 11,995 | 9,574 |
-| \`virtual-list\` | 60,387 | 20,621 | 18,356 | 21,141 | 6,508 | 5,206 |
+| \`accordion\` | 32,745 | 11,983 | 10,621 | 6,019 | 1,752 | 1,193 |
+| \`announcement\` | 37,203 | 13,437 | 11,960 | 5,014 | 1,547 | 1,085 |
+| \`app-header\` | 32,800 | 12,032 | 10,689 | 6,204 | 1,887 | 1,406 |
+| \`area-chart\` | 91,684 | 31,814 | 28,138 | 14,689 | 4,476 | 3,404 |
+| \`avatar\` | 30,980 | 11,730 | 10,491 | 4,627 | 1,379 | 940 |
+| \`badge\` | 27,270 | 10,682 | 9,487 | 3,276 | 1,042 | 695 |
+| \`bar-chart\` | 94,648 | 32,661 | 28,887 | 17,507 | 5,292 | 4,108 |
+| \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,024 | 590 |
+| \`breadcrumbs\` | 36,711 | 14,014 | 12,516 | 8,000 | 2,571 | 1,894 |
+| \`button\` | 36,808 | 13,084 | 11,650 | 5,229 | 1,599 | 1,008 |
+| \`button-group\` | 27,883 | 10,537 | 9,328 | 5,322 | 1,685 | 1,164 |
+| \`callout\` | 35,706 | 13,688 | 12,136 | 3,217 | 1,111 | 751 |
+| \`canvas\` | 109,730 | 34,968 | 30,562 | 70,004 | 21,236 | 17,566 |
+| \`card\` | 23,959 | 9,173 | 8,113 | 2,422 | 767 | 416 |
+| \`carousel\` | 42,808 | 15,297 | 13,659 | 15,311 | 4,275 | 3,248 |
+| \`chat\` | 79,823 | 26,288 | 23,259 | 28,478 | 8,264 | 6,410 |
+| \`checkbox\` | 40,700 | 13,631 | 12,154 | 3,391 | 1,096 | 547 |
+| \`checkbox-group\` | 48,257 | 15,584 | 13,912 | 8,941 | 2,519 | 1,746 |
+| \`code\` | 20,483 | 8,146 | 7,235 | 466 | 232 | -2 |
+| \`code-block\` | 105,805 | 35,359 | 31,190 | 38,281 | 10,919 | 8,573 |
+| \`color-input\` | 144,833 | 45,391 | 39,581 | 56,972 | 14,692 | 11,724 |
+| \`color-picker\` | 105,398 | 33,173 | 29,047 | 48,468 | 12,937 | 10,266 |
+| \`combobox\` | 138,652 | 42,926 | 37,710 | 40,551 | 10,021 | 7,760 |
+| \`command\` | 105,558 | 32,443 | 28,490 | 35,072 | 9,121 | 7,159 |
+| \`copy-button\` | 83,474 | 28,192 | 24,972 | 19,635 | 5,177 | 3,868 |
+| \`data-table\` | 208,407 | 62,308 | 53,145 | 97,585 | 25,249 | 19,981 |
+| \`date-input\` | 143,652 | 44,428 | 39,012 | 38,543 | 9,503 | 7,477 |
+| \`date-picker\` | 61,377 | 20,763 | 18,588 | 20,319 | 5,572 | 4,195 |
+| \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 663 | 386 |
+| \`dialog\` | 39,660 | 14,075 | 12,485 | 6,219 | 1,895 | 1,304 |
+| \`divider\` | 23,173 | 9,044 | 8,008 | 1,745 | 640 | 416 |
+| \`donut-chart\` | 90,591 | 31,236 | 27,691 | 15,268 | 4,657 | 3,636 |
+| \`drawer\` | 44,304 | 15,612 | 13,853 | 8,080 | 2,463 | 1,825 |
+| \`drilldown\` | 43,328 | 15,038 | 13,350 | 10,162 | 2,818 | 1,954 |
+| \`empty\` | 24,376 | 9,368 | 8,289 | 2,282 | 783 | 457 |
+| \`file-input\` | 58,793 | 20,112 | 17,827 | 13,746 | 4,248 | 3,272 |
+| \`filter-input\` | 96,474 | 31,917 | 28,269 | 19,508 | 5,479 | 4,185 |
+| \`format-date\` | 30,340 | 11,408 | 10,201 | 4,769 | 1,382 | 877 |
+| \`graph\` | 72,038 | 23,773 | 21,085 | 18,971 | 5,747 | 4,418 |
+| \`heatmap\` | 95,882 | 32,715 | 28,893 | 17,554 | 5,064 | 3,834 |
+| \`icon\` | 31,354 | 11,873 | 10,467 | 8,833 | 3,007 | 2,252 |
+| \`icon-button\` | 37,247 | 13,128 | 11,726 | 5,666 | 1,661 | 1,118 |
+| \`image\` | 25,686 | 9,596 | 8,498 | 4,159 | 1,280 | 787 |
+| \`input\` | 47,149 | 16,122 | 14,209 | 7,688 | 2,551 | 1,803 |
+| \`kbd\` | 27,537 | 10,604 | 9,364 | 3,825 | 1,234 | 776 |
+| \`legend\` | 35,366 | 13,053 | 11,629 | 3,289 | 1,132 | 743 |
+| \`lightbox\` | 56,786 | 18,937 | 16,839 | 17,408 | 4,847 | 3,421 |
+| \`line-chart\` | 92,719 | 31,985 | 28,300 | 15,394 | 4,567 | 3,555 |
+| \`list\` | 62,376 | 21,453 | 19,146 | 15,975 | 4,621 | 3,467 |
+| \`listbox\` | 81,930 | 26,368 | 23,313 | 19,854 | 5,533 | 4,144 |
+| \`loader\` | 26,561 | 10,165 | 9,002 | 3,105 | 1,098 | 673 |
+| \`map\` | 82,476 | 24,898 | 21,673 | 40,792 | 10,620 | 8,107 |
+| \`megamenu\` | 60,537 | 21,791 | 19,316 | 8,929 | 2,517 | 1,698 |
+| \`menu\` | 104,806 | 34,690 | 30,606 | 33,419 | 8,641 | 6,760 |
+| \`meter\` | 31,965 | 12,146 | 10,878 | 5,291 | 1,600 | 1,143 |
+| \`navigation\` | 33,270 | 12,546 | 11,147 | 3,696 | 1,299 | 881 |
+| \`notifications\` | 59,536 | 19,809 | 17,632 | 18,781 | 5,008 | 3,761 |
+| \`number-input\` | 56,978 | 18,967 | 16,900 | 13,860 | 3,741 | 2,664 |
+| \`object-inspector\` | 116,618 | 38,694 | 34,093 | 37,093 | 10,495 | 8,235 |
+| \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,398 | 941 |
+| \`outline\` | 33,838 | 12,725 | 11,296 | 8,200 | 2,703 | 1,890 |
+| \`pagination\` | 139,318 | 43,647 | 37,911 | 47,844 | 12,105 | 9,295 |
+| \`pin-input\` | 47,831 | 16,523 | 14,799 | 7,048 | 2,354 | 1,600 |
+| \`popover\` | 64,354 | 23,048 | 20,379 | 6,748 | 2,019 | 1,278 |
+| \`progress\` | 28,266 | 10,847 | 9,665 | 3,305 | 1,066 | 736 |
+| \`qr-code\` | 42,901 | 16,762 | 14,927 | 17,336 | 6,488 | 5,275 |
+| \`quote\` | 22,698 | 9,005 | 7,944 | 1,539 | 680 | 297 |
+| \`radio\` | 43,556 | 14,464 | 12,839 | 4,432 | 1,370 | 793 |
+| \`rating\` | 51,043 | 17,408 | 15,502 | 8,367 | 2,569 | 1,792 |
+| \`scatter-chart\` | 92,662 | 31,811 | 28,148 | 16,759 | 5,000 | 3,762 |
+| \`scroll-area\` | 30,549 | 11,169 | 9,879 | 8,810 | 2,705 | 1,954 |
+| \`select\` | 122,566 | 39,270 | 34,452 | 32,039 | 8,293 | 6,177 |
+| \`skeleton\` | 22,510 | 8,766 | 7,771 | 1,321 | 539 | 217 |
+| \`skip-link\` | 24,054 | 9,460 | 8,363 | 1,553 | 607 | 361 |
+| \`slider\` | 53,659 | 17,942 | 16,079 | 13,495 | 3,937 | 2,857 |
+| \`sparkline\` | 48,052 | 17,558 | 15,663 | 6,289 | 2,251 | 1,720 |
+| \`speed-dial\` | 69,853 | 24,833 | 22,034 | 11,841 | 3,124 | 2,280 |
+| \`splitter\` | 43,932 | 15,278 | 13,664 | 14,732 | 3,974 | 3,038 |
+| \`stat\` | 25,766 | 9,817 | 8,715 | 2,962 | 919 | 588 |
+| \`steps\` | 56,226 | 19,220 | 17,062 | 14,578 | 4,061 | 3,094 |
+| \`switch\` | 39,558 | 13,455 | 11,993 | 1,963 | 727 | 286 |
+| \`table\` | 119,860 | 36,938 | 32,130 | 46,795 | 12,723 | 10,067 |
+| \`tabs\` | 49,181 | 16,557 | 14,714 | 11,170 | 2,981 | 2,161 |
+| \`tag\` | 44,369 | 16,108 | 14,374 | 9,122 | 2,692 | 1,890 |
+| \`textarea\` | 44,640 | 15,082 | 13,424 | 5,738 | 1,756 | 1,154 |
+| \`time-input\` | 172,613 | 52,676 | 45,706 | 49,702 | 12,559 | 9,749 |
+| \`time-picker\` | 101,057 | 31,471 | 27,721 | 34,757 | 9,326 | 7,119 |
+| \`timeline\` | 32,129 | 12,023 | 10,752 | 5,055 | 1,392 | 857 |
+| \`toast\` | 51,650 | 18,074 | 16,034 | 12,791 | 3,677 | 2,762 |
+| \`toggle\` | 46,641 | 15,300 | 13,635 | 6,703 | 2,011 | 1,353 |
+| \`toolbar\` | 31,229 | 11,688 | 10,402 | 5,487 | 1,783 | 1,255 |
+| \`tooltip\` | 59,114 | 21,175 | 18,812 | 8,757 | 2,491 | 1,825 |
+| \`tour\` | 86,320 | 29,251 | 25,828 | 20,826 | 5,690 | 4,253 |
+| \`tree\` | 69,125 | 22,920 | 20,354 | 17,926 | 5,179 | 3,943 |
+| \`trend\` | 29,899 | 11,696 | 10,437 | 3,822 | 1,234 | 862 |
+| \`video\` | 146,051 | 45,106 | 39,301 | 69,860 | 17,621 | 14,148 |
+| \`video-playlist\` | 133,455 | 42,275 | 37,140 | 47,018 | 12,002 | 9,570 |
+| \`virtual-list\` | 58,901 | 20,072 | 17,900 | 21,141 | 6,476 | 5,036 |
 
 ### Styled tier
 
@@ -4101,111 +4392,111 @@ 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\` | 36,857 | 12,854 | 11,433 | 10,116 | 2,692 | 2,142 |
-| \`announcement\` | 43,624 | 15,064 | 13,447 | 9,931 | 2,671 | 1,979 |
-| \`app-header\` | 39,753 | 13,786 | 12,288 | 11,657 | 3,100 | 2,467 |
-| \`area-chart\` | 99,649 | 33,541 | 29,624 | 23,330 | 6,451 | 5,287 |
-| \`aura\` | 51,454 | 17,757 | 15,762 | 27,662 | 8,675 | 7,256 |
-| \`avatar\` | 35,091 | 12,684 | 11,348 | 8,247 | 2,182 | 1,724 |
-| \`badge\` | 32,752 | 11,796 | 10,508 | 9,034 | 2,289 | 1,796 |
-| \`bar-chart\` | 108,040 | 35,314 | 31,237 | 31,574 | 8,150 | 6,647 |
-| \`blockquote\` | 26,860 | 10,107 | 8,936 | 5,287 | 1,592 | 1,256 |
-| \`breadcrumbs\` | 44,839 | 15,417 | 13,760 | 15,636 | 3,860 | 3,085 |
-| \`button\` | 45,416 | 15,062 | 13,427 | 12,335 | 3,107 | 2,302 |
-| \`button-group\` | 31,742 | 11,238 | 9,978 | 9,164 | 2,413 | 1,770 |
-| \`callout\` | 40,328 | 14,800 | 13,204 | 7,345 | 2,097 | 1,617 |
-| \`canvas\` | 132,144 | 39,299 | 34,210 | 91,584 | 25,347 | 21,086 |
-| \`card\` | 28,213 | 10,189 | 9,050 | 6,662 | 1,803 | 1,371 |
-| \`carousel\` | 54,175 | 17,277 | 15,429 | 26,186 | 6,158 | 4,939 |
-| \`chat\` | 96,668 | 29,242 | 25,862 | 44,844 | 11,139 | 8,919 |
-| \`checkbox\` | 49,014 | 15,669 | 13,995 | 10,203 | 2,632 | 1,947 |
-| \`checkbox-group\` | 57,640 | 17,777 | 15,822 | 16,834 | 4,232 | 3,171 |
-| \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 576 | 474 |
-| \`code-block\` | 132,651 | 39,513 | 34,887 | 64,632 | 15,031 | 12,208 |
-| \`color-input\` | 189,951 | 51,985 | 45,373 | 101,604 | 21,178 | 17,506 |
-| \`color-picker\` | 144,706 | 39,064 | 34,172 | 87,286 | 18,795 | 15,454 |
-| \`combobox\` | 155,678 | 46,141 | 40,499 | 57,084 | 13,086 | 10,489 |
-| \`command\` | 123,928 | 35,912 | 31,449 | 52,966 | 12,494 | 10,077 |
-| \`copy-button\` | 98,408 | 30,994 | 27,416 | 33,067 | 7,517 | 5,916 |
-| \`data-table\` | 293,030 | 81,126 | 66,269 | 180,521 | 43,530 | 32,500 |
-| \`date-input\` | 166,377 | 48,409 | 42,494 | 60,775 | 13,354 | 10,915 |
-| \`date-picker\` | 70,165 | 22,398 | 20,016 | 28,614 | 7,051 | 5,611 |
-| \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,477 | 1,136 |
-| \`dialog\` | 46,626 | 15,892 | 14,154 | 11,680 | 3,205 | 2,520 |
-| \`divider\` | 25,821 | 9,692 | 8,548 | 4,376 | 1,311 | 898 |
-| \`donut-chart\` | 98,392 | 32,800 | 29,030 | 24,994 | 6,657 | 5,338 |
-| \`drawer\` | 51,986 | 17,549 | 15,643 | 14,261 | 3,940 | 3,119 |
-| \`drilldown\` | 51,187 | 16,886 | 15,069 | 16,523 | 4,178 | 3,322 |
-| \`empty\` | 26,021 | 9,826 | 8,678 | 3,909 | 1,277 | 881 |
-| \`file-input\` | 71,513 | 22,716 | 20,158 | 25,977 | 6,728 | 5,449 |
-| \`filter-input\` | 119,492 | 36,193 | 32,014 | 41,422 | 9,515 | 7,583 |
-| \`flex\` | 25,978 | 9,320 | 8,255 | 5,154 | 1,206 | 947 |
-| \`format-date\` | 30,640 | 11,432 | 10,214 | 5,337 | 1,551 | 1,186 |
-| \`graph\` | 84,277 | 25,480 | 22,541 | 33,006 | 8,247 | 6,619 |
-| \`grid\` | 27,233 | 9,979 | 8,825 | 6,021 | 1,609 | 1,338 |
-| \`heatmap\` | 103,019 | 34,211 | 30,248 | 24,957 | 6,659 | 5,269 |
-| \`icon\` | 33,537 | 12,400 | 10,966 | 11,009 | 3,579 | 2,771 |
-| \`icon-button\` | 47,198 | 15,052 | 13,461 | 14,118 | 3,124 | 2,393 |
-| \`image\` | 27,417 | 10,071 | 8,941 | 5,872 | 1,784 | 1,334 |
-| \`input\` | 53,248 | 17,735 | 15,684 | 12,285 | 3,675 | 2,771 |
-| \`kbd\` | 29,864 | 11,148 | 9,842 | 6,137 | 1,801 | 1,400 |
-| \`legend\` | 40,308 | 14,176 | 12,544 | 8,570 | 2,411 | 1,884 |
-| \`lightbox\` | 64,257 | 20,451 | 18,175 | 24,380 | 6,236 | 4,713 |
-| \`line-chart\` | 103,588 | 34,186 | 30,384 | 26,942 | 7,010 | 5,620 |
-| \`list\` | 69,907 | 23,196 | 20,682 | 23,007 | 6,202 | 4,845 |
-| \`listbox\` | 87,214 | 27,683 | 24,427 | 24,641 | 6,659 | 5,171 |
-| \`loader\` | 30,830 | 11,358 | 10,102 | 5,870 | 1,752 | 1,325 |
-| \`map\` | 119,571 | 30,617 | 26,627 | 77,400 | 16,328 | 13,061 |
-| \`megamenu\` | 65,860 | 22,963 | 20,346 | 14,234 | 3,732 | 2,887 |
-| \`menu\` | 118,358 | 37,178 | 32,782 | 46,480 | 11,018 | 8,939 |
-| \`meter\` | 38,671 | 13,585 | 12,149 | 11,502 | 2,914 | 2,363 |
-| \`navigation\` | 38,839 | 13,959 | 12,419 | 7,765 | 2,191 | 1,607 |
-| \`notifications\` | 74,877 | 22,640 | 20,181 | 33,636 | 7,705 | 6,278 |
-| \`number-input\` | 62,796 | 20,331 | 18,107 | 19,186 | 4,998 | 3,822 |
-| \`object-inspector\` | 135,287 | 41,856 | 36,817 | 55,264 | 13,545 | 11,064 |
-| \`option\` | 31,522 | 10,947 | 9,689 | 9,715 | 2,432 | 1,931 |
-| \`orb\` | 36,941 | 14,131 | 12,611 | 10,072 | 3,815 | 3,164 |
-| \`outline\` | 39,915 | 14,145 | 12,622 | 12,777 | 3,627 | 2,752 |
-| \`pagination\` | 159,522 | 47,236 | 41,095 | 67,562 | 15,589 | 12,498 |
-| \`pin-input\` | 52,001 | 17,615 | 15,715 | 10,721 | 3,315 | 2,608 |
-| \`popover\` | 69,340 | 24,321 | 21,608 | 10,231 | 2,862 | 2,134 |
-| \`progress\` | 36,291 | 12,644 | 11,276 | 10,837 | 2,758 | 2,373 |
-| \`qr-code\` | 45,317 | 17,412 | 15,520 | 19,258 | 7,022 | 5,673 |
-| \`quote\` | 23,589 | 9,213 | 8,124 | 2,413 | 894 | 558 |
-| \`radio\` | 53,541 | 16,539 | 14,734 | 12,923 | 2,988 | 2,311 |
-| \`rating\` | 55,435 | 18,704 | 16,701 | 12,265 | 3,726 | 2,899 |
-| \`sandbox\` | 105,701 | 31,214 | 27,318 | 73,136 | 19,033 | 15,698 |
-| \`scatter-chart\` | 101,052 | 33,621 | 29,635 | 25,823 | 7,039 | 5,625 |
-| \`scroll-area\` | 35,927 | 12,124 | 10,777 | 14,171 | 3,721 | 3,052 |
-| \`select\` | 137,072 | 42,106 | 36,896 | 46,058 | 10,981 | 8,735 |
-| \`skeleton\` | 26,269 | 9,683 | 8,609 | 5,066 | 1,490 | 1,127 |
-| \`skip-link\` | 27,440 | 10,500 | 9,298 | 3,441 | 1,133 | 847 |
-| \`slider\` | 69,545 | 20,450 | 18,332 | 28,886 | 6,358 | 5,118 |
-| \`sparkline\` | 53,434 | 18,854 | 16,867 | 11,713 | 3,574 | 2,851 |
-| \`speed-dial\` | 79,415 | 26,808 | 23,837 | 19,904 | 4,584 | 3,573 |
-| \`splitter\` | 50,849 | 16,520 | 14,757 | 21,153 | 5,091 | 3,980 |
-| \`stat\` | 29,023 | 10,426 | 9,283 | 6,495 | 1,674 | 1,265 |
-| \`steps\` | 71,923 | 22,217 | 19,707 | 29,783 | 6,950 | 5,554 |
-| \`strands\` | 53,249 | 19,273 | 17,106 | 29,252 | 10,000 | 8,576 |
-| \`switch\` | 45,727 | 15,127 | 13,486 | 6,635 | 1,923 | 1,368 |
-| \`table\` | 139,608 | 40,301 | 34,995 | 66,068 | 16,006 | 12,979 |
-| \`tabs\` | 60,663 | 19,011 | 16,874 | 21,157 | 4,926 | 3,929 |
-| \`tag\` | 50,048 | 17,404 | 15,544 | 14,304 | 3,838 | 2,951 |
-| \`text\` | 28,979 | 10,064 | 8,869 | 7,770 | 1,663 | 1,335 |
-| \`textarea\` | 50,411 | 16,626 | 14,822 | 10,007 | 2,827 | 2,252 |
-| \`time-input\` | 199,209 | 57,140 | 49,607 | 75,811 | 16,925 | 13,661 |
-| \`time-picker\` | 114,926 | 34,154 | 30,043 | 48,141 | 11,862 | 9,514 |
-| \`timeline\` | 40,524 | 13,715 | 12,250 | 12,967 | 2,965 | 2,332 |
-| \`toast\` | 60,737 | 20,109 | 17,883 | 21,387 | 5,646 | 4,410 |
-| \`toggle\` | 52,195 | 16,559 | 14,694 | 12,243 | 3,355 | 2,589 |
-| \`toolbar\` | 35,730 | 12,720 | 11,372 | 8,488 | 2,320 | 1,782 |
-| \`tooltip\` | 62,262 | 21,925 | 19,449 | 11,887 | 3,260 | 2,536 |
-| \`tour\` | 98,173 | 31,519 | 27,882 | 32,184 | 7,850 | 6,199 |
-| \`tree\` | 78,869 | 25,015 | 22,310 | 27,190 | 7,163 | 5,724 |
-| \`trend\` | 32,227 | 12,325 | 10,979 | 5,655 | 1,745 | 1,305 |
-| \`video\` | 169,593 | 49,192 | 42,886 | 92,907 | 21,464 | 17,644 |
-| \`video-playlist\` | 153,047 | 45,651 | 40,024 | 66,117 | 15,177 | 12,392 |
-| \`virtual-list\` | 62,724 | 21,154 | 18,892 | 23,461 | 7,038 | 5,634 |
+| \`accordion\` | 36,857 | 12,854 | 11,433 | 10,116 | 2,666 | 1,973 |
+| \`announcement\` | 42,139 | 14,513 | 12,955 | 9,931 | 2,672 | 1,958 |
+| \`app-header\` | 38,268 | 13,239 | 11,762 | 11,657 | 3,113 | 2,381 |
+| \`area-chart\` | 100,486 | 33,715 | 29,807 | 23,472 | 6,449 | 4,999 |
+| \`aura\` | 51,608 | 17,795 | 15,766 | 27,816 | 8,702 | 7,230 |
+| \`avatar\` | 34,654 | 12,524 | 11,164 | 8,286 | 2,195 | 1,688 |
+| \`badge\` | 33,033 | 11,900 | 10,592 | 9,034 | 2,281 | 1,638 |
+| \`bar-chart\` | 108,880 | 35,490 | 31,337 | 31,716 | 8,138 | 6,511 |
+| \`blockquote\` | 26,860 | 10,107 | 8,936 | 5,287 | 1,582 | 1,166 |
+| \`breadcrumbs\` | 44,361 | 15,237 | 13,632 | 15,636 | 3,839 | 3,087 |
+| \`button\` | 43,933 | 14,538 | 12,956 | 12,335 | 3,085 | 2,212 |
+| \`button-group\` | 31,742 | 11,238 | 9,978 | 9,166 | 2,402 | 1,770 |
+| \`callout\` | 39,852 | 14,635 | 13,025 | 7,345 | 2,084 | 1,482 |
+| \`canvas\` | 131,932 | 39,201 | 34,105 | 91,848 | 25,403 | 21,177 |
+| \`card\` | 28,213 | 10,190 | 9,050 | 6,662 | 1,794 | 1,270 |
+| \`carousel\` | 53,697 | 17,099 | 15,290 | 26,186 | 6,141 | 4,832 |
+| \`chat\` | 96,192 | 29,069 | 25,717 | 44,844 | 11,122 | 8,733 |
+| \`checkbox\` | 47,530 | 15,121 | 13,473 | 10,203 | 2,629 | 1,870 |
+| \`checkbox-group\` | 56,154 | 17,240 | 15,371 | 16,834 | 4,220 | 2,999 |
+| \`code\` | 21,671 | 8,472 | 7,490 | 1,639 | 554 | 308 |
+| \`code-block\` | 132,186 | 39,345 | 34,718 | 64,644 | 15,016 | 12,089 |
+| \`color-input\` | 189,475 | 51,816 | 45,287 | 101,604 | 21,149 | 17,301 |
+| \`color-picker\` | 144,230 | 38,895 | 34,039 | 87,286 | 18,794 | 15,246 |
+| \`combobox\` | 155,221 | 45,979 | 40,297 | 57,104 | 13,056 | 10,413 |
+| \`command\` | 123,452 | 35,756 | 31,297 | 52,966 | 12,453 | 10,034 |
+| \`copy-button\` | 96,938 | 30,463 | 26,941 | 33,079 | 7,486 | 5,845 |
+| \`data-table\` | 292,563 | 80,953 | 66,121 | 180,517 | 43,528 | 32,494 |
+| \`date-input\` | 165,923 | 48,247 | 42,430 | 60,795 | 13,361 | 10,795 |
+| \`date-picker\` | 69,693 | 22,224 | 19,893 | 28,614 | 7,026 | 5,588 |
+| \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,455 | 1,033 |
+| \`dialog\` | 45,141 | 15,337 | 13,680 | 11,680 | 3,216 | 2,459 |
+| \`divider\` | 25,821 | 9,693 | 8,548 | 4,376 | 1,299 | 881 |
+| \`donut-chart\` | 101,279 | 33,414 | 29,508 | 25,933 | 6,892 | 5,478 |
+| \`drawer\` | 50,503 | 17,015 | 15,155 | 14,261 | 3,915 | 3,007 |
+| \`drilldown\` | 49,702 | 16,333 | 14,549 | 16,523 | 4,173 | 3,147 |
+| \`empty\` | 26,021 | 9,826 | 8,678 | 3,909 | 1,255 | 769 |
+| \`file-input\` | 71,057 | 22,555 | 19,999 | 25,997 | 6,713 | 5,269 |
+| \`filter-input\` | 119,014 | 36,034 | 31,901 | 41,422 | 9,492 | 7,537 |
+| \`flex\` | 25,978 | 9,321 | 8,257 | 5,154 | 1,178 | 832 |
+| \`format-date\` | 30,926 | 11,534 | 10,318 | 5,337 | 1,530 | 1,070 |
+| \`graph\` | 86,947 | 26,407 | 23,331 | 33,861 | 8,456 | 6,726 |
+| \`grid\` | 27,233 | 9,980 | 8,825 | 6,021 | 1,603 | 1,154 |
+| \`heatmap\` | 103,480 | 34,337 | 30,341 | 25,132 | 6,691 | 5,167 |
+| \`icon\` | 33,537 | 12,400 | 10,969 | 11,009 | 3,583 | 2,666 |
+| \`icon-button\` | 45,728 | 14,518 | 12,964 | 14,131 | 3,114 | 2,266 |
+| \`image\` | 27,417 | 10,071 | 8,935 | 5,872 | 1,771 | 1,248 |
+| \`input\` | 51,763 | 17,193 | 15,154 | 12,285 | 3,678 | 2,687 |
+| \`kbd\` | 29,864 | 11,147 | 9,842 | 6,137 | 1,781 | 1,217 |
+| \`legend\` | 40,773 | 14,327 | 12,698 | 8,570 | 2,402 | 1,742 |
+| \`lightbox\` | 63,778 | 20,296 | 18,045 | 24,380 | 6,220 | 4,681 |
+| \`line-chart\` | 104,425 | 34,390 | 30,438 | 27,084 | 7,013 | 5,487 |
+| \`list\` | 69,431 | 22,996 | 20,516 | 23,007 | 6,179 | 4,738 |
+| \`listbox\` | 86,738 | 27,514 | 24,332 | 24,641 | 6,667 | 5,035 |
+| \`loader\` | 29,805 | 10,954 | 9,723 | 6,332 | 1,871 | 1,426 |
+| \`map\` | 119,092 | 30,442 | 26,483 | 77,400 | 16,318 | 12,943 |
+| \`megamenu\` | 65,860 | 22,964 | 20,363 | 14,234 | 3,719 | 2,720 |
+| \`menu\` | 117,880 | 37,007 | 32,613 | 46,479 | 11,005 | 8,747 |
+| \`meter\` | 38,195 | 13,416 | 11,981 | 11,502 | 2,909 | 2,342 |
+| \`navigation\` | 37,354 | 13,394 | 11,949 | 7,765 | 2,192 | 1,605 |
+| \`notifications\` | 74,401 | 22,483 | 20,012 | 33,636 | 7,668 | 6,080 |
+| \`number-input\` | 62,320 | 20,165 | 17,935 | 19,186 | 4,974 | 3,729 |
+| \`object-inspector\` | 134,822 | 41,685 | 36,639 | 55,277 | 13,546 | 10,790 |
+| \`option\` | 31,522 | 10,947 | 9,689 | 9,715 | 2,424 | 1,793 |
+| \`orb\` | 35,455 | 13,578 | 12,106 | 10,072 | 3,824 | 3,022 |
+| \`outline\` | 38,432 | 13,611 | 12,114 | 12,777 | 3,623 | 2,805 |
+| \`pagination\` | 159,046 | 47,070 | 40,917 | 67,562 | 15,573 | 12,364 |
+| \`pin-input\` | 51,523 | 17,442 | 15,621 | 10,721 | 3,296 | 2,421 |
+| \`popover\` | 67,855 | 23,812 | 21,110 | 10,231 | 2,832 | 2,050 |
+| \`progress\` | 35,815 | 12,475 | 11,133 | 10,837 | 2,740 | 2,214 |
+| \`qr-code\` | 44,840 | 17,241 | 15,364 | 19,258 | 7,021 | 5,652 |
+| \`quote\` | 23,589 | 9,214 | 8,124 | 2,413 | 891 | 568 |
+| \`radio\` | 52,058 | 15,999 | 14,201 | 12,923 | 2,975 | 2,233 |
+| \`rating\` | 55,186 | 18,603 | 16,562 | 12,491 | 3,795 | 2,801 |
+| \`sandbox\` | 105,225 | 31,045 | 27,125 | 73,136 | 18,960 | 15,444 |
+| \`scatter-chart\` | 102,251 | 33,921 | 29,924 | 26,327 | 7,144 | 5,606 |
+| \`scroll-area\` | 35,927 | 12,124 | 10,777 | 14,171 | 3,714 | 2,807 |
+| \`select\` | 136,594 | 41,912 | 36,736 | 46,058 | 10,952 | 8,582 |
+| \`skeleton\` | 26,269 | 9,683 | 8,601 | 5,066 | 1,472 | 983 |
+| \`skip-link\` | 25,958 | 9,947 | 8,782 | 3,441 | 1,134 | 755 |
+| \`slider\` | 69,069 | 20,280 | 18,154 | 28,886 | 6,364 | 4,982 |
+| \`sparkline\` | 53,682 | 18,874 | 16,874 | 11,899 | 3,611 | 2,895 |
+| \`speed-dial\` | 77,930 | 26,268 | 23,353 | 19,904 | 4,604 | 3,637 |
+| \`splitter\` | 50,373 | 16,354 | 14,620 | 21,153 | 5,089 | 4,099 |
+| \`stat\` | 29,307 | 10,526 | 9,355 | 6,495 | 1,654 | 1,134 |
+| \`steps\` | 71,444 | 22,035 | 19,552 | 29,783 | 6,921 | 5,521 |
+| \`strands\` | 53,249 | 19,273 | 17,106 | 29,252 | 9,981 | 8,417 |
+| \`switch\` | 44,243 | 14,585 | 12,983 | 6,635 | 1,919 | 1,397 |
+| \`table\` | 139,133 | 40,132 | 34,915 | 66,067 | 15,976 | 12,851 |
+| \`tabs\` | 59,178 | 18,452 | 16,403 | 21,157 | 4,918 | 3,746 |
+| \`tag\` | 49,634 | 17,254 | 15,416 | 14,372 | 3,838 | 2,850 |
+| \`text\` | 28,979 | 10,064 | 8,869 | 7,770 | 1,656 | 1,207 |
+| \`textarea\` | 48,926 | 16,089 | 14,347 | 10,007 | 2,829 | 2,108 |
+| \`time-input\` | 198,752 | 56,971 | 49,480 | 75,831 | 16,908 | 13,613 |
+| \`time-picker\` | 114,450 | 33,974 | 29,821 | 48,141 | 11,849 | 9,369 |
+| \`timeline\` | 40,048 | 13,540 | 12,098 | 12,967 | 2,956 | 2,260 |
+| \`toast\` | 60,260 | 19,945 | 17,713 | 21,387 | 5,633 | 4,293 |
+| \`toggle\` | 52,195 | 16,561 | 14,695 | 12,243 | 3,324 | 2,520 |
+| \`toolbar\` | 34,245 | 12,192 | 10,842 | 8,488 | 2,312 | 1,681 |
+| \`tooltip\` | 62,262 | 21,925 | 19,449 | 11,887 | 3,251 | 2,341 |
+| \`tour\` | 97,695 | 31,354 | 27,746 | 32,183 | 7,819 | 6,065 |
+| \`tree\` | 78,536 | 24,878 | 22,161 | 27,321 | 7,194 | 5,677 |
+| \`trend\` | 31,751 | 12,161 | 10,881 | 5,655 | 1,724 | 1,165 |
+| \`video\` | 169,115 | 49,036 | 42,760 | 92,906 | 21,426 | 17,606 |
+| \`video-playlist\` | 152,569 | 45,478 | 39,891 | 66,116 | 15,201 | 12,282 |
+| \`virtual-list\` | 61,239 | 20,611 | 18,376 | 23,461 | 7,033 | 5,556 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4217,12 +4508,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,428,456 | 541 | 702,120 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 21,529,014 | 696 | 2,191,290 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 2,444,586 | 547 | 708,645 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-headless\` | 21,571,463 | 696 | 2,198,104 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
 | \`@fusion.dev/helix-styles\` | 117,028 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 21,617,932 | 954 | 515,283 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix\` | 21,629,772 | 954 | 515,838 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet
 
@@ -4321,7 +4612,11 @@ Anything that moves continuously without input stops completely:
 
 - The aura shader
 - Marquees
-- Looping loaders
+- The pulse loader
+
+The turning \`Loader\` slows to one turn every four seconds. A loader that stops
+looks broken, and the turn still shows that work is in progress. The pending
+ring on \`IconButton\` slows the same way.
 
 ## Starting styles and view transitions