@fusion.dev/helix 0.30.2 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/custom-elements.json +3005 -160
  2. package/dist/announcement/root/announcement-root.css.js +4 -0
  3. package/dist/app-header/root/app-header-root.css.js +12 -2
  4. package/dist/aura/root/aura-root.d.ts +2 -2
  5. package/dist/aura/root/aura-root.js +2 -1
  6. package/dist/bar-chart/root/bar-chart-root.css.js +2 -2
  7. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +10 -1
  8. package/dist/carousel/root/carousel-root.css.js +10 -10
  9. package/dist/chat/composer/chat-composer.css.js +1 -1
  10. package/dist/chat/message/chat-message.css.js +2 -0
  11. package/dist/chat/root/chat-root.css.js +1 -5
  12. package/dist/checkbox/root/checkbox-root.css.js +4 -4
  13. package/dist/code-block/root/code-block-root.css.js +18 -4
  14. package/dist/color-input/root/color-input-root.css.js +1 -3
  15. package/dist/data-table/root/data-table-root.css.js +62 -15
  16. package/dist/data-table/root/data-table-root.d.ts +1 -0
  17. package/dist/date-picker/root/date-picker-root.css.js +19 -19
  18. package/dist/donut-chart/root/donut-chart-root.css.js +13 -13
  19. package/dist/drawer/root/drawer-root.css.js +12 -0
  20. package/dist/drilldown/item/drilldown-item.css.js +11 -0
  21. package/dist/heatmap/root/heatmap-root.css.js +2 -2
  22. package/dist/heatmap/root/heatmap-root.d.ts +1 -0
  23. package/dist/input/root/input-root.css.js +4 -4
  24. package/dist/meter/root/meter-root.css.js +20 -20
  25. package/dist/meter/root/meter-root.d.ts +5 -0
  26. package/dist/object-inspector/root/object-inspector-root.css.js +5 -5
  27. package/dist/option/root/option-root.css.js +5 -5
  28. package/dist/orb/root/orb-root.d.ts +1 -1
  29. package/dist/orb/root/orb-root.js +2 -1
  30. package/dist/pagination/root/pagination-root.css.js +5 -5
  31. package/dist/pagination/root/pagination-root.d.ts +1 -0
  32. package/dist/pagination/size/pagination-size.d.ts +3 -2
  33. package/dist/scatter-chart/root/scatter-chart-root.css.js +5 -5
  34. package/dist/stat/group/stat-group.css.js +10 -3
  35. package/dist/table/column/table-column.css.js +23 -5
  36. package/dist/time-picker/root/time-picker-root.css.js +19 -16
  37. package/dist/tree/item/tree-item.css.js +4 -6
  38. package/dist/video/root/video-root.css.js +4 -1
  39. package/dist/video-playlist/item/video-playlist-item.css.js +6 -6
  40. package/package.json +6 -6
  41. package/types/jsx.d.ts +2128 -30
  42. package/types/vue.d.ts +17 -4
package/types/jsx.d.ts CHANGED
@@ -10823,8 +10823,10 @@ answer, and asking them to encode it as thresholds so this can decode it
10823
10823
  again is a worse API than letting them say it.
10824
10824
 
10825
10825
  Not reflected. Nothing selects on it: the band reaches the stylesheet as
10826
- `data-band` on the fill, because that is the element being colored, so
10827
- reflecting here would write an attribute onto the host for no reader. */
10826
+ `data-band` on the fill, because that is the element being colored, and a
10827
+ stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
10828
+ part names, so reflecting here would write an attribute onto the host for
10829
+ no reader. */
10828
10830
  band?: (HelixMeter["band"]) | undefined;
10829
10831
  /** Bottom of the high band.
10830
10832
 
@@ -10931,8 +10933,10 @@ answer, and asking them to encode it as thresholds so this can decode it
10931
10933
  again is a worse API than letting them say it.
10932
10934
 
10933
10935
  Not reflected. Nothing selects on it: the band reaches the stylesheet as
10934
- `data-band` on the fill, because that is the element being colored, so
10935
- reflecting here would write an attribute onto the host for no reader. */
10936
+ `data-band` on the fill, because that is the element being colored, and a
10937
+ stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
10938
+ part names, so reflecting here would write an attribute onto the host for
10939
+ no reader. */
10936
10940
  "prop:band"?: (HelixMeter["band"]) | undefined;
10937
10941
  /** Bottom of the high band.
10938
10942
 
@@ -15880,7 +15884,18 @@ export type HelixTableColumnProps = {
15880
15884
 
15881
15885
  `end` is what a column of numbers wants, so digits of the same magnitude sit
15882
15886
  above each other. Left unset the cell inherits the table's own alignment,
15883
- which is `start` for text in either writing direction. */
15887
+ which is `start` for text in either writing direction. `helix-data-table`
15888
+ aligns the cells it draws; a `helix-table`'s cells are markup the consumer
15889
+ wrote, and align as the consumer styles them. The heading is this element's
15890
+ own, and `@fusion.dev/helix` sets it to the same edge in either table.
15891
+
15892
+ **Reflected, because the heading is drawn by a stylesheet and has no other
15893
+ way to learn it.** Set as a property, which is how React sets it, an
15894
+ unreflected `align` left no attribute to select on, so the heading stayed at
15895
+ the start over a column of digits set to the end. It is the author's
15896
+ declaration and nothing moves it afterwards, so an attribute cannot come to
15897
+ disagree with the element, which is the reason `open` records a custom
15898
+ state instead. No default, so an unset column writes nothing onto its host. */
15884
15899
  align?: (HelixTableColumn["align"]) | undefined;
15885
15900
  /** The key this column reads out of a row.
15886
15901
 
@@ -15958,7 +15973,18 @@ export type HelixTableColumnSolidJsProps = {
15958
15973
 
15959
15974
  `end` is what a column of numbers wants, so digits of the same magnitude sit
15960
15975
  above each other. Left unset the cell inherits the table's own alignment,
15961
- which is `start` for text in either writing direction. */
15976
+ which is `start` for text in either writing direction. `helix-data-table`
15977
+ aligns the cells it draws; a `helix-table`'s cells are markup the consumer
15978
+ wrote, and align as the consumer styles them. The heading is this element's
15979
+ own, and `@fusion.dev/helix` sets it to the same edge in either table.
15980
+
15981
+ **Reflected, because the heading is drawn by a stylesheet and has no other
15982
+ way to learn it.** Set as a property, which is how React sets it, an
15983
+ unreflected `align` left no attribute to select on, so the heading stayed at
15984
+ the start over a column of digits set to the end. It is the author's
15985
+ declaration and nothing moves it afterwards, so an attribute cannot come to
15986
+ disagree with the element, which is the reason `open` records a custom
15987
+ state instead. No default, so an unset column writes nothing onto its host. */
15962
15988
  "prop:align"?: (HelixTableColumn["align"]) | undefined;
15963
15989
  /** The key this column reads out of a row.
15964
15990
 
@@ -19786,6 +19812,13 @@ export type CustomElements = {
19786
19812
  * - `content`: The revealed region.
19787
19813
  * - `content-inner`: Padding wrapper inside the animated region.
19788
19814
  * - `trigger`: The clickable summary row.
19815
+ *
19816
+ * ## CSS States
19817
+ *
19818
+ * These can be used to apply styling when a component is in a given state.
19819
+ *
19820
+ * - `open`: While the item is open.
19821
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
19789
19822
  */
19790
19823
  "helix-accordion-item": Partial<
19791
19824
  HelixAccordionItemProps & BaseProps<HelixAccordionItem> & BaseEvents<HelixAccordionItem>
