@fusion.dev/helix-headless 0.229.0 → 0.230.0

package/types/jsx.d.ts

@@ -2033,6 +2033,13 @@ the board can draw. */
   "readonly"?: HelixHeadlessCanvasEdge["readOnly"] | undefined;
   /** Prevents the connection from being removed. */
   "readOnly"?: HelixHeadlessCanvasEdge["readOnly"] | undefined;
+  /** How the line is drawn: `dashed` or `dotted`. Unset is solid.
+
+**A stroke rather than an axis**, which is what the registry keeps it for:
+no other family draws a line whose stroke says something, and a dashed
+connection is the ordinary way to draw a weaker or an optional one. On the
+headless tier because the board that draws the line is. */
+  "stroke"?: HelixHeadlessCanvasEdge["stroke"] | undefined;
   /** The name of the card the connection ends at. */
   "to"?: HelixHeadlessCanvasEdge["to"] | undefined;
   /** The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies. */
@@ -2050,13 +2057,6 @@ board carries the value across from where it was written. */
   "to-side"?: HelixHeadlessCanvasEdge["toSide"] | undefined;
   /** The side of the `to` card the connection arrives at, when the document sets one. */
   "toSide"?: HelixHeadlessCanvasEdge["toSide"] | undefined;
-  /** How the line is drawn: `dashed` or `dotted`. Unset is solid.
-
-**A variant rather than an axis**, which is what the registry keeps it for:
-no other family draws a line whose stroke says something, and a dashed
-connection is the ordinary way to draw a weaker or an optional one. On the
-headless tier because the board that draws the line is. */
-  "variant"?: HelixHeadlessCanvasEdge["variant"] | undefined;
 };
 
 export type HelixHeadlessCanvasEdgeSolidJsProps = {
@@ -2080,6 +2080,8 @@ export type HelixHeadlessCanvasEdgeSolidJsProps = {
   "bool:readonly"?: HelixHeadlessCanvasEdge["readOnly"] | undefined;
   /** Prevents the connection from being removed. */
   "prop:readOnly"?: HelixHeadlessCanvasEdge["readOnly"] | undefined;
+  /** How the line is drawn: `dashed` or `dotted`. Unset is solid. */
+  "prop:stroke"?: HelixHeadlessCanvasEdge["stroke"] | undefined;
   /** The name of the card the connection ends at. */
   "prop:to"?: HelixHeadlessCanvasEdge["to"] | undefined;
   /** The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies. */
@@ -2092,8 +2094,6 @@ export type HelixHeadlessCanvasEdgeSolidJsProps = {
   "attr:to-side"?: HelixHeadlessCanvasEdge["toSide"] | undefined;
   /** The side of the `to` card the connection arrives at, when the document sets one. */
   "prop:toSide"?: HelixHeadlessCanvasEdge["toSide"] | undefined;
-  /** How the line is drawn: `dashed` or `dotted`. Unset is solid. */
-  "prop:variant"?: HelixHeadlessCanvasEdge["variant"] | undefined;
   /** Set the innerHTML of the element */
   innerHTML?: string | undefined;
   /** Set the textContent of the element */
@@ -4177,6 +4177,12 @@ A block with no `label` is named by it, in the header and on the copy
 button, as a docs site names a snippet by its language. Absent hands
 `highlight` an empty string and names nothing. */
   "language"?: HelixHeadlessCodeBlock["language"] | undefined;
+  /** How a diff's two versions are arranged. It has no effect without `diff`.
+
+Absent is unified, each removal above its replacement, which fits any
+width. `split` sets the old version beside the new one. Optional rather
+than defaulted, so the host carries no attribute the consumer did not write. */
+  "layout"?: HelixHeadlessCodeBlock["layout"] | undefined;
   /** Whether the lines are numbered in a gutter beside the code.
 
 The numbers are hidden from the accessibility tree and are not part of a
@@ -4224,12 +4230,6 @@ diff with `context-lines`. `{count}` is how many. */
   "show-unchanged-label"?: HelixHeadlessCodeBlock["showUnchangedLabel"] | undefined;
   /** The words of a button that shows a folded run of unchanged lines, in a diff with `context-lines`. `{count}` is how many. */
   "showUnchangedLabel"?: HelixHeadlessCodeBlock["showUnchangedLabel"] | undefined;
-  /** How a diff's two versions are arranged. It has no effect without `diff`.
-
-Absent is unified, each removal above its replacement, which fits any
-width. `split` sets the old version beside the new one. Optional rather
-than defaulted, so the host carries no attribute the consumer did not write. */
-  "variant"?: HelixHeadlessCodeBlock["variant"] | undefined;
   /** Whether long lines wrap. Without it they scroll.
 
 Off by default, so long lines scroll, because a line break can be
@@ -4340,6 +4340,8 @@ export type HelixHeadlessCodeBlockSolidJsProps = {
   "prop:label"?: HelixHeadlessCodeBlock["label"] | undefined;
   /** The language the code is written in, such as `ts` or `css`, handed to `highlight` as its second argument. */
   "prop:language"?: HelixHeadlessCodeBlock["language"] | undefined;
+  /** How a diff's two versions are arranged. It has no effect without `diff`. */
+  "prop:layout"?: HelixHeadlessCodeBlock["layout"] | undefined;
   /** Whether the lines are numbered in a gutter beside the code. */
   "bool:line-numbers"?: HelixHeadlessCodeBlock["lineNumbers"] | undefined;
   /** Whether the lines are numbered in a gutter beside the code. */
@@ -4360,8 +4362,6 @@ export type HelixHeadlessCodeBlockSolidJsProps = {
   "attr:show-unchanged-label"?: HelixHeadlessCodeBlock["showUnchangedLabel"] | undefined;
   /** The words of a button that shows a folded run of unchanged lines, in a diff with `context-lines`. `{count}` is how many. */
   "prop:showUnchangedLabel"?: HelixHeadlessCodeBlock["showUnchangedLabel"] | undefined;
-  /** How a diff's two versions are arranged. It has no effect without `diff`. */
-  "prop:variant"?: HelixHeadlessCodeBlock["variant"] | undefined;
   /** Whether long lines wrap. Without it they scroll. */
   "prop:wrap"?: HelixHeadlessCodeBlock["wrap"] | undefined;
   /** The wrap button's name, which it keeps whether it is pressed or not. */
@@ -5150,16 +5150,12 @@ Date Input and Time Input. */
   "readOnly"?: HelixHeadlessColorInput["readOnly"] | undefined;
   /** Colors offered under the picker, as a comma-separated list. */
   "swatches"?: HelixHeadlessColorInput["swatches"] | undefined;
-  /** What the swatch says in `variant="swatch"`, after the field's label, once
+  /** What the swatch says in `trigger="swatch"`, after the field's label, once
 there is a color. `{name}` is the color's name, such as "vibrant red", and
 `{value}` the value as written. */
   "swatch-label"?: HelixHeadlessColorInput["swatchLabel"] | undefined;
-  /** What the swatch says in `variant="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
+  /** What the swatch says in `trigger="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
   "swatchLabel"?: HelixHeadlessColorInput["swatchLabel"] | undefined;
-  /** Accessible name for the control that opens the panel. */
-  "trigger-label"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
-  /** Accessible name for the control that opens the panel. */
-  "triggerLabel"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
   /** Whether the field is a text box with a swatch on it, or only the swatch.
 
 `swatch` is the native control's shape: a block of color that opens a
@@ -5175,7 +5171,11 @@ readable and typeable exactly once, in whichever of the two is present.
 The trade is real and is the reason this is not the default: a swatch cannot
 be read or pasted into without opening the panel, which is worse for a form
 where the color is the answer rather than a setting. */
-  "variant"?: HelixHeadlessColorInput["variant"] | undefined;
+  "trigger"?: HelixHeadlessColorInput["trigger"] | undefined;
+  /** Accessible name for the control that opens the panel. */
+  "trigger-label"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
+  /** Accessible name for the control that opens the panel. */
+  "triggerLabel"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
   /** Draws the panel's hue as a wheel around the square, in place of the hue
 ramp. See Color Picker's `wheel`. */
   "wheel"?: HelixHeadlessColorInput["wheel"] | undefined;
@@ -5324,16 +5324,16 @@ export type HelixHeadlessColorInputSolidJsProps = {
   "prop:readOnly"?: HelixHeadlessColorInput["readOnly"] | undefined;
   /** Colors offered under the picker, as a comma-separated list. */
   "prop:swatches"?: HelixHeadlessColorInput["swatches"] | undefined;
-  /** What the swatch says in `variant="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
+  /** What the swatch says in `trigger="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
   "attr:swatch-label"?: HelixHeadlessColorInput["swatchLabel"] | undefined;
-  /** What the swatch says in `variant="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
+  /** What the swatch says in `trigger="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written. */
   "prop:swatchLabel"?: HelixHeadlessColorInput["swatchLabel"] | undefined;
+  /** Whether the field is a text box with a swatch on it, or only the swatch. */
+  "prop:trigger"?: HelixHeadlessColorInput["trigger"] | undefined;
   /** Accessible name for the control that opens the panel. */
   "attr:trigger-label"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
   /** Accessible name for the control that opens the panel. */
   "prop:triggerLabel"?: HelixHeadlessColorInput["triggerLabel"] | undefined;
-  /** Whether the field is a text box with a swatch on it, or only the swatch. */
-  "prop:variant"?: HelixHeadlessColorInput["variant"] | undefined;
   /** Draws the panel's hue as a wheel around the square, in place of the hue ramp. See Color Picker's `wheel`. */
   "prop:wheel"?: HelixHeadlessColorInput["wheel"] | undefined;
   /** The message shown when the field holds text the picker cannot read as a date, a time, or a color. */
@@ -16246,6 +16246,27 @@ trigger to the panel. The attribute also takes a CSS time, such as `0.2s`. */
   "closeDelay"?: HelixHeadlessMegamenu["closeDelay"] | undefined;
   /** The section's name, used for the default trigger and the panel. */
   "label"?: HelixHeadlessMegamenu["label"] | undefined;
+  /** Whether the panel is a card under the trigger or a band across the page.
+
+The resting one is the card, hanging off the trigger and as wide as it
+needs to be. `band` is the other shape navigations use: a run from edge to
+edge under the header, with its contents held to the page's own measure, so
+a set of destinations too wide to sit under one word gets the whole width
+to lay out in.
+
+**A band and not a width, which is why the word is not `full`.** It changes
+where the panel goes as well as how wide it is, which is why this tier
+knows about it at all: a band spans the viewport, so there is nothing to
+measure it against and nothing to flip or shift to, and the placing pass is
+told not to run. Everything else the popover gives, the top layer and the
+dismissal, is exactly what such a band needs. `full` is the registry's word
+for a width, and `Button` and `Dialog` are the two families answering that
+question; borrowing it here would put a third meaning on it.
+
+`layout` and not an axis, for the reason the registry gives: a card under
+a word and a band under a header are two arrangements this family has, and
+no other family is being asked the same question. */
+  "layout"?: HelixHeadlessMegamenu["layout"] | undefined;
   /** How long a pointer rests on the trigger before the panel opens, in
 milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
 way somewhere else opens nothing. The attribute also takes a CSS time, such
@@ -16267,27 +16288,6 @@ heavy enough that opening it on the way past is rude. */
 moves if that side does not fit. A band ignores it, since a band spans the
 page under its bar. */
   "placement"?: HelixHeadlessMegamenu["placement"] | undefined;
-  /** Whether the panel is a card under the trigger or a band across the page.
-
-The resting one is the card, hanging off the trigger and as wide as it
-needs to be. `band` is the other shape navigations use: a run from edge to
-edge under the header, with its contents held to the page's own measure, so
-a set of destinations too wide to sit under one word gets the whole width
-to lay out in.
-
-**A band and not a width, which is why the word is not `full`.** It changes
-where the panel goes as well as how wide it is, which is why this tier
-knows about it at all: a band spans the viewport, so there is nothing to
-measure it against and nothing to flip or shift to, and the placing pass is
-told not to run. Everything else the popover gives, the top layer and the
-dismissal, is exactly what such a band needs. `full` is the registry's word
-for a width, and `Button` and `Dialog` are the two families answering that
-question; borrowing it here would put a third meaning on it.
-
-`variant` and not an axis, for the reason the registry gives: a card under
-a word and a band under a header are two arrangements this family has, and
-no other family is being asked the same question. */
-  "variant"?: HelixHeadlessMegamenu["variant"] | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: HelixHeadlessMegamenu["defaultOpen"] | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -16324,6 +16324,8 @@ export type HelixHeadlessMegamenuSolidJsProps = {
   "prop:closeDelay"?: HelixHeadlessMegamenu["closeDelay"] | undefined;
   /** The section's name, used for the default trigger and the panel. */
   "prop:label"?: HelixHeadlessMegamenu["label"] | undefined;
+  /** Whether the panel is a card under the trigger or a band across the page. */
+  "prop:layout"?: HelixHeadlessMegamenu["layout"] | undefined;
   /** How long a pointer rests on the trigger before the panel opens, in milliseconds, under `open-on="hover"`. A pointer crossing the bar on its way somewhere else opens nothing. The attribute also takes a CSS time, such as `0.1s`. */
   "attr:open-delay"?: HelixHeadlessMegamenu["openDelay"] | `${number}` | undefined;
   /** How long a pointer rests on the trigger before the panel opens, in milliseconds, under `open-on="hover"`. A pointer crossing the bar on its way somewhere else opens nothing. The attribute also takes a CSS time, such as `0.1s`. */
@@ -16334,8 +16336,6 @@ export type HelixHeadlessMegamenuSolidJsProps = {
   "prop:openOn"?: HelixHeadlessMegamenu["openOn"] | undefined;
   /** The side of the trigger a card panel opens on, when there is room. It moves if that side does not fit. A band ignores it, since a band spans the page under its bar. */
   "prop:placement"?: HelixHeadlessMegamenu["placement"] | undefined;
-  /** Whether the panel is a card under the trigger or a band across the page. */
-  "prop:variant"?: HelixHeadlessMegamenu["variant"] | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "bool:default-open"?: HelixHeadlessMegamenu["defaultOpen"] | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -17023,10 +17023,6 @@ second "Main".
 
 Empty by default, which leaves the name to `fallbackLabel`. */
   "label"?: HelixHeadlessNavigation["label"] | undefined;
-  /** Stacks the destinations in a column, for a sidebar, where unset is a row
-for a header or a footer. The marker follows the current destination down
-the column as it does along the row. */
-  "orientation"?: HelixHeadlessNavigation["orientation"] | undefined;
   /** How the destinations are drawn, with `Tabs`' three values and for the same
 reasons.
 
@@ -17046,7 +17042,11 @@ column's inline end.
 
 Reflected and left unset by default, so the host carries nothing a
 consumer's server markup does not already have. */
-  "variant"?: HelixHeadlessNavigation["variant"] | undefined;
+  "marker"?: HelixHeadlessNavigation["marker"] | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  "orientation"?: HelixHeadlessNavigation["orientation"] | undefined;
 };
 
 export type HelixHeadlessNavigationSolidJsProps = {
@@ -17058,10 +17058,10 @@ export type HelixHeadlessNavigationSolidJsProps = {
   "prop:fallbackLabel"?: HelixHeadlessNavigation["fallbackLabel"] | undefined;
   /** The landmark's name, read by screen readers. */
   "prop:label"?: HelixHeadlessNavigation["label"] | undefined;
+  /** How the destinations are drawn, with `Tabs`' three values and for the same reasons. */
+  "prop:marker"?: HelixHeadlessNavigation["marker"] | undefined;
   /** Stacks the destinations in a column, for a sidebar, where unset is a row for a header or a footer. The marker follows the current destination down the column as it does along the row. */
   "prop:orientation"?: HelixHeadlessNavigation["orientation"] | undefined;
-  /** How the destinations are drawn, with `Tabs`' three values and for the same reasons. */
-  "prop:variant"?: HelixHeadlessNavigation["variant"] | undefined;
   /** Set the innerHTML of the element */
   innerHTML?: string | undefined;
   /** Set the textContent of the element */
@@ -18237,6 +18237,15 @@ slot names it in place of this.
 
 Empty by default, which leaves the name to `fallbackLabel`. */
   "label"?: HelixHeadlessOutline["label"] | undefined;
+  /** The rail form: a slim column of ticks, one per link, that opens on hover,
+focus, or a tap into a surface holding the links.
+
+A marker because no registered axis (emphasis, material, nesting,
+orientation, separation, shape, size, tone, width) has a value for it, and
+a rail is an arrangement of this family alone, as Megamenu's
+`marker="band"` is. It has no default: the outline without it is the list
+of links. */
+  "marker"?: HelixHeadlessOutline["marker"] | undefined;
   /** Which links are marked. `reading` marks the one section being read, the
 last whose heading has passed the reading line. `visible` marks every
 section with part of it on screen, and the mark runs across their links. */
@@ -18249,15 +18258,6 @@ The reading line. A page with a sticky masthead sets this to its height, or
 a little more: without it the current section changes as a heading slides
 under the chrome rather than as it reaches the top of what can be seen. */
   "offset"?: HelixHeadlessOutline["offset"] | undefined;
-  /** The rail form: a slim column of ticks, one per link, that opens on hover,
-focus, or a tap into a surface holding the links.
-
-A variant because no registered axis (emphasis, material, nesting,
-orientation, separation, shape, size, tone, width) has a value for it, and
-a rail is an arrangement of this family alone, as Megamenu's
-`variant="band"` is. It has no default: the outline without it is the list
-of links. */
-  "variant"?: HelixHeadlessOutline["variant"] | undefined;
   /** Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented. */
   "onhelix-activate"?: ((e: HelixHeadlessOutlineHelixActivateElementEvent) => void) | undefined;
 };
@@ -18273,12 +18273,12 @@ export type HelixHeadlessOutlineSolidJsProps = {
   "prop:follow"?: HelixHeadlessOutline["follow"] | undefined;
   /** The navigation's name, read by screen readers. A heading in the `heading` slot names it in place of this. */
   "prop:label"?: HelixHeadlessOutline["label"] | undefined;
+  /** The rail form: a slim column of ticks, one per link, that opens on hover, focus, or a tap into a surface holding the links. */
+  "prop:marker"?: HelixHeadlessOutline["marker"] | undefined;
   /** Which links are marked. `reading` marks the one section being read, the last whose heading has passed the reading line. `visible` marks every section with part of it on screen, and the mark runs across their links. */
   "prop:marks"?: HelixHeadlessOutline["marks"] | undefined;
   /** How far below the top of the scroll container a heading counts as reached, in pixels. The scroll container is the window or the panel the sections scroll in. */
   "prop:offset"?: HelixHeadlessOutline["offset"] | undefined;
-  /** The rail form: a slim column of ticks, one per link, that opens on hover, focus, or a tap into a surface holding the links. */
-  "prop:variant"?: HelixHeadlessOutline["variant"] | undefined;
   /** Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented. */
   "on:helix-activate"?: ((e: HelixHeadlessOutlineHelixActivateElementEvent) => void) | undefined;
   /** Set the innerHTML of the element */
@@ -20971,6 +20971,38 @@ height. */
   "grow-again"?: HelixHeadlessSpatialBarChart["growAgain"] | undefined;
   /** Grows the bars again each time the chart comes back into view after it left it, as a pane does when it is opened again, where `grow` alone grows them the first time only. Only a chart that grows takes it. */
   "growAgain"?: HelixHeadlessSpatialBarChart["growAgain"] | undefined;
+  /** How the bars stand.
+
+Unset, they stand on a grid of categories across and series in depth,
+in a box the camera looks at from a corner, so the grid recedes at an
+angle. `row` lays the categories in a straight line across the page and
+turns each bar to the camera, showing its top and two sides, for one row
+of readings in a small space such as a pane: turning the view turns each
+bar where it stands, and the row stays level. It is the chart's own
+drawing that lays the row: a renderer connected through
+`@fusion.dev/helix-plot` stands the bars on the grid.
+
+`diagonal` is the same row climbing to the right as it recedes, each
+place a step further back than the one before, as a row of days on a
+product's page is drawn: the row rises one part in five across the page
+from any turn, and its floor and names climb with it. A row whose bars
+have a size climbs at most a quarter of the plot's height, so the bars
+of a long row keep theirs.
+
+**A row draws its floor in place of a box**: each place as an outline a
+little wider than its bar, and each category's name under it, as many
+names as fit without touching. A name whose bar names a tone is written
+first, in that tone. `no-box` leaves the floor and the names out.
+
+**A `column-gap` on the `fallback` part gives a row's bars one width**,
+which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
+stands as wide as each of twenty, the row is as long as its bars and
+centered, the tallest bar stands as high as the plot has room for and
+no taller than the row is long and a quarter again, so one bar stands
+as a block, and `fits` says how many bars the plot holds, so a page
+can give it the latest of a longer table. It is read when the plot's
+size changes. */
+  "layout"?: HelixHeadlessSpatialBarChart["layout"] | undefined;
   /** Draws no box: no edges, grid, numbers, or names, and in a `row` no
 floor, so the readings stand alone and fill the plot, as a picture on a
 product's own page does. The
@@ -21003,38 +21035,6 @@ and `{low}` and `{high}` the lowest and the highest value. */
   "summary-label"?: HelixHeadlessSpatialBarChart["summaryLabel"] | undefined;
   /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}` are the number of bars, series, and categories, written in the locale, and `{low}` and `{high}` the lowest and the highest value. */
   "summaryLabel"?: HelixHeadlessSpatialBarChart["summaryLabel"] | undefined;
-  /** How the bars stand.
-
-Unset, they stand on a grid of categories across and series in depth,
-in a box the camera looks at from a corner, so the grid recedes at an
-angle. `row` lays the categories in a straight line across the page and
-turns each bar to the camera, showing its top and two sides, for one row
-of readings in a small space such as a pane: turning the view turns each
-bar where it stands, and the row stays level. It is the chart's own
-drawing that lays the row: a renderer connected through
-`@fusion.dev/helix-plot` stands the bars on the grid.
-
-`diagonal` is the same row climbing to the right as it recedes, each
-place a step further back than the one before, as a row of days on a
-product's page is drawn: the row rises one part in five across the page
-from any turn, and its floor and names climb with it. A row whose bars
-have a size climbs at most a quarter of the plot's height, so the bars
-of a long row keep theirs.
-
-**A row draws its floor in place of a box**: each place as an outline a
-little wider than its bar, and each category's name under it, as many
-names as fit without touching. A name whose bar names a tone is written
-first, in that tone. `no-box` leaves the floor and the names out.
-
-**A `column-gap` on the `fallback` part gives a row's bars one width**,
-which the styled tier sets from `--spatial-bar-chart-bar-size`: one bar
-stands as wide as each of twenty, the row is as long as its bars and
-centered, the tallest bar stands as high as the plot has room for and
-no taller than the row is long and a quarter again, so one bar stands
-as a block, and `fits` says how many bars the plot holds, so a page
-can give it the latest of a longer table. It is read when the plot's
-size changes. */
-  "variant"?: HelixHeadlessSpatialBarChart["variant"] | undefined;
   /** The words shown in place of the drawing when the table has no readings,
 and the fallback of the `empty` slot. */
   "empty-text"?: HelixHeadlessSpatialBarChart["emptyText"] | undefined;
@@ -21164,6 +21164,8 @@ export type HelixHeadlessSpatialBarChartSolidJsProps = {
   "bool:grow-again"?: HelixHeadlessSpatialBarChart["growAgain"] | undefined;
   /** Grows the bars again each time the chart comes back into view after it left it, as a pane does when it is opened again, where `grow` alone grows them the first time only. Only a chart that grows takes it. */
   "prop:growAgain"?: HelixHeadlessSpatialBarChart["growAgain"] | undefined;
+  /** How the bars stand. */
+  "prop:layout"?: HelixHeadlessSpatialBarChart["layout"] | undefined;
   /** Draws no box: no edges, grid, numbers, or names, and in a `row` no floor, so the readings stand alone and fill the plot, as a picture on a product's own page does. The table, the summary, the tooltip, and the keys still carry every value, and a renderer draws no box either. */
   "bool:no-box"?: HelixHeadlessSpatialBarChart["noBox"] | undefined;
   /** Draws no box: no edges, grid, numbers, or names, and in a `row` no floor, so the readings stand alone and fill the plot, as a picture on a product's own page does. The table, the summary, the tooltip, and the keys still carry every value, and a renderer draws no box either. */
@@ -21182,8 +21184,6 @@ export type HelixHeadlessSpatialBarChartSolidJsProps = {
   "attr:summary-label"?: HelixHeadlessSpatialBarChart["summaryLabel"] | undefined;
   /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}` are the number of bars, series, and categories, written in the locale, and `{low}` and `{high}` the lowest and the highest value. */
   "prop:summaryLabel"?: HelixHeadlessSpatialBarChart["summaryLabel"] | undefined;
-  /** How the bars stand. */
-  "prop:variant"?: HelixHeadlessSpatialBarChart["variant"] | undefined;
   /** The words shown in place of the drawing when the table has no readings, and the fallback of the `empty` slot. */
   "attr:empty-text"?: HelixHeadlessSpatialBarChart["emptyText"] | undefined;
   /** The words shown in place of the drawing when the table has no readings, and the fallback of the `empty` slot. */
@@ -23130,6 +23130,17 @@ Empty by default, which leaves the name to `fallbackLabel`. */
   /** Whether a reader has to finish each stage, or pass an `optional` one,
 before going on to the next. */
   "linear"?: HelixHeadlessSteps["linear"] | undefined;
+  /** What each step is marked with.
+
+Absent is the state itself: a check where a stage is done, a target where
+the reader is, an empty ring ahead of them. Three marks that need no
+legend, which a number does: "3" says where a stage sits in the order and
+nothing about whether it is finished.
+
+`numeric` is the older convention and is still the right one where the
+order is the point, a form that says "step 3 of 5" beside it, or a sequence
+a reader is told to come back to by number. */
+  "marker"?: HelixHeadlessSteps["marker"] | undefined;
   /** Which way the steps run.
 
 Absent is a row, which is what a form header wants, with each name under
@@ -23149,17 +23160,6 @@ number, for a sentence that places the sign itself. */
   "progress-label"?: HelixHeadlessSteps["progressLabel"] | undefined;
   /** What the `progress` part says to a screen reader. `{share, number, percent}` writes `progress` as a percentage the way the locale writes one, such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole number, for a sentence that places the sign itself. */
   "progressLabel"?: HelixHeadlessSteps["progressLabel"] | undefined;
-  /** What each step is marked with.
-
-Absent is the state itself: a check where a stage is done, a target where
-the reader is, an empty ring ahead of them. Three marks that need no
-legend, which a number does: "3" says where a stage sits in the order and
-nothing about whether it is finished.
-
-`numeric` is the older convention and is still the right one where the
-order is the point, a form that says "step 3 of 5" beside it, or a sequence
-a reader is told to come back to by number. */
-  "variant"?: HelixHeadlessSteps["variant"] | undefined;
   /** The `value` of the current item.
 
 Not `option.active`, which is the option the keyboard is on: that is a
@@ -23200,14 +23200,14 @@ export type HelixHeadlessStepsSolidJsProps = {
   "prop:label"?: HelixHeadlessSteps["label"] | undefined;
   /** Whether a reader has to finish each stage, or pass an `optional` one, before going on to the next. */
   "prop:linear"?: HelixHeadlessSteps["linear"] | undefined;
+  /** What each step is marked with. */
+  "prop:marker"?: HelixHeadlessSteps["marker"] | undefined;
   /** Which way the steps run. */
   "prop:orientation"?: HelixHeadlessSteps["orientation"] | undefined;
   /** What the `progress` part says to a screen reader. `{share, number, percent}` writes `progress` as a percentage the way the locale writes one, such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole number, for a sentence that places the sign itself. */
   "attr:progress-label"?: HelixHeadlessSteps["progressLabel"] | undefined;
   /** What the `progress` part says to a screen reader. `{share, number, percent}` writes `progress` as a percentage the way the locale writes one, such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole number, for a sentence that places the sign itself. */
   "prop:progressLabel"?: HelixHeadlessSteps["progressLabel"] | undefined;
-  /** What each step is marked with. */
-  "prop:variant"?: HelixHeadlessSteps["variant"] | undefined;
   /** The `value` of the current item. */
   "prop:active"?: HelixHeadlessSteps["active"] | undefined;
   /** The `value` of the item declared current in markup. */
@@ -24149,16 +24149,6 @@ Automatic is the default because showing a panel is usually cheap. Set this
 where it is not, so a reader arrowing past four tabs does not load four
 panels on the way. */
   "manual"?: HelixHeadlessTabs["manual"] | undefined;
-  /** The direction the tabs run. `vertical` sets them in a column beside the
-panels and tells a screen reader the list is vertical.
-
-Optional, so the resting row writes no attribute onto the host. */
-  "orientation"?: HelixHeadlessTabs["orientation"] | undefined;
-  /** Whether a strip with more tabs than fit shows a button at each end it can
-scroll toward. */
-  "scroll-controls"?: HelixHeadlessTabs["scrollControls"] | undefined;
-  /** Whether a strip with more tabs than fit shows a button at each end it can scroll toward. */
-  "scrollControls"?: HelixHeadlessTabs["scrollControls"] | undefined;
   /** How the row of tabs is drawn.
 
 Unset is a raised pill on the selected tab with nothing behind the row,
@@ -24181,7 +24171,17 @@ away.
 
 Reflected and left unset by default, so the host carries nothing a
 consumer's server markup does not already have. */
-  "variant"?: HelixHeadlessTabs["variant"] | undefined;
+  "marker"?: HelixHeadlessTabs["marker"] | undefined;
+  /** The direction the tabs run. `vertical` sets them in a column beside the
+panels and tells a screen reader the list is vertical.
+
+Optional, so the resting row writes no attribute onto the host. */
+  "orientation"?: HelixHeadlessTabs["orientation"] | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  "scroll-controls"?: HelixHeadlessTabs["scrollControls"] | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can scroll toward. */
+  "scrollControls"?: HelixHeadlessTabs["scrollControls"] | undefined;
   /** The `value` of the current item.
 
 Not `option.active`, which is the option the keyboard is on: that is a
@@ -24210,14 +24210,14 @@ export type HelixHeadlessTabsSolidJsProps = {
   "prop:label"?: HelixHeadlessTabs["label"] | undefined;
   /** Stops the arrow keys from selecting each tab they move to. By default, arrowing to a tab also selects it. */
   "prop:manual"?: HelixHeadlessTabs["manual"] | undefined;
+  /** How the row of tabs is drawn. */
+  "prop:marker"?: HelixHeadlessTabs["marker"] | undefined;
   /** The direction the tabs run. `vertical` sets them in a column beside the panels and tells a screen reader the list is vertical. */
   "prop:orientation"?: HelixHeadlessTabs["orientation"] | undefined;
   /** Whether a strip with more tabs than fit shows a button at each end it can scroll toward. */
   "bool:scroll-controls"?: HelixHeadlessTabs["scrollControls"] | undefined;
   /** Whether a strip with more tabs than fit shows a button at each end it can scroll toward. */
   "prop:scrollControls"?: HelixHeadlessTabs["scrollControls"] | undefined;
-  /** How the row of tabs is drawn. */
-  "prop:variant"?: HelixHeadlessTabs["variant"] | undefined;
   /** The `value` of the current item. */
   "prop:active"?: HelixHeadlessTabs["active"] | undefined;
   /** The `value` of the item declared current in markup. */
@@ -25184,6 +25184,21 @@ on why a wheel cannot do either. */
   "now-label"?: HelixHeadlessTimeInput["nowLabel"] | undefined;
   /** The words on the list's button that chooses the current time, drawn with `show-now`. */
   "nowLabel"?: HelixHeadlessTimeInput["nowLabel"] | undefined;
+  /** Whether the panel shows one list of times or a column for each part of the
+time.
+
+`list` offers whole times, which is what a product with slots or opening
+hours has. `wheels` splits them into an hour, a minute and a meridiem where
+the locale uses one, which is the only way to reach `23:45` without
+scrolling most of a day. `TimePicker` carries the longer note on the trade.
+
+**Optional rather than defaulted, which is not a style preference.** A
+reflecting property with a default writes its attribute onto every host the
+moment the element upgrades, including the ones a consumer rendered and did
+not touch, and React reads that as a hydration mismatch. The absent
+attribute *is* the list, which the stylesheet reads as the base rule, so
+only the departure has to be named. */
+  "picker"?: HelixHeadlessTimeInput["picker"] | undefined;
   /** Placeholder text shown before a time is entered. */
   "placeholder"?: HelixHeadlessTimeInput["placeholder"] | undefined;
   /** The message shown when a range holds more than two times.
@@ -25253,21 +25268,6 @@ is words for a developer. */
   "unreadable-message"?: HelixHeadlessTimeInput["unreadableMessage"] | undefined;
   /** The message for text that is no time, where `bad-input-message` is not set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time written as the field writes one, `2:30 PM` in `en-US` and `14:30` in `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
   "unreadableMessage"?: HelixHeadlessTimeInput["unreadableMessage"] | undefined;
-  /** Whether the panel shows one list of times or a column for each part of the
-time.
-
-`list` offers whole times, which is what a product with slots or opening
-hours has. `wheels` splits them into an hour, a minute and a meridiem where
-the locale uses one, which is the only way to reach `23:45` without
-scrolling most of a day. `TimePicker` carries the longer note on the trade.
-
-**Optional rather than defaulted, which is not a style preference.** A
-reflecting property with a default writes its attribute onto every host the
-moment the element upgrades, including the ones a consumer rendered and did
-not touch, and React reads that as a hydration mismatch. The absent
-attribute *is* the list, which the stylesheet reads as the base rule, so
-only the departure has to be named. */
-  "variant"?: HelixHeadlessTimeInput["variant"] | undefined;
   /** What a row of segments reports when the field is required and every
 segment is empty, where `value-missing-message` is not set. `{kind}` is
 `date` or `time`. */
@@ -25497,6 +25497,8 @@ export type HelixHeadlessTimeInputSolidJsProps = {
   "attr:now-label"?: HelixHeadlessTimeInput["nowLabel"] | undefined;
   /** The words on the list's button that chooses the current time, drawn with `show-now`. */
   "prop:nowLabel"?: HelixHeadlessTimeInput["nowLabel"] | undefined;
+  /** Whether the panel shows one list of times or a column for each part of the time. */
+  "prop:picker"?: HelixHeadlessTimeInput["picker"] | undefined;
   /** Placeholder text shown before a time is entered. */
   "prop:placeholder"?: HelixHeadlessTimeInput["placeholder"] | undefined;
   /** The message shown when a range holds more than two times. */
@@ -25539,8 +25541,6 @@ export type HelixHeadlessTimeInputSolidJsProps = {
   "attr:unreadable-message"?: HelixHeadlessTimeInput["unreadableMessage"] | undefined;
   /** The message for text that is no time, where `bad-input-message` is not set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time written as the field writes one, `2:30 PM` in `en-US` and `14:30` in `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
   "prop:unreadableMessage"?: HelixHeadlessTimeInput["unreadableMessage"] | undefined;
-  /** Whether the panel shows one list of times or a column for each part of the time. */
-  "prop:variant"?: HelixHeadlessTimeInput["variant"] | undefined;
   /** What a row of segments reports when the field is required and every segment is empty, where `value-missing-message` is not set. `{kind}` is `date` or `time`. */
   "attr:empty-message"?: HelixHeadlessTimeInput["emptyMessage"] | undefined;
   /** What a row of segments reports when the field is required and every segment is empty, where `value-missing-message` is not set. `{kind}` is `date` or `time`. */
@@ -25758,7 +25758,7 @@ behavior and a reader who has met one has met both. The alternative, a
 separate "from" and "to" control, is two answers to what a product asks as
 one, and it makes the between part impossible to show.
 
-**Neither works on wheels and the variant falls back.** A range on
+**Neither works on wheels and the picker falls back.** A range on
 wheels is two sets of wheels, which is two controls; a multiple is a set,
 and a wheel has exactly one value by construction. Rather than draw
 something that cannot say what it holds, `wheels` renders as a list
@@ -25769,6 +25769,32 @@ whenever a mode is set. */
   "now-label"?: HelixHeadlessTimePicker["nowLabel"] | undefined;
   /** The words on the button that chooses the current time, drawn with `show-now`. */
   "nowLabel"?: HelixHeadlessTimePicker["nowLabel"] | undefined;
+  /** Shows the times as one `list`, or as `wheels` with a column for each part
+of the time.
+
+`list` is the default and offers whole times, which is what a product with
+opening hours or slots actually has. `wheels` splits them into an hour, a
+minute and, where the locale uses one, a meridiem: three short columns
+instead of ninety-six rows, and the only way to reach `23:45` without
+scrolling most of a day.
+
+The trade is that a wheel cannot say which *combinations* are on offer. A
+list of half hours from nine to five is seventeen rows and every one of them
+is a time the product has; the same thing as columns is an hour column and a
+minute column, and nothing in either says the two are only valid together.
+The bounds are still enforced, so a reader can be refused after the fact,
+which is worse than not being offered it.
+
+So: `list` where the set is the point, `wheels` where any time is allowed
+and the range is a whole day.
+
+**Optional rather than defaulted, which is not a style preference.** A
+reflecting property with a default writes its attribute onto every host the
+moment the element upgrades, including the ones a consumer rendered and did
+not touch, and React reads that as a hydration mismatch. The absent
+attribute *is* the list, which the stylesheet reads as the base rule, so
+only the departure has to be named. */
+  "picker"?: HelixHeadlessTimePicker["picker"] | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with
 `max`, written in `locale`. */
   "range-overflow-message"?: HelixHeadlessTimePicker["rangeOverflowMessage"] | undefined;
@@ -25839,32 +25865,6 @@ Anything under five is a thousand rows and wants a field instead. */
   "value-missing-message"?: HelixHeadlessTimePicker["valueMissingMessage"] | undefined;
   /** The validation message for a required time picker with no time chosen. */
   "valueMissingMessage"?: HelixHeadlessTimePicker["valueMissingMessage"] | undefined;
-  /** Shows the times as one `list`, or as `wheels` with a column for each part
-of the time.
-
-`list` is the default and offers whole times, which is what a product with
-opening hours or slots actually has. `wheels` splits them into an hour, a
-minute and, where the locale uses one, a meridiem: three short columns
-instead of ninety-six rows, and the only way to reach `23:45` without
-scrolling most of a day.
-
-The trade is that a wheel cannot say which *combinations* are on offer. A
-list of half hours from nine to five is seventeen rows and every one of them
-is a time the product has; the same thing as columns is an hour column and a
-minute column, and nothing in either says the two are only valid together.
-The bounds are still enforced, so a reader can be refused after the fact,
-which is worse than not being offered it.
-
-So: `list` where the set is the point, `wheels` where any time is allowed
-and the range is a whole day.
-
-**Optional rather than defaulted, which is not a style preference.** A
-reflecting property with a default writes its attribute onto every host the
-moment the element upgrades, including the ones a consumer rendered and did
-not touch, and React reads that as a hydration mismatch. The absent
-attribute *is* the list, which the stylesheet reads as the base rule, so
-only the departure has to be named. */
-  "variant"?: HelixHeadlessTimePicker["variant"] | undefined;
   /** A message under the picker, such as what is wrong with the answer.
 
 While set, the picker is invalid and does not submit, as a field's
@@ -25998,6 +25998,8 @@ export type HelixHeadlessTimePickerSolidJsProps = {
   "attr:now-label"?: HelixHeadlessTimePicker["nowLabel"] | undefined;
   /** The words on the button that chooses the current time, drawn with `show-now`. */
   "prop:nowLabel"?: HelixHeadlessTimePicker["nowLabel"] | undefined;
+  /** Shows the times as one `list`, or as `wheels` with a column for each part of the time. */
+  "prop:picker"?: HelixHeadlessTimePicker["picker"] | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with `max`, written in `locale`. */
   "attr:range-overflow-message"?: HelixHeadlessTimePicker["rangeOverflowMessage"] | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with `max`, written in `locale`. */
@@ -26036,8 +26038,6 @@ export type HelixHeadlessTimePickerSolidJsProps = {
   "attr:value-missing-message"?: HelixHeadlessTimePicker["valueMissingMessage"] | undefined;
   /** The validation message for a required time picker with no time chosen. */
   "prop:valueMissingMessage"?: HelixHeadlessTimePicker["valueMissingMessage"] | undefined;
-  /** Shows the times as one `list`, or as `wheels` with a column for each part of the time. */
-  "prop:variant"?: HelixHeadlessTimePicker["variant"] | undefined;
   /** A message under the picker, such as what is wrong with the answer. */
   "prop:feedback"?: HelixHeadlessTimePicker["feedback"] | undefined;
   /** Whether the answer fails validation, marked on the controls a reader answers with and as `:state(invalid)`. */
@@ -30025,11 +30025,11 @@ interface Tags {
    * - `name`: The connection's name, unique on its board, which events use to refer to it.
    * - `path`: The route the line takes: `straight`, or `step` for right angles.
    * - `readonly`/`readOnly`: Prevents the connection from being removed.
+   * - `stroke`: How the line is drawn: `dashed` or `dotted`. Unset is solid.
    * - `to`: The name of the card the connection ends at.
    * - `to-end`/`toEnd`: The marker at the end of the connection. Unset is an arrow, as JSON Canvas specifies.
    * - `tone`: The meaning of the connection, shown by its color, in the same tones as other Helix components.
    * - `to-side`/`toSide`: The side of the `to` card the connection arrives at, when the document sets one.
-   * - `variant`: How the line is drawn: `dashed` or `dotted`. Unset is solid.
    *
    * ## CSS States
    *
@@ -31303,7 +31303,7 @@ interface Tags {
    * depend on color. Where a removed line is paired with the added line that
    * replaced it, the words each does not share with the other are the `changed`
    * part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,
-   * and its copy button copies the new version of the file. `variant="split"`
+   * and its copy button copies the new version of the file. `layout="split"`
    * shows the old version beside the new, each removal opposite its replacement.
    * `context-lines` folds each long run of unchanged lines, keeping that many
    * beside each change, behind a button that shows them and hides them again,
@@ -31356,12 +31356,12 @@ interface Tags {
    * - `hide-unchanged-label`/`hideUnchangedLabel`: The words of a button that hides a run of unchanged lines it showed, in a diff with `context-lines`. `{count}` is how many, and each language writes the forms it has.
    * - `label`: The block's name, usually a file name, drawn in the header.
    * - `language`: The language the code is written in, such as `ts` or `css`, handed to `highlight` as its second argument.
+   * - `layout`: How a diff's two versions are arranged. It has no effect without `diff`.
    * - `line-numbers`/`lineNumbers`: Whether the lines are numbered in a gutter beside the code.
    * - `mark-lines`/`markLines`: The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`. Each run is drawn as a band behind its lines. Not for a diff, which marks its own changes.
    * - `no-copy`/`noCopy`: Whether to leave the copy button off.
    * - `removed-lines`/`removedLines`: The lines to mark as deleted, as numbers and ranges counted from 1. Drawn as `mark-lines` is, in the removed color. Not for a diff.
    * - `show-unchanged-label`/`showUnchangedLabel`: The words of a button that shows a folded run of unchanged lines, in a diff with `context-lines`. `{count}` is how many.
-   * - `variant`: How a diff's two versions are arranged. It has no effect without `diff`.
    * - `wrap`: Whether long lines wrap. Without it they scroll.
    * - `wrap-label`/`wrapLabel`: The wrap button's name, which it keeps whether it is pressed or not.
    * - `wrappable`: Whether the header has a button that wraps the lines and unwraps them. The block draws a header for it even with no name.
@@ -31841,9 +31841,9 @@ interface Tags {
    * - `placeholder`: The text the field shows before a color is entered.
    * - `readonly`/`readOnly`: Whether the color is locked. A read-only field still submits its value.
    * - `swatches`: Colors offered under the picker, as a comma-separated list.
-   * - `swatch-label`/`swatchLabel`: What the swatch says in `variant="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written.
+   * - `swatch-label`/`swatchLabel`: What the swatch says in `trigger="swatch"`, after the field's label, once there is a color. `{name}` is the color's name, such as "vibrant red", and `{value}` the value as written.
+   * - `trigger`: Whether the field is a text box with a swatch on it, or only the swatch.
    * - `trigger-label`/`triggerLabel`: Accessible name for the control that opens the panel.
-   * - `variant`: Whether the field is a text box with a swatch on it, or only the swatch.
    * - `wheel`: Draws the panel's hue as a wheel around the square, in place of the hue ramp. See Color Picker's `wheel`.
    * - `bad-input-message`/`badInputMessage`: The message shown when the field holds text the picker cannot read as a date, a time, or a color.
    * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
@@ -31899,7 +31899,7 @@ interface Tags {
    *
    * ## CSS Parts
    *
-   * - `control`: The text input that holds the value. Absent in the `swatch` variant.
+   * - `control`: The text input that holds the value. Absent in the `swatch` trigger.
    * - `feedback`: The message that says what is wrong with the value.
    * - `field`: The box holding the text and the trigger.
    * - `hint`: Help text under the field, shown while there is no feedback.
@@ -38301,10 +38301,10 @@ interface Tags {
    * - `band-below`/`bandBelow`: The page width, in pixels, below which a card panel is shown as a band. At zero, it never is.
    * - `close-delay`/`closeDelay`: How long a pointer leaving the trigger and the panel waits before the panel closes, in milliseconds. The pointer needs the time to cross from the trigger to the panel. The attribute also takes a CSS time, such as `0.2s`.
    * - `label`: The section's name, used for the default trigger and the panel.
+   * - `layout`: Whether the panel is a card under the trigger or a band across the page.
    * - `open-delay`/`openDelay`: How long a pointer rests on the trigger before the panel opens, in milliseconds, under `open-on="hover"`. A pointer crossing the bar on its way somewhere else opens nothing. The attribute also takes a CSS time, such as `0.1s`.
    * - `open-on`/`openOn`: Whether hovering over the trigger opens the panel (`hover`), or only a press does (`click`).
    * - `placement`: The side of the trigger a card panel opens on, when there is room. It moves if that side does not fit. A band ignores it, since a band spans the page under its bar.
-   * - `variant`: Whether the panel is a card under the trigger or a band across the page.
    * - `default-open`/`defaultOpen`: Whether the element starts open. Ignored once `open` is written.
    * - `open`: Whether the element is open.
    *
@@ -38345,7 +38345,7 @@ interface Tags {
    * - `current`: A link in the panel carries `aria-current="page"`, so the trigger can show the section you are in.
    * - `from-end`: The panel opened in place of one earlier in the bar, so it can enter from the end side.
    * - `from-start`: The panel opened in place of one later in the bar, so it can enter from the start side.
-   * - `narrow`: The page is narrower than `band-below`, so the panel is shown as a band whatever its variant.
+   * - `narrow`: The page is narrower than `band-below`, so the panel is shown as a band whatever its layout.
    * - `open`: The panel is open, and the trigger is shown as current.
    * - `to-end`: The panel closed because one earlier in the bar opened, so it can leave toward the end.
    * - `to-start`: The panel closed because one later in the bar opened, so it can leave toward the start.
@@ -38899,8 +38899,8 @@ interface Tags {
    * - `arrows`: Whether the arrow keys move focus between the destinations.
    * - `fallback-label`/`fallbackLabel`: The name the element gives itself where `label` is empty.
    * - `label`: The landmark's name, read by screen readers.
+   * - `marker`: How the destinations are drawn, with `Tabs`' three values and for the same reasons.
    * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row for a header or a footer. The marker follows the current destination down the column as it does along the row.
-   * - `variant`: How the destinations are drawn, with `Tabs`' three values and for the same reasons.
    *
    * ## Slots
    *
@@ -39646,7 +39646,7 @@ interface Tags {
    * marked, so `a[aria-current]` and `a[data-depth="2"]` are the hooks for a
    * rule of yours.
    *
-   * **The rail.** `variant="rail"` draws a slim column of ticks at the edge of a
+   * **The rail.** `marker="rail"` draws a slim column of ticks at the edge of a
    * long scroll, one per link, with the section in view drawn longer and a deeper
    * level shorter. Hovering or focusing the rail opens a surface holding the
    * links, each on one line, and Escape closes it. A tap opens it too, and it stays
@@ -39660,9 +39660,9 @@ interface Tags {
    * - `fallback-label`/`fallbackLabel`: The name the element gives itself where `label` is empty.
    * - `follow`: Keeps the link of the section in view in view itself, in an outline longer than the box it scrolls in, such as a contents rail with a scrollbar of its own. Only that box moves: never the page, and never the box the sections scroll in.
    * - `label`: The navigation's name, read by screen readers. A heading in the `heading` slot names it in place of this.
+   * - `marker`: The rail form: a slim column of ticks, one per link, that opens on hover, focus, or a tap into a surface holding the links.
    * - `marks`: Which links are marked. `reading` marks the one section being read, the last whose heading has passed the reading line. `visible` marks every section with part of it on screen, and the mark runs across their links.
    * - `offset`: How far below the top of the scroll container a heading counts as reached, in pixels. The scroll container is the window or the panel the sections scroll in.
-   * - `variant`: The rail form: a slim column of ticks, one per link, that opens on hover, focus, or a tap into a surface holding the links.
    *
    * ## Events
    *
@@ -39687,9 +39687,9 @@ interface Tags {
    * - `heading`: The box holding the `heading` slot, above the navigation.
    * - `indicator`: The mark that moves to the link of the section in view. It carries that link's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw and animate yourself.
    * - `nav`: The navigation landmark.
-   * - `surface`: The box holding the heading and the navigation under `variant="rail"`, which opens over the ticks.
+   * - `surface`: The box holding the heading and the navigation under `marker="rail"`, which opens over the ticks.
    * - `tick`: One tick of the rail, for one link, with `data-current` while its section is in view. It carries the link's depth as `--outline-depth`.
-   * - `ticks`: The column of ticks under `variant="rail"`, hidden from assistive technology.
+   * - `ticks`: The column of ticks under `marker="rail"`, hidden from assistive technology.
    *
    * ## CSS States
    *
@@ -40466,7 +40466,7 @@ interface Tags {
    * ## Slots
    *
    * - `(default)`: The radio's label.
-   * - `icon`: An icon shown beside the label. With `variant="chip"`, the icon replaces the visible label, and the label becomes the name read by screen readers. The icon has its own slot so the chip can hide the label and show the icon.
+   * - `icon`: An icon shown beside the label. With `chip`, the icon replaces the visible label, and the label becomes the name read by screen readers. The icon has its own slot so the chip can hide the label and show the icon.
    * - `indicator`: An icon drawn inside the circle in place of the dot, such as a check mark.
    *
    * ## Methods
@@ -41484,12 +41484,12 @@ interface Tags {
    *
    * - `grow`: Grows the bars up from the floor the first time the chart comes into view with readings, each category a little after the one before it, so the drawing arrives the way a page's own picture does. The growth is fast at first, slows to rest, and never passes a bar's value.
    * - `grow-again`/`growAgain`: Grows the bars again each time the chart comes back into view after it left it, as a pane does when it is opened again, where `grow` alone grows them the first time only. Only a chart that grows takes it.
+   * - `layout`: How the bars stand.
    * - `no-box`/`noBox`: Draws no box: no edges, grid, numbers, or names, and in a `row` no floor, so the readings stand alone and fill the plot, as a picture on a product's own page does. The table, the summary, the tooltip, and the keys still carry every value, and a renderer draws no box either.
    * - `open-label`/`openLabel`: What the readout says for a place with no value. `{category}` and `{series}` name the place.
    * - `plot-label`/`plotLabel`: The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
    * - `stacked`: Stacks a category's series into one column, each block standing on the ones before it, so the column is as tall as the category's total, as a flat `Bar Chart` stacks them.
    * - `summary-label`/`summaryLabel`: The `summary` part's sentence. `{count}`, `{series}`, and `{categories}` are the number of bars, series, and categories, written in the locale, and `{low}` and `{high}` the lowest and the highest value.
-   * - `variant`: How the bars stand.
    * - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings, and the fallback of the `empty` slot.
    * - `loading`: Whether the readings are still on their way. The chart shows `loading-text` in place of an empty drawing until it has readings.
    * - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and there are no readings yet, and the fallback of the `loading` slot.
@@ -42845,9 +42845,9 @@ interface Tags {
    * - `fallback-label`/`fallbackLabel`: The name the element gives itself where `label` is empty.
    * - `label`: The sequence's name, read by screen readers.
    * - `linear`: Whether a reader has to finish each stage, or pass an `optional` one, before going on to the next.
+   * - `marker`: What each step is marked with.
    * - `orientation`: Which way the steps run.
    * - `progress-label`/`progressLabel`: What the `progress` part says to a screen reader. `{share, number, percent}` writes `progress` as a percentage the way the locale writes one, such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole number, for a sentence that places the sign itself.
-   * - `variant`: What each step is marked with.
    * - `active`: The `value` of the current item.
    * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
    * - `validate`: A function that answers whether a stage is valid, asked about the stage a reader is on before they move forward from it. Return `false` to keep them there. Not asked of an `optional` stage, nor for a move back. (property only)
@@ -43116,6 +43116,10 @@ interface Tags {
    * `separator` on its end edge, moved by dragging or with the arrow keys. In a
    * table with reorderable columns, each column has a grip that the table moves.
    *
+   * A sortable heading draws two chevrons after its words. The chevron for the
+   * current direction takes the heading's ink, so you can see which columns sort
+   * and which way the table is sorted.
+   *
    * ## Attributes & Properties
    *
    * - `field`: The key this column reads out of a row.
@@ -43151,6 +43155,9 @@ interface Tags {
    * - `grip-mark`: The icon on the grip.
    * - `resizer`: The edge that is dragged to change the width, when the column is resizable.
    * - `sort`: The button that a sortable heading renders as.
+   * - `sort-down`: The lower chevron of `sort-mark`, which shows a descending sort.
+   * - `sort-mark`: The two chevrons on a sortable heading. To remove them, set `display: none` on this part.
+   * - `sort-up`: The upper chevron of `sort-mark`, which shows an ascending sort.
    *
    * ## CSS States
    *
@@ -43594,9 +43601,9 @@ interface Tags {
    *
    * - `label`: The tab list's name, read by screen readers.
    * - `manual`: Stops the arrow keys from selecting each tab they move to. By default, arrowing to a tab also selects it.
+   * - `marker`: How the row of tabs is drawn.
    * - `orientation`: The direction the tabs run. `vertical` sets them in a column beside the panels and tells a screen reader the list is vertical.
    * - `scroll-controls`/`scrollControls`: Whether a strip with more tabs than fit shows a button at each end it can scroll toward.
-   * - `variant`: How the row of tabs is drawn.
    * - `active`: The `value` of the current item.
    * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
    *
@@ -44239,7 +44246,7 @@ interface Tags {
    * with `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, since
    * Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown
    * move through the times, and Enter, Space or a click chooses one and closes
-   * the panel. With `variant="wheels"` each wheel moves the time as you turn it,
+   * the panel. With `picker="wheels"` each wheel moves the time as you turn it,
    * the panel stays open, and Enter or Escape closes it.
    *
    * With `segmented`, the field is a row of segments in place of the text: an
@@ -44282,6 +44289,7 @@ interface Tags {
    * - `min`: Earliest time that can be chosen, as `HH:mm`.
    * - `mode`: How many times the field holds at once.
    * - `now-label`/`nowLabel`: The words on the list's button that chooses the current time, drawn with `show-now`.
+   * - `picker`: Whether the panel shows one list of times or a column for each part of the time.
    * - `placeholder`: Placeholder text shown before a time is entered.
    * - `range-length-message`/`rangeLengthMessage`: The message shown when a range holds more than two times.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a time is after `max`, with `{max}` filled in as the field displays it.
@@ -44294,7 +44302,6 @@ interface Tags {
    * - `trigger-label`/`triggerLabel`: The name of the button that opens the list, read by screen readers.
    * - `unavailable-message`/`unavailableMessage`: The message shown when `disable-times` bars a time.
    * - `unreadable-message`/`unreadableMessage`: The message for text that is no time, where `bad-input-message` is not set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time written as the field writes one, `2:30 PM` in `en-US` and `14:30` in `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
-   * - `variant`: Whether the panel shows one list of times or a column for each part of the time.
    * - `empty-message`/`emptyMessage`: What a row of segments reports when the field is required and every segment is empty, where `value-missing-message` is not set. `{kind}` is `date` or `time`.
    * - `empty-segment-label`/`emptySegmentLabel`: What a screen reader hears for a segment with nothing in it, which a sighted reader sees as dashes.
    * - `incomplete-message`/`incompleteMessage`: What a row of segments reports while some segments are set and others are not, where `bad-input-message` is not set. `{kind}` is `date` or `time`.
@@ -44446,7 +44453,7 @@ interface Tags {
   /**
    * Shows the times at each `step` as a `Listbox`, which provides the keyboard
    * behavior, typeahead, scrolling into view, and announcements for a set of
-   * options. `variant="wheels"` shows a column each for the hour, the minute, and
+   * options. `picker="wheels"` shows a column each for the hour, the minute, and
    * the meridiem, and one for the second with `seconds`. Left and Right move
    * between the wheels, and Tab does too.
    *
@@ -44516,6 +44523,7 @@ interface Tags {
    * - `minute-label`/`minuteLabel`: What the wheel of minutes is called, read by screen readers.
    * - `mode`: How many times can be held at once.
    * - `now-label`/`nowLabel`: The words on the button that chooses the current time, drawn with `show-now`.
+   * - `picker`: Shows the times as one `list`, or as `wheels` with a column for each part of the time.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a time after `max`. `{max}` is replaced with `max`, written in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a time before `min`. `{min}` is replaced with `min`, written in `locale`.
    * - `readonly`/`readOnly`: Blocks changes to the time. The value is still submitted with the form.
@@ -44527,7 +44535,6 @@ interface Tags {
    * - `step-mismatch-message`/`stepMismatchMessage`: The validation message for a time that `step` skips.
    * - `unavailable-message`/`unavailableMessage`: The validation message for a time that `disable-times` bars.
    * - `value-missing-message`/`valueMissingMessage`: The validation message for a required time picker with no time chosen.
-   * - `variant`: Shows the times as one `list`, or as `wheels` with a column for each part of the time.
    * - `feedback`: A message under the picker, such as what is wrong with the answer.
    * - `invalid`: Whether the answer fails validation, marked on the controls a reader answers with and as `:state(invalid)`.
    * - `default-value`/`defaultValue`: The value the control starts with. A form reset returns it to this value, and to the `value` attribute where this one is not written, as a native control resets to the `value` it declares.