@fusion.dev/helix 0.210.0 → 0.211.1

package/types/jsx.d.ts

@@ -18633,12 +18633,22 @@ export type HelixIconButtonHelixPressElementEvent =
   HelixIconButtonElementEvent<HelixPressEvent>;
 
 export type HelixIconButtonProps = {
-  /** Raises the button off the page with a shadow.
+  /** The ground under the button, for one that lies over a busy surface such as
+a map or a board. `glass` lets the surface through under a blur, `frosted`
+turns the pair up for a surface too busy for glass, and `transparent` draws
+no ground at all. Unset, the ground is the emphasis's own.
+
+A solid button keeps its fill, which is what it means: the material is the
+ground of the other emphases. */
+  material?: (HelixIconButton["material"]) | undefined;
+  /** Floats the button over the page, with the theme's floating edge and shadow,
+as a popover floats. A ghost button that floats is drawn on the overlay a
+floating panel uses, so its glyph has a ground under it.
 
 Separate from `shape`, because they are separate facts: a docked control is
 raised whatever its outline, and a circle inside a toolbar is not raised at
-all. Shadow rather than a border, since what is under a floating control is
-the page and a line drawn on the page is not the same as being above it. */
+all. The theme says whether what floats is told apart by a shadow, a line,
+or both, and a raised button follows it as every floating panel does. */
   raised?: (HelixIconButton["raised"]) | undefined;
   /** The button's shape. Leave it unset for a rounded square, or set `circle`.
 
@@ -18859,12 +18869,22 @@ invoker without an id in the same tree needs. */
 };
 
 export type HelixIconButtonSolidJsProps = {
-  /** Raises the button off the page with a shadow.
+  /** The ground under the button, for one that lies over a busy surface such as
+a map or a board. `glass` lets the surface through under a blur, `frosted`
+turns the pair up for a surface too busy for glass, and `transparent` draws
+no ground at all. Unset, the ground is the emphasis's own.
+
+A solid button keeps its fill, which is what it means: the material is the
+ground of the other emphases. */
+  "prop:material"?: (HelixIconButton["material"]) | undefined;
+  /** Floats the button over the page, with the theme's floating edge and shadow,
+as a popover floats. A ghost button that floats is drawn on the overlay a
+floating panel uses, so its glyph has a ground under it.
 
 Separate from `shape`, because they are separate facts: a docked control is
 raised whatever its outline, and a circle inside a toolbar is not raised at
-all. Shadow rather than a border, since what is under a floating control is
-the page and a line drawn on the page is not the same as being above it. */
+all. The theme says whether what floats is told apart by a shadow, a line,
+or both, and a raised button follows it as every floating panel does. */
   "prop:raised"?: (HelixIconButton["raised"]) | undefined;
   /** The button's shape. Leave it unset for a rounded square, or set `circle`.
 
@@ -49038,6 +49058,10 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `edges`: A layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it `z-index: -1` to draw it under the cards.
    * - `footer`: The strip below the board.
    * - `fullscreen`: The button that makes the board fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a board with `gestures="activate"` has the gestures.
    * - `header`: The strip above the board.
@@ -49049,13 +49073,37 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `minimap-node`: One card in the minimap.
    * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that moves the board up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `region`: The named region the board is drawn in.
    * - `viewport`: The box the board is drawn inside.
    * - `zoom-in`: The button that zooms in.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The button that zooms out.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -52594,13 +52642,16 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `--copy-button-icon-size`: The width and height of the clipboard, check, and cross icons drawn by default.
    * - `--copy-button-size`: Edge length of the button. Without it, `--icon-button-size` applies.
    * - `--copy-button-success-color`: The check mark's color after a copy.
+   * - `--icon-button-backdrop`: The filter behind a button with `material`, which a translucent ground needs to be read.
    * - `--icon-button-background-color`: Fill behind the button, in every state.
    * - `--icon-button-background-color-active`: Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
    * - `--icon-button-background-color-hover`: Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
+   * - `--icon-button-border-color`: Edge color of the control, where its emphasis or `raised` draws an edge.
+   * - `--icon-button-border-width`: Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`.
    * - `--icon-button-foreground-color`: Icon color.
    * - `--icon-button-foreground-color-active`: Icon color while the button is pressed. Without it, a press shows the color of the state under it.
-   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
-   * - `--icon-button-shadow`: Shadow of a raised icon button.
+   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them.
+   * - `--icon-button-shadow`: Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`.
    * - `--icon-button-size`: Edge length of the control.
    * - `--icon-button-spinner-color`: Color of the ring a pending button turns. It follows the icon's color.
    * - `--icon-button-spinner-duration`: How long the ring takes to turn once.
@@ -57017,6 +57068,10 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
    * - `footer`: The strip below the graph.
    * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
    * - `header`: The strip above the graph.
@@ -57034,10 +57089,30 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
    * - `note-selected`: The selected note, first in the list.
    * - `notes-toggle`: The button among the controls that opens the search and the list over the drawing, with `no-panel`.
+   * - `notes-toggle-button`: `notes-toggle`'s inner button.
+   * - `notes-toggle-live`: `notes-toggle`'s live region, which speaks while it is pending.
+   * - `notes-toggle-spinner`: The ring `notes-toggle` turns while it is pending.
+   * - `notes-toggle-text`: The box `notes-toggle`'s glyph sits in.
    * - `pan-down`: The button that moves the graph down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that moves the graph up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `panel`: The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.
    * - `region`: The frame: the drawing, its controls and the list.
    * - `search`: The bar holding the icon, the search field and the count.
@@ -57047,7 +57122,15 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
    * - `viewport`: The box the renderer draws in.
    * - `zoom-in`: The zoom in button.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The zoom out button.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -57542,16 +57625,29 @@ export type CustomElements<F extends Framework = "other"> = {
    * as "button" and nothing else, which is the most common way a toolbar becomes
    * unusable without sight.
    *
+   * Set `raised` for a button that floats over the page, such as one over a map
+   * or a board, and `material` for the ground under it there. A raised button
+   * takes the theme's floating edge and shadow, as a popover does.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `raised`: Raises the button off the page with a shadow.
+   * - `material`: The ground under the button, for one that lies over a busy surface such as
+   * a map or a board. `glass` lets the surface through under a blur, `frosted`
+   * turns the pair up for a surface too busy for glass, and `transparent` draws
+   * no ground at all. Unset, the ground is the emphasis's own.
+   *
+   * A solid button keeps its fill, which is what it means: the material is the
+   * ground of the other emphases.
+   * - `raised`: Floats the button over the page, with the theme's floating edge and shadow,
+   * as a popover floats. A ghost button that floats is drawn on the overlay a
+   * floating panel uses, so its glyph has a ground under it.
    *
    * Separate from `shape`, because they are separate facts: a docked control is
    * raised whatever its outline, and a circle inside a toolbar is not raised at
-   * all. Shadow rather than a border, since what is under a floating control is
-   * the page and a line drawn on the page is not the same as being above it.
+   * all. The theme says whether what floats is told apart by a shadow, a line,
+   * or both, and a raised button follows it as every floating panel does.
    * - `shape`: The button's shape. Leave it unset for a rounded square, or set `circle`.
    *
    * `emphasis` says how filled it is and `tone` says what it means; neither of
@@ -57830,13 +57926,16 @@ export type CustomElements<F extends Framework = "other"> = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--icon-button-backdrop`: The filter behind a button with `material`, which a translucent ground needs to be read.
    * - `--icon-button-background-color`: Fill behind the button, in every state.
    * - `--icon-button-background-color-active`: Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
    * - `--icon-button-background-color-hover`: Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
+   * - `--icon-button-border-color`: Edge color of the control, where its emphasis or `raised` draws an edge.
+   * - `--icon-button-border-width`: Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`.
    * - `--icon-button-foreground-color`: Icon color.
    * - `--icon-button-foreground-color-active`: Icon color while the button is pressed. Without it, a press shows the color of the state under it.
-   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
-   * - `--icon-button-shadow`: Shadow of a raised icon button.
+   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them.
+   * - `--icon-button-shadow`: Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`.
    * - `--icon-button-size`: Edge length of the control.
    * - `--icon-button-spinner-color`: Color of the ring a pending button turns. It follows the icon's color.
    * - `--icon-button-spinner-duration`: How long the ring takes to turn once.
@@ -61568,8 +61667,16 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `compass`: The compass and the pan and rotate buttons around it.
    * - `controls`: The column of buttons that move the map, a toolbar and one tab stop.
    * - `face-north`: The compass: its needle points north as the map turns, and pressing it turns the map to face north.
+   * - `face-north-button`: `face-north`'s inner button.
+   * - `face-north-live`: `face-north`'s live region, which speaks while it is pending.
+   * - `face-north-spinner`: The ring `face-north` turns while it is pending.
+   * - `face-north-text`: The box `face-north`'s glyph sits in.
    * - `footer`: The strip below the map.
    * - `fullscreen`: The button that makes the map fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the map for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a map with `gestures="activate"` has the gestures.
    * - `header`: The strip above the map.
@@ -61581,6 +61688,10 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `layers`: The list of the map's shown layers, such as routes, areas, and points, read by screen readers.
    * - `layers-menu`: The menu of the map's layers, which the layers button opens.
    * - `layers-toggle`: The button that opens and closes the layers menu.
+   * - `layers-toggle-button`: `layers-toggle`'s inner button.
+   * - `layers-toggle-live`: `layers-toggle`'s live region, which speaks while it is pending.
+   * - `layers-toggle-spinner`: The ring `layers-toggle` turns while it is pending.
+   * - `layers-toggle-text`: The box `layers-toggle`'s glyph sits in.
    * - `live`: What screen readers hear after the map moves: the zoom level, the way it faces, its tilt, or the way it moved. Visually hidden in the styled tier.
    * - `map-type`: One map type's card in the layers menu: a radio button, its picture, and its name.
    * - `map-type-name`: The name on a map type's card.
@@ -61588,16 +61699,52 @@ export type CustomElements<F extends Framework = "other"> = {
    * - `map-types`: The map-type cards at the top of the layers menu, where the map has imagery.
    * - `needle`: The compass needle, turned to point north.
    * - `pan-down`: The button that pans the map down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that pans toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that pans toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that pans the map up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `region`: The named region the map sits in.
    * - `rotate-left`: The button that turns the map counterclockwise.
+   * - `rotate-left-button`: `rotate-left`'s inner button.
+   * - `rotate-left-live`: `rotate-left`'s live region, which speaks while it is pending.
+   * - `rotate-left-spinner`: The ring `rotate-left` turns while it is pending.
+   * - `rotate-left-text`: The box `rotate-left`'s glyph sits in.
    * - `rotate-right`: The button that turns the map clockwise.
+   * - `rotate-right-button`: `rotate-right`'s inner button.
+   * - `rotate-right-live`: `rotate-right`'s live region, which speaks while it is pending.
+   * - `rotate-right-spinner`: The ring `rotate-right` turns while it is pending.
+   * - `rotate-right-text`: The box `rotate-right`'s glyph sits in.
    * - `tilt`: The 3D button, which tilts the map and makes it flat again. Pressed while the map is tilted.
+   * - `tilt-button`: `tilt`'s inner button.
+   * - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
+   * - `tilt-spinner`: The ring `tilt` turns while it is pending.
+   * - `tilt-text`: The box `tilt`'s glyph sits in.
    * - `viewport`: The box the map is drawn in.
    * - `zoom-in`: The button that zooms in.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The button that zooms out.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -81506,6 +81653,10 @@ export type CustomElementsSolidJs = {
    * - `edges`: A layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it `z-index: -1` to draw it under the cards.
    * - `footer`: The strip below the board.
    * - `fullscreen`: The button that makes the board fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a board with `gestures="activate"` has the gestures.
    * - `header`: The strip above the board.
@@ -81517,13 +81668,37 @@ export type CustomElementsSolidJs = {
    * - `minimap-node`: One card in the minimap.
    * - `minimap-view`: The frame in the minimap around what is on screen.
    * - `pan-down`: The button that moves the board down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that moves the board toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that moves the board toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that moves the board up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `region`: The named region the board is drawn in.
    * - `viewport`: The box the board is drawn inside.
    * - `zoom-in`: The button that zooms in.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The button that zooms out.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -85101,13 +85276,16 @@ export type CustomElementsSolidJs = {
    * - `--copy-button-icon-size`: The width and height of the clipboard, check, and cross icons drawn by default.
    * - `--copy-button-size`: Edge length of the button. Without it, `--icon-button-size` applies.
    * - `--copy-button-success-color`: The check mark's color after a copy.
+   * - `--icon-button-backdrop`: The filter behind a button with `material`, which a translucent ground needs to be read.
    * - `--icon-button-background-color`: Fill behind the button, in every state.
    * - `--icon-button-background-color-active`: Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
    * - `--icon-button-background-color-hover`: Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
+   * - `--icon-button-border-color`: Edge color of the control, where its emphasis or `raised` draws an edge.
+   * - `--icon-button-border-width`: Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`.
    * - `--icon-button-foreground-color`: Icon color.
    * - `--icon-button-foreground-color-active`: Icon color while the button is pressed. Without it, a press shows the color of the state under it.
-   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
-   * - `--icon-button-shadow`: Shadow of a raised icon button.
+   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them.
+   * - `--icon-button-shadow`: Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`.
    * - `--icon-button-size`: Edge length of the control.
    * - `--icon-button-spinner-color`: Color of the ring a pending button turns. It follows the icon's color.
    * - `--icon-button-spinner-duration`: How long the ring takes to turn once.
@@ -89586,6 +89764,10 @@ export type CustomElementsSolidJs = {
    * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
    * - `footer`: The strip below the graph.
    * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
    * - `header`: The strip above the graph.
@@ -89603,10 +89785,30 @@ export type CustomElementsSolidJs = {
    * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
    * - `note-selected`: The selected note, first in the list.
    * - `notes-toggle`: The button among the controls that opens the search and the list over the drawing, with `no-panel`.
+   * - `notes-toggle-button`: `notes-toggle`'s inner button.
+   * - `notes-toggle-live`: `notes-toggle`'s live region, which speaks while it is pending.
+   * - `notes-toggle-spinner`: The ring `notes-toggle` turns while it is pending.
+   * - `notes-toggle-text`: The box `notes-toggle`'s glyph sits in.
    * - `pan-down`: The button that moves the graph down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that moves the graph up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `panel`: The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.
    * - `region`: The frame: the drawing, its controls and the list.
    * - `search`: The bar holding the icon, the search field and the count.
@@ -89616,7 +89818,15 @@ export type CustomElementsSolidJs = {
    * - `stop-layout`: The button that stops a layout that has run past five seconds, where the notes stand.
    * - `viewport`: The box the renderer draws in.
    * - `zoom-in`: The zoom in button.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The zoom out button.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -90121,16 +90331,29 @@ export type CustomElementsSolidJs = {
    * as "button" and nothing else, which is the most common way a toolbar becomes
    * unusable without sight.
    *
+   * Set `raised` for a button that floats over the page, such as one over a map
+   * or a board, and `material` for the ground under it there. A raised button
+   * takes the theme's floating edge and shadow, as a popover does.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `raised`: Raises the button off the page with a shadow.
+   * - `material`: The ground under the button, for one that lies over a busy surface such as
+   * a map or a board. `glass` lets the surface through under a blur, `frosted`
+   * turns the pair up for a surface too busy for glass, and `transparent` draws
+   * no ground at all. Unset, the ground is the emphasis's own.
+   *
+   * A solid button keeps its fill, which is what it means: the material is the
+   * ground of the other emphases.
+   * - `raised`: Floats the button over the page, with the theme's floating edge and shadow,
+   * as a popover floats. A ghost button that floats is drawn on the overlay a
+   * floating panel uses, so its glyph has a ground under it.
    *
    * Separate from `shape`, because they are separate facts: a docked control is
    * raised whatever its outline, and a circle inside a toolbar is not raised at
-   * all. Shadow rather than a border, since what is under a floating control is
-   * the page and a line drawn on the page is not the same as being above it.
+   * all. The theme says whether what floats is told apart by a shadow, a line,
+   * or both, and a raised button follows it as every floating panel does.
    * - `shape`: The button's shape. Leave it unset for a rounded square, or set `circle`.
    *
    * `emphasis` says how filled it is and `tone` says what it means; neither of
@@ -90409,13 +90632,16 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--icon-button-backdrop`: The filter behind a button with `material`, which a translucent ground needs to be read.
    * - `--icon-button-background-color`: Fill behind the button, in every state.
    * - `--icon-button-background-color-active`: Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
    * - `--icon-button-background-color-hover`: Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
+   * - `--icon-button-border-color`: Edge color of the control, where its emphasis or `raised` draws an edge.
+   * - `--icon-button-border-width`: Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`.
    * - `--icon-button-foreground-color`: Icon color.
    * - `--icon-button-foreground-color-active`: Icon color while the button is pressed. Without it, a press shows the color of the state under it.
-   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
-   * - `--icon-button-shadow`: Shadow of a raised icon button.
+   * - `--icon-button-radius`: Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them.
+   * - `--icon-button-shadow`: Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`.
    * - `--icon-button-size`: Edge length of the control.
    * - `--icon-button-spinner-color`: Color of the ring a pending button turns. It follows the icon's color.
    * - `--icon-button-spinner-duration`: How long the ring takes to turn once.
@@ -94219,8 +94445,16 @@ export type CustomElementsSolidJs = {
    * - `compass`: The compass and the pan and rotate buttons around it.
    * - `controls`: The column of buttons that move the map, a toolbar and one tab stop.
    * - `face-north`: The compass: its needle points north as the map turns, and pressing it turns the map to face north.
+   * - `face-north-button`: `face-north`'s inner button.
+   * - `face-north-live`: `face-north`'s live region, which speaks while it is pending.
+   * - `face-north-spinner`: The ring `face-north` turns while it is pending.
+   * - `face-north-text`: The box `face-north`'s glyph sits in.
    * - `footer`: The strip below the map.
    * - `fullscreen`: The button that makes the map fill the screen.
+   * - `fullscreen-button`: `fullscreen`'s inner button.
+   * - `fullscreen-live`: `fullscreen`'s live region, which speaks while it is pending.
+   * - `fullscreen-spinner`: The ring `fullscreen` turns while it is pending.
+   * - `fullscreen-text`: The box `fullscreen`'s glyph sits in.
    * - `gesture-hint`: Words over the map for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a map with `gestures="activate"` has the gestures.
    * - `header`: The strip above the map.
@@ -94232,6 +94466,10 @@ export type CustomElementsSolidJs = {
    * - `layers`: The list of the map's shown layers, such as routes, areas, and points, read by screen readers.
    * - `layers-menu`: The menu of the map's layers, which the layers button opens.
    * - `layers-toggle`: The button that opens and closes the layers menu.
+   * - `layers-toggle-button`: `layers-toggle`'s inner button.
+   * - `layers-toggle-live`: `layers-toggle`'s live region, which speaks while it is pending.
+   * - `layers-toggle-spinner`: The ring `layers-toggle` turns while it is pending.
+   * - `layers-toggle-text`: The box `layers-toggle`'s glyph sits in.
    * - `live`: What screen readers hear after the map moves: the zoom level, the way it faces, its tilt, or the way it moved. Visually hidden in the styled tier.
    * - `map-type`: One map type's card in the layers menu: a radio button, its picture, and its name.
    * - `map-type-name`: The name on a map type's card.
@@ -94239,16 +94477,52 @@ export type CustomElementsSolidJs = {
    * - `map-types`: The map-type cards at the top of the layers menu, where the map has imagery.
    * - `needle`: The compass needle, turned to point north.
    * - `pan-down`: The button that pans the map down.
+   * - `pan-down-button`: `pan-down`'s inner button.
+   * - `pan-down-live`: `pan-down`'s live region, which speaks while it is pending.
+   * - `pan-down-spinner`: The ring `pan-down` turns while it is pending.
+   * - `pan-down-text`: The box `pan-down`'s glyph sits in.
    * - `pan-end`: The button that pans toward the end of a line of text: right in English.
+   * - `pan-end-button`: `pan-end`'s inner button.
+   * - `pan-end-live`: `pan-end`'s live region, which speaks while it is pending.
+   * - `pan-end-spinner`: The ring `pan-end` turns while it is pending.
+   * - `pan-end-text`: The box `pan-end`'s glyph sits in.
    * - `pan-start`: The button that pans toward the start of a line of text: left in English.
+   * - `pan-start-button`: `pan-start`'s inner button.
+   * - `pan-start-live`: `pan-start`'s live region, which speaks while it is pending.
+   * - `pan-start-spinner`: The ring `pan-start` turns while it is pending.
+   * - `pan-start-text`: The box `pan-start`'s glyph sits in.
    * - `pan-up`: The button that pans the map up.
+   * - `pan-up-button`: `pan-up`'s inner button.
+   * - `pan-up-live`: `pan-up`'s live region, which speaks while it is pending.
+   * - `pan-up-spinner`: The ring `pan-up` turns while it is pending.
+   * - `pan-up-text`: The box `pan-up`'s glyph sits in.
    * - `region`: The named region the map sits in.
    * - `rotate-left`: The button that turns the map counterclockwise.
+   * - `rotate-left-button`: `rotate-left`'s inner button.
+   * - `rotate-left-live`: `rotate-left`'s live region, which speaks while it is pending.
+   * - `rotate-left-spinner`: The ring `rotate-left` turns while it is pending.
+   * - `rotate-left-text`: The box `rotate-left`'s glyph sits in.
    * - `rotate-right`: The button that turns the map clockwise.
+   * - `rotate-right-button`: `rotate-right`'s inner button.
+   * - `rotate-right-live`: `rotate-right`'s live region, which speaks while it is pending.
+   * - `rotate-right-spinner`: The ring `rotate-right` turns while it is pending.
+   * - `rotate-right-text`: The box `rotate-right`'s glyph sits in.
    * - `tilt`: The 3D button, which tilts the map and makes it flat again. Pressed while the map is tilted.
+   * - `tilt-button`: `tilt`'s inner button.
+   * - `tilt-live`: `tilt`'s live region, which speaks while it is pending.
+   * - `tilt-spinner`: The ring `tilt` turns while it is pending.
+   * - `tilt-text`: The box `tilt`'s glyph sits in.
    * - `viewport`: The box the map is drawn in.
    * - `zoom-in`: The button that zooms in.
+   * - `zoom-in-button`: `zoom-in`'s inner button.
+   * - `zoom-in-live`: `zoom-in`'s live region, which speaks while it is pending.
+   * - `zoom-in-spinner`: The ring `zoom-in` turns while it is pending.
+   * - `zoom-in-text`: The box `zoom-in`'s glyph sits in.
    * - `zoom-out`: The button that zooms out.
+   * - `zoom-out-button`: `zoom-out`'s inner button.
+   * - `zoom-out-live`: `zoom-out`'s live region, which speaks while it is pending.
+   * - `zoom-out-spinner`: The ring `zoom-out` turns while it is pending.
+   * - `zoom-out-text`: The box `zoom-out`'s glyph sits in.
    *
    * ## CSS States
    *
@@ -111464,19 +111738,25 @@ export type CustomCssProperties = {
   "--copy-button-size"?: (string) | undefined;
   /** The check mark's color after a copy. */
   "--copy-button-success-color"?: (string) | undefined;
+  /** The filter behind a button with `material`, which a translucent ground needs to be read. */
+  "--icon-button-backdrop"?: (string) | undefined;
   /** Fill behind the button, in every state. */
   "--icon-button-background-color"?: (string) | undefined;
   /** Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it. */
   "--icon-button-background-color-active"?: (string) | undefined;
   /** Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover. */
   "--icon-button-background-color-hover"?: (string) | undefined;
+  /** Edge color of the control, where its emphasis or `raised` draws an edge. */
+  "--icon-button-border-color"?: (string) | undefined;
+  /** Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`. */
+  "--icon-button-border-width"?: (string) | undefined;
   /** Icon color. */
   "--icon-button-foreground-color"?: (string) | undefined;
   /** Icon color while the button is pressed. Without it, a press shows the color of the state under it. */
   "--icon-button-foreground-color-active"?: (string) | undefined;
-  /** Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`. */
+  /** Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them. */
   "--icon-button-radius"?: (string) | undefined;
-  /** Shadow of a raised icon button. */
+  /** Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`. */
   "--icon-button-shadow"?: (string) | undefined;
   /** Edge length of the control. */
   "--icon-button-size"?: (string) | undefined;