@fusion.dev/helix 0.53.6 → 0.55.0

package/types/jsx.d.ts

@@ -1298,7 +1298,11 @@ never asked for a limit, including on the server. */
 export type HelixAvatarElementEvent<E = Event> = TypedEvent<HelixAvatar, E>;
 
 export type HelixAvatarProps = {
-  /** Whether the avatar is a circle or a rounded square. */
+  /** Whether the avatar is a circle or a rounded square.
+
+`rounded` and not `square`, which is the sharp-cornered pole of the same
+axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
+for it is the one the registry already has. */
   shape?: (HelixAvatar["shape"]) | undefined;
   /** Edge length of the avatar. */
   size?: (HelixAvatar["size"]) | undefined;
@@ -1327,7 +1331,11 @@ Mirrored to `data-status` rather than reflected, as `Image` explains. */
 };
 
 export type HelixAvatarSolidJsProps = {
-  /** Whether the avatar is a circle or a rounded square. */
+  /** Whether the avatar is a circle or a rounded square.
+
+`rounded` and not `square`, which is the sharp-cornered pole of the same
+axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
+for it is the one the registry already has. */
   "prop:shape"?: (HelixAvatar["shape"]) | undefined;
   /** Edge length of the avatar. */
   "prop:size"?: (HelixAvatar["size"]) | undefined;
@@ -1563,19 +1571,12 @@ shadow root names a table in that root rather than in the document. A
 Absent falls back to the table's own caption, which is usually the right
 words and is already written. */
   label?: (HelixBarChart["label"]) | undefined;
-  /** Whether the categories run down the side rather than along the bottom.
-
-Absent is columns. `horizontal` is the one to reach for when the category
-names are words rather than dates: a row of long names either overlaps or
-turns on its side, and neither is as readable as putting them down the left
-where they read normally. */
-  direction?: (HelixBarChart["direction"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none. `value` rules the axis the columns are *measured* on,
 `category` rules the axis they are *arranged* on with one through each
 group, and `both` draws both. Which of those is horizontal turns with
-`direction`, because a rule belongs to an axis and not to a screen edge.
+`orientation`, because a rule belongs to an axis and not to a screen edge.
 
 **A bare `gridlines` means `value`**, and so does anything unrecognized: an
 unrecognized value that draws nothing is indistinguishable from the
@@ -1611,6 +1612,16 @@ A line among columns measures from zero, because the columns do and they
 share the axis. So does a line on the second scale, which is that scale's
 own rule rather than this one's. */
   lines?: (HelixBarChart["lines"]) | undefined;
+  /** Whether the categories run down the side rather than along the bottom.
+
+Absent is columns. `horizontal` is the one to reach for when the category
+names are words rather than dates: a row of long names either overlaps or
+turns on its side, and neither is as readable as putting them down the left
+where they read normally.
+
+`orientation` and not `orientation`, which `Trend` uses in the same group for
+which way a number moved. */
+  orientation?: (HelixBarChart["orientation"]) | undefined;
   /** Which series are measured against a scale of their own, by name.
 
 Separated and matched the way `lines` is, against the column headings the
@@ -1765,19 +1776,12 @@ shadow root names a table in that root rather than in the document. A
 Absent falls back to the table's own caption, which is usually the right
 words and is already written. */
   "prop:label"?: (HelixBarChart["label"]) | undefined;
-  /** Whether the categories run down the side rather than along the bottom.
-
-Absent is columns. `horizontal` is the one to reach for when the category
-names are words rather than dates: a row of long names either overlaps or
-turns on its side, and neither is as readable as putting them down the left
-where they read normally. */
-  "prop:direction"?: (HelixBarChart["direction"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none. `value` rules the axis the columns are *measured* on,
 `category` rules the axis they are *arranged* on with one through each
 group, and `both` draws both. Which of those is horizontal turns with
-`direction`, because a rule belongs to an axis and not to a screen edge.
+`orientation`, because a rule belongs to an axis and not to a screen edge.
 
 **A bare `gridlines` means `value`**, and so does anything unrecognized: an
 unrecognized value that draws nothing is indistinguishable from the
@@ -1813,6 +1817,16 @@ A line among columns measures from zero, because the columns do and they
 share the axis. So does a line on the second scale, which is that scale's
 own rule rather than this one's. */
   "prop:lines"?: (HelixBarChart["lines"]) | undefined;
+  /** Whether the categories run down the side rather than along the bottom.
+
+Absent is columns. `horizontal` is the one to reach for when the category
+names are words rather than dates: a row of long names either overlaps or
+turns on its side, and neither is as readable as putting them down the left
+where they read normally.
+
+`orientation` and not `orientation`, which `Trend` uses in the same group for
+which way a number moved. */
+  "prop:orientation"?: (HelixBarChart["orientation"]) | undefined;
   /** Which series are measured against a scale of their own, by name.
 
 Separated and matched the way `lines` is, against the column headings the
@@ -2642,9 +2656,9 @@ where an arrow over a photograph belongs. */
   /** Which side of the slides the arrows sit on.
 
 The same four sides as `indicatorPlacement` and the same default, so a
-carousel that moves only one of them keeps the other where it was.
-`inline-start` or `inline-end` stacks the arrows into a column, which is
-what a vertical track usually wants.
+carousel that moves only one of them keeps the other where it was. `start`
+or `end` stacks the arrows into a column, which is what a vertical track
+usually wants.
 
 `overlay` puts them on the slides, at the track's own edges, which is what a
 full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2661,9 +2675,9 @@ chrome can go. */
   /** Which side of the slides the arrows sit on.
 
 The same four sides as `indicatorPlacement` and the same default, so a
-carousel that moves only one of them keeps the other where it was.
-`inline-start` or `inline-end` stacks the arrows into a column, which is
-what a vertical track usually wants.
+carousel that moves only one of them keeps the other where it was. `start`
+or `end` stacks the arrows into a column, which is what a vertical track
+usually wants.
 
 `overlay` puts them on the slides, at the track's own edges, which is what a
 full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2691,8 +2705,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
 is a column and the same question is `align-self`. A consumer should not
 have to know which of those two words their edge wanted.
 
-Logical, like the placement: `start` is the left in English and the right in
-Arabic on a horizontal run, and the top on a vertical one.
+Logical, like the placement's own `start` and `end`: `start` is the left in
+English and the right in Arabic on a horizontal run, and the top on a
+vertical one.
 
 Unset splits the row, dots to the start and arrows to the end, which is
 what keeps two items in one grid cell from landing on each other. Beside the
@@ -2715,8 +2730,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
 is a column and the same question is `align-self`. A consumer should not
 have to know which of those two words their edge wanted.
 
-Logical, like the placement: `start` is the left in English and the right in
-Arabic on a horizontal run, and the top on a vertical one.
+Logical, like the placement's own `start` and `end`: `start` is the left in
+English and the right in Arabic on a horizontal run, and the top on a
+vertical one.
 
 Unset splits the row, dots to the start and arrows to the end, which is
 what keeps two items in one grid cell from landing on each other. Beside the
@@ -2727,31 +2743,43 @@ exist to avoid. */
   indicatorAlign?: (HelixCarousel["indicatorAlign"]) | undefined;
   /** Which side of the slides the dots sit on.
 
-Unset is `block-end`, under them. `block-start` puts them above,
-`inline-start` and `inline-end` beside, where a run of dots becomes a
-column.
+Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+beside, where a run of dots becomes a column.
 
-**The sides of the content, not positions along a bar**, and logical names
-rather than `top`/`left`: an `inline-start` carousel should put its dots on
-the right in Arabic without being told.
+**The sides of the content, not positions along a bar.** `start` and `end`
+are the logical ones and they are logical because that axis flips: a
+carousel with its dots at the start should put them on the right in Arabic
+without being told. `top` and `bottom` are the block edges, which flip in
+no writing mode this library draws for, so the plain word is the honest one
+and `block-start` would be jargon standing in for it.
 
-Independent of `controlsPlacement`. Both default to the block end, where
-they share the row and split it, dots to the start and arrows to the end,
+**`Drawer` and `Toast` say it in exactly these four words**, and one
+vocabulary across the three is worth more than each family's own: a
+consumer who has placed a drawer knows where a carousel's dots go.
+
+Independent of `controlsPlacement`. Both default to the bottom, where they
+share the row and split it, dots to the start and arrows to the end,
 arrived at by two defaults rather than by a rule about the pair, so moving
 one leaves the other alone. */
   "indicator-placement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
   /** Which side of the slides the dots sit on.
 
-Unset is `block-end`, under them. `block-start` puts them above,
-`inline-start` and `inline-end` beside, where a run of dots becomes a
-column.
+Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+beside, where a run of dots becomes a column.
+
+**The sides of the content, not positions along a bar.** `start` and `end`
+are the logical ones and they are logical because that axis flips: a
+carousel with its dots at the start should put them on the right in Arabic
+without being told. `top` and `bottom` are the block edges, which flip in
+no writing mode this library draws for, so the plain word is the honest one
+and `block-start` would be jargon standing in for it.
 
-**The sides of the content, not positions along a bar**, and logical names
-rather than `top`/`left`: an `inline-start` carousel should put its dots on
-the right in Arabic without being told.
+**`Drawer` and `Toast` say it in exactly these four words**, and one
+vocabulary across the three is worth more than each family's own: a
+consumer who has placed a drawer knows where a carousel's dots go.
 
-Independent of `controlsPlacement`. Both default to the block end, where
-they share the row and split it, dots to the start and arrows to the end,
+Independent of `controlsPlacement`. Both default to the bottom, where they
+share the row and split it, dots to the start and arrows to the end,
 arrived at by two defaults rather than by a rule about the pair, so moving
 one leaves the other alone. */
   indicatorPlacement?: (HelixCarousel["indicatorPlacement"]) | undefined;
@@ -2960,9 +2988,9 @@ where an arrow over a photograph belongs. */
   /** Which side of the slides the arrows sit on.
 
 The same four sides as `indicatorPlacement` and the same default, so a
-carousel that moves only one of them keeps the other where it was.
-`inline-start` or `inline-end` stacks the arrows into a column, which is
-what a vertical track usually wants.
+carousel that moves only one of them keeps the other where it was. `start`
+or `end` stacks the arrows into a column, which is what a vertical track
+usually wants.
 
 `overlay` puts them on the slides, at the track's own edges, which is what a
 full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2979,9 +3007,9 @@ chrome can go. */
   /** Which side of the slides the arrows sit on.
 
 The same four sides as `indicatorPlacement` and the same default, so a
-carousel that moves only one of them keeps the other where it was.
-`inline-start` or `inline-end` stacks the arrows into a column, which is
-what a vertical track usually wants.
+carousel that moves only one of them keeps the other where it was. `start`
+or `end` stacks the arrows into a column, which is what a vertical track
+usually wants.
 
 `overlay` puts them on the slides, at the track's own edges, which is what a
 full-bleed carousel wants: the slide is the page and the controls are on it
@@ -3009,8 +3037,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
 is a column and the same question is `align-self`. A consumer should not
 have to know which of those two words their edge wanted.
 
-Logical, like the placement: `start` is the left in English and the right in
-Arabic on a horizontal run, and the top on a vertical one.
+Logical, like the placement's own `start` and `end`: `start` is the left in
+English and the right in Arabic on a horizontal run, and the top on a
+vertical one.
 
 Unset splits the row, dots to the start and arrows to the end, which is
 what keeps two items in one grid cell from landing on each other. Beside the
@@ -3033,8 +3062,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
 is a column and the same question is `align-self`. A consumer should not
 have to know which of those two words their edge wanted.
 
-Logical, like the placement: `start` is the left in English and the right in
-Arabic on a horizontal run, and the top on a vertical one.
+Logical, like the placement's own `start` and `end`: `start` is the left in
+English and the right in Arabic on a horizontal run, and the top on a
+vertical one.
 
 Unset splits the row, dots to the start and arrows to the end, which is
 what keeps two items in one grid cell from landing on each other. Beside the
@@ -3045,31 +3075,43 @@ exist to avoid. */
   "prop:indicatorAlign"?: (HelixCarousel["indicatorAlign"]) | undefined;
   /** Which side of the slides the dots sit on.
 
-Unset is `block-end`, under them. `block-start` puts them above,
-`inline-start` and `inline-end` beside, where a run of dots becomes a
-column.
+Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+beside, where a run of dots becomes a column.
+
+**The sides of the content, not positions along a bar.** `start` and `end`
+are the logical ones and they are logical because that axis flips: a
+carousel with its dots at the start should put them on the right in Arabic
+without being told. `top` and `bottom` are the block edges, which flip in
+no writing mode this library draws for, so the plain word is the honest one
+and `block-start` would be jargon standing in for it.
 
-**The sides of the content, not positions along a bar**, and logical names
-rather than `top`/`left`: an `inline-start` carousel should put its dots on
-the right in Arabic without being told.
+**`Drawer` and `Toast` say it in exactly these four words**, and one
+vocabulary across the three is worth more than each family's own: a
+consumer who has placed a drawer knows where a carousel's dots go.
 
-Independent of `controlsPlacement`. Both default to the block end, where
-they share the row and split it, dots to the start and arrows to the end,
+Independent of `controlsPlacement`. Both default to the bottom, where they
+share the row and split it, dots to the start and arrows to the end,
 arrived at by two defaults rather than by a rule about the pair, so moving
 one leaves the other alone. */
   "attr:indicator-placement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
   /** Which side of the slides the dots sit on.
 
-Unset is `block-end`, under them. `block-start` puts them above,
-`inline-start` and `inline-end` beside, where a run of dots becomes a
-column.
+Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+beside, where a run of dots becomes a column.
 
-**The sides of the content, not positions along a bar**, and logical names
-rather than `top`/`left`: an `inline-start` carousel should put its dots on
-the right in Arabic without being told.
+**The sides of the content, not positions along a bar.** `start` and `end`
+are the logical ones and they are logical because that axis flips: a
+carousel with its dots at the start should put them on the right in Arabic
+without being told. `top` and `bottom` are the block edges, which flip in
+no writing mode this library draws for, so the plain word is the honest one
+and `block-start` would be jargon standing in for it.
 
-Independent of `controlsPlacement`. Both default to the block end, where
-they share the row and split it, dots to the start and arrows to the end,
+**`Drawer` and `Toast` say it in exactly these four words**, and one
+vocabulary across the three is worth more than each family's own: a
+consumer who has placed a drawer knows where a carousel's dots go.
+
+Independent of `controlsPlacement`. Both default to the bottom, where they
+share the row and split it, dots to the start and arrows to the end,
 arrived at by two defaults rather than by a rule about the pair, so moving
 one leaves the other alone. */
   "prop:indicatorPlacement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
@@ -3772,19 +3814,31 @@ export type HelixCheckboxHelixBeforeToggleElementEvent =
   HelixCheckboxElementEvent<HelixBeforeToggleEvent>;
 
 export type HelixCheckboxProps = {
-  /** How the choice presents itself.
+  /** Where the choice's own surface ends.
+
+The question `separation` asks everywhere else, asked of one option, so it
+is that word: what these values pick is a surface, and `plain` is already
+the registry's own word for the answer this family used it for. `Radio`
+takes the same three for the same reason.
 
-- `plain` is the default and is never written: a box beside its words,
+- `plain` is the resting one and is never written: a box beside its words,
   which is what a list of choices should be almost always.
-- `card` puts it in a bounded surface, for options that need room to
+- `outlined` puts it in a bounded surface, for options that need room to
   explain themselves: a description, an icon, a price. It is the half a
   `data-card` link cannot do, because a link reports no value and belongs
   to no group, so a card that is genuinely an answer has to be this.
-
-The box stays in both. A card whose only marker was its own border would
-ask a reader to compare surfaces across a row to find the answer, and would
-leave nothing for a high-contrast display. */
-  variant?: (HelixCheckbox["variant"]) | undefined;
+- `filled` is that same card on a ground of its own with no edge, which is
+  what a column of options wants where a hairline around every one of them
+  is a grid of lines rather than a set of answers.
+
+**`elevated` is the one value of the axis this family does not take.** A
+raised choice competes with a dialog: the top layer is where a thing that
+interrupts you lives, and an option in a form is not one of those.
+
+The box stays in all of them. A card whose only marker was its own border
+would ask a reader to compare surfaces across a row to find the answer, and
+would leave nothing for a high-contrast display. */
+  separation?: (HelixCheckbox["separation"]) | undefined;
   /** Whether the control is checked.
 
 One property rather than two. Writing always applies;
@@ -3850,19 +3904,31 @@ Here rather than on each control. */
 };
 
 export type HelixCheckboxSolidJsProps = {
-  /** How the choice presents itself.
+  /** Where the choice's own surface ends.
 
-- `plain` is the default and is never written: a box beside its words,
+The question `separation` asks everywhere else, asked of one option, so it
+is that word: what these values pick is a surface, and `plain` is already
+the registry's own word for the answer this family used it for. `Radio`
+takes the same three for the same reason.
+
+- `plain` is the resting one and is never written: a box beside its words,
   which is what a list of choices should be almost always.
-- `card` puts it in a bounded surface, for options that need room to
+- `outlined` puts it in a bounded surface, for options that need room to
   explain themselves: a description, an icon, a price. It is the half a
   `data-card` link cannot do, because a link reports no value and belongs
   to no group, so a card that is genuinely an answer has to be this.
-
-The box stays in both. A card whose only marker was its own border would
-ask a reader to compare surfaces across a row to find the answer, and would
-leave nothing for a high-contrast display. */
-  "prop:variant"?: (HelixCheckbox["variant"]) | undefined;
+- `filled` is that same card on a ground of its own with no edge, which is
+  what a column of options wants where a hairline around every one of them
+  is a grid of lines rather than a set of answers.
+
+**`elevated` is the one value of the axis this family does not take.** A
+raised choice competes with a dialog: the top layer is where a thing that
+interrupts you lives, and an option in a form is not one of those.
+
+The box stays in all of them. A card whose only marker was its own border
+would ask a reader to compare surfaces across a row to find the answer, and
+would leave nothing for a high-contrast display. */
+  "prop:separation"?: (HelixCheckbox["separation"]) | undefined;
   /** Whether the control is checked.
 
 One property rather than two. Writing always applies;
@@ -6896,9 +6962,12 @@ the end edge instead, with the label on the start one, and in figures of one
 width so a column of numbers lines up by its digits. Only with
 `direction="row"`: stacked, a label and its value share one edge already.
 
-Flex's word for the same thing, and a grid rather than a flex row
-underneath, so the labels still share one column while the values share an
-end. */
+Flex's value for the same idea, under a shorter name than Flex's own:
+there it is `justify-content`, the CSS property it sets, and here the
+underlying layout is a grid handing an edge down to each item as a custom
+property, so the labels still share one column while the values share an
+end. Naming a property this does not set after it would be the wrong kind
+of precision. */
   justify?: (HelixDescriptionList["justify"]) | undefined;
   /** How wide the list is.
 
@@ -6934,9 +7003,12 @@ the end edge instead, with the label on the start one, and in figures of one
 width so a column of numbers lines up by its digits. Only with
 `direction="row"`: stacked, a label and its value share one edge already.
 
-Flex's word for the same thing, and a grid rather than a flex row
-underneath, so the labels still share one column while the values share an
-end. */
+Flex's value for the same idea, under a shorter name than Flex's own:
+there it is `justify-content`, the CSS property it sets, and here the
+underlying layout is a grid handing an edge down to each item as a custom
+property, so the labels still share one column while the values share an
+end. Naming a property this does not set after it would be the wrong kind
+of precision. */
   "prop:justify"?: (HelixDescriptionList["justify"]) | undefined;
   /** How wide the list is.
 
@@ -6979,17 +7051,6 @@ export type HelixDialogHelixBeforeOpenElementEvent =
   HelixDialogElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixDialogProps = {
-  /** Which way the panel's contents read.
-
-One property for the whole panel rather than one per region. The regions are
-never mixed in practice: a dialog that asks a short question centers its
-mark, its title, its sentence and its buttons together, and a dialog holding
-a form runs all four from the start. Three properties would be three ways to
-write the same two arrangements, and a fourth way to get one of them wrong.
-
-Unset is `start` and stays unset, so a reflected default cannot appear on a
-host whose server output never had it. */
-  align?: (HelixDialog["align"]) | undefined;
   /** How wide the panel is allowed to be.
 
 Steps rather than a number, because a dialog's width is a fact about what is
@@ -7006,10 +7067,48 @@ reflects, and a default would put `size="md"` into markup no consumer wrote.
 rule's own test is whether two of them sitting together could legitimately
 differ, and it is answering "a ragged row is unwritable". Two dialogs never
 sit together. One is on screen at a time, in the top layer, and it is the
-region rather than a control in one, which is the same reason `Avatar` and
-`Spinner` keep theirs. Not `appearance`, which says how a thing reads
-rather than how wide it is. */
+region rather than a control in one, which is the other half of the axis's
+domain: the rest of it is pictures, which are not controls either. Not
+`appearance`, which says how a thing reads rather than how wide it is. */
   size?: (HelixDialog["size"]) | undefined;
+  /** Which way the panel's contents read.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where things sit in a container, and they are named
+for the properties they mirror; this one is `text-align` on a panel of
+prose, and `Table.Column` answers the same question under the same name.
+One word for both questions is how a consumer who learned it on a layout
+writes it here and gets no error, a value a component does not have leaving
+the default in place and looking deliberate.
+
+One property for the whole panel rather than one per region. The regions are
+never mixed in practice: a dialog that asks a short question centers its
+mark, its title, its sentence and its buttons together, and a dialog holding
+a form runs all four from the start. Three properties would be three ways to
+write the same two arrangements, and a fourth way to get one of them wrong.
+
+Unset is `start` and stays unset, so a reflected default cannot appear on a
+host whose server output never had it. */
+  "text-align"?: (HelixDialog["textAlign"]) | undefined;
+  /** Which way the panel's contents read.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where things sit in a container, and they are named
+for the properties they mirror; this one is `text-align` on a panel of
+prose, and `Table.Column` answers the same question under the same name.
+One word for both questions is how a consumer who learned it on a layout
+writes it here and gets no error, a value a component does not have leaving
+the default in place and looking deliberate.
+
+One property for the whole panel rather than one per region. The regions are
+never mixed in practice: a dialog that asks a short question centers its
+mark, its title, its sentence and its buttons together, and a dialog holding
+a form runs all four from the start. Three properties would be three ways to
+write the same two arrangements, and a fourth way to get one of them wrong.
+
+Unset is `start` and stays unset, so a reflected default cannot appear on a
+host whose server output never had it. */
+  textAlign?: (HelixDialog["textAlign"]) | undefined;
   /** Whether the element is open.
 
 One property, not two, so `dialog.open` answers the question anyone
@@ -7084,17 +7183,6 @@ survives to it and a consumer reading one back gets what they wrote. */
 };
 
 export type HelixDialogSolidJsProps = {
-  /** Which way the panel's contents read.
-
-One property for the whole panel rather than one per region. The regions are
-never mixed in practice: a dialog that asks a short question centers its
-mark, its title, its sentence and its buttons together, and a dialog holding
-a form runs all four from the start. Three properties would be three ways to
-write the same two arrangements, and a fourth way to get one of them wrong.
-
-Unset is `start` and stays unset, so a reflected default cannot appear on a
-host whose server output never had it. */
-  "prop:align"?: (HelixDialog["align"]) | undefined;
   /** How wide the panel is allowed to be.
 
 Steps rather than a number, because a dialog's width is a fact about what is
@@ -7111,10 +7199,48 @@ reflects, and a default would put `size="md"` into markup no consumer wrote.
 rule's own test is whether two of them sitting together could legitimately
 differ, and it is answering "a ragged row is unwritable". Two dialogs never
 sit together. One is on screen at a time, in the top layer, and it is the
-region rather than a control in one, which is the same reason `Avatar` and
-`Spinner` keep theirs. Not `appearance`, which says how a thing reads
-rather than how wide it is. */
+region rather than a control in one, which is the other half of the axis's
+domain: the rest of it is pictures, which are not controls either. Not
+`appearance`, which says how a thing reads rather than how wide it is. */
   "prop:size"?: (HelixDialog["size"]) | undefined;
+  /** Which way the panel's contents read.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where things sit in a container, and they are named
+for the properties they mirror; this one is `text-align` on a panel of
+prose, and `Table.Column` answers the same question under the same name.
+One word for both questions is how a consumer who learned it on a layout
+writes it here and gets no error, a value a component does not have leaving
+the default in place and looking deliberate.
+
+One property for the whole panel rather than one per region. The regions are
+never mixed in practice: a dialog that asks a short question centers its
+mark, its title, its sentence and its buttons together, and a dialog holding
+a form runs all four from the start. Three properties would be three ways to
+write the same two arrangements, and a fourth way to get one of them wrong.
+
+Unset is `start` and stays unset, so a reflected default cannot appear on a
+host whose server output never had it. */
+  "attr:text-align"?: (HelixDialog["textAlign"]) | undefined;
+  /** Which way the panel's contents read.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where things sit in a container, and they are named
+for the properties they mirror; this one is `text-align` on a panel of
+prose, and `Table.Column` answers the same question under the same name.
+One word for both questions is how a consumer who learned it on a layout
+writes it here and gets no error, a value a component does not have leaving
+the default in place and looking deliberate.
+
+One property for the whole panel rather than one per region. The regions are
+never mixed in practice: a dialog that asks a short question centers its
+mark, its title, its sentence and its buttons together, and a dialog holding
+a form runs all four from the start. Three properties would be three ways to
+write the same two arrangements, and a fourth way to get one of them wrong.
+
+Unset is `start` and stays unset, so a reflected default cannot appear on a
+host whose server output never had it. */
+  "prop:textAlign"?: (HelixDialog["textAlign"]) | undefined;
   /** Whether the element is open.
 
 One property, not two, so `dialog.open` answers the question anyone
@@ -8566,31 +8692,115 @@ Here rather than on each control. */
 };
 
 export type HelixFlexProps = {
-  /** Alignment across the direction. */
-  align?: (HelixFlex["align"]) | undefined;
+  /** Alignment across the direction, which is `align-items`.
+
+**Named for the CSS property it sets, because it is that property.** A flex
+container is the one place where the box-alignment words are already the
+reader's, so a shorter name would be a second vocabulary for something they
+can already say, and `align` alone is the word four other families use for
+four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+
+**It also keeps the name out of the browser's way.** `align` is a legacy
+HTML presentational attribute mapped to `text-align` on any element that
+carries one, this one included: measured, an invented tag with
+`align="center"` computes centered text too, so it is nothing to do with
+being a known element. A row that carried it therefore centered the text
+inside every field in it, through a hint no rule here declares and none can
+see, and the fix is a name the platform has no opinion about rather than a
+guard against the hint. */
+  "align-items"?: (HelixFlex["alignItems"]) | undefined;
+  /** Alignment across the direction, which is `align-items`.
+
+**Named for the CSS property it sets, because it is that property.** A flex
+container is the one place where the box-alignment words are already the
+reader's, so a shorter name would be a second vocabulary for something they
+can already say, and `align` alone is the word four other families use for
+four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+
+**It also keeps the name out of the browser's way.** `align` is a legacy
+HTML presentational attribute mapped to `text-align` on any element that
+carries one, this one included: measured, an invented tag with
+`align="center"` computes centered text too, so it is nothing to do with
+being a known element. A row that carried it therefore centered the text
+inside every field in it, through a hint no rule here declares and none can
+see, and the fix is a name the platform has no opinion about rather than a
+guard against the hint. */
+  alignItems?: (HelixFlex["alignItems"]) | undefined;
   /** Whether items run across or down. */
   direction?: (HelixFlex["direction"]) | undefined;
   /** Space between items, named on the space scale. */
   gap?: (HelixFlex["gap"]) | undefined;
   /** Flows with surrounding text instead of taking the full width. */
   inline?: (HelixFlex["inline"]) | undefined;
-  /** Distribution along the direction. */
-  justify?: (HelixFlex["justify"]) | undefined;
+  /** Distribution along the direction, which is `justify-content`.
+
+Named for the property it sets, the way `alignItems` is. `between` and
+`around` drop the `space-` prefix and nothing else does, because those two
+are the only values whose CSS spelling is two words. */
+  "justify-content"?: (HelixFlex["justifyContent"]) | undefined;
+  /** Distribution along the direction, which is `justify-content`.
+
+Named for the property it sets, the way `alignItems` is. `between` and
+`around` drop the `space-` prefix and nothing else does, because those two
+are the only values whose CSS spelling is two words. */
+  justifyContent?: (HelixFlex["justifyContent"]) | undefined;
   /** Whether items wrap onto more lines. */
   wrap?: (HelixFlex["wrap"]) | undefined;
 };
 
 export type HelixFlexSolidJsProps = {
-  /** Alignment across the direction. */
-  "prop:align"?: (HelixFlex["align"]) | undefined;
+  /** Alignment across the direction, which is `align-items`.
+
+**Named for the CSS property it sets, because it is that property.** A flex
+container is the one place where the box-alignment words are already the
+reader's, so a shorter name would be a second vocabulary for something they
+can already say, and `align` alone is the word four other families use for
+four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+
+**It also keeps the name out of the browser's way.** `align` is a legacy
+HTML presentational attribute mapped to `text-align` on any element that
+carries one, this one included: measured, an invented tag with
+`align="center"` computes centered text too, so it is nothing to do with
+being a known element. A row that carried it therefore centered the text
+inside every field in it, through a hint no rule here declares and none can
+see, and the fix is a name the platform has no opinion about rather than a
+guard against the hint. */
+  "attr:align-items"?: (HelixFlex["alignItems"]) | undefined;
+  /** Alignment across the direction, which is `align-items`.
+
+**Named for the CSS property it sets, because it is that property.** A flex
+container is the one place where the box-alignment words are already the
+reader's, so a shorter name would be a second vocabulary for something they
+can already say, and `align` alone is the word four other families use for
+four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+
+**It also keeps the name out of the browser's way.** `align` is a legacy
+HTML presentational attribute mapped to `text-align` on any element that
+carries one, this one included: measured, an invented tag with
+`align="center"` computes centered text too, so it is nothing to do with
+being a known element. A row that carried it therefore centered the text
+inside every field in it, through a hint no rule here declares and none can
+see, and the fix is a name the platform has no opinion about rather than a
+guard against the hint. */
+  "prop:alignItems"?: (HelixFlex["alignItems"]) | undefined;
   /** Whether items run across or down. */
   "prop:direction"?: (HelixFlex["direction"]) | undefined;
   /** Space between items, named on the space scale. */
   "prop:gap"?: (HelixFlex["gap"]) | undefined;
   /** Flows with surrounding text instead of taking the full width. */
   "prop:inline"?: (HelixFlex["inline"]) | undefined;
-  /** Distribution along the direction. */
-  "prop:justify"?: (HelixFlex["justify"]) | undefined;
+  /** Distribution along the direction, which is `justify-content`.
+
+Named for the property it sets, the way `alignItems` is. `between` and
+`around` drop the `space-` prefix and nothing else does, because those two
+are the only values whose CSS spelling is two words. */
+  "attr:justify-content"?: (HelixFlex["justifyContent"]) | undefined;
+  /** Distribution along the direction, which is `justify-content`.
+
+Named for the property it sets, the way `alignItems` is. `between` and
+`around` drop the `space-` prefix and nothing else does, because those two
+are the only values whose CSS spelling is two words. */
+  "prop:justifyContent"?: (HelixFlex["justifyContent"]) | undefined;
   /** Whether items wrap onto more lines. */
   "prop:wrap"?: (HelixFlex["wrap"]) | undefined;
 
@@ -8716,8 +8926,34 @@ Empty is the runtime's own. */
 };
 
 export type HelixGridProps = {
-  /** Alignment of each cell within its row. */
-  align?: (HelixGrid["align"]) | undefined;
+  /** Alignment of each cell within its row, which is `align-items`.
+
+**Named for the CSS property it sets**, the way `Flex` is, and the same
+property on a grid: it places every cell in its row's track rather than
+placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+row of a grid are boxes of unrelated content and lining their first lines
+up is a thing a reader asks for between siblings in a row, not between
+cells in a table of them.
+
+There is no `justifyContent` here for the same reason: the tracks are
+`1fr`, so they already fill the row and there is nothing left over to
+distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+wide its tracks are. */
+  "align-items"?: (HelixGrid["alignItems"]) | undefined;
+  /** Alignment of each cell within its row, which is `align-items`.
+
+**Named for the CSS property it sets**, the way `Flex` is, and the same
+property on a grid: it places every cell in its row's track rather than
+placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+row of a grid are boxes of unrelated content and lining their first lines
+up is a thing a reader asks for between siblings in a row, not between
+cells in a table of them.
+
+There is no `justifyContent` here for the same reason: the tracks are
+`1fr`, so they already fill the row and there is nothing left over to
+distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+wide its tracks are. */
+  alignItems?: (HelixGrid["alignItems"]) | undefined;
   /** Fixed number of equal columns. */
   columns?: (HelixGrid["columns"]) | undefined;
   /** Space between cells, named on the space scale. */
@@ -8730,8 +8966,34 @@ is two intentions in one element. */
 };
 
 export type HelixGridSolidJsProps = {
-  /** Alignment of each cell within its row. */
-  "prop:align"?: (HelixGrid["align"]) | undefined;
+  /** Alignment of each cell within its row, which is `align-items`.
+
+**Named for the CSS property it sets**, the way `Flex` is, and the same
+property on a grid: it places every cell in its row's track rather than
+placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+row of a grid are boxes of unrelated content and lining their first lines
+up is a thing a reader asks for between siblings in a row, not between
+cells in a table of them.
+
+There is no `justifyContent` here for the same reason: the tracks are
+`1fr`, so they already fill the row and there is nothing left over to
+distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+wide its tracks are. */
+  "attr:align-items"?: (HelixGrid["alignItems"]) | undefined;
+  /** Alignment of each cell within its row, which is `align-items`.
+
+**Named for the CSS property it sets**, the way `Flex` is, and the same
+property on a grid: it places every cell in its row's track rather than
+placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+row of a grid are boxes of unrelated content and lining their first lines
+up is a thing a reader asks for between siblings in a row, not between
+cells in a table of them.
+
+There is no `justifyContent` here for the same reason: the tracks are
+`1fr`, so they already fill the row and there is nothing left over to
+distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+wide its tracks are. */
+  "prop:alignItems"?: (HelixGrid["alignItems"]) | undefined;
   /** Fixed number of equal columns. */
   "prop:columns"?: (HelixGrid["columns"]) | undefined;
   /** Space between cells, named on the space scale. */
@@ -9402,11 +9664,12 @@ export type HelixImageElementEvent<E = Event> = TypedEvent<HelixImage, E>;
 export type HelixImageProps = {
   /** Whether the corners are cut.
 
-A boolean rather than a radius, because the radius is a token and the
-question a consumer is answering is whether this picture is a card's
-surface or a page's. `--image-radius` moves it for the case that is
-neither. */
-  rounded?: (HelixImage["rounded"]) | undefined;
+The axis and not a boolean, because `rounded` is a registered word and a
+private spelling of a registry question is what `appearance` was retired
+for. Not a radius either: the radius is a token and the question a consumer
+is answering is whether this picture is a card's surface or a page's.
+`--image-radius` moves it for the case that is neither. */
+  shape?: (HelixImage["shape"]) | undefined;
   /** What it shows, for a reader who cannot see it.
 
 Empty is a real answer and means decoration. Omitting the attribute is not
@@ -9485,11 +9748,12 @@ resting state of a mirror is the attribute's absence. */
 export type HelixImageSolidJsProps = {
   /** Whether the corners are cut.
 
-A boolean rather than a radius, because the radius is a token and the
-question a consumer is answering is whether this picture is a card's
-surface or a page's. `--image-radius` moves it for the case that is
-neither. */
-  "prop:rounded"?: (HelixImage["rounded"]) | undefined;
+The axis and not a boolean, because `rounded` is a registered word and a
+private spelling of a registry question is what `appearance` was retired
+for. Not a radius either: the radius is a token and the question a consumer
+is answering is whether this picture is a card's surface or a page's.
+`--image-radius` moves it for the case that is neither. */
+  "prop:shape"?: (HelixImage["shape"]) | undefined;
   /** What it shows, for a reader who cannot see it.
 
 Empty is a real answer and means decoration. Omitting the attribute is not
@@ -10929,7 +11193,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
+  "band-below"?: (HelixMegamenu["bandBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
 A card is a panel hung off one word, and there is no room to hang anything
@@ -10953,7 +11217,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  fullBelow?: (HelixMegamenu["fullBelow"]) | undefined;
+  bandBelow?: (HelixMegamenu["bandBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixMegamenu["label"]) | undefined;
   /** Whether hovering the trigger opens the panel, or only a press does.
@@ -10973,16 +11237,23 @@ heavy enough that opening it on the way past is rude. */
   /** 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. `full` is the other shape navigations use: a band from edge to
+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.
 
-It changes where the panel goes as well as how it looks, 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. */
+**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?: (HelixMegamenu["variant"]) | undefined;
 
   /** Fired before it closes, and cancelable. */
@@ -11036,7 +11307,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "attr:full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
+  "attr:band-below"?: (HelixMegamenu["bandBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
 A card is a panel hung off one word, and there is no room to hang anything
@@ -11060,7 +11331,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "prop:fullBelow"?: (HelixMegamenu["fullBelow"]) | undefined;
+  "prop:bandBelow"?: (HelixMegamenu["bandBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   "prop:label"?: (HelixMegamenu["label"]) | undefined;
   /** Whether hovering the trigger opens the panel, or only a press does.
@@ -11080,16 +11351,23 @@ heavy enough that opening it on the way past is rude. */
   /** 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. `full` is the other shape navigations use: a band from edge to
+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.
 
-It changes where the panel goes as well as how it looks, 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. */
+**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. */
   "prop:variant"?: (HelixMegamenu["variant"]) | undefined;
   /** Fired before it closes, and cancelable. */
   "on:helix-before-close"?: ((
@@ -12620,6 +12898,13 @@ the name of the tool being run, or the file being read. */
   label?: (HelixOrb["label"]) | undefined;
   /** Diameter relative to the surrounding text.
 
+**`Loader`'s three steps, because the two are swapped for each other.** An
+orb and a spinner are the same job drawn differently, a wait a reader is
+looking at, and a product that replaces one with the other should not find
+that a step it was writing has stopped existing. `md` is the resting one
+and selects nothing, landing on the base rule the way a written resting
+value does everywhere else.
+
 Reflected because the stylesheet selects on it. The mesh is chosen from the
 rendered box rather than from this, so `--orb-size` and a consumer's own
 `inline-size` get the same treatment as the named steps. */
@@ -12646,6 +12931,13 @@ the name of the tool being run, or the file being read. */
   "prop:label"?: (HelixOrb["label"]) | undefined;
   /** Diameter relative to the surrounding text.
 
+**`Loader`'s three steps, because the two are swapped for each other.** An
+orb and a spinner are the same job drawn differently, a wait a reader is
+looking at, and a product that replaces one with the other should not find
+that a step it was writing has stopped existing. `md` is the resting one
+and selects nothing, landing on the base rule the way a written resting
+value does everywhere else.
+
 Reflected because the stylesheet selects on it. The mesh is chosen from the
 rendered box rather than from this, so `--orb-size` and a consumer's own
 `inline-size` get the same treatment as the named steps. */
@@ -13950,9 +14242,9 @@ export type HelixRadioProps = {
 Unnecessary under `chip`, which has no room for a circle beside its mark
 and hides it already.
 
-`card` only, and it is a graphic that goes rather than a radio: the control
-in the shadow root is untouched, so the row is still focusable, still
-reported to a screen reader, and still the thing a form submits.
+A separated choice only, and it is a graphic that goes rather than a radio:
+the control in the shadow root is untouched, so the row is still focusable,
+still reported to a screen reader, and still the thing a form submits.
 
 Safe because the card already carries the answer in its surface, a raised
 fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -13967,9 +14259,9 @@ card with no box loses the only thing that says you may pick several. */
 Unnecessary under `chip`, which has no room for a circle beside its mark
 and hides it already.
 
-`card` only, and it is a graphic that goes rather than a radio: the control
-in the shadow root is untouched, so the row is still focusable, still
-reported to a screen reader, and still the thing a form submits.
+A separated choice only, and it is a graphic that goes rather than a radio:
+the control in the shadow root is untouched, so the row is still focusable,
+still reported to a screen reader, and still the thing a form submits.
 
 Safe because the card already carries the answer in its surface, a raised
 fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -13979,21 +14271,41 @@ Not on `Checkbox`, deliberately. A radio card with no circle is still
 unmistakably one-of-many because its siblings behave that way; a checkbox
 card with no box loses the only thing that says you may pick several. */
   hideControl?: (HelixRadio["hideControl"]) | undefined;
-  /** How the choice presents itself.
+  /** Where the choice's own surface ends.
 
-- `plain` is the default and is never written: a circle beside its words,
-  which is what a list of choices should be almost always.
-- `card` puts it in a bounded surface, for options that need room to
+The question `separation` asks everywhere else, asked of one option, so it
+is that word: what these values pick is a surface, and `plain` is already
+the registry's own word for the answer this family used it for.
+
+- `plain` is the resting one and is never written: a circle beside its
+  words, which is what a list of choices should be almost always.
+- `outlined` puts it in a bounded surface, for options that need room to
   explain themselves: a description, an icon, a price. It is the half a
   `data-card` link cannot do, because a link reports no value and belongs
   to no group, so a card that is genuinely an answer has to be this.
-- `chip` is the answer as its own small surface, for a row of short
-  choices read at a glance. It hides the circle, the surface being the
-  whole mark, which is why `hide-control` says it is unnecessary here.
-
-The circle stays in both. A card whose only marker was its own border would
-ask a reader to compare surfaces across a row to find the answer, and would
-leave nothing for a high-contrast display. */
+- `filled` is that same card on a ground of its own with no edge, which is
+  what a column of choices wants where a hairline around every one of them
+  is a grid of lines rather than a set of answers.
+
+**`elevated` is the one value of the axis this family does not take.** A
+raised choice competes with a dialog: the top layer is where a thing that
+interrupts you lives, and an option in a form is not one of those, so a
+column of lifted cards reads as a stack of floating things none of which is
+settled.
+
+The circle stays in all of them. A card whose only marker was its own
+border would ask a reader to compare surfaces across a row to find the
+answer, and would leave nothing for a high-contrast display. */
+  separation?: (HelixRadio["separation"]) | undefined;
+  /** The answer as its own small surface, for a row of short choices read at a
+glance.
+
+**Not a separation, which is why it is still `variant`.** The other values
+pick where a surface ends around a row that keeps its circle and its words;
+a chip has neither. It hides the circle, the surface being the whole mark,
+which is why `hide-control` says it is unnecessary here, and it takes the
+words out of the flow to be the accessible name. That removes the
+distinction `separation` exists to make rather than answering it. */
   variant?: (HelixRadio["variant"]) | undefined;
   /** Whether this one can be chosen. */
   disabled?: (HelixRadio["disabled"]) | undefined;
@@ -14057,9 +14369,9 @@ export type HelixRadioSolidJsProps = {
 Unnecessary under `chip`, which has no room for a circle beside its mark
 and hides it already.
 
-`card` only, and it is a graphic that goes rather than a radio: the control
-in the shadow root is untouched, so the row is still focusable, still
-reported to a screen reader, and still the thing a form submits.
+A separated choice only, and it is a graphic that goes rather than a radio:
+the control in the shadow root is untouched, so the row is still focusable,
+still reported to a screen reader, and still the thing a form submits.
 
 Safe because the card already carries the answer in its surface, a raised
 fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -14074,9 +14386,9 @@ card with no box loses the only thing that says you may pick several. */
 Unnecessary under `chip`, which has no room for a circle beside its mark
 and hides it already.
 
-`card` only, and it is a graphic that goes rather than a radio: the control
-in the shadow root is untouched, so the row is still focusable, still
-reported to a screen reader, and still the thing a form submits.
+A separated choice only, and it is a graphic that goes rather than a radio:
+the control in the shadow root is untouched, so the row is still focusable,
+still reported to a screen reader, and still the thing a form submits.
 
 Safe because the card already carries the answer in its surface, a raised
 fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -14086,21 +14398,41 @@ Not on `Checkbox`, deliberately. A radio card with no circle is still
 unmistakably one-of-many because its siblings behave that way; a checkbox
 card with no box loses the only thing that says you may pick several. */
   "prop:hideControl"?: (HelixRadio["hideControl"]) | undefined;
-  /** How the choice presents itself.
+  /** Where the choice's own surface ends.
 
-- `plain` is the default and is never written: a circle beside its words,
-  which is what a list of choices should be almost always.
-- `card` puts it in a bounded surface, for options that need room to
+The question `separation` asks everywhere else, asked of one option, so it
+is that word: what these values pick is a surface, and `plain` is already
+the registry's own word for the answer this family used it for.
+
+- `plain` is the resting one and is never written: a circle beside its
+  words, which is what a list of choices should be almost always.
+- `outlined` puts it in a bounded surface, for options that need room to
   explain themselves: a description, an icon, a price. It is the half a
   `data-card` link cannot do, because a link reports no value and belongs
   to no group, so a card that is genuinely an answer has to be this.
-- `chip` is the answer as its own small surface, for a row of short
-  choices read at a glance. It hides the circle, the surface being the
-  whole mark, which is why `hide-control` says it is unnecessary here.
-
-The circle stays in both. A card whose only marker was its own border would
-ask a reader to compare surfaces across a row to find the answer, and would
-leave nothing for a high-contrast display. */
+- `filled` is that same card on a ground of its own with no edge, which is
+  what a column of choices wants where a hairline around every one of them
+  is a grid of lines rather than a set of answers.
+
+**`elevated` is the one value of the axis this family does not take.** A
+raised choice competes with a dialog: the top layer is where a thing that
+interrupts you lives, and an option in a form is not one of those, so a
+column of lifted cards reads as a stack of floating things none of which is
+settled.
+
+The circle stays in all of them. A card whose only marker was its own
+border would ask a reader to compare surfaces across a row to find the
+answer, and would leave nothing for a high-contrast display. */
+  "prop:separation"?: (HelixRadio["separation"]) | undefined;
+  /** The answer as its own small surface, for a row of short choices read at a
+glance.
+
+**Not a separation, which is why it is still `variant`.** The other values
+pick where a surface ends around a row that keeps its circle and its words;
+a chip has neither. It hides the circle, the surface being the whole mark,
+which is why `hide-control` says it is unnecessary here, and it takes the
+words out of the flow to be the accessible name. That removes the
+distinction `separation` exists to make rather than answering it. */
   "prop:variant"?: (HelixRadio["variant"]) | undefined;
   /** Whether this one can be chosen. */
   "prop:disabled"?: (HelixRadio["disabled"]) | undefined;
@@ -14169,23 +14501,28 @@ export type HelixRatingHelixBeforeChangeElementEvent =
   HelixRatingElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixRatingProps = {
-  /** Which mark the row is drawn with.
-
-`marks` is the star, and is what a rating means to most readers. `dots`
-drops the glyph for a plain circle, which says how much rather than how
-good: a star carries a judgment that a level of spice, a difficulty or a
-confidence has not earned.
-
-Both are one shape repeated and clipped to the score, so halves work in
-either, and both are only a choice of drawing. A scale whose marks are
+  /** The geometry one mark is drawn to.
+
+The registry's word, because the question is the registry's: `Avatar`,
+`Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
+their own thing is cut to under this name, and `dots` is already a value
+the axis holds. What is picked here is the outline of one mark and nothing
+else, which is a shape and not a component-specific choice.
+
+`dots` drops the glyph for a plain circle, which says how much rather than
+how good: a star carries a judgment that a level of spice, a difficulty or
+a confidence has not earned. Either way it is one shape repeated and
+clipped to the score, so halves work in both. A scale whose marks are
 *different* drawings is a set of choices rather than a quantity: that is
 `Radio.Group`, whose options already carry a value and a name each.
 
-**Undefaulted, because it reflects.** A default of `marks` writes
-`variant="marks"` onto every server-rendered rating, which React holds no
-prop for and reports as a hydration mismatch. The stylesheet names only
-`dots`, so an unset one draws marks anyway. */
-  variant?: (HelixRating["variant"]) | undefined;
+**The star is the resting one and has no word**, which is the rule every
+axis follows and is also what this family needed anyway: it reflects, so a
+default would write the resting value onto every server-rendered rating,
+an attribute React holds no prop for and so a hydration mismatch for each
+one. The stylesheet names only `dots`, so an unset one draws the star by
+landing on the base rule. */
+  shape?: (HelixRating["shape"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "default-value"?: (HelixRating["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -14343,23 +14680,28 @@ form would submit it. */
 };
 
 export type HelixRatingSolidJsProps = {
-  /** Which mark the row is drawn with.
-
-`marks` is the star, and is what a rating means to most readers. `dots`
-drops the glyph for a plain circle, which says how much rather than how
-good: a star carries a judgment that a level of spice, a difficulty or a
-confidence has not earned.
-
-Both are one shape repeated and clipped to the score, so halves work in
-either, and both are only a choice of drawing. A scale whose marks are
+  /** The geometry one mark is drawn to.
+
+The registry's word, because the question is the registry's: `Avatar`,
+`Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
+their own thing is cut to under this name, and `dots` is already a value
+the axis holds. What is picked here is the outline of one mark and nothing
+else, which is a shape and not a component-specific choice.
+
+`dots` drops the glyph for a plain circle, which says how much rather than
+how good: a star carries a judgment that a level of spice, a difficulty or
+a confidence has not earned. Either way it is one shape repeated and
+clipped to the score, so halves work in both. A scale whose marks are
 *different* drawings is a set of choices rather than a quantity: that is
 `Radio.Group`, whose options already carry a value and a name each.
 
-**Undefaulted, because it reflects.** A default of `marks` writes
-`variant="marks"` onto every server-rendered rating, which React holds no
-prop for and reports as a hydration mismatch. The stylesheet names only
-`dots`, so an unset one draws marks anyway. */
-  "prop:variant"?: (HelixRating["variant"]) | undefined;
+**The star is the resting one and has no word**, which is the rule every
+axis follows and is also what this family needed anyway: it reflects, so a
+default would write the resting value onto every server-rendered rating,
+an attribute React holds no prop for and so a hydration mismatch for each
+one. The stylesheet names only `dots`, so an unset one draws the star by
+landing on the base rule. */
+  "prop:shape"?: (HelixRating["shape"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "attr:default-value"?: (HelixRating["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -15185,11 +15527,11 @@ takes, where a trigger's loudness is its frame rather than its ink.
 `outlined` is what the unset frame already draws, so writing it would be
 writing the resting state out.
 
-**The other three fields want this too and do not have it yet.** `Input`,
-`Textarea` and `Combobox` wear the same frame from the same shared
-stylesheet, and an inline one of each is as reasonable as an inline select.
-They are left alone rather than swept, because each has a different thing
-inside the frame and guessing at three is how an axis ends up meaning four
+**Every field wearing `field-frame.css` wants this too and does not have it
+yet**, which this trigger is not one of: it draws its own frame below. An
+inline number input in a toolbar is as reasonable as an inline select. They
+are left alone rather than swept, because each has a different thing inside
+the frame and guessing at a set of them is how an axis ends up meaning four
 things, which is the fault `appearance` was retired for. */
   emphasis?: (HelixSelect["emphasis"]) | undefined;
   /** Whether the element is open.
@@ -15328,11 +15670,11 @@ takes, where a trigger's loudness is its frame rather than its ink.
 `outlined` is what the unset frame already draws, so writing it would be
 writing the resting state out.
 
-**The other three fields want this too and do not have it yet.** `Input`,
-`Textarea` and `Combobox` wear the same frame from the same shared
-stylesheet, and an inline one of each is as reasonable as an inline select.
-They are left alone rather than swept, because each has a different thing
-inside the frame and guessing at three is how an axis ends up meaning four
+**Every field wearing `field-frame.css` wants this too and does not have it
+yet**, which this trigger is not one of: it draws its own frame below. An
+inline number input in a toolbar is as reasonable as an inline select. They
+are left alone rather than swept, because each has a different thing inside
+the frame and guessing at a set of them is how an axis ends up meaning four
 things, which is the fault `appearance` was retired for. */
   "prop:emphasis"?: (HelixSelect["emphasis"]) | undefined;
   /** Whether the element is open.
@@ -16791,26 +17133,6 @@ export type HelixTableColumnHelixBeforeResizeElementEvent =
   HelixTableColumnElementEvent<HelixBeforeResizeEvent>;
 
 export type HelixTableColumnProps = {
-  /** Which edge the values line up against.
-
-`end` is what a column of numbers wants, so digits of the same magnitude
-sit above each other. Left unset the cell inherits the table's own
-alignment, which is `start` for text in either writing direction.
-`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-consumer wrote, so the table writes nothing onto them: it publishes the
-edge to each cell under this column as `--table-cell-align`, which
-`@fusion.dev/helix` reads. The heading is this element's own, and
-`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-inline end, so in a right-to-left table it is the left.
-
-**Reflected, because the heading is drawn by a stylesheet and has no other
-way to learn it.** Set as a property, which is how React sets it, an
-unreflected `align` left no attribute to select on, so the heading stayed at
-the start over a column of digits set to the end. It is the author's
-declaration and nothing moves it afterwards, so an attribute cannot come to
-disagree with the element, which is the reason `open` records a custom
-state instead. No default, so an unset column writes nothing onto its host. */
-  align?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
 Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -16845,6 +17167,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
 `false` reflects as no attribute at all, so an unset column writes nothing
 onto its host. */
   sortable?: (HelixTableColumn["sortable"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "text-align"?: (HelixTableColumn["textAlign"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  textAlign?: (HelixTableColumn["textAlign"]) | undefined;
   /** The track this column takes, as CSS.
 
 A single track value, so anything valid in `grid-template-columns` works:
@@ -16893,26 +17271,6 @@ correct default: the raw value is what an API sorted by. */
 };
 
 export type HelixTableColumnSolidJsProps = {
-  /** Which edge the values line up against.
-
-`end` is what a column of numbers wants, so digits of the same magnitude
-sit above each other. Left unset the cell inherits the table's own
-alignment, which is `start` for text in either writing direction.
-`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-consumer wrote, so the table writes nothing onto them: it publishes the
-edge to each cell under this column as `--table-cell-align`, which
-`@fusion.dev/helix` reads. The heading is this element's own, and
-`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-inline end, so in a right-to-left table it is the left.
-
-**Reflected, because the heading is drawn by a stylesheet and has no other
-way to learn it.** Set as a property, which is how React sets it, an
-unreflected `align` left no attribute to select on, so the heading stayed at
-the start over a column of digits set to the end. It is the author's
-declaration and nothing moves it afterwards, so an attribute cannot come to
-disagree with the element, which is the reason `open` records a custom
-state instead. No default, so an unset column writes nothing onto its host. */
-  "prop:align"?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
 Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -16947,6 +17305,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
 `false` reflects as no attribute at all, so an unset column writes nothing
 onto its host. */
   "prop:sortable"?: (HelixTableColumn["sortable"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "attr:text-align"?: (HelixTableColumn["textAlign"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "prop:textAlign"?: (HelixTableColumn["textAlign"]) | undefined;
   /** The track this column takes, as CSS.
 
 A single track value, so anything valid in `grid-template-columns` works:
@@ -21795,6 +22209,10 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `shape`: Whether the avatar is a circle or a rounded square.
+   *
+   * `rounded` and not `square`, which is the sharp-cornered pole of the same
+   * axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
+   * for it is the one the registry already has.
    * - `size`: Edge length of the avatar.
    * - `name`: Name of the person or entity.
    *
@@ -22079,18 +22497,12 @@ export type CustomElements = {
    *
    * Absent falls back to the table's own caption, which is usually the right
    * words and is already written.
-   * - `direction`: Whether the categories run down the side rather than along the bottom.
-   *
-   * Absent is columns. `horizontal` is the one to reach for when the category
-   * names are words rather than dates: a row of long names either overlaps or
-   * turns on its side, and neither is as readable as putting them down the left
-   * where they read normally.
    * - `gridlines`: Which rules are drawn across the plot, if any.
    *
    * Absent draws none. `value` rules the axis the columns are *measured* on,
    * `category` rules the axis they are *arranged* on with one through each
    * group, and `both` draws both. Which of those is horizontal turns with
-   * `direction`, because a rule belongs to an axis and not to a screen edge.
+   * `orientation`, because a rule belongs to an axis and not to a screen edge.
    *
    * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
    * unrecognized value that draws nothing is indistinguishable from the
@@ -22124,6 +22536,15 @@ export type CustomElements = {
    * A line among columns measures from zero, because the columns do and they
    * share the axis. So does a line on the second scale, which is that scale's
    * own rule rather than this one's.
+   * - `orientation`: Whether the categories run down the side rather than along the bottom.
+   *
+   * Absent is columns. `horizontal` is the one to reach for when the category
+   * names are words rather than dates: a row of long names either overlaps or
+   * turns on its side, and neither is as readable as putting them down the left
+   * where they read normally.
+   *
+   * `orientation` and not `orientation`, which `Trend` uses in the same group for
+   * which way a number moved.
    * - `secondary`: Which series are measured against a scale of their own, by name.
    *
    * Separated and matched the way `lines` is, against the column headings the
@@ -23092,9 +23513,9 @@ export type CustomElements = {
    * - `controls-placement`/`controlsPlacement`: Which side of the slides the arrows sit on.
    *
    * The same four sides as `indicatorPlacement` and the same default, so a
-   * carousel that moves only one of them keeps the other where it was.
-   * `inline-start` or `inline-end` stacks the arrows into a column, which is
-   * what a vertical track usually wants.
+   * carousel that moves only one of them keeps the other where it was. `start`
+   * or `end` stacks the arrows into a column, which is what a vertical track
+   * usually wants.
    *
    * `overlay` puts them on the slides, at the track's own edges, which is what a
    * full-bleed carousel wants: the slide is the page and the controls are on it
@@ -23121,8 +23542,9 @@ export type CustomElements = {
    * is a column and the same question is `align-self`. A consumer should not
    * have to know which of those two words their edge wanted.
    *
-   * Logical, like the placement: `start` is the left in English and the right in
-   * Arabic on a horizontal run, and the top on a vertical one.
+   * Logical, like the placement's own `start` and `end`: `start` is the left in
+   * English and the right in Arabic on a horizontal run, and the top on a
+   * vertical one.
    *
    * Unset splits the row, dots to the start and arrows to the end, which is
    * what keeps two items in one grid cell from landing on each other. Beside the
@@ -23132,16 +23554,22 @@ export type CustomElements = {
    * exist to avoid.
    * - `indicator-placement`/`indicatorPlacement`: Which side of the slides the dots sit on.
    *
-   * Unset is `block-end`, under them. `block-start` puts them above,
-   * `inline-start` and `inline-end` beside, where a run of dots becomes a
-   * column.
+   * Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+   * beside, where a run of dots becomes a column.
+   *
+   * **The sides of the content, not positions along a bar.** `start` and `end`
+   * are the logical ones and they are logical because that axis flips: a
+   * carousel with its dots at the start should put them on the right in Arabic
+   * without being told. `top` and `bottom` are the block edges, which flip in
+   * no writing mode this library draws for, so the plain word is the honest one
+   * and `block-start` would be jargon standing in for it.
    *
-   * **The sides of the content, not positions along a bar**, and logical names
-   * rather than `top`/`left`: an `inline-start` carousel should put its dots on
-   * the right in Arabic without being told.
+   * **`Drawer` and `Toast` say it in exactly these four words**, and one
+   * vocabulary across the three is worth more than each family's own: a
+   * consumer who has placed a drawer knows where a carousel's dots go.
    *
-   * Independent of `controlsPlacement`. Both default to the block end, where
-   * they share the row and split it, dots to the start and arrows to the end,
+   * Independent of `controlsPlacement`. Both default to the bottom, where they
+   * share the row and split it, dots to the start and arrows to the end,
    * arrived at by two defaults rather than by a rule about the pair, so moving
    * one leaves the other alone.
    * - `autoplay`: Whether the carousel advances on its own.
@@ -23901,18 +24329,30 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: How the choice presents itself.
+   * - `separation`: Where the choice's own surface ends.
    *
-   * - `plain` is the default and is never written: a box beside its words,
+   * The question `separation` asks everywhere else, asked of one option, so it
+   * is that word: what these values pick is a surface, and `plain` is already
+   * the registry's own word for the answer this family used it for. `Radio`
+   * takes the same three for the same reason.
+   *
+   * - `plain` is the resting one and is never written: a box beside its words,
    *   which is what a list of choices should be almost always.
-   * - `card` puts it in a bounded surface, for options that need room to
+   * - `outlined` puts it in a bounded surface, for options that need room to
    *   explain themselves: a description, an icon, a price. It is the half a
    *   `data-card` link cannot do, because a link reports no value and belongs
    *   to no group, so a card that is genuinely an answer has to be this.
+   * - `filled` is that same card on a ground of its own with no edge, which is
+   *   what a column of options wants where a hairline around every one of them
+   *   is a grid of lines rather than a set of answers.
+   *
+   * **`elevated` is the one value of the axis this family does not take.** A
+   * raised choice competes with a dialog: the top layer is where a thing that
+   * interrupts you lives, and an option in a form is not one of those.
    *
-   * The box stays in both. A card whose only marker was its own border would
-   * ask a reader to compare surfaces across a row to find the answer, and would
-   * leave nothing for a high-contrast display.
+   * The box stays in all of them. A card whose only marker was its own border
+   * would ask a reader to compare surfaces across a row to find the answer, and
+   * would leave nothing for a high-contrast display.
    * - `checked`: Whether the control is checked.
    *
    * One property rather than two. Writing always applies;
@@ -24832,9 +25272,8 @@ export type CustomElements = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -26431,9 +26870,12 @@ export type CustomElements = {
    * width so a column of numbers lines up by its digits. Only with
    * `direction="row"`: stacked, a label and its value share one edge already.
    *
-   * Flex's word for the same thing, and a grid rather than a flex row
-   * underneath, so the labels still share one column while the values share an
-   * end.
+   * Flex's value for the same idea, under a shorter name than Flex's own:
+   * there it is `justify-content`, the CSS property it sets, and here the
+   * underlying layout is a grid handing an edge down to each item as a custom
+   * property, so the labels still share one column while the values share an
+   * end. Naming a property this does not set after it would be the wrong kind
+   * of precision.
    * - `width`: How wide the list is.
    *
    * Absent, it fills the row it is in. `auto` is as wide as its widest pair,
@@ -26515,16 +26957,6 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which way the panel's contents read.
-   *
-   * One property for the whole panel rather than one per region. The regions are
-   * never mixed in practice: a dialog that asks a short question centers its
-   * mark, its title, its sentence and its buttons together, and a dialog holding
-   * a form runs all four from the start. Three properties would be three ways to
-   * write the same two arrangements, and a fourth way to get one of them wrong.
-   *
-   * Unset is `start` and stays unset, so a reflected default cannot appear on a
-   * host whose server output never had it.
    * - `size`: How wide the panel is allowed to be.
    *
    * Steps rather than a number, because a dialog's width is a fact about what is
@@ -26541,9 +26973,27 @@ export type CustomElements = {
    * rule's own test is whether two of them sitting together could legitimately
    * differ, and it is answering "a ragged row is unwritable". Two dialogs never
    * sit together. One is on screen at a time, in the top layer, and it is the
-   * region rather than a control in one, which is the same reason `Avatar` and
-   * `Spinner` keep theirs. Not `appearance`, which says how a thing reads
-   * rather than how wide it is.
+   * region rather than a control in one, which is the other half of the axis's
+   * domain: the rest of it is pictures, which are not controls either. Not
+   * `appearance`, which says how a thing reads rather than how wide it is.
+   * - `text-align`/`textAlign`: Which way the panel's contents read.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where things sit in a container, and they are named
+   * for the properties they mirror; this one is `text-align` on a panel of
+   * prose, and `Table.Column` answers the same question under the same name.
+   * One word for both questions is how a consumer who learned it on a layout
+   * writes it here and gets no error, a value a component does not have leaving
+   * the default in place and looking deliberate.
+   *
+   * One property for the whole panel rather than one per region. The regions are
+   * never mixed in practice: a dialog that asks a short question centers its
+   * mark, its title, its sentence and its buttons together, and a dialog holding
+   * a form runs all four from the start. Three properties would be three ways to
+   * write the same two arrangements, and a fourth way to get one of them wrong.
+   *
+   * Unset is `start` and stays unset, so a reflected default cannot appear on a
+   * host whose server output never had it.
    * - `open`: Whether the element is open.
    *
    * One property, not two, so `dialog.open` answers the question anyone
@@ -28329,11 +28779,30 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Alignment across the direction.
+   * - `align-items`/`alignItems`: Alignment across the direction, which is `align-items`.
+   *
+   * **Named for the CSS property it sets, because it is that property.** A flex
+   * container is the one place where the box-alignment words are already the
+   * reader's, so a shorter name would be a second vocabulary for something they
+   * can already say, and `align` alone is the word four other families use for
+   * four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+   *
+   * **It also keeps the name out of the browser's way.** `align` is a legacy
+   * HTML presentational attribute mapped to `text-align` on any element that
+   * carries one, this one included: measured, an invented tag with
+   * `align="center"` computes centered text too, so it is nothing to do with
+   * being a known element. A row that carried it therefore centered the text
+   * inside every field in it, through a hint no rule here declares and none can
+   * see, and the fix is a name the platform has no opinion about rather than a
+   * guard against the hint.
    * - `direction`: Whether items run across or down.
    * - `gap`: Space between items, named on the space scale.
    * - `inline`: Flows with surrounding text instead of taking the full width.
-   * - `justify`: Distribution along the direction.
+   * - `justify-content`/`justifyContent`: Distribution along the direction, which is `justify-content`.
+   *
+   * Named for the property it sets, the way `alignItems` is. `between` and
+   * `around` drop the `space-` prefix and nothing else does, because those two
+   * are the only values whose CSS spelling is two words.
    * - `wrap`: Whether items wrap onto more lines.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -28466,7 +28935,19 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Alignment of each cell within its row.
+   * - `align-items`/`alignItems`: Alignment of each cell within its row, which is `align-items`.
+   *
+   * **Named for the CSS property it sets**, the way `Flex` is, and the same
+   * property on a grid: it places every cell in its row's track rather than
+   * placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+   * row of a grid are boxes of unrelated content and lining their first lines
+   * up is a thing a reader asks for between siblings in a row, not between
+   * cells in a table of them.
+   *
+   * There is no `justifyContent` here for the same reason: the tracks are
+   * `1fr`, so they already fill the row and there is nothing left over to
+   * distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+   * wide its tracks are.
    * - `columns`: Fixed number of equal columns.
    * - `gap`: Space between cells, named on the space scale.
    * - `min`: Minimum column width, filling as many as fit.
@@ -29085,12 +29566,13 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `rounded`: Whether the corners are cut.
+   * - `shape`: Whether the corners are cut.
    *
-   * A boolean rather than a radius, because the radius is a token and the
-   * question a consumer is answering is whether this picture is a card's
-   * surface or a page's. `--image-radius` moves it for the case that is
-   * neither.
+   * The axis and not a boolean, because `rounded` is a registered word and a
+   * private spelling of a registry question is what `appearance` was retired
+   * for. Not a radius either: the radius is a token and the question a consumer
+   * is answering is whether this picture is a card's surface or a page's.
+   * `--image-radius` moves it for the case that is neither.
    * - `alt`: What it shows, for a reader who cannot see it.
    *
    * Empty is a real answer and means decoration. Omitting the attribute is not
@@ -29183,7 +29665,7 @@ export type CustomElements = {
    * - `--image-fit`: How the picture fills it. (default: `undefined`)
    * - `--image-placeholder-color`: The resting surface behind both stand-ins. (default: `undefined`)
    * - `--image-position`: Which part survives a crop. (default: `undefined`)
-   * - `--image-radius`: Corner radius, under `rounded`. (default: `undefined`)
+   * - `--image-radius`: Corner radius, under `shape="rounded"`. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -29664,10 +30146,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -30502,7 +30983,7 @@ export type CustomElements = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
-   * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
+   * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
    *
    * A card is a panel hung off one word, and there is no room to hang anything
    * off a word on a phone: the columns do not shrink past
@@ -30535,16 +31016,23 @@ export type CustomElements = {
    * - `variant`: 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. `full` is the other shape navigations use: a band from edge to
+   * 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.
    *
-   * It changes where the panel goes as well as how it looks, 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.
+   * **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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -30618,7 +31106,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
+   * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -32253,6 +32741,13 @@ export type CustomElements = {
    * the name of the tool being run, or the file being read.
    * - `size`: Diameter relative to the surrounding text.
    *
+   * **`Loader`'s three steps, because the two are swapped for each other.** An
+   * orb and a spinner are the same job drawn differently, a wait a reader is
+   * looking at, and a product that replaces one with the other should not find
+   * that a step it was writing has stopped existing. `md` is the resting one
+   * and selects nothing, landing on the base rule the way a written resting
+   * value does everywhere else.
+   *
    * Reflected because the stylesheet selects on it. The mesh is chosen from the
    * rendered box rather than from this, so `--orb-size` and a consumer's own
    * `inline-size` get the same treatment as the named steps.
@@ -33196,6 +33691,8 @@ export type CustomElements = {
    * - `--progress-color`: Fill of the part that is done. (default: `undefined`)
    * - `--progress-ring-size`: Diameter of the ring appearance. (default: `undefined`)
    * - `--progress-ring-width`: Thickness of its stroke. (default: `undefined`)
+   * - `--progress-size`: Thickness of the bar. (default: `undefined`)
+   * - `--progress-track-color`: Fill of the part that is not. (default: `undefined`)
    * - `--progress-fraction`: The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. (default: `undefined`)
    *
    * ## CSS Parts
@@ -33563,9 +34060,9 @@ export type CustomElements = {
    * Unnecessary under `chip`, which has no room for a circle beside its mark
    * and hides it already.
    *
-   * `card` only, and it is a graphic that goes rather than a radio: the control
-   * in the shadow root is untouched, so the row is still focusable, still
-   * reported to a screen reader, and still the thing a form submits.
+   * A separated choice only, and it is a graphic that goes rather than a radio:
+   * the control in the shadow root is untouched, so the row is still focusable,
+   * still reported to a screen reader, and still the thing a form submits.
    *
    * Safe because the card already carries the answer in its surface, a raised
    * fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -33574,21 +34071,40 @@ export type CustomElements = {
    * Not on `Checkbox`, deliberately. A radio card with no circle is still
    * unmistakably one-of-many because its siblings behave that way; a checkbox
    * card with no box loses the only thing that says you may pick several.
-   * - `variant`: How the choice presents itself.
+   * - `separation`: Where the choice's own surface ends.
    *
-   * - `plain` is the default and is never written: a circle beside its words,
-   *   which is what a list of choices should be almost always.
-   * - `card` puts it in a bounded surface, for options that need room to
+   * The question `separation` asks everywhere else, asked of one option, so it
+   * is that word: what these values pick is a surface, and `plain` is already
+   * the registry's own word for the answer this family used it for.
+   *
+   * - `plain` is the resting one and is never written: a circle beside its
+   *   words, which is what a list of choices should be almost always.
+   * - `outlined` puts it in a bounded surface, for options that need room to
    *   explain themselves: a description, an icon, a price. It is the half a
    *   `data-card` link cannot do, because a link reports no value and belongs
    *   to no group, so a card that is genuinely an answer has to be this.
-   * - `chip` is the answer as its own small surface, for a row of short
-   *   choices read at a glance. It hides the circle, the surface being the
-   *   whole mark, which is why `hide-control` says it is unnecessary here.
-   *
-   * The circle stays in both. A card whose only marker was its own border would
-   * ask a reader to compare surfaces across a row to find the answer, and would
-   * leave nothing for a high-contrast display.
+   * - `filled` is that same card on a ground of its own with no edge, which is
+   *   what a column of choices wants where a hairline around every one of them
+   *   is a grid of lines rather than a set of answers.
+   *
+   * **`elevated` is the one value of the axis this family does not take.** A
+   * raised choice competes with a dialog: the top layer is where a thing that
+   * interrupts you lives, and an option in a form is not one of those, so a
+   * column of lifted cards reads as a stack of floating things none of which is
+   * settled.
+   *
+   * The circle stays in all of them. A card whose only marker was its own
+   * border would ask a reader to compare surfaces across a row to find the
+   * answer, and would leave nothing for a high-contrast display.
+   * - `variant`: The answer as its own small surface, for a row of short choices read at a
+   * glance.
+   *
+   * **Not a separation, which is why it is still `variant`.** The other values
+   * pick where a surface ends around a row that keeps its circle and its words;
+   * a chip has neither. It hides the circle, the surface being the whole mark,
+   * which is why `hide-control` says it is unnecessary here, and it takes the
+   * words out of the flow to be the accessible name. That removes the
+   * distinction `separation` exists to make rather than answering it.
    * - `disabled`: Whether this one can be chosen.
    * - `selected`: Whether this is the current one.
    *
@@ -33697,10 +34213,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -33719,22 +34234,27 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: Which mark the row is drawn with.
+   * - `shape`: The geometry one mark is drawn to.
    *
-   * `marks` is the star, and is what a rating means to most readers. `dots`
-   * drops the glyph for a plain circle, which says how much rather than how
-   * good: a star carries a judgment that a level of spice, a difficulty or a
-   * confidence has not earned.
+   * The registry's word, because the question is the registry's: `Avatar`,
+   * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
+   * their own thing is cut to under this name, and `dots` is already a value
+   * the axis holds. What is picked here is the outline of one mark and nothing
+   * else, which is a shape and not a component-specific choice.
    *
-   * Both are one shape repeated and clipped to the score, so halves work in
-   * either, and both are only a choice of drawing. A scale whose marks are
+   * `dots` drops the glyph for a plain circle, which says how much rather than
+   * how good: a star carries a judgment that a level of spice, a difficulty or
+   * a confidence has not earned. Either way it is one shape repeated and
+   * clipped to the score, so halves work in both. A scale whose marks are
    * *different* drawings is a set of choices rather than a quantity: that is
    * `Radio.Group`, whose options already carry a value and a name each.
    *
-   * **Undefaulted, because it reflects.** A default of `marks` writes
-   * `variant="marks"` onto every server-rendered rating, which React holds no
-   * prop for and reports as a hydration mismatch. The stylesheet names only
-   * `dots`, so an unset one draws marks anyway.
+   * **The star is the resting one and has no word**, which is the rule every
+   * axis follows and is also what this family needed anyway: it reflects, so a
+   * default would write the resting value onto every server-rendered rating,
+   * an attribute React holds no prop for and so a hydration mismatch for each
+   * one. The stylesheet names only `dots`, so an unset one draws the star by
+   * landing on the base rule.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -34833,11 +35353,11 @@ export type CustomElements = {
    * `outlined` is what the unset frame already draws, so writing it would be
    * writing the resting state out.
    *
-   * **The other three fields want this too and do not have it yet.** `Input`,
-   * `Textarea` and `Combobox` wear the same frame from the same shared
-   * stylesheet, and an inline one of each is as reasonable as an inline select.
-   * They are left alone rather than swept, because each has a different thing
-   * inside the frame and guessing at three is how an axis ends up meaning four
+   * **Every field wearing `field-frame.css` wants this too and does not have it
+   * yet**, which this trigger is not one of: it draws its own frame below. An
+   * inline number input in a toolbar is as reasonable as an inline select. They
+   * are left alone rather than swept, because each has a different thing inside
+   * the frame and guessing at a set of them is how an axis ends up meaning four
    * things, which is the fault `appearance` was retired for.
    * - `open`: Whether the element is open.
    *
@@ -36321,10 +36841,8 @@ export type CustomElements = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -36510,8 +37028,7 @@ export type CustomElements = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -36588,25 +37105,6 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which edge the values line up against.
-   *
-   * `end` is what a column of numbers wants, so digits of the same magnitude
-   * sit above each other. Left unset the cell inherits the table's own
-   * alignment, which is `start` for text in either writing direction.
-   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-   * consumer wrote, so the table writes nothing onto them: it publishes the
-   * edge to each cell under this column as `--table-cell-align`, which
-   * `@fusion.dev/helix` reads. The heading is this element's own, and
-   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-   * inline end, so in a right-to-left table it is the left.
-   *
-   * **Reflected, because the heading is drawn by a stylesheet and has no other
-   * way to learn it.** Set as a property, which is how React sets it, an
-   * unreflected `align` left no attribute to select on, so the heading stayed at
-   * the start over a column of digits set to the end. It is the author's
-   * declaration and nothing moves it afterwards, so an attribute cannot come to
-   * disagree with the element, which is the reason `open` records a custom
-   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -36638,6 +37136,33 @@ export type CustomElements = {
    * how React sets it, an unreflected `sortable` left no attribute to match.
    * `false` reflects as no attribute at all, so an unset column writes nothing
    * onto its host.
+   * - `text-align`/`textAlign`: Which edge the values line up against.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where a thing sits in a container, and they are
+   * named for the properties they mirror; this is `text-align` down a column of
+   * values, and `Dialog` answers the same question under the same name. One
+   * word for both questions is how a consumer who learned it on a layout writes
+   * it here and gets no error, a value a component does not have leaving the
+   * default in place and looking deliberate.
+   *
+   * `end` is what a column of numbers wants, so digits of the same magnitude
+   * sit above each other. Left unset the cell inherits the table's own
+   * alignment, which is `start` for text in either writing direction.
+   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+   * consumer wrote, so the table writes nothing onto them: it publishes the
+   * edge to each cell under this column as `--table-cell-align`, which
+   * `@fusion.dev/helix` reads. The heading is this element's own, and
+   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+   * inline end, so in a right-to-left table it is the left.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected edge left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `width`: The track this column takes, as CSS.
    *
    * A single track value, so anything valid in `grid-template-columns` works:
@@ -38218,11 +38743,10 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -38663,12 +39187,11 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The moving marker behind the selected item.
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -40245,8 +40768,7 @@ export type CustomElements = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.
@@ -41314,6 +41836,10 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `shape`: Whether the avatar is a circle or a rounded square.
+   *
+   * `rounded` and not `square`, which is the sharp-cornered pole of the same
+   * axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
+   * for it is the one the registry already has.
    * - `size`: Edge length of the avatar.
    * - `name`: Name of the person or entity.
    *
@@ -41606,18 +42132,12 @@ export type CustomElementsSolidJs = {
    *
    * Absent falls back to the table's own caption, which is usually the right
    * words and is already written.
-   * - `direction`: Whether the categories run down the side rather than along the bottom.
-   *
-   * Absent is columns. `horizontal` is the one to reach for when the category
-   * names are words rather than dates: a row of long names either overlaps or
-   * turns on its side, and neither is as readable as putting them down the left
-   * where they read normally.
    * - `gridlines`: Which rules are drawn across the plot, if any.
    *
    * Absent draws none. `value` rules the axis the columns are *measured* on,
    * `category` rules the axis they are *arranged* on with one through each
    * group, and `both` draws both. Which of those is horizontal turns with
-   * `direction`, because a rule belongs to an axis and not to a screen edge.
+   * `orientation`, because a rule belongs to an axis and not to a screen edge.
    *
    * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
    * unrecognized value that draws nothing is indistinguishable from the
@@ -41651,6 +42171,15 @@ export type CustomElementsSolidJs = {
    * A line among columns measures from zero, because the columns do and they
    * share the axis. So does a line on the second scale, which is that scale's
    * own rule rather than this one's.
+   * - `orientation`: Whether the categories run down the side rather than along the bottom.
+   *
+   * Absent is columns. `horizontal` is the one to reach for when the category
+   * names are words rather than dates: a row of long names either overlaps or
+   * turns on its side, and neither is as readable as putting them down the left
+   * where they read normally.
+   *
+   * `orientation` and not `orientation`, which `Trend` uses in the same group for
+   * which way a number moved.
    * - `secondary`: Which series are measured against a scale of their own, by name.
    *
    * Separated and matched the way `lines` is, against the column headings the
@@ -42642,9 +43171,9 @@ export type CustomElementsSolidJs = {
    * - `controls-placement`/`controlsPlacement`: Which side of the slides the arrows sit on.
    *
    * The same four sides as `indicatorPlacement` and the same default, so a
-   * carousel that moves only one of them keeps the other where it was.
-   * `inline-start` or `inline-end` stacks the arrows into a column, which is
-   * what a vertical track usually wants.
+   * carousel that moves only one of them keeps the other where it was. `start`
+   * or `end` stacks the arrows into a column, which is what a vertical track
+   * usually wants.
    *
    * `overlay` puts them on the slides, at the track's own edges, which is what a
    * full-bleed carousel wants: the slide is the page and the controls are on it
@@ -42671,8 +43200,9 @@ export type CustomElementsSolidJs = {
    * is a column and the same question is `align-self`. A consumer should not
    * have to know which of those two words their edge wanted.
    *
-   * Logical, like the placement: `start` is the left in English and the right in
-   * Arabic on a horizontal run, and the top on a vertical one.
+   * Logical, like the placement's own `start` and `end`: `start` is the left in
+   * English and the right in Arabic on a horizontal run, and the top on a
+   * vertical one.
    *
    * Unset splits the row, dots to the start and arrows to the end, which is
    * what keeps two items in one grid cell from landing on each other. Beside the
@@ -42682,16 +43212,22 @@ export type CustomElementsSolidJs = {
    * exist to avoid.
    * - `indicator-placement`/`indicatorPlacement`: Which side of the slides the dots sit on.
    *
-   * Unset is `block-end`, under them. `block-start` puts them above,
-   * `inline-start` and `inline-end` beside, where a run of dots becomes a
-   * column.
+   * Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+   * beside, where a run of dots becomes a column.
+   *
+   * **The sides of the content, not positions along a bar.** `start` and `end`
+   * are the logical ones and they are logical because that axis flips: a
+   * carousel with its dots at the start should put them on the right in Arabic
+   * without being told. `top` and `bottom` are the block edges, which flip in
+   * no writing mode this library draws for, so the plain word is the honest one
+   * and `block-start` would be jargon standing in for it.
    *
-   * **The sides of the content, not positions along a bar**, and logical names
-   * rather than `top`/`left`: an `inline-start` carousel should put its dots on
-   * the right in Arabic without being told.
+   * **`Drawer` and `Toast` say it in exactly these four words**, and one
+   * vocabulary across the three is worth more than each family's own: a
+   * consumer who has placed a drawer knows where a carousel's dots go.
    *
-   * Independent of `controlsPlacement`. Both default to the block end, where
-   * they share the row and split it, dots to the start and arrows to the end,
+   * Independent of `controlsPlacement`. Both default to the bottom, where they
+   * share the row and split it, dots to the start and arrows to the end,
    * arrived at by two defaults rather than by a rule about the pair, so moving
    * one leaves the other alone.
    * - `autoplay`: Whether the carousel advances on its own.
@@ -43465,18 +44001,30 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: How the choice presents itself.
+   * - `separation`: Where the choice's own surface ends.
+   *
+   * The question `separation` asks everywhere else, asked of one option, so it
+   * is that word: what these values pick is a surface, and `plain` is already
+   * the registry's own word for the answer this family used it for. `Radio`
+   * takes the same three for the same reason.
    *
-   * - `plain` is the default and is never written: a box beside its words,
+   * - `plain` is the resting one and is never written: a box beside its words,
    *   which is what a list of choices should be almost always.
-   * - `card` puts it in a bounded surface, for options that need room to
+   * - `outlined` puts it in a bounded surface, for options that need room to
    *   explain themselves: a description, an icon, a price. It is the half a
    *   `data-card` link cannot do, because a link reports no value and belongs
    *   to no group, so a card that is genuinely an answer has to be this.
+   * - `filled` is that same card on a ground of its own with no edge, which is
+   *   what a column of options wants where a hairline around every one of them
+   *   is a grid of lines rather than a set of answers.
    *
-   * The box stays in both. A card whose only marker was its own border would
-   * ask a reader to compare surfaces across a row to find the answer, and would
-   * leave nothing for a high-contrast display.
+   * **`elevated` is the one value of the axis this family does not take.** A
+   * raised choice competes with a dialog: the top layer is where a thing that
+   * interrupts you lives, and an option in a form is not one of those.
+   *
+   * The box stays in all of them. A card whose only marker was its own border
+   * would ask a reader to compare surfaces across a row to find the answer, and
+   * would leave nothing for a high-contrast display.
    * - `checked`: Whether the control is checked.
    *
    * One property rather than two. Writing always applies;
@@ -44407,9 +44955,8 @@ export type CustomElementsSolidJs = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -46028,9 +46575,12 @@ export type CustomElementsSolidJs = {
    * width so a column of numbers lines up by its digits. Only with
    * `direction="row"`: stacked, a label and its value share one edge already.
    *
-   * Flex's word for the same thing, and a grid rather than a flex row
-   * underneath, so the labels still share one column while the values share an
-   * end.
+   * Flex's value for the same idea, under a shorter name than Flex's own:
+   * there it is `justify-content`, the CSS property it sets, and here the
+   * underlying layout is a grid handing an edge down to each item as a custom
+   * property, so the labels still share one column while the values share an
+   * end. Naming a property this does not set after it would be the wrong kind
+   * of precision.
    * - `width`: How wide the list is.
    *
    * Absent, it fills the row it is in. `auto` is as wide as its widest pair,
@@ -46115,16 +46665,6 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which way the panel's contents read.
-   *
-   * One property for the whole panel rather than one per region. The regions are
-   * never mixed in practice: a dialog that asks a short question centers its
-   * mark, its title, its sentence and its buttons together, and a dialog holding
-   * a form runs all four from the start. Three properties would be three ways to
-   * write the same two arrangements, and a fourth way to get one of them wrong.
-   *
-   * Unset is `start` and stays unset, so a reflected default cannot appear on a
-   * host whose server output never had it.
    * - `size`: How wide the panel is allowed to be.
    *
    * Steps rather than a number, because a dialog's width is a fact about what is
@@ -46141,9 +46681,27 @@ export type CustomElementsSolidJs = {
    * rule's own test is whether two of them sitting together could legitimately
    * differ, and it is answering "a ragged row is unwritable". Two dialogs never
    * sit together. One is on screen at a time, in the top layer, and it is the
-   * region rather than a control in one, which is the same reason `Avatar` and
-   * `Spinner` keep theirs. Not `appearance`, which says how a thing reads
-   * rather than how wide it is.
+   * region rather than a control in one, which is the other half of the axis's
+   * domain: the rest of it is pictures, which are not controls either. Not
+   * `appearance`, which says how a thing reads rather than how wide it is.
+   * - `text-align`/`textAlign`: Which way the panel's contents read.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where things sit in a container, and they are named
+   * for the properties they mirror; this one is `text-align` on a panel of
+   * prose, and `Table.Column` answers the same question under the same name.
+   * One word for both questions is how a consumer who learned it on a layout
+   * writes it here and gets no error, a value a component does not have leaving
+   * the default in place and looking deliberate.
+   *
+   * One property for the whole panel rather than one per region. The regions are
+   * never mixed in practice: a dialog that asks a short question centers its
+   * mark, its title, its sentence and its buttons together, and a dialog holding
+   * a form runs all four from the start. Three properties would be three ways to
+   * write the same two arrangements, and a fourth way to get one of them wrong.
+   *
+   * Unset is `start` and stays unset, so a reflected default cannot appear on a
+   * host whose server output never had it.
    * - `open`: Whether the element is open.
    *
    * One property, not two, so `dialog.open` answers the question anyone
@@ -47970,11 +48528,30 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Alignment across the direction.
+   * - `align-items`/`alignItems`: Alignment across the direction, which is `align-items`.
+   *
+   * **Named for the CSS property it sets, because it is that property.** A flex
+   * container is the one place where the box-alignment words are already the
+   * reader's, so a shorter name would be a second vocabulary for something they
+   * can already say, and `align` alone is the word four other families use for
+   * four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+   *
+   * **It also keeps the name out of the browser's way.** `align` is a legacy
+   * HTML presentational attribute mapped to `text-align` on any element that
+   * carries one, this one included: measured, an invented tag with
+   * `align="center"` computes centered text too, so it is nothing to do with
+   * being a known element. A row that carried it therefore centered the text
+   * inside every field in it, through a hint no rule here declares and none can
+   * see, and the fix is a name the platform has no opinion about rather than a
+   * guard against the hint.
    * - `direction`: Whether items run across or down.
    * - `gap`: Space between items, named on the space scale.
    * - `inline`: Flows with surrounding text instead of taking the full width.
-   * - `justify`: Distribution along the direction.
+   * - `justify-content`/`justifyContent`: Distribution along the direction, which is `justify-content`.
+   *
+   * Named for the property it sets, the way `alignItems` is. `between` and
+   * `around` drop the `space-` prefix and nothing else does, because those two
+   * are the only values whose CSS spelling is two words.
    * - `wrap`: Whether items wrap onto more lines.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -48112,7 +48689,19 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Alignment of each cell within its row.
+   * - `align-items`/`alignItems`: Alignment of each cell within its row, which is `align-items`.
+   *
+   * **Named for the CSS property it sets**, the way `Flex` is, and the same
+   * property on a grid: it places every cell in its row's track rather than
+   * placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+   * row of a grid are boxes of unrelated content and lining their first lines
+   * up is a thing a reader asks for between siblings in a row, not between
+   * cells in a table of them.
+   *
+   * There is no `justifyContent` here for the same reason: the tracks are
+   * `1fr`, so they already fill the row and there is nothing left over to
+   * distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+   * wide its tracks are.
    * - `columns`: Fixed number of equal columns.
    * - `gap`: Space between cells, named on the space scale.
    * - `min`: Minimum column width, filling as many as fit.
@@ -48741,12 +49330,13 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `rounded`: Whether the corners are cut.
+   * - `shape`: Whether the corners are cut.
    *
-   * A boolean rather than a radius, because the radius is a token and the
-   * question a consumer is answering is whether this picture is a card's
-   * surface or a page's. `--image-radius` moves it for the case that is
-   * neither.
+   * The axis and not a boolean, because `rounded` is a registered word and a
+   * private spelling of a registry question is what `appearance` was retired
+   * for. Not a radius either: the radius is a token and the question a consumer
+   * is answering is whether this picture is a card's surface or a page's.
+   * `--image-radius` moves it for the case that is neither.
    * - `alt`: What it shows, for a reader who cannot see it.
    *
    * Empty is a real answer and means decoration. Omitting the attribute is not
@@ -48839,7 +49429,7 @@ export type CustomElementsSolidJs = {
    * - `--image-fit`: How the picture fills it. (default: `undefined`)
    * - `--image-placeholder-color`: The resting surface behind both stand-ins. (default: `undefined`)
    * - `--image-position`: Which part survives a crop. (default: `undefined`)
-   * - `--image-radius`: Corner radius, under `rounded`. (default: `undefined`)
+   * - `--image-radius`: Corner radius, under `shape="rounded"`. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -49332,10 +49922,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -50187,7 +50776,7 @@ export type CustomElementsSolidJs = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
-   * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
+   * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
    *
    * A card is a panel hung off one word, and there is no room to hang anything
    * off a word on a phone: the columns do not shrink past
@@ -50220,16 +50809,23 @@ export type CustomElementsSolidJs = {
    * - `variant`: 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. `full` is the other shape navigations use: a band from edge to
+   * 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.
    *
-   * It changes where the panel goes as well as how it looks, 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.
+   * **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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -50303,7 +50899,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
+   * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -51975,6 +52571,13 @@ export type CustomElementsSolidJs = {
    * the name of the tool being run, or the file being read.
    * - `size`: Diameter relative to the surrounding text.
    *
+   * **`Loader`'s three steps, because the two are swapped for each other.** An
+   * orb and a spinner are the same job drawn differently, a wait a reader is
+   * looking at, and a product that replaces one with the other should not find
+   * that a step it was writing has stopped existing. `md` is the resting one
+   * and selects nothing, landing on the base rule the way a written resting
+   * value does everywhere else.
+   *
    * Reflected because the stylesheet selects on it. The mesh is chosen from the
    * rendered box rather than from this, so `--orb-size` and a consumer's own
    * `inline-size` get the same treatment as the named steps.
@@ -52938,6 +53541,8 @@ export type CustomElementsSolidJs = {
    * - `--progress-color`: Fill of the part that is done. (default: `undefined`)
    * - `--progress-ring-size`: Diameter of the ring appearance. (default: `undefined`)
    * - `--progress-ring-width`: Thickness of its stroke. (default: `undefined`)
+   * - `--progress-size`: Thickness of the bar. (default: `undefined`)
+   * - `--progress-track-color`: Fill of the part that is not. (default: `undefined`)
    * - `--progress-fraction`: The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. (default: `undefined`)
    *
    * ## CSS Parts
@@ -53319,9 +53924,9 @@ export type CustomElementsSolidJs = {
    * Unnecessary under `chip`, which has no room for a circle beside its mark
    * and hides it already.
    *
-   * `card` only, and it is a graphic that goes rather than a radio: the control
-   * in the shadow root is untouched, so the row is still focusable, still
-   * reported to a screen reader, and still the thing a form submits.
+   * A separated choice only, and it is a graphic that goes rather than a radio:
+   * the control in the shadow root is untouched, so the row is still focusable,
+   * still reported to a screen reader, and still the thing a form submits.
    *
    * Safe because the card already carries the answer in its surface, a raised
    * fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -53330,21 +53935,40 @@ export type CustomElementsSolidJs = {
    * Not on `Checkbox`, deliberately. A radio card with no circle is still
    * unmistakably one-of-many because its siblings behave that way; a checkbox
    * card with no box loses the only thing that says you may pick several.
-   * - `variant`: How the choice presents itself.
+   * - `separation`: Where the choice's own surface ends.
    *
-   * - `plain` is the default and is never written: a circle beside its words,
-   *   which is what a list of choices should be almost always.
-   * - `card` puts it in a bounded surface, for options that need room to
+   * The question `separation` asks everywhere else, asked of one option, so it
+   * is that word: what these values pick is a surface, and `plain` is already
+   * the registry's own word for the answer this family used it for.
+   *
+   * - `plain` is the resting one and is never written: a circle beside its
+   *   words, which is what a list of choices should be almost always.
+   * - `outlined` puts it in a bounded surface, for options that need room to
    *   explain themselves: a description, an icon, a price. It is the half a
    *   `data-card` link cannot do, because a link reports no value and belongs
    *   to no group, so a card that is genuinely an answer has to be this.
-   * - `chip` is the answer as its own small surface, for a row of short
-   *   choices read at a glance. It hides the circle, the surface being the
-   *   whole mark, which is why `hide-control` says it is unnecessary here.
-   *
-   * The circle stays in both. A card whose only marker was its own border would
-   * ask a reader to compare surfaces across a row to find the answer, and would
-   * leave nothing for a high-contrast display.
+   * - `filled` is that same card on a ground of its own with no edge, which is
+   *   what a column of choices wants where a hairline around every one of them
+   *   is a grid of lines rather than a set of answers.
+   *
+   * **`elevated` is the one value of the axis this family does not take.** A
+   * raised choice competes with a dialog: the top layer is where a thing that
+   * interrupts you lives, and an option in a form is not one of those, so a
+   * column of lifted cards reads as a stack of floating things none of which is
+   * settled.
+   *
+   * The circle stays in all of them. A card whose only marker was its own
+   * border would ask a reader to compare surfaces across a row to find the
+   * answer, and would leave nothing for a high-contrast display.
+   * - `variant`: The answer as its own small surface, for a row of short choices read at a
+   * glance.
+   *
+   * **Not a separation, which is why it is still `variant`.** The other values
+   * pick where a surface ends around a row that keeps its circle and its words;
+   * a chip has neither. It hides the circle, the surface being the whole mark,
+   * which is why `hide-control` says it is unnecessary here, and it takes the
+   * words out of the flow to be the accessible name. That removes the
+   * distinction `separation` exists to make rather than answering it.
    * - `disabled`: Whether this one can be chosen.
    * - `selected`: Whether this is the current one.
    *
@@ -53453,10 +54077,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -53480,22 +54103,27 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: Which mark the row is drawn with.
+   * - `shape`: The geometry one mark is drawn to.
    *
-   * `marks` is the star, and is what a rating means to most readers. `dots`
-   * drops the glyph for a plain circle, which says how much rather than how
-   * good: a star carries a judgment that a level of spice, a difficulty or a
-   * confidence has not earned.
+   * The registry's word, because the question is the registry's: `Avatar`,
+   * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
+   * their own thing is cut to under this name, and `dots` is already a value
+   * the axis holds. What is picked here is the outline of one mark and nothing
+   * else, which is a shape and not a component-specific choice.
    *
-   * Both are one shape repeated and clipped to the score, so halves work in
-   * either, and both are only a choice of drawing. A scale whose marks are
+   * `dots` drops the glyph for a plain circle, which says how much rather than
+   * how good: a star carries a judgment that a level of spice, a difficulty or
+   * a confidence has not earned. Either way it is one shape repeated and
+   * clipped to the score, so halves work in both. A scale whose marks are
    * *different* drawings is a set of choices rather than a quantity: that is
    * `Radio.Group`, whose options already carry a value and a name each.
    *
-   * **Undefaulted, because it reflects.** A default of `marks` writes
-   * `variant="marks"` onto every server-rendered rating, which React holds no
-   * prop for and reports as a hydration mismatch. The stylesheet names only
-   * `dots`, so an unset one draws marks anyway.
+   * **The star is the resting one and has no word**, which is the rule every
+   * axis follows and is also what this family needed anyway: it reflects, so a
+   * default would write the resting value onto every server-rendered rating,
+   * an attribute React holds no prop for and so a hydration mismatch for each
+   * one. The stylesheet names only `dots`, so an unset one draws the star by
+   * landing on the base rule.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -54621,11 +55249,11 @@ export type CustomElementsSolidJs = {
    * `outlined` is what the unset frame already draws, so writing it would be
    * writing the resting state out.
    *
-   * **The other three fields want this too and do not have it yet.** `Input`,
-   * `Textarea` and `Combobox` wear the same frame from the same shared
-   * stylesheet, and an inline one of each is as reasonable as an inline select.
-   * They are left alone rather than swept, because each has a different thing
-   * inside the frame and guessing at three is how an axis ends up meaning four
+   * **Every field wearing `field-frame.css` wants this too and does not have it
+   * yet**, which this trigger is not one of: it draws its own frame below. An
+   * inline number input in a toolbar is as reasonable as an inline select. They
+   * are left alone rather than swept, because each has a different thing inside
+   * the frame and guessing at a set of them is how an axis ends up meaning four
    * things, which is the fault `appearance` was retired for.
    * - `open`: Whether the element is open.
    *
@@ -56143,10 +56771,8 @@ export type CustomElementsSolidJs = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -56334,8 +56960,7 @@ export type CustomElementsSolidJs = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -56418,25 +57043,6 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which edge the values line up against.
-   *
-   * `end` is what a column of numbers wants, so digits of the same magnitude
-   * sit above each other. Left unset the cell inherits the table's own
-   * alignment, which is `start` for text in either writing direction.
-   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-   * consumer wrote, so the table writes nothing onto them: it publishes the
-   * edge to each cell under this column as `--table-cell-align`, which
-   * `@fusion.dev/helix` reads. The heading is this element's own, and
-   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-   * inline end, so in a right-to-left table it is the left.
-   *
-   * **Reflected, because the heading is drawn by a stylesheet and has no other
-   * way to learn it.** Set as a property, which is how React sets it, an
-   * unreflected `align` left no attribute to select on, so the heading stayed at
-   * the start over a column of digits set to the end. It is the author's
-   * declaration and nothing moves it afterwards, so an attribute cannot come to
-   * disagree with the element, which is the reason `open` records a custom
-   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -56468,6 +57074,33 @@ export type CustomElementsSolidJs = {
    * how React sets it, an unreflected `sortable` left no attribute to match.
    * `false` reflects as no attribute at all, so an unset column writes nothing
    * onto its host.
+   * - `text-align`/`textAlign`: Which edge the values line up against.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where a thing sits in a container, and they are
+   * named for the properties they mirror; this is `text-align` down a column of
+   * values, and `Dialog` answers the same question under the same name. One
+   * word for both questions is how a consumer who learned it on a layout writes
+   * it here and gets no error, a value a component does not have leaving the
+   * default in place and looking deliberate.
+   *
+   * `end` is what a column of numbers wants, so digits of the same magnitude
+   * sit above each other. Left unset the cell inherits the table's own
+   * alignment, which is `start` for text in either writing direction.
+   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+   * consumer wrote, so the table writes nothing onto them: it publishes the
+   * edge to each cell under this column as `--table-cell-align`, which
+   * `@fusion.dev/helix` reads. The heading is this element's own, and
+   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+   * inline end, so in a right-to-left table it is the left.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected edge left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `width`: The track this column takes, as CSS.
    *
    * A single track value, so anything valid in `grid-template-columns` works:
@@ -58079,11 +58712,10 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -58538,12 +59170,11 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The moving marker behind the selected item.
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -60156,8 +60787,7 @@ export type CustomElementsSolidJs = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.
@@ -60736,7 +61366,7 @@ export type CustomCssProperties = {
   "--image-placeholder-color"?: (string) | undefined;
   /** Which part survives a crop. */
   "--image-position"?: (string) | undefined;
-  /** Corner radius, under `rounded`. */
+  /** Corner radius, under `shape="rounded"`. */
   "--image-radius"?: (string) | undefined;
   /** Fill behind the text. */
   "--input-background-color"?: (string) | undefined;
@@ -60954,6 +61584,10 @@ export type CustomCssProperties = {
   "--progress-ring-size"?: (string) | undefined;
   /** Thickness of its stroke. */
   "--progress-ring-width"?: (string) | undefined;
+  /** Thickness of the bar. */
+  "--progress-size"?: (string) | undefined;
+  /** Fill of the part that is not. */
+  "--progress-track-color"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. */
   "--progress-fraction"?: (string) | undefined;
   /** Behind them, including the quiet zone. */