@fusion.dev/helix-headless 0.105.0 → 0.107.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 (162) hide show
  1. package/custom-elements.json +7324 -3890
  2. package/dist/accordion/item/accordion-item.d.ts +17 -16
  3. package/dist/accordion/root/accordion-root.d.ts +13 -17
  4. package/dist/announcement/root/announcement-root.d.ts +24 -31
  5. package/dist/app-header/root/app-header-root.d.ts +14 -14
  6. package/dist/area-chart/root/area-chart-root.d.ts +29 -48
  7. package/dist/avatar/group/avatar-group.d.ts +6 -8
  8. package/dist/avatar/root/avatar-root.d.ts +11 -11
  9. package/dist/badge/root/badge-root.d.ts +14 -15
  10. package/dist/bar-chart/root/bar-chart-root.d.ts +40 -44
  11. package/dist/blockquote/root/blockquote-root.d.ts +5 -7
  12. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +25 -33
  13. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +12 -11
  14. package/dist/button/root/button-root.d.ts +16 -17
  15. package/dist/button-group/root/button-group-root.d.ts +9 -10
  16. package/dist/callout/root/callout-root.d.ts +10 -15
  17. package/dist/canvas/edge/canvas-edge.d.ts +21 -21
  18. package/dist/canvas/node/canvas-node.d.ts +43 -45
  19. package/dist/canvas/root/canvas-root.d.ts +100 -99
  20. package/dist/card/root/card-root.d.ts +10 -12
  21. package/dist/carousel/root/carousel-root.d.ts +32 -33
  22. package/dist/chat/composer/chat-composer.d.ts +24 -26
  23. package/dist/chat/message/chat-message.d.ts +30 -33
  24. package/dist/chat/root/chat-root.d.ts +63 -80
  25. package/dist/checkbox/root/checkbox-root.d.ts +30 -32
  26. package/dist/checkbox-group/root/checkbox-group-root.d.ts +25 -25
  27. package/dist/code/root/code-root.d.ts +6 -10
  28. package/dist/code-block/root/code-block-root.d.ts +35 -48
  29. package/dist/color-input/root/color-input-root.d.ts +52 -56
  30. package/dist/color-picker/root/color-picker-root.d.ts +49 -49
  31. package/dist/combobox/root/combobox-root.d.ts +52 -53
  32. package/dist/command/root/command-root.d.ts +35 -40
  33. package/dist/copy-button/root/copy-button-root.d.ts +24 -26
  34. package/dist/data-table/root/data-table-root.d.ts +106 -107
  35. package/dist/date-input/root/date-input-root.d.ts +54 -53
  36. package/dist/date-picker/root/date-picker-root.d.ts +25 -21
  37. package/dist/description-list/item/description-list-item.d.ts +7 -7
  38. package/dist/description-list/root/description-list-root.d.ts +10 -15
  39. package/dist/dialog/root/dialog-root.d.ts +22 -19
  40. package/dist/divider/root/divider-root.d.ts +12 -13
  41. package/dist/donut-chart/root/donut-chart-root.d.ts +19 -20
  42. package/dist/drawer/root/drawer-root.d.ts +19 -18
  43. package/dist/drilldown/item/drilldown-item.d.ts +28 -28
  44. package/dist/drilldown/root/drilldown-root.d.ts +22 -28
  45. package/dist/element-events.generated.js +7 -0
  46. package/dist/empty/root/empty-root.d.ts +16 -19
  47. package/dist/file-input/root/file-input-root.d.ts +32 -32
  48. package/dist/filter-input/chip/filter-chip.d.ts +36 -39
  49. package/dist/filter-input/field/filter-field.d.ts +25 -31
  50. package/dist/filter-input/menu/filter-menu.d.ts +50 -47
  51. package/dist/filter-input/operator/filter-operator.d.ts +15 -20
  52. package/dist/filter-input/root/filter-input-root.d.ts +80 -98
  53. package/dist/format-date/root/format-date-root.d.ts +19 -27
  54. package/dist/heatmap/root/heatmap-root.d.ts +40 -41
  55. package/dist/icon/root/icon-root.d.ts +21 -23
  56. package/dist/icon-button/root/icon-button-root.d.ts +12 -14
  57. package/dist/image/root/image-root.d.ts +30 -30
  58. package/dist/input/root/input-root.d.ts +36 -35
  59. package/dist/kbd/root/kbd-root.d.ts +13 -15
  60. package/dist/legend/root/legend-root.d.ts +18 -16
  61. package/dist/lightbox/item/lightbox-item.d.ts +13 -15
  62. package/dist/lightbox/root/lightbox-root.d.ts +40 -41
  63. package/dist/line-chart/root/line-chart-root.d.ts +20 -29
  64. package/dist/list/item/list-item.d.ts +17 -22
  65. package/dist/list/root/list-root.d.ts +6 -7
  66. package/dist/listbox/root/listbox-root.d.ts +42 -41
  67. package/dist/loader/root/loader-root.d.ts +16 -20
  68. package/dist/map/area/map-area.d.ts +6 -0
  69. package/dist/map/area/map-area.js +3 -0
  70. package/dist/map/buildings/map-buildings.d.ts +45 -0
  71. package/dist/map/buildings/map-buildings.js +37 -0
  72. package/dist/map/contours/map-contours.d.ts +61 -0
  73. package/dist/map/contours/map-contours.js +54 -0
  74. package/dist/map/index.d.ts +7 -0
  75. package/dist/map/index.js +5 -0
  76. package/dist/map/landcover/map-landcover.d.ts +47 -0
  77. package/dist/map/landcover/map-landcover.js +37 -0
  78. package/dist/map/marker/map-marker.d.ts +11 -4
  79. package/dist/map/marker/map-marker.js +13 -1
  80. package/dist/map/points/map-points.d.ts +7 -1
  81. package/dist/map/points/map-points.js +3 -0
  82. package/dist/map/raster/map-raster.d.ts +84 -0
  83. package/dist/map/raster/map-raster.js +96 -0
  84. package/dist/map/root/map-root.d.ts +169 -7
  85. package/dist/map/root/map-root.js +352 -4
  86. package/dist/map/route/map-route.d.ts +6 -0
  87. package/dist/map/route/map-route.js +3 -0
  88. package/dist/map/terrain/map-terrain.d.ts +68 -0
  89. package/dist/map/terrain/map-terrain.js +58 -0
  90. package/dist/megamenu/root/megamenu-root.d.ts +27 -25
  91. package/dist/menu/item/menu-item.d.ts +30 -31
  92. package/dist/menu/root/menu-root.d.ts +25 -29
  93. package/dist/meter/root/meter-root.d.ts +22 -21
  94. package/dist/navigation/root/navigation-root.d.ts +13 -16
  95. package/dist/notifications/group/notification-group.d.ts +27 -28
  96. package/dist/notifications/notification/notification.d.ts +35 -42
  97. package/dist/notifications/root/notifications-root.d.ts +22 -24
  98. package/dist/number-input/root/number-input-root.d.ts +46 -50
  99. package/dist/object-inspector/root/object-inspector-root.d.ts +46 -58
  100. package/dist/option/group/option-group.d.ts +11 -11
  101. package/dist/option/root/option-root.d.ts +28 -33
  102. package/dist/outline/root/outline-root.d.ts +18 -17
  103. package/dist/pagination/root/pagination-root.d.ts +37 -39
  104. package/dist/pagination/size/pagination-size.d.ts +37 -43
  105. package/dist/pagination/summary/pagination-summary.d.ts +12 -14
  106. package/dist/pin-input/root/pin-input-root.d.ts +32 -38
  107. package/dist/popover/root/popover-root.d.ts +16 -21
  108. package/dist/progress/root/progress-root.d.ts +16 -14
  109. package/dist/qr-code/root/qr-code-root.d.ts +22 -25
  110. package/dist/quote/root/quote-root.d.ts +5 -6
  111. package/dist/radio/group/radio-group.d.ts +26 -28
  112. package/dist/radio/root/radio-root.d.ts +24 -28
  113. package/dist/rating/root/rating-root.d.ts +27 -30
  114. package/dist/scatter-chart/root/scatter-chart-root.d.ts +43 -55
  115. package/dist/scroll-area/root/scroll-area-root.d.ts +15 -21
  116. package/dist/select/root/select-root.d.ts +41 -44
  117. package/dist/skeleton/root/skeleton-root.d.ts +7 -8
  118. package/dist/skip-link/root/skip-link-root.d.ts +21 -28
  119. package/dist/slider/root/slider-root.d.ts +36 -39
  120. package/dist/sparkline/root/sparkline-root.d.ts +22 -28
  121. package/dist/speed-dial/item/speed-dial-item.d.ts +21 -21
  122. package/dist/speed-dial/root/speed-dial-root.d.ts +25 -27
  123. package/dist/splitter/root/splitter-root.d.ts +37 -41
  124. package/dist/stat/group/stat-group.d.ts +4 -4
  125. package/dist/stat/root/stat-root.d.ts +8 -9
  126. package/dist/steps/root/steps-root.d.ts +11 -14
  127. package/dist/steps/step/step.d.ts +22 -29
  128. package/dist/switch/root/switch-root.d.ts +20 -24
  129. package/dist/table/cell/table-cell.d.ts +18 -8
  130. package/dist/table/cell/table-cell.js +5 -1
  131. package/dist/table/column/table-column.d.ts +62 -55
  132. package/dist/table/root/table-root.d.ts +16 -17
  133. package/dist/table/row/table-row.d.ts +3 -3
  134. package/dist/tabs/panel/tab-panel.d.ts +3 -3
  135. package/dist/tabs/root/tabs-root.d.ts +19 -17
  136. package/dist/tabs/tab/tab.d.ts +6 -6
  137. package/dist/tag/root/tag-root.d.ts +11 -12
  138. package/dist/textarea/root/textarea-root.d.ts +29 -32
  139. package/dist/time-input/root/time-input-root.d.ts +70 -69
  140. package/dist/time-picker/root/time-picker-root.d.ts +58 -66
  141. package/dist/timeline/item/timeline-item.d.ts +18 -24
  142. package/dist/timeline/root/timeline-root.d.ts +13 -21
  143. package/dist/toast/item/toast-item.d.ts +21 -22
  144. package/dist/toast/root/toast-root.d.ts +18 -23
  145. package/dist/toggle/group/toggle-group.d.ts +23 -25
  146. package/dist/toggle/root/toggle-root.d.ts +8 -8
  147. package/dist/toolbar/root/toolbar-root.d.ts +7 -10
  148. package/dist/tooltip/root/tooltip-root.d.ts +41 -47
  149. package/dist/tour/root/tour-root.d.ts +24 -26
  150. package/dist/tour/stop/tour-stop.d.ts +39 -48
  151. package/dist/tree/item/tree-item.d.ts +23 -25
  152. package/dist/tree/root/tree-root.d.ts +13 -12
  153. package/dist/trend/root/trend-root.d.ts +18 -19
  154. package/dist/video/root/video-root.d.ts +108 -101
  155. package/dist/video-playlist/item/video-playlist-item.d.ts +23 -28
  156. package/dist/video-playlist/menu/video-playlist-menu.d.ts +17 -21
  157. package/dist/video-playlist/root/video-playlist-root.d.ts +21 -25
  158. package/dist/virtual-list/root/virtual-list-root.d.ts +27 -26
  159. package/package.json +5 -5
  160. package/types/jsx.d.ts +10363 -9520
  161. package/types/svelte.d.ts +5 -0
  162. package/types/vue.d.ts +1440 -1032