@@ -19861,6 +19894,12 @@ export type CustomElements = {
19861
19894
  * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
19862
19895
  * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
19863
19896
  * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
19897
+ *
19898
+ * ## CSS States
19899
+ *
19900
+ * These can be used to apply styling when a component is in a given state.
19901
+ *
19902
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
19864
19903
  */
19865
19904
  "helix-accordion": Partial<
19866
19905
  HelixAccordionProps & BaseProps<HelixAccordion> & BaseEvents<HelixAccordion>
@@ -19971,6 +20010,12 @@ export type CustomElements = {
19971
20010
  * - `content`: The message region.
19972
20011
  * - `dismiss`: The control that asks to close.
19973
20012
  * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
20013
+ *
20014
+ * ## CSS States
20015
+ *
20016
+ * These can be used to apply styling when a component is in a given state.
20017
+ *
20018
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
19974
20019
  */
19975
20020
  "helix-announcement": Partial<
19976
20021
  HelixAnnouncementProps & BaseProps<HelixAnnouncement> & BaseEvents<HelixAnnouncement>
@@ -20107,6 +20152,13 @@ export type CustomElements = {
20107
20152
  * - `end`: The trailing region.
20108
20153
  * - `row`: The centered row inside the banner.
20109
20154
  * - `start`: The leading region.
20155
+ *
20156
+ * ## CSS States
20157
+ *
20158
+ * These can be used to apply styling when a component is in a given state.
20159
+ *
20160
+ * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
20161
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20110
20162
  */
20111
20163
  "helix-app-header": Partial<
20112
20164
  HelixAppHeaderProps & BaseProps<HelixAppHeader> & BaseEvents<HelixAppHeader>
@@ -20228,10 +20280,17 @@ export type CustomElements = {
20228
20280
  * - `svg`: The drawing surface the bands sit on.
20229
20281
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
20230
20282
  * - `tooltip-anchor`: The `Tooltip` element itself.
20283
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
20231
20284
  * - `tooltip-cell`: One column's name and value inside the tooltip.
20232
20285
  * - `tooltip-label`: The reading's own name inside the tooltip.
20233
20286
  * - `tooltip-name`: A column's name inside the tooltip.
20234
20287
  * - `tooltip-value`: A column's value inside the tooltip.
20288
+ *
20289
+ * ## CSS States
20290
+ *
20291
+ * These can be used to apply styling when a component is in a given state.
20292
+ *
20293
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20235
20294
  */
20236
20295
  "helix-area-chart": Partial<
20237
20296
  HelixAreaChartProps & BaseProps<HelixAreaChart> & BaseEvents<HelixAreaChart>
@@ -20371,6 +20430,12 @@ export type CustomElements = {
20371
20430
  * Custom selectors for styling elements within the component.
20372
20431
  *
20373
20432
  * - `canvas`: The surface the shader draws into.
20433
+ *
20434
+ * ## CSS States
20435
+ *
20436
+ * These can be used to apply styling when a component is in a given state.
20437
+ *
20438
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20374
20439
  */
20375
20440
  "helix-aura": Partial<HelixAuraProps & BaseProps<HelixAura> & BaseEvents<HelixAura>>;
20376
20441
 
@@ -20452,6 +20517,12 @@ export type CustomElements = {
20452
20517
  * Custom selectors for styling elements within the component.
20453
20518
  *
20454
20519
  * - `overflow`: The count of avatars past `max`.
20520
+ *
20521
+ * ## CSS States
20522
+ *
20523
+ * These can be used to apply styling when a component is in a given state.
20524
+ *
20525
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20455
20526
  */
20456
20527
  "helix-avatar-group": Partial<
20457
20528
  HelixAvatarGroupProps & BaseProps<HelixAvatarGroup> & BaseEvents<HelixAvatarGroup>
@@ -20528,6 +20599,12 @@ export type CustomElements = {
20528
20599
  *
20529
20600
  * - `image`: The image, when one is loading or loaded.
20530
20601
  * - `initials`: The initials shown when there is no usable image.
20602
+ *
20603
+ * ## CSS States
20604
+ *
20605
+ * These can be used to apply styling when a component is in a given state.
20606
+ *
20607
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20531
20608
  */
20532
20609
  "helix-avatar": Partial<
20533
20610
  HelixAvatarProps & BaseProps<HelixAvatar> & BaseEvents<HelixAvatar>
@@ -20613,6 +20690,12 @@ export type CustomElements = {
20613
20690
  * Custom selectors for styling elements within the component.
20614
20691
  *
20615
20692
  * - `indicator`: The count, or the dot when there is no value.
20693
+ *
20694
+ * ## CSS States
20695
+ *
20696
+ * These can be used to apply styling when a component is in a given state.
20697
+ *
20698
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20616
20699
  */
20617
20700
  "helix-badge": Partial<HelixBadgeProps & BaseProps<HelixBadge> & BaseEvents<HelixBadge>>;
20618
20701
 
@@ -20868,6 +20951,7 @@ export type CustomElements = {
20868
20951
  * - `baseline`: The rule the columns stand on.
20869
20952
  * - `gridline`: One rule across the plot, under `gridlines`.
20870
20953
  * - `group`: One category's columns, together.
20954
+ * - `group-active`: The group the tooltip is about, beside `group`.
20871
20955
  * - `label`: One category's name.
20872
20956
  * - `labels`: The row of category names.
20873
20957
  * - `line`: A series drawn as a line rather than as columns, under `lines`.
@@ -20877,10 +20961,17 @@ export type CustomElements = {
20877
20961
  * - `tick`: One number on an axis.
20878
20962
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
20879
20963
  * - `tooltip-anchor`: The `Tooltip` element itself.
20964
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
20880
20965
  * - `tooltip-cell`: One column's name and value inside the tooltip.
20881
20966
  * - `tooltip-label`: The reading's own name inside the tooltip.
20882
20967
  * - `tooltip-name`: A column's name inside the tooltip.
20883
20968
  * - `tooltip-value`: A column's value inside the tooltip.
20969
+ *
20970
+ * ## CSS States
20971
+ *
20972
+ * These can be used to apply styling when a component is in a given state.
20973
+ *
20974
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20884
20975
  */
20885
20976
  "helix-bar-chart": Partial<
20886
20977
  HelixBarChartProps & BaseProps<HelixBarChart> & BaseEvents<HelixBarChart>
@@ -20935,6 +21026,12 @@ export type CustomElements = {
20935
21026
  *
20936
21027
  * - `attribution`: The footer carrying the source.
20937
21028
  * - `blockquote`: The quotation.
21029
+ *
21030
+ * ## CSS States
21031
+ *
21032
+ * These can be used to apply styling when a component is in a given state.
21033
+ *
21034
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
20938
21035
  */
20939
21036
  "helix-blockquote": Partial<
20940
21037
  HelixBlockquoteProps & BaseProps<HelixBlockquote> & BaseEvents<HelixBlockquote>
@@ -21019,6 +21116,12 @@ export type CustomElements = {
21019
21116
  * - `separator`: The separator preceding the item.
21020
21117
  * - `link`: The crumb itself, which is an `<a>` where `href` is set.
21021
21118
  * - `separator-mark`: The glyph between this crumb and the next, where none is slotted.
21119
+ *
21120
+ * ## CSS States
21121
+ *
21122
+ * These can be used to apply styling when a component is in a given state.
21123
+ *
21124
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21022
21125
  */
21023
21126
  "helix-breadcrumb": Partial<
21024
21127
  HelixBreadcrumbProps & BaseProps<HelixBreadcrumb> & BaseEvents<HelixBreadcrumb>
@@ -21068,6 +21171,12 @@ export type CustomElements = {
21068
21171
  * Custom selectors for styling elements within the component.
21069
21172
  *
21070
21173
  * - `list`: The ordered list.
21174
+ *
21175
+ * ## CSS States
21176
+ *
21177
+ * These can be used to apply styling when a component is in a given state.
21178
+ *
21179
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21071
21180
  */
21072
21181
  "helix-breadcrumbs": Partial<
21073
21182
  HelixBreadcrumbsProps & BaseProps<HelixBreadcrumbs> & BaseEvents<HelixBreadcrumbs>
@@ -21138,6 +21247,12 @@ export type CustomElements = {
21138
21247
  * CSS variables available for styling the component.
21139
21248
  *
21140
21249
  * - `--button-group-gap`: Space between the buttons, when `spaced`. (default: `undefined`)
21250
+ *
21251
+ * ## CSS States
21252
+ *
21253
+ * These can be used to apply styling when a component is in a given state.
21254
+ *
21255
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21141
21256
  */
21142
21257
  "helix-button-group": Partial<
21143
21258
  HelixButtonGroupProps & BaseProps<HelixButtonGroup> & BaseEvents<HelixButtonGroup>
@@ -21409,6 +21524,12 @@ export type CustomElements = {
21409
21524
  * Custom selectors for styling elements within the component.
21410
21525
  *
21411
21526
  * - `button`: The inner control.
21527
+ *
21528
+ * ## CSS States
21529
+ *
21530
+ * These can be used to apply styling when a component is in a given state.
21531
+ *
21532
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21412
21533
  */
21413
21534
  "helix-button": Partial<
21414
21535
  HelixButtonProps & BaseProps<HelixButton> & BaseEvents<HelixButton>
@@ -21473,6 +21594,12 @@ export type CustomElements = {
21473
21594
  * - `content`: The content region.
21474
21595
  * - `icon`: The icon region.
21475
21596
  * - `icon-mark`: The tone glyph, where none is slotted.
21597
+ *
21598
+ * ## CSS States
21599
+ *
21600
+ * These can be used to apply styling when a component is in a given state.
21601
+ *
21602
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21476
21603
  */
21477
21604
  "helix-callout": Partial<
21478
21605
  HelixCalloutProps & BaseProps<HelixCallout> & BaseEvents<HelixCallout>
@@ -21594,6 +21721,12 @@ export type CustomElements = {
21594
21721
  * - `--card-padding`: Inset applied to each region. (default: `undefined`)
21595
21722
  * - `--card-radius`: Corner radius of the surface. (default: `undefined`)
21596
21723
  * - `--card-shadow`: Shadow under the surface. What `elevated` sets, and what a `data-card` link raises on hover. (default: `undefined`)
21724
+ *
21725
+ * ## CSS States
21726
+ *
21727
+ * These can be used to apply styling when a component is in a given state.
21728
+ *
21729
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21597
21730
  */
21598
21731
  "helix-card": Partial<HelixCardProps & BaseProps<HelixCard> & BaseEvents<HelixCard>>;
21599
21732
 
@@ -21797,6 +21930,7 @@ export type CustomElements = {
21797
21930
  *
21798
21931
  * - `controls`: The row of controls.
21799
21932
  * - `indicator`: One of them, and a way to reach that slide.
21933
+ * - `indicator-current`: The one for the slide showing, beside `indicator`.
21800
21934
  * - `indicators`: The row of controls saying where the reader is.
21801
21935
  * - `next`: The control that moves to the next slide.
21802
21936
  * - `next-mark`: The glyph on the next control.
@@ -21806,6 +21940,12 @@ export type CustomElements = {
21806
21940
  * - `rotation-mark`: The glyph on the play and pause control.
21807
21941
  * - `slide`: The pane one slide is shown in, and the box the track snaps to.
21808
21942
  * - `track`: The scroller the slides sit in.
21943
+ *
21944
+ * ## CSS States
21945
+ *
21946
+ * These can be used to apply styling when a component is in a given state.
21947
+ *
21948
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21809
21949
  */
21810
21950
  "helix-carousel": Partial<
21811
21951
  HelixCarouselProps & BaseProps<HelixCarousel> & BaseEvents<HelixCarousel>
@@ -21898,6 +22038,12 @@ export type CustomElements = {
21898
22038
  * - `end`: The trailing slot's box.
21899
22039
  * - `mark`: The glyph inside the send control.
21900
22040
  * - `start`: The leading slot's box.
22041
+ *
22042
+ * ## CSS States
22043
+ *
22044
+ * These can be used to apply styling when a component is in a given state.
22045
+ *
22046
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
21901
22047
  */
21902
22048
  "helix-chat-composer": Partial<
21903
22049
  HelixChatComposerProps & BaseProps<HelixChatComposer> & BaseEvents<HelixChatComposer>
@@ -22016,6 +22162,12 @@ export type CustomElements = {
22016
22162
  * - `sources`: What the turn was drawn from, under it and outside the bubble.
22017
22163
  * - `state`: What has happened to it, where that is worth saying.
22018
22164
  * - `time`: When it was said.
22165
+ *
22166
+ * ## CSS States
22167
+ *
22168
+ * These can be used to apply styling when a component is in a given state.
22169
+ *
22170
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22019
22171
  */
22020
22172
  "helix-chat-message": Partial<
22021
22173
  HelixChatMessageProps & BaseProps<HelixChatMessage> & BaseEvents<HelixChatMessage>
@@ -22160,9 +22312,27 @@ export type CustomElements = {
22160
22312
  * - `history`: Shown at the top of the transcript while older turns are on their way.
22161
22313
  * - `live`: Where each settled turn is said, for a reader who cannot see it arrive.
22162
22314
  * - `loading`: Shown while the history is still on its way.
22315
+ * - `message`: A turn fed as data: the message drawn for it, forwarded whole.
22316
+ * - `message-actions`: The controls offered on a fed turn, beside its time.
22317
+ * - `message-avatar`: A fed turn's leading slot's box.
22318
+ * - `message-body`: What a fed turn said, and the line under it.
22319
+ * - `message-content`: A fed turn's text.
22320
+ * - `message-indicator`: A fed turn's default wait.
22321
+ * - `message-mark`: The status glyph beside a fed turn's failure.
22322
+ * - `message-meta`: The line under a fed turn: its time, its state, and its controls.
22323
+ * - `message-retry`: The control offered on a fed turn that failed.
22324
+ * - `message-sources`: What a fed turn was drawn from.
22325
+ * - `message-state`: What has happened to a fed turn, where that is worth saying.
22326
+ * - `message-time`: When a fed turn was said.
22163
22327
  * - `resume`: The affordance offered while the reader is away from the bottom.
22164
22328
  * - `status`: The status region, which is not part of the log.
22165
22329
  * - `turn`: One turn fed as data, around the message drawn for it.
22330
+ *
22331
+ * ## CSS States
22332
+ *
22333
+ * These can be used to apply styling when a component is in a given state.
22334
+ *
22335
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22166
22336
  */
22167
22337
  "helix-chat": Partial<HelixChatProps & BaseProps<HelixChat> & BaseEvents<HelixChat>>;
22168
22338
 
@@ -22294,6 +22464,13 @@ export type CustomElements = {
22294
22464
  * - `hint`: Help under the set.
22295
22465
  * - `items`: The list itself, which is what `orientation` lays out.
22296
22466
  * - `label`: The group's name, over the set.
22467
+ *
22468
+ * ## CSS States
22469
+ *
22470
+ * These can be used to apply styling when a component is in a given state.
22471
+ *
22472
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
22473
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22297
22474
  */
22298
22475
  "helix-checkbox-group": Partial<
22299
22476
  HelixCheckboxGroupProps & BaseProps<HelixCheckboxGroup> & BaseEvents<HelixCheckboxGroup>
@@ -22485,6 +22662,17 @@ export type CustomElements = {
22485
22662
  * - `hint`: Help under the control, while nothing is wrong.
22486
22663
  * - `label`: The label beside it.
22487
22664
  * - `mark`: The tick, or the dash when the box is indeterminate.
22665
+ * - `mark-checked`: The mark while the box is checked, beside `mark`.
22666
+ * - `mark-indeterminate`: The mark while the box is indeterminate, beside `mark`.
22667
+ *
22668
+ * ## CSS States
22669
+ *
22670
+ * These can be used to apply styling when a component is in a given state.
22671
+ *
22672
+ * - `checked`: While the box is checked.
22673
+ * - `has-label`: While the label slot holds something to read, which is what draws a label at all.
22674
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
22675
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22488
22676
  */
22489
22677
  "helix-checkbox": Partial<
22490
22678
  HelixCheckboxProps & BaseProps<HelixCheckbox> & BaseEvents<HelixCheckbox>
@@ -22597,6 +22785,12 @@ export type CustomElements = {
22597
22785
  * - `removed`: In a diff, a line only the old version has, a `<del>`.
22598
22786
  * - `split`: In a split diff, the two versions side by side.
22599
22787
  * - `text`: In a diff, a line's code.
22788
+ *
22789
+ * ## CSS States
22790
+ *
22791
+ * These can be used to apply styling when a component is in a given state.
22792
+ *
22793
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22600
22794
  */
22601
22795
  "helix-code-block": Partial<
22602
22796
  HelixCodeBlockProps & BaseProps<HelixCodeBlock> & BaseEvents<HelixCodeBlock>
@@ -22649,6 +22843,12 @@ export type CustomElements = {
22649
22843
  * Custom selectors for styling elements within the component.
22650
22844
  *
22651
22845
  * - `code`: The `<code>` element.
22846
+ *
22847
+ * ## CSS States
22848
+ *
22849
+ * These can be used to apply styling when a component is in a given state.
22850
+ *
22851
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22652
22852
  */
22653
22853
  "helix-code": Partial<HelixCodeProps & BaseProps<HelixCode> & BaseEvents<HelixCode>>;
22654
22854
 
@@ -22915,6 +23115,14 @@ export type CustomElements = {
22915
23115
  * - `preview`: The chip showing the color, inside the trigger.
22916
23116
  * - `surface`: The floating panel.
22917
23117
  * - `trigger`: The control that opens the panel.
23118
+ *
23119
+ * ## CSS States
23120
+ *
23121
+ * These can be used to apply styling when a component is in a given state.
23122
+ *
23123
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
23124
+ * - `open`: While the picker is open.
23125
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
22918
23126
  */
22919
23127
  "helix-color-input": Partial<
22920
23128
  HelixColorInputProps & BaseProps<HelixColorInput> & BaseEvents<HelixColorInput>
@@ -23153,6 +23361,12 @@ export type CustomElements = {
23153
23361
  * - `swatch`: One preset.
23154
23362
  * - `swatches`: The row of presets.
23155
23363
  * - `value`: The color as text, which can be typed or pasted.
23364
+ *
23365
+ * ## CSS States
23366
+ *
23367
+ * These can be used to apply styling when a component is in a given state.
23368
+ *
23369
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
23156
23370
  */
23157
23371
  "helix-color-picker": Partial<
23158
23372
  HelixColorPickerProps & BaseProps<HelixColorPicker> & BaseEvents<HelixColorPicker>
@@ -23408,6 +23622,14 @@ export type CustomElements = {
23408
23622
  * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
23409
23623
  * - `tag-prefix`: The category before the label.
23410
23624
  * - `tags`: The row of chosen options, when `multiple` is set.
23625
+ *
23626
+ * ## CSS States
23627
+ *
23628
+ * These can be used to apply styling when a component is in a given state.
23629
+ *
23630
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
23631
+ * - `open`: While the list is open.
23632
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
23411
23633
  */
23412
23634
  "helix-combobox": Partial<
23413
23635
  HelixComboboxProps & BaseProps<HelixCombobox> & BaseEvents<HelixCombobox>
@@ -23517,6 +23739,13 @@ export type CustomElements = {
23517
23739
  * - `listbox-loading`: Shown while the options are still on their way.
23518
23740
  * - `listbox-search`: The region holding the field that narrows the list.
23519
23741
  * - `listbox-search-field`: The field itself.
23742
+ *
23743
+ * ## CSS States
23744
+ *
23745
+ * These can be used to apply styling when a component is in a given state.
23746
+ *
23747
+ * - `open`: While the palette is open.
23748
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
23520
23749
  */
23521
23750
  "helix-command": Partial<
23522
23751
  HelixCommandProps & BaseProps<HelixCommand> & BaseEvents<HelixCommand>
@@ -23760,6 +23989,12 @@ export type CustomElements = {
23760
23989
  * - `mark`: The clipboard glyph, and the confirmation that replaces it.
23761
23990
  * - `tooltip`: The bubble, forwarded from the tooltip inside.
23762
23991
  * - `tooltip-arrow`: The point, resting against the trigger.
23992
+ *
23993
+ * ## CSS States
23994
+ *
23995
+ * These can be used to apply styling when a component is in a given state.
23996
+ *
23997
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
23763
23998
  */
23764
23999
  "helix-copy-button": Partial<
23765
24000
  HelixCopyButtonProps & BaseProps<HelixCopyButton> & BaseEvents<HelixCopyButton>
@@ -24000,6 +24235,7 @@ export type CustomElements = {
24000
24235
  * Custom selectors for styling elements within the component.
24001
24236
  *
24002
24237
  * - `cell`: One cell.
24238
+ * - `cell-selected`: A cell of a selected row, beside `cell`.
24003
24239
  * - `table`: The grid.
24004
24240
  * - `after`: The room the rows below the window would have taken. Windowed only.
24005
24241
  * - `before`: The room the rows above the window would have taken. Windowed only.
@@ -24011,15 +24247,36 @@ export type CustomElements = {
24011
24247
  * - `checkbox-hint`: Forwarded from the checkbox, and never drawn here.
24012
24248
  * - `checkbox-label`: Forwarded from the checkbox; the label is spoken, not shown.
24013
24249
  * - `checkbox-mark`: The tick, or the dash while some rows are selected.
24250
+ * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
24251
+ * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
24014
24252
  * - `empty`: Shown when no rows match.
24015
24253
  * - `footer`: The region below the grid.
24016
24254
  * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
24017
24255
  * - `loading`: Shown while the rows are still on their way.
24018
24256
  * - `pagination`: The pagination, where this draws one.
24257
+ * - `pagination-first`: The pagination's control that jumps to the first page, under `ends`.
24258
+ * - `pagination-gap`: The pagination's control standing over pages not shown.
24259
+ * - `pagination-item`: One slot in the pagination's run, holding a page or a gap.
24260
+ * - `pagination-last`: The pagination's control that jumps to the last page, under `ends`.
24261
+ * - `pagination-list`: The pagination's run of pages.
24262
+ * - `pagination-live`: The region that says the page changed. Clipped, not hidden.
24263
+ * - `pagination-mark`: The glyph on a first, previous, next or last control.
24264
+ * - `pagination-next`: The pagination's control that moves forward one page.
24265
+ * - `pagination-page`: The pagination's control for one page.
24266
+ * - `pagination-page-current`: The page you are on, beside `pagination-page`.
24267
+ * - `pagination-previous`: The pagination's control that moves back one page.
24268
+ * - `pagination-status`: The pagination's reading of where you are, in `compact`.
24019
24269
  * - `row`: One row of data.
24020
24270
  * - `select`: The cell holding a row's checkbox.
24021
24271
  * - `select-all`: The heading holding the checkbox that selects every row.
24272
+ * - `select-selected`: The checkbox cell of a selected row, beside `select`.
24022
24273
  * - `toolbar`: The region above the grid.
24274
+ *
24275
+ * ## CSS States
24276
+ *
24277
+ * These can be used to apply styling when a component is in a given state.
24278
+ *
24279
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24023
24280
  */
24024
24281
  "helix-data-table": Partial<
24025
24282
  HelixDataTableProps & BaseProps<HelixDataTable> & BaseEvents<HelixDataTable>
@@ -24291,7 +24548,14 @@ export type CustomElements = {
24291
24548
  * - `label`: The question, over the field.
24292
24549
  * - `picker`: The date picker inside it.
24293
24550
  * - `picker-cell`: One column of a row, which is what a range paints.
24551
+ * - `picker-cell-range-end`: The cell of a range's last day, beside `picker-cell`.
24552
+ * - `picker-cell-range-middle`: A cell between a range's ends, beside `picker-cell`.
24553
+ * - `picker-cell-range-start`: The cell of a range's first day, beside `picker-cell`.
24294
24554
  * - `picker-day`: The shape inside a cell, which is what a single date paints.
24555
+ * - `picker-day-disabled`: A day that cannot be chosen, beside `picker-day`.
24556
+ * - `picker-day-outside`: A day from a neighboring month, beside `picker-day`.
24557
+ * - `picker-day-selected`: The chosen day, or either end of a chosen range, beside `picker-day`.
24558
+ * - `picker-day-today`: Today, beside `picker-day`.
24295
24559
  * - `picker-grid`: The grid of days.
24296
24560
  * - `picker-header`: The month name and its controls.
24297
24561
  * - `picker-heading`: The month and year being shown.
@@ -24308,6 +24572,14 @@ export type CustomElements = {
24308
24572
  * - `tags`: The row the dates sit in.
24309
24573
  * - `trigger`: The control that opens the calendar.
24310
24574
  * - `trigger-icon`: The mark on the button that opens the calendar.
24575
+ *
24576
+ * ## CSS States
24577
+ *
24578
+ * These can be used to apply styling when a component is in a given state.
24579
+ *
24580
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
24581
+ * - `open`: While the calendar is open.
24582
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24311
24583
  */
24312
24584
  "helix-date-input": Partial<
24313
24585
  HelixDateInputProps & BaseProps<HelixDateInput> & BaseEvents<HelixDateInput>
@@ -24529,7 +24801,14 @@ export type CustomElements = {
24529
24801
  * Custom selectors for styling elements within the component.
24530
24802
  *
24531
24803
  * - `cell`: One column of a row, which is what a range paints.
24804
+ * - `cell-range-end`: The cell of a range's last day, beside `cell`.
24805
+ * - `cell-range-middle`: A cell between a range's ends, beside `cell`.
24806
+ * - `cell-range-start`: The cell of a range's first day, beside `cell`.
24532
24807
  * - `day`: The shape inside a cell, which is what a single date paints.
24808
+ * - `day-disabled`: A day that cannot be chosen, beside `day`.
24809
+ * - `day-outside`: A day from a neighboring month, filling the grid out, beside `day`.
24810
+ * - `day-selected`: The chosen day, or either end of a chosen range, beside `day`.
24811
+ * - `day-today`: Today, beside `day`.
24533
24812
  * - `grid`: The grid of days.
24534
24813
  * - `header`: The month name and its controls.
24535
24814
  * - `heading`: The month and year being shown.
@@ -24541,6 +24820,12 @@ export type CustomElements = {
24541
24820
  * - `previous-mark`: The glyph on the previous month control, where none is slotted.
24542
24821
  * - `week`: One row of days.
24543
24822
  * - `weekday`: A column header naming a day of the week.
24823
+ *
24824
+ * ## CSS States
24825
+ *
24826
+ * These can be used to apply styling when a component is in a given state.
24827
+ *
24828
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24544
24829
  */
24545
24830
  "helix-date-picker": Partial<
24546
24831
  HelixDatePickerProps & BaseProps<HelixDatePicker> & BaseEvents<HelixDatePicker>
@@ -24590,6 +24875,12 @@ export type CustomElements = {
24590
24875
  *
24591
24876
  * - `label`: The `<dt>`, holding the label.
24592
24877
  * - `value`: The `<dd>`, holding the value.
24878
+ *
24879
+ * ## CSS States
24880
+ *
24881
+ * These can be used to apply styling when a component is in a given state.
24882
+ *
24883
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24593
24884
  */
24594
24885
  "helix-description-list-item": Partial<
24595
24886
  HelixDescriptionListItemProps &
@@ -24684,6 +24975,12 @@ export type CustomElements = {
24684
24975
  * Custom selectors for styling elements within the component.
24685
24976
  *
24686
24977
  * - `list`: The `<dl>` holding the items.
24978
+ *
24979
+ * ## CSS States
24980
+ *
24981
+ * These can be used to apply styling when a component is in a given state.
24982
+ *
24983
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24687
24984
  */
24688
24985
  "helix-description-list": Partial<
24689
24986
  HelixDescriptionListProps & BaseProps<HelixDescriptionList> & BaseEvents<HelixDescriptionList>
@@ -24822,6 +25119,13 @@ export type CustomElements = {
24822
25119
  * Custom selectors for styling elements within the component.
24823
25120
  *
24824
25121
  * - `dialog`: The native dialog element.
25122
+ *
25123
+ * ## CSS States
25124
+ *
25125
+ * These can be used to apply styling when a component is in a given state.
25126
+ *
25127
+ * - `open`: While the dialog is open.
25128
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24825
25129
  */
24826
25130
  "helix-dialog": Partial<
24827
25131
  HelixDialogProps & BaseProps<HelixDialog> & BaseEvents<HelixDialog>
@@ -24892,6 +25196,12 @@ export type CustomElements = {
24892
25196
  *
24893
25197
  * - `line`: The rule itself.
24894
25198
  * - `content`: What is set into it.
25199
+ *
25200
+ * ## CSS States
25201
+ *
25202
+ * These can be used to apply styling when a component is in a given state.
25203
+ *
25204
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
24895
25205
  */
24896
25206
  "helix-divider": Partial<
24897
25207
  HelixDividerProps & BaseProps<HelixDivider> & BaseEvents<HelixDivider>
@@ -25079,14 +25389,22 @@ export type CustomElements = {
25079
25389
  * - `mark`: The invisible point the tooltip is anchored to.
25080
25390
  * - `plot`: The drawing.
25081
25391
  * - `segment`: One slice.
25392
+ * - `segment-active`: The slice under the pointer, beside `segment`.
25082
25393
  * - `segment-edge`: One slice as a closed shape, for a boundary to trace.
25083
25394
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
25084
25395
  * - `tooltip-anchor`: The `Tooltip` element itself.
25396
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
25085
25397
  * - `tooltip-cell`: One column's name and value inside the tooltip.
25086
25398
  * - `tooltip-label`: The slice's own name inside the tooltip.
25087
25399
  * - `tooltip-name`: A column's name inside the tooltip.
25088
25400
  * - `tooltip-value`: A column's value inside the tooltip.
25089
25401
  * - `track`: The ring the slices are drawn on.
25402
+ *
25403
+ * ## CSS States
25404
+ *
25405
+ * These can be used to apply styling when a component is in a given state.
25406
+ *
25407
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25090
25408
  */
25091
25409
  "helix-donut-chart": Partial<
25092
25410
  HelixDonutChartProps & BaseProps<HelixDonutChart> & BaseEvents<HelixDonutChart>
@@ -25240,6 +25558,13 @@ export type CustomElements = {
25240
25558
  * - `content`: The scrolling content region.
25241
25559
  * - `header`: The header region.
25242
25560
  * - `panel`: The sliding panel.
25561
+ *
25562
+ * ## CSS States
25563
+ *
25564
+ * These can be used to apply styling when a component is in a given state.
25565
+ *
25566
+ * - `open`: While the drawer is open.
25567
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25243
25568
  */
25244
25569
  "helix-drawer": Partial<
25245
25570
  HelixDrawerProps & BaseProps<HelixDrawer> & BaseEvents<HelixDrawer>
@@ -25326,6 +25651,13 @@ export type CustomElements = {
25326
25651
  *
25327
25652
  * - `item`: The row itself.
25328
25653
  * - `label`: The words.
25654
+ * - `mark`: The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
25655
+ *
25656
+ * ## CSS States
25657
+ *
25658
+ * These can be used to apply styling when a component is in a given state.
25659
+ *
25660
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25329
25661
  */
25330
25662
  "helix-drilldown-item": Partial<
25331
25663
  HelixDrilldownItemProps & BaseProps<HelixDrilldownItem> & BaseEvents<HelixDrilldownItem>
@@ -25415,6 +25747,12 @@ export type CustomElements = {
25415
25747
  * - `loading`: Shown while the entries are still on their way.
25416
25748
  * - `page`: The region the rows are in.
25417
25749
  * - `title`: The name of the page showing.
25750
+ *
25751
+ * ## CSS States
25752
+ *
25753
+ * These can be used to apply styling when a component is in a given state.
25754
+ *
25755
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25418
25756
  */
25419
25757
  "helix-drilldown": Partial<
25420
25758
  HelixDrilldownProps & BaseProps<HelixDrilldown> & BaseEvents<HelixDrilldown>
@@ -25467,6 +25805,12 @@ export type CustomElements = {
25467
25805
  * CSS variables available for styling the component.
25468
25806
  *
25469
25807
  * - `--empty-padding`: Space around the whole block. (default: `undefined`)
25808
+ *
25809
+ * ## CSS States
25810
+ *
25811
+ * These can be used to apply styling when a component is in a given state.
25812
+ *
25813
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25470
25814
  */
25471
25815
  "helix-empty": Partial<HelixEmptyProps & BaseProps<HelixEmpty> & BaseEvents<HelixEmpty>>;
25472
25816
 
@@ -25652,6 +25996,13 @@ export type CustomElements = {
25652
25996
  * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
25653
25997
  * - `size-prefix`: The category before the label.
25654
25998
  * - `trigger`: The label that opens the picker.
25999
+ *
26000
+ * ## CSS States
26001
+ *
26002
+ * These can be used to apply styling when a component is in a given state.
26003
+ *
26004
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
26005
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25655
26006
  */
25656
26007
  "helix-file-input": Partial<
25657
26008
  HelixFileInputProps & BaseProps<HelixFileInput> & BaseEvents<HelixFileInput>
@@ -25765,6 +26116,12 @@ export type CustomElements = {
25765
26116
  * - `field`: The name of what is being filtered.
25766
26117
  * - `operator`: How it is compared, drawn only where there is one to draw.
25767
26118
  * - `values`: What it is compared to.
26119
+ *
26120
+ * ## CSS States
26121
+ *
26122
+ * These can be used to apply styling when a component is in a given state.
26123
+ *
26124
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25768
26125
  */
25769
26126
  "helix-filter-chip": Partial<
25770
26127
  HelixFilterChipProps & BaseProps<HelixFilterChip> & BaseEvents<HelixFilterChip>
@@ -25850,6 +26207,12 @@ export type CustomElements = {
25850
26207
  * Areas where markup can be added to the component.
25851
26208
  *
25852
26209
  * - `(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.
26210
+ *
26211
+ * ## CSS States
26212
+ *
26213
+ * These can be used to apply styling when a component is in a given state.
26214
+ *
26215
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25853
26216
  */
25854
26217
  "helix-filter-field": Partial<
25855
26218
  HelixFilterFieldProps & BaseProps<HelixFilterField> & BaseEvents<HelixFilterField>
@@ -25934,6 +26297,32 @@ export type CustomElements = {
25934
26297
  *
25935
26298
  * Refusing the `helix-facet` puts everything back, so a consumer who declines
25936
26299
  * a filter is never left looking at a menu that says it took.
26300
+ *
26301
+ * ## CSS Parts
26302
+ *
26303
+ * Custom selectors for styling elements within the component.
26304
+ *
26305
+ * - `divider`: The rule between a field's comparisons and its values.
26306
+ * - `divider-content`: What is set into the rule.
26307
+ * - `divider-line`: The rule itself.
26308
+ * - `entry`: One row: a field, its comparison, an operator or a value.
26309
+ * - `entry-item`: The row itself.
26310
+ * - `entry-mark`: The trailing mark: a tick on a chosen value, a caret on a field.
26311
+ * - `entry-start`: The leading column.
26312
+ * - `menu`: The menu the fields are offered in.
26313
+ * - `menu-back`: The control that returns from a field's page.
26314
+ * - `menu-back-mark`: The glyph on the back control.
26315
+ * - `menu-empty`: Shown when there are no fields to offer.
26316
+ * - `menu-header`: The bar above a field's page, holding the way back and its name.
26317
+ * - `menu-loading`: Shown while the fields are still on their way.
26318
+ * - `menu-surface`: The floating panel the menu is drawn on.
26319
+ * - `menu-title`: The name of the field whose page is showing.
26320
+ *
26321
+ * ## CSS States
26322
+ *
26323
+ * These can be used to apply styling when a component is in a given state.
26324
+ *
26325
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
25937
26326
  */
25938
26327
  "helix-filter-menu": Partial<
25939
26328
  HelixFilterMenuProps & BaseProps<HelixFilterMenu> & BaseEvents<HelixFilterMenu>
@@ -26015,6 +26404,12 @@ export type CustomElements = {
26015
26404
  * It never resolves where `requestAnimationFrame` never fires, which is a
26016
26405
  * server, a hidden tab, and happy-dom. Callers that must not hang race it
26017
26406
  * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
26407
+ *
26408
+ * ## CSS States
26409
+ *
26410
+ * These can be used to apply styling when a component is in a given state.
26411
+ *
26412
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26018
26413
  */
26019
26414
  "helix-filter-operator": Partial<
26020
26415
  HelixFilterOperatorProps & BaseProps<HelixFilterOperator> & BaseEvents<HelixFilterOperator>
@@ -26264,6 +26659,14 @@ export type CustomElements = {
26264
26659
  * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
26265
26660
  * - `surface`: The floating panel the suggestions sit in.
26266
26661
  * - `tags`: The row the tokens sit in.
26662
+ *
26663
+ * ## CSS States
26664
+ *
26665
+ * These can be used to apply styling when a component is in a given state.
26666
+ *
26667
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
26668
+ * - `open`: While the suggestions are open.
26669
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26267
26670
  */
26268
26671
  "helix-filter-input": Partial<
26269
26672
  HelixFilterInputProps & BaseProps<HelixFilterInput> & BaseEvents<HelixFilterInput>
@@ -26318,6 +26721,12 @@ export type CustomElements = {
26318
26721
  * Areas where markup can be added to the component.
26319
26722
  *
26320
26723
  * - `(default)`: The items to lay out.
26724
+ *
26725
+ * ## CSS States
26726
+ *
26727
+ * These can be used to apply styling when a component is in a given state.
26728
+ *
26729
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26321
26730
  */
26322
26731
  "helix-flex": Partial<HelixFlexProps & BaseProps<HelixFlex> & BaseEvents<HelixFlex>>;
26323
26732
 
@@ -26391,6 +26800,12 @@ export type CustomElements = {
26391
26800
  * Custom selectors for styling elements within the component.
26392
26801
  *
26393
26802
  * - `time`: The `<time>` element carrying the reading.
26803
+ *
26804
+ * ## CSS States
26805
+ *
26806
+ * These can be used to apply styling when a component is in a given state.
26807
+ *
26808
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26394
26809
  */
26395
26810
  "helix-format-date": Partial<
26396
26811
  HelixFormatDateProps & BaseProps<HelixFormatDate> & BaseEvents<HelixFormatDate>
@@ -26445,6 +26860,12 @@ export type CustomElements = {
26445
26860
  * CSS variables available for styling the component.
26446
26861
  *
26447
26862
  * - `--grid-columns`: An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say. (default: `undefined`)
26863
+ *
26864
+ * ## CSS States
26865
+ *
26866
+ * These can be used to apply styling when a component is in a given state.
26867
+ *
26868
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26448
26869
  */
26449
26870
  "helix-grid": Partial<HelixGridProps & BaseProps<HelixGrid> & BaseEvents<HelixGrid>>;
26450
26871
 
@@ -26630,6 +27051,7 @@ export type CustomElements = {
26630
27051
  * - `strip`: The grid of cells.
26631
27052
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
26632
27053
  * - `tooltip-anchor`: The `Tooltip` element itself.
27054
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
26633
27055
  * - `tooltip-cell`: One column's name and value inside the tooltip.
26634
27056
  * - `tooltip-label`: The reading's own name inside the tooltip.
26635
27057
  * - `tooltip-name`: A column's name inside the tooltip.
@@ -26638,6 +27060,12 @@ export type CustomElements = {
26638
27060
  * - `end`: The trailing slot's box.
26639
27061
  * - `start`: The leading slot's box.
26640
27062
  * - `summary`: The middle slot's box.
27063
+ *
27064
+ * ## CSS States
27065
+ *
27066
+ * These can be used to apply styling when a component is in a given state.
27067
+ *
27068
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26641
27069
  */
26642
27070
  "helix-heatmap": Partial<
26643
27071
  HelixHeatmapProps & BaseProps<HelixHeatmap> & BaseEvents<HelixHeatmap>
@@ -26896,6 +27324,12 @@ export type CustomElements = {
26896
27324
  * Custom selectors for styling elements within the component.
26897
27325
  *
26898
27326
  * - `button`: The inner button or anchor.
27327
+ *
27328
+ * ## CSS States
27329
+ *
27330
+ * These can be used to apply styling when a component is in a given state.
27331
+ *
27332
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26899
27333
  */
26900
27334
  "helix-icon-button": Partial<
26901
27335
  HelixIconButtonProps & BaseProps<HelixIconButton> & BaseEvents<HelixIconButton>
@@ -26943,6 +27377,12 @@ export type CustomElements = {
26943
27377
  * Custom selectors for styling elements within the component.
26944
27378
  *
26945
27379
  * - `svg`: The rendered SVG.
27380
+ *
27381
+ * ## CSS States
27382
+ *
27383
+ * These can be used to apply styling when a component is in a given state.
27384
+ *
27385
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
26946
27386
  */
26947
27387
  "helix-icon": Partial<HelixIconProps & BaseProps<HelixIcon> & BaseEvents<HelixIcon>>;
26948
27388
 
@@ -27060,6 +27500,12 @@ export type CustomElements = {
27060
27500
  * - `fallback`: What stands in when it fails.
27061
27501
  * - `image`: The picture itself.
27062
27502
  * - `placeholder`: What stands in until it arrives.
27503
+ *
27504
+ * ## CSS States
27505
+ *
27506
+ * These can be used to apply styling when a component is in a given state.
27507
+ *
27508
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27063
27509
  */
27064
27510
  "helix-image": Partial<HelixImageProps & BaseProps<HelixImage> & BaseEvents<HelixImage>>;
27065
27511
 
@@ -27301,6 +27747,14 @@ export type CustomElements = {
27301
27747
  * - `hint`: Help under the field, while nothing is wrong.
27302
27748
  * - `label`: The question, over the field.
27303
27749
  * - `reveal`: The button that shows and hides a password.
27750
+ * - `reveal-pressed`: The reveal button while the password shows, beside `reveal`.
27751
+ *
27752
+ * ## CSS States
27753
+ *
27754
+ * These can be used to apply styling when a component is in a given state.
27755
+ *
27756
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
27757
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27304
27758
  */
27305
27759
  "helix-input": Partial<HelixInputProps & BaseProps<HelixInput> & BaseEvents<HelixInput>>;
27306
27760
 
@@ -27372,6 +27826,12 @@ export type CustomElements = {
27372
27826
  * Custom selectors for styling elements within the component.
27373
27827
  *
27374
27828
  * - `kbd`: The key.
27829
+ *
27830
+ * ## CSS States
27831
+ *
27832
+ * These can be used to apply styling when a component is in a given state.
27833
+ *
27834
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27375
27835
  */
27376
27836
  "helix-kbd": Partial<HelixKbdProps & BaseProps<HelixKbd> & BaseEvents<HelixKbd>>;
27377
27837
 
@@ -27497,6 +27957,12 @@ export type CustomElements = {
27497
27957
  * - `list`: The list itself.
27498
27958
  * - `name`: One series name.
27499
27959
  * - `swatch`: The color a series is drawn in.
27960
+ *
27961
+ * ## CSS States
27962
+ *
27963
+ * These can be used to apply styling when a component is in a given state.
27964
+ *
27965
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27500
27966
  */
27501
27967
  "helix-legend": Partial<
27502
27968
  HelixLegendProps & BaseProps<HelixLegend> & BaseEvents<HelixLegend>
@@ -27719,10 +28185,17 @@ export type CustomElements = {
27719
28185
  * - `terminus`: The mark on one series' last reading.
27720
28186
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
27721
28187
  * - `tooltip-anchor`: The `Tooltip` element itself.
28188
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
27722
28189
  * - `tooltip-cell`: One column's name and value inside the tooltip.
27723
28190
  * - `tooltip-label`: The reading's own name inside the tooltip.
27724
28191
  * - `tooltip-name`: A column's name inside the tooltip.
27725
28192
  * - `tooltip-value`: A column's value inside the tooltip.
28193
+ *
28194
+ * ## CSS States
28195
+ *
28196
+ * These can be used to apply styling when a component is in a given state.
28197
+ *
28198
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27726
28199
  */
27727
28200
  "helix-line-chart": Partial<
27728
28201
  HelixLineChartProps & BaseProps<HelixLineChart> & BaseEvents<HelixLineChart>
@@ -27788,6 +28261,12 @@ export type CustomElements = {
27788
28261
  *
27789
28262
  * - `rail`: The cell a railed list draws its number in.
27790
28263
  * - `row`: The layout, held off the host so the host can carry a marker.
28264
+ *
28265
+ * ## CSS States
28266
+ *
28267
+ * These can be used to apply styling when a component is in a given state.
28268
+ *
28269
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27791
28270
  */
27792
28271
  "helix-list-item": Partial<
27793
28272
  HelixListItemProps & BaseProps<HelixListItem> & BaseEvents<HelixListItem>
@@ -27887,6 +28366,12 @@ export type CustomElements = {
27887
28366
  * - `--list-marker-gutter`: Room the ordered and unordered markers hang into. (default: `undefined`)
27888
28367
  * - `--list-rail-inline-size`: The width of the rail's track. (default: `undefined`)
27889
28368
  * - `--list-rail-style`: What a rail counts with. Any `list-style-type`. (default: `undefined`)
28369
+ *
28370
+ * ## CSS States
28371
+ *
28372
+ * These can be used to apply styling when a component is in a given state.
28373
+ *
28374
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
27890
28375
  */
27891
28376
  "helix-list": Partial<HelixListProps & BaseProps<HelixList> & BaseEvents<HelixList>>;
27892
28377
 
@@ -28132,6 +28617,13 @@ export type CustomElements = {
28132
28617
  * - `loading`: Shown while the options are still on their way.
28133
28618
  * - `search`: The region holding the field that narrows the list.
28134
28619
  * - `search-field`: The field itself.
28620
+ *
28621
+ * ## CSS States
28622
+ *
28623
+ * These can be used to apply styling when a component is in a given state.
28624
+ *
28625
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
28626
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28135
28627
  */
28136
28628
  "helix-listbox": Partial<
28137
28629
  HelixListboxProps & BaseProps<HelixListbox> & BaseEvents<HelixListbox>
@@ -28199,6 +28691,12 @@ export type CustomElements = {
28199
28691
  * - `mark`: The region holding what was slotted at the center.
28200
28692
  * - `svg`: The rotating circle pair.
28201
28693
  * - `track`: The full circle behind the indicator.
28694
+ *
28695
+ * ## CSS States
28696
+ *
28697
+ * These can be used to apply styling when a component is in a given state.
28698
+ *
28699
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28202
28700
  */
28203
28701
  "helix-loader": Partial<
28204
28702
  HelixLoaderProps & BaseProps<HelixLoader> & BaseEvents<HelixLoader>
@@ -28326,6 +28824,13 @@ export type CustomElements = {
28326
28824
  *
28327
28825
  * - `surface`: The floating panel, which is what opens.
28328
28826
  * - `trigger`: The default trigger, where none was slotted.
28827
+ *
28828
+ * ## CSS States
28829
+ *
28830
+ * These can be used to apply styling when a component is in a given state.
28831
+ *
28832
+ * - `open`: While the panel is open, which is when the trigger reads as current.
28833
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28329
28834
  */
28330
28835
  "helix-megamenu": Partial<
28331
28836
  HelixMegamenuProps & BaseProps<HelixMegamenu> & BaseEvents<HelixMegamenu>
@@ -28476,6 +28981,12 @@ export type CustomElements = {
28476
28981
  * - `item`: The row, which is an `<a>` where `href` is set.
28477
28982
  * - `mark`: The trailing mark: a tick when checked, a caret when it opens a page. One column, because a row is never both.
28478
28983
  * - `start`: The leading column, which is a slot and is always there.
28984
+ *
28985
+ * ## CSS States
28986
+ *
28987
+ * These can be used to apply styling when a component is in a given state.
28988
+ *
28989
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28479
28990
  */
28480
28991
  "helix-menu-item": Partial<
28481
28992
  HelixMenuItemProps & BaseProps<HelixMenuItem> & BaseEvents<HelixMenuItem>
@@ -28590,6 +29101,16 @@ export type CustomElements = {
28590
29101
  * - `loading`: Shown while the items are still on their way.
28591
29102
  * - `surface`: The floating panel the menu is drawn on.
28592
29103
  * - `title`: The name of the submenu that is showing.
29104
+ *
29105
+ * ## CSS States
29106
+ *
29107
+ * These can be used to apply styling when a component is in a given state.
29108
+ *
29109
+ * - `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.
29110
+ * - `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.
29111
+ * - `open`: While the menu is open.
29112
+ * - `start`: While a row on the page showing has something in its leading column, so that column is held open for every row.
29113
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28593
29114
  */
28594
29115
  "helix-menu": Partial<HelixMenuProps & BaseProps<HelixMenu> & BaseEvents<HelixMenu>>;
28595
29116
 
@@ -28663,8 +29184,10 @@ export type CustomElements = {
28663
29184
  * again is a worse API than letting them say it.
28664
29185
  *
28665
29186
  * Not reflected. Nothing selects on it: the band reaches the stylesheet as
28666
- * `data-band` on the fill, because that is the element being colored, so
28667
- * reflecting here would write an attribute onto the host for no reader.
29187
+ * `data-band` on the fill, because that is the element being colored, and a
29188
+ * stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
29189
+ * part names, so reflecting here would write an attribute onto the host for
29190
+ * no reader.
28668
29191
  * - `high`: Bottom of the high band.
28669
29192
  *
28670
29193
  * Absent leaves the range unbanded.
@@ -28749,10 +29272,21 @@ export type CustomElements = {
28749
29272
  * Custom selectors for styling elements within the component.
28750
29273
  *
28751
29274
  * - `indicator`: The part of it the value fills.
29275
+ * - `indicator-fair`: The fill while the reading is in a band beside the good one, beside `indicator`.
29276
+ * - `indicator-good`: The fill while the reading is in the good band, beside `indicator`.
29277
+ * - `indicator-over`: The fill while the value is past the top, beside `indicator`.
29278
+ * - `indicator-poor`: The fill while the reading is two bands from the good one, beside `indicator`.
29279
+ * - `indicator-under`: The fill while the value is below the floor, beside `indicator`.
28752
29280
  * - `tick`: A mark at `low` or at `high`.
28753
29281
  * - `track`: The whole range.
28754
29282
  * - `value`: The reading, under `show-value`.
28755
29283
  * - `groove`: The unfilled circle, in `ring` and `arc`.
29284
+ *
29285
+ * ## CSS States
29286
+ *
29287
+ * These can be used to apply styling when a component is in a given state.
29288
+ *
29289
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28756
29290
  */
28757
29291
  "helix-meter": Partial<HelixMeterProps & BaseProps<HelixMeter> & BaseEvents<HelixMeter>>;
28758
29292
 
@@ -28805,6 +29339,12 @@ export type CustomElements = {
28805
29339
  *
28806
29340
  * - `indicator`: The marker that travels to the current destination.
28807
29341
  * - `nav`: The navigation landmark.
29342
+ *
29343
+ * ## CSS States
29344
+ *
29345
+ * These can be used to apply styling when a component is in a given state.
29346
+ *
29347
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28808
29348
  */
28809
29349
  "helix-navigation": Partial<
28810
29350
  HelixNavigationProps & BaseProps<HelixNavigation> & BaseEvents<HelixNavigation>
@@ -28920,6 +29460,13 @@ export type CustomElements = {
28920
29460
  * - `items`: The region holding the notifications.
28921
29461
  * - `label`: What the group is called.
28922
29462
  * - `trigger`: The control that collapses and expands, where collapsible.
29463
+ *
29464
+ * ## CSS States
29465
+ *
29466
+ * These can be used to apply styling when a component is in a given state.
29467
+ *
29468
+ * - `open`: While the group shows every notification in it rather than the first.
29469
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
28923
29470
  */
28924
29471
  "helix-notification-group": Partial<
28925
29472
  HelixNotificationGroupProps & BaseProps<HelixNotificationGroup> & BaseEvents<HelixNotificationGroup>
@@ -29074,6 +29621,15 @@ export type CustomElements = {
29074
29621
  * - `body`: The label and the caption together.
29075
29622
  * - `label`: What happened, on the first line.
29076
29623
  * - `media`: The leading slot's box.
29624
+ *
29625
+ * ## CSS States
29626
+ *
29627
+ * These can be used to apply styling when a component is in a given state.
29628
+ *
29629
+ * - `actions`: While the actions slot holds something, so the words above make room for it.
29630
+ * - `controls`: While it can be dismissed, so the time makes way for the control under a pointer.
29631
+ * - `read`: While it has been read.
29632
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29077
29633
  */
29078
29634
  "helix-notification": Partial<
29079
29635
  HelixNotificationProps & BaseProps<HelixNotification> & BaseEvents<HelixNotification>
@@ -29223,6 +29779,13 @@ export type CustomElements = {
29223
29779
  * - `footer`: The region below the list.
29224
29780
  * - `header`: The region above the list.
29225
29781
  * - `loading`: Shown while the feed is still on its way.
29782
+ *
29783
+ * ## CSS States
29784
+ *
29785
+ * These can be used to apply styling when a component is in a given state.
29786
+ *
29787
+ * - `media`: While a notification in the list holds something in its media slot, so every row keeps that column.
29788
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29226
29789
  */
29227
29790
  "helix-notifications": Partial<
29228
29791
  HelixNotificationsProps & BaseProps<HelixNotifications> & BaseEvents<HelixNotifications>
@@ -29436,6 +29999,13 @@ export type CustomElements = {
29436
29999
  * - `hint`: Help under the field, while nothing is wrong.
29437
30000
  * - `increment-mark`: The glyph on the step up control.
29438
30001
  * - `label`: The name over the field, which is also the scrub grip.
30002
+ *
30003
+ * ## CSS States
30004
+ *
30005
+ * These can be used to apply styling when a component is in a given state.
30006
+ *
30007
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
30008
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29439
30009
  */
29440
30010
  "helix-number-input": Partial<
29441
30011
  HelixNumberInputProps & BaseProps<HelixNumberInput> & BaseEvents<HelixNumberInput>
@@ -29532,10 +30102,17 @@ export type CustomElements = {
29532
30102
  * - `null`: A `null`.
29533
30103
  * - `number`: A number.
29534
30104
  * - `row`: One entry, a tree item.
30105
+ * - `row-active`: The entry the keyboard is on, beside `row`.
29535
30106
  * - `string`: A string, in quotes.
29536
30107
  * - `summary`: The brackets standing for a branch's contents.
29537
30108
  * - `toggle`: The caret on a branch: down when open, across when closed.
29538
30109
  * - `tree`: The tree, the one thing focus lands on.
30110
+ *
30111
+ * ## CSS States
30112
+ *
30113
+ * These can be used to apply styling when a component is in a given state.
30114
+ *
30115
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29539
30116
  */
29540
30117
  "helix-object-inspector": Partial<
29541
30118
  HelixObjectInspectorProps & BaseProps<HelixObjectInspector> & BaseEvents<HelixObjectInspector>
@@ -29583,6 +30160,12 @@ export type CustomElements = {
29583
30160
  *
29584
30161
  * - `items`: The run itself.
29585
30162
  * - `label`: The heading.
30163
+ *
30164
+ * ## CSS States
30165
+ *
30166
+ * These can be used to apply styling when a component is in a given state.
30167
+ *
30168
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29586
30169
  */
29587
30170
  "helix-option-group": Partial<
29588
30171
  HelixOptionGroupProps & BaseProps<HelixOptionGroup> & BaseEvents<HelixOptionGroup>
@@ -29756,8 +30339,17 @@ export type CustomElements = {
29756
30339
  *
29757
30340
  * - `description`: The caption under the words, when there is one.
29758
30341
  * - `item`: The row.
30342
+ * - `item-active`: The row the keyboard is on, beside `item`.
30343
+ * - `item-selected`: The row of a chosen option, beside `item`.
29759
30344
  * - `label`: The words.
29760
30345
  * - `text`: The words and the caption under them, as one column.
30346
+ *
30347
+ * ## CSS States
30348
+ *
30349
+ * These can be used to apply styling when a component is in a given state.
30350
+ *
30351
+ * - `selected`: While the option is chosen.
30352
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29761
30353
  */
29762
30354
  "helix-option": Partial<
29763
30355
  HelixOptionProps & BaseProps<HelixOption> & BaseEvents<HelixOption>
@@ -29856,6 +30448,12 @@ export type CustomElements = {
29856
30448
  * Custom selectors for styling elements within the component.
29857
30449
  *
29858
30450
  * - `canvas`: The surface the cloud is drawn into.
30451
+ *
30452
+ * ## CSS States
30453
+ *
30454
+ * These can be used to apply styling when a component is in a given state.
30455
+ *
30456
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29859
30457
  */
29860
30458
  "helix-orb": Partial<HelixOrbProps & BaseProps<HelixOrb> & BaseEvents<HelixOrb>>;
29861
30459
 
@@ -29950,6 +30548,12 @@ export type CustomElements = {
29950
30548
  *
29951
30549
  * - `indicator`: The mark that travels to the section being read.
29952
30550
  * - `nav`: The navigation landmark.
30551
+ *
30552
+ * ## CSS States
30553
+ *
30554
+ * These can be used to apply styling when a component is in a given state.
30555
+ *
30556
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
29953
30557
  */
29954
30558
  "helix-outline": Partial<
29955
30559
  HelixOutlineProps & BaseProps<HelixOutline> & BaseEvents<HelixOutline>
@@ -30126,10 +30730,18 @@ export type CustomElements = {
30126
30730
  * - `list`: The run of pages.
30127
30731
  * - `next`: The control that moves forward one page.
30128
30732
  * - `page`: The control for one page.
30733
+ * - `page-current`: The page you are on, beside `page`.
30129
30734
  * - `previous`: The control that moves back one page.
30130
30735
  * - `status`: The reading of where you are, in `compact`.
30131
30736
  * - `live`: The region that says the page changed. Clipped, not hidden.
30132
30737
  * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
30738
+ *
30739
+ * ## CSS States
30740
+ *
30741
+ * These can be used to apply styling when a component is in a given state.
30742
+ *
30743
+ * - `empty`: While there is one page or none, which is nothing to page through.
30744
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30133
30745
  */
30134
30746
  "helix-pagination": Partial<
30135
30747
  HelixPaginationProps & BaseProps<HelixPagination> & BaseEvents<HelixPagination>
@@ -30140,8 +30752,9 @@ export type CustomElements = {
30140
30752
  * stands in a column of fields; this one stands in a footer beside a run of page
30141
30753
  * numbers, where a two-line control makes the whole row two lines tall.
30142
30754
  *
30143
- * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
30144
- * reach through both boundaries and a consumer styles it as the select it is.
30755
+ * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
30756
+ * `::part(control-label)` reach through both boundaries and a consumer styles it
30757
+ * as the select it is.
30145
30758
  *
30146
30759
  * ## Attributes & Properties
30147
30760
  *
@@ -30192,9 +30805,38 @@ export type CustomElements = {
30192
30805
  * Custom selectors for styling elements within the component.
30193
30806
  *
30194
30807
  * - `control`: The select.
30195
- * - `label`: The words beside the number, forwarded from the select.
30196
- * - `trigger`: The closed control, forwarded from the select.
30197
- * - `value`: The chosen size inside the trigger, forwarded from the select.
30808
+ * - `control-feedback`: What is wrong with it.
30809
+ * - `control-hint`: Help under the trigger.
30810
+ * - `control-indicator`: The caret saying the control opens.
30811
+ * - `control-label`: The words beside the number.
30812
+ * - `control-listbox`: The list inside it.
30813
+ * - `control-listbox-empty`: Shown when a filter has hidden everything.
30814
+ * - `control-listbox-feedback`: What is wrong with the list.
30815
+ * - `control-listbox-filter-icon`: The mark beside the filter field.
30816
+ * - `control-listbox-filter-mark`: The glyph beside the filter field, where none is slotted.
30817
+ * - `control-listbox-hint`: Help under the list.
30818
+ * - `control-listbox-items`: The list itself.
30819
+ * - `control-listbox-label`: The question, over the list.
30820
+ * - `control-listbox-loading`: Shown while the options are still on their way.
30821
+ * - `control-listbox-search`: The region holding the field that narrows the list.
30822
+ * - `control-listbox-search-field`: The field itself.
30823
+ * - `control-surface`: The floating panel.
30824
+ * - `control-trigger`: The closed control, which says what size is chosen.
30825
+ * - `control-value`: The chosen size inside the trigger.
30826
+ * - `option`: One size on offer.
30827
+ * - `option-description`: The caption under the number, when there is one.
30828
+ * - `option-item`: The row.
30829
+ * - `option-item-active`: The row the keyboard is on.
30830
+ * - `option-item-selected`: The row of the size chosen.
30831
+ * - `option-label`: The number.
30832
+ * - `option-text`: The number and the caption, as one column.
30833
+ *
30834
+ * ## CSS States
30835
+ *
30836
+ * These can be used to apply styling when a component is in a given state.
30837
+ *
30838
+ * - `empty`: While there are no sizes to offer.
30839
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30198
30840
  */
30199
30841
  "helix-pagination-size": Partial<
30200
30842
  HelixPaginationSizeProps & BaseProps<HelixPaginationSize> & BaseEvents<HelixPaginationSize>
@@ -30246,6 +30888,12 @@ export type CustomElements = {
30246
30888
  * It never resolves where `requestAnimationFrame` never fires, which is a
30247
30889
  * server, a hidden tab, and happy-dom. Callers that must not hang race it
30248
30890
  * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
30891
+ *
30892
+ * ## CSS States
30893
+ *
30894
+ * These can be used to apply styling when a component is in a given state.
30895
+ *
30896
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30249
30897
  */
30250
30898
  "helix-pagination-summary": Partial<
30251
30899
  HelixPaginationSummaryProps & BaseProps<HelixPaginationSummary> & BaseEvents<HelixPaginationSummary>
@@ -30444,6 +31092,13 @@ export type CustomElements = {
30444
31092
  * - `feedback`: What is wrong with it.
30445
31093
  * - `hint`: Help under the boxes, while nothing is wrong.
30446
31094
  * - `label`: The question, over the boxes.
31095
+ *
31096
+ * ## CSS States
31097
+ *
31098
+ * These can be used to apply styling when a component is in a given state.
31099
+ *
31100
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
31101
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30447
31102
  */
30448
31103
  "helix-pin-input": Partial<
30449
31104
  HelixPinInputProps & BaseProps<HelixPinInput> & BaseEvents<HelixPinInput>
@@ -30558,6 +31213,13 @@ export type CustomElements = {
30558
31213
  *
30559
31214
  * - `content`: The scrolling region inside the panel.
30560
31215
  * - `popover`: The panel.
31216
+ *
31217
+ * ## CSS States
31218
+ *
31219
+ * These can be used to apply styling when a component is in a given state.
31220
+ *
31221
+ * - `open`: While the popover is open.
31222
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30561
31223
  */
30562
31224
  "helix-popover": Partial<
30563
31225
  HelixPopoverProps & BaseProps<HelixPopover> & BaseEvents<HelixPopover>
@@ -30674,6 +31336,12 @@ export type CustomElements = {
30674
31336
  * - `indicator`: The part of it that is done.
30675
31337
  * - `track`: The full length the work is measured against.
30676
31338
  * - `value`: The reading beside the bar, under `show-value`.
31339
+ *
31340
+ * ## CSS States
31341
+ *
31342
+ * These can be used to apply styling when a component is in a given state.
31343
+ *
31344
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30677
31345
  */
30678
31346
  "helix-progress": Partial<
30679
31347
  HelixProgressProps & BaseProps<HelixProgress> & BaseEvents<HelixProgress>
@@ -30760,6 +31428,12 @@ export type CustomElements = {
30760
31428
  * - `finders`: The three corner squares, which can take their own color.
30761
31429
  * - `logo`: The box holding the center mark.
30762
31430
  * - `modules`: Everything but the three corner squares.
31431
+ *
31432
+ * ## CSS States
31433
+ *
31434
+ * These can be used to apply styling when a component is in a given state.
31435
+ *
31436
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30763
31437
  */
30764
31438
  "helix-qr-code": Partial<
30765
31439
  HelixQrCodeProps & BaseProps<HelixQrCode> & BaseEvents<HelixQrCode>
@@ -30810,6 +31484,12 @@ export type CustomElements = {
30810
31484
  * Custom selectors for styling elements within the component.
30811
31485
  *
30812
31486
  * - `quote`: The quotation.
31487
+ *
31488
+ * ## CSS States
31489
+ *
31490
+ * These can be used to apply styling when a component is in a given state.
31491
+ *
31492
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30813
31493
  */
30814
31494
  "helix-quote": Partial<HelixQuoteProps & BaseProps<HelixQuote> & BaseEvents<HelixQuote>>;
30815
31495
 
@@ -30974,6 +31654,13 @@ export type CustomElements = {
30974
31654
  * - `hint`: Help under the set.
30975
31655
  * - `items`: The choices, which is what `orientation` lays out.
30976
31656
  * - `label`: The question, over the set.
31657
+ *
31658
+ * ## CSS States
31659
+ *
31660
+ * These can be used to apply styling when a component is in a given state.
31661
+ *
31662
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
31663
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30977
31664
  */
30978
31665
  "helix-radio-group": Partial<
30979
31666
  HelixRadioGroupProps & BaseProps<HelixRadioGroup> & BaseEvents<HelixRadioGroup>
@@ -31101,6 +31788,13 @@ export type CustomElements = {
31101
31788
  * - `item`: The button, which is the whole row.
31102
31789
  * - `label`: The words beside it.
31103
31790
  * - `mark`: The dot inside it.
31791
+ *
31792
+ * ## CSS States
31793
+ *
31794
+ * These can be used to apply styling when a component is in a given state.
31795
+ *
31796
+ * - `selected`: While it is the one chosen.
31797
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31104
31798
  */
31105
31799
  "helix-radio": Partial<HelixRadioProps & BaseProps<HelixRadio> & BaseEvents<HelixRadio>>;
31106
31800
 
@@ -31317,6 +32011,13 @@ export type CustomElements = {
31317
32011
  * - `option`: One place a reader can press, which is one step.
31318
32012
  * - `track`: The unfilled marks.
31319
32013
  * - `value`: The score written out, under `show-value`.
32014
+ *
32015
+ * ## CSS States
32016
+ *
32017
+ * These can be used to apply styling when a component is in a given state.
32018
+ *
32019
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
32020
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31320
32021
  */
31321
32022
  "helix-rating": Partial<
31322
32023
  HelixRatingProps & BaseProps<HelixRating> & BaseEvents<HelixRating>
@@ -31410,6 +32111,12 @@ export type CustomElements = {
31410
32111
  * Custom selectors for styling elements within the component.
31411
32112
  *
31412
32113
  * - `frame`: The iframe.
32114
+ *
32115
+ * ## CSS States
32116
+ *
32117
+ * These can be used to apply styling when a component is in a given state.
32118
+ *
32119
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31413
32120
  */
31414
32121
  "helix-sandbox-preview": Partial<
31415
32122
  HelixSandboxPreviewProps & BaseProps<HelixSandboxPreview> & BaseEvents<HelixSandboxPreview>
@@ -31533,6 +32240,12 @@ export type CustomElements = {
31533
32240
  * - `panel`: The box holding whatever was slotted as the panel.
31534
32241
  * - `panes`: The splitter holding the source and preview panes.
31535
32242
  * - `separator`: Either divider.
32243
+ *
32244
+ * ## CSS States
32245
+ *
32246
+ * These can be used to apply styling when a component is in a given state.
32247
+ *
32248
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31536
32249
  */
31537
32250
  "helix-sandbox": Partial<
31538
32251
  HelixSandboxProps & BaseProps<HelixSandbox> & BaseEvents<HelixSandbox>
@@ -31599,6 +32312,12 @@ export type CustomElements = {
31599
32312
  * Custom selectors for styling elements within the component.
31600
32313
  *
31601
32314
  * - `source`: The editable region.
32315
+ *
32316
+ * ## CSS States
32317
+ *
32318
+ * These can be used to apply styling when a component is in a given state.
32319
+ *
32320
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31602
32321
  */
31603
32322
  "helix-sandbox-source": Partial<
31604
32323
  HelixSandboxSourceProps & BaseProps<HelixSandboxSource> & BaseEvents<HelixSandboxSource>
@@ -31667,6 +32386,12 @@ export type CustomElements = {
31667
32386
  *
31668
32387
  * - `caret`: The line and column readout.
31669
32388
  * - `language`: The language readout.
32389
+ *
32390
+ * ## CSS States
32391
+ *
32392
+ * These can be used to apply styling when a component is in a given state.
32393
+ *
32394
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31670
32395
  */
31671
32396
  "helix-sandbox-status-bar": Partial<
31672
32397
  HelixSandboxStatusBarProps & BaseProps<HelixSandboxStatusBar> & BaseEvents<HelixSandboxStatusBar>
@@ -31738,6 +32463,12 @@ export type CustomElements = {
31738
32463
  * - `level`: The level a line came in at.
31739
32464
  * - `log`: The scrolling region.
31740
32465
  * - `message`: The text of a line.
32466
+ *
32467
+ * ## CSS States
32468
+ *
32469
+ * These can be used to apply styling when a component is in a given state.
32470
+ *
32471
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31741
32472
  */
31742
32473
  "helix-sandbox-terminal": Partial<
31743
32474
  HelixSandboxTerminalProps & BaseProps<HelixSandboxTerminal> & BaseEvents<HelixSandboxTerminal>
@@ -31791,6 +32522,12 @@ export type CustomElements = {
31791
32522
  *
31792
32523
  * - `--sandbox-toolbar-gap`: Space between items. (default: `undefined`)
31793
32524
  * - `--sandbox-toolbar-size`: The bar's height. Defaults to a large control. (default: `undefined`)
32525
+ *
32526
+ * ## CSS States
32527
+ *
32528
+ * These can be used to apply styling when a component is in a given state.
32529
+ *
32530
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31794
32531
  */
31795
32532
  "helix-sandbox-toolbar": Partial<
31796
32533
  HelixSandboxToolbarProps & BaseProps<HelixSandboxToolbar> & BaseEvents<HelixSandboxToolbar>
@@ -31898,10 +32635,12 @@ export type CustomElements = {
31898
32635
  * - `mark`: The invisible point the tooltip is anchored to.
31899
32636
  * - `plot`: The drawing.
31900
32637
  * - `point`: One row, as a point.
32638
+ * - `point-active`: A point of the row a pointer is asking about, beside `point`.
31901
32639
  * - `summary`: How strongly the measures relate, for a reader who cannot see the points.
31902
32640
  * - `svg`: The drawing surface the rules sit on.
31903
32641
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
31904
32642
  * - `tooltip-anchor`: The `Tooltip` element itself.
32643
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
31905
32644
  * - `tooltip-cell`: One column's name and value inside the tooltip.
31906
32645
  * - `tooltip-label`: The row's own name inside the tooltip.
31907
32646
  * - `tooltip-name`: A column's name inside the tooltip.
@@ -31912,6 +32651,12 @@ export type CustomElements = {
31912
32651
  * - `y-axis`: The levels measured up, beside the plot.
31913
32652
  * - `y-name`: What is measured up.
31914
32653
  * - `y-tick`: One labeled level up.
32654
+ *
32655
+ * ## CSS States
32656
+ *
32657
+ * These can be used to apply styling when a component is in a given state.
32658
+ *
32659
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31915
32660
  */
31916
32661
  "helix-scatter-chart": Partial<
31917
32662
  HelixScatterChartProps & BaseProps<HelixScatterChart> & BaseEvents<HelixScatterChart>
@@ -31984,6 +32729,17 @@ export type CustomElements = {
31984
32729
  *
31985
32730
  * - `edges`: Where the sideways edge cues are drawn.
31986
32731
  * - `viewport`: The scrolling box.
32732
+ *
32733
+ * ## CSS States
32734
+ *
32735
+ * These can be used to apply styling when a component is in a given state.
32736
+ *
32737
+ * - `more-block-end`: While there is more to scroll to past the block end.
32738
+ * - `more-block-start`: While there is more to scroll back to before the block start.
32739
+ * - `more-inline-end`: While there is more to scroll to past the inline end.
32740
+ * - `more-inline-start`: While there is more to scroll back to before the inline start.
32741
+ * - `scrolls`: While the content is larger than the viewport, on either axis.
32742
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
31987
32743
  */
31988
32744
  "helix-scroll-area": Partial<
31989
32745
  HelixScrollAreaProps & BaseProps<HelixScrollArea> & BaseEvents<HelixScrollArea>
@@ -32236,6 +32992,14 @@ export type CustomElements = {
32236
32992
  * - `surface`: The floating panel.
32237
32993
  * - `trigger`: The closed control, which says what is chosen.
32238
32994
  * - `value`: The chosen option's text inside the trigger.
32995
+ *
32996
+ * ## CSS States
32997
+ *
32998
+ * These can be used to apply styling when a component is in a given state.
32999
+ *
33000
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
33001
+ * - `open`: While the list is open.
33002
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32239
33003
  */
32240
33004
  "helix-select": Partial<
32241
33005
  HelixSelectProps & BaseProps<HelixSelect> & BaseEvents<HelixSelect>
@@ -32283,6 +33047,12 @@ export type CustomElements = {
32283
33047
  * Custom selectors for styling elements within the component.
32284
33048
  *
32285
33049
  * - `skeleton`: The placeholder surface.
33050
+ *
33051
+ * ## CSS States
33052
+ *
33053
+ * These can be used to apply styling when a component is in a given state.
33054
+ *
33055
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32286
33056
  */
32287
33057
  "helix-skeleton": Partial<
32288
33058
  HelixSkeletonProps & BaseProps<HelixSkeleton> & BaseEvents<HelixSkeleton>
@@ -32355,6 +33125,12 @@ export type CustomElements = {
32355
33125
  * Custom selectors for styling elements within the component.
32356
33126
  *
32357
33127
  * - `link`: The anchor, which is what takes focus.
33128
+ *
33129
+ * ## CSS States
33130
+ *
33131
+ * These can be used to apply styling when a component is in a given state.
33132
+ *
33133
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32358
33134
  */
32359
33135
  "helix-skip-link": Partial<
32360
33136
  HelixSkipLinkProps & BaseProps<HelixSkipLink> & BaseEvents<HelixSkipLink>
@@ -32561,6 +33337,13 @@ export type CustomElements = {
32561
33337
  * - `marker-label`: The value a mark stands at, when `marker-labels` is set.
32562
33338
  * - `markers`: The row of marks along the track.
32563
33339
  * - `output`: The current value, shown beside it.
33340
+ *
33341
+ * ## CSS States
33342
+ *
33343
+ * These can be used to apply styling when a component is in a given state.
33344
+ *
33345
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
33346
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32564
33347
  */
32565
33348
  "helix-slider": Partial<
32566
33349
  HelixSliderProps & BaseProps<HelixSlider> & BaseEvents<HelixSlider>
@@ -32756,6 +33539,12 @@ export type CustomElements = {
32756
33539
  * - `terminus`: The mark on the last value.
32757
33540
  * - `wash-end`: The far stop of the area's gradient.
32758
33541
  * - `wash-start`: The stop of the area's gradient that meets the line.
33542
+ *
33543
+ * ## CSS States
33544
+ *
33545
+ * These can be used to apply styling when a component is in a given state.
33546
+ *
33547
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32759
33548
  */
32760
33549
  "helix-sparkline": Partial<
32761
33550
  HelixSparklineProps & BaseProps<HelixSparkline> & BaseEvents<HelixSparkline>
@@ -32831,6 +33620,12 @@ export type CustomElements = {
32831
33620
  * - `icon`: The mark's box.
32832
33621
  * - `item`: The control.
32833
33622
  * - `label`: The name beside it.
33623
+ *
33624
+ * ## CSS States
33625
+ *
33626
+ * These can be used to apply styling when a component is in a given state.
33627
+ *
33628
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32834
33629
  */
32835
33630
  "helix-speed-dial-item": Partial<
32836
33631
  HelixSpeedDialItemProps & BaseProps<HelixSpeedDialItem> & BaseEvents<HelixSpeedDialItem>
@@ -32924,6 +33719,13 @@ export type CustomElements = {
32924
33719
  *
32925
33720
  * - `actions`: The region the actions are drawn in.
32926
33721
  * - `trigger`: The default trigger, where none was slotted.
33722
+ *
33723
+ * ## CSS States
33724
+ *
33725
+ * These can be used to apply styling when a component is in a given state.
33726
+ *
33727
+ * - `open`: While the actions are out.
33728
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
32927
33729
  */
32928
33730
  "helix-speed-dial": Partial<
32929
33731
  HelixSpeedDialProps & BaseProps<HelixSpeedDial> & BaseEvents<HelixSpeedDial>
@@ -33124,6 +33926,12 @@ export type CustomElements = {
33124
33926
  * - `end`: The box holding the second.
33125
33927
  * - `separator`: The divider itself.
33126
33928
  * - `start`: The box holding the first pane.
33929
+ *
33930
+ * ## CSS States
33931
+ *
33932
+ * These can be used to apply styling when a component is in a given state.
33933
+ *
33934
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33127
33935
  */
33128
33936
  "helix-splitter": Partial<
33129
33937
  HelixSplitterProps & BaseProps<HelixSplitter> & BaseEvents<HelixSplitter>
@@ -33171,6 +33979,12 @@ export type CustomElements = {
33171
33979
  * CSS variables available for styling the component.
33172
33980
  *
33173
33981
  * - `--stat-group-gap`: Space between figures. (default: `undefined`)
33982
+ *
33983
+ * ## CSS States
33984
+ *
33985
+ * These can be used to apply styling when a component is in a given state.
33986
+ *
33987
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33174
33988
  */
33175
33989
  "helix-stat-group": Partial<
33176
33990
  HelixStatGroupProps & BaseProps<HelixStatGroup> & BaseEvents<HelixStatGroup>
@@ -33239,6 +34053,12 @@ export type CustomElements = {
33239
34053
  * CSS variables available for styling the component.
33240
34054
  *
33241
34055
  * - `--stat-value-size`: Size of the figure. (default: `undefined`)
34056
+ *
34057
+ * ## CSS States
34058
+ *
34059
+ * These can be used to apply styling when a component is in a given state.
34060
+ *
34061
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33242
34062
  */
33243
34063
  "helix-stat": Partial<HelixStatProps & BaseProps<HelixStat> & BaseEvents<HelixStat>>;
33244
34064
 
@@ -33348,6 +34168,12 @@ export type CustomElements = {
33348
34168
  * - `--steps-current-color`: The mark on the current step. (default: `undefined`)
33349
34169
  * - `--steps-gap`: Space between one step and the next. (default: `undefined`)
33350
34170
  * - `--steps-marker-size`: Size of the mark, glyph or digit. (default: `undefined`)
34171
+ *
34172
+ * ## CSS States
34173
+ *
34174
+ * These can be used to apply styling when a component is in a given state.
34175
+ *
34176
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33351
34177
  */
33352
34178
  "helix-steps": Partial<HelixStepsProps & BaseProps<HelixSteps> & BaseEvents<HelixSteps>>;
33353
34179
 
@@ -33415,6 +34241,12 @@ export type CustomElements = {
33415
34241
  * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
33416
34242
  * - `marker`: The shape carrying the number or the check.
33417
34243
  * - `trail`: The half line running on to the next.
34244
+ *
34245
+ * ## CSS States
34246
+ *
34247
+ * These can be used to apply styling when a component is in a given state.
34248
+ *
34249
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33418
34250
  */
33419
34251
  "helix-step": Partial<HelixStepProps & BaseProps<HelixStep> & BaseEvents<HelixStep>>;
33420
34252
 
@@ -33594,6 +34426,14 @@ export type CustomElements = {
33594
34426
  * - `label`: The words beside it.
33595
34427
  * - `thumb`: The part that moves.
33596
34428
  * - `track`: The groove the thumb travels in.
34429
+ *
34430
+ * ## CSS States
34431
+ *
34432
+ * These can be used to apply styling when a component is in a given state.
34433
+ *
34434
+ * - `checked`: While it is on.
34435
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
34436
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33597
34437
  */
33598
34438
  "helix-switch": Partial<
33599
34439
  HelixSwitchProps & BaseProps<HelixSwitch> & BaseEvents<HelixSwitch>
@@ -33634,6 +34474,12 @@ export type CustomElements = {
33634
34474
  * Areas where markup can be added to the component.
33635
34475
  *
33636
34476
  * - `(default)`: The cell's content.
34477
+ *
34478
+ * ## CSS States
34479
+ *
34480
+ * These can be used to apply styling when a component is in a given state.
34481
+ *
34482
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33637
34483
  */
33638
34484
  "helix-table-cell": Partial<
33639
34485
  HelixTableCellProps & BaseProps<HelixTableCell> & BaseEvents<HelixTableCell>
@@ -33652,7 +34498,18 @@ export type CustomElements = {
33652
34498
  *
33653
34499
  * `end` is what a column of numbers wants, so digits of the same magnitude sit
33654
34500
  * above each other. Left unset the cell inherits the table's own alignment,
33655
- * which is `start` for text in either writing direction.
34501
+ * which is `start` for text in either writing direction. `helix-data-table`
34502
+ * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
34503
+ * wrote, and align as the consumer styles them. The heading is this element's
34504
+ * own, and `@fusion.dev/helix` sets it to the same edge in either table.
34505
+ *
34506
+ * **Reflected, because the heading is drawn by a stylesheet and has no other
34507
+ * way to learn it.** Set as a property, which is how React sets it, an
34508
+ * unreflected `align` left no attribute to select on, so the heading stayed at
34509
+ * the start over a column of digits set to the end. It is the author's
34510
+ * declaration and nothing moves it afterwards, so an attribute cannot come to
34511
+ * disagree with the element, which is the reason `open` records a custom
34512
+ * state instead. No default, so an unset column writes nothing onto its host.
33656
34513
  * - `field`: The key this column reads out of a row.
33657
34514
  *
33658
34515
  * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -33764,6 +34621,14 @@ export type CustomElements = {
33764
34621
  * - `grip-mark`: The glyph on it.
33765
34622
  * - `resizer`: The edge a reader drags to change the width, where the column allows it.
33766
34623
  * - `sort`: The button a sortable heading is.
34624
+ *
34625
+ * ## CSS States
34626
+ *
34627
+ * These can be used to apply styling when a component is in a given state.
34628
+ *
34629
+ * - `sorted-ascending`: While the table is sorted by this column, smallest first.
34630
+ * - `sorted-descending`: While the table is sorted by this column, largest first.
34631
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33767
34632
  */
33768
34633
  "helix-table-column": Partial<
33769
34634
  HelixTableColumnProps & BaseProps<HelixTableColumn> & BaseEvents<HelixTableColumn>
@@ -33836,6 +34701,12 @@ export type CustomElements = {
33836
34701
  * - `empty`: Shown when there are no rows to show.
33837
34702
  * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
33838
34703
  * - `loading`: Shown while the rows are still on their way.
34704
+ *
34705
+ * ## CSS States
34706
+ *
34707
+ * These can be used to apply styling when a component is in a given state.
34708
+ *
34709
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33839
34710
  */
33840
34711
  "helix-table": Partial<HelixTableProps & BaseProps<HelixTable> & BaseEvents<HelixTable>>;
33841
34712
 
@@ -33873,6 +34744,12 @@ export type CustomElements = {
33873
34744
  * Areas where markup can be added to the component.
33874
34745
  *
33875
34746
  * - `(default)`: The row's cells.
34747
+ *
34748
+ * ## CSS States
34749
+ *
34750
+ * These can be used to apply styling when a component is in a given state.
34751
+ *
34752
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33876
34753
  */
33877
34754
  "helix-table-row": Partial<
33878
34755
  HelixTableRowProps & BaseProps<HelixTableRow> & BaseEvents<HelixTableRow>
@@ -33930,6 +34807,13 @@ export type CustomElements = {
33930
34807
  * Custom selectors for styling elements within the component.
33931
34808
  *
33932
34809
  * - `panel`: The panel container.
34810
+ *
34811
+ * ## CSS States
34812
+ *
34813
+ * These can be used to apply styling when a component is in a given state.
34814
+ *
34815
+ * - `selected`: While its tab is the one selected.
34816
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
33933
34817
  */
33934
34818
  "helix-tab-panel": Partial<
33935
34819
  HelixTabPanelProps & BaseProps<HelixTabPanel> & BaseEvents<HelixTabPanel>
@@ -34029,6 +34913,12 @@ export type CustomElements = {
34029
34913
  * - `panels`: The panel container.
34030
34914
  * - `tabs`: The tab list.
34031
34915
  * - `indicator`: The mark that travels to the selected tab.
34916
+ *
34917
+ * ## CSS States
34918
+ *
34919
+ * These can be used to apply styling when a component is in a given state.
34920
+ *
34921
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34032
34922
  */
34033
34923
  "helix-tabs": Partial<HelixTabsProps & BaseProps<HelixTabs> & BaseEvents<HelixTabs>>;
34034
34924
 
@@ -34088,6 +34978,13 @@ export type CustomElements = {
34088
34978
  * Custom selectors for styling elements within the component.
34089
34979
  *
34090
34980
  * - `tab`: The tab itself.
34981
+ *
34982
+ * ## CSS States
34983
+ *
34984
+ * These can be used to apply styling when a component is in a given state.
34985
+ *
34986
+ * - `selected`: While it is the tab selected.
34987
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34091
34988
  */
34092
34989
  "helix-tab": Partial<HelixTabProps & BaseProps<HelixTab> & BaseEvents<HelixTab>>;
34093
34990
 
@@ -34187,6 +35084,12 @@ export type CustomElements = {
34187
35084
  * - `dismiss`: The remove button, when `dismissible`.
34188
35085
  * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
34189
35086
  * - `prefix`: The category before the label.
35087
+ *
35088
+ * ## CSS States
35089
+ *
35090
+ * These can be used to apply styling when a component is in a given state.
35091
+ *
35092
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34190
35093
  */
34191
35094
  "helix-tag": Partial<HelixTagProps & BaseProps<HelixTag> & BaseEvents<HelixTag>>;
34192
35095
 
@@ -34283,6 +35186,12 @@ export type CustomElements = {
34283
35186
  * Custom selectors for styling elements within the component.
34284
35187
  *
34285
35188
  * - `text`: The rendered element.
35189
+ *
35190
+ * ## CSS States
35191
+ *
35192
+ * These can be used to apply styling when a component is in a given state.
35193
+ *
35194
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34286
35195
  */
34287
35196
  "helix-text": Partial<HelixTextProps & BaseProps<HelixText> & BaseEvents<HelixText>>;
34288
35197
 
@@ -34487,6 +35396,13 @@ export type CustomElements = {
34487
35396
  * - `field`: The box holding the control.
34488
35397
  * - `hint`: Help under the field, while nothing is wrong.
34489
35398
  * - `label`: The question, over the field.
35399
+ *
35400
+ * ## CSS States
35401
+ *
35402
+ * These can be used to apply styling when a component is in a given state.
35403
+ *
35404
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
35405
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34490
35406
  */
34491
35407
  "helix-textarea": Partial<
34492
35408
  HelixTextareaProps & BaseProps<HelixTextarea> & BaseEvents<HelixTextarea>
@@ -34756,8 +35672,11 @@ export type CustomElements = {
34756
35672
  * - `picker-list-search`: The region holding the field that narrows the list.
34757
35673
  * - `picker-list-search-field`: The field itself.
34758
35674
  * - `picker-option`: One time in it. Carries `data-between` inside a range.
35675
+ * - `picker-option-between`: A time inside a chosen range, short of either end, beside `picker-option`.
34759
35676
  * - `picker-option-description`: The caption under the words, when there is one.
34760
35677
  * - `picker-option-item`: The row.
35678
+ * - `picker-option-item-active`: The row the keyboard is on.
35679
+ * - `picker-option-item-selected`: The row of a chosen time: the one time, or either end of a range.
34761
35680
  * - `picker-option-label`: The words.
34762
35681
  * - `picker-option-text`: The words and the caption, as one column.
34763
35682
  * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -34769,6 +35688,14 @@ export type CustomElements = {
34769
35688
  * - `time-prefix`: The category before the label.
34770
35689
  * - `trigger`: The control that opens the list.
34771
35690
  * - `trigger-icon`: The mark on the button that opens the clock.
35691
+ *
35692
+ * ## CSS States
35693
+ *
35694
+ * These can be used to apply styling when a component is in a given state.
35695
+ *
35696
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
35697
+ * - `open`: While the clock is open.
35698
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
34772
35699
  */
34773
35700
  "helix-time-input": Partial<
34774
35701
  HelixTimeInputProps & BaseProps<HelixTimeInput> & BaseEvents<HelixTimeInput>
@@ -34958,15 +35885,22 @@ export type CustomElements = {
34958
35885
  * Falling back to `defaultValue` rather than to empty, because a restore
34959
35886
  * with no state is a form the browser has nothing recorded for, which is
34960
35887
  * the same situation as a fresh one.
34961
- * - `reveal() => void`: Each wheel comes to rest on its own answer.
35888
+ * - `reveal() => void`: Each wheel comes to rest on its own answer, and the list on the time it
35889
+ * holds.
34962
35890
  *
34963
35891
  * A dial that opens at midnight when it holds ten in the evening is a dial
34964
35892
  * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
34965
35893
  * snap point when something scrolls, and nothing has. Measured before this,
34966
- * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
35894
+ * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
35895
+ * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
35896
+ * 38 rows down and out of sight, flat on a page and in every Time Input panel.
35897
+ * A list holding several, a range or a set, is left where it is, having no
35898
+ * one row to come to rest on.
34967
35899
  *
34968
- * On every update rather than on the first, because the columns re-render as
34969
- * the value moves and the minute column's contents change with the hour.
35900
+ * The wheels on every update, because the columns re-render as the value
35901
+ * moves and the minute column's contents change with the hour. The list on
35902
+ * the first only, where it is flat on a page: centering it on every choice
35903
+ * would move the row out from under the pointer that chose it.
34970
35904
  *
34971
35905
  * **And it is public, because an update is not the only moment that matters.**
34972
35906
  * Inside a panel this element renders while the panel is still
@@ -35048,10 +35982,19 @@ export type CustomElements = {
35048
35982
  * - `list-search`: The region holding the field that narrows the list.
35049
35983
  * - `list-search-field`: The field itself.
35050
35984
  * - `option`: One time in it. Carries `data-between` inside a range.
35985
+ * - `option-between`: A time inside a chosen range, short of either end, beside `option`.
35051
35986
  * - `option-description`: The caption under the words, when there is one.
35052
35987
  * - `option-item`: The row.
35988
+ * - `option-item-active`: The row the keyboard is on.
35989
+ * - `option-item-selected`: The row of a chosen time: the one time, or either end of a range.
35053
35990
  * - `option-label`: The words.
35054
35991
  * - `option-text`: The words and the caption, as one column.
35992
+ *
35993
+ * ## CSS States
35994
+ *
35995
+ * These can be used to apply styling when a component is in a given state.
35996
+ *
35997
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35055
35998
  */
35056
35999
  "helix-time-picker": Partial<
35057
36000
  HelixTimePickerProps & BaseProps<HelixTimePicker> & BaseEvents<HelixTimePicker>
@@ -35116,6 +36059,12 @@ export type CustomElements = {
35116
36059
  * - `marker`: The mark on the line.
35117
36060
  * - `rail`: The column holding the mark and the line.
35118
36061
  * - `time`: When it happened.
36062
+ *
36063
+ * ## CSS States
36064
+ *
36065
+ * These can be used to apply styling when a component is in a given state.
36066
+ *
36067
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35119
36068
  */
35120
36069
  "helix-timeline-item": Partial<
35121
36070
  HelixTimelineItemProps & BaseProps<HelixTimelineItem> & BaseEvents<HelixTimelineItem>
@@ -35160,6 +36109,12 @@ export type CustomElements = {
35160
36109
  * CSS variables available for styling the component.
35161
36110
  *
35162
36111
  * - `--timeline-gap`: Space between one entry and the next. (default: `undefined`)
36112
+ *
36113
+ * ## CSS States
36114
+ *
36115
+ * These can be used to apply styling when a component is in a given state.
36116
+ *
36117
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35163
36118
  */
35164
36119
  "helix-timeline": Partial<
35165
36120
  HelixTimelineProps & BaseProps<HelixTimeline> & BaseEvents<HelixTimeline>
@@ -35264,6 +36219,12 @@ export type CustomElements = {
35264
36219
  * - `icon-mark`: The tone glyph, where none is slotted.
35265
36220
  * - `item`: The message's own surface.
35266
36221
  * - `timer`: The bar showing how long is left, where a duration was given.
36222
+ *
36223
+ * ## CSS States
36224
+ *
36225
+ * These can be used to apply styling when a component is in a given state.
36226
+ *
36227
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35267
36228
  */
35268
36229
  "helix-toast-item": Partial<
35269
36230
  HelixToastItemProps & BaseProps<HelixToastItem> & BaseEvents<HelixToastItem>
@@ -35344,6 +36305,12 @@ export type CustomElements = {
35344
36305
  * Custom selectors for styling elements within the component.
35345
36306
  *
35346
36307
  * - `region`: The stack the messages are in.
36308
+ *
36309
+ * ## CSS States
36310
+ *
36311
+ * These can be used to apply styling when a component is in a given state.
36312
+ *
36313
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35347
36314
  */
35348
36315
  "helix-toast": Partial<HelixToastProps & BaseProps<HelixToast> & BaseEvents<HelixToast>>;
35349
36316
 
@@ -35527,6 +36494,13 @@ export type CustomElements = {
35527
36494
  * - `label`: The question, over the row.
35528
36495
  * - `row`: The line the track sits on, with whatever flanks it.
35529
36496
  * - `track`: The bar the items sit in.
36497
+ *
36498
+ * ## CSS States
36499
+ *
36500
+ * These can be used to apply styling when a component is in a given state.
36501
+ *
36502
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
36503
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35530
36504
  */
35531
36505
  "helix-toggle-group": Partial<
35532
36506
  HelixToggleGroupProps & BaseProps<HelixToggleGroup> & BaseEvents<HelixToggleGroup>
@@ -35610,6 +36584,13 @@ export type CustomElements = {
35610
36584
  * Custom selectors for styling elements within the component.
35611
36585
  *
35612
36586
  * - `item`: The button or anchor.
36587
+ *
36588
+ * ## CSS States
36589
+ *
36590
+ * These can be used to apply styling when a component is in a given state.
36591
+ *
36592
+ * - `selected`: While it is on.
36593
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35613
36594
  */
35614
36595
  "helix-toggle": Partial<
35615
36596
  HelixToggleProps & BaseProps<HelixToggle> & BaseEvents<HelixToggle>
@@ -35661,6 +36642,12 @@ export type CustomElements = {
35661
36642
  * Custom selectors for styling elements within the component.
35662
36643
  *
35663
36644
  * - `toolbar`: The toolbar container.
36645
+ *
36646
+ * ## CSS States
36647
+ *
36648
+ * These can be used to apply styling when a component is in a given state.
36649
+ *
36650
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35664
36651
  */
35665
36652
  "helix-toolbar": Partial<
35666
36653
  HelixToolbarProps & BaseProps<HelixToolbar> & BaseEvents<HelixToolbar>
@@ -35858,6 +36845,13 @@ export type CustomElements = {
35858
36845
  *
35859
36846
  * - `arrow`: The point, resting against the trigger.
35860
36847
  * - `tooltip`: The bubble.
36848
+ *
36849
+ * ## CSS States
36850
+ *
36851
+ * These can be used to apply styling when a component is in a given state.
36852
+ *
36853
+ * - `open`: While the tooltip shows.
36854
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35861
36855
  */
35862
36856
  "helix-tooltip": Partial<
35863
36857
  HelixTooltipProps & BaseProps<HelixTooltip> & BaseEvents<HelixTooltip>
@@ -35949,6 +36943,12 @@ export type CustomElements = {
35949
36943
  * Custom selectors for styling elements within the component.
35950
36944
  *
35951
36945
  * - `spotlight`: The box over the current target, which paints the scrim.
36946
+ *
36947
+ * ## CSS States
36948
+ *
36949
+ * These can be used to apply styling when a component is in a given state.
36950
+ *
36951
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
35952
36952
  */
35953
36953
  "helix-tour": Partial<HelixTourProps & BaseProps<HelixTour> & BaseEvents<HelixTour>>;
35954
36954
 
@@ -36033,6 +37033,16 @@ export type CustomElements = {
36033
37033
  * - `next-button`: The inner control.
36034
37034
  * - `skip`: The control that leaves the tour.
36035
37035
  * - `skip-button`: The inner control.
37036
+ *
37037
+ * ## CSS States
37038
+ *
37039
+ * These can be used to apply styling when a component is in a given state.
37040
+ *
37041
+ * - `placed-bottom`: While the panel sits below its target.
37042
+ * - `placed-left`: While the panel sits to the left of its target.
37043
+ * - `placed-right`: While the panel sits to the right of its target.
37044
+ * - `placed-top`: While the panel sits above its target.
37045
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36036
37046
  */
36037
37047
  "helix-tour-stop": Partial<
36038
37048
  HelixTourStopProps & BaseProps<HelixTourStop> & BaseEvents<HelixTourStop>
@@ -36176,6 +37186,14 @@ export type CustomElements = {
36176
37186
  * - `label`: The label text.
36177
37187
  * - `row`: The clickable label row.
36178
37188
  * - `toggle`: The expand and collapse control.
37189
+ *
37190
+ * ## CSS States
37191
+ *
37192
+ * These can be used to apply styling when a component is in a given state.
37193
+ *
37194
+ * - `open`: While its children are shown.
37195
+ * - `selected`: While it is selected.
37196
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36179
37197
  */
36180
37198
  "helix-tree-item": Partial<
36181
37199
  HelixTreeItemProps & BaseProps<HelixTreeItem> & BaseEvents<HelixTreeItem>
@@ -36294,6 +37312,12 @@ export type CustomElements = {
36294
37312
  * - `tree`: The tree container.
36295
37313
  * - `empty`: Shown when there are no rows to show.
36296
37314
  * - `loading`: Shown while the rows are still on their way.
37315
+ *
37316
+ * ## CSS States
37317
+ *
37318
+ * These can be used to apply styling when a component is in a given state.
37319
+ *
37320
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36297
37321
  */
36298
37322
  "helix-tree": Partial<HelixTreeProps & BaseProps<HelixTree> & BaseEvents<HelixTree>>;
36299
37323
 
@@ -36375,6 +37399,12 @@ export type CustomElements = {
36375
37399
  *
36376
37400
  * - `direction`: The direction as a word, for readers who are not looking.
36377
37401
  * - `icon`: The arrow.
37402
+ *
37403
+ * ## CSS States
37404
+ *
37405
+ * These can be used to apply styling when a component is in a given state.
37406
+ *
37407
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36378
37408
  */
36379
37409
  "helix-trend": Partial<HelixTrendProps & BaseProps<HelixTrend> & BaseEvents<HelixTrend>>;
36380
37410
 
@@ -36456,9 +37486,16 @@ export type CustomElements = {
36456
37486
  *
36457
37487
  * - `container`: The `listitem`, which the button sits in.
36458
37488
  * - `item`: The row, which is a button.
37489
+ * - `item-current`: The row of the entry the player is on, beside `item`.
36459
37490
  * - `label`: The name and whatever follows it.
36460
37491
  * - `media`: The leading column.
36461
37492
  * - `thumbnail`: The image `poster` falls back to.
37493
+ *
37494
+ * ## CSS States
37495
+ *
37496
+ * These can be used to apply styling when a component is in a given state.
37497
+ *
37498
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36462
37499
  */
36463
37500
  "helix-video-playlist-item": Partial<
36464
37501
  HelixVideoPlaylistItemProps & BaseProps<HelixVideoPlaylistItem> & BaseEvents<HelixVideoPlaylistItem>
@@ -36550,6 +37587,12 @@ export type CustomElements = {
36550
37587
  * - `menu-title`: The name of the submenu that is showing.
36551
37588
  * - `poster`: An entry's still, where it has one.
36552
37589
  * - `trigger`: The button that opens it.
37590
+ *
37591
+ * ## CSS States
37592
+ *
37593
+ * These can be used to apply styling when a component is in a given state.
37594
+ *
37595
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36553
37596
  */
36554
37597
  "helix-video-playlist-menu": Partial<
36555
37598
  HelixVideoPlaylistMenuProps & BaseProps<HelixVideoPlaylistMenu> & BaseEvents<HelixVideoPlaylistMenu>
@@ -36634,6 +37677,12 @@ export type CustomElements = {
36634
37677
  *
36635
37678
  * - `items`: The list of entries.
36636
37679
  * - `player`: The region holding the player.
37680
+ *
37681
+ * ## CSS States
37682
+ *
37683
+ * These can be used to apply styling when a component is in a given state.
37684
+ *
37685
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36637
37686
  */
36638
37687
  "helix-video-playlist": Partial<
36639
37688
  HelixVideoPlaylistProps & BaseProps<HelixVideoPlaylist> & BaseEvents<HelixVideoPlaylist>
@@ -36907,6 +37956,7 @@ export type CustomElements = {
36907
37956
  * - `poster`: What covers it before it plays.
36908
37957
  * - `previous`: Asks for the previous one.
36909
37958
  * - `remote`: Play on another device, where one is available.
37959
+ * - `remote-pressed`: The remote control while the picture is on another device, beside `remote`.
36910
37960
  * - `rewind`: The control that goes back ten seconds.
36911
37961
  * - `scrubber`: Where it is, and where to go.
36912
37962
  * - `sound`: The speaker and its level, which are one control.
@@ -36916,6 +37966,12 @@ export type CustomElements = {
36916
37966
  * - `time`: The position and the duration.
36917
37967
  * - `video`: The video itself.
36918
37968
  * - `volume`: How loud.
37969
+ *
37970
+ * ## CSS States
37971
+ *
37972
+ * These can be used to apply styling when a component is in a given state.
37973
+ *
37974
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36919
37975
  */
36920
37976
  "helix-video": Partial<HelixVideoProps & BaseProps<HelixVideo> & BaseEvents<HelixVideo>>;
36921
37977
 
@@ -36975,6 +38031,12 @@ export type CustomElements = {
36975
38031
  * - `after`: The space standing in for rows below the window.
36976
38032
  * - `before`: The space standing in for rows above the window.
36977
38033
  * - `viewport`: The scrolling box.
38034
+ *
38035
+ * ## CSS States
38036
+ *
38037
+ * These can be used to apply styling when a component is in a given state.
38038
+ *
38039
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
36978
38040
  */
36979
38041
  "helix-virtual-list": Partial<
36980
38042
  HelixVirtualListProps & BaseProps<HelixVirtualList> & BaseEvents<HelixVirtualList>
@@ -37099,6 +38161,13 @@ export type CustomElementsSolidJs = {
37099
38161
  * - `content`: The revealed region.
37100
38162
  * - `content-inner`: Padding wrapper inside the animated region.
37101
38163
  * - `trigger`: The clickable summary row.
38164
+ *
38165
+ * ## CSS States
38166
+ *
38167
+ * These can be used to apply styling when a component is in a given state.
38168
+ *
38169
+ * - `open`: While the item is open.
38170
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37102
38171
  */
37103
38172
  "helix-accordion-item": Partial<
37104
38173
  HelixAccordionItemProps &
@@ -37177,6 +38246,12 @@ export type CustomElementsSolidJs = {
37177
38246
  * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
37178
38247
  * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
37179
38248
  * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
38249
+ *
38250
+ * ## CSS States
38251
+ *
38252
+ * These can be used to apply styling when a component is in a given state.
38253
+ *
38254
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37180
38255
  */
37181
38256
  "helix-accordion": Partial<
37182
38257
  HelixAccordionProps &
@@ -37290,6 +38365,12 @@ export type CustomElementsSolidJs = {
37290
38365
  * - `content`: The message region.
37291
38366
  * - `dismiss`: The control that asks to close.
37292
38367
  * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
38368
+ *
38369
+ * ## CSS States
38370
+ *
38371
+ * These can be used to apply styling when a component is in a given state.
38372
+ *
38373
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37293
38374
  */
37294
38375
  "helix-announcement": Partial<
37295
38376
  HelixAnnouncementProps &
@@ -37429,6 +38510,13 @@ export type CustomElementsSolidJs = {
37429
38510
  * - `end`: The trailing region.
37430
38511
  * - `row`: The centered row inside the banner.
37431
38512
  * - `start`: The leading region.
38513
+ *
38514
+ * ## CSS States
38515
+ *
38516
+ * These can be used to apply styling when a component is in a given state.
38517
+ *
38518
+ * - `scrolled`: While the page is scrolled down from the top, which is when the bar lifts off it.
38519
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37432
38520
  */
37433
38521
  "helix-app-header": Partial<
37434
38522
  HelixAppHeaderProps &
@@ -37553,10 +38641,17 @@ export type CustomElementsSolidJs = {
37553
38641
  * - `svg`: The drawing surface the bands sit on.
37554
38642
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
37555
38643
  * - `tooltip-anchor`: The `Tooltip` element itself.
38644
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
37556
38645
  * - `tooltip-cell`: One column's name and value inside the tooltip.
37557
38646
  * - `tooltip-label`: The reading's own name inside the tooltip.
37558
38647
  * - `tooltip-name`: A column's name inside the tooltip.
37559
38648
  * - `tooltip-value`: A column's value inside the tooltip.
38649
+ *
38650
+ * ## CSS States
38651
+ *
38652
+ * These can be used to apply styling when a component is in a given state.
38653
+ *
38654
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37560
38655
  */
37561
38656
  "helix-area-chart": Partial<
37562
38657
  HelixAreaChartProps &
@@ -37699,6 +38794,12 @@ export type CustomElementsSolidJs = {
37699
38794
  * Custom selectors for styling elements within the component.
37700
38795
  *
37701
38796
  * - `canvas`: The surface the shader draws into.
38797
+ *
38798
+ * ## CSS States
38799
+ *
38800
+ * These can be used to apply styling when a component is in a given state.
38801
+ *
38802
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37702
38803
  */
37703
38804
  "helix-aura": Partial<
37704
38805
  HelixAuraProps & HelixAuraSolidJsProps & BaseProps<HelixAura> & BaseEvents<HelixAura>
@@ -37782,6 +38883,12 @@ export type CustomElementsSolidJs = {
37782
38883
  * Custom selectors for styling elements within the component.
37783
38884
  *
37784
38885
  * - `overflow`: The count of avatars past `max`.
38886
+ *
38887
+ * ## CSS States
38888
+ *
38889
+ * These can be used to apply styling when a component is in a given state.
38890
+ *
38891
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37785
38892
  */
37786
38893
  "helix-avatar-group": Partial<
37787
38894
  HelixAvatarGroupProps &
@@ -37861,6 +38968,12 @@ export type CustomElementsSolidJs = {
37861
38968
  *
37862
38969
  * - `image`: The image, when one is loading or loaded.
37863
38970
  * - `initials`: The initials shown when there is no usable image.
38971
+ *
38972
+ * ## CSS States
38973
+ *
38974
+ * These can be used to apply styling when a component is in a given state.
38975
+ *
38976
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37864
38977
  */
37865
38978
  "helix-avatar": Partial<
37866
38979
  HelixAvatarProps &
@@ -37949,6 +39062,12 @@ export type CustomElementsSolidJs = {
37949
39062
  * Custom selectors for styling elements within the component.
37950
39063
  *
37951
39064
  * - `indicator`: The count, or the dot when there is no value.
39065
+ *
39066
+ * ## CSS States
39067
+ *
39068
+ * These can be used to apply styling when a component is in a given state.
39069
+ *
39070
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
37952
39071
  */
37953
39072
  "helix-badge": Partial<
37954
39073
  HelixBadgeProps &
@@ -38209,6 +39328,7 @@ export type CustomElementsSolidJs = {
38209
39328
  * - `baseline`: The rule the columns stand on.
38210
39329
  * - `gridline`: One rule across the plot, under `gridlines`.
38211
39330
  * - `group`: One category's columns, together.
39331
+ * - `group-active`: The group the tooltip is about, beside `group`.
38212
39332
  * - `label`: One category's name.
38213
39333
  * - `labels`: The row of category names.
38214
39334
  * - `line`: A series drawn as a line rather than as columns, under `lines`.
@@ -38218,10 +39338,17 @@ export type CustomElementsSolidJs = {
38218
39338
  * - `tick`: One number on an axis.
38219
39339
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
38220
39340
  * - `tooltip-anchor`: The `Tooltip` element itself.
39341
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
38221
39342
  * - `tooltip-cell`: One column's name and value inside the tooltip.
38222
39343
  * - `tooltip-label`: The reading's own name inside the tooltip.
38223
39344
  * - `tooltip-name`: A column's name inside the tooltip.
38224
39345
  * - `tooltip-value`: A column's value inside the tooltip.
39346
+ *
39347
+ * ## CSS States
39348
+ *
39349
+ * These can be used to apply styling when a component is in a given state.
39350
+ *
39351
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38225
39352
  */
38226
39353
  "helix-bar-chart": Partial<
38227
39354
  HelixBarChartProps &
@@ -38279,6 +39406,12 @@ export type CustomElementsSolidJs = {
38279
39406
  *
38280
39407
  * - `attribution`: The footer carrying the source.
38281
39408
  * - `blockquote`: The quotation.
39409
+ *
39410
+ * ## CSS States
39411
+ *
39412
+ * These can be used to apply styling when a component is in a given state.
39413
+ *
39414
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38282
39415
  */
38283
39416
  "helix-blockquote": Partial<
38284
39417
  HelixBlockquoteProps &
@@ -38366,6 +39499,12 @@ export type CustomElementsSolidJs = {
38366
39499
  * - `separator`: The separator preceding the item.
38367
39500
  * - `link`: The crumb itself, which is an `<a>` where `href` is set.
38368
39501
  * - `separator-mark`: The glyph between this crumb and the next, where none is slotted.
39502
+ *
39503
+ * ## CSS States
39504
+ *
39505
+ * These can be used to apply styling when a component is in a given state.
39506
+ *
39507
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38369
39508
  */
38370
39509
  "helix-breadcrumb": Partial<
38371
39510
  HelixBreadcrumbProps &
@@ -38418,6 +39557,12 @@ export type CustomElementsSolidJs = {
38418
39557
  * Custom selectors for styling elements within the component.
38419
39558
  *
38420
39559
  * - `list`: The ordered list.
39560
+ *
39561
+ * ## CSS States
39562
+ *
39563
+ * These can be used to apply styling when a component is in a given state.
39564
+ *
39565
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38421
39566
  */
38422
39567
  "helix-breadcrumbs": Partial<
38423
39568
  HelixBreadcrumbsProps &
@@ -38491,6 +39636,12 @@ export type CustomElementsSolidJs = {
38491
39636
  * CSS variables available for styling the component.
38492
39637
  *
38493
39638
  * - `--button-group-gap`: Space between the buttons, when `spaced`. (default: `undefined`)
39639
+ *
39640
+ * ## CSS States
39641
+ *
39642
+ * These can be used to apply styling when a component is in a given state.
39643
+ *
39644
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38494
39645
  */
38495
39646
  "helix-button-group": Partial<
38496
39647
  HelixButtonGroupProps &
@@ -38765,6 +39916,12 @@ export type CustomElementsSolidJs = {
38765
39916
  * Custom selectors for styling elements within the component.
38766
39917
  *
38767
39918
  * - `button`: The inner control.
39919
+ *
39920
+ * ## CSS States
39921
+ *
39922
+ * These can be used to apply styling when a component is in a given state.
39923
+ *
39924
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38768
39925
  */
38769
39926
  "helix-button": Partial<
38770
39927
  HelixButtonProps &
@@ -38832,6 +39989,12 @@ export type CustomElementsSolidJs = {
38832
39989
  * - `content`: The content region.
38833
39990
  * - `icon`: The icon region.
38834
39991
  * - `icon-mark`: The tone glyph, where none is slotted.
39992
+ *
39993
+ * ## CSS States
39994
+ *
39995
+ * These can be used to apply styling when a component is in a given state.
39996
+ *
39997
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38835
39998
  */
38836
39999
  "helix-callout": Partial<
38837
40000
  HelixCalloutProps &
@@ -38956,6 +40119,12 @@ export type CustomElementsSolidJs = {
38956
40119
  * - `--card-padding`: Inset applied to each region. (default: `undefined`)
38957
40120
  * - `--card-radius`: Corner radius of the surface. (default: `undefined`)
38958
40121
  * - `--card-shadow`: Shadow under the surface. What `elevated` sets, and what a `data-card` link raises on hover. (default: `undefined`)
40122
+ *
40123
+ * ## CSS States
40124
+ *
40125
+ * These can be used to apply styling when a component is in a given state.
40126
+ *
40127
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
38959
40128
  */
38960
40129
  "helix-card": Partial<
38961
40130
  HelixCardProps & HelixCardSolidJsProps & BaseProps<HelixCard> & BaseEvents<HelixCard>
@@ -39161,6 +40330,7 @@ export type CustomElementsSolidJs = {
39161
40330
  *
39162
40331
  * - `controls`: The row of controls.
39163
40332
  * - `indicator`: One of them, and a way to reach that slide.
40333
+ * - `indicator-current`: The one for the slide showing, beside `indicator`.
39164
40334
  * - `indicators`: The row of controls saying where the reader is.
39165
40335
  * - `next`: The control that moves to the next slide.
39166
40336
  * - `next-mark`: The glyph on the next control.
@@ -39170,6 +40340,12 @@ export type CustomElementsSolidJs = {
39170
40340
  * - `rotation-mark`: The glyph on the play and pause control.
39171
40341
  * - `slide`: The pane one slide is shown in, and the box the track snaps to.
39172
40342
  * - `track`: The scroller the slides sit in.
40343
+ *
40344
+ * ## CSS States
40345
+ *
40346
+ * These can be used to apply styling when a component is in a given state.
40347
+ *
40348
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39173
40349
  */
39174
40350
  "helix-carousel": Partial<
39175
40351
  HelixCarouselProps &
@@ -39265,6 +40441,12 @@ export type CustomElementsSolidJs = {
39265
40441
  * - `end`: The trailing slot's box.
39266
40442
  * - `mark`: The glyph inside the send control.
39267
40443
  * - `start`: The leading slot's box.
40444
+ *
40445
+ * ## CSS States
40446
+ *
40447
+ * These can be used to apply styling when a component is in a given state.
40448
+ *
40449
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39268
40450
  */
39269
40451
  "helix-chat-composer": Partial<
39270
40452
  HelixChatComposerProps &
@@ -39386,6 +40568,12 @@ export type CustomElementsSolidJs = {
39386
40568
  * - `sources`: What the turn was drawn from, under it and outside the bubble.
39387
40569
  * - `state`: What has happened to it, where that is worth saying.
39388
40570
  * - `time`: When it was said.
40571
+ *
40572
+ * ## CSS States
40573
+ *
40574
+ * These can be used to apply styling when a component is in a given state.
40575
+ *
40576
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39389
40577
  */
39390
40578
  "helix-chat-message": Partial<
39391
40579
  HelixChatMessageProps &
@@ -39533,9 +40721,27 @@ export type CustomElementsSolidJs = {
39533
40721
  * - `history`: Shown at the top of the transcript while older turns are on their way.
39534
40722
  * - `live`: Where each settled turn is said, for a reader who cannot see it arrive.
39535
40723
  * - `loading`: Shown while the history is still on its way.
40724
+ * - `message`: A turn fed as data: the message drawn for it, forwarded whole.
40725
+ * - `message-actions`: The controls offered on a fed turn, beside its time.
40726
+ * - `message-avatar`: A fed turn's leading slot's box.
40727
+ * - `message-body`: What a fed turn said, and the line under it.
40728
+ * - `message-content`: A fed turn's text.
40729
+ * - `message-indicator`: A fed turn's default wait.
40730
+ * - `message-mark`: The status glyph beside a fed turn's failure.
40731
+ * - `message-meta`: The line under a fed turn: its time, its state, and its controls.
40732
+ * - `message-retry`: The control offered on a fed turn that failed.
40733
+ * - `message-sources`: What a fed turn was drawn from.
40734
+ * - `message-state`: What has happened to a fed turn, where that is worth saying.
40735
+ * - `message-time`: When a fed turn was said.
39536
40736
  * - `resume`: The affordance offered while the reader is away from the bottom.
39537
40737
  * - `status`: The status region, which is not part of the log.
39538
40738
  * - `turn`: One turn fed as data, around the message drawn for it.
40739
+ *
40740
+ * ## CSS States
40741
+ *
40742
+ * These can be used to apply styling when a component is in a given state.
40743
+ *
40744
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39539
40745
  */
39540
40746
  "helix-chat": Partial<
39541
40747
  HelixChatProps & HelixChatSolidJsProps & BaseProps<HelixChat> & BaseEvents<HelixChat>
@@ -39669,6 +40875,13 @@ export type CustomElementsSolidJs = {
39669
40875
  * - `hint`: Help under the set.
39670
40876
  * - `items`: The list itself, which is what `orientation` lays out.
39671
40877
  * - `label`: The group's name, over the set.
40878
+ *
40879
+ * ## CSS States
40880
+ *
40881
+ * These can be used to apply styling when a component is in a given state.
40882
+ *
40883
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
40884
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39672
40885
  */
39673
40886
  "helix-checkbox-group": Partial<
39674
40887
  HelixCheckboxGroupProps &
@@ -39863,6 +41076,17 @@ export type CustomElementsSolidJs = {
39863
41076
  * - `hint`: Help under the control, while nothing is wrong.
39864
41077
  * - `label`: The label beside it.
39865
41078
  * - `mark`: The tick, or the dash when the box is indeterminate.
41079
+ * - `mark-checked`: The mark while the box is checked, beside `mark`.
41080
+ * - `mark-indeterminate`: The mark while the box is indeterminate, beside `mark`.
41081
+ *
41082
+ * ## CSS States
41083
+ *
41084
+ * These can be used to apply styling when a component is in a given state.
41085
+ *
41086
+ * - `checked`: While the box is checked.
41087
+ * - `has-label`: While the label slot holds something to read, which is what draws a label at all.
41088
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
41089
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39866
41090
  */
39867
41091
  "helix-checkbox": Partial<
39868
41092
  HelixCheckboxProps &
@@ -39978,6 +41202,12 @@ export type CustomElementsSolidJs = {
39978
41202
  * - `removed`: In a diff, a line only the old version has, a `<del>`.
39979
41203
  * - `split`: In a split diff, the two versions side by side.
39980
41204
  * - `text`: In a diff, a line's code.
41205
+ *
41206
+ * ## CSS States
41207
+ *
41208
+ * These can be used to apply styling when a component is in a given state.
41209
+ *
41210
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
39981
41211
  */
39982
41212
  "helix-code-block": Partial<
39983
41213
  HelixCodeBlockProps &
@@ -40033,6 +41263,12 @@ export type CustomElementsSolidJs = {
40033
41263
  * Custom selectors for styling elements within the component.
40034
41264
  *
40035
41265
  * - `code`: The `<code>` element.
41266
+ *
41267
+ * ## CSS States
41268
+ *
41269
+ * These can be used to apply styling when a component is in a given state.
41270
+ *
41271
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
40036
41272
  */
40037
41273
  "helix-code": Partial<
40038
41274
  HelixCodeProps & HelixCodeSolidJsProps & BaseProps<HelixCode> & BaseEvents<HelixCode>
@@ -40301,6 +41537,14 @@ export type CustomElementsSolidJs = {
40301
41537
  * - `preview`: The chip showing the color, inside the trigger.
40302
41538
  * - `surface`: The floating panel.
40303
41539
  * - `trigger`: The control that opens the panel.
41540
+ *
41541
+ * ## CSS States
41542
+ *
41543
+ * These can be used to apply styling when a component is in a given state.
41544
+ *
41545
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
41546
+ * - `open`: While the picker is open.
41547
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
40304
41548
  */
40305
41549
  "helix-color-input": Partial<
40306
41550
  HelixColorInputProps &
@@ -40542,6 +41786,12 @@ export type CustomElementsSolidJs = {
40542
41786
  * - `swatch`: One preset.
40543
41787
  * - `swatches`: The row of presets.
40544
41788
  * - `value`: The color as text, which can be typed or pasted.
41789
+ *
41790
+ * ## CSS States
41791
+ *
41792
+ * These can be used to apply styling when a component is in a given state.
41793
+ *
41794
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
40545
41795
  */
40546
41796
  "helix-color-picker": Partial<
40547
41797
  HelixColorPickerProps &
@@ -40800,6 +42050,14 @@ export type CustomElementsSolidJs = {
40800
42050
  * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
40801
42051
  * - `tag-prefix`: The category before the label.
40802
42052
  * - `tags`: The row of chosen options, when `multiple` is set.
42053
+ *
42054
+ * ## CSS States
42055
+ *
42056
+ * These can be used to apply styling when a component is in a given state.
42057
+ *
42058
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
42059
+ * - `open`: While the list is open.
42060
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
40803
42061
  */
40804
42062
  "helix-combobox": Partial<
40805
42063
  HelixComboboxProps &
@@ -40912,6 +42170,13 @@ export type CustomElementsSolidJs = {
40912
42170
  * - `listbox-loading`: Shown while the options are still on their way.
40913
42171
  * - `listbox-search`: The region holding the field that narrows the list.
40914
42172
  * - `listbox-search-field`: The field itself.
42173
+ *
42174
+ * ## CSS States
42175
+ *
42176
+ * These can be used to apply styling when a component is in a given state.
42177
+ *
42178
+ * - `open`: While the palette is open.
42179
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
40915
42180
  */
40916
42181
  "helix-command": Partial<
40917
42182
  HelixCommandProps &
@@ -41158,6 +42423,12 @@ export type CustomElementsSolidJs = {
41158
42423
  * - `mark`: The clipboard glyph, and the confirmation that replaces it.
41159
42424
  * - `tooltip`: The bubble, forwarded from the tooltip inside.
41160
42425
  * - `tooltip-arrow`: The point, resting against the trigger.
42426
+ *
42427
+ * ## CSS States
42428
+ *
42429
+ * These can be used to apply styling when a component is in a given state.
42430
+ *
42431
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
41161
42432
  */
41162
42433
  "helix-copy-button": Partial<
41163
42434
  HelixCopyButtonProps &
@@ -41401,6 +42672,7 @@ export type CustomElementsSolidJs = {
41401
42672
  * Custom selectors for styling elements within the component.
41402
42673
  *
41403
42674
  * - `cell`: One cell.
42675
+ * - `cell-selected`: A cell of a selected row, beside `cell`.
41404
42676
  * - `table`: The grid.
41405
42677
  * - `after`: The room the rows below the window would have taken. Windowed only.
41406
42678
  * - `before`: The room the rows above the window would have taken. Windowed only.
@@ -41412,15 +42684,36 @@ export type CustomElementsSolidJs = {
41412
42684
  * - `checkbox-hint`: Forwarded from the checkbox, and never drawn here.
41413
42685
  * - `checkbox-label`: Forwarded from the checkbox; the label is spoken, not shown.
41414
42686
  * - `checkbox-mark`: The tick, or the dash while some rows are selected.
42687
+ * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
42688
+ * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
41415
42689
  * - `empty`: Shown when no rows match.
41416
42690
  * - `footer`: The region below the grid.
41417
42691
  * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
41418
42692
  * - `loading`: Shown while the rows are still on their way.
41419
42693
  * - `pagination`: The pagination, where this draws one.
42694
+ * - `pagination-first`: The pagination's control that jumps to the first page, under `ends`.
42695
+ * - `pagination-gap`: The pagination's control standing over pages not shown.
42696
+ * - `pagination-item`: One slot in the pagination's run, holding a page or a gap.
42697
+ * - `pagination-last`: The pagination's control that jumps to the last page, under `ends`.
42698
+ * - `pagination-list`: The pagination's run of pages.
42699
+ * - `pagination-live`: The region that says the page changed. Clipped, not hidden.
42700
+ * - `pagination-mark`: The glyph on a first, previous, next or last control.
42701
+ * - `pagination-next`: The pagination's control that moves forward one page.
42702
+ * - `pagination-page`: The pagination's control for one page.
42703
+ * - `pagination-page-current`: The page you are on, beside `pagination-page`.
42704
+ * - `pagination-previous`: The pagination's control that moves back one page.
42705
+ * - `pagination-status`: The pagination's reading of where you are, in `compact`.
41420
42706
  * - `row`: One row of data.
41421
42707
  * - `select`: The cell holding a row's checkbox.
41422
42708
  * - `select-all`: The heading holding the checkbox that selects every row.
42709
+ * - `select-selected`: The checkbox cell of a selected row, beside `select`.
41423
42710
  * - `toolbar`: The region above the grid.
42711
+ *
42712
+ * ## CSS States
42713
+ *
42714
+ * These can be used to apply styling when a component is in a given state.
42715
+ *
42716
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
41424
42717
  */
41425
42718
  "helix-data-table": Partial<
41426
42719
  HelixDataTableProps &
@@ -41695,7 +42988,14 @@ export type CustomElementsSolidJs = {
41695
42988
  * - `label`: The question, over the field.
41696
42989
  * - `picker`: The date picker inside it.
41697
42990
  * - `picker-cell`: One column of a row, which is what a range paints.
42991
+ * - `picker-cell-range-end`: The cell of a range's last day, beside `picker-cell`.
42992
+ * - `picker-cell-range-middle`: A cell between a range's ends, beside `picker-cell`.
42993
+ * - `picker-cell-range-start`: The cell of a range's first day, beside `picker-cell`.
41698
42994
  * - `picker-day`: The shape inside a cell, which is what a single date paints.
42995
+ * - `picker-day-disabled`: A day that cannot be chosen, beside `picker-day`.
42996
+ * - `picker-day-outside`: A day from a neighboring month, beside `picker-day`.
42997
+ * - `picker-day-selected`: The chosen day, or either end of a chosen range, beside `picker-day`.
42998
+ * - `picker-day-today`: Today, beside `picker-day`.
41699
42999
  * - `picker-grid`: The grid of days.
41700
43000
  * - `picker-header`: The month name and its controls.
41701
43001
  * - `picker-heading`: The month and year being shown.
@@ -41712,6 +43012,14 @@ export type CustomElementsSolidJs = {
41712
43012
  * - `tags`: The row the dates sit in.
41713
43013
  * - `trigger`: The control that opens the calendar.
41714
43014
  * - `trigger-icon`: The mark on the button that opens the calendar.
43015
+ *
43016
+ * ## CSS States
43017
+ *
43018
+ * These can be used to apply styling when a component is in a given state.
43019
+ *
43020
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
43021
+ * - `open`: While the calendar is open.
43022
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
41715
43023
  */
41716
43024
  "helix-date-input": Partial<
41717
43025
  HelixDateInputProps &
@@ -41936,7 +43244,14 @@ export type CustomElementsSolidJs = {
41936
43244
  * Custom selectors for styling elements within the component.
41937
43245
  *
41938
43246
  * - `cell`: One column of a row, which is what a range paints.
43247
+ * - `cell-range-end`: The cell of a range's last day, beside `cell`.
43248
+ * - `cell-range-middle`: A cell between a range's ends, beside `cell`.
43249
+ * - `cell-range-start`: The cell of a range's first day, beside `cell`.
41939
43250
  * - `day`: The shape inside a cell, which is what a single date paints.
43251
+ * - `day-disabled`: A day that cannot be chosen, beside `day`.
43252
+ * - `day-outside`: A day from a neighboring month, filling the grid out, beside `day`.
43253
+ * - `day-selected`: The chosen day, or either end of a chosen range, beside `day`.
43254
+ * - `day-today`: Today, beside `day`.
41940
43255
  * - `grid`: The grid of days.
41941
43256
  * - `header`: The month name and its controls.
41942
43257
  * - `heading`: The month and year being shown.
@@ -41948,6 +43263,12 @@ export type CustomElementsSolidJs = {
41948
43263
  * - `previous-mark`: The glyph on the previous month control, where none is slotted.
41949
43264
  * - `week`: One row of days.
41950
43265
  * - `weekday`: A column header naming a day of the week.
43266
+ *
43267
+ * ## CSS States
43268
+ *
43269
+ * These can be used to apply styling when a component is in a given state.
43270
+ *
43271
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
41951
43272
  */
41952
43273
  "helix-date-picker": Partial<
41953
43274
  HelixDatePickerProps &
@@ -42000,6 +43321,12 @@ export type CustomElementsSolidJs = {
42000
43321
  *
42001
43322
  * - `label`: The `<dt>`, holding the label.
42002
43323
  * - `value`: The `<dd>`, holding the value.
43324
+ *
43325
+ * ## CSS States
43326
+ *
43327
+ * These can be used to apply styling when a component is in a given state.
43328
+ *
43329
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42003
43330
  */
42004
43331
  "helix-description-list-item": Partial<
42005
43332
  HelixDescriptionListItemProps &
@@ -42095,6 +43422,12 @@ export type CustomElementsSolidJs = {
42095
43422
  * Custom selectors for styling elements within the component.
42096
43423
  *
42097
43424
  * - `list`: The `<dl>` holding the items.
43425
+ *
43426
+ * ## CSS States
43427
+ *
43428
+ * These can be used to apply styling when a component is in a given state.
43429
+ *
43430
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42098
43431
  */
42099
43432
  "helix-description-list": Partial<
42100
43433
  HelixDescriptionListProps &
@@ -42236,6 +43569,13 @@ export type CustomElementsSolidJs = {
42236
43569
  * Custom selectors for styling elements within the component.
42237
43570
  *
42238
43571
  * - `dialog`: The native dialog element.
43572
+ *
43573
+ * ## CSS States
43574
+ *
43575
+ * These can be used to apply styling when a component is in a given state.
43576
+ *
43577
+ * - `open`: While the dialog is open.
43578
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42239
43579
  */
42240
43580
  "helix-dialog": Partial<
42241
43581
  HelixDialogProps &
@@ -42309,6 +43649,12 @@ export type CustomElementsSolidJs = {
42309
43649
  *
42310
43650
  * - `line`: The rule itself.
42311
43651
  * - `content`: What is set into it.
43652
+ *
43653
+ * ## CSS States
43654
+ *
43655
+ * These can be used to apply styling when a component is in a given state.
43656
+ *
43657
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42312
43658
  */
42313
43659
  "helix-divider": Partial<
42314
43660
  HelixDividerProps &
@@ -42499,14 +43845,22 @@ export type CustomElementsSolidJs = {
42499
43845
  * - `mark`: The invisible point the tooltip is anchored to.
42500
43846
  * - `plot`: The drawing.
42501
43847
  * - `segment`: One slice.
43848
+ * - `segment-active`: The slice under the pointer, beside `segment`.
42502
43849
  * - `segment-edge`: One slice as a closed shape, for a boundary to trace.
42503
43850
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
42504
43851
  * - `tooltip-anchor`: The `Tooltip` element itself.
43852
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
42505
43853
  * - `tooltip-cell`: One column's name and value inside the tooltip.
42506
43854
  * - `tooltip-label`: The slice's own name inside the tooltip.
42507
43855
  * - `tooltip-name`: A column's name inside the tooltip.
42508
43856
  * - `tooltip-value`: A column's value inside the tooltip.
42509
43857
  * - `track`: The ring the slices are drawn on.
43858
+ *
43859
+ * ## CSS States
43860
+ *
43861
+ * These can be used to apply styling when a component is in a given state.
43862
+ *
43863
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42510
43864
  */
42511
43865
  "helix-donut-chart": Partial<
42512
43866
  HelixDonutChartProps &
@@ -42663,6 +44017,13 @@ export type CustomElementsSolidJs = {
42663
44017
  * - `content`: The scrolling content region.
42664
44018
  * - `header`: The header region.
42665
44019
  * - `panel`: The sliding panel.
44020
+ *
44021
+ * ## CSS States
44022
+ *
44023
+ * These can be used to apply styling when a component is in a given state.
44024
+ *
44025
+ * - `open`: While the drawer is open.
44026
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42666
44027
  */
42667
44028
  "helix-drawer": Partial<
42668
44029
  HelixDrawerProps &
@@ -42752,6 +44113,13 @@ export type CustomElementsSolidJs = {
42752
44113
  *
42753
44114
  * - `item`: The row itself.
42754
44115
  * - `label`: The words.
44116
+ * - `mark`: The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
44117
+ *
44118
+ * ## CSS States
44119
+ *
44120
+ * These can be used to apply styling when a component is in a given state.
44121
+ *
44122
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42755
44123
  */
42756
44124
  "helix-drilldown-item": Partial<
42757
44125
  HelixDrilldownItemProps &
@@ -42844,6 +44212,12 @@ export type CustomElementsSolidJs = {
42844
44212
  * - `loading`: Shown while the entries are still on their way.
42845
44213
  * - `page`: The region the rows are in.
42846
44214
  * - `title`: The name of the page showing.
44215
+ *
44216
+ * ## CSS States
44217
+ *
44218
+ * These can be used to apply styling when a component is in a given state.
44219
+ *
44220
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42847
44221
  */
42848
44222
  "helix-drilldown": Partial<
42849
44223
  HelixDrilldownProps &
@@ -42899,6 +44273,12 @@ export type CustomElementsSolidJs = {
42899
44273
  * CSS variables available for styling the component.
42900
44274
  *
42901
44275
  * - `--empty-padding`: Space around the whole block. (default: `undefined`)
44276
+ *
44277
+ * ## CSS States
44278
+ *
44279
+ * These can be used to apply styling when a component is in a given state.
44280
+ *
44281
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
42902
44282
  */
42903
44283
  "helix-empty": Partial<
42904
44284
  HelixEmptyProps &
@@ -43089,6 +44469,13 @@ export type CustomElementsSolidJs = {
43089
44469
  * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
43090
44470
  * - `size-prefix`: The category before the label.
43091
44471
  * - `trigger`: The label that opens the picker.
44472
+ *
44473
+ * ## CSS States
44474
+ *
44475
+ * These can be used to apply styling when a component is in a given state.
44476
+ *
44477
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
44478
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43092
44479
  */
43093
44480
  "helix-file-input": Partial<
43094
44481
  HelixFileInputProps &
@@ -43205,6 +44592,12 @@ export type CustomElementsSolidJs = {
43205
44592
  * - `field`: The name of what is being filtered.
43206
44593
  * - `operator`: How it is compared, drawn only where there is one to draw.
43207
44594
  * - `values`: What it is compared to.
44595
+ *
44596
+ * ## CSS States
44597
+ *
44598
+ * These can be used to apply styling when a component is in a given state.
44599
+ *
44600
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43208
44601
  */
43209
44602
  "helix-filter-chip": Partial<
43210
44603
  HelixFilterChipProps &
@@ -43293,6 +44686,12 @@ export type CustomElementsSolidJs = {
43293
44686
  * Areas where markup can be added to the component.
43294
44687
  *
43295
44688
  * - `(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.
44689
+ *
44690
+ * ## CSS States
44691
+ *
44692
+ * These can be used to apply styling when a component is in a given state.
44693
+ *
44694
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43296
44695
  */
43297
44696
  "helix-filter-field": Partial<
43298
44697
  HelixFilterFieldProps &
@@ -43380,6 +44779,32 @@ export type CustomElementsSolidJs = {
43380
44779
  *
43381
44780
  * Refusing the `helix-facet` puts everything back, so a consumer who declines
43382
44781
  * a filter is never left looking at a menu that says it took.
44782
+ *
44783
+ * ## CSS Parts
44784
+ *
44785
+ * Custom selectors for styling elements within the component.
44786
+ *
44787
+ * - `divider`: The rule between a field's comparisons and its values.
44788
+ * - `divider-content`: What is set into the rule.
44789
+ * - `divider-line`: The rule itself.
44790
+ * - `entry`: One row: a field, its comparison, an operator or a value.
44791
+ * - `entry-item`: The row itself.
44792
+ * - `entry-mark`: The trailing mark: a tick on a chosen value, a caret on a field.
44793
+ * - `entry-start`: The leading column.
44794
+ * - `menu`: The menu the fields are offered in.
44795
+ * - `menu-back`: The control that returns from a field's page.
44796
+ * - `menu-back-mark`: The glyph on the back control.
44797
+ * - `menu-empty`: Shown when there are no fields to offer.
44798
+ * - `menu-header`: The bar above a field's page, holding the way back and its name.
44799
+ * - `menu-loading`: Shown while the fields are still on their way.
44800
+ * - `menu-surface`: The floating panel the menu is drawn on.
44801
+ * - `menu-title`: The name of the field whose page is showing.
44802
+ *
44803
+ * ## CSS States
44804
+ *
44805
+ * These can be used to apply styling when a component is in a given state.
44806
+ *
44807
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43383
44808
  */
43384
44809
  "helix-filter-menu": Partial<
43385
44810
  HelixFilterMenuProps &
@@ -43464,6 +44889,12 @@ export type CustomElementsSolidJs = {
43464
44889
  * It never resolves where `requestAnimationFrame` never fires, which is a
43465
44890
  * server, a hidden tab, and happy-dom. Callers that must not hang race it
43466
44891
  * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
44892
+ *
44893
+ * ## CSS States
44894
+ *
44895
+ * These can be used to apply styling when a component is in a given state.
44896
+ *
44897
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43467
44898
  */
43468
44899
  "helix-filter-operator": Partial<
43469
44900
  HelixFilterOperatorProps &
@@ -43716,6 +45147,14 @@ export type CustomElementsSolidJs = {
43716
45147
  * - `rest`: How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
43717
45148
  * - `surface`: The floating panel the suggestions sit in.
43718
45149
  * - `tags`: The row the tokens sit in.
45150
+ *
45151
+ * ## CSS States
45152
+ *
45153
+ * These can be used to apply styling when a component is in a given state.
45154
+ *
45155
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
45156
+ * - `open`: While the suggestions are open.
45157
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43719
45158
  */
43720
45159
  "helix-filter-input": Partial<
43721
45160
  HelixFilterInputProps &
@@ -43773,6 +45212,12 @@ export type CustomElementsSolidJs = {
43773
45212
  * Areas where markup can be added to the component.
43774
45213
  *
43775
45214
  * - `(default)`: The items to lay out.
45215
+ *
45216
+ * ## CSS States
45217
+ *
45218
+ * These can be used to apply styling when a component is in a given state.
45219
+ *
45220
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43776
45221
  */
43777
45222
  "helix-flex": Partial<
43778
45223
  HelixFlexProps & HelixFlexSolidJsProps & BaseProps<HelixFlex> & BaseEvents<HelixFlex>
@@ -43848,6 +45293,12 @@ export type CustomElementsSolidJs = {
43848
45293
  * Custom selectors for styling elements within the component.
43849
45294
  *
43850
45295
  * - `time`: The `<time>` element carrying the reading.
45296
+ *
45297
+ * ## CSS States
45298
+ *
45299
+ * These can be used to apply styling when a component is in a given state.
45300
+ *
45301
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43851
45302
  */
43852
45303
  "helix-format-date": Partial<
43853
45304
  HelixFormatDateProps &
@@ -43905,6 +45356,12 @@ export type CustomElementsSolidJs = {
43905
45356
  * CSS variables available for styling the component.
43906
45357
  *
43907
45358
  * - `--grid-columns`: An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say. (default: `undefined`)
45359
+ *
45360
+ * ## CSS States
45361
+ *
45362
+ * These can be used to apply styling when a component is in a given state.
45363
+ *
45364
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
43908
45365
  */
43909
45366
  "helix-grid": Partial<
43910
45367
  HelixGridProps & HelixGridSolidJsProps & BaseProps<HelixGrid> & BaseEvents<HelixGrid>
@@ -44092,6 +45549,7 @@ export type CustomElementsSolidJs = {
44092
45549
  * - `strip`: The grid of cells.
44093
45550
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
44094
45551
  * - `tooltip-anchor`: The `Tooltip` element itself.
45552
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
44095
45553
  * - `tooltip-cell`: One column's name and value inside the tooltip.
44096
45554
  * - `tooltip-label`: The reading's own name inside the tooltip.
44097
45555
  * - `tooltip-name`: A column's name inside the tooltip.
@@ -44100,6 +45558,12 @@ export type CustomElementsSolidJs = {
44100
45558
  * - `end`: The trailing slot's box.
44101
45559
  * - `start`: The leading slot's box.
44102
45560
  * - `summary`: The middle slot's box.
45561
+ *
45562
+ * ## CSS States
45563
+ *
45564
+ * These can be used to apply styling when a component is in a given state.
45565
+ *
45566
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44103
45567
  */
44104
45568
  "helix-heatmap": Partial<
44105
45569
  HelixHeatmapProps &
@@ -44361,6 +45825,12 @@ export type CustomElementsSolidJs = {
44361
45825
  * Custom selectors for styling elements within the component.
44362
45826
  *
44363
45827
  * - `button`: The inner button or anchor.
45828
+ *
45829
+ * ## CSS States
45830
+ *
45831
+ * These can be used to apply styling when a component is in a given state.
45832
+ *
45833
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44364
45834
  */
44365
45835
  "helix-icon-button": Partial<
44366
45836
  HelixIconButtonProps &
@@ -44411,6 +45881,12 @@ export type CustomElementsSolidJs = {
44411
45881
  * Custom selectors for styling elements within the component.
44412
45882
  *
44413
45883
  * - `svg`: The rendered SVG.
45884
+ *
45885
+ * ## CSS States
45886
+ *
45887
+ * These can be used to apply styling when a component is in a given state.
45888
+ *
45889
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44414
45890
  */
44415
45891
  "helix-icon": Partial<
44416
45892
  HelixIconProps & HelixIconSolidJsProps & BaseProps<HelixIcon> & BaseEvents<HelixIcon>
@@ -44530,6 +46006,12 @@ export type CustomElementsSolidJs = {
44530
46006
  * - `fallback`: What stands in when it fails.
44531
46007
  * - `image`: The picture itself.
44532
46008
  * - `placeholder`: What stands in until it arrives.
46009
+ *
46010
+ * ## CSS States
46011
+ *
46012
+ * These can be used to apply styling when a component is in a given state.
46013
+ *
46014
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44533
46015
  */
44534
46016
  "helix-image": Partial<
44535
46017
  HelixImageProps &
@@ -44776,6 +46258,14 @@ export type CustomElementsSolidJs = {
44776
46258
  * - `hint`: Help under the field, while nothing is wrong.
44777
46259
  * - `label`: The question, over the field.
44778
46260
  * - `reveal`: The button that shows and hides a password.
46261
+ * - `reveal-pressed`: The reveal button while the password shows, beside `reveal`.
46262
+ *
46263
+ * ## CSS States
46264
+ *
46265
+ * These can be used to apply styling when a component is in a given state.
46266
+ *
46267
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
46268
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44779
46269
  */
44780
46270
  "helix-input": Partial<
44781
46271
  HelixInputProps &
@@ -44852,6 +46342,12 @@ export type CustomElementsSolidJs = {
44852
46342
  * Custom selectors for styling elements within the component.
44853
46343
  *
44854
46344
  * - `kbd`: The key.
46345
+ *
46346
+ * ## CSS States
46347
+ *
46348
+ * These can be used to apply styling when a component is in a given state.
46349
+ *
46350
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44855
46351
  */
44856
46352
  "helix-kbd": Partial<
44857
46353
  HelixKbdProps & HelixKbdSolidJsProps & BaseProps<HelixKbd> & BaseEvents<HelixKbd>
@@ -44979,6 +46475,12 @@ export type CustomElementsSolidJs = {
44979
46475
  * - `list`: The list itself.
44980
46476
  * - `name`: One series name.
44981
46477
  * - `swatch`: The color a series is drawn in.
46478
+ *
46479
+ * ## CSS States
46480
+ *
46481
+ * These can be used to apply styling when a component is in a given state.
46482
+ *
46483
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
44982
46484
  */
44983
46485
  "helix-legend": Partial<
44984
46486
  HelixLegendProps &
@@ -45204,10 +46706,17 @@ export type CustomElementsSolidJs = {
45204
46706
  * - `terminus`: The mark on one series' last reading.
45205
46707
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
45206
46708
  * - `tooltip-anchor`: The `Tooltip` element itself.
46709
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
45207
46710
  * - `tooltip-cell`: One column's name and value inside the tooltip.
45208
46711
  * - `tooltip-label`: The reading's own name inside the tooltip.
45209
46712
  * - `tooltip-name`: A column's name inside the tooltip.
45210
46713
  * - `tooltip-value`: A column's value inside the tooltip.
46714
+ *
46715
+ * ## CSS States
46716
+ *
46717
+ * These can be used to apply styling when a component is in a given state.
46718
+ *
46719
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45211
46720
  */
45212
46721
  "helix-line-chart": Partial<
45213
46722
  HelixLineChartProps &
@@ -45276,6 +46785,12 @@ export type CustomElementsSolidJs = {
45276
46785
  *
45277
46786
  * - `rail`: The cell a railed list draws its number in.
45278
46787
  * - `row`: The layout, held off the host so the host can carry a marker.
46788
+ *
46789
+ * ## CSS States
46790
+ *
46791
+ * These can be used to apply styling when a component is in a given state.
46792
+ *
46793
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45279
46794
  */
45280
46795
  "helix-list-item": Partial<
45281
46796
  HelixListItemProps &
@@ -45378,6 +46893,12 @@ export type CustomElementsSolidJs = {
45378
46893
  * - `--list-marker-gutter`: Room the ordered and unordered markers hang into. (default: `undefined`)
45379
46894
  * - `--list-rail-inline-size`: The width of the rail's track. (default: `undefined`)
45380
46895
  * - `--list-rail-style`: What a rail counts with. Any `list-style-type`. (default: `undefined`)
46896
+ *
46897
+ * ## CSS States
46898
+ *
46899
+ * These can be used to apply styling when a component is in a given state.
46900
+ *
46901
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45381
46902
  */
45382
46903
  "helix-list": Partial<
45383
46904
  HelixListProps & HelixListSolidJsProps & BaseProps<HelixList> & BaseEvents<HelixList>
@@ -45625,6 +47146,13 @@ export type CustomElementsSolidJs = {
45625
47146
  * - `loading`: Shown while the options are still on their way.
45626
47147
  * - `search`: The region holding the field that narrows the list.
45627
47148
  * - `search-field`: The field itself.
47149
+ *
47150
+ * ## CSS States
47151
+ *
47152
+ * These can be used to apply styling when a component is in a given state.
47153
+ *
47154
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
47155
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45628
47156
  */
45629
47157
  "helix-listbox": Partial<
45630
47158
  HelixListboxProps &
@@ -45695,6 +47223,12 @@ export type CustomElementsSolidJs = {
45695
47223
  * - `mark`: The region holding what was slotted at the center.
45696
47224
  * - `svg`: The rotating circle pair.
45697
47225
  * - `track`: The full circle behind the indicator.
47226
+ *
47227
+ * ## CSS States
47228
+ *
47229
+ * These can be used to apply styling when a component is in a given state.
47230
+ *
47231
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45698
47232
  */
45699
47233
  "helix-loader": Partial<
45700
47234
  HelixLoaderProps &
@@ -45825,6 +47359,13 @@ export type CustomElementsSolidJs = {
45825
47359
  *
45826
47360
  * - `surface`: The floating panel, which is what opens.
45827
47361
  * - `trigger`: The default trigger, where none was slotted.
47362
+ *
47363
+ * ## CSS States
47364
+ *
47365
+ * These can be used to apply styling when a component is in a given state.
47366
+ *
47367
+ * - `open`: While the panel is open, which is when the trigger reads as current.
47368
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45828
47369
  */
45829
47370
  "helix-megamenu": Partial<
45830
47371
  HelixMegamenuProps &
@@ -45978,6 +47519,12 @@ export type CustomElementsSolidJs = {
45978
47519
  * - `item`: The row, which is an `<a>` where `href` is set.
45979
47520
  * - `mark`: The trailing mark: a tick when checked, a caret when it opens a page. One column, because a row is never both.
45980
47521
  * - `start`: The leading column, which is a slot and is always there.
47522
+ *
47523
+ * ## CSS States
47524
+ *
47525
+ * These can be used to apply styling when a component is in a given state.
47526
+ *
47527
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
45981
47528
  */
45982
47529
  "helix-menu-item": Partial<
45983
47530
  HelixMenuItemProps &
@@ -46095,6 +47642,16 @@ export type CustomElementsSolidJs = {
46095
47642
  * - `loading`: Shown while the items are still on their way.
46096
47643
  * - `surface`: The floating panel the menu is drawn on.
46097
47644
  * - `title`: The name of the submenu that is showing.
47645
+ *
47646
+ * ## CSS States
47647
+ *
47648
+ * These can be used to apply styling when a component is in a given state.
47649
+ *
47650
+ * - `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.
47651
+ * - `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.
47652
+ * - `open`: While the menu is open.
47653
+ * - `start`: While a row on the page showing has something in its leading column, so that column is held open for every row.
47654
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46098
47655
  */
46099
47656
  "helix-menu": Partial<
46100
47657
  HelixMenuProps & HelixMenuSolidJsProps & BaseProps<HelixMenu> & BaseEvents<HelixMenu>
@@ -46170,8 +47727,10 @@ export type CustomElementsSolidJs = {
46170
47727
  * again is a worse API than letting them say it.
46171
47728
  *
46172
47729
  * Not reflected. Nothing selects on it: the band reaches the stylesheet as
46173
- * `data-band` on the fill, because that is the element being colored, so
46174
- * reflecting here would write an attribute onto the host for no reader.
47730
+ * `data-band` on the fill, because that is the element being colored, and a
47731
+ * stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
47732
+ * part names, so reflecting here would write an attribute onto the host for
47733
+ * no reader.
46175
47734
  * - `high`: Bottom of the high band.
46176
47735
  *
46177
47736
  * Absent leaves the range unbanded.
@@ -46256,10 +47815,21 @@ export type CustomElementsSolidJs = {
46256
47815
  * Custom selectors for styling elements within the component.
46257
47816
  *
46258
47817
  * - `indicator`: The part of it the value fills.
47818
+ * - `indicator-fair`: The fill while the reading is in a band beside the good one, beside `indicator`.
47819
+ * - `indicator-good`: The fill while the reading is in the good band, beside `indicator`.
47820
+ * - `indicator-over`: The fill while the value is past the top, beside `indicator`.
47821
+ * - `indicator-poor`: The fill while the reading is two bands from the good one, beside `indicator`.
47822
+ * - `indicator-under`: The fill while the value is below the floor, beside `indicator`.
46259
47823
  * - `tick`: A mark at `low` or at `high`.
46260
47824
  * - `track`: The whole range.
46261
47825
  * - `value`: The reading, under `show-value`.
46262
47826
  * - `groove`: The unfilled circle, in `ring` and `arc`.
47827
+ *
47828
+ * ## CSS States
47829
+ *
47830
+ * These can be used to apply styling when a component is in a given state.
47831
+ *
47832
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46263
47833
  */
46264
47834
  "helix-meter": Partial<
46265
47835
  HelixMeterProps &
@@ -46317,6 +47887,12 @@ export type CustomElementsSolidJs = {
46317
47887
  *
46318
47888
  * - `indicator`: The marker that travels to the current destination.
46319
47889
  * - `nav`: The navigation landmark.
47890
+ *
47891
+ * ## CSS States
47892
+ *
47893
+ * These can be used to apply styling when a component is in a given state.
47894
+ *
47895
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46320
47896
  */
46321
47897
  "helix-navigation": Partial<
46322
47898
  HelixNavigationProps &
@@ -46435,6 +48011,13 @@ export type CustomElementsSolidJs = {
46435
48011
  * - `items`: The region holding the notifications.
46436
48012
  * - `label`: What the group is called.
46437
48013
  * - `trigger`: The control that collapses and expands, where collapsible.
48014
+ *
48015
+ * ## CSS States
48016
+ *
48017
+ * These can be used to apply styling when a component is in a given state.
48018
+ *
48019
+ * - `open`: While the group shows every notification in it rather than the first.
48020
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46438
48021
  */
46439
48022
  "helix-notification-group": Partial<
46440
48023
  HelixNotificationGroupProps &
@@ -46592,6 +48175,15 @@ export type CustomElementsSolidJs = {
46592
48175
  * - `body`: The label and the caption together.
46593
48176
  * - `label`: What happened, on the first line.
46594
48177
  * - `media`: The leading slot's box.
48178
+ *
48179
+ * ## CSS States
48180
+ *
48181
+ * These can be used to apply styling when a component is in a given state.
48182
+ *
48183
+ * - `actions`: While the actions slot holds something, so the words above make room for it.
48184
+ * - `controls`: While it can be dismissed, so the time makes way for the control under a pointer.
48185
+ * - `read`: While it has been read.
48186
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46595
48187
  */
46596
48188
  "helix-notification": Partial<
46597
48189
  HelixNotificationProps &
@@ -46744,6 +48336,13 @@ export type CustomElementsSolidJs = {
46744
48336
  * - `footer`: The region below the list.
46745
48337
  * - `header`: The region above the list.
46746
48338
  * - `loading`: Shown while the feed is still on its way.
48339
+ *
48340
+ * ## CSS States
48341
+ *
48342
+ * These can be used to apply styling when a component is in a given state.
48343
+ *
48344
+ * - `media`: While a notification in the list holds something in its media slot, so every row keeps that column.
48345
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46747
48346
  */
46748
48347
  "helix-notifications": Partial<
46749
48348
  HelixNotificationsProps &
@@ -46960,6 +48559,13 @@ export type CustomElementsSolidJs = {
46960
48559
  * - `hint`: Help under the field, while nothing is wrong.
46961
48560
  * - `increment-mark`: The glyph on the step up control.
46962
48561
  * - `label`: The name over the field, which is also the scrub grip.
48562
+ *
48563
+ * ## CSS States
48564
+ *
48565
+ * These can be used to apply styling when a component is in a given state.
48566
+ *
48567
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
48568
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
46963
48569
  */
46964
48570
  "helix-number-input": Partial<
46965
48571
  HelixNumberInputProps &
@@ -47059,10 +48665,17 @@ export type CustomElementsSolidJs = {
47059
48665
  * - `null`: A `null`.
47060
48666
  * - `number`: A number.
47061
48667
  * - `row`: One entry, a tree item.
48668
+ * - `row-active`: The entry the keyboard is on, beside `row`.
47062
48669
  * - `string`: A string, in quotes.
47063
48670
  * - `summary`: The brackets standing for a branch's contents.
47064
48671
  * - `toggle`: The caret on a branch: down when open, across when closed.
47065
48672
  * - `tree`: The tree, the one thing focus lands on.
48673
+ *
48674
+ * ## CSS States
48675
+ *
48676
+ * These can be used to apply styling when a component is in a given state.
48677
+ *
48678
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47066
48679
  */
47067
48680
  "helix-object-inspector": Partial<
47068
48681
  HelixObjectInspectorProps &
@@ -47113,6 +48726,12 @@ export type CustomElementsSolidJs = {
47113
48726
  *
47114
48727
  * - `items`: The run itself.
47115
48728
  * - `label`: The heading.
48729
+ *
48730
+ * ## CSS States
48731
+ *
48732
+ * These can be used to apply styling when a component is in a given state.
48733
+ *
48734
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47116
48735
  */
47117
48736
  "helix-option-group": Partial<
47118
48737
  HelixOptionGroupProps &
@@ -47289,8 +48908,17 @@ export type CustomElementsSolidJs = {
47289
48908
  *
47290
48909
  * - `description`: The caption under the words, when there is one.
47291
48910
  * - `item`: The row.
48911
+ * - `item-active`: The row the keyboard is on, beside `item`.
48912
+ * - `item-selected`: The row of a chosen option, beside `item`.
47292
48913
  * - `label`: The words.
47293
48914
  * - `text`: The words and the caption under them, as one column.
48915
+ *
48916
+ * ## CSS States
48917
+ *
48918
+ * These can be used to apply styling when a component is in a given state.
48919
+ *
48920
+ * - `selected`: While the option is chosen.
48921
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47294
48922
  */
47295
48923
  "helix-option": Partial<
47296
48924
  HelixOptionProps &
@@ -47392,6 +49020,12 @@ export type CustomElementsSolidJs = {
47392
49020
  * Custom selectors for styling elements within the component.
47393
49021
  *
47394
49022
  * - `canvas`: The surface the cloud is drawn into.
49023
+ *
49024
+ * ## CSS States
49025
+ *
49026
+ * These can be used to apply styling when a component is in a given state.
49027
+ *
49028
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47395
49029
  */
47396
49030
  "helix-orb": Partial<
47397
49031
  HelixOrbProps & HelixOrbSolidJsProps & BaseProps<HelixOrb> & BaseEvents<HelixOrb>
@@ -47488,6 +49122,12 @@ export type CustomElementsSolidJs = {
47488
49122
  *
47489
49123
  * - `indicator`: The mark that travels to the section being read.
47490
49124
  * - `nav`: The navigation landmark.
49125
+ *
49126
+ * ## CSS States
49127
+ *
49128
+ * These can be used to apply styling when a component is in a given state.
49129
+ *
49130
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47491
49131
  */
47492
49132
  "helix-outline": Partial<
47493
49133
  HelixOutlineProps &
@@ -47667,10 +49307,18 @@ export type CustomElementsSolidJs = {
47667
49307
  * - `list`: The run of pages.
47668
49308
  * - `next`: The control that moves forward one page.
47669
49309
  * - `page`: The control for one page.
49310
+ * - `page-current`: The page you are on, beside `page`.
47670
49311
  * - `previous`: The control that moves back one page.
47671
49312
  * - `status`: The reading of where you are, in `compact`.
47672
49313
  * - `live`: The region that says the page changed. Clipped, not hidden.
47673
49314
  * - `mark`: The glyph on a first, previous, next or last control, where none is slotted.
49315
+ *
49316
+ * ## CSS States
49317
+ *
49318
+ * These can be used to apply styling when a component is in a given state.
49319
+ *
49320
+ * - `empty`: While there is one page or none, which is nothing to page through.
49321
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47674
49322
  */
47675
49323
  "helix-pagination": Partial<
47676
49324
  HelixPaginationProps &
@@ -47684,8 +49332,9 @@ export type CustomElementsSolidJs = {
47684
49332
  * stands in a column of fields; this one stands in a footer beside a run of page
47685
49333
  * numbers, where a two-line control makes the whole row two lines tall.
47686
49334
  *
47687
- * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
47688
- * reach through both boundaries and a consumer styles it as the select it is.
49335
+ * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
49336
+ * `::part(control-label)` reach through both boundaries and a consumer styles it
49337
+ * as the select it is.
47689
49338
  *
47690
49339
  * ## Attributes & Properties
47691
49340
  *
@@ -47736,9 +49385,38 @@ export type CustomElementsSolidJs = {
47736
49385
  * Custom selectors for styling elements within the component.
47737
49386
  *
47738
49387
  * - `control`: The select.
47739
- * - `label`: The words beside the number, forwarded from the select.
47740
- * - `trigger`: The closed control, forwarded from the select.
47741
- * - `value`: The chosen size inside the trigger, forwarded from the select.
49388
+ * - `control-feedback`: What is wrong with it.
49389
+ * - `control-hint`: Help under the trigger.
49390
+ * - `control-indicator`: The caret saying the control opens.
49391
+ * - `control-label`: The words beside the number.
49392
+ * - `control-listbox`: The list inside it.
49393
+ * - `control-listbox-empty`: Shown when a filter has hidden everything.
49394
+ * - `control-listbox-feedback`: What is wrong with the list.
49395
+ * - `control-listbox-filter-icon`: The mark beside the filter field.
49396
+ * - `control-listbox-filter-mark`: The glyph beside the filter field, where none is slotted.
49397
+ * - `control-listbox-hint`: Help under the list.
49398
+ * - `control-listbox-items`: The list itself.
49399
+ * - `control-listbox-label`: The question, over the list.
49400
+ * - `control-listbox-loading`: Shown while the options are still on their way.
49401
+ * - `control-listbox-search`: The region holding the field that narrows the list.
49402
+ * - `control-listbox-search-field`: The field itself.
49403
+ * - `control-surface`: The floating panel.
49404
+ * - `control-trigger`: The closed control, which says what size is chosen.
49405
+ * - `control-value`: The chosen size inside the trigger.
49406
+ * - `option`: One size on offer.
49407
+ * - `option-description`: The caption under the number, when there is one.
49408
+ * - `option-item`: The row.
49409
+ * - `option-item-active`: The row the keyboard is on.
49410
+ * - `option-item-selected`: The row of the size chosen.
49411
+ * - `option-label`: The number.
49412
+ * - `option-text`: The number and the caption, as one column.
49413
+ *
49414
+ * ## CSS States
49415
+ *
49416
+ * These can be used to apply styling when a component is in a given state.
49417
+ *
49418
+ * - `empty`: While there are no sizes to offer.
49419
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47742
49420
  */
47743
49421
  "helix-pagination-size": Partial<
47744
49422
  HelixPaginationSizeProps &
@@ -47793,6 +49471,12 @@ export type CustomElementsSolidJs = {
47793
49471
  * It never resolves where `requestAnimationFrame` never fires, which is a
47794
49472
  * server, a hidden tab, and happy-dom. Callers that must not hang race it
47795
49473
  * against a timeout; `readyToMove` does exactly that. (property only) (readonly)
49474
+ *
49475
+ * ## CSS States
49476
+ *
49477
+ * These can be used to apply styling when a component is in a given state.
49478
+ *
49479
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47796
49480
  */
47797
49481
  "helix-pagination-summary": Partial<
47798
49482
  HelixPaginationSummaryProps &
@@ -47994,6 +49678,13 @@ export type CustomElementsSolidJs = {
47994
49678
  * - `feedback`: What is wrong with it.
47995
49679
  * - `hint`: Help under the boxes, while nothing is wrong.
47996
49680
  * - `label`: The question, over the boxes.
49681
+ *
49682
+ * ## CSS States
49683
+ *
49684
+ * These can be used to apply styling when a component is in a given state.
49685
+ *
49686
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
49687
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
47997
49688
  */
47998
49689
  "helix-pin-input": Partial<
47999
49690
  HelixPinInputProps &
@@ -48111,6 +49802,13 @@ export type CustomElementsSolidJs = {
48111
49802
  *
48112
49803
  * - `content`: The scrolling region inside the panel.
48113
49804
  * - `popover`: The panel.
49805
+ *
49806
+ * ## CSS States
49807
+ *
49808
+ * These can be used to apply styling when a component is in a given state.
49809
+ *
49810
+ * - `open`: While the popover is open.
49811
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48114
49812
  */
48115
49813
  "helix-popover": Partial<
48116
49814
  HelixPopoverProps &
@@ -48230,6 +49928,12 @@ export type CustomElementsSolidJs = {
48230
49928
  * - `indicator`: The part of it that is done.
48231
49929
  * - `track`: The full length the work is measured against.
48232
49930
  * - `value`: The reading beside the bar, under `show-value`.
49931
+ *
49932
+ * ## CSS States
49933
+ *
49934
+ * These can be used to apply styling when a component is in a given state.
49935
+ *
49936
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48233
49937
  */
48234
49938
  "helix-progress": Partial<
48235
49939
  HelixProgressProps &
@@ -48319,6 +50023,12 @@ export type CustomElementsSolidJs = {
48319
50023
  * - `finders`: The three corner squares, which can take their own color.
48320
50024
  * - `logo`: The box holding the center mark.
48321
50025
  * - `modules`: Everything but the three corner squares.
50026
+ *
50027
+ * ## CSS States
50028
+ *
50029
+ * These can be used to apply styling when a component is in a given state.
50030
+ *
50031
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48322
50032
  */
48323
50033
  "helix-qr-code": Partial<
48324
50034
  HelixQrCodeProps &
@@ -48372,6 +50082,12 @@ export type CustomElementsSolidJs = {
48372
50082
  * Custom selectors for styling elements within the component.
48373
50083
  *
48374
50084
  * - `quote`: The quotation.
50085
+ *
50086
+ * ## CSS States
50087
+ *
50088
+ * These can be used to apply styling when a component is in a given state.
50089
+ *
50090
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48375
50091
  */
48376
50092
  "helix-quote": Partial<
48377
50093
  HelixQuoteProps &
@@ -48541,6 +50257,13 @@ export type CustomElementsSolidJs = {
48541
50257
  * - `hint`: Help under the set.
48542
50258
  * - `items`: The choices, which is what `orientation` lays out.
48543
50259
  * - `label`: The question, over the set.
50260
+ *
50261
+ * ## CSS States
50262
+ *
50263
+ * These can be used to apply styling when a component is in a given state.
50264
+ *
50265
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
50266
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48544
50267
  */
48545
50268
  "helix-radio-group": Partial<
48546
50269
  HelixRadioGroupProps &
@@ -48671,6 +50394,13 @@ export type CustomElementsSolidJs = {
48671
50394
  * - `item`: The button, which is the whole row.
48672
50395
  * - `label`: The words beside it.
48673
50396
  * - `mark`: The dot inside it.
50397
+ *
50398
+ * ## CSS States
50399
+ *
50400
+ * These can be used to apply styling when a component is in a given state.
50401
+ *
50402
+ * - `selected`: While it is the one chosen.
50403
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48674
50404
  */
48675
50405
  "helix-radio": Partial<
48676
50406
  HelixRadioProps &
@@ -48892,6 +50622,13 @@ export type CustomElementsSolidJs = {
48892
50622
  * - `option`: One place a reader can press, which is one step.
48893
50623
  * - `track`: The unfilled marks.
48894
50624
  * - `value`: The score written out, under `show-value`.
50625
+ *
50626
+ * ## CSS States
50627
+ *
50628
+ * These can be used to apply styling when a component is in a given state.
50629
+ *
50630
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
50631
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48895
50632
  */
48896
50633
  "helix-rating": Partial<
48897
50634
  HelixRatingProps &
@@ -48988,6 +50725,12 @@ export type CustomElementsSolidJs = {
48988
50725
  * Custom selectors for styling elements within the component.
48989
50726
  *
48990
50727
  * - `frame`: The iframe.
50728
+ *
50729
+ * ## CSS States
50730
+ *
50731
+ * These can be used to apply styling when a component is in a given state.
50732
+ *
50733
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
48991
50734
  */
48992
50735
  "helix-sandbox-preview": Partial<
48993
50736
  HelixSandboxPreviewProps &
@@ -49114,6 +50857,12 @@ export type CustomElementsSolidJs = {
49114
50857
  * - `panel`: The box holding whatever was slotted as the panel.
49115
50858
  * - `panes`: The splitter holding the source and preview panes.
49116
50859
  * - `separator`: Either divider.
50860
+ *
50861
+ * ## CSS States
50862
+ *
50863
+ * These can be used to apply styling when a component is in a given state.
50864
+ *
50865
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49117
50866
  */
49118
50867
  "helix-sandbox": Partial<
49119
50868
  HelixSandboxProps &
@@ -49183,6 +50932,12 @@ export type CustomElementsSolidJs = {
49183
50932
  * Custom selectors for styling elements within the component.
49184
50933
  *
49185
50934
  * - `source`: The editable region.
50935
+ *
50936
+ * ## CSS States
50937
+ *
50938
+ * These can be used to apply styling when a component is in a given state.
50939
+ *
50940
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49186
50941
  */
49187
50942
  "helix-sandbox-source": Partial<
49188
50943
  HelixSandboxSourceProps &
@@ -49254,6 +51009,12 @@ export type CustomElementsSolidJs = {
49254
51009
  *
49255
51010
  * - `caret`: The line and column readout.
49256
51011
  * - `language`: The language readout.
51012
+ *
51013
+ * ## CSS States
51014
+ *
51015
+ * These can be used to apply styling when a component is in a given state.
51016
+ *
51017
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49257
51018
  */
49258
51019
  "helix-sandbox-status-bar": Partial<
49259
51020
  HelixSandboxStatusBarProps &
@@ -49328,6 +51089,12 @@ export type CustomElementsSolidJs = {
49328
51089
  * - `level`: The level a line came in at.
49329
51090
  * - `log`: The scrolling region.
49330
51091
  * - `message`: The text of a line.
51092
+ *
51093
+ * ## CSS States
51094
+ *
51095
+ * These can be used to apply styling when a component is in a given state.
51096
+ *
51097
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49331
51098
  */
49332
51099
  "helix-sandbox-terminal": Partial<
49333
51100
  HelixSandboxTerminalProps &
@@ -49384,6 +51151,12 @@ export type CustomElementsSolidJs = {
49384
51151
  *
49385
51152
  * - `--sandbox-toolbar-gap`: Space between items. (default: `undefined`)
49386
51153
  * - `--sandbox-toolbar-size`: The bar's height. Defaults to a large control. (default: `undefined`)
51154
+ *
51155
+ * ## CSS States
51156
+ *
51157
+ * These can be used to apply styling when a component is in a given state.
51158
+ *
51159
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49387
51160
  */
49388
51161
  "helix-sandbox-toolbar": Partial<
49389
51162
  HelixSandboxToolbarProps &
@@ -49494,10 +51267,12 @@ export type CustomElementsSolidJs = {
49494
51267
  * - `mark`: The invisible point the tooltip is anchored to.
49495
51268
  * - `plot`: The drawing.
49496
51269
  * - `point`: One row, as a point.
51270
+ * - `point-active`: A point of the row a pointer is asking about, beside `point`.
49497
51271
  * - `summary`: How strongly the measures relate, for a reader who cannot see the points.
49498
51272
  * - `svg`: The drawing surface the rules sit on.
49499
51273
  * - `tooltip`: The bubble, forwarded from `Tooltip`.
49500
51274
  * - `tooltip-anchor`: The `Tooltip` element itself.
51275
+ * - `tooltip-arrow`: The bubble's point, forwarded from `Tooltip`.
49501
51276
  * - `tooltip-cell`: One column's name and value inside the tooltip.
49502
51277
  * - `tooltip-label`: The row's own name inside the tooltip.
49503
51278
  * - `tooltip-name`: A column's name inside the tooltip.
@@ -49508,6 +51283,12 @@ export type CustomElementsSolidJs = {
49508
51283
  * - `y-axis`: The levels measured up, beside the plot.
49509
51284
  * - `y-name`: What is measured up.
49510
51285
  * - `y-tick`: One labeled level up.
51286
+ *
51287
+ * ## CSS States
51288
+ *
51289
+ * These can be used to apply styling when a component is in a given state.
51290
+ *
51291
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49511
51292
  */
49512
51293
  "helix-scatter-chart": Partial<
49513
51294
  HelixScatterChartProps &
@@ -49583,6 +51364,17 @@ export type CustomElementsSolidJs = {
49583
51364
  *
49584
51365
  * - `edges`: Where the sideways edge cues are drawn.
49585
51366
  * - `viewport`: The scrolling box.
51367
+ *
51368
+ * ## CSS States
51369
+ *
51370
+ * These can be used to apply styling when a component is in a given state.
51371
+ *
51372
+ * - `more-block-end`: While there is more to scroll to past the block end.
51373
+ * - `more-block-start`: While there is more to scroll back to before the block start.
51374
+ * - `more-inline-end`: While there is more to scroll to past the inline end.
51375
+ * - `more-inline-start`: While there is more to scroll back to before the inline start.
51376
+ * - `scrolls`: While the content is larger than the viewport, on either axis.
51377
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49586
51378
  */
49587
51379
  "helix-scroll-area": Partial<
49588
51380
  HelixScrollAreaProps &
@@ -49838,6 +51630,14 @@ export type CustomElementsSolidJs = {
49838
51630
  * - `surface`: The floating panel.
49839
51631
  * - `trigger`: The closed control, which says what is chosen.
49840
51632
  * - `value`: The chosen option's text inside the trigger.
51633
+ *
51634
+ * ## CSS States
51635
+ *
51636
+ * These can be used to apply styling when a component is in a given state.
51637
+ *
51638
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
51639
+ * - `open`: While the list is open.
51640
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49841
51641
  */
49842
51642
  "helix-select": Partial<
49843
51643
  HelixSelectProps &
@@ -49888,6 +51688,12 @@ export type CustomElementsSolidJs = {
49888
51688
  * Custom selectors for styling elements within the component.
49889
51689
  *
49890
51690
  * - `skeleton`: The placeholder surface.
51691
+ *
51692
+ * ## CSS States
51693
+ *
51694
+ * These can be used to apply styling when a component is in a given state.
51695
+ *
51696
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49891
51697
  */
49892
51698
  "helix-skeleton": Partial<
49893
51699
  HelixSkeletonProps &
@@ -49963,6 +51769,12 @@ export type CustomElementsSolidJs = {
49963
51769
  * Custom selectors for styling elements within the component.
49964
51770
  *
49965
51771
  * - `link`: The anchor, which is what takes focus.
51772
+ *
51773
+ * ## CSS States
51774
+ *
51775
+ * These can be used to apply styling when a component is in a given state.
51776
+ *
51777
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
49966
51778
  */
49967
51779
  "helix-skip-link": Partial<
49968
51780
  HelixSkipLinkProps &
@@ -50172,6 +51984,13 @@ export type CustomElementsSolidJs = {
50172
51984
  * - `marker-label`: The value a mark stands at, when `marker-labels` is set.
50173
51985
  * - `markers`: The row of marks along the track.
50174
51986
  * - `output`: The current value, shown beside it.
51987
+ *
51988
+ * ## CSS States
51989
+ *
51990
+ * These can be used to apply styling when a component is in a given state.
51991
+ *
51992
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
51993
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50175
51994
  */
50176
51995
  "helix-slider": Partial<
50177
51996
  HelixSliderProps &
@@ -50370,6 +52189,12 @@ export type CustomElementsSolidJs = {
50370
52189
  * - `terminus`: The mark on the last value.
50371
52190
  * - `wash-end`: The far stop of the area's gradient.
50372
52191
  * - `wash-start`: The stop of the area's gradient that meets the line.
52192
+ *
52193
+ * ## CSS States
52194
+ *
52195
+ * These can be used to apply styling when a component is in a given state.
52196
+ *
52197
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50373
52198
  */
50374
52199
  "helix-sparkline": Partial<
50375
52200
  HelixSparklineProps &
@@ -50448,6 +52273,12 @@ export type CustomElementsSolidJs = {
50448
52273
  * - `icon`: The mark's box.
50449
52274
  * - `item`: The control.
50450
52275
  * - `label`: The name beside it.
52276
+ *
52277
+ * ## CSS States
52278
+ *
52279
+ * These can be used to apply styling when a component is in a given state.
52280
+ *
52281
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50451
52282
  */
50452
52283
  "helix-speed-dial-item": Partial<
50453
52284
  HelixSpeedDialItemProps &
@@ -50544,6 +52375,13 @@ export type CustomElementsSolidJs = {
50544
52375
  *
50545
52376
  * - `actions`: The region the actions are drawn in.
50546
52377
  * - `trigger`: The default trigger, where none was slotted.
52378
+ *
52379
+ * ## CSS States
52380
+ *
52381
+ * These can be used to apply styling when a component is in a given state.
52382
+ *
52383
+ * - `open`: While the actions are out.
52384
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50547
52385
  */
50548
52386
  "helix-speed-dial": Partial<
50549
52387
  HelixSpeedDialProps &
@@ -50747,6 +52585,12 @@ export type CustomElementsSolidJs = {
50747
52585
  * - `end`: The box holding the second.
50748
52586
  * - `separator`: The divider itself.
50749
52587
  * - `start`: The box holding the first pane.
52588
+ *
52589
+ * ## CSS States
52590
+ *
52591
+ * These can be used to apply styling when a component is in a given state.
52592
+ *
52593
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50750
52594
  */
50751
52595
  "helix-splitter": Partial<
50752
52596
  HelixSplitterProps &
@@ -50797,6 +52641,12 @@ export type CustomElementsSolidJs = {
50797
52641
  * CSS variables available for styling the component.
50798
52642
  *
50799
52643
  * - `--stat-group-gap`: Space between figures. (default: `undefined`)
52644
+ *
52645
+ * ## CSS States
52646
+ *
52647
+ * These can be used to apply styling when a component is in a given state.
52648
+ *
52649
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50800
52650
  */
50801
52651
  "helix-stat-group": Partial<
50802
52652
  HelixStatGroupProps &
@@ -50868,6 +52718,12 @@ export type CustomElementsSolidJs = {
50868
52718
  * CSS variables available for styling the component.
50869
52719
  *
50870
52720
  * - `--stat-value-size`: Size of the figure. (default: `undefined`)
52721
+ *
52722
+ * ## CSS States
52723
+ *
52724
+ * These can be used to apply styling when a component is in a given state.
52725
+ *
52726
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50871
52727
  */
50872
52728
  "helix-stat": Partial<
50873
52729
  HelixStatProps & HelixStatSolidJsProps & BaseProps<HelixStat> & BaseEvents<HelixStat>
@@ -50979,6 +52835,12 @@ export type CustomElementsSolidJs = {
50979
52835
  * - `--steps-current-color`: The mark on the current step. (default: `undefined`)
50980
52836
  * - `--steps-gap`: Space between one step and the next. (default: `undefined`)
50981
52837
  * - `--steps-marker-size`: Size of the mark, glyph or digit. (default: `undefined`)
52838
+ *
52839
+ * ## CSS States
52840
+ *
52841
+ * These can be used to apply styling when a component is in a given state.
52842
+ *
52843
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50982
52844
  */
50983
52845
  "helix-steps": Partial<
50984
52846
  HelixStepsProps &
@@ -51051,6 +52913,12 @@ export type CustomElementsSolidJs = {
51051
52913
  * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
51052
52914
  * - `marker`: The shape carrying the number or the check.
51053
52915
  * - `trail`: The half line running on to the next.
52916
+ *
52917
+ * ## CSS States
52918
+ *
52919
+ * These can be used to apply styling when a component is in a given state.
52920
+ *
52921
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51054
52922
  */
51055
52923
  "helix-step": Partial<
51056
52924
  HelixStepProps & HelixStepSolidJsProps & BaseProps<HelixStep> & BaseEvents<HelixStep>
@@ -51232,6 +53100,14 @@ export type CustomElementsSolidJs = {
51232
53100
  * - `label`: The words beside it.
51233
53101
  * - `thumb`: The part that moves.
51234
53102
  * - `track`: The groove the thumb travels in.
53103
+ *
53104
+ * ## CSS States
53105
+ *
53106
+ * These can be used to apply styling when a component is in a given state.
53107
+ *
53108
+ * - `checked`: While it is on.
53109
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
53110
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51235
53111
  */
51236
53112
  "helix-switch": Partial<
51237
53113
  HelixSwitchProps &
@@ -51275,6 +53151,12 @@ export type CustomElementsSolidJs = {
51275
53151
  * Areas where markup can be added to the component.
51276
53152
  *
51277
53153
  * - `(default)`: The cell's content.
53154
+ *
53155
+ * ## CSS States
53156
+ *
53157
+ * These can be used to apply styling when a component is in a given state.
53158
+ *
53159
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51278
53160
  */
51279
53161
  "helix-table-cell": Partial<
51280
53162
  HelixTableCellProps &
@@ -51296,7 +53178,18 @@ export type CustomElementsSolidJs = {
51296
53178
  *
51297
53179
  * `end` is what a column of numbers wants, so digits of the same magnitude sit
51298
53180
  * above each other. Left unset the cell inherits the table's own alignment,
51299
- * which is `start` for text in either writing direction.
53181
+ * which is `start` for text in either writing direction. `helix-data-table`
53182
+ * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
53183
+ * wrote, and align as the consumer styles them. The heading is this element's
53184
+ * own, and `@fusion.dev/helix` sets it to the same edge in either table.
53185
+ *
53186
+ * **Reflected, because the heading is drawn by a stylesheet and has no other
53187
+ * way to learn it.** Set as a property, which is how React sets it, an
53188
+ * unreflected `align` left no attribute to select on, so the heading stayed at
53189
+ * the start over a column of digits set to the end. It is the author's
53190
+ * declaration and nothing moves it afterwards, so an attribute cannot come to
53191
+ * disagree with the element, which is the reason `open` records a custom
53192
+ * state instead. No default, so an unset column writes nothing onto its host.
51300
53193
  * - `field`: The key this column reads out of a row.
51301
53194
  *
51302
53195
  * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -51408,6 +53301,14 @@ export type CustomElementsSolidJs = {
51408
53301
  * - `grip-mark`: The glyph on it.
51409
53302
  * - `resizer`: The edge a reader drags to change the width, where the column allows it.
51410
53303
  * - `sort`: The button a sortable heading is.
53304
+ *
53305
+ * ## CSS States
53306
+ *
53307
+ * These can be used to apply styling when a component is in a given state.
53308
+ *
53309
+ * - `sorted-ascending`: While the table is sorted by this column, smallest first.
53310
+ * - `sorted-descending`: While the table is sorted by this column, largest first.
53311
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51411
53312
  */
51412
53313
  "helix-table-column": Partial<
51413
53314
  HelixTableColumnProps &
@@ -51483,6 +53384,12 @@ export type CustomElementsSolidJs = {
51483
53384
  * - `empty`: Shown when there are no rows to show.
51484
53385
  * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
51485
53386
  * - `loading`: Shown while the rows are still on their way.
53387
+ *
53388
+ * ## CSS States
53389
+ *
53390
+ * These can be used to apply styling when a component is in a given state.
53391
+ *
53392
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51486
53393
  */
51487
53394
  "helix-table": Partial<
51488
53395
  HelixTableProps &
@@ -51525,6 +53432,12 @@ export type CustomElementsSolidJs = {
51525
53432
  * Areas where markup can be added to the component.
51526
53433
  *
51527
53434
  * - `(default)`: The row's cells.
53435
+ *
53436
+ * ## CSS States
53437
+ *
53438
+ * These can be used to apply styling when a component is in a given state.
53439
+ *
53440
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51528
53441
  */
51529
53442
  "helix-table-row": Partial<
51530
53443
  HelixTableRowProps &
@@ -51585,6 +53498,13 @@ export type CustomElementsSolidJs = {
51585
53498
  * Custom selectors for styling elements within the component.
51586
53499
  *
51587
53500
  * - `panel`: The panel container.
53501
+ *
53502
+ * ## CSS States
53503
+ *
53504
+ * These can be used to apply styling when a component is in a given state.
53505
+ *
53506
+ * - `selected`: While its tab is the one selected.
53507
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51588
53508
  */
51589
53509
  "helix-tab-panel": Partial<
51590
53510
  HelixTabPanelProps &
@@ -51687,6 +53607,12 @@ export type CustomElementsSolidJs = {
51687
53607
  * - `panels`: The panel container.
51688
53608
  * - `tabs`: The tab list.
51689
53609
  * - `indicator`: The mark that travels to the selected tab.
53610
+ *
53611
+ * ## CSS States
53612
+ *
53613
+ * These can be used to apply styling when a component is in a given state.
53614
+ *
53615
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51690
53616
  */
51691
53617
  "helix-tabs": Partial<
51692
53618
  HelixTabsProps & HelixTabsSolidJsProps & BaseProps<HelixTabs> & BaseEvents<HelixTabs>
@@ -51748,6 +53674,13 @@ export type CustomElementsSolidJs = {
51748
53674
  * Custom selectors for styling elements within the component.
51749
53675
  *
51750
53676
  * - `tab`: The tab itself.
53677
+ *
53678
+ * ## CSS States
53679
+ *
53680
+ * These can be used to apply styling when a component is in a given state.
53681
+ *
53682
+ * - `selected`: While it is the tab selected.
53683
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51751
53684
  */
51752
53685
  "helix-tab": Partial<
51753
53686
  HelixTabProps & HelixTabSolidJsProps & BaseProps<HelixTab> & BaseEvents<HelixTab>
@@ -51849,6 +53782,12 @@ export type CustomElementsSolidJs = {
51849
53782
  * - `dismiss`: The remove button, when `dismissible`.
51850
53783
  * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
51851
53784
  * - `prefix`: The category before the label.
53785
+ *
53786
+ * ## CSS States
53787
+ *
53788
+ * These can be used to apply styling when a component is in a given state.
53789
+ *
53790
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51852
53791
  */
51853
53792
  "helix-tag": Partial<
51854
53793
  HelixTagProps & HelixTagSolidJsProps & BaseProps<HelixTag> & BaseEvents<HelixTag>
@@ -51947,6 +53886,12 @@ export type CustomElementsSolidJs = {
51947
53886
  * Custom selectors for styling elements within the component.
51948
53887
  *
51949
53888
  * - `text`: The rendered element.
53889
+ *
53890
+ * ## CSS States
53891
+ *
53892
+ * These can be used to apply styling when a component is in a given state.
53893
+ *
53894
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
51950
53895
  */
51951
53896
  "helix-text": Partial<
51952
53897
  HelixTextProps & HelixTextSolidJsProps & BaseProps<HelixText> & BaseEvents<HelixText>
@@ -52153,6 +54098,13 @@ export type CustomElementsSolidJs = {
52153
54098
  * - `field`: The box holding the control.
52154
54099
  * - `hint`: Help under the field, while nothing is wrong.
52155
54100
  * - `label`: The question, over the field.
54101
+ *
54102
+ * ## CSS States
54103
+ *
54104
+ * These can be used to apply styling when a component is in a given state.
54105
+ *
54106
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
54107
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52156
54108
  */
52157
54109
  "helix-textarea": Partial<
52158
54110
  HelixTextareaProps &
@@ -52425,8 +54377,11 @@ export type CustomElementsSolidJs = {
52425
54377
  * - `picker-list-search`: The region holding the field that narrows the list.
52426
54378
  * - `picker-list-search-field`: The field itself.
52427
54379
  * - `picker-option`: One time in it. Carries `data-between` inside a range.
54380
+ * - `picker-option-between`: A time inside a chosen range, short of either end, beside `picker-option`.
52428
54381
  * - `picker-option-description`: The caption under the words, when there is one.
52429
54382
  * - `picker-option-item`: The row.
54383
+ * - `picker-option-item-active`: The row the keyboard is on.
54384
+ * - `picker-option-item-selected`: The row of a chosen time: the one time, or either end of a range.
52430
54385
  * - `picker-option-label`: The words.
52431
54386
  * - `picker-option-text`: The words and the caption, as one column.
52432
54387
  * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -52438,6 +54393,14 @@ export type CustomElementsSolidJs = {
52438
54393
  * - `time-prefix`: The category before the label.
52439
54394
  * - `trigger`: The control that opens the list.
52440
54395
  * - `trigger-icon`: The mark on the button that opens the clock.
54396
+ *
54397
+ * ## CSS States
54398
+ *
54399
+ * These can be used to apply styling when a component is in a given state.
54400
+ *
54401
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
54402
+ * - `open`: While the clock is open.
54403
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52441
54404
  */
52442
54405
  "helix-time-input": Partial<
52443
54406
  HelixTimeInputProps &
@@ -52630,15 +54593,22 @@ export type CustomElementsSolidJs = {
52630
54593
  * Falling back to `defaultValue` rather than to empty, because a restore
52631
54594
  * with no state is a form the browser has nothing recorded for, which is
52632
54595
  * the same situation as a fresh one.
52633
- * - `reveal() => void`: Each wheel comes to rest on its own answer.
54596
+ * - `reveal() => void`: Each wheel comes to rest on its own answer, and the list on the time it
54597
+ * holds.
52634
54598
  *
52635
54599
  * A dial that opens at midnight when it holds ten in the evening is a dial
52636
54600
  * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
52637
54601
  * snap point when something scrolls, and nothing has. Measured before this,
52638
- * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
54602
+ * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
54603
+ * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
54604
+ * 38 rows down and out of sight, flat on a page and in every Time Input panel.
54605
+ * A list holding several, a range or a set, is left where it is, having no
54606
+ * one row to come to rest on.
52639
54607
  *
52640
- * On every update rather than on the first, because the columns re-render as
52641
- * the value moves and the minute column's contents change with the hour.
54608
+ * The wheels on every update, because the columns re-render as the value
54609
+ * moves and the minute column's contents change with the hour. The list on
54610
+ * the first only, where it is flat on a page: centering it on every choice
54611
+ * would move the row out from under the pointer that chose it.
52642
54612
  *
52643
54613
  * **And it is public, because an update is not the only moment that matters.**
52644
54614
  * Inside a panel this element renders while the panel is still
@@ -52720,10 +54690,19 @@ export type CustomElementsSolidJs = {
52720
54690
  * - `list-search`: The region holding the field that narrows the list.
52721
54691
  * - `list-search-field`: The field itself.
52722
54692
  * - `option`: One time in it. Carries `data-between` inside a range.
54693
+ * - `option-between`: A time inside a chosen range, short of either end, beside `option`.
52723
54694
  * - `option-description`: The caption under the words, when there is one.
52724
54695
  * - `option-item`: The row.
54696
+ * - `option-item-active`: The row the keyboard is on.
54697
+ * - `option-item-selected`: The row of a chosen time: the one time, or either end of a range.
52725
54698
  * - `option-label`: The words.
52726
54699
  * - `option-text`: The words and the caption, as one column.
54700
+ *
54701
+ * ## CSS States
54702
+ *
54703
+ * These can be used to apply styling when a component is in a given state.
54704
+ *
54705
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52727
54706
  */
52728
54707
  "helix-time-picker": Partial<
52729
54708
  HelixTimePickerProps &
@@ -52791,6 +54770,12 @@ export type CustomElementsSolidJs = {
52791
54770
  * - `marker`: The mark on the line.
52792
54771
  * - `rail`: The column holding the mark and the line.
52793
54772
  * - `time`: When it happened.
54773
+ *
54774
+ * ## CSS States
54775
+ *
54776
+ * These can be used to apply styling when a component is in a given state.
54777
+ *
54778
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52794
54779
  */
52795
54780
  "helix-timeline-item": Partial<
52796
54781
  HelixTimelineItemProps &
@@ -52838,6 +54823,12 @@ export type CustomElementsSolidJs = {
52838
54823
  * CSS variables available for styling the component.
52839
54824
  *
52840
54825
  * - `--timeline-gap`: Space between one entry and the next. (default: `undefined`)
54826
+ *
54827
+ * ## CSS States
54828
+ *
54829
+ * These can be used to apply styling when a component is in a given state.
54830
+ *
54831
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52841
54832
  */
52842
54833
  "helix-timeline": Partial<
52843
54834
  HelixTimelineProps &
@@ -52945,6 +54936,12 @@ export type CustomElementsSolidJs = {
52945
54936
  * - `icon-mark`: The tone glyph, where none is slotted.
52946
54937
  * - `item`: The message's own surface.
52947
54938
  * - `timer`: The bar showing how long is left, where a duration was given.
54939
+ *
54940
+ * ## CSS States
54941
+ *
54942
+ * These can be used to apply styling when a component is in a given state.
54943
+ *
54944
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
52948
54945
  */
52949
54946
  "helix-toast-item": Partial<
52950
54947
  HelixToastItemProps &
@@ -53028,6 +55025,12 @@ export type CustomElementsSolidJs = {
53028
55025
  * Custom selectors for styling elements within the component.
53029
55026
  *
53030
55027
  * - `region`: The stack the messages are in.
55028
+ *
55029
+ * ## CSS States
55030
+ *
55031
+ * These can be used to apply styling when a component is in a given state.
55032
+ *
55033
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53031
55034
  */
53032
55035
  "helix-toast": Partial<
53033
55036
  HelixToastProps &
@@ -53216,6 +55219,13 @@ export type CustomElementsSolidJs = {
53216
55219
  * - `label`: The question, over the row.
53217
55220
  * - `row`: The line the track sits on, with whatever flanks it.
53218
55221
  * - `track`: The bar the items sit in.
55222
+ *
55223
+ * ## CSS States
55224
+ *
55225
+ * These can be used to apply styling when a component is in a given state.
55226
+ *
55227
+ * - `invalid`: While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
55228
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53219
55229
  */
53220
55230
  "helix-toggle-group": Partial<
53221
55231
  HelixToggleGroupProps &
@@ -53302,6 +55312,13 @@ export type CustomElementsSolidJs = {
53302
55312
  * Custom selectors for styling elements within the component.
53303
55313
  *
53304
55314
  * - `item`: The button or anchor.
55315
+ *
55316
+ * ## CSS States
55317
+ *
55318
+ * These can be used to apply styling when a component is in a given state.
55319
+ *
55320
+ * - `selected`: While it is on.
55321
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53305
55322
  */
53306
55323
  "helix-toggle": Partial<
53307
55324
  HelixToggleProps &
@@ -53356,6 +55373,12 @@ export type CustomElementsSolidJs = {
53356
55373
  * Custom selectors for styling elements within the component.
53357
55374
  *
53358
55375
  * - `toolbar`: The toolbar container.
55376
+ *
55377
+ * ## CSS States
55378
+ *
55379
+ * These can be used to apply styling when a component is in a given state.
55380
+ *
55381
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53359
55382
  */
53360
55383
  "helix-toolbar": Partial<
53361
55384
  HelixToolbarProps &
@@ -53556,6 +55579,13 @@ export type CustomElementsSolidJs = {
53556
55579
  *
53557
55580
  * - `arrow`: The point, resting against the trigger.
53558
55581
  * - `tooltip`: The bubble.
55582
+ *
55583
+ * ## CSS States
55584
+ *
55585
+ * These can be used to apply styling when a component is in a given state.
55586
+ *
55587
+ * - `open`: While the tooltip shows.
55588
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53559
55589
  */
53560
55590
  "helix-tooltip": Partial<
53561
55591
  HelixTooltipProps &
@@ -53650,6 +55680,12 @@ export type CustomElementsSolidJs = {
53650
55680
  * Custom selectors for styling elements within the component.
53651
55681
  *
53652
55682
  * - `spotlight`: The box over the current target, which paints the scrim.
55683
+ *
55684
+ * ## CSS States
55685
+ *
55686
+ * These can be used to apply styling when a component is in a given state.
55687
+ *
55688
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53653
55689
  */
53654
55690
  "helix-tour": Partial<
53655
55691
  HelixTourProps & HelixTourSolidJsProps & BaseProps<HelixTour> & BaseEvents<HelixTour>
@@ -53736,6 +55772,16 @@ export type CustomElementsSolidJs = {
53736
55772
  * - `next-button`: The inner control.
53737
55773
  * - `skip`: The control that leaves the tour.
53738
55774
  * - `skip-button`: The inner control.
55775
+ *
55776
+ * ## CSS States
55777
+ *
55778
+ * These can be used to apply styling when a component is in a given state.
55779
+ *
55780
+ * - `placed-bottom`: While the panel sits below its target.
55781
+ * - `placed-left`: While the panel sits to the left of its target.
55782
+ * - `placed-right`: While the panel sits to the right of its target.
55783
+ * - `placed-top`: While the panel sits above its target.
55784
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53739
55785
  */
53740
55786
  "helix-tour-stop": Partial<
53741
55787
  HelixTourStopProps &
@@ -53882,6 +55928,14 @@ export type CustomElementsSolidJs = {
53882
55928
  * - `label`: The label text.
53883
55929
  * - `row`: The clickable label row.
53884
55930
  * - `toggle`: The expand and collapse control.
55931
+ *
55932
+ * ## CSS States
55933
+ *
55934
+ * These can be used to apply styling when a component is in a given state.
55935
+ *
55936
+ * - `open`: While its children are shown.
55937
+ * - `selected`: While it is selected.
55938
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
53885
55939
  */
53886
55940
  "helix-tree-item": Partial<
53887
55941
  HelixTreeItemProps &
@@ -54003,6 +56057,12 @@ export type CustomElementsSolidJs = {
54003
56057
  * - `tree`: The tree container.
54004
56058
  * - `empty`: Shown when there are no rows to show.
54005
56059
  * - `loading`: Shown while the rows are still on their way.
56060
+ *
56061
+ * ## CSS States
56062
+ *
56063
+ * These can be used to apply styling when a component is in a given state.
56064
+ *
56065
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54006
56066
  */
54007
56067
  "helix-tree": Partial<
54008
56068
  HelixTreeProps & HelixTreeSolidJsProps & BaseProps<HelixTree> & BaseEvents<HelixTree>
@@ -54086,6 +56146,12 @@ export type CustomElementsSolidJs = {
54086
56146
  *
54087
56147
  * - `direction`: The direction as a word, for readers who are not looking.
54088
56148
  * - `icon`: The arrow.
56149
+ *
56150
+ * ## CSS States
56151
+ *
56152
+ * These can be used to apply styling when a component is in a given state.
56153
+ *
56154
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54089
56155
  */
54090
56156
  "helix-trend": Partial<
54091
56157
  HelixTrendProps &
@@ -54172,9 +56238,16 @@ export type CustomElementsSolidJs = {
54172
56238
  *
54173
56239
  * - `container`: The `listitem`, which the button sits in.
54174
56240
  * - `item`: The row, which is a button.
56241
+ * - `item-current`: The row of the entry the player is on, beside `item`.
54175
56242
  * - `label`: The name and whatever follows it.
54176
56243
  * - `media`: The leading column.
54177
56244
  * - `thumbnail`: The image `poster` falls back to.
56245
+ *
56246
+ * ## CSS States
56247
+ *
56248
+ * These can be used to apply styling when a component is in a given state.
56249
+ *
56250
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54178
56251
  */
54179
56252
  "helix-video-playlist-item": Partial<
54180
56253
  HelixVideoPlaylistItemProps &
@@ -54269,6 +56342,12 @@ export type CustomElementsSolidJs = {
54269
56342
  * - `menu-title`: The name of the submenu that is showing.
54270
56343
  * - `poster`: An entry's still, where it has one.
54271
56344
  * - `trigger`: The button that opens it.
56345
+ *
56346
+ * ## CSS States
56347
+ *
56348
+ * These can be used to apply styling when a component is in a given state.
56349
+ *
56350
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54272
56351
  */
54273
56352
  "helix-video-playlist-menu": Partial<
54274
56353
  HelixVideoPlaylistMenuProps &
@@ -54356,6 +56435,12 @@ export type CustomElementsSolidJs = {
54356
56435
  *
54357
56436
  * - `items`: The list of entries.
54358
56437
  * - `player`: The region holding the player.
56438
+ *
56439
+ * ## CSS States
56440
+ *
56441
+ * These can be used to apply styling when a component is in a given state.
56442
+ *
56443
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54359
56444
  */
54360
56445
  "helix-video-playlist": Partial<
54361
56446
  HelixVideoPlaylistProps &
@@ -54632,6 +56717,7 @@ export type CustomElementsSolidJs = {
54632
56717
  * - `poster`: What covers it before it plays.
54633
56718
  * - `previous`: Asks for the previous one.
54634
56719
  * - `remote`: Play on another device, where one is available.
56720
+ * - `remote-pressed`: The remote control while the picture is on another device, beside `remote`.
54635
56721
  * - `rewind`: The control that goes back ten seconds.
54636
56722
  * - `scrubber`: Where it is, and where to go.
54637
56723
  * - `sound`: The speaker and its level, which are one control.
@@ -54641,6 +56727,12 @@ export type CustomElementsSolidJs = {
54641
56727
  * - `time`: The position and the duration.
54642
56728
  * - `video`: The video itself.
54643
56729
  * - `volume`: How loud.
56730
+ *
56731
+ * ## CSS States
56732
+ *
56733
+ * These can be used to apply styling when a component is in a given state.
56734
+ *
56735
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54644
56736
  */
54645
56737
  "helix-video": Partial<
54646
56738
  HelixVideoProps &
@@ -54705,6 +56797,12 @@ export type CustomElementsSolidJs = {
54705
56797
  * - `after`: The space standing in for rows below the window.
54706
56798
  * - `before`: The space standing in for rows above the window.
54707
56799
  * - `viewport`: The scrolling box.
56800
+ *
56801
+ * ## CSS States
56802
+ *
56803
+ * These can be used to apply styling when a component is in a given state.
56804
+ *
56805
+ * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
54708
56806
  */
54709
56807
  "helix-virtual-list": Partial<
54710
56808
  HelixVirtualListProps &