@fusion.dev/helix 0.30.2 → 0.31.0

package/types/jsx.d.ts

@@ -10823,8 +10823,10 @@ answer, and asking them to encode it as thresholds so this can decode it
 again is a worse API than letting them say it.
 
 Not reflected. Nothing selects on it: the band reaches the stylesheet as
-`data-band` on the fill, because that is the element being colored, so
-reflecting here would write an attribute onto the host for no reader. */
+`data-band` on the fill, because that is the element being colored, and a
+stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
+part names, so reflecting here would write an attribute onto the host for
+no reader. */
   band?: (HelixMeter["band"]) | undefined;
   /** Bottom of the high band.
 
@@ -10931,8 +10933,10 @@ answer, and asking them to encode it as thresholds so this can decode it
 again is a worse API than letting them say it.
 
 Not reflected. Nothing selects on it: the band reaches the stylesheet as
-`data-band` on the fill, because that is the element being colored, so
-reflecting here would write an attribute onto the host for no reader. */
+`data-band` on the fill, because that is the element being colored, and a
+stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
+part names, so reflecting here would write an attribute onto the host for
+no reader. */
   "prop:band"?: (HelixMeter["band"]) | undefined;
   /** Bottom of the high band.
 
@@ -19786,6 +19790,13 @@ export type CustomElements = {
    * - `content`: The revealed region.
    * - `content-inner`: Padding wrapper inside the animated region.
    * - `trigger`: The clickable summary row.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the item is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-accordion-item": Partial<
     HelixAccordionItemProps & BaseProps<HelixAccordionItem> & BaseEvents<HelixAccordionItem>
@@ -19861,6 +19872,12 @@ export type CustomElements = {
    * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
    * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
    * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-accordion": Partial<
     HelixAccordionProps & BaseProps<HelixAccordion> & BaseEvents<HelixAccordion>
@@ -19971,6 +19988,12 @@ export type CustomElements = {
    * - `content`: The message region.
    * - `dismiss`: The control that asks to close.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-announcement": Partial<
     HelixAnnouncementProps & BaseProps<HelixAnnouncement> & BaseEvents<HelixAnnouncement>
@@ -20107,6 +20130,13 @@ export type CustomElements = {
    * - `end`: The trailing region.
    * - `row`: The centered row inside the banner.
    * - `start`: The leading region.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-app-header": Partial<
     HelixAppHeaderProps & BaseProps<HelixAppHeader> & BaseEvents<HelixAppHeader>
@@ -20228,10 +20258,17 @@ export type CustomElements = {
    * - `svg`: The drawing surface the bands sit on.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-area-chart": Partial<
     HelixAreaChartProps & BaseProps<HelixAreaChart> & BaseEvents<HelixAreaChart>
@@ -20371,6 +20408,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `canvas`: The surface the shader draws into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-aura": Partial<HelixAuraProps & BaseProps<HelixAura> & BaseEvents<HelixAura>>;
 
@@ -20452,6 +20495,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `overflow`: The count of avatars past `max`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-avatar-group": Partial<
     HelixAvatarGroupProps & BaseProps<HelixAvatarGroup> & BaseEvents<HelixAvatarGroup>
@@ -20528,6 +20577,12 @@ export type CustomElements = {
    *
    * - `image`: The image, when one is loading or loaded.
    * - `initials`: The initials shown when there is no usable image.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-avatar": Partial<
     HelixAvatarProps & BaseProps<HelixAvatar> & BaseEvents<HelixAvatar>
@@ -20613,6 +20668,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The count, or the dot when there is no value.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-badge": Partial<HelixBadgeProps & BaseProps<HelixBadge> & BaseEvents<HelixBadge>>;
 
@@ -20868,6 +20929,7 @@ export type CustomElements = {
    * - `baseline`: The rule the columns stand on.
    * - `gridline`: One rule across the plot, under `gridlines`.
    * - `group`: One category's columns, together.
+   * - `group-active`: The group the tooltip is about, beside `group`.
    * - `label`: One category's name.
    * - `labels`: The row of category names.
    * - `line`: A series drawn as a line rather than as columns, under `lines`.
@@ -20877,10 +20939,17 @@ export type CustomElements = {
    * - `tick`: One number on an axis.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-bar-chart": Partial<
     HelixBarChartProps & BaseProps<HelixBarChart> & BaseEvents<HelixBarChart>
@@ -20935,6 +21004,12 @@ export type CustomElements = {
    *
    * - `attribution`: The footer carrying the source.
    * - `blockquote`: The quotation.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-blockquote": Partial<
     HelixBlockquoteProps & BaseProps<HelixBlockquote> & BaseEvents<HelixBlockquote>
@@ -21019,6 +21094,12 @@ export type CustomElements = {
    * - `separator`: The separator preceding the item.
    * - `link`: The crumb itself, which is an `<a>` where `href` is set.
    * - `separator-mark`: The glyph between this crumb and the next, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-breadcrumb": Partial<
     HelixBreadcrumbProps & BaseProps<HelixBreadcrumb> & BaseEvents<HelixBreadcrumb>
@@ -21068,6 +21149,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `list`: The ordered list.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-breadcrumbs": Partial<
     HelixBreadcrumbsProps & BaseProps<HelixBreadcrumbs> & BaseEvents<HelixBreadcrumbs>
@@ -21138,6 +21225,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--button-group-gap`: Space between the buttons, when `spaced`. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-button-group": Partial<
     HelixButtonGroupProps & BaseProps<HelixButtonGroup> & BaseEvents<HelixButtonGroup>
@@ -21409,6 +21502,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-button": Partial<
     HelixButtonProps & BaseProps<HelixButton> & BaseEvents<HelixButton>
@@ -21473,6 +21572,12 @@ export type CustomElements = {
    * - `content`: The content region.
    * - `icon`: The icon region.
    * - `icon-mark`: The tone glyph, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-callout": Partial<
     HelixCalloutProps & BaseProps<HelixCallout> & BaseEvents<HelixCallout>
@@ -21594,6 +21699,12 @@ export type CustomElements = {
    * - `--card-padding`: Inset applied to each region. (default: `undefined`)
    * - `--card-radius`: Corner radius of the surface. (default: `undefined`)
    * - `--card-shadow`: Shadow under the surface. What `elevated` sets, and what a `data-card` link raises on hover. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-card": Partial<HelixCardProps & BaseProps<HelixCard> & BaseEvents<HelixCard>>;
 
@@ -21797,6 +21908,7 @@ export type CustomElements = {
    *
    * - `controls`: The row of controls.
    * - `indicator`: One of them, and a way to reach that slide.
+   * - `indicator-current`: The one for the slide showing, beside `indicator`.
    * - `indicators`: The row of controls saying where the reader is.
    * - `next`: The control that moves to the next slide.
    * - `next-mark`: The glyph on the next control.
@@ -21806,6 +21918,12 @@ export type CustomElements = {
    * - `rotation-mark`: The glyph on the play and pause control.
    * - `slide`: The pane one slide is shown in, and the box the track snaps to.
    * - `track`: The scroller the slides sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-carousel": Partial<
     HelixCarouselProps & BaseProps<HelixCarousel> & BaseEvents<HelixCarousel>
@@ -21898,6 +22016,12 @@ export type CustomElements = {
    * - `end`: The trailing slot's box.
    * - `mark`: The glyph inside the send control.
    * - `start`: The leading slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat-composer": Partial<
     HelixChatComposerProps & BaseProps<HelixChatComposer> & BaseEvents<HelixChatComposer>
@@ -22016,6 +22140,12 @@ export type CustomElements = {
    * - `sources`: What the turn was drawn from, under it and outside the bubble.
    * - `state`: What has happened to it, where that is worth saying.
    * - `time`: When it was said.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat-message": Partial<
     HelixChatMessageProps & BaseProps<HelixChatMessage> & BaseEvents<HelixChatMessage>
@@ -22160,9 +22290,27 @@ export type CustomElements = {
    * - `history`: Shown at the top of the transcript while older turns are on their way.
    * - `live`: Where each settled turn is said, for a reader who cannot see it arrive.
    * - `loading`: Shown while the history is still on its way.
+   * - `message`: A turn fed as data: the message drawn for it, forwarded whole.
+   * - `message-actions`: The controls offered on a fed turn, beside its time.
+   * - `message-avatar`: A fed turn's leading slot's box.
+   * - `message-body`: What a fed turn said, and the line under it.
+   * - `message-content`: A fed turn's text.
+   * - `message-indicator`: A fed turn's default wait.
+   * - `message-mark`: The status glyph beside a fed turn's failure.
+   * - `message-meta`: The line under a fed turn: its time, its state, and its controls.
+   * - `message-retry`: The control offered on a fed turn that failed.
+   * - `message-sources`: What a fed turn was drawn from.
+   * - `message-state`: What has happened to a fed turn, where that is worth saying.
+   * - `message-time`: When a fed turn was said.
    * - `resume`: The affordance offered while the reader is away from the bottom.
    * - `status`: The status region, which is not part of the log.
    * - `turn`: One turn fed as data, around the message drawn for it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat": Partial<HelixChatProps & BaseProps<HelixChat> & BaseEvents<HelixChat>>;
 
@@ -22294,6 +22442,13 @@ export type CustomElements = {
    * - `hint`: Help under the set.
    * - `items`: The list itself, which is what `orientation` lays out.
    * - `label`: The group's name, over the set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-checkbox-group": Partial<
     HelixCheckboxGroupProps & BaseProps<HelixCheckboxGroup> & BaseEvents<HelixCheckboxGroup>
@@ -22485,6 +22640,17 @@ export type CustomElements = {
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The label beside it.
    * - `mark`: The tick, or the dash when the box is indeterminate.
+   * - `mark-checked`: The mark while the box is checked, beside `mark`.
+   * - `mark-indeterminate`: The mark while the box is indeterminate, beside `mark`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `checked`: While the box is checked.
+   * - `has-label`: While the label slot holds something to read, which is what draws a label at all.
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-checkbox": Partial<
     HelixCheckboxProps & BaseProps<HelixCheckbox> & BaseEvents<HelixCheckbox>
@@ -22597,6 +22763,12 @@ export type CustomElements = {
    * - `removed`: In a diff, a line only the old version has, a `<del>`.
    * - `split`: In a split diff, the two versions side by side.
    * - `text`: In a diff, a line's code.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-code-block": Partial<
     HelixCodeBlockProps & BaseProps<HelixCodeBlock> & BaseEvents<HelixCodeBlock>
@@ -22649,6 +22821,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `code`: The `<code>` element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-code": Partial<HelixCodeProps & BaseProps<HelixCode> & BaseEvents<HelixCode>>;
 
@@ -22915,6 +23093,14 @@ export type CustomElements = {
    * - `preview`: The chip showing the color, inside the trigger.
    * - `surface`: The floating panel.
    * - `trigger`: The control that opens the panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the picker is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-color-input": Partial<
     HelixColorInputProps & BaseProps<HelixColorInput> & BaseEvents<HelixColorInput>
@@ -23153,6 +23339,12 @@ export type CustomElements = {
    * - `swatch`: One preset.
    * - `swatches`: The row of presets.
    * - `value`: The color as text, which can be typed or pasted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-color-picker": Partial<
     HelixColorPickerProps & BaseProps<HelixColorPicker> & BaseEvents<HelixColorPicker>
@@ -23408,6 +23600,14 @@ export type CustomElements = {
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `tag-prefix`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the list is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-combobox": Partial<
     HelixComboboxProps & BaseProps<HelixCombobox> & BaseEvents<HelixCombobox>
@@ -23517,6 +23717,13 @@ export type CustomElements = {
    * - `listbox-loading`: Shown while the options are still on their way.
    * - `listbox-search`: The region holding the field that narrows the list.
    * - `listbox-search-field`: The field itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the palette is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-command": Partial<
     HelixCommandProps & BaseProps<HelixCommand> & BaseEvents<HelixCommand>
@@ -23760,6 +23967,12 @@ export type CustomElements = {
    * - `mark`: The clipboard glyph, and the confirmation that replaces it.
    * - `tooltip`: The bubble, forwarded from the tooltip inside.
    * - `tooltip-arrow`: The point, resting against the trigger.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-copy-button": Partial<
     HelixCopyButtonProps & BaseProps<HelixCopyButton> & BaseEvents<HelixCopyButton>
@@ -24000,6 +24213,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One cell.
+   * - `cell-selected`: A cell of a selected row, beside `cell`.
    * - `table`: The grid.
    * - `after`: The room the rows below the window would have taken. Windowed only.
    * - `before`: The room the rows above the window would have taken. Windowed only.
@@ -24011,15 +24225,36 @@ export type CustomElements = {
    * - `checkbox-hint`: Forwarded from the checkbox, and never drawn here.
    * - `checkbox-label`: Forwarded from the checkbox; the label is spoken, not shown.
    * - `checkbox-mark`: The tick, or the dash while some rows are selected.
+   * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
+   * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
    * - `empty`: Shown when no rows match.
    * - `footer`: The region below the grid.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
    * - `pagination`: The pagination, where this draws one.
+   * - `pagination-first`: The pagination's control that jumps to the first page, under `ends`.
+   * - `pagination-gap`: The pagination's control standing over pages not shown.
+   * - `pagination-item`: One slot in the pagination's run, holding a page or a gap.
+   * - `pagination-last`: The pagination's control that jumps to the last page, under `ends`.
+   * - `pagination-list`: The pagination's run of pages.
+   * - `pagination-live`: The region that says the page changed. Clipped, not hidden.
+   * - `pagination-mark`: The glyph on a first, previous, next or last control.
+   * - `pagination-next`: The pagination's control that moves forward one page.
+   * - `pagination-page`: The pagination's control for one page.
+   * - `pagination-page-current`: The page you are on, beside `pagination-page`.
+   * - `pagination-previous`: The pagination's control that moves back one page.
+   * - `pagination-status`: The pagination's reading of where you are, in `compact`.
    * - `row`: One row of data.
    * - `select`: The cell holding a row's checkbox.
    * - `select-all`: The heading holding the checkbox that selects every row.
+   * - `select-selected`: The checkbox cell of a selected row, beside `select`.
    * - `toolbar`: The region above the grid.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-data-table": Partial<
     HelixDataTableProps & BaseProps<HelixDataTable> & BaseEvents<HelixDataTable>
@@ -24291,7 +24526,14 @@ export type CustomElements = {
    * - `label`: The question, over the field.
    * - `picker`: The date picker inside it.
    * - `picker-cell`: One column of a row, which is what a range paints.
+   * - `picker-cell-range-end`: The cell of a range's last day, beside `picker-cell`.
+   * - `picker-cell-range-middle`: A cell between a range's ends, beside `picker-cell`.
+   * - `picker-cell-range-start`: The cell of a range's first day, beside `picker-cell`.
    * - `picker-day`: The shape inside a cell, which is what a single date paints.
+   * - `picker-day-disabled`: A day that cannot be chosen, beside `picker-day`.
+   * - `picker-day-outside`: A day from a neighboring month, beside `picker-day`.
+   * - `picker-day-selected`: The chosen day, or either end of a chosen range, beside `picker-day`.
+   * - `picker-day-today`: Today, beside `picker-day`.
    * - `picker-grid`: The grid of days.
    * - `picker-header`: The month name and its controls.
    * - `picker-heading`: The month and year being shown.
@@ -24308,6 +24550,14 @@ export type CustomElements = {
    * - `tags`: The row the dates sit in.
    * - `trigger`: The control that opens the calendar.
    * - `trigger-icon`: The mark on the button that opens the calendar.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the calendar is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-date-input": Partial<
     HelixDateInputProps & BaseProps<HelixDateInput> & BaseEvents<HelixDateInput>
@@ -24529,7 +24779,14 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One column of a row, which is what a range paints.
+   * - `cell-range-end`: The cell of a range's last day, beside `cell`.
+   * - `cell-range-middle`: A cell between a range's ends, beside `cell`.
+   * - `cell-range-start`: The cell of a range's first day, beside `cell`.
    * - `day`: The shape inside a cell, which is what a single date paints.
+   * - `day-disabled`: A day that cannot be chosen, beside `day`.
+   * - `day-outside`: A day from a neighboring month, filling the grid out, beside `day`.
+   * - `day-selected`: The chosen day, or either end of a chosen range, beside `day`.
+   * - `day-today`: Today, beside `day`.
    * - `grid`: The grid of days.
    * - `header`: The month name and its controls.
    * - `heading`: The month and year being shown.
@@ -24541,6 +24798,12 @@ export type CustomElements = {
    * - `previous-mark`: The glyph on the previous month control, where none is slotted.
    * - `week`: One row of days.
    * - `weekday`: A column header naming a day of the week.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-date-picker": Partial<
     HelixDatePickerProps & BaseProps<HelixDatePicker> & BaseEvents<HelixDatePicker>
@@ -24590,6 +24853,12 @@ export type CustomElements = {
    *
    * - `label`: The `<dt>`, holding the label.
    * - `value`: The `<dd>`, holding the value.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-description-list-item": Partial<
     HelixDescriptionListItemProps &
@@ -24684,6 +24953,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `list`: The `<dl>` holding the items.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-description-list": Partial<
     HelixDescriptionListProps & BaseProps<HelixDescriptionList> & BaseEvents<HelixDescriptionList>
@@ -24822,6 +25097,13 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `dialog`: The native dialog element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the dialog is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-dialog": Partial<
     HelixDialogProps & BaseProps<HelixDialog> & BaseEvents<HelixDialog>
@@ -24892,6 +25174,12 @@ export type CustomElements = {
    *
    * - `line`: The rule itself.
    * - `content`: What is set into it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-divider": Partial<
     HelixDividerProps & BaseProps<HelixDivider> & BaseEvents<HelixDivider>
@@ -25079,14 +25367,22 @@ export type CustomElements = {
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `plot`: The drawing.
    * - `segment`: One slice.
+   * - `segment-active`: The slice under the pointer, beside `segment`.
    * - `segment-edge`: One slice as a closed shape, for a boundary to trace.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The slice's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
    * - `track`: The ring the slices are drawn on.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-donut-chart": Partial<
     HelixDonutChartProps & BaseProps<HelixDonutChart> & BaseEvents<HelixDonutChart>
@@ -25240,6 +25536,13 @@ export type CustomElements = {
    * - `content`: The scrolling content region.
    * - `header`: The header region.
    * - `panel`: The sliding panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the drawer is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drawer": Partial<
     HelixDrawerProps & BaseProps<HelixDrawer> & BaseEvents<HelixDrawer>
@@ -25326,6 +25629,12 @@ export type CustomElements = {
    *
    * - `item`: The row itself.
    * - `label`: The words.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown-item": Partial<
     HelixDrilldownItemProps & BaseProps<HelixDrilldownItem> & BaseEvents<HelixDrilldownItem>
@@ -25415,6 +25724,12 @@ export type CustomElements = {
    * - `loading`: Shown while the entries are still on their way.
    * - `page`: The region the rows are in.
    * - `title`: The name of the page showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown": Partial<
     HelixDrilldownProps & BaseProps<HelixDrilldown> & BaseEvents<HelixDrilldown>
@@ -25467,6 +25782,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--empty-padding`: Space around the whole block. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-empty": Partial<HelixEmptyProps & BaseProps<HelixEmpty> & BaseEvents<HelixEmpty>>;
 
@@ -25652,6 +25973,13 @@ export type CustomElements = {
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `size-prefix`: The category before the label.
    * - `trigger`: The label that opens the picker.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-file-input": Partial<
     HelixFileInputProps & BaseProps<HelixFileInput> & BaseEvents<HelixFileInput>
@@ -25765,6 +26093,12 @@ export type CustomElements = {
    * - `field`: The name of what is being filtered.
    * - `operator`: How it is compared, drawn only where there is one to draw.
    * - `values`: What it is compared to.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-chip": Partial<
     HelixFilterChipProps & BaseProps<HelixFilterChip> & BaseEvents<HelixFilterChip>
@@ -25850,6 +26184,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The comparisons this field supports, as `FilterOperator`s, and the values it supports them on, as `Option`s. Neither is rendered: they are read.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-field": Partial<
     HelixFilterFieldProps & BaseProps<HelixFilterField> & BaseEvents<HelixFilterField>
@@ -25934,6 +26274,32 @@ export type CustomElements = {
    *
    * Refusing the `helix-facet` puts everything back, so a consumer who declines
    * a filter is never left looking at a menu that says it took.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `divider`: The rule between a field's comparisons and its values.
+   * - `divider-content`: What is set into the rule.
+   * - `divider-line`: The rule itself.
+   * - `entry`: One row: a field, its comparison, an operator or a value.
+   * - `entry-item`: The row itself.
+   * - `entry-mark`: The trailing mark: a tick on a chosen value, a caret on a field.
+   * - `entry-start`: The leading column.
+   * - `menu`: The menu the fields are offered in.
+   * - `menu-back`: The control that returns from a field's page.
+   * - `menu-back-mark`: The glyph on the back control.
+   * - `menu-empty`: Shown when there are no fields to offer.
+   * - `menu-header`: The bar above a field's page, holding the way back and its name.
+   * - `menu-loading`: Shown while the fields are still on their way.
+   * - `menu-surface`: The floating panel the menu is drawn on.
+   * - `menu-title`: The name of the field whose page is showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-menu": Partial<
     HelixFilterMenuProps & BaseProps<HelixFilterMenu> & BaseEvents<HelixFilterMenu>
@@ -26015,6 +26381,12 @@ export type CustomElements = {
    * It never resolves where `requestAnimationFrame` never fires, which is a
    * server, a hidden tab, and happy-dom. Callers that must not hang race it
    * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-operator": Partial<
     HelixFilterOperatorProps & BaseProps<HelixFilterOperator> & BaseEvents<HelixFilterOperator>
@@ -26264,6 +26636,14 @@ export type CustomElements = {
    * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the suggestions are open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-input": Partial<
     HelixFilterInputProps & BaseProps<HelixFilterInput> & BaseEvents<HelixFilterInput>
@@ -26318,6 +26698,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items to lay out.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-flex": Partial<HelixFlexProps & BaseProps<HelixFlex> & BaseEvents<HelixFlex>>;
 
@@ -26391,6 +26777,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `time`: The `<time>` element carrying the reading.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-format-date": Partial<
     HelixFormatDateProps & BaseProps<HelixFormatDate> & BaseEvents<HelixFormatDate>
@@ -26445,6 +26837,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--grid-columns`: An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-grid": Partial<HelixGridProps & BaseProps<HelixGrid> & BaseEvents<HelixGrid>>;
 
@@ -26630,6 +27028,7 @@ export type CustomElements = {
    * - `strip`: The grid of cells.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
@@ -26638,6 +27037,12 @@ export type CustomElements = {
    * - `end`: The trailing slot's box.
    * - `start`: The leading slot's box.
    * - `summary`: The middle slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-heatmap": Partial<
     HelixHeatmapProps & BaseProps<HelixHeatmap> & BaseEvents<HelixHeatmap>
@@ -26896,6 +27301,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button or anchor.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-icon-button": Partial<
     HelixIconButtonProps & BaseProps<HelixIconButton> & BaseEvents<HelixIconButton>
@@ -26943,6 +27354,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `svg`: The rendered SVG.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-icon": Partial<HelixIconProps & BaseProps<HelixIcon> & BaseEvents<HelixIcon>>;
 
@@ -27060,6 +27477,12 @@ export type CustomElements = {
    * - `fallback`: What stands in when it fails.
    * - `image`: The picture itself.
    * - `placeholder`: What stands in until it arrives.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-image": Partial<HelixImageProps & BaseProps<HelixImage> & BaseEvents<HelixImage>>;
 
@@ -27301,6 +27724,14 @@ export type CustomElements = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
    * - `reveal`: The button that shows and hides a password.
+   * - `reveal-pressed`: The reveal button while the password shows, beside `reveal`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-input": Partial<HelixInputProps & BaseProps<HelixInput> & BaseEvents<HelixInput>>;
 
@@ -27372,6 +27803,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `kbd`: The key.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-kbd": Partial<HelixKbdProps & BaseProps<HelixKbd> & BaseEvents<HelixKbd>>;
 
@@ -27497,6 +27934,12 @@ export type CustomElements = {
    * - `list`: The list itself.
    * - `name`: One series name.
    * - `swatch`: The color a series is drawn in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-legend": Partial<
     HelixLegendProps & BaseProps<HelixLegend> & BaseEvents<HelixLegend>
@@ -27719,10 +28162,17 @@ export type CustomElements = {
    * - `terminus`: The mark on one series' last reading.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-line-chart": Partial<
     HelixLineChartProps & BaseProps<HelixLineChart> & BaseEvents<HelixLineChart>
@@ -27788,6 +28238,12 @@ export type CustomElements = {
    *
    * - `rail`: The cell a railed list draws its number in.
    * - `row`: The layout, held off the host so the host can carry a marker.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-list-item": Partial<
     HelixListItemProps & BaseProps<HelixListItem> & BaseEvents<HelixListItem>
@@ -27887,6 +28343,12 @@ export type CustomElements = {
    * - `--list-marker-gutter`: Room the ordered and unordered markers hang into. (default: `undefined`)
    * - `--list-rail-inline-size`: The width of the rail's track. (default: `undefined`)
    * - `--list-rail-style`: What a rail counts with. Any `list-style-type`. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-list": Partial<HelixListProps & BaseProps<HelixList> & BaseEvents<HelixList>>;
 
@@ -28132,6 +28594,13 @@ export type CustomElements = {
    * - `loading`: Shown while the options are still on their way.
    * - `search`: The region holding the field that narrows the list.
    * - `search-field`: The field itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-listbox": Partial<
     HelixListboxProps & BaseProps<HelixListbox> & BaseEvents<HelixListbox>
@@ -28199,6 +28668,12 @@ export type CustomElements = {
    * - `mark`: The region holding what was slotted at the center.
    * - `svg`: The rotating circle pair.
    * - `track`: The full circle behind the indicator.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-loader": Partial<
     HelixLoaderProps & BaseProps<HelixLoader> & BaseEvents<HelixLoader>
@@ -28326,6 +28801,13 @@ export type CustomElements = {
    *
    * - `surface`: The floating panel, which is what opens.
    * - `trigger`: The default trigger, where none was slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `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.
    */
   "helix-megamenu": Partial<
     HelixMegamenuProps & BaseProps<HelixMegamenu> & BaseEvents<HelixMegamenu>
@@ -28476,6 +28958,12 @@ export type CustomElements = {
    * - `item`: The row, which is an `<a>` where `href` is set.
    * - `mark`: The trailing mark: a tick when checked, a caret when it opens a page. One column, because a row is never both.
    * - `start`: The leading column, which is a slot and is always there.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-menu-item": Partial<
     HelixMenuItemProps & BaseProps<HelixMenuItem> & BaseEvents<HelixMenuItem>
@@ -28590,6 +29078,16 @@ export type CustomElements = {
    * - `loading`: Shown while the items are still on their way.
    * - `surface`: The floating panel the menu is drawn on.
    * - `title`: The name of the submenu that is showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `drilled`: While a submenu's page is showing rather than the menu's own, so what is not a row can leave with the page it was on.
+   * - `mark`: While a row on the page showing can be ticked or leads to a page, so the trailing column is held open for every row.
+   * - `open`: While the menu is open.
+   * - `start`: While a row on the page showing has something in its leading column, so that column is held open for every row.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-menu": Partial<HelixMenuProps & BaseProps<HelixMenu> & BaseEvents<HelixMenu>>;
 
@@ -28663,8 +29161,10 @@ export type CustomElements = {
    * again is a worse API than letting them say it.
    *
    * Not reflected. Nothing selects on it: the band reaches the stylesheet as
-   * `data-band` on the fill, because that is the element being colored, so
-   * reflecting here would write an attribute onto the host for no reader.
+   * `data-band` on the fill, because that is the element being colored, and a
+   * stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
+   * part names, so reflecting here would write an attribute onto the host for
+   * no reader.
    * - `high`: Bottom of the high band.
    *
    * Absent leaves the range unbanded.
@@ -28749,10 +29249,21 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The part of it the value fills.
+   * - `indicator-fair`: The fill while the reading is in a band beside the good one, beside `indicator`.
+   * - `indicator-good`: The fill while the reading is in the good band, beside `indicator`.
+   * - `indicator-over`: The fill while the value is past the top, beside `indicator`.
+   * - `indicator-poor`: The fill while the reading is two bands from the good one, beside `indicator`.
+   * - `indicator-under`: The fill while the value is below the floor, beside `indicator`.
    * - `tick`: A mark at `low` or at `high`.
    * - `track`: The whole range.
    * - `value`: The reading, under `show-value`.
    * - `groove`: The unfilled circle, in `ring` and `arc`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-meter": Partial<HelixMeterProps & BaseProps<HelixMeter> & BaseEvents<HelixMeter>>;
 
@@ -28805,6 +29316,12 @@ export type CustomElements = {
    *
    * - `indicator`: The marker that travels to the current destination.
    * - `nav`: The navigation landmark.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-navigation": Partial<
     HelixNavigationProps & BaseProps<HelixNavigation> & BaseEvents<HelixNavigation>
@@ -28920,6 +29437,13 @@ export type CustomElements = {
    * - `items`: The region holding the notifications.
    * - `label`: What the group is called.
    * - `trigger`: The control that collapses and expands, where collapsible.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the group shows every notification in it rather than the first.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notification-group": Partial<
     HelixNotificationGroupProps & BaseProps<HelixNotificationGroup> & BaseEvents<HelixNotificationGroup>
@@ -29074,6 +29598,15 @@ export type CustomElements = {
    * - `body`: The label and the caption together.
    * - `label`: What happened, on the first line.
    * - `media`: The leading slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `actions`: While the actions slot holds something, so the words above make room for it.
+   * - `controls`: While it can be dismissed, so the time makes way for the control under a pointer.
+   * - `read`: While it has been read.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notification": Partial<
     HelixNotificationProps & BaseProps<HelixNotification> & BaseEvents<HelixNotification>
@@ -29223,6 +29756,13 @@ export type CustomElements = {
    * - `footer`: The region below the list.
    * - `header`: The region above the list.
    * - `loading`: Shown while the feed is still on its way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `media`: While a notification in the list holds something in its media slot, so every row keeps that column.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notifications": Partial<
     HelixNotificationsProps & BaseProps<HelixNotifications> & BaseEvents<HelixNotifications>
@@ -29436,6 +29976,13 @@ export type CustomElements = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `increment-mark`: The glyph on the step up control.
    * - `label`: The name over the field, which is also the scrub grip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-number-input": Partial<
     HelixNumberInputProps & BaseProps<HelixNumberInput> & BaseEvents<HelixNumberInput>
@@ -29532,10 +30079,17 @@ export type CustomElements = {
    * - `null`: A `null`.
    * - `number`: A number.
    * - `row`: One entry, a tree item.
+   * - `row-active`: The entry the keyboard is on, beside `row`.
    * - `string`: A string, in quotes.
    * - `summary`: The brackets standing for a branch's contents.
    * - `toggle`: The caret on a branch: down when open, across when closed.
    * - `tree`: The tree, the one thing focus lands on.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-object-inspector": Partial<
     HelixObjectInspectorProps & BaseProps<HelixObjectInspector> & BaseEvents<HelixObjectInspector>
@@ -29583,6 +30137,12 @@ export type CustomElements = {
    *
    * - `items`: The run itself.
    * - `label`: The heading.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-option-group": Partial<
     HelixOptionGroupProps & BaseProps<HelixOptionGroup> & BaseEvents<HelixOptionGroup>
@@ -29756,8 +30316,17 @@ export type CustomElements = {
    *
    * - `description`: The caption under the words, when there is one.
    * - `item`: The row.
+   * - `item-active`: The row the keyboard is on, beside `item`.
+   * - `item-selected`: The row of a chosen option, beside `item`.
    * - `label`: The words.
    * - `text`: The words and the caption under them, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While the option is chosen.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-option": Partial<
     HelixOptionProps & BaseProps<HelixOption> & BaseEvents<HelixOption>
@@ -29856,6 +30425,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `canvas`: The surface the cloud is drawn into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-orb": Partial<HelixOrbProps & BaseProps<HelixOrb> & BaseEvents<HelixOrb>>;
 
@@ -29950,6 +30525,12 @@ export type CustomElements = {
    *
    * - `indicator`: The mark that travels to the section being read.
    * - `nav`: The navigation landmark.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-outline": Partial<
     HelixOutlineProps & BaseProps<HelixOutline> & BaseEvents<HelixOutline>
@@ -30126,10 +30707,18 @@ export type CustomElements = {
    * - `list`: The run of pages.
    * - `next`: The control that moves forward one page.
    * - `page`: The control for one page.
+   * - `page-current`: The page you are on, beside `page`.
    * - `previous`: The control that moves back one page.
    * - `status`: The reading of where you are, in `compact`.
    * - `live`: The region that says the page changed. Clipped, not hidden.
    * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: While there is one page or none, which is nothing to page through.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination": Partial<
     HelixPaginationProps & BaseProps<HelixPagination> & BaseEvents<HelixPagination>
@@ -30140,8 +30729,9 @@ export type CustomElements = {
    * stands in a column of fields; this one stands in a footer beside a run of page
    * numbers, where a two-line control makes the whole row two lines tall.
    *
-   * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
-   * reach through both boundaries and a consumer styles it as the select it is.
+   * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
+   * `::part(control-label)` reach through both boundaries and a consumer styles it
+   * as the select it is.
    *
    * ## Attributes & Properties
    *
@@ -30192,9 +30782,38 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `control`: The select.
-   * - `label`: The words beside the number, forwarded from the select.
-   * - `trigger`: The closed control, forwarded from the select.
-   * - `value`: The chosen size inside the trigger, forwarded from the select.
+   * - `control-feedback`: What is wrong with it.
+   * - `control-hint`: Help under the trigger.
+   * - `control-indicator`: The caret saying the control opens.
+   * - `control-label`: The words beside the number.
+   * - `control-listbox`: The list inside it.
+   * - `control-listbox-empty`: Shown when a filter has hidden everything.
+   * - `control-listbox-feedback`: What is wrong with the list.
+   * - `control-listbox-filter-icon`: The mark beside the filter field.
+   * - `control-listbox-filter-mark`: The glyph beside the filter field, where none is slotted.
+   * - `control-listbox-hint`: Help under the list.
+   * - `control-listbox-items`: The list itself.
+   * - `control-listbox-label`: The question, over the list.
+   * - `control-listbox-loading`: Shown while the options are still on their way.
+   * - `control-listbox-search`: The region holding the field that narrows the list.
+   * - `control-listbox-search-field`: The field itself.
+   * - `control-surface`: The floating panel.
+   * - `control-trigger`: The closed control, which says what size is chosen.
+   * - `control-value`: The chosen size inside the trigger.
+   * - `option`: One size on offer.
+   * - `option-description`: The caption under the number, when there is one.
+   * - `option-item`: The row.
+   * - `option-item-active`: The row the keyboard is on.
+   * - `option-item-selected`: The row of the size chosen.
+   * - `option-label`: The number.
+   * - `option-text`: The number and the caption, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: While there are no sizes to offer.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination-size": Partial<
     HelixPaginationSizeProps & BaseProps<HelixPaginationSize> & BaseEvents<HelixPaginationSize>
@@ -30246,6 +30865,12 @@ export type CustomElements = {
    * It never resolves where `requestAnimationFrame` never fires, which is a
    * server, a hidden tab, and happy-dom. Callers that must not hang race it
    * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination-summary": Partial<
     HelixPaginationSummaryProps & BaseProps<HelixPaginationSummary> & BaseEvents<HelixPaginationSummary>
@@ -30444,6 +31069,13 @@ export type CustomElements = {
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the boxes, while nothing is wrong.
    * - `label`: The question, over the boxes.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pin-input": Partial<
     HelixPinInputProps & BaseProps<HelixPinInput> & BaseEvents<HelixPinInput>
@@ -30558,6 +31190,13 @@ export type CustomElements = {
    *
    * - `content`: The scrolling region inside the panel.
    * - `popover`: The panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the popover is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-popover": Partial<
     HelixPopoverProps & BaseProps<HelixPopover> & BaseEvents<HelixPopover>
@@ -30674,6 +31313,12 @@ export type CustomElements = {
    * - `indicator`: The part of it that is done.
    * - `track`: The full length the work is measured against.
    * - `value`: The reading beside the bar, under `show-value`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-progress": Partial<
     HelixProgressProps & BaseProps<HelixProgress> & BaseEvents<HelixProgress>
@@ -30760,6 +31405,12 @@ export type CustomElements = {
    * - `finders`: The three corner squares, which can take their own color.
    * - `logo`: The box holding the center mark.
    * - `modules`: Everything but the three corner squares.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-qr-code": Partial<
     HelixQrCodeProps & BaseProps<HelixQrCode> & BaseEvents<HelixQrCode>
@@ -30810,6 +31461,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `quote`: The quotation.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-quote": Partial<HelixQuoteProps & BaseProps<HelixQuote> & BaseEvents<HelixQuote>>;
 
@@ -30974,6 +31631,13 @@ export type CustomElements = {
    * - `hint`: Help under the set.
    * - `items`: The choices, which is what `orientation` lays out.
    * - `label`: The question, over the set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-radio-group": Partial<
     HelixRadioGroupProps & BaseProps<HelixRadioGroup> & BaseEvents<HelixRadioGroup>
@@ -31101,6 +31765,13 @@ export type CustomElements = {
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
    * - `mark`: The dot inside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is the one chosen.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-radio": Partial<HelixRadioProps & BaseProps<HelixRadio> & BaseEvents<HelixRadio>>;
 
@@ -31317,6 +31988,13 @@ export type CustomElements = {
    * - `option`: One place a reader can press, which is one step.
    * - `track`: The unfilled marks.
    * - `value`: The score written out, under `show-value`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-rating": Partial<
     HelixRatingProps & BaseProps<HelixRating> & BaseEvents<HelixRating>
@@ -31410,6 +32088,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `frame`: The iframe.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-preview": Partial<
     HelixSandboxPreviewProps & BaseProps<HelixSandboxPreview> & BaseEvents<HelixSandboxPreview>
@@ -31533,6 +32217,12 @@ export type CustomElements = {
    * - `panel`: The box holding whatever was slotted as the panel.
    * - `panes`: The splitter holding the source and preview panes.
    * - `separator`: Either divider.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox": Partial<
     HelixSandboxProps & BaseProps<HelixSandbox> & BaseEvents<HelixSandbox>
@@ -31599,6 +32289,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `source`: The editable region.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-source": Partial<
     HelixSandboxSourceProps & BaseProps<HelixSandboxSource> & BaseEvents<HelixSandboxSource>
@@ -31667,6 +32363,12 @@ export type CustomElements = {
    *
    * - `caret`: The line and column readout.
    * - `language`: The language readout.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-status-bar": Partial<
     HelixSandboxStatusBarProps & BaseProps<HelixSandboxStatusBar> & BaseEvents<HelixSandboxStatusBar>
@@ -31738,6 +32440,12 @@ export type CustomElements = {
    * - `level`: The level a line came in at.
    * - `log`: The scrolling region.
    * - `message`: The text of a line.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-terminal": Partial<
     HelixSandboxTerminalProps & BaseProps<HelixSandboxTerminal> & BaseEvents<HelixSandboxTerminal>
@@ -31791,6 +32499,12 @@ export type CustomElements = {
    *
    * - `--sandbox-toolbar-gap`: Space between items. (default: `undefined`)
    * - `--sandbox-toolbar-size`: The bar's height. Defaults to a large control. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-toolbar": Partial<
     HelixSandboxToolbarProps & BaseProps<HelixSandboxToolbar> & BaseEvents<HelixSandboxToolbar>
@@ -31898,10 +32612,12 @@ export type CustomElements = {
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `plot`: The drawing.
    * - `point`: One row, as a point.
+   * - `point-active`: A point of the row a pointer is asking about, beside `point`.
    * - `summary`: How strongly the measures relate, for a reader who cannot see the points.
    * - `svg`: The drawing surface the rules sit on.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The row's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
@@ -31912,6 +32628,12 @@ export type CustomElements = {
    * - `y-axis`: The levels measured up, beside the plot.
    * - `y-name`: What is measured up.
    * - `y-tick`: One labeled level up.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-scatter-chart": Partial<
     HelixScatterChartProps & BaseProps<HelixScatterChart> & BaseEvents<HelixScatterChart>
@@ -31984,6 +32706,17 @@ export type CustomElements = {
    *
    * - `edges`: Where the sideways edge cues are drawn.
    * - `viewport`: The scrolling box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `more-block-end`: While there is more to scroll to past the block end.
+   * - `more-block-start`: While there is more to scroll back to before the block start.
+   * - `more-inline-end`: While there is more to scroll to past the inline end.
+   * - `more-inline-start`: While there is more to scroll back to before the inline start.
+   * - `scrolls`: While the content is larger than the viewport, on either axis.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-scroll-area": Partial<
     HelixScrollAreaProps & BaseProps<HelixScrollArea> & BaseEvents<HelixScrollArea>
@@ -32236,6 +32969,14 @@ export type CustomElements = {
    * - `surface`: The floating panel.
    * - `trigger`: The closed control, which says what is chosen.
    * - `value`: The chosen option's text inside the trigger.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the list is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-select": Partial<
     HelixSelectProps & BaseProps<HelixSelect> & BaseEvents<HelixSelect>
@@ -32283,6 +33024,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `skeleton`: The placeholder surface.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-skeleton": Partial<
     HelixSkeletonProps & BaseProps<HelixSkeleton> & BaseEvents<HelixSkeleton>
@@ -32355,6 +33102,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `link`: The anchor, which is what takes focus.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-skip-link": Partial<
     HelixSkipLinkProps & BaseProps<HelixSkipLink> & BaseEvents<HelixSkipLink>
@@ -32561,6 +33314,13 @@ export type CustomElements = {
    * - `marker-label`: The value a mark stands at, when `marker-labels` is set.
    * - `markers`: The row of marks along the track.
    * - `output`: The current value, shown beside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-slider": Partial<
     HelixSliderProps & BaseProps<HelixSlider> & BaseEvents<HelixSlider>
@@ -32756,6 +33516,12 @@ export type CustomElements = {
    * - `terminus`: The mark on the last value.
    * - `wash-end`: The far stop of the area's gradient.
    * - `wash-start`: The stop of the area's gradient that meets the line.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sparkline": Partial<
     HelixSparklineProps & BaseProps<HelixSparkline> & BaseEvents<HelixSparkline>
@@ -32831,6 +33597,12 @@ export type CustomElements = {
    * - `icon`: The mark's box.
    * - `item`: The control.
    * - `label`: The name beside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-speed-dial-item": Partial<
     HelixSpeedDialItemProps & BaseProps<HelixSpeedDialItem> & BaseEvents<HelixSpeedDialItem>
@@ -32924,6 +33696,13 @@ export type CustomElements = {
    *
    * - `actions`: The region the actions are drawn in.
    * - `trigger`: The default trigger, where none was slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the actions are out.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-speed-dial": Partial<
     HelixSpeedDialProps & BaseProps<HelixSpeedDial> & BaseEvents<HelixSpeedDial>
@@ -33124,6 +33903,12 @@ export type CustomElements = {
    * - `end`: The box holding the second.
    * - `separator`: The divider itself.
    * - `start`: The box holding the first pane.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-splitter": Partial<
     HelixSplitterProps & BaseProps<HelixSplitter> & BaseEvents<HelixSplitter>
@@ -33171,6 +33956,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--stat-group-gap`: Space between figures. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-stat-group": Partial<
     HelixStatGroupProps & BaseProps<HelixStatGroup> & BaseEvents<HelixStatGroup>
@@ -33239,6 +34030,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--stat-value-size`: Size of the figure. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-stat": Partial<HelixStatProps & BaseProps<HelixStat> & BaseEvents<HelixStat>>;
 
@@ -33348,6 +34145,12 @@ export type CustomElements = {
    * - `--steps-current-color`: The mark on the current step. (default: `undefined`)
    * - `--steps-gap`: Space between one step and the next. (default: `undefined`)
    * - `--steps-marker-size`: Size of the mark, glyph or digit. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-steps": Partial<HelixStepsProps & BaseProps<HelixSteps> & BaseEvents<HelixSteps>>;
 
@@ -33415,6 +34218,12 @@ export type CustomElements = {
    * - `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
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-step": Partial<HelixStepProps & BaseProps<HelixStep> & BaseEvents<HelixStep>>;
 
@@ -33594,6 +34403,14 @@ export type CustomElements = {
    * - `label`: The words beside it.
    * - `thumb`: The part that moves.
    * - `track`: The groove the thumb travels in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `checked`: While it is on.
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-switch": Partial<
     HelixSwitchProps & BaseProps<HelixSwitch> & BaseEvents<HelixSwitch>
@@ -33634,6 +34451,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The cell's content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-cell": Partial<
     HelixTableCellProps & BaseProps<HelixTableCell> & BaseEvents<HelixTableCell>
@@ -33764,6 +34587,14 @@ export type CustomElements = {
    * - `grip-mark`: The glyph on it.
    * - `resizer`: The edge a reader drags to change the width, where the column allows it.
    * - `sort`: The button a sortable heading is.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `sorted-ascending`: While the table is sorted by this column, smallest first.
+   * - `sorted-descending`: While the table is sorted by this column, largest first.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-column": Partial<
     HelixTableColumnProps & BaseProps<HelixTableColumn> & BaseEvents<HelixTableColumn>
@@ -33836,6 +34667,12 @@ export type CustomElements = {
    * - `empty`: Shown when there are no rows to show.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table": Partial<HelixTableProps & BaseProps<HelixTable> & BaseEvents<HelixTable>>;
 
@@ -33873,6 +34710,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The row's cells.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-row": Partial<
     HelixTableRowProps & BaseProps<HelixTableRow> & BaseEvents<HelixTableRow>
@@ -33930,6 +34773,13 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `panel`: The panel container.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While its tab is the one selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tab-panel": Partial<
     HelixTabPanelProps & BaseProps<HelixTabPanel> & BaseEvents<HelixTabPanel>
@@ -34029,6 +34879,12 @@ export type CustomElements = {
    * - `panels`: The panel container.
    * - `tabs`: The tab list.
    * - `indicator`: The mark that travels to the selected tab.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tabs": Partial<HelixTabsProps & BaseProps<HelixTabs> & BaseEvents<HelixTabs>>;
 
@@ -34088,6 +34944,13 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `tab`: The tab itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is the tab selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tab": Partial<HelixTabProps & BaseProps<HelixTab> & BaseEvents<HelixTab>>;
 
@@ -34187,6 +35050,12 @@ export type CustomElements = {
    * - `dismiss`: The remove button, when `dismissible`.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `prefix`: The category before the label.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tag": Partial<HelixTagProps & BaseProps<HelixTag> & BaseEvents<HelixTag>>;
 
@@ -34283,6 +35152,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `text`: The rendered element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-text": Partial<HelixTextProps & BaseProps<HelixText> & BaseEvents<HelixText>>;
 
@@ -34487,6 +35362,13 @@ export type CustomElements = {
    * - `field`: The box holding the control.
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-textarea": Partial<
     HelixTextareaProps & BaseProps<HelixTextarea> & BaseEvents<HelixTextarea>
@@ -34756,8 +35638,11 @@ export type CustomElements = {
    * - `picker-list-search`: The region holding the field that narrows the list.
    * - `picker-list-search-field`: The field itself.
    * - `picker-option`: One time in it. Carries `data-between` inside a range.
+   * - `picker-option-between`: A time inside a chosen range, short of either end, beside `picker-option`.
    * - `picker-option-description`: The caption under the words, when there is one.
    * - `picker-option-item`: The row.
+   * - `picker-option-item-active`: The row the keyboard is on.
+   * - `picker-option-item-selected`: The row of a chosen time: the one time, or either end of a range.
    * - `picker-option-label`: The words.
    * - `picker-option-text`: The words and the caption, as one column.
    * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -34769,6 +35654,14 @@ export type CustomElements = {
    * - `time-prefix`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The mark on the button that opens the clock.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the clock is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-time-input": Partial<
     HelixTimeInputProps & BaseProps<HelixTimeInput> & BaseEvents<HelixTimeInput>
@@ -34958,15 +35851,22 @@ export type CustomElements = {
    * Falling back to `defaultValue` rather than to empty, because a restore
    * with no state is a form the browser has nothing recorded for, which is
    * the same situation as a fresh one.
-   * - `reveal() => void`: Each wheel comes to rest on its own answer.
+   * - `reveal() => void`: Each wheel comes to rest on its own answer, and the list on the time it
+   * holds.
    *
    * A dial that opens at midnight when it holds ten in the evening is a dial
    * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
    * snap point when something scrolls, and nothing has. Measured before this,
-   * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
+   * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
+   * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
+   * 38 rows down and out of sight, flat on a page and in every Time Input panel.
+   * A list holding several, a range or a set, is left where it is, having no
+   * one row to come to rest on.
    *
-   * On every update rather than on the first, because the columns re-render as
-   * the value moves and the minute column's contents change with the hour.
+   * The wheels on every update, because the columns re-render as the value
+   * moves and the minute column's contents change with the hour. The list on
+   * the first only, where it is flat on a page: centering it on every choice
+   * would move the row out from under the pointer that chose it.
    *
    * **And it is public, because an update is not the only moment that matters.**
    * Inside a panel this element renders while the panel is still
@@ -35048,10 +35948,19 @@ export type CustomElements = {
    * - `list-search`: The region holding the field that narrows the list.
    * - `list-search-field`: The field itself.
    * - `option`: One time in it. Carries `data-between` inside a range.
+   * - `option-between`: A time inside a chosen range, short of either end, beside `option`.
    * - `option-description`: The caption under the words, when there is one.
    * - `option-item`: The row.
+   * - `option-item-active`: The row the keyboard is on.
+   * - `option-item-selected`: The row of a chosen time: the one time, or either end of a range.
    * - `option-label`: The words.
    * - `option-text`: The words and the caption, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-time-picker": Partial<
     HelixTimePickerProps & BaseProps<HelixTimePicker> & BaseEvents<HelixTimePicker>
@@ -35116,6 +36025,12 @@ export type CustomElements = {
    * - `marker`: The mark on the line.
    * - `rail`: The column holding the mark and the line.
    * - `time`: When it happened.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-timeline-item": Partial<
     HelixTimelineItemProps & BaseProps<HelixTimelineItem> & BaseEvents<HelixTimelineItem>
@@ -35160,6 +36075,12 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--timeline-gap`: Space between one entry and the next. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-timeline": Partial<
     HelixTimelineProps & BaseProps<HelixTimeline> & BaseEvents<HelixTimeline>
@@ -35264,6 +36185,12 @@ export type CustomElements = {
    * - `icon-mark`: The tone glyph, where none is slotted.
    * - `item`: The message's own surface.
    * - `timer`: The bar showing how long is left, where a duration was given.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toast-item": Partial<
     HelixToastItemProps & BaseProps<HelixToastItem> & BaseEvents<HelixToastItem>
@@ -35344,6 +36271,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `region`: The stack the messages are in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toast": Partial<HelixToastProps & BaseProps<HelixToast> & BaseEvents<HelixToast>>;
 
@@ -35527,6 +36460,13 @@ export type CustomElements = {
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
    * - `track`: The bar the items sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toggle-group": Partial<
     HelixToggleGroupProps & BaseProps<HelixToggleGroup> & BaseEvents<HelixToggleGroup>
@@ -35610,6 +36550,13 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `item`: The button or anchor.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is on.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toggle": Partial<
     HelixToggleProps & BaseProps<HelixToggle> & BaseEvents<HelixToggle>
@@ -35661,6 +36608,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `toolbar`: The toolbar container.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toolbar": Partial<
     HelixToolbarProps & BaseProps<HelixToolbar> & BaseEvents<HelixToolbar>
@@ -35858,6 +36811,13 @@ export type CustomElements = {
    *
    * - `arrow`: The point, resting against the trigger.
    * - `tooltip`: The bubble.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the tooltip shows.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tooltip": Partial<
     HelixTooltipProps & BaseProps<HelixTooltip> & BaseEvents<HelixTooltip>
@@ -35949,6 +36909,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `spotlight`: The box over the current target, which paints the scrim.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tour": Partial<HelixTourProps & BaseProps<HelixTour> & BaseEvents<HelixTour>>;
 
@@ -36033,6 +36999,12 @@ export type CustomElements = {
    * - `next-button`: The inner control.
    * - `skip`: The control that leaves the tour.
    * - `skip-button`: The inner control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tour-stop": Partial<
     HelixTourStopProps & BaseProps<HelixTourStop> & BaseEvents<HelixTourStop>
@@ -36176,6 +37148,14 @@ export type CustomElements = {
    * - `label`: The label text.
    * - `row`: The clickable label row.
    * - `toggle`: The expand and collapse control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While its children are shown.
+   * - `selected`: While it is selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tree-item": Partial<
     HelixTreeItemProps & BaseProps<HelixTreeItem> & BaseEvents<HelixTreeItem>
@@ -36294,6 +37274,12 @@ export type CustomElements = {
    * - `tree`: The tree container.
    * - `empty`: Shown when there are no rows to show.
    * - `loading`: Shown while the rows are still on their way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tree": Partial<HelixTreeProps & BaseProps<HelixTree> & BaseEvents<HelixTree>>;
 
@@ -36375,6 +37361,12 @@ export type CustomElements = {
    *
    * - `direction`: The direction as a word, for readers who are not looking.
    * - `icon`: The arrow.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-trend": Partial<HelixTrendProps & BaseProps<HelixTrend> & BaseEvents<HelixTrend>>;
 
@@ -36456,9 +37448,16 @@ export type CustomElements = {
    *
    * - `container`: The `listitem`, which the button sits in.
    * - `item`: The row, which is a button.
+   * - `item-current`: The row of the entry the player is on, beside `item`.
    * - `label`: The name and whatever follows it.
    * - `media`: The leading column.
    * - `thumbnail`: The image `poster` falls back to.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist-item": Partial<
     HelixVideoPlaylistItemProps & BaseProps<HelixVideoPlaylistItem> & BaseEvents<HelixVideoPlaylistItem>
@@ -36550,6 +37549,12 @@ export type CustomElements = {
    * - `menu-title`: The name of the submenu that is showing.
    * - `poster`: An entry's still, where it has one.
    * - `trigger`: The button that opens it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist-menu": Partial<
     HelixVideoPlaylistMenuProps & BaseProps<HelixVideoPlaylistMenu> & BaseEvents<HelixVideoPlaylistMenu>
@@ -36634,6 +37639,12 @@ export type CustomElements = {
    *
    * - `items`: The list of entries.
    * - `player`: The region holding the player.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist": Partial<
     HelixVideoPlaylistProps & BaseProps<HelixVideoPlaylist> & BaseEvents<HelixVideoPlaylist>
@@ -36907,6 +37918,7 @@ export type CustomElements = {
    * - `poster`: What covers it before it plays.
    * - `previous`: Asks for the previous one.
    * - `remote`: Play on another device, where one is available.
+   * - `remote-pressed`: The remote control while the picture is on another device, beside `remote`.
    * - `rewind`: The control that goes back ten seconds.
    * - `scrubber`: Where it is, and where to go.
    * - `sound`: The speaker and its level, which are one control.
@@ -36916,6 +37928,12 @@ export type CustomElements = {
    * - `time`: The position and the duration.
    * - `video`: The video itself.
    * - `volume`: How loud.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video": Partial<HelixVideoProps & BaseProps<HelixVideo> & BaseEvents<HelixVideo>>;
 
@@ -36975,6 +37993,12 @@ export type CustomElements = {
    * - `after`: The space standing in for rows below the window.
    * - `before`: The space standing in for rows above the window.
    * - `viewport`: The scrolling box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-virtual-list": Partial<
     HelixVirtualListProps & BaseProps<HelixVirtualList> & BaseEvents<HelixVirtualList>
@@ -37099,6 +38123,13 @@ export type CustomElementsSolidJs = {
    * - `content`: The revealed region.
    * - `content-inner`: Padding wrapper inside the animated region.
    * - `trigger`: The clickable summary row.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the item is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-accordion-item": Partial<
     HelixAccordionItemProps &
@@ -37177,6 +38208,12 @@ export type CustomElementsSolidJs = {
    * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
    * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
    * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-accordion": Partial<
     HelixAccordionProps &
@@ -37290,6 +38327,12 @@ export type CustomElementsSolidJs = {
    * - `content`: The message region.
    * - `dismiss`: The control that asks to close.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-announcement": Partial<
     HelixAnnouncementProps &
@@ -37429,6 +38472,13 @@ export type CustomElementsSolidJs = {
    * - `end`: The trailing region.
    * - `row`: The centered row inside the banner.
    * - `start`: The leading region.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-app-header": Partial<
     HelixAppHeaderProps &
@@ -37553,10 +38603,17 @@ export type CustomElementsSolidJs = {
    * - `svg`: The drawing surface the bands sit on.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-area-chart": Partial<
     HelixAreaChartProps &
@@ -37699,6 +38756,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `canvas`: The surface the shader draws into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-aura": Partial<
     HelixAuraProps & HelixAuraSolidJsProps & BaseProps<HelixAura> & BaseEvents<HelixAura>
@@ -37782,6 +38845,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `overflow`: The count of avatars past `max`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-avatar-group": Partial<
     HelixAvatarGroupProps &
@@ -37861,6 +38930,12 @@ export type CustomElementsSolidJs = {
    *
    * - `image`: The image, when one is loading or loaded.
    * - `initials`: The initials shown when there is no usable image.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-avatar": Partial<
     HelixAvatarProps &
@@ -37949,6 +39024,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The count, or the dot when there is no value.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-badge": Partial<
     HelixBadgeProps &
@@ -38209,6 +39290,7 @@ export type CustomElementsSolidJs = {
    * - `baseline`: The rule the columns stand on.
    * - `gridline`: One rule across the plot, under `gridlines`.
    * - `group`: One category's columns, together.
+   * - `group-active`: The group the tooltip is about, beside `group`.
    * - `label`: One category's name.
    * - `labels`: The row of category names.
    * - `line`: A series drawn as a line rather than as columns, under `lines`.
@@ -38218,10 +39300,17 @@ export type CustomElementsSolidJs = {
    * - `tick`: One number on an axis.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-bar-chart": Partial<
     HelixBarChartProps &
@@ -38279,6 +39368,12 @@ export type CustomElementsSolidJs = {
    *
    * - `attribution`: The footer carrying the source.
    * - `blockquote`: The quotation.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-blockquote": Partial<
     HelixBlockquoteProps &
@@ -38366,6 +39461,12 @@ export type CustomElementsSolidJs = {
    * - `separator`: The separator preceding the item.
    * - `link`: The crumb itself, which is an `<a>` where `href` is set.
    * - `separator-mark`: The glyph between this crumb and the next, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-breadcrumb": Partial<
     HelixBreadcrumbProps &
@@ -38418,6 +39519,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `list`: The ordered list.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-breadcrumbs": Partial<
     HelixBreadcrumbsProps &
@@ -38491,6 +39598,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--button-group-gap`: Space between the buttons, when `spaced`. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-button-group": Partial<
     HelixButtonGroupProps &
@@ -38765,6 +39878,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-button": Partial<
     HelixButtonProps &
@@ -38832,6 +39951,12 @@ export type CustomElementsSolidJs = {
    * - `content`: The content region.
    * - `icon`: The icon region.
    * - `icon-mark`: The tone glyph, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-callout": Partial<
     HelixCalloutProps &
@@ -38956,6 +40081,12 @@ export type CustomElementsSolidJs = {
    * - `--card-padding`: Inset applied to each region. (default: `undefined`)
    * - `--card-radius`: Corner radius of the surface. (default: `undefined`)
    * - `--card-shadow`: Shadow under the surface. What `elevated` sets, and what a `data-card` link raises on hover. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-card": Partial<
     HelixCardProps & HelixCardSolidJsProps & BaseProps<HelixCard> & BaseEvents<HelixCard>
@@ -39161,6 +40292,7 @@ export type CustomElementsSolidJs = {
    *
    * - `controls`: The row of controls.
    * - `indicator`: One of them, and a way to reach that slide.
+   * - `indicator-current`: The one for the slide showing, beside `indicator`.
    * - `indicators`: The row of controls saying where the reader is.
    * - `next`: The control that moves to the next slide.
    * - `next-mark`: The glyph on the next control.
@@ -39170,6 +40302,12 @@ export type CustomElementsSolidJs = {
    * - `rotation-mark`: The glyph on the play and pause control.
    * - `slide`: The pane one slide is shown in, and the box the track snaps to.
    * - `track`: The scroller the slides sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-carousel": Partial<
     HelixCarouselProps &
@@ -39265,6 +40403,12 @@ export type CustomElementsSolidJs = {
    * - `end`: The trailing slot's box.
    * - `mark`: The glyph inside the send control.
    * - `start`: The leading slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat-composer": Partial<
     HelixChatComposerProps &
@@ -39386,6 +40530,12 @@ export type CustomElementsSolidJs = {
    * - `sources`: What the turn was drawn from, under it and outside the bubble.
    * - `state`: What has happened to it, where that is worth saying.
    * - `time`: When it was said.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat-message": Partial<
     HelixChatMessageProps &
@@ -39533,9 +40683,27 @@ export type CustomElementsSolidJs = {
    * - `history`: Shown at the top of the transcript while older turns are on their way.
    * - `live`: Where each settled turn is said, for a reader who cannot see it arrive.
    * - `loading`: Shown while the history is still on its way.
+   * - `message`: A turn fed as data: the message drawn for it, forwarded whole.
+   * - `message-actions`: The controls offered on a fed turn, beside its time.
+   * - `message-avatar`: A fed turn's leading slot's box.
+   * - `message-body`: What a fed turn said, and the line under it.
+   * - `message-content`: A fed turn's text.
+   * - `message-indicator`: A fed turn's default wait.
+   * - `message-mark`: The status glyph beside a fed turn's failure.
+   * - `message-meta`: The line under a fed turn: its time, its state, and its controls.
+   * - `message-retry`: The control offered on a fed turn that failed.
+   * - `message-sources`: What a fed turn was drawn from.
+   * - `message-state`: What has happened to a fed turn, where that is worth saying.
+   * - `message-time`: When a fed turn was said.
    * - `resume`: The affordance offered while the reader is away from the bottom.
    * - `status`: The status region, which is not part of the log.
    * - `turn`: One turn fed as data, around the message drawn for it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-chat": Partial<
     HelixChatProps & HelixChatSolidJsProps & BaseProps<HelixChat> & BaseEvents<HelixChat>
@@ -39669,6 +40837,13 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the set.
    * - `items`: The list itself, which is what `orientation` lays out.
    * - `label`: The group's name, over the set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-checkbox-group": Partial<
     HelixCheckboxGroupProps &
@@ -39863,6 +41038,17 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The label beside it.
    * - `mark`: The tick, or the dash when the box is indeterminate.
+   * - `mark-checked`: The mark while the box is checked, beside `mark`.
+   * - `mark-indeterminate`: The mark while the box is indeterminate, beside `mark`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `checked`: While the box is checked.
+   * - `has-label`: While the label slot holds something to read, which is what draws a label at all.
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-checkbox": Partial<
     HelixCheckboxProps &
@@ -39978,6 +41164,12 @@ export type CustomElementsSolidJs = {
    * - `removed`: In a diff, a line only the old version has, a `<del>`.
    * - `split`: In a split diff, the two versions side by side.
    * - `text`: In a diff, a line's code.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-code-block": Partial<
     HelixCodeBlockProps &
@@ -40033,6 +41225,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `code`: The `<code>` element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-code": Partial<
     HelixCodeProps & HelixCodeSolidJsProps & BaseProps<HelixCode> & BaseEvents<HelixCode>
@@ -40301,6 +41499,14 @@ export type CustomElementsSolidJs = {
    * - `preview`: The chip showing the color, inside the trigger.
    * - `surface`: The floating panel.
    * - `trigger`: The control that opens the panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the picker is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-color-input": Partial<
     HelixColorInputProps &
@@ -40542,6 +41748,12 @@ export type CustomElementsSolidJs = {
    * - `swatch`: One preset.
    * - `swatches`: The row of presets.
    * - `value`: The color as text, which can be typed or pasted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-color-picker": Partial<
     HelixColorPickerProps &
@@ -40800,6 +42012,14 @@ export type CustomElementsSolidJs = {
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `tag-prefix`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the list is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-combobox": Partial<
     HelixComboboxProps &
@@ -40912,6 +42132,13 @@ export type CustomElementsSolidJs = {
    * - `listbox-loading`: Shown while the options are still on their way.
    * - `listbox-search`: The region holding the field that narrows the list.
    * - `listbox-search-field`: The field itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the palette is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-command": Partial<
     HelixCommandProps &
@@ -41158,6 +42385,12 @@ export type CustomElementsSolidJs = {
    * - `mark`: The clipboard glyph, and the confirmation that replaces it.
    * - `tooltip`: The bubble, forwarded from the tooltip inside.
    * - `tooltip-arrow`: The point, resting against the trigger.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-copy-button": Partial<
     HelixCopyButtonProps &
@@ -41401,6 +42634,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One cell.
+   * - `cell-selected`: A cell of a selected row, beside `cell`.
    * - `table`: The grid.
    * - `after`: The room the rows below the window would have taken. Windowed only.
    * - `before`: The room the rows above the window would have taken. Windowed only.
@@ -41412,15 +42646,36 @@ export type CustomElementsSolidJs = {
    * - `checkbox-hint`: Forwarded from the checkbox, and never drawn here.
    * - `checkbox-label`: Forwarded from the checkbox; the label is spoken, not shown.
    * - `checkbox-mark`: The tick, or the dash while some rows are selected.
+   * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
+   * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
    * - `empty`: Shown when no rows match.
    * - `footer`: The region below the grid.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
    * - `pagination`: The pagination, where this draws one.
+   * - `pagination-first`: The pagination's control that jumps to the first page, under `ends`.
+   * - `pagination-gap`: The pagination's control standing over pages not shown.
+   * - `pagination-item`: One slot in the pagination's run, holding a page or a gap.
+   * - `pagination-last`: The pagination's control that jumps to the last page, under `ends`.
+   * - `pagination-list`: The pagination's run of pages.
+   * - `pagination-live`: The region that says the page changed. Clipped, not hidden.
+   * - `pagination-mark`: The glyph on a first, previous, next or last control.
+   * - `pagination-next`: The pagination's control that moves forward one page.
+   * - `pagination-page`: The pagination's control for one page.
+   * - `pagination-page-current`: The page you are on, beside `pagination-page`.
+   * - `pagination-previous`: The pagination's control that moves back one page.
+   * - `pagination-status`: The pagination's reading of where you are, in `compact`.
    * - `row`: One row of data.
    * - `select`: The cell holding a row's checkbox.
    * - `select-all`: The heading holding the checkbox that selects every row.
+   * - `select-selected`: The checkbox cell of a selected row, beside `select`.
    * - `toolbar`: The region above the grid.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-data-table": Partial<
     HelixDataTableProps &
@@ -41695,7 +42950,14 @@ export type CustomElementsSolidJs = {
    * - `label`: The question, over the field.
    * - `picker`: The date picker inside it.
    * - `picker-cell`: One column of a row, which is what a range paints.
+   * - `picker-cell-range-end`: The cell of a range's last day, beside `picker-cell`.
+   * - `picker-cell-range-middle`: A cell between a range's ends, beside `picker-cell`.
+   * - `picker-cell-range-start`: The cell of a range's first day, beside `picker-cell`.
    * - `picker-day`: The shape inside a cell, which is what a single date paints.
+   * - `picker-day-disabled`: A day that cannot be chosen, beside `picker-day`.
+   * - `picker-day-outside`: A day from a neighboring month, beside `picker-day`.
+   * - `picker-day-selected`: The chosen day, or either end of a chosen range, beside `picker-day`.
+   * - `picker-day-today`: Today, beside `picker-day`.
    * - `picker-grid`: The grid of days.
    * - `picker-header`: The month name and its controls.
    * - `picker-heading`: The month and year being shown.
@@ -41712,6 +42974,14 @@ export type CustomElementsSolidJs = {
    * - `tags`: The row the dates sit in.
    * - `trigger`: The control that opens the calendar.
    * - `trigger-icon`: The mark on the button that opens the calendar.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the calendar is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-date-input": Partial<
     HelixDateInputProps &
@@ -41936,7 +43206,14 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One column of a row, which is what a range paints.
+   * - `cell-range-end`: The cell of a range's last day, beside `cell`.
+   * - `cell-range-middle`: A cell between a range's ends, beside `cell`.
+   * - `cell-range-start`: The cell of a range's first day, beside `cell`.
    * - `day`: The shape inside a cell, which is what a single date paints.
+   * - `day-disabled`: A day that cannot be chosen, beside `day`.
+   * - `day-outside`: A day from a neighboring month, filling the grid out, beside `day`.
+   * - `day-selected`: The chosen day, or either end of a chosen range, beside `day`.
+   * - `day-today`: Today, beside `day`.
    * - `grid`: The grid of days.
    * - `header`: The month name and its controls.
    * - `heading`: The month and year being shown.
@@ -41948,6 +43225,12 @@ export type CustomElementsSolidJs = {
    * - `previous-mark`: The glyph on the previous month control, where none is slotted.
    * - `week`: One row of days.
    * - `weekday`: A column header naming a day of the week.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-date-picker": Partial<
     HelixDatePickerProps &
@@ -42000,6 +43283,12 @@ export type CustomElementsSolidJs = {
    *
    * - `label`: The `<dt>`, holding the label.
    * - `value`: The `<dd>`, holding the value.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-description-list-item": Partial<
     HelixDescriptionListItemProps &
@@ -42095,6 +43384,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `list`: The `<dl>` holding the items.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-description-list": Partial<
     HelixDescriptionListProps &
@@ -42236,6 +43531,13 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `dialog`: The native dialog element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the dialog is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-dialog": Partial<
     HelixDialogProps &
@@ -42309,6 +43611,12 @@ export type CustomElementsSolidJs = {
    *
    * - `line`: The rule itself.
    * - `content`: What is set into it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-divider": Partial<
     HelixDividerProps &
@@ -42499,14 +43807,22 @@ export type CustomElementsSolidJs = {
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `plot`: The drawing.
    * - `segment`: One slice.
+   * - `segment-active`: The slice under the pointer, beside `segment`.
    * - `segment-edge`: One slice as a closed shape, for a boundary to trace.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The slice's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
    * - `track`: The ring the slices are drawn on.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-donut-chart": Partial<
     HelixDonutChartProps &
@@ -42663,6 +43979,13 @@ export type CustomElementsSolidJs = {
    * - `content`: The scrolling content region.
    * - `header`: The header region.
    * - `panel`: The sliding panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the drawer is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drawer": Partial<
     HelixDrawerProps &
@@ -42752,6 +44075,12 @@ export type CustomElementsSolidJs = {
    *
    * - `item`: The row itself.
    * - `label`: The words.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown-item": Partial<
     HelixDrilldownItemProps &
@@ -42844,6 +44173,12 @@ export type CustomElementsSolidJs = {
    * - `loading`: Shown while the entries are still on their way.
    * - `page`: The region the rows are in.
    * - `title`: The name of the page showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown": Partial<
     HelixDrilldownProps &
@@ -42899,6 +44234,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--empty-padding`: Space around the whole block. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-empty": Partial<
     HelixEmptyProps &
@@ -43089,6 +44430,13 @@ export type CustomElementsSolidJs = {
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `size-prefix`: The category before the label.
    * - `trigger`: The label that opens the picker.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-file-input": Partial<
     HelixFileInputProps &
@@ -43205,6 +44553,12 @@ export type CustomElementsSolidJs = {
    * - `field`: The name of what is being filtered.
    * - `operator`: How it is compared, drawn only where there is one to draw.
    * - `values`: What it is compared to.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-chip": Partial<
     HelixFilterChipProps &
@@ -43293,6 +44647,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The comparisons this field supports, as `FilterOperator`s, and the values it supports them on, as `Option`s. Neither is rendered: they are read.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-field": Partial<
     HelixFilterFieldProps &
@@ -43380,6 +44740,32 @@ export type CustomElementsSolidJs = {
    *
    * Refusing the `helix-facet` puts everything back, so a consumer who declines
    * a filter is never left looking at a menu that says it took.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `divider`: The rule between a field's comparisons and its values.
+   * - `divider-content`: What is set into the rule.
+   * - `divider-line`: The rule itself.
+   * - `entry`: One row: a field, its comparison, an operator or a value.
+   * - `entry-item`: The row itself.
+   * - `entry-mark`: The trailing mark: a tick on a chosen value, a caret on a field.
+   * - `entry-start`: The leading column.
+   * - `menu`: The menu the fields are offered in.
+   * - `menu-back`: The control that returns from a field's page.
+   * - `menu-back-mark`: The glyph on the back control.
+   * - `menu-empty`: Shown when there are no fields to offer.
+   * - `menu-header`: The bar above a field's page, holding the way back and its name.
+   * - `menu-loading`: Shown while the fields are still on their way.
+   * - `menu-surface`: The floating panel the menu is drawn on.
+   * - `menu-title`: The name of the field whose page is showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-menu": Partial<
     HelixFilterMenuProps &
@@ -43464,6 +44850,12 @@ export type CustomElementsSolidJs = {
    * It never resolves where `requestAnimationFrame` never fires, which is a
    * server, a hidden tab, and happy-dom. Callers that must not hang race it
    * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-operator": Partial<
     HelixFilterOperatorProps &
@@ -43716,6 +45108,14 @@ export type CustomElementsSolidJs = {
    * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the suggestions are open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-filter-input": Partial<
     HelixFilterInputProps &
@@ -43773,6 +45173,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The items to lay out.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-flex": Partial<
     HelixFlexProps & HelixFlexSolidJsProps & BaseProps<HelixFlex> & BaseEvents<HelixFlex>
@@ -43848,6 +45254,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `time`: The `<time>` element carrying the reading.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-format-date": Partial<
     HelixFormatDateProps &
@@ -43905,6 +45317,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--grid-columns`: An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-grid": Partial<
     HelixGridProps & HelixGridSolidJsProps & BaseProps<HelixGrid> & BaseEvents<HelixGrid>
@@ -44092,6 +45510,7 @@ export type CustomElementsSolidJs = {
    * - `strip`: The grid of cells.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
@@ -44100,6 +45519,12 @@ export type CustomElementsSolidJs = {
    * - `end`: The trailing slot's box.
    * - `start`: The leading slot's box.
    * - `summary`: The middle slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-heatmap": Partial<
     HelixHeatmapProps &
@@ -44361,6 +45786,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button or anchor.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-icon-button": Partial<
     HelixIconButtonProps &
@@ -44411,6 +45842,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `svg`: The rendered SVG.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-icon": Partial<
     HelixIconProps & HelixIconSolidJsProps & BaseProps<HelixIcon> & BaseEvents<HelixIcon>
@@ -44530,6 +45967,12 @@ export type CustomElementsSolidJs = {
    * - `fallback`: What stands in when it fails.
    * - `image`: The picture itself.
    * - `placeholder`: What stands in until it arrives.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-image": Partial<
     HelixImageProps &
@@ -44776,6 +46219,14 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
    * - `reveal`: The button that shows and hides a password.
+   * - `reveal-pressed`: The reveal button while the password shows, beside `reveal`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-input": Partial<
     HelixInputProps &
@@ -44852,6 +46303,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `kbd`: The key.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-kbd": Partial<
     HelixKbdProps & HelixKbdSolidJsProps & BaseProps<HelixKbd> & BaseEvents<HelixKbd>
@@ -44979,6 +46436,12 @@ export type CustomElementsSolidJs = {
    * - `list`: The list itself.
    * - `name`: One series name.
    * - `swatch`: The color a series is drawn in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-legend": Partial<
     HelixLegendProps &
@@ -45204,10 +46667,17 @@ export type CustomElementsSolidJs = {
    * - `terminus`: The mark on one series' last reading.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The reading's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
    * - `tooltip-value`: A column's value inside the tooltip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-line-chart": Partial<
     HelixLineChartProps &
@@ -45276,6 +46746,12 @@ export type CustomElementsSolidJs = {
    *
    * - `rail`: The cell a railed list draws its number in.
    * - `row`: The layout, held off the host so the host can carry a marker.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-list-item": Partial<
     HelixListItemProps &
@@ -45378,6 +46854,12 @@ export type CustomElementsSolidJs = {
    * - `--list-marker-gutter`: Room the ordered and unordered markers hang into. (default: `undefined`)
    * - `--list-rail-inline-size`: The width of the rail's track. (default: `undefined`)
    * - `--list-rail-style`: What a rail counts with. Any `list-style-type`. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-list": Partial<
     HelixListProps & HelixListSolidJsProps & BaseProps<HelixList> & BaseEvents<HelixList>
@@ -45625,6 +47107,13 @@ export type CustomElementsSolidJs = {
    * - `loading`: Shown while the options are still on their way.
    * - `search`: The region holding the field that narrows the list.
    * - `search-field`: The field itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-listbox": Partial<
     HelixListboxProps &
@@ -45695,6 +47184,12 @@ export type CustomElementsSolidJs = {
    * - `mark`: The region holding what was slotted at the center.
    * - `svg`: The rotating circle pair.
    * - `track`: The full circle behind the indicator.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-loader": Partial<
     HelixLoaderProps &
@@ -45825,6 +47320,13 @@ export type CustomElementsSolidJs = {
    *
    * - `surface`: The floating panel, which is what opens.
    * - `trigger`: The default trigger, where none was slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `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.
    */
   "helix-megamenu": Partial<
     HelixMegamenuProps &
@@ -45978,6 +47480,12 @@ export type CustomElementsSolidJs = {
    * - `item`: The row, which is an `<a>` where `href` is set.
    * - `mark`: The trailing mark: a tick when checked, a caret when it opens a page. One column, because a row is never both.
    * - `start`: The leading column, which is a slot and is always there.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-menu-item": Partial<
     HelixMenuItemProps &
@@ -46095,6 +47603,16 @@ export type CustomElementsSolidJs = {
    * - `loading`: Shown while the items are still on their way.
    * - `surface`: The floating panel the menu is drawn on.
    * - `title`: The name of the submenu that is showing.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `drilled`: While a submenu's page is showing rather than the menu's own, so what is not a row can leave with the page it was on.
+   * - `mark`: While a row on the page showing can be ticked or leads to a page, so the trailing column is held open for every row.
+   * - `open`: While the menu is open.
+   * - `start`: While a row on the page showing has something in its leading column, so that column is held open for every row.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-menu": Partial<
     HelixMenuProps & HelixMenuSolidJsProps & BaseProps<HelixMenu> & BaseEvents<HelixMenu>
@@ -46170,8 +47688,10 @@ export type CustomElementsSolidJs = {
    * again is a worse API than letting them say it.
    *
    * Not reflected. Nothing selects on it: the band reaches the stylesheet as
-   * `data-band` on the fill, because that is the element being colored, so
-   * reflecting here would write an attribute onto the host for no reader.
+   * `data-band` on the fill, because that is the element being colored, and a
+   * stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
+   * part names, so reflecting here would write an attribute onto the host for
+   * no reader.
    * - `high`: Bottom of the high band.
    *
    * Absent leaves the range unbanded.
@@ -46256,10 +47776,21 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The part of it the value fills.
+   * - `indicator-fair`: The fill while the reading is in a band beside the good one, beside `indicator`.
+   * - `indicator-good`: The fill while the reading is in the good band, beside `indicator`.
+   * - `indicator-over`: The fill while the value is past the top, beside `indicator`.
+   * - `indicator-poor`: The fill while the reading is two bands from the good one, beside `indicator`.
+   * - `indicator-under`: The fill while the value is below the floor, beside `indicator`.
    * - `tick`: A mark at `low` or at `high`.
    * - `track`: The whole range.
    * - `value`: The reading, under `show-value`.
    * - `groove`: The unfilled circle, in `ring` and `arc`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-meter": Partial<
     HelixMeterProps &
@@ -46317,6 +47848,12 @@ export type CustomElementsSolidJs = {
    *
    * - `indicator`: The marker that travels to the current destination.
    * - `nav`: The navigation landmark.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-navigation": Partial<
     HelixNavigationProps &
@@ -46435,6 +47972,13 @@ export type CustomElementsSolidJs = {
    * - `items`: The region holding the notifications.
    * - `label`: What the group is called.
    * - `trigger`: The control that collapses and expands, where collapsible.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the group shows every notification in it rather than the first.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notification-group": Partial<
     HelixNotificationGroupProps &
@@ -46592,6 +48136,15 @@ export type CustomElementsSolidJs = {
    * - `body`: The label and the caption together.
    * - `label`: What happened, on the first line.
    * - `media`: The leading slot's box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `actions`: While the actions slot holds something, so the words above make room for it.
+   * - `controls`: While it can be dismissed, so the time makes way for the control under a pointer.
+   * - `read`: While it has been read.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notification": Partial<
     HelixNotificationProps &
@@ -46744,6 +48297,13 @@ export type CustomElementsSolidJs = {
    * - `footer`: The region below the list.
    * - `header`: The region above the list.
    * - `loading`: Shown while the feed is still on its way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `media`: While a notification in the list holds something in its media slot, so every row keeps that column.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-notifications": Partial<
     HelixNotificationsProps &
@@ -46960,6 +48520,13 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the field, while nothing is wrong.
    * - `increment-mark`: The glyph on the step up control.
    * - `label`: The name over the field, which is also the scrub grip.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-number-input": Partial<
     HelixNumberInputProps &
@@ -47059,10 +48626,17 @@ export type CustomElementsSolidJs = {
    * - `null`: A `null`.
    * - `number`: A number.
    * - `row`: One entry, a tree item.
+   * - `row-active`: The entry the keyboard is on, beside `row`.
    * - `string`: A string, in quotes.
    * - `summary`: The brackets standing for a branch's contents.
    * - `toggle`: The caret on a branch: down when open, across when closed.
    * - `tree`: The tree, the one thing focus lands on.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-object-inspector": Partial<
     HelixObjectInspectorProps &
@@ -47113,6 +48687,12 @@ export type CustomElementsSolidJs = {
    *
    * - `items`: The run itself.
    * - `label`: The heading.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-option-group": Partial<
     HelixOptionGroupProps &
@@ -47289,8 +48869,17 @@ export type CustomElementsSolidJs = {
    *
    * - `description`: The caption under the words, when there is one.
    * - `item`: The row.
+   * - `item-active`: The row the keyboard is on, beside `item`.
+   * - `item-selected`: The row of a chosen option, beside `item`.
    * - `label`: The words.
    * - `text`: The words and the caption under them, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While the option is chosen.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-option": Partial<
     HelixOptionProps &
@@ -47392,6 +48981,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `canvas`: The surface the cloud is drawn into.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-orb": Partial<
     HelixOrbProps & HelixOrbSolidJsProps & BaseProps<HelixOrb> & BaseEvents<HelixOrb>
@@ -47488,6 +49083,12 @@ export type CustomElementsSolidJs = {
    *
    * - `indicator`: The mark that travels to the section being read.
    * - `nav`: The navigation landmark.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-outline": Partial<
     HelixOutlineProps &
@@ -47667,10 +49268,18 @@ export type CustomElementsSolidJs = {
    * - `list`: The run of pages.
    * - `next`: The control that moves forward one page.
    * - `page`: The control for one page.
+   * - `page-current`: The page you are on, beside `page`.
    * - `previous`: The control that moves back one page.
    * - `status`: The reading of where you are, in `compact`.
    * - `live`: The region that says the page changed. Clipped, not hidden.
    * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: While there is one page or none, which is nothing to page through.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination": Partial<
     HelixPaginationProps &
@@ -47684,8 +49293,9 @@ export type CustomElementsSolidJs = {
    * stands in a column of fields; this one stands in a footer beside a run of page
    * numbers, where a two-line control makes the whole row two lines tall.
    *
-   * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
-   * reach through both boundaries and a consumer styles it as the select it is.
+   * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
+   * `::part(control-label)` reach through both boundaries and a consumer styles it
+   * as the select it is.
    *
    * ## Attributes & Properties
    *
@@ -47736,9 +49346,38 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `control`: The select.
-   * - `label`: The words beside the number, forwarded from the select.
-   * - `trigger`: The closed control, forwarded from the select.
-   * - `value`: The chosen size inside the trigger, forwarded from the select.
+   * - `control-feedback`: What is wrong with it.
+   * - `control-hint`: Help under the trigger.
+   * - `control-indicator`: The caret saying the control opens.
+   * - `control-label`: The words beside the number.
+   * - `control-listbox`: The list inside it.
+   * - `control-listbox-empty`: Shown when a filter has hidden everything.
+   * - `control-listbox-feedback`: What is wrong with the list.
+   * - `control-listbox-filter-icon`: The mark beside the filter field.
+   * - `control-listbox-filter-mark`: The glyph beside the filter field, where none is slotted.
+   * - `control-listbox-hint`: Help under the list.
+   * - `control-listbox-items`: The list itself.
+   * - `control-listbox-label`: The question, over the list.
+   * - `control-listbox-loading`: Shown while the options are still on their way.
+   * - `control-listbox-search`: The region holding the field that narrows the list.
+   * - `control-listbox-search-field`: The field itself.
+   * - `control-surface`: The floating panel.
+   * - `control-trigger`: The closed control, which says what size is chosen.
+   * - `control-value`: The chosen size inside the trigger.
+   * - `option`: One size on offer.
+   * - `option-description`: The caption under the number, when there is one.
+   * - `option-item`: The row.
+   * - `option-item-active`: The row the keyboard is on.
+   * - `option-item-selected`: The row of the size chosen.
+   * - `option-label`: The number.
+   * - `option-text`: The number and the caption, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: While there are no sizes to offer.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination-size": Partial<
     HelixPaginationSizeProps &
@@ -47793,6 +49432,12 @@ export type CustomElementsSolidJs = {
    * It never resolves where `requestAnimationFrame` never fires, which is a
    * server, a hidden tab, and happy-dom. Callers that must not hang race it
    * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pagination-summary": Partial<
     HelixPaginationSummaryProps &
@@ -47994,6 +49639,13 @@ export type CustomElementsSolidJs = {
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the boxes, while nothing is wrong.
    * - `label`: The question, over the boxes.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-pin-input": Partial<
     HelixPinInputProps &
@@ -48111,6 +49763,13 @@ export type CustomElementsSolidJs = {
    *
    * - `content`: The scrolling region inside the panel.
    * - `popover`: The panel.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the popover is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-popover": Partial<
     HelixPopoverProps &
@@ -48230,6 +49889,12 @@ export type CustomElementsSolidJs = {
    * - `indicator`: The part of it that is done.
    * - `track`: The full length the work is measured against.
    * - `value`: The reading beside the bar, under `show-value`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-progress": Partial<
     HelixProgressProps &
@@ -48319,6 +49984,12 @@ export type CustomElementsSolidJs = {
    * - `finders`: The three corner squares, which can take their own color.
    * - `logo`: The box holding the center mark.
    * - `modules`: Everything but the three corner squares.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-qr-code": Partial<
     HelixQrCodeProps &
@@ -48372,6 +50043,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `quote`: The quotation.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-quote": Partial<
     HelixQuoteProps &
@@ -48541,6 +50218,13 @@ export type CustomElementsSolidJs = {
    * - `hint`: Help under the set.
    * - `items`: The choices, which is what `orientation` lays out.
    * - `label`: The question, over the set.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-radio-group": Partial<
     HelixRadioGroupProps &
@@ -48671,6 +50355,13 @@ export type CustomElementsSolidJs = {
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
    * - `mark`: The dot inside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is the one chosen.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-radio": Partial<
     HelixRadioProps &
@@ -48892,6 +50583,13 @@ export type CustomElementsSolidJs = {
    * - `option`: One place a reader can press, which is one step.
    * - `track`: The unfilled marks.
    * - `value`: The score written out, under `show-value`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-rating": Partial<
     HelixRatingProps &
@@ -48988,6 +50686,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `frame`: The iframe.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-preview": Partial<
     HelixSandboxPreviewProps &
@@ -49114,6 +50818,12 @@ export type CustomElementsSolidJs = {
    * - `panel`: The box holding whatever was slotted as the panel.
    * - `panes`: The splitter holding the source and preview panes.
    * - `separator`: Either divider.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox": Partial<
     HelixSandboxProps &
@@ -49183,6 +50893,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `source`: The editable region.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-source": Partial<
     HelixSandboxSourceProps &
@@ -49254,6 +50970,12 @@ export type CustomElementsSolidJs = {
    *
    * - `caret`: The line and column readout.
    * - `language`: The language readout.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-status-bar": Partial<
     HelixSandboxStatusBarProps &
@@ -49328,6 +51050,12 @@ export type CustomElementsSolidJs = {
    * - `level`: The level a line came in at.
    * - `log`: The scrolling region.
    * - `message`: The text of a line.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-terminal": Partial<
     HelixSandboxTerminalProps &
@@ -49384,6 +51112,12 @@ export type CustomElementsSolidJs = {
    *
    * - `--sandbox-toolbar-gap`: Space between items. (default: `undefined`)
    * - `--sandbox-toolbar-size`: The bar's height. Defaults to a large control. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sandbox-toolbar": Partial<
     HelixSandboxToolbarProps &
@@ -49494,10 +51228,12 @@ export type CustomElementsSolidJs = {
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `plot`: The drawing.
    * - `point`: One row, as a point.
+   * - `point-active`: A point of the row a pointer is asking about, beside `point`.
    * - `summary`: How strongly the measures relate, for a reader who cannot see the points.
    * - `svg`: The drawing surface the rules sit on.
    * - `tooltip`: The bubble, forwarded from `Tooltip`.
    * - `tooltip-anchor`: The `Tooltip` element itself.
+   * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
    * - `tooltip-cell`: One column's name and value inside the tooltip.
    * - `tooltip-label`: The row's own name inside the tooltip.
    * - `tooltip-name`: A column's name inside the tooltip.
@@ -49508,6 +51244,12 @@ export type CustomElementsSolidJs = {
    * - `y-axis`: The levels measured up, beside the plot.
    * - `y-name`: What is measured up.
    * - `y-tick`: One labeled level up.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-scatter-chart": Partial<
     HelixScatterChartProps &
@@ -49583,6 +51325,17 @@ export type CustomElementsSolidJs = {
    *
    * - `edges`: Where the sideways edge cues are drawn.
    * - `viewport`: The scrolling box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `more-block-end`: While there is more to scroll to past the block end.
+   * - `more-block-start`: While there is more to scroll back to before the block start.
+   * - `more-inline-end`: While there is more to scroll to past the inline end.
+   * - `more-inline-start`: While there is more to scroll back to before the inline start.
+   * - `scrolls`: While the content is larger than the viewport, on either axis.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-scroll-area": Partial<
     HelixScrollAreaProps &
@@ -49838,6 +51591,14 @@ export type CustomElementsSolidJs = {
    * - `surface`: The floating panel.
    * - `trigger`: The closed control, which says what is chosen.
    * - `value`: The chosen option's text inside the trigger.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the list is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-select": Partial<
     HelixSelectProps &
@@ -49888,6 +51649,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `skeleton`: The placeholder surface.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-skeleton": Partial<
     HelixSkeletonProps &
@@ -49963,6 +51730,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `link`: The anchor, which is what takes focus.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-skip-link": Partial<
     HelixSkipLinkProps &
@@ -50172,6 +51945,13 @@ export type CustomElementsSolidJs = {
    * - `marker-label`: The value a mark stands at, when `marker-labels` is set.
    * - `markers`: The row of marks along the track.
    * - `output`: The current value, shown beside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-slider": Partial<
     HelixSliderProps &
@@ -50370,6 +52150,12 @@ export type CustomElementsSolidJs = {
    * - `terminus`: The mark on the last value.
    * - `wash-end`: The far stop of the area's gradient.
    * - `wash-start`: The stop of the area's gradient that meets the line.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-sparkline": Partial<
     HelixSparklineProps &
@@ -50448,6 +52234,12 @@ export type CustomElementsSolidJs = {
    * - `icon`: The mark's box.
    * - `item`: The control.
    * - `label`: The name beside it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-speed-dial-item": Partial<
     HelixSpeedDialItemProps &
@@ -50544,6 +52336,13 @@ export type CustomElementsSolidJs = {
    *
    * - `actions`: The region the actions are drawn in.
    * - `trigger`: The default trigger, where none was slotted.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the actions are out.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-speed-dial": Partial<
     HelixSpeedDialProps &
@@ -50747,6 +52546,12 @@ export type CustomElementsSolidJs = {
    * - `end`: The box holding the second.
    * - `separator`: The divider itself.
    * - `start`: The box holding the first pane.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-splitter": Partial<
     HelixSplitterProps &
@@ -50797,6 +52602,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--stat-group-gap`: Space between figures. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-stat-group": Partial<
     HelixStatGroupProps &
@@ -50868,6 +52679,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--stat-value-size`: Size of the figure. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-stat": Partial<
     HelixStatProps & HelixStatSolidJsProps & BaseProps<HelixStat> & BaseEvents<HelixStat>
@@ -50979,6 +52796,12 @@ export type CustomElementsSolidJs = {
    * - `--steps-current-color`: The mark on the current step. (default: `undefined`)
    * - `--steps-gap`: Space between one step and the next. (default: `undefined`)
    * - `--steps-marker-size`: Size of the mark, glyph or digit. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-steps": Partial<
     HelixStepsProps &
@@ -51051,6 +52874,12 @@ export type CustomElementsSolidJs = {
    * - `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
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-step": Partial<
     HelixStepProps & HelixStepSolidJsProps & BaseProps<HelixStep> & BaseEvents<HelixStep>
@@ -51232,6 +53061,14 @@ export type CustomElementsSolidJs = {
    * - `label`: The words beside it.
    * - `thumb`: The part that moves.
    * - `track`: The groove the thumb travels in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `checked`: While it is on.
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-switch": Partial<
     HelixSwitchProps &
@@ -51275,6 +53112,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The cell's content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-cell": Partial<
     HelixTableCellProps &
@@ -51408,6 +53251,14 @@ export type CustomElementsSolidJs = {
    * - `grip-mark`: The glyph on it.
    * - `resizer`: The edge a reader drags to change the width, where the column allows it.
    * - `sort`: The button a sortable heading is.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `sorted-ascending`: While the table is sorted by this column, smallest first.
+   * - `sorted-descending`: While the table is sorted by this column, largest first.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-column": Partial<
     HelixTableColumnProps &
@@ -51483,6 +53334,12 @@ export type CustomElementsSolidJs = {
    * - `empty`: Shown when there are no rows to show.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table": Partial<
     HelixTableProps &
@@ -51525,6 +53382,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The row's cells.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-table-row": Partial<
     HelixTableRowProps &
@@ -51585,6 +53448,13 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `panel`: The panel container.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While its tab is the one selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tab-panel": Partial<
     HelixTabPanelProps &
@@ -51687,6 +53557,12 @@ export type CustomElementsSolidJs = {
    * - `panels`: The panel container.
    * - `tabs`: The tab list.
    * - `indicator`: The mark that travels to the selected tab.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tabs": Partial<
     HelixTabsProps & HelixTabsSolidJsProps & BaseProps<HelixTabs> & BaseEvents<HelixTabs>
@@ -51748,6 +53624,13 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `tab`: The tab itself.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is the tab selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tab": Partial<
     HelixTabProps & HelixTabSolidJsProps & BaseProps<HelixTab> & BaseEvents<HelixTab>
@@ -51849,6 +53732,12 @@ export type CustomElementsSolidJs = {
    * - `dismiss`: The remove button, when `dismissible`.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
    * - `prefix`: The category before the label.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tag": Partial<
     HelixTagProps & HelixTagSolidJsProps & BaseProps<HelixTag> & BaseEvents<HelixTag>
@@ -51947,6 +53836,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `text`: The rendered element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-text": Partial<
     HelixTextProps & HelixTextSolidJsProps & BaseProps<HelixText> & BaseEvents<HelixText>
@@ -52153,6 +54048,13 @@ export type CustomElementsSolidJs = {
    * - `field`: The box holding the control.
    * - `hint`: Help under the field, while nothing is wrong.
    * - `label`: The question, over the field.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-textarea": Partial<
     HelixTextareaProps &
@@ -52425,8 +54327,11 @@ export type CustomElementsSolidJs = {
    * - `picker-list-search`: The region holding the field that narrows the list.
    * - `picker-list-search-field`: The field itself.
    * - `picker-option`: One time in it. Carries `data-between` inside a range.
+   * - `picker-option-between`: A time inside a chosen range, short of either end, beside `picker-option`.
    * - `picker-option-description`: The caption under the words, when there is one.
    * - `picker-option-item`: The row.
+   * - `picker-option-item-active`: The row the keyboard is on.
+   * - `picker-option-item-selected`: The row of a chosen time: the one time, or either end of a range.
    * - `picker-option-label`: The words.
    * - `picker-option-text`: The words and the caption, as one column.
    * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -52438,6 +54343,14 @@ export type CustomElementsSolidJs = {
    * - `time-prefix`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The mark on the button that opens the clock.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `open`: While the clock is open.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-time-input": Partial<
     HelixTimeInputProps &
@@ -52630,15 +54543,22 @@ export type CustomElementsSolidJs = {
    * Falling back to `defaultValue` rather than to empty, because a restore
    * with no state is a form the browser has nothing recorded for, which is
    * the same situation as a fresh one.
-   * - `reveal() => void`: Each wheel comes to rest on its own answer.
+   * - `reveal() => void`: Each wheel comes to rest on its own answer, and the list on the time it
+   * holds.
    *
    * A dial that opens at midnight when it holds ten in the evening is a dial
    * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
    * snap point when something scrolls, and nothing has. Measured before this,
-   * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
+   * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
+   * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
+   * 38 rows down and out of sight, flat on a page and in every Time Input panel.
+   * A list holding several, a range or a set, is left where it is, having no
+   * one row to come to rest on.
    *
-   * On every update rather than on the first, because the columns re-render as
-   * the value moves and the minute column's contents change with the hour.
+   * The wheels on every update, because the columns re-render as the value
+   * moves and the minute column's contents change with the hour. The list on
+   * the first only, where it is flat on a page: centering it on every choice
+   * would move the row out from under the pointer that chose it.
    *
    * **And it is public, because an update is not the only moment that matters.**
    * Inside a panel this element renders while the panel is still
@@ -52720,10 +54640,19 @@ export type CustomElementsSolidJs = {
    * - `list-search`: The region holding the field that narrows the list.
    * - `list-search-field`: The field itself.
    * - `option`: One time in it. Carries `data-between` inside a range.
+   * - `option-between`: A time inside a chosen range, short of either end, beside `option`.
    * - `option-description`: The caption under the words, when there is one.
    * - `option-item`: The row.
+   * - `option-item-active`: The row the keyboard is on.
+   * - `option-item-selected`: The row of a chosen time: the one time, or either end of a range.
    * - `option-label`: The words.
    * - `option-text`: The words and the caption, as one column.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-time-picker": Partial<
     HelixTimePickerProps &
@@ -52791,6 +54720,12 @@ export type CustomElementsSolidJs = {
    * - `marker`: The mark on the line.
    * - `rail`: The column holding the mark and the line.
    * - `time`: When it happened.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-timeline-item": Partial<
     HelixTimelineItemProps &
@@ -52838,6 +54773,12 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--timeline-gap`: Space between one entry and the next. (default: `undefined`)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-timeline": Partial<
     HelixTimelineProps &
@@ -52945,6 +54886,12 @@ export type CustomElementsSolidJs = {
    * - `icon-mark`: The tone glyph, where none is slotted.
    * - `item`: The message's own surface.
    * - `timer`: The bar showing how long is left, where a duration was given.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toast-item": Partial<
     HelixToastItemProps &
@@ -53028,6 +54975,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `region`: The stack the messages are in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toast": Partial<
     HelixToastProps &
@@ -53216,6 +55169,13 @@ export type CustomElementsSolidJs = {
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
    * - `track`: The bar the items sit in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toggle-group": Partial<
     HelixToggleGroupProps &
@@ -53302,6 +55262,13 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `item`: The button or anchor.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: While it is on.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toggle": Partial<
     HelixToggleProps &
@@ -53356,6 +55323,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `toolbar`: The toolbar container.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-toolbar": Partial<
     HelixToolbarProps &
@@ -53556,6 +55529,13 @@ export type CustomElementsSolidJs = {
    *
    * - `arrow`: The point, resting against the trigger.
    * - `tooltip`: The bubble.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While the tooltip shows.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tooltip": Partial<
     HelixTooltipProps &
@@ -53650,6 +55630,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `spotlight`: The box over the current target, which paints the scrim.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tour": Partial<
     HelixTourProps & HelixTourSolidJsProps & BaseProps<HelixTour> & BaseEvents<HelixTour>
@@ -53736,6 +55722,12 @@ export type CustomElementsSolidJs = {
    * - `next-button`: The inner control.
    * - `skip`: The control that leaves the tour.
    * - `skip-button`: The inner control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tour-stop": Partial<
     HelixTourStopProps &
@@ -53882,6 +55874,14 @@ export type CustomElementsSolidJs = {
    * - `label`: The label text.
    * - `row`: The clickable label row.
    * - `toggle`: The expand and collapse control.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `open`: While its children are shown.
+   * - `selected`: While it is selected.
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tree-item": Partial<
     HelixTreeItemProps &
@@ -54003,6 +56003,12 @@ export type CustomElementsSolidJs = {
    * - `tree`: The tree container.
    * - `empty`: Shown when there are no rows to show.
    * - `loading`: Shown while the rows are still on their way.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-tree": Partial<
     HelixTreeProps & HelixTreeSolidJsProps & BaseProps<HelixTree> & BaseEvents<HelixTree>
@@ -54086,6 +56092,12 @@ export type CustomElementsSolidJs = {
    *
    * - `direction`: The direction as a word, for readers who are not looking.
    * - `icon`: The arrow.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-trend": Partial<
     HelixTrendProps &
@@ -54172,9 +56184,16 @@ export type CustomElementsSolidJs = {
    *
    * - `container`: The `listitem`, which the button sits in.
    * - `item`: The row, which is a button.
+   * - `item-current`: The row of the entry the player is on, beside `item`.
    * - `label`: The name and whatever follows it.
    * - `media`: The leading column.
    * - `thumbnail`: The image `poster` falls back to.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist-item": Partial<
     HelixVideoPlaylistItemProps &
@@ -54269,6 +56288,12 @@ export type CustomElementsSolidJs = {
    * - `menu-title`: The name of the submenu that is showing.
    * - `poster`: An entry's still, where it has one.
    * - `trigger`: The button that opens it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist-menu": Partial<
     HelixVideoPlaylistMenuProps &
@@ -54356,6 +56381,12 @@ export type CustomElementsSolidJs = {
    *
    * - `items`: The list of entries.
    * - `player`: The region holding the player.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video-playlist": Partial<
     HelixVideoPlaylistProps &
@@ -54632,6 +56663,7 @@ export type CustomElementsSolidJs = {
    * - `poster`: What covers it before it plays.
    * - `previous`: Asks for the previous one.
    * - `remote`: Play on another device, where one is available.
+   * - `remote-pressed`: The remote control while the picture is on another device, beside `remote`.
    * - `rewind`: The control that goes back ten seconds.
    * - `scrubber`: Where it is, and where to go.
    * - `sound`: The speaker and its level, which are one control.
@@ -54641,6 +56673,12 @@ export type CustomElementsSolidJs = {
    * - `time`: The position and the duration.
    * - `video`: The video itself.
    * - `volume`: How loud.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-video": Partial<
     HelixVideoProps &
@@ -54705,6 +56743,12 @@ export type CustomElementsSolidJs = {
    * - `after`: The space standing in for rows below the window.
    * - `before`: The space standing in for rows above the window.
    * - `viewport`: The scrolling box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-virtual-list": Partial<
     HelixVirtualListProps &