@@ -2,21 +2,18 @@ import { HelixFormElement, KeyboardNavigationController } from '@fusion.dev/heli
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
4
4
  /**
5
- * @summary A score out of a few marks, given or shown.
5
+ * @summary A row of marks, such as stars, for giving or showing a score.
6
6
  *
7
7
  * @description
8
- * **Half marks decide the shape.** Supporting them means the value is not an
9
- * integer and the targets are not the marks: five stars at a half step is ten
10
- * places to press. The pointer handling and `step` are built around that
11
- * rather than added over it.
8
+ * Supports half marks, so the value is not always an integer and the press
9
+ * targets are not the marks: five stars at a half step give ten places to
10
+ * press. The pointer handling and `step` are built around half marks.
12
11
  *
13
- * **A partial mark is the whole mark, clipped**, not a second glyph filled to
14
- * the middle: the fill is the same marks over the same marks, cut off partway,
15
- * so any mark works and any fraction does.
12
+ * A partial mark is the full mark, clipped. The filled marks are drawn over the
13
+ * empty marks and cut off partway, so any mark and any fraction work.
16
14
  *
17
- * **Read-only is not this control grayed out.** The commoner use is showing a
18
- * score nobody is being asked for, which is a reading rather than a disabled
19
- * input, and it is announced as one.
15
+ * A read-only rating displays a score, which is the most common use. It is
16
+ * announced as a displayed value and does not look disabled.
20
17
  *
21
18
  * @since 0.1.0
22
19
  * @status stable
@@ -24,27 +21,27 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
24
21
  * @aliases Stars, Score, Review score
25
22
  * @documentation https://fusion.dev/helix/components/rating
26
23
  *
27
- * @event {Event} change - Announced with it, the choice being the commit.
28
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the score changes, and cancelable.
29
- * @event {Event} input - Announced once the value has moved.
24
+ * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
25
+ * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
26
+ * @event {Event} input - The score changed.
30
27
  *
31
- * @csspart feedback - What is wrong with it.
32
- * @csspart field - The row: the marks, and the score beside them.
28
+ * @csspart feedback - The message that says what is wrong.
29
+ * @csspart field - The row that holds the marks and the score next to them.
33
30
  * @csspart fill - The filled marks, clipped to the score.
34
- * @csspart hint - Help under the marks, while nothing is wrong.
35
- * @csspart label - The question, over the marks.
36
- * @csspart mark - One mark, in either layer.
31
+ * @csspart hint - Help text under the marks, shown while there is no feedback.
32
+ * @csspart label - The label above the marks.
33
+ * @csspart mark - One mark, in the fill or the track.
37
34
  * @csspart marks - The row of marks.
38
- * @csspart option - One place a reader can press, which is one step.
35
+ * @csspart option - One target you can press, for one step.
39
36
  * @csspart track - The unfilled marks.
40
- * @csspart value - The score written out, under `show-value`.
37
+ * @csspart value - The score as a number, shown with `show-value`.
41
38
  *
42
- * @cssproperty --rating-full - How many marks are wholly filled.
43
- * @cssproperty --rating-part - How much of the next mark is filled, 0 to 1.
44
- * @cssproperty --rating-step - Which step along the row a target is, counting from one, whatever `min` leaves open.
45
- * @cssproperty --rating-steps - How many steps the whole row holds, which is `max` over `step`.
39
+ * @cssproperty --rating-full - The number of marks that are fully filled.
40
+ * @cssproperty --rating-part - How much of the next mark is filled, from 0 to 1.
41
+ * @cssproperty --rating-step - The target's position among all the steps in the row, counting from one. Steps below `min` still count.
42
+ * @cssproperty --rating-steps - The number of steps in the whole row: `max` divided by `step`.
46
43
  *
47
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
44
+ * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
48
45
  */
