@fusion.dev/helix-headless 0.30.2 → 0.31.0

package/types/jsx.d.ts

@@ -9166,8 +9166,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?: (HelixHeadlessMeter["band"]) | undefined;
   /** Bottom of the high band.
 
@@ -9257,8 +9259,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"?: (HelixHeadlessMeter["band"]) | undefined;
   /** Bottom of the high band.
 
@@ -16984,6 +16988,13 @@ export type CustomElements = {
    * - `content`: The revealed region.
    * - `content-inner`: The clipping box 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-headless-accordion-item": Partial<
     HelixHeadlessAccordionItemProps &
@@ -17048,6 +17059,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The accordion's 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-headless-accordion": Partial<
     HelixHeadlessAccordionProps & BaseProps<HelixHeadlessAccordion> & BaseEvents<HelixHeadlessAccordion>
@@ -17152,6 +17169,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-headless-announcement": Partial<
     HelixHeadlessAnnouncementProps &
@@ -17231,6 +17254,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-headless-app-header": Partial<
     HelixHeadlessAppHeaderProps & BaseProps<HelixHeadlessAppHeader> & BaseEvents<HelixHeadlessAppHeader>
@@ -17370,10 +17400,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-headless-area-chart": Partial<
     HelixHeadlessAreaChartProps & BaseProps<HelixHeadlessAreaChart> & BaseEvents<HelixHeadlessAreaChart>
@@ -17449,6 +17486,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-headless-avatar-group": Partial<
     HelixHeadlessAvatarGroupProps &
@@ -17524,6 +17567,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-headless-avatar": Partial<
     HelixHeadlessAvatarProps & BaseProps<HelixHeadlessAvatar> & BaseEvents<HelixHeadlessAvatar>
@@ -17598,6 +17647,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-headless-badge": Partial<
     HelixHeadlessBadgeProps & BaseProps<HelixHeadlessBadge> & BaseEvents<HelixHeadlessBadge>
@@ -17776,6 +17831,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`.
@@ -17785,10 +17841,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-headless-bar-chart": Partial<
     HelixHeadlessBarChartProps & BaseProps<HelixHeadlessBarChart> & BaseEvents<HelixHeadlessBarChart>
@@ -17840,6 +17903,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-headless-blockquote": Partial<
     HelixHeadlessBlockquoteProps &
@@ -17933,6 +18002,12 @@ export type CustomElements = {
    * - `link`: The crumb itself, which is an `<a>` where `href` is set.
    * - `separator`: The separator preceding the item.
    * - `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-headless-breadcrumb": Partial<
     HelixHeadlessBreadcrumbProps &
@@ -17988,6 +18063,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-headless-breadcrumbs": Partial<
     HelixHeadlessBreadcrumbsProps &
@@ -18057,6 +18138,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The buttons in the group.
+   *
+   * ## 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-headless-button-group": Partial<
     HelixHeadlessButtonGroupProps &
@@ -18279,6 +18366,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-headless-button": Partial<
     HelixHeadlessButtonProps & BaseProps<HelixHeadlessButton> & BaseEvents<HelixHeadlessButton>
@@ -18345,6 +18438,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-headless-callout": Partial<
     HelixHeadlessCalloutProps & BaseProps<HelixHeadlessCallout> & BaseEvents<HelixHeadlessCallout>
@@ -18407,6 +18506,12 @@ export type CustomElements = {
    * - `footer`: Actions that conclude the card.
    * - `header`: Title and any actions for the whole card.
    * - `media`: Image, video, or chart that runs edge to edge, outside the inset.
+   *
+   * ## 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-headless-card": Partial<
     HelixHeadlessCardProps & BaseProps<HelixHeadlessCard> & BaseEvents<HelixHeadlessCard>
@@ -18550,6 +18655,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.
@@ -18559,6 +18665,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-headless-carousel": Partial<
     HelixHeadlessCarouselProps & BaseProps<HelixHeadlessCarousel> & BaseEvents<HelixHeadlessCarousel>
@@ -18651,6 +18763,12 @@ export type CustomElements = {
    * - `send`: The control that offers the turn.
    * - `start`: The leading slot's box.
    * - `tools`: The row under the field.
+   *
+   * ## 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-headless-chat-composer": Partial<
     HelixHeadlessChatComposerProps &
@@ -18746,6 +18864,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-headless-chat-message": Partial<
     HelixHeadlessChatMessageProps &
@@ -18902,9 +19026,27 @@ export type CustomElements = {
    * - `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.
    * - `log`: The transcript, which is the thing that scrolls.
+   * - `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-headless-chat": Partial<
     HelixHeadlessChatProps & BaseProps<HelixHeadlessChat> & BaseEvents<HelixHeadlessChat>
@@ -19045,6 +19187,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-headless-checkbox-group": Partial<
     HelixHeadlessCheckboxGroupProps &
@@ -19223,6 +19372,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-headless-checkbox": Partial<
     HelixHeadlessCheckboxProps & BaseProps<HelixHeadlessCheckbox> & BaseEvents<HelixHeadlessCheckbox>
@@ -19352,6 +19512,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-headless-code-block": Partial<
     HelixHeadlessCodeBlockProps & BaseProps<HelixHeadlessCodeBlock> & BaseEvents<HelixHeadlessCodeBlock>
@@ -19404,6 +19570,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-headless-code": Partial<
     HelixHeadlessCodeProps & BaseProps<HelixHeadlessCode> & BaseEvents<HelixHeadlessCode>
@@ -19674,6 +19846,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-headless-color-input": Partial<
     HelixHeadlessColorInputProps &
@@ -19902,6 +20082,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-headless-color-picker": Partial<
     HelixHeadlessColorPickerProps &
@@ -20170,6 +20356,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-headless-combobox": Partial<
     HelixHeadlessComboboxProps & BaseProps<HelixHeadlessCombobox> & BaseEvents<HelixHeadlessCombobox>
@@ -20289,6 +20483,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-headless-command": Partial<
     HelixHeadlessCommandProps & BaseProps<HelixHeadlessCommand> & BaseEvents<HelixHeadlessCommand>
@@ -20509,6 +20710,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-headless-copy-button": Partial<
     HelixHeadlessCopyButtonProps &
@@ -20770,6 +20977,7 @@ export type CustomElements = {
    * - `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.
    * - `cell`: One cell.
+   * - `cell-selected`: A cell of a selected row, beside `cell`.
    * - `checkbox`: A row's checkbox, or the one in the heading that selects them all.
    * - `checkbox-box`: The frame the checkbox's input is painted as.
    * - `checkbox-control`: The checkbox's input.
@@ -20778,16 +20986,37 @@ 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`.
    * - `table`: The grid.
    * - `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-headless-data-table": Partial<
     HelixHeadlessDataTableProps & BaseProps<HelixHeadlessDataTable> & BaseEvents<HelixHeadlessDataTable>
@@ -21047,7 +21276,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.
@@ -21064,6 +21300,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-headless-date-input": Partial<
     HelixHeadlessDateInputProps & BaseProps<HelixHeadlessDateInput> & BaseEvents<HelixHeadlessDateInput>
@@ -21277,7 +21521,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.
@@ -21289,6 +21540,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-headless-date-picker": Partial<
     HelixHeadlessDatePickerProps &
@@ -21345,6 +21602,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-headless-description-list-item": Partial<
     HelixHeadlessDescriptionListItemProps &
@@ -21415,6 +21678,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-headless-description-list": Partial<
     HelixHeadlessDescriptionListProps &
@@ -21547,6 +21816,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-headless-dialog": Partial<
     HelixHeadlessDialogProps & BaseProps<HelixHeadlessDialog> & BaseEvents<HelixHeadlessDialog>
@@ -21611,6 +21887,12 @@ export type CustomElements = {
    *
    * - `content`: What is set into it.
    * - `line`: The rule itself, or each half of it where something is set 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-headless-divider": Partial<
     HelixHeadlessDividerProps & BaseProps<HelixHeadlessDivider> & BaseEvents<HelixHeadlessDivider>
@@ -21749,14 +22031,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-headless-donut-chart": Partial<
     HelixHeadlessDonutChartProps &
@@ -21902,6 +22192,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-headless-drawer": Partial<
     HelixHeadlessDrawerProps & BaseProps<HelixHeadlessDrawer> & BaseEvents<HelixHeadlessDrawer>
@@ -21992,6 +22289,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-headless-drilldown-item": Partial<
     HelixHeadlessDrilldownItemProps &
@@ -22087,6 +22390,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-headless-drilldown": Partial<
     HelixHeadlessDrilldownProps & BaseProps<HelixHeadlessDrilldown> & BaseEvents<HelixHeadlessDrilldown>
@@ -22142,6 +22451,12 @@ export type CustomElements = {
    * - `actions`: The way out.
    * - `heading`: What is missing.
    * - `icon`: A mark above 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-headless-empty": Partial<
     HelixHeadlessEmptyProps & BaseProps<HelixHeadlessEmpty> & BaseEvents<HelixHeadlessEmpty>
@@ -22319,6 +22634,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-headless-file-input": Partial<
     HelixHeadlessFileInputProps & BaseProps<HelixHeadlessFileInput> & BaseEvents<HelixHeadlessFileInput>
@@ -22447,6 +22769,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-headless-filter-chip": Partial<
     HelixHeadlessFilterChipProps &
@@ -22560,6 +22888,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-headless-filter-field": Partial<
     HelixHeadlessFilterFieldProps &
@@ -22679,6 +23013,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-headless-filter-menu": Partial<
     HelixHeadlessFilterMenuProps &
@@ -22773,6 +23133,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-headless-filter-operator": Partial<
     HelixHeadlessFilterOperatorProps &
@@ -23066,6 +23432,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-headless-filter-input": Partial<
     HelixHeadlessFilterInputProps &
@@ -23160,6 +23534,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-headless-format-date": Partial<
     HelixHeadlessFormatDateProps &
@@ -23361,10 +23741,17 @@ export type CustomElements = {
    * - `summary`: The middle slot's box.
    * - `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-headless-heatmap": Partial<
     HelixHeadlessHeatmapProps & BaseProps<HelixHeadlessHeatmap> & BaseEvents<HelixHeadlessHeatmap>
@@ -23581,6 +23968,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-headless-icon-button": Partial<
     HelixHeadlessIconButtonProps &
@@ -23642,6 +24035,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-headless-icon": Partial<
     HelixHeadlessIconProps & BaseProps<HelixHeadlessIcon> & BaseEvents<HelixHeadlessIcon>
@@ -23751,6 +24150,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-headless-image": Partial<
     HelixHeadlessImageProps & BaseProps<HelixHeadlessImage> & BaseEvents<HelixHeadlessImage>
@@ -23992,6 +24397,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-headless-input": Partial<
     HelixHeadlessInputProps & BaseProps<HelixHeadlessInput> & BaseEvents<HelixHeadlessInput>
@@ -24067,6 +24480,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-headless-kbd": Partial<
     HelixHeadlessKbdProps & BaseProps<HelixHeadlessKbd> & BaseEvents<HelixHeadlessKbd>
@@ -24126,6 +24545,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-headless-legend": Partial<
     HelixHeadlessLegendProps & BaseProps<HelixHeadlessLegend> & BaseEvents<HelixHeadlessLegend>
@@ -24315,10 +24740,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-headless-line-chart": Partial<
     HelixHeadlessLineChartProps & BaseProps<HelixHeadlessLineChart> & BaseEvents<HelixHeadlessLineChart>
@@ -24391,6 +24823,12 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `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-headless-list-item": Partial<
     HelixHeadlessListItemProps & BaseProps<HelixHeadlessListItem> & BaseEvents<HelixHeadlessListItem>
@@ -24465,6 +24903,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The rows.
+   *
+   * ## 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-headless-list": Partial<
     HelixHeadlessListProps & BaseProps<HelixHeadlessList> & BaseEvents<HelixHeadlessList>
@@ -24714,6 +25158,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-headless-listbox": Partial<
     HelixHeadlessListboxProps & BaseProps<HelixHeadlessListbox> & BaseEvents<HelixHeadlessListbox>
@@ -24778,6 +25229,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-headless-loader": Partial<
     HelixHeadlessLoaderProps & BaseProps<HelixHeadlessLoader> & BaseEvents<HelixHeadlessLoader>
@@ -24910,6 +25367,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-headless-megamenu": Partial<
     HelixHeadlessMegamenuProps & BaseProps<HelixHeadlessMegamenu> & BaseEvents<HelixHeadlessMegamenu>
@@ -25064,6 +25528,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-headless-menu-item": Partial<
     HelixHeadlessMenuItemProps & BaseProps<HelixHeadlessMenuItem> & BaseEvents<HelixHeadlessMenuItem>
@@ -25178,6 +25648,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-headless-menu": Partial<
     HelixHeadlessMenuProps & BaseProps<HelixHeadlessMenu> & BaseEvents<HelixHeadlessMenu>
@@ -25221,8 +25701,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.
@@ -25302,9 +25784,20 @@ export type CustomElements = {
    *
    * - `groove`: The unfilled circle, in `ring` and `arc`.
    * - `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, or the drawing in `ring` and `arc`.
    * - `value`: The reading, 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-headless-meter": Partial<
     HelixHeadlessMeterProps & BaseProps<HelixHeadlessMeter> & BaseEvents<HelixHeadlessMeter>
@@ -25363,6 +25856,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-headless-navigation": Partial<
     HelixHeadlessNavigationProps &
@@ -25486,6 +25985,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-headless-notification-group": Partial<
     HelixHeadlessNotificationGroupProps &
@@ -25607,6 +26113,15 @@ export type CustomElements = {
    * - `media`: The leading slot's box.
    * - `time`: When it happened, read the way a person reads one.
    * - `trailing`: The column holding the time and the controls.
+   *
+   * ## 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-headless-notification": Partial<
     HelixHeadlessNotificationProps &
@@ -25756,6 +26271,13 @@ export type CustomElements = {
    * - `list`: The list itself.
    * - `loading`: Shown while the feed is still on its way.
    * - `mark-all`: The control that marks everything read.
+   *
+   * ## 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-headless-notifications": Partial<
     HelixHeadlessNotificationsProps &
@@ -25978,6 +26500,13 @@ export type CustomElements = {
    * - `increment`: The control that steps up.
    * - `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-headless-number-input": Partial<
     HelixHeadlessNumberInputProps &
@@ -26100,10 +26629,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-headless-object-inspector": Partial<
     HelixHeadlessObjectInspectorProps &
@@ -26157,6 +26693,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-headless-option-group": Partial<
     HelixHeadlessOptionGroupProps &
@@ -26337,8 +26879,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-headless-option": Partial<
     HelixHeadlessOptionProps & BaseProps<HelixHeadlessOption> & BaseEvents<HelixHeadlessOption>
@@ -26432,6 +26983,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-headless-outline": Partial<
     HelixHeadlessOutlineProps & BaseProps<HelixHeadlessOutline> & BaseEvents<HelixHeadlessOutline>
@@ -26606,8 +27163,16 @@ export type CustomElements = {
    * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
    * - `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`.
+   *
+   * ## 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-headless-pagination": Partial<
     HelixHeadlessPaginationProps &
@@ -26691,9 +27256,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-headless-pagination-size": Partial<
     HelixHeadlessPaginationSizeProps &
@@ -26757,6 +27351,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-headless-pagination-summary": Partial<
     HelixHeadlessPaginationSummaryProps &
@@ -26959,6 +27559,13 @@ export type CustomElements = {
    * - `field`: The row of boxes.
    * - `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-headless-pin-input": Partial<
     HelixHeadlessPinInputProps & BaseProps<HelixHeadlessPinInput> & BaseEvents<HelixHeadlessPinInput>
@@ -27063,6 +27670,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-headless-popover": Partial<
     HelixHeadlessPopoverProps & BaseProps<HelixHeadlessPopover> & BaseEvents<HelixHeadlessPopover>
@@ -27162,6 +27776,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-headless-progress": Partial<
     HelixHeadlessProgressProps & BaseProps<HelixHeadlessProgress> & BaseEvents<HelixHeadlessProgress>
@@ -27250,6 +27870,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-headless-qr-code": Partial<
     HelixHeadlessQrCodeProps & BaseProps<HelixHeadlessQrCode> & BaseEvents<HelixHeadlessQrCode>
@@ -27299,6 +27925,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-headless-quote": Partial<
     HelixHeadlessQuoteProps & BaseProps<HelixHeadlessQuote> & BaseEvents<HelixHeadlessQuote>
@@ -27473,6 +28105,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-headless-radio-group": Partial<
     HelixHeadlessRadioGroupProps &
@@ -27564,6 +28203,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-headless-radio": Partial<
     HelixHeadlessRadioProps & BaseProps<HelixHeadlessRadio> & BaseEvents<HelixHeadlessRadio>
@@ -27765,6 +28411,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-headless-rating": Partial<
     HelixHeadlessRatingProps & BaseProps<HelixHeadlessRating> & BaseEvents<HelixHeadlessRating>
@@ -27882,10 +28535,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.
@@ -27896,6 +28551,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-headless-scatter-chart": Partial<
     HelixHeadlessScatterChartProps &
@@ -27972,6 +28633,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-headless-scroll-area": Partial<
     HelixHeadlessScrollAreaProps &
@@ -28194,6 +28866,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-headless-select": Partial<
     HelixHeadlessSelectProps & BaseProps<HelixHeadlessSelect> & BaseEvents<HelixHeadlessSelect>
@@ -28236,6 +28916,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-headless-skeleton": Partial<
     HelixHeadlessSkeletonProps & BaseProps<HelixHeadlessSkeleton> & BaseEvents<HelixHeadlessSkeleton>
@@ -28312,6 +28998,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-headless-skip-link": Partial<
     HelixHeadlessSkipLinkProps & BaseProps<HelixHeadlessSkipLink> & BaseEvents<HelixHeadlessSkipLink>
@@ -28515,6 +29207,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-headless-slider": Partial<
     HelixHeadlessSliderProps & BaseProps<HelixHeadlessSlider> & BaseEvents<HelixHeadlessSlider>
@@ -28656,6 +29355,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-headless-sparkline": Partial<
     HelixHeadlessSparklineProps & BaseProps<HelixHeadlessSparkline> & BaseEvents<HelixHeadlessSparkline>
@@ -28732,6 +29437,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-headless-speed-dial-item": Partial<
     HelixHeadlessSpeedDialItemProps &
@@ -28839,6 +29550,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-headless-speed-dial": Partial<
     HelixHeadlessSpeedDialProps & BaseProps<HelixHeadlessSpeedDial> & BaseEvents<HelixHeadlessSpeedDial>
@@ -29018,6 +29736,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-headless-splitter": Partial<
     HelixHeadlessSplitterProps & BaseProps<HelixHeadlessSplitter> & BaseEvents<HelixHeadlessSplitter>
@@ -29057,6 +29781,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The stats.
+   *
+   * ## 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-headless-stat-group": Partial<
     HelixHeadlessStatGroupProps & BaseProps<HelixHeadlessStatGroup> & BaseEvents<HelixHeadlessStatGroup>
@@ -29123,6 +29853,12 @@ export type CustomElements = {
    * - `(default)`: The value.
    * - `label`: What the value measures.
    * - `unit`: The unit, set beside 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-headless-stat": Partial<
     HelixHeadlessStatProps & BaseProps<HelixHeadlessStat> & BaseEvents<HelixHeadlessStat>
@@ -29225,6 +29961,12 @@ export type CustomElements = {
    * nothing to put back. Nobody refusing means the set updates itself,
    * whether or not a consumer declared `active`, a declared property being a
    * seed and a correction.
+   *
+   * ## 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-headless-steps": Partial<
     HelixHeadlessStepsProps & BaseProps<HelixHeadlessSteps> & BaseEvents<HelixHeadlessSteps>
@@ -29308,6 +30050,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-headless-step": Partial<
     HelixHeadlessStepProps & BaseProps<HelixHeadlessStep> & BaseEvents<HelixHeadlessStep>
@@ -29479,6 +30227,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-headless-switch": Partial<
     HelixHeadlessSwitchProps & BaseProps<HelixHeadlessSwitch> & BaseEvents<HelixHeadlessSwitch>
@@ -29522,6 +30278,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-headless-table-cell": Partial<
     HelixHeadlessTableCellProps & BaseProps<HelixHeadlessTableCell> & BaseEvents<HelixHeadlessTableCell>
@@ -29679,6 +30441,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-headless-table-column": Partial<
     HelixHeadlessTableColumnProps &
@@ -29764,6 +30534,12 @@ export type CustomElements = {
    * - `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.
    * - `table`: 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-headless-table": Partial<
     HelixHeadlessTableProps & BaseProps<HelixHeadlessTable> & BaseEvents<HelixHeadlessTable>
@@ -29803,6 +30579,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-headless-table-row": Partial<
     HelixHeadlessTableRowProps & BaseProps<HelixHeadlessTableRow> & BaseEvents<HelixHeadlessTableRow>
@@ -29860,6 +30642,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-headless-tab-panel": Partial<
     HelixHeadlessTabPanelProps & BaseProps<HelixHeadlessTabPanel> & BaseEvents<HelixHeadlessTabPanel>
@@ -29965,6 +30754,12 @@ export type CustomElements = {
    * - `indicator`: The mark that travels to the selected tab.
    * - `panels`: The panel container.
    * - `tabs`: The tab 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-headless-tabs": Partial<
     HelixHeadlessTabsProps & BaseProps<HelixHeadlessTabs> & BaseEvents<HelixHeadlessTabs>
@@ -30028,6 +30823,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-headless-tab": Partial<
     HelixHeadlessTabProps & BaseProps<HelixHeadlessTab> & BaseEvents<HelixHeadlessTab>
@@ -30099,6 +30901,12 @@ export type CustomElements = {
    * - `dismiss`: The control that asks to remove the tag.
    * - `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-headless-tag": Partial<
     HelixHeadlessTagProps & BaseProps<HelixHeadlessTag> & BaseEvents<HelixHeadlessTag>
@@ -30309,6 +31117,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-headless-textarea": Partial<
     HelixHeadlessTextareaProps & BaseProps<HelixHeadlessTextarea> & BaseEvents<HelixHeadlessTextarea>
@@ -30576,8 +31391,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.
@@ -30589,6 +31407,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-headless-time-input": Partial<
     HelixHeadlessTimeInputProps & BaseProps<HelixHeadlessTimeInput> & BaseEvents<HelixHeadlessTimeInput>
@@ -30771,15 +31597,22 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `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
@@ -30862,10 +31695,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-headless-time-picker": Partial<
     HelixHeadlessTimePickerProps &
@@ -30936,6 +31778,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-headless-timeline-item": Partial<
     HelixHeadlessTimelineItemProps &
@@ -30996,6 +31844,12 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The entries.
+   *
+   * ## 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-headless-timeline": Partial<
     HelixHeadlessTimelineProps & BaseProps<HelixHeadlessTimeline> & BaseEvents<HelixHeadlessTimeline>
@@ -31108,6 +31962,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-headless-toast-item": Partial<
     HelixHeadlessToastItemProps & BaseProps<HelixHeadlessToastItem> & BaseEvents<HelixHeadlessToastItem>
@@ -31191,6 +32051,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-headless-toast": Partial<
     HelixHeadlessToastProps & BaseProps<HelixHeadlessToast> & BaseEvents<HelixHeadlessToast>
@@ -31362,6 +32228,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-headless-toggle-group": Partial<
     HelixHeadlessToggleGroupProps &
@@ -31449,6 +32322,13 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `item`: The radio button.
+   *
+   * ## 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-headless-toggle": Partial<
     HelixHeadlessToggleProps & BaseProps<HelixHeadlessToggle> & BaseEvents<HelixHeadlessToggle>
@@ -31501,6 +32381,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-headless-toolbar": Partial<
     HelixHeadlessToolbarProps & BaseProps<HelixHeadlessToolbar> & BaseEvents<HelixHeadlessToolbar>
@@ -31688,6 +32574,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-headless-tooltip": Partial<
     HelixHeadlessTooltipProps & BaseProps<HelixHeadlessTooltip> & BaseEvents<HelixHeadlessTooltip>
@@ -31784,6 +32677,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-headless-tour": Partial<
     HelixHeadlessTourProps & BaseProps<HelixHeadlessTour> & BaseEvents<HelixHeadlessTour>
@@ -31885,6 +32784,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-headless-tour-stop": Partial<
     HelixHeadlessTourStopProps & BaseProps<HelixHeadlessTourStop> & BaseEvents<HelixHeadlessTourStop>
@@ -32033,6 +32938,14 @@ export type CustomElements = {
    * - `label`: The label text.
    * - `row`: The clickable label row, which is an `<a>` where `href` is set.
    * - `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-headless-tree-item": Partial<
     HelixHeadlessTreeItemProps & BaseProps<HelixHeadlessTreeItem> & BaseEvents<HelixHeadlessTreeItem>
@@ -32123,6 +33036,12 @@ export type CustomElements = {
    * - `empty`: Shown when there are no rows to show.
    * - `loading`: Shown while the rows are still on their way.
    * - `tree`: The tree 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-headless-tree": Partial<
     HelixHeadlessTreeProps & BaseProps<HelixHeadlessTree> & BaseEvents<HelixHeadlessTree>
@@ -32198,6 +33117,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-headless-trend": Partial<
     HelixHeadlessTrendProps & BaseProps<HelixHeadlessTrend> & BaseEvents<HelixHeadlessTrend>
@@ -32289,9 +33214,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-headless-video-playlist-item": Partial<
     HelixHeadlessVideoPlaylistItemProps &
@@ -32371,6 +33303,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-headless-video-playlist-menu": Partial<
     HelixHeadlessVideoPlaylistMenuProps &
@@ -32470,6 +33408,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-headless-video-playlist": Partial<
     HelixHeadlessVideoPlaylistProps &
@@ -32747,6 +33691,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.
@@ -32756,6 +33701,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-headless-video": Partial<
     HelixHeadlessVideoProps & BaseProps<HelixHeadlessVideo> & BaseEvents<HelixHeadlessVideo>
@@ -32821,6 +33772,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. Needs a block size and an overflow on this tier.
+   *
+   * ## 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-headless-virtual-list": Partial<
     HelixHeadlessVirtualListProps &
@@ -32943,6 +33900,13 @@ export type CustomElementsSolidJs = {
    * - `content`: The revealed region.
    * - `content-inner`: The clipping box 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-headless-accordion-item": Partial<
     HelixHeadlessAccordionItemProps &
@@ -33008,6 +33972,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The accordion's 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-headless-accordion": Partial<
     HelixHeadlessAccordionProps &
@@ -33115,6 +34085,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-headless-announcement": Partial<
     HelixHeadlessAnnouncementProps &
@@ -33195,6 +34171,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-headless-app-header": Partial<
     HelixHeadlessAppHeaderProps &
@@ -33337,10 +34320,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-headless-area-chart": Partial<
     HelixHeadlessAreaChartProps &
@@ -33419,6 +34409,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-headless-avatar-group": Partial<
     HelixHeadlessAvatarGroupProps &
@@ -33495,6 +34491,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-headless-avatar": Partial<
     HelixHeadlessAvatarProps &
@@ -33572,6 +34574,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-headless-badge": Partial<
     HelixHeadlessBadgeProps &
@@ -33753,6 +34761,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`.
@@ -33762,10 +34771,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-headless-bar-chart": Partial<
     HelixHeadlessBarChartProps &
@@ -33820,6 +34836,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-headless-blockquote": Partial<
     HelixHeadlessBlockquoteProps &
@@ -33914,6 +34936,12 @@ export type CustomElementsSolidJs = {
    * - `link`: The crumb itself, which is an `<a>` where `href` is set.
    * - `separator`: The separator preceding the item.
    * - `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-headless-breadcrumb": Partial<
     HelixHeadlessBreadcrumbProps &
@@ -33970,6 +34998,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-headless-breadcrumbs": Partial<
     HelixHeadlessBreadcrumbsProps &
@@ -34040,6 +35074,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The buttons in the group.
+   *
+   * ## 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-headless-button-group": Partial<
     HelixHeadlessButtonGroupProps &
@@ -34263,6 +35303,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-headless-button": Partial<
     HelixHeadlessButtonProps &
@@ -34332,6 +35378,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-headless-callout": Partial<
     HelixHeadlessCalloutProps &
@@ -34397,6 +35449,12 @@ export type CustomElementsSolidJs = {
    * - `footer`: Actions that conclude the card.
    * - `header`: Title and any actions for the whole card.
    * - `media`: Image, video, or chart that runs edge to edge, outside the inset.
+   *
+   * ## 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-headless-card": Partial<
     HelixHeadlessCardProps &
@@ -34543,6 +35601,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.
@@ -34552,6 +35611,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-headless-carousel": Partial<
     HelixHeadlessCarouselProps &
@@ -34647,6 +35712,12 @@ export type CustomElementsSolidJs = {
    * - `send`: The control that offers the turn.
    * - `start`: The leading slot's box.
    * - `tools`: The row under the field.
+   *
+   * ## 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-headless-chat-composer": Partial<
     HelixHeadlessChatComposerProps &
@@ -34743,6 +35814,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-headless-chat-message": Partial<
     HelixHeadlessChatMessageProps &
@@ -34900,9 +35977,27 @@ export type CustomElementsSolidJs = {
    * - `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.
    * - `log`: The transcript, which is the thing that scrolls.
+   * - `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-headless-chat": Partial<
     HelixHeadlessChatProps &
@@ -35046,6 +36141,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-headless-checkbox-group": Partial<
     HelixHeadlessCheckboxGroupProps &
@@ -35225,6 +36327,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-headless-checkbox": Partial<
     HelixHeadlessCheckboxProps &
@@ -35357,6 +36470,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-headless-code-block": Partial<
     HelixHeadlessCodeBlockProps &
@@ -35412,6 +36531,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-headless-code": Partial<
     HelixHeadlessCodeProps &
@@ -35685,6 +36810,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-headless-color-input": Partial<
     HelixHeadlessColorInputProps &
@@ -35914,6 +37047,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-headless-color-picker": Partial<
     HelixHeadlessColorPickerProps &
@@ -36183,6 +37322,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-headless-combobox": Partial<
     HelixHeadlessComboboxProps &
@@ -36305,6 +37452,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-headless-command": Partial<
     HelixHeadlessCommandProps &
@@ -36528,6 +37682,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-headless-copy-button": Partial<
     HelixHeadlessCopyButtonProps &
@@ -36790,6 +37950,7 @@ export type CustomElementsSolidJs = {
    * - `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.
    * - `cell`: One cell.
+   * - `cell-selected`: A cell of a selected row, beside `cell`.
    * - `checkbox`: A row's checkbox, or the one in the heading that selects them all.
    * - `checkbox-box`: The frame the checkbox's input is painted as.
    * - `checkbox-control`: The checkbox's input.
@@ -36798,16 +37959,37 @@ 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`.
    * - `table`: The grid.
    * - `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-headless-data-table": Partial<
     HelixHeadlessDataTableProps &
@@ -37070,7 +38252,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.
@@ -37087,6 +38276,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-headless-date-input": Partial<
     HelixHeadlessDateInputProps &
@@ -37303,7 +38500,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.
@@ -37315,6 +38519,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-headless-date-picker": Partial<
     HelixHeadlessDatePickerProps &
@@ -37372,6 +38582,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-headless-description-list-item": Partial<
     HelixHeadlessDescriptionListItemProps &
@@ -37443,6 +38659,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-headless-description-list": Partial<
     HelixHeadlessDescriptionListProps &
@@ -37576,6 +38798,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-headless-dialog": Partial<
     HelixHeadlessDialogProps &
@@ -37643,6 +38872,12 @@ export type CustomElementsSolidJs = {
    *
    * - `content`: What is set into it.
    * - `line`: The rule itself, or each half of it where something is set 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-headless-divider": Partial<
     HelixHeadlessDividerProps &
@@ -37784,14 +39019,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-headless-donut-chart": Partial<
     HelixHeadlessDonutChartProps &
@@ -37938,6 +39181,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-headless-drawer": Partial<
     HelixHeadlessDrawerProps &
@@ -38031,6 +39281,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-headless-drilldown-item": Partial<
     HelixHeadlessDrilldownItemProps &
@@ -38127,6 +39383,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-headless-drilldown": Partial<
     HelixHeadlessDrilldownProps &
@@ -38185,6 +39447,12 @@ export type CustomElementsSolidJs = {
    * - `actions`: The way out.
    * - `heading`: What is missing.
    * - `icon`: A mark above 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-headless-empty": Partial<
     HelixHeadlessEmptyProps &
@@ -38365,6 +39633,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-headless-file-input": Partial<
     HelixHeadlessFileInputProps &
@@ -38496,6 +39771,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-headless-filter-chip": Partial<
     HelixHeadlessFilterChipProps &
@@ -38610,6 +39891,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-headless-filter-field": Partial<
     HelixHeadlessFilterFieldProps &
@@ -38730,6 +40017,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-headless-filter-menu": Partial<
     HelixHeadlessFilterMenuProps &
@@ -38825,6 +40138,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-headless-filter-operator": Partial<
     HelixHeadlessFilterOperatorProps &
@@ -39119,6 +40438,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-headless-filter-input": Partial<
     HelixHeadlessFilterInputProps &
@@ -39214,6 +40541,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-headless-format-date": Partial<
     HelixHeadlessFormatDateProps &
@@ -39416,10 +40749,17 @@ export type CustomElementsSolidJs = {
    * - `summary`: The middle slot's box.
    * - `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-headless-heatmap": Partial<
     HelixHeadlessHeatmapProps &
@@ -39639,6 +40979,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-headless-icon-button": Partial<
     HelixHeadlessIconButtonProps &
@@ -39701,6 +41047,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-headless-icon": Partial<
     HelixHeadlessIconProps &
@@ -39813,6 +41165,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-headless-image": Partial<
     HelixHeadlessImageProps &
@@ -40057,6 +41415,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-headless-input": Partial<
     HelixHeadlessInputProps &
@@ -40135,6 +41501,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-headless-kbd": Partial<
     HelixHeadlessKbdProps &
@@ -40197,6 +41569,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-headless-legend": Partial<
     HelixHeadlessLegendProps &
@@ -40389,10 +41767,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-headless-line-chart": Partial<
     HelixHeadlessLineChartProps &
@@ -40468,6 +41853,12 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `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-headless-list-item": Partial<
     HelixHeadlessListItemProps &
@@ -40545,6 +41936,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The rows.
+   *
+   * ## 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-headless-list": Partial<
     HelixHeadlessListProps &
@@ -40797,6 +42194,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-headless-listbox": Partial<
     HelixHeadlessListboxProps &
@@ -40864,6 +42268,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-headless-loader": Partial<
     HelixHeadlessLoaderProps &
@@ -40999,6 +42409,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-headless-megamenu": Partial<
     HelixHeadlessMegamenuProps &
@@ -41156,6 +42573,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-headless-menu-item": Partial<
     HelixHeadlessMenuItemProps &
@@ -41273,6 +42696,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-headless-menu": Partial<
     HelixHeadlessMenuProps &
@@ -41319,8 +42752,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.
@@ -41400,9 +42835,20 @@ export type CustomElementsSolidJs = {
    *
    * - `groove`: The unfilled circle, in `ring` and `arc`.
    * - `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, or the drawing in `ring` and `arc`.
    * - `value`: The reading, 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-headless-meter": Partial<
     HelixHeadlessMeterProps &
@@ -41464,6 +42910,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-headless-navigation": Partial<
     HelixHeadlessNavigationProps &
@@ -41588,6 +43040,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-headless-notification-group": Partial<
     HelixHeadlessNotificationGroupProps &
@@ -41710,6 +43169,15 @@ export type CustomElementsSolidJs = {
    * - `media`: The leading slot's box.
    * - `time`: When it happened, read the way a person reads one.
    * - `trailing`: The column holding the time and the controls.
+   *
+   * ## 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-headless-notification": Partial<
     HelixHeadlessNotificationProps &
@@ -41860,6 +43328,13 @@ export type CustomElementsSolidJs = {
    * - `list`: The list itself.
    * - `loading`: Shown while the feed is still on its way.
    * - `mark-all`: The control that marks everything read.
+   *
+   * ## 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-headless-notifications": Partial<
     HelixHeadlessNotificationsProps &
@@ -42083,6 +43558,13 @@ export type CustomElementsSolidJs = {
    * - `increment`: The control that steps up.
    * - `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-headless-number-input": Partial<
     HelixHeadlessNumberInputProps &
@@ -42206,10 +43688,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-headless-object-inspector": Partial<
     HelixHeadlessObjectInspectorProps &
@@ -42264,6 +43753,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-headless-option-group": Partial<
     HelixHeadlessOptionGroupProps &
@@ -42445,8 +43940,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-headless-option": Partial<
     HelixHeadlessOptionProps &
@@ -42543,6 +44047,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-headless-outline": Partial<
     HelixHeadlessOutlineProps &
@@ -42720,8 +44230,16 @@ export type CustomElementsSolidJs = {
    * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
    * - `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`.
+   *
+   * ## 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-headless-pagination": Partial<
     HelixHeadlessPaginationProps &
@@ -42806,9 +44324,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-headless-pagination-size": Partial<
     HelixHeadlessPaginationSizeProps &
@@ -42873,6 +44420,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-headless-pagination-summary": Partial<
     HelixHeadlessPaginationSummaryProps &
@@ -43076,6 +44629,13 @@ export type CustomElementsSolidJs = {
    * - `field`: The row of boxes.
    * - `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-headless-pin-input": Partial<
     HelixHeadlessPinInputProps &
@@ -43183,6 +44743,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-headless-popover": Partial<
     HelixHeadlessPopoverProps &
@@ -43285,6 +44852,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-headless-progress": Partial<
     HelixHeadlessProgressProps &
@@ -43376,6 +44949,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-headless-qr-code": Partial<
     HelixHeadlessQrCodeProps &
@@ -43428,6 +45007,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-headless-quote": Partial<
     HelixHeadlessQuoteProps &
@@ -43605,6 +45190,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-headless-radio-group": Partial<
     HelixHeadlessRadioGroupProps &
@@ -43697,6 +45289,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-headless-radio": Partial<
     HelixHeadlessRadioProps &
@@ -43901,6 +45500,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-headless-rating": Partial<
     HelixHeadlessRatingProps &
@@ -44021,10 +45627,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.
@@ -44035,6 +45643,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-headless-scatter-chart": Partial<
     HelixHeadlessScatterChartProps &
@@ -44112,6 +45726,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-headless-scroll-area": Partial<
     HelixHeadlessScrollAreaProps &
@@ -44335,6 +45960,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-headless-select": Partial<
     HelixHeadlessSelectProps &
@@ -44380,6 +46013,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-headless-skeleton": Partial<
     HelixHeadlessSkeletonProps &
@@ -44459,6 +46098,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-headless-skip-link": Partial<
     HelixHeadlessSkipLinkProps &
@@ -44665,6 +46310,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-headless-slider": Partial<
     HelixHeadlessSliderProps &
@@ -44809,6 +46461,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-headless-sparkline": Partial<
     HelixHeadlessSparklineProps &
@@ -44888,6 +46546,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-headless-speed-dial-item": Partial<
     HelixHeadlessSpeedDialItemProps &
@@ -44996,6 +46660,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-headless-speed-dial": Partial<
     HelixHeadlessSpeedDialProps &
@@ -45178,6 +46849,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-headless-splitter": Partial<
     HelixHeadlessSplitterProps &
@@ -45220,6 +46897,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The stats.
+   *
+   * ## 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-headless-stat-group": Partial<
     HelixHeadlessStatGroupProps &
@@ -45289,6 +46972,12 @@ export type CustomElementsSolidJs = {
    * - `(default)`: The value.
    * - `label`: What the value measures.
    * - `unit`: The unit, set beside 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-headless-stat": Partial<
     HelixHeadlessStatProps &
@@ -45394,6 +47083,12 @@ export type CustomElementsSolidJs = {
    * nothing to put back. Nobody refusing means the set updates itself,
    * whether or not a consumer declared `active`, a declared property being a
    * seed and a correction.
+   *
+   * ## 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-headless-steps": Partial<
     HelixHeadlessStepsProps &
@@ -45480,6 +47175,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-headless-step": Partial<
     HelixHeadlessStepProps &
@@ -45654,6 +47355,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-headless-switch": Partial<
     HelixHeadlessSwitchProps &
@@ -45700,6 +47409,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-headless-table-cell": Partial<
     HelixHeadlessTableCellProps &
@@ -45860,6 +47575,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-headless-table-column": Partial<
     HelixHeadlessTableColumnProps &
@@ -45946,6 +47669,12 @@ export type CustomElementsSolidJs = {
    * - `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.
    * - `table`: 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-headless-table": Partial<
     HelixHeadlessTableProps &
@@ -45988,6 +47717,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-headless-table-row": Partial<
     HelixHeadlessTableRowProps &
@@ -46048,6 +47783,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-headless-tab-panel": Partial<
     HelixHeadlessTabPanelProps &
@@ -46156,6 +47898,12 @@ export type CustomElementsSolidJs = {
    * - `indicator`: The mark that travels to the selected tab.
    * - `panels`: The panel container.
    * - `tabs`: The tab 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-headless-tabs": Partial<
     HelixHeadlessTabsProps &
@@ -46222,6 +47970,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-headless-tab": Partial<
     HelixHeadlessTabProps &
@@ -46296,6 +48051,12 @@ export type CustomElementsSolidJs = {
    * - `dismiss`: The control that asks to remove the tag.
    * - `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-headless-tag": Partial<
     HelixHeadlessTagProps &
@@ -46509,6 +48270,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-headless-textarea": Partial<
     HelixHeadlessTextareaProps &
@@ -46779,8 +48547,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.
@@ -46792,6 +48563,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-headless-time-input": Partial<
     HelixHeadlessTimeInputProps &
@@ -46977,15 +48756,22 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `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
@@ -47068,10 +48854,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-headless-time-picker": Partial<
     HelixHeadlessTimePickerProps &
@@ -47143,6 +48938,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-headless-timeline-item": Partial<
     HelixHeadlessTimelineItemProps &
@@ -47204,6 +49005,12 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The entries.
+   *
+   * ## 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-headless-timeline": Partial<
     HelixHeadlessTimelineProps &
@@ -47319,6 +49126,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-headless-toast-item": Partial<
     HelixHeadlessToastItemProps &
@@ -47405,6 +49218,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-headless-toast": Partial<
     HelixHeadlessToastProps &
@@ -47579,6 +49398,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-headless-toggle-group": Partial<
     HelixHeadlessToggleGroupProps &
@@ -47667,6 +49493,13 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `item`: The radio button.
+   *
+   * ## 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-headless-toggle": Partial<
     HelixHeadlessToggleProps &
@@ -47722,6 +49555,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-headless-toolbar": Partial<
     HelixHeadlessToolbarProps &
@@ -47912,6 +49751,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-headless-tooltip": Partial<
     HelixHeadlessTooltipProps &
@@ -48011,6 +49857,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-headless-tour": Partial<
     HelixHeadlessTourProps &
@@ -48115,6 +49967,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-headless-tour-stop": Partial<
     HelixHeadlessTourStopProps &
@@ -48266,6 +50124,14 @@ export type CustomElementsSolidJs = {
    * - `label`: The label text.
    * - `row`: The clickable label row, which is an `<a>` where `href` is set.
    * - `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-headless-tree-item": Partial<
     HelixHeadlessTreeItemProps &
@@ -48359,6 +50225,12 @@ export type CustomElementsSolidJs = {
    * - `empty`: Shown when there are no rows to show.
    * - `loading`: Shown while the rows are still on their way.
    * - `tree`: The tree 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-headless-tree": Partial<
     HelixHeadlessTreeProps &
@@ -48437,6 +50309,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-headless-trend": Partial<
     HelixHeadlessTrendProps &
@@ -48531,9 +50409,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-headless-video-playlist-item": Partial<
     HelixHeadlessVideoPlaylistItemProps &
@@ -48614,6 +50499,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-headless-video-playlist-menu": Partial<
     HelixHeadlessVideoPlaylistMenuProps &
@@ -48714,6 +50605,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-headless-video-playlist": Partial<
     HelixHeadlessVideoPlaylistProps &
@@ -48992,6 +50889,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.
@@ -49001,6 +50899,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-headless-video": Partial<
     HelixHeadlessVideoProps &
@@ -49069,6 +50973,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. Needs a block size and an overflow on this tier.
+   *
+   * ## 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-headless-virtual-list": Partial<
     HelixHeadlessVirtualListProps &