49
46
  export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
50
47
  protected readonly announcesInput = false;
@@ -53,7 +50,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
53
50
  */
54
51
  max: number;
55
52
  /**
56
- * The lowest score a reader can give, which is what clearing returns to.
53
+ * The lowest score that can be given. A cleared rating shows this score.
57
54
  *
58
55
  * Zero rather than one, because "no rating" and "the worst rating" are
59
56
  * different answers and a control that cannot express the first has to
@@ -96,14 +93,14 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
96
93
  */
97
94
  min: number;
98
95
  /**
99
- * Whether this shows a score rather than asks for one.
96
+ * Shows the score without letting users change it.
100
97
  *
101
98
  * A readout is not a control that has been switched off. It takes no focus,
102
99
  * answers no keys, and reads as one thing: see the note on the class.
103
100
  */
104
101
  readOnly: boolean;
105
102
  /**
106
- * Whether the score is written out beside the marks.
103
+ * Shows the score as a number next to the marks.
107
104
  *
108
105
  * Marks say roughly, and a number says exactly. Four and a bit stars is not a
109
106
  * reading anyone can repeat, which is why a product's average is nearly always
@@ -123,7 +120,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
123
120
  */
124
121
  step: number;
125
122
  /**
126
- * How the score is read out, where "3.5 out of 5" is not what it should say.
123
+ * The text screen readers read for the score, in place of "3.5 out of 5".
127
124
  *
128
125
  * A rating out of five is one of the few places a screen reader gets a worse
129
126
  * answer from the value than from a sentence: "3.5" alone is a number without
@@ -20,42 +20,30 @@ export interface ScatterField {
20
20
  }
21
21
  declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
22
22
  /**
23
- * @summary Whether two measures move together, one point per row.
23
+ * @summary A chart that shows whether two measures move together, with one point per row.
24
24
  *
25
25
  * @description
26
- * The chart for a relation rather than a series. The table's first numeric
27
- * column is measured across and every other numeric column is measured up, one
28
- * point per row, so a table of countries with a column of income and a column
29
- * of life expectancy draws one dot for each country. More numeric columns are
30
- * more series against the same across, each in its own color.
26
+ * A scatter chart shows how two measures relate. The table's first numeric
27
+ * column is measured across, every other numeric column is measured up, and
28
+ * each row is one point. A table of countries with an income column and a life
29
+ * expectancy column draws one point for each country. Each additional numeric
30
+ * column is another series, in its own color.
31
31
  *
32
- * **Both axes are measured, so both are labeled.** A line chart's readings are
33
- * named along the bottom and its values are read from the tooltip; here the
34
- * horizontal position is itself a value, and a point with no scale under it says
35
- * nothing about how far along it is. The ticks sit at round numbers and the
36
- * range is widened to them, so the plot's edges are numbers a reader can name.
32
+ * Both axes are labeled, because both positions are values. The ticks sit at
33
+ * round numbers, and the range extends to them.
37
34
  *
38
- * **What a reader without the picture is told is how strongly the two relate**,
39
- * because that is the question a scatter is drawn to answer and the one a table
40
- * of the same numbers makes hardest to see. The summary gives each series'
41
- * correlation coefficient and how many points it rests on; the table has every
42
- * number, and the drawing is `aria-hidden`.
35
+ * The summary gives each series' correlation coefficient and its number of
36
+ * points. The table has every number, and the drawing is `aria-hidden`.
43
37
  *
44
- * **The points are elements, not shapes in the drawing.** The drawing stretches
45
- * to its box, and a circle in a stretched space is an ellipse, so each point is
46
- * a `<span>` placed by percentage over it, which is how `LineChart` draws its
47
- * termini and for the same reason.
38
+ * Each point is a `<span>` placed by percentage over the drawing, as
39
+ * `LineChart` places its end points, so points stay round when the drawing
40
+ * stretches.
48
41
  *
49
- * **Left to right on every page, the one chart here that is.** A bar or a line
50
- * chart's across is the order its readings are named in, which follows the
51
- * line of text and turns with it. Here it is a measure, and a measure has a
52
- * direction of its own: more is to the right in every script, as a number line
53
- * is. So the plot, its axes and the names at their ends sit in a `plane` part
54
- * that carries `dir="ltr"`, which holds the y axis on the left and the points,
55
- * rules, ticks, pointer and tooltip mark where a left-to-right page puts them,
56
- * with no stylesheet asked to know. The names carry `dir="auto"`, so one written
57
- * in Arabic or Hebrew still reads its own way; the summary is outside the plane
58
- * and the bubble is told the page's direction, both being words.
42
+ * The plot runs left to right in every text direction, as a number line does.
43
+ * The plot, its axes, and the axis names sit in a `plane` part with
44
+ * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
45
+ * reads in its own direction. The summary and the tooltip bubble follow the
46
+ * page's direction.
59
47
  *
60
48
  * @since 0.1.0
61
49
  * @status stable
@@ -63,47 +51,47 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
63
51
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
64
52
  * @documentation https://fusion.dev/helix/components/scatter-chart
65
53
  *
66
- * @csspart gridline - One rule across the plot, under `gridlines`.
54
+ * @csspart gridline - One line across the plot, drawn when `gridlines` is set.
67
55
  * @csspart mark - The invisible point the tooltip is anchored to.
68
- * @csspart plane - The plot, both axes and their names, left to right on every page. The grid they are laid out in.
56
+ * @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
69
57
  * @csspart plot - The drawing.
70
58
  * @csspart point - One row, as a point.
71
- * @csspart point-active - A point of the row a pointer is asking about, beside `point`.
72
- * @csspart summary - How strongly the measures relate, for a reader who cannot see the points.
73
- * @csspart svg - The drawing surface the rules sit on.
59
+ * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
60
+ * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
61
+ * @csspart svg - The drawing surface the gridlines sit on.
74
62
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
75
63
  * @csspart tooltip-anchor - The `Tooltip` element itself.
76
64
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
77
- * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, so on its top edge, beside `tooltip-arrow`.
78
- * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, so on its right edge, beside `tooltip-arrow`.
79
- * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, so on its left edge, beside `tooltip-arrow`.
80
- * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
81
- * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
65
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
66
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, on its right edge. Set alongside `tooltip-arrow`.
67
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, on its left edge. Set alongside `tooltip-arrow`.
68
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
69
+ * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
82
70
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
83
71
  * @csspart tooltip-label - The row's own name inside the tooltip.
84
- * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
72
+ * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
85
73
  * @csspart tooltip-name - A column's name inside the tooltip.
86
- * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
87
- * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
74
+ * @csspart tooltip-right - The bubble while it is right of the reading. Set alongside `tooltip`.
75
+ * @csspart tooltip-top - The bubble while it is above the reading. Set alongside `tooltip`.
88
76
  * @csspart tooltip-value - A column's value inside the tooltip.
89
- * @csspart x-axis - The levels measured across, under the plot.
90
- * @csspart x-name - What is measured across.
91
- * @csspart x-tick - One labeled level across. A part of its own rather than a shared `tick`, because `::part()` cannot tell which axis a tick is on.
92
- * @csspart y-axis - The levels measured up, beside the plot.
93
- * @csspart y-name - What is measured up.
94
- * @csspart y-tick - One labeled level up.
77
+ * @csspart x-axis - The values along the horizontal axis, under the plot.
78
+ * @csspart x-name - The name of the horizontal measure.
79
+ * @csspart x-tick - One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
80
+ * @csspart y-axis - The values along the vertical axis, beside the plot.
81
+ * @csspart y-name - The name of the vertical measure.
82
+ * @csspart y-tick - One labeled value on the vertical axis.
95
83
  *
96
- * @cssproperty --chart-point-x - Where a point sits across, as a percentage. Written by the component.
97
- * @cssproperty --chart-point-y - Where a point sits up, as a percentage from the top. Written by the component.
98
- * @cssproperty --chart-tick - Where a tick sits along its axis, as a percentage. Written by the component.
84
+ * @cssproperty --chart-point-x - A point's horizontal position, as a percentage. The component writes it.
85
+ * @cssproperty --chart-point-y - A point's vertical position, as a percentage from the top. The component writes it.
86
+ * @cssproperty --chart-tick - A tick's position along its axis, as a percentage. The component writes it.
99
87
  */
100
88
  export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
101
89
  /**
102
- * What to call the strength of the relation in the summary.
90
+ * The word the summary uses for the strength of the relation.
103
91
  */
104
92
  correlationLabel: string;
105
93
  /**
106
- * Which rules are drawn across the plot, if any.
94
+ * Which gridlines are drawn across the plot, if any.
107
95
  *
108
96
  * Both axes are measured, so the values name an axis rather than a role:
109
97
  * `x` rules the levels across, `y` the levels up. A bare `gridlines`, or
@@ -112,7 +100,7 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
112
100
  */
113
101
  gridlines?: 'both' | 'x' | 'y';
114
102
  /**
115
- * What to call a row in the summary, which counts them.
103
+ * The word the summary uses for a row when it counts them.
116
104
  */
117
105
  pointsLabel: string;
118
106
  /** The points as last drawn, which the pointer searches. */
@@ -3,28 +3,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  /** Which edges have something past them, as a set of tokens. */
4
4
  declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inline-end'];
5
5
  /**
6
- * @summary A scrolling box that says there is more.
6
+ * @summary A scrolling box that shows which edges have more content past them.
7
7
  *
8
8
  * @description
9
- * **The whole component is one fact a stylesheet cannot work out for itself:
10
- * which edges have content past them.** A fade at the bottom of a list is easy
11
- * to draw and impossible to decide, because CSS has no reading of scroll
12
- * position. So this measures and says, in a custom state per edge, and the
13
- * styled tier draws whatever it likes on the edges named.
9
+ * Measures which edges have content past them and sets one custom state per
10
+ * edge. CSS cannot read scroll position, so a stylesheet cannot work this out
11
+ * on its own. The styled tier draws a fade on each edge that has a state.
14
12
  *
15
- * **States rather than attributes**, so an element that upgrades after a
16
- * framework rendered its markup does not hand that framework markup it did not
17
- * write. A stylesheet asks `:host(:state(more-block-end))`.
13
+ * Custom states keep an element that upgrades after a framework rendered it
14
+ * from adding markup the framework did not write. Select them with
15
+ * `:host(:state(more-block-end))`.
18
16
  *
19
- * **A scrolling region takes the keyboard when it scrolls, and not before.**
20
- * A box a reader can only reach with a pointer is a box some readers cannot
21
- * read at all, which is what `tabindex` answers here. Only while it overflows:
22
- * a tab stop on a box with nothing to scroll is a stop that does nothing, and a
23
- * form full of them is worse than the problem.
17
+ * While the content overflows, the region gets a `tabindex`, so keyboard users
18
+ * can scroll it. When nothing overflows, it is not a tab stop.
24
19
  *
25
- * `role="region"` only with a `label`, because an unnamed region is an
26
- * announcement with no content: a screen reader says "region" and the reader
27
- * has learned nothing they did not already know.
20
+ * It has `role="region"` only when you set a `label`, because a screen reader
21
+ * announces an unnamed region as only "region".
28
22
  *
29
23
  * @since 0.1.0
30
24
  * @status stable
@@ -32,9 +26,9 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
32
26
  * @aliases Scroller, Overflow, Scroll container
33
27
  * @documentation https://fusion.dev/helix/components/scroll-area
34
28
  *
35
- * @slot - What scrolls.
29
+ * @slot - The content that scrolls.
36
30
  *
37
- * @csspart edges - Where the sideways edge cues are drawn.
31
+ * @csspart edges - The layer that draws the cues on the inline start and end edges.
38
32
  * @csspart viewport - The scrolling box.
39
33
  *
40
34
  * @cssstate more-block-end - While there is more to scroll to past the block end.
@@ -45,7 +39,7 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
45
39
  */
46
40
  export declare class HelixHeadlessScrollArea extends HelixElement {
47
41
  /**
48
- * Names the region, for a reader arriving at it out of context.
42
+ * The region's name, read by screen readers.
49
43
  *
50
44
  * Without one there is no region: see the note on the class.
51
45
  */
@@ -60,7 +54,7 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
60
54
  private scrolls;
61
55
  private watcher;
62
56
  /**
63
- * The box that actually scrolls, for anything that needs to move it.
57
+ * The element that scrolls. Use it to scroll the content from your code.
64
58
  *
65
59
  * **Public because the alternative is silence.** The scrolling box is inside
66
60
  * this shadow root: a consumer holding a reference to this element holds the
@@ -3,22 +3,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  import '../../listbox/index.js';
4
4
  declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
5
5
  /**
6
- * @summary A closed list that opens to be chosen from.
6
+ * @summary A control that opens a list of options to choose from.
7
7
  *
8
8
  * @description
9
- * **A trigger and a `Listbox`, not a listbox reimplemented behind a button.**
10
- * The list this opens is the same element a consumer can use on its own, with
11
- * the same keyboard, the same filtering and the same multi-select rules. What
12
- * Select adds is the closing: a trigger that says what is chosen, a surface
13
- * that floats, and somewhere for focus to go back to.
9
+ * A trigger that opens a `Listbox`. The list is the same element you can use on
10
+ * its own, with the same keyboard behavior, filtering, and multi-select rules.
11
+ * Select adds a trigger that shows what is chosen, a floating surface, and a
12
+ * place for focus to return to when the list closes.
14
13
  *
15
- * The options are the consumer's, in the consumer's light DOM, slotted through
16
- * into the listbox. That is why the listbox walks through slots to find them:
17
- * from its point of view the options belong to something else.
14
+ * Your options stay in your light DOM and are slotted through into the listbox,
15
+ * so the listbox looks through slots to find them.
18
16
  *
19
- * **What it does not do is duplicate the value.** `Select` owns it, hands it
20
- * down, and takes changes back; the listbox is the thing being operated and not
21
- * a second place the answer lives.
17
+ * `Select` owns the value, passes it down to the listbox, and takes changes
18
+ * back, so the value lives in one place.
22
19
  *
23
20
  * @since 0.1.0
24
21
  * @status stable
@@ -27,46 +24,46 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
27
24
  * @documentation https://fusion.dev/helix/components/select
28
25
  *
29
26
  * @slot - The options, and any groups of them.
30
- * @slot end - After it, for a count, a unit, or a clear button.
31
- * @slot hint - Richer than a string.
32
- * @slot indicator - The mark on the trigger saying this opens, usually a caret.
33
- * @slot label - Richer than a string.
34
- * @slot start - Before the chosen value, for an icon or a prefix.
27
+ * @slot end - Content after the chosen value, such as a count, a unit, or a clear button.
28
+ * @slot hint - The hint, for content richer than plain text.
29
+ * @slot indicator - The icon on the trigger that shows it opens, usually a caret.
30
+ * @slot label - The label, for content richer than plain text.
31
+ * @slot start - Content before the chosen value, such as an icon or a prefix.
35
32
  *
36
- * @event {Event} change - Announced once the value has moved.
37
- * @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the answer changes. Cancelable: refusing it takes the decision and nothing moves.
38
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
39
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: refusing it takes the decision and nothing moves.
40
- * @event {Event} input - Announced once the value has moved.
41
- * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
33
+ * @event {Event} change - Fired after the value changes.
34
+ * @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the value is about to change. Cancelable: canceling it stops the change and leaves the decision to you.
35
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
36
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
37
+ * @event {Event} input - Fired after the value changes.
38
+ * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
42
39
  *
43
- * @csspart feedback - What is wrong with it.
40
+ * @csspart feedback - The message that says what is wrong with the value.
44
41
  * @csspart hint - Help under the trigger.
45
- * @csspart indicator - The caret saying the control opens. Replaced by slotting one.
46
- * @csspart label - The question, over the trigger.
47
- * @csspart listbox - The list inside it.
48
- * @csspart listbox-empty - Shown when a filter has hidden everything.
49
- * @csspart listbox-feedback - What is wrong with it.
50
- * @csspart listbox-filter-icon - The mark beside that field.
51
- * @csspart listbox-filter-mark - The glyph beside the filter field, where none is slotted.
42
+ * @csspart indicator - The caret that shows the control opens. Replaced by content in the `indicator` slot.
43
+ * @csspart label - The label above the trigger.
44
+ * @csspart listbox - The list inside the panel.
45
+ * @csspart listbox-empty - The text shown when the filter hides every option.
46
+ * @csspart listbox-feedback - The inner list's message that says what is wrong with the value.
47
+ * @csspart listbox-filter-icon - The icon beside the filter field.
48
+ * @csspart listbox-filter-mark - The default icon beside the filter field, shown when none is slotted.
52
49
  * @csspart listbox-hint - Help under the list.
53
- * @csspart listbox-items - The list itself.
54
- * @csspart listbox-label - The question, over the list.
55
- * @csspart listbox-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
56
- * @csspart listbox-loading - Shown while the options are still on their way.
57
- * @csspart listbox-search - The region holding the field that narrows the list.
58
- * @csspart listbox-search-field - The field itself.
50
+ * @csspart listbox-items - The list of options.
51
+ * @csspart listbox-label - The label above the list.
52
+ * @csspart listbox-live - The inner list's `live` part, the region screen readers announce its empty and loading text from.
53
+ * @csspart listbox-loading - The text shown while the options load.
54
+ * @csspart listbox-search - The region that holds the filter field.
55
+ * @csspart listbox-search-field - The filter field.
59
56
  * @csspart surface - The floating panel.
60
- * @csspart trigger - The closed control, which says what is chosen.
57
+ * @csspart trigger - The closed control, which shows the chosen value.
61
58
  * @csspart value - The chosen option's text inside the trigger.
62
59
  *
63
- * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
60
+ * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
64
61
  * @cssstate open - While the list is open.
65
62
  */
66
63
  export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
67
64
  protected readonly aria: AriaForwardController;
68
65
  /**
69
- * What it says where there are none.
66
+ * The text shown when no options match the filter.
70
67
  */
71
68
  emptyText: string;
72
69
  /**
@@ -77,7 +74,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
77
74
  */
78
75
  filterable: boolean;
79
76
  /**
80
- * Whether the options are still on their way.
77
+ * Whether the options are still loading.
81
78
  *
82
79
  * Passed straight to the list, which is where the rows are and so where the
83
80
  * message belongs. Two components saying "Loading" about one request is a
@@ -85,11 +82,11 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
85
82
  */
86
83
  loading: boolean;
87
84
  /**
88
- * What the list says while they are on their way.
85
+ * The text shown while the options load.
89
86
  */
90
87
  loadingText: string;
91
88
  /**
92
- * Whether more than one option can be the answer.
89
+ * Whether more than one option can be chosen.
93
90
  */
94
91
  multiple: boolean;
95
92
  /**
@@ -106,7 +103,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
106
103
  */
107
104
  get selectedIndex(): number;
108
105
  set selectedIndex(at: number);
109
- /** Which kind of chooser this is, in the platform's two words. */
106
+ /** The kind of select, as the platform names it: `select-one` or `select-multiple`. */
110
107
  get type(): string;
111
108
  /**
112
109
  * The list inside the surface, or nothing where there is no DOM to hold one.
@@ -1,16 +1,15 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type PropertyValues, type TemplateResult } from 'lit';
3
3
  /**
4
- * @summary Stands in for content that has not arrived.
4
+ * @summary A placeholder shown in place of content that is still loading.
5
5
  *
6
6
  * @description
7
- * Carries `aria-busy` and a polite live region, so a reader using a screen
8
- * reader is told the region is filling rather than told nothing and left to
9
- * wonder. Both go through `ElementInternals`, which writes no attribute.
7
+ * Sets `aria-busy` and a polite live region, so a screen reader announces that
8
+ * the region is loading. Both are set through `ElementInternals`, which writes
9
+ * no attributes.
10
10
  *
11
- * Holds no `shape`. Whether a placeholder is a line, a block or a circle is
12
- * presentation, and putting it here would give the headless tier an appearance
13
- * property, which is the one thing that tier is for not having.
11
+ * There is no `shape` property. Whether a placeholder is a line, a block, or a
12
+ * circle is presentation, which belongs to the styled tier.
14
13
  *
15
14
  * @since 0.1.0
16
15
  * @status stable
@@ -18,7 +17,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
18
17
  * @aliases Placeholder, Shimmer, Ghost
19
18
  * @documentation https://fusion.dev/helix/components/skeleton
20
19
  *
21
- * @csspart skeleton - The placeholder surface.
20
+ * @csspart skeleton - The placeholder shape.
22
21
  */
23
22
  export declare class HelixHeadlessSkeleton extends HelixElement {
24
23
  protected willUpdate(changed: PropertyValues): void;
@@ -1,35 +1,28 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import { type TemplateResult } from 'lit';
3
3
  /**
4
- * @summary The first stop on a page, which moves the reader past everything
5
- * repeated on every page.
4
+ * @summary A link at the start of a page that moves keyboard focus past the
5
+ * header to the main content.
6
6
  *
7
7
  * @description
8
- * A keyboard reader arriving on a page tabs through the whole header before
9
- * reaching anything the page is about, and does it again on the next page. This
10
- * is the control that skips it: first in the document, and pointed at the
11
- * content.
8
+ * Without a skip link, keyboard users tab through the whole header on every
9
+ * page before they reach the content. The skip link goes first in the document
10
+ * and points at the content.
12
11
  *
13
- * **It moves focus, not only the scroll position.** An in-page link on its own
14
- * scrolls to its target and leaves focus behind, so the next Tab goes to
15
- * whatever followed the link, which is the header it was meant to skip. Pressed,
16
- * this focuses the target. A target that cannot take focus, which is most of
17
- * them, since `<main>` cannot, is given `tabindex="-1"` for as long as it holds
18
- * focus and has it taken off again when focus leaves, so the page ends up as the
19
- * consumer wrote it.
12
+ * Pressing it moves focus as well as the scroll position. An in-page link alone
13
+ * scrolls but leaves focus behind, so the next Tab lands in the header. A
14
+ * target that cannot take focus, such as `<main>`, gets `tabindex="-1"` while
15
+ * it has focus, and the attribute is removed when focus leaves.
20
16
  *
21
- * **The address is left alone.** The press is handled rather than followed, so
22
- * no `#main` lands in the URL and no history entry is added, which matters to a
23
- * router reading the hash. The anchor is still a real anchor with a real
24
- * `href`, so before any script has run the link does what a plain link does:
25
- * it scrolls there and moves the point the next Tab starts from.
17
+ * The press is handled in script, so no `#main` is added to the URL and no
18
+ * history entry is created, and a router that reads the hash is not affected.
19
+ * The anchor has a real `href`, so before any script runs it works as a plain
20
+ * link: it scrolls to the target and moves the point the next Tab starts from.
26
21
  *
27
- * **Hidden until focused is the styled tier's**, being a decision about paint,
28
- * and on this tier the link is simply a link. A headless consumer hides
29
- * `::part(link)` while the host is not `:focus-within` and shows it when it is.
30
- * Hiding with `display: none` or `visibility: hidden` takes it out of the tab
31
- * order as well, and a skip link nobody can reach is the most common way one is
32
- * broken.
22
+ * The styled tier hides the link until it has focus. On this tier the link is
23
+ * always visible. To hide it yourself, hide `::part(link)` while the host is
24
+ * not `:focus-within`. Do not use `display: none` or `visibility: hidden`,
25
+ * because they also remove the link from the tab order.
33
26
  *
34
27
  * @since 0.1.0
35
28
  * @status stable
@@ -37,15 +30,15 @@ import { type TemplateResult } from 'lit';
37
30
  * @aliases Skip navigation, Skip to content
38
31
  * @documentation https://fusion.dev/helix/components/skip-link
39
32
  *
40
- * @slot - The link's words. Falls back to `label`.
33
+ * @slot - The link's text. Defaults to `label`.
41
34
  *
42
- * @csspart link - The anchor, which is what takes focus.
35
+ * @csspart link - The anchor. It takes the focus.
43
36
  */
44
37
  export declare class HelixHeadlessSkipLink extends HelixElement {
45
38
  /** Focus goes to the anchor inside, so the host is never the focus target. */
46
39
  static shadowRootOptions: ShadowRootInit;
47
40
  /**
48
- * Where the reader is sent, as an in-page fragment.
41
+ * The in-page fragment the link moves focus to, such as `#main`.
49
42
  *
50
43
  * `#main` by default, because that is the id the content region almost always
51
44
  * has; a page whose content is somewhere else says so. Anything that is not a
@@ -54,7 +47,7 @@ export declare class HelixHeadlessSkipLink extends HelixElement {
54
47
  */
55
48
  href: string;
56
49
  /**
57
- * The link's words, for the common case of plain text.
50
+ * The link's text, when it is plain text.
58
51
  *
59
52
  * The fallback of the default slot, so slotted content replaces it rather than
60
53
  * appearing beside it.