@fusion.dev/helix 0.104.1 → 0.106.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 (198) hide show
  1. package/custom-elements.json +13098 -4950
  2. package/dist/accordion/item/accordion-item.d.ts +9 -10
  3. package/dist/accordion/root/accordion-root.d.ts +8 -9
  4. package/dist/announcement/root/announcement-root.d.ts +7 -7
  5. package/dist/app-header/root/app-header-root.d.ts +14 -12
  6. package/dist/area-chart/root/area-chart-root.d.ts +23 -32
  7. package/dist/aura/root/aura-root.d.ts +32 -31
  8. package/dist/avatar/group/avatar-group.d.ts +8 -11
  9. package/dist/avatar/root/avatar-root.d.ts +4 -5
  10. package/dist/badge/root/badge-root.d.ts +7 -8
  11. package/dist/bar-chart/root/bar-chart-root.d.ts +17 -16
  12. package/dist/blockquote/root/blockquote-root.d.ts +4 -5
  13. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +7 -7
  14. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +2 -2
  15. package/dist/button/root/button-root.d.ts +16 -13
  16. package/dist/button-group/root/button-group-root.d.ts +6 -6
  17. package/dist/callout/root/callout-root.d.ts +8 -8
  18. package/dist/canvas/edge/canvas-edge.d.ts +3 -3
  19. package/dist/canvas/node/canvas-node.d.ts +17 -18
  20. package/dist/canvas/root/canvas-root.d.ts +18 -19
  21. package/dist/card/root/card-root.d.ts +14 -14
  22. package/dist/carousel/root/carousel-root.d.ts +11 -14
  23. package/dist/chat/composer/chat-composer.d.ts +10 -11
  24. package/dist/chat/message/chat-message.d.ts +18 -18
  25. package/dist/chat/root/chat-root.d.ts +15 -18
  26. package/dist/checkbox/root/checkbox-root.d.ts +17 -16
  27. package/dist/checkbox-group/root/checkbox-group-root.d.ts +6 -5
  28. package/dist/code/root/code-root.d.ts +9 -9
  29. package/dist/code-block/root/code-block-root.d.ts +14 -15
  30. package/dist/color-input/root/color-input-root.d.ts +13 -18
  31. package/dist/color-picker/root/color-picker-root.d.ts +26 -27
  32. package/dist/combobox/root/combobox-root.css.js +3 -2
  33. package/dist/combobox/root/combobox-root.d.ts +8 -8
  34. package/dist/command/root/command-root.d.ts +5 -6
  35. package/dist/copy-button/root/copy-button-root.d.ts +4 -5
  36. package/dist/data-table/root/data-table-root.d.ts +30 -37
  37. package/dist/date-input/root/date-input-root.d.ts +15 -17
  38. package/dist/date-picker/root/date-picker-root.d.ts +11 -12
  39. package/dist/description-list/item/description-list-item.d.ts +2 -2
  40. package/dist/description-list/root/description-list-root.d.ts +13 -14
  41. package/dist/dialog/root/dialog-root.d.ts +9 -10
  42. package/dist/divider/root/divider-root.d.ts +11 -12
  43. package/dist/donut-chart/root/donut-chart-root.d.ts +12 -15
  44. package/dist/drawer/root/drawer-root.d.ts +14 -13
  45. package/dist/drilldown/item/drilldown-item.d.ts +3 -4
  46. package/dist/drilldown/root/drilldown-root.d.ts +6 -9
  47. package/dist/element-events.generated.js +19 -1
  48. package/dist/empty/root/empty-root.d.ts +3 -4
  49. package/dist/file-input/root/file-input-root.d.ts +8 -12
  50. package/dist/filter-input/chip/filter-chip.d.ts +11 -10
  51. package/dist/filter-input/field/filter-field.d.ts +7 -8
  52. package/dist/filter-input/menu/filter-menu.d.ts +7 -8
  53. package/dist/filter-input/operator/filter-operator.d.ts +5 -5
  54. package/dist/filter-input/root/filter-input-root.d.ts +25 -27
  55. package/dist/flex/root/flex-root.d.ts +9 -14
  56. package/dist/format-date/root/format-date-root.d.ts +5 -8
  57. package/dist/grid/root/grid-root.d.ts +13 -11
  58. package/dist/heatmap/root/heatmap-root.d.ts +34 -31
  59. package/dist/icon/root/icon-root.d.ts +6 -6
  60. package/dist/icon-button/root/icon-button-root.d.ts +9 -10
  61. package/dist/image/root/image-root.d.ts +10 -10
  62. package/dist/input/root/input-root.d.ts +10 -13
  63. package/dist/kbd/root/kbd-root.d.ts +6 -7
  64. package/dist/legend/root/legend-root.d.ts +19 -20
  65. package/dist/lightbox/item/lightbox-item.d.ts +4 -5
  66. package/dist/lightbox/root/lightbox-root.d.ts +13 -16
  67. package/dist/line-chart/root/line-chart-root.d.ts +24 -25
  68. package/dist/list/item/list-item.d.ts +7 -8
  69. package/dist/list/root/list-root.d.ts +7 -9
  70. package/dist/listbox/root/listbox-root.d.ts +8 -9
  71. package/dist/loader/root/loader-root.d.ts +5 -7
  72. package/dist/map/area/map-area.css.d.ts +1 -0
  73. package/dist/map/area/map-area.css.js +24 -0
  74. package/dist/map/area/map-area.d.ts +27 -0
  75. package/dist/map/area/map-area.js +20 -0
  76. package/dist/map/buildings/map-buildings.css.d.ts +1 -0
  77. package/dist/map/buildings/map-buildings.css.js +27 -0
  78. package/dist/map/buildings/map-buildings.d.ts +28 -0
  79. package/dist/map/buildings/map-buildings.js +20 -0
  80. package/dist/map/contours/map-contours.css.d.ts +1 -0
  81. package/dist/map/contours/map-contours.css.js +8 -0
  82. package/dist/map/contours/map-contours.d.ts +25 -0
  83. package/dist/map/contours/map-contours.js +16 -0
  84. package/dist/map/index.d.ts +10 -0
  85. package/dist/map/index.js +10 -0
  86. package/dist/map/landcover/map-landcover.css.d.ts +1 -0
  87. package/dist/map/landcover/map-landcover.css.js +5 -0
  88. package/dist/map/landcover/map-landcover.d.ts +25 -0
  89. package/dist/map/landcover/map-landcover.js +16 -0
  90. package/dist/map/marker/map-marker.css.d.ts +1 -0
  91. package/dist/map/marker/map-marker.css.js +340 -0
  92. package/dist/map/marker/map-marker.d.ts +51 -0
  93. package/dist/map/marker/map-marker.js +29 -0
  94. package/dist/map/points/map-points.css.d.ts +1 -0
  95. package/dist/map/points/map-points.css.js +82 -0
  96. package/dist/map/points/map-points.d.ts +29 -0
  97. package/dist/map/points/map-points.js +20 -0
  98. package/dist/map/position/map-position.css.d.ts +1 -0
  99. package/dist/map/position/map-position.css.js +239 -0
  100. package/dist/map/position/map-position.d.ts +41 -0
  101. package/dist/map/position/map-position.js +26 -0
  102. package/dist/map/raster/map-raster.css.d.ts +1 -0
  103. package/dist/map/raster/map-raster.css.js +4 -0
  104. package/dist/map/raster/map-raster.d.ts +23 -0
  105. package/dist/map/raster/map-raster.js +16 -0
  106. package/dist/map/root/map-root.css.js +252 -1
  107. package/dist/map/root/map-root.d.ts +13 -12
  108. package/dist/map/root/map-root.js +4 -0
  109. package/dist/map/route/map-route.css.d.ts +1 -0
  110. package/dist/map/route/map-route.css.js +25 -0
  111. package/dist/map/route/map-route.d.ts +31 -0
  112. package/dist/map/route/map-route.js +23 -0
  113. package/dist/map/terrain/map-terrain.css.d.ts +1 -0
  114. package/dist/map/terrain/map-terrain.css.js +12 -0
  115. package/dist/map/terrain/map-terrain.d.ts +27 -0
  116. package/dist/map/terrain/map-terrain.js +16 -0
  117. package/dist/megamenu/root/megamenu-root.d.ts +14 -14
  118. package/dist/menu/item/menu-item.d.ts +8 -8
  119. package/dist/menu/root/menu-root.d.ts +9 -9
  120. package/dist/meter/root/meter-root.d.ts +29 -38
  121. package/dist/navigation/root/navigation-root.d.ts +4 -5
  122. package/dist/notifications/group/notification-group.d.ts +9 -13
  123. package/dist/notifications/notification/notification.d.ts +27 -33
  124. package/dist/notifications/root/notifications-root.d.ts +9 -11
  125. package/dist/number-input/root/number-input-root.d.ts +16 -18
  126. package/dist/object-inspector/root/object-inspector-root.d.ts +11 -12
  127. package/dist/option/group/option-group.d.ts +3 -4
  128. package/dist/option/root/option-root.d.ts +7 -8
  129. package/dist/orb/root/orb-root.d.ts +30 -36
  130. package/dist/outline/root/outline-root.d.ts +8 -10
  131. package/dist/pagination/root/pagination-root.d.ts +13 -23
  132. package/dist/pagination/size/pagination-size.d.ts +7 -7
  133. package/dist/pagination/summary/pagination-summary.d.ts +3 -4
  134. package/dist/pin-input/root/pin-input-root.d.ts +8 -11
  135. package/dist/popover/root/popover-root.d.ts +14 -16
  136. package/dist/progress/root/progress-root.d.ts +10 -13
  137. package/dist/qr-code/root/qr-code-root.d.ts +13 -14
  138. package/dist/quote/root/quote-root.d.ts +2 -2
  139. package/dist/radio/group/radio-group.d.ts +6 -6
  140. package/dist/radio/root/radio-root.d.ts +16 -19
  141. package/dist/rating/root/rating-root.d.ts +9 -9
  142. package/dist/sandbox/preview/sandbox-preview.d.ts +18 -19
  143. package/dist/sandbox/root/sandbox-root.d.ts +27 -27
  144. package/dist/sandbox/source/sandbox-source.d.ts +9 -12
  145. package/dist/sandbox/status-bar/sandbox-status-bar.d.ts +9 -11
  146. package/dist/sandbox/terminal/sandbox-terminal.d.ts +13 -15
  147. package/dist/sandbox/toolbar/sandbox-toolbar.d.ts +8 -9
  148. package/dist/scatter-chart/root/scatter-chart-root.d.ts +18 -29
  149. package/dist/scroll-area/root/scroll-area-root.d.ts +13 -13
  150. package/dist/select/root/select-root.d.ts +14 -14
  151. package/dist/shared/mixin-control-surface/mixin-control-surface.d.ts +8 -2
  152. package/dist/shared/viewport/viewport.css.js +7 -2
  153. package/dist/skeleton/root/skeleton-root.d.ts +6 -7
  154. package/dist/skip-link/root/skip-link-root.d.ts +16 -19
  155. package/dist/slider/root/slider-root.d.ts +16 -18
  156. package/dist/sparkline/root/sparkline-root.d.ts +16 -24
  157. package/dist/speed-dial/item/speed-dial-item.d.ts +5 -5
  158. package/dist/speed-dial/root/speed-dial-root.d.ts +3 -4
  159. package/dist/splitter/root/splitter-root.d.ts +23 -32
  160. package/dist/stat/group/stat-group.d.ts +4 -5
  161. package/dist/stat/root/stat-root.d.ts +4 -5
  162. package/dist/steps/root/steps-root.d.ts +12 -13
  163. package/dist/switch/root/switch-root.d.ts +13 -17
  164. package/dist/table/cell/table-cell.css.js +5 -0
  165. package/dist/table/cell/table-cell.d.ts +4 -4
  166. package/dist/table/column/table-column.d.ts +3 -4
  167. package/dist/table/root/table-root.d.ts +5 -6
  168. package/dist/table/row/table-row.d.ts +3 -3
  169. package/dist/tabs/panel/tab-panel.d.ts +2 -3
  170. package/dist/tabs/root/tabs-root.d.ts +12 -11
  171. package/dist/tabs/tab/tab.d.ts +4 -4
  172. package/dist/tag/root/tag-root.d.ts +10 -11
  173. package/dist/text/root/text-root.d.ts +22 -30
  174. package/dist/textarea/root/textarea-root.d.ts +4 -5
  175. package/dist/time-input/root/time-input-root.d.ts +12 -14
  176. package/dist/time-picker/root/time-picker-root.d.ts +8 -10
  177. package/dist/timeline/item/timeline-item.d.ts +2 -2
  178. package/dist/timeline/root/timeline-root.d.ts +3 -3
  179. package/dist/toast/item/toast-item.d.ts +7 -8
  180. package/dist/toast/root/toast-root.d.ts +10 -12
  181. package/dist/toggle/group/toggle-group.d.ts +10 -12
  182. package/dist/toggle/root/toggle-root.d.ts +2 -3
  183. package/dist/toolbar/root/toolbar-root.d.ts +3 -3
  184. package/dist/tooltip/root/tooltip-root.d.ts +10 -10
  185. package/dist/tour/root/tour-root.d.ts +5 -6
  186. package/dist/tour/stop/tour-stop.d.ts +14 -14
  187. package/dist/tree/item/tree-item.d.ts +6 -9
  188. package/dist/tree/root/tree-root.d.ts +7 -8
  189. package/dist/trend/root/trend-root.d.ts +12 -19
  190. package/dist/video/root/video-root.d.ts +15 -21
  191. package/dist/video-playlist/item/video-playlist-item.d.ts +4 -4
  192. package/dist/video-playlist/menu/video-playlist-menu.d.ts +14 -16
  193. package/dist/video-playlist/root/video-playlist-root.d.ts +5 -5
  194. package/dist/virtual-list/root/virtual-list-root.d.ts +6 -8
  195. package/package.json +6 -6
  196. package/types/jsx.d.ts +14221 -11621
  197. package/types/svelte.d.ts +10 -0
  198. package/types/vue.d.ts +2679 -1951
@@ -2,15 +2,14 @@ import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  import '../../copy-button/index.js';
4
4
  /**
5
- * @summary A value read as a tree: collapse what you do not need, count what
6
- * you collapsed, copy the part you do.
5
+ * @summary A structured value shown as a tree, where you can close branches,
6
+ * see how many entries each holds, and copy any part.
7
7
  *
8
8
  * @description
9
- * Code Block's frame around a tree of entries. Each type takes its ink from the
10
- * syntax set the code blocks already use, a key in one, a string in another and
11
- * a number, a boolean and a null in theirs, and each row is one line with a long
12
- * string ending in an ellipsis, so every row is one height and a windowed tree
13
- * never has to measure them one by one.
9
+ * The styled tier draws the tree in the Code Block frame. Keys and each type of
10
+ * value take their colors from the syntax colors code blocks use. Each row is
11
+ * one line, and a long string ends in an ellipsis, so every row has the same
12
+ * height and a windowed tree does not measure rows one by one.
14
13
  *
15
14
  * @since 0.1.0
16
15
  * @status stable
@@ -18,11 +17,11 @@ import '../../copy-button/index.js';
18
17
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
19
18
  * @documentation https://fusion.dev/helix/components/object-inspector
20
19
  *
21
- * @cssproperty --object-inspector-background-color - Ground under the tree.
22
- * @cssproperty --object-inspector-block-size - Height of the scrolling box, when windowed.
23
- * @cssproperty --object-inspector-border-color - The edge around the tree and its header.
24
- * @cssproperty --object-inspector-header-background-color - The bar carrying the label.
25
- * @cssproperty --object-inspector-radius - Corner radius of the tree.
20
+ * @cssproperty --object-inspector-background-color - The background of the tree.
21
+ * @cssproperty --object-inspector-block-size - The height of the scrolling box when `windowed` is set.
22
+ * @cssproperty --object-inspector-border-color - The color of the edge around the tree and its header.
23
+ * @cssproperty --object-inspector-header-background-color - The background of the bar that holds the label.
24
+ * @cssproperty --object-inspector-radius - The corner radius of the tree.
26
25
  */
27
26
  export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {
28
27
  static tier: string;
@@ -1,12 +1,11 @@
1
1
  import { HelixHeadlessOptionGroup } from '@fusion.dev/helix-headless/option';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A named run of options inside a listbox.
4
+ * @summary A labeled group of options inside a listbox.
5
5
  *
6
6
  * @description
7
- * The heading is set small and quiet, because it is a divider that happens to
8
- * have words on it: a run of options is read as a list and the heading is what
9
- * tells you which list, not something to read on its own.
7
+ * The heading is small and muted. It labels the run of options below it and is
8
+ * not meant to be read as content of its own.
10
9
  *
11
10
  * @since 0.1.0
12
11
  * @status stable
@@ -4,10 +4,9 @@ import type { CSSResultGroup } from 'lit';
4
4
  * @summary One choice in a listbox.
5
5
  *
6
6
  * @description
7
- * Two states that look different on purpose: chosen, which is a fact about the
8
- * value, and active, which is where the keyboard is. A list that draws them the
9
- * same way leaves a reader arrowing through it unable to tell what they have
10
- * picked from what they are looking at.
7
+ * Selected and active look different. Selected is the value, and active is
8
+ * where the keyboard is. If both looked the same, you could not tell what you
9
+ * picked from where you are while moving through the list with the arrow keys.
11
10
  *
12
11
  * @since 0.1.0
13
12
  * @status stable
@@ -15,10 +14,10 @@ import type { CSSResultGroup } from 'lit';
15
14
  * @aliases Item, Choice
16
15
  * @documentation https://fusion.dev/helix/components/option
17
16
  *
18
- * @cssproperty --option-active-color - Wash behind the option the keyboard is on.
19
- * @cssproperty --option-block-padding - Space above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list.
20
- * @cssproperty --option-padding - Space before the label, shared with a group heading.
21
- * @cssproperty --option-radius - Corner radius of the row. A listbox and a select flatten it.
17
+ * @cssproperty --option-active-color - The background of the option the keyboard is on.
18
+ * @cssproperty --option-block-padding - The space above and below the option. `Command` increases it for its longer list of rows.
19
+ * @cssproperty --option-padding - The space before the label, shared with a group heading.
20
+ * @cssproperty --option-radius - The corner radius of the row. A listbox and a select remove it.
22
21
  */
23
22
  export declare class HelixOption extends HelixHeadlessOption {
24
23
  static styles: CSSResultGroup;
@@ -2,44 +2,37 @@ import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
3
3
  import { type OrbState } from '../shapes.js';
4
4
  /**
5
- * @summary Says what an agent is doing, as a shape rather than a word.
5
+ * @summary An animated shape that shows what an agent is doing.
6
6
  *
7
7
  * @description
8
- * A cloud of dots, drawn to a canvas, with one shape per state. `connecting`
9
- * and `thinking` are the same leaning sash and differ in how agitated it is;
10
- * `waiting` and `done` are the same settled ball at different tempos, which is
11
- * the difference between not having started and having finished. `fetching` is
12
- * a globe with a light going round it, `listening` a closed sphere with a
13
- * ripple crossing it, and `working` a ring.
8
+ * A cloud of dots drawn to a canvas, with one shape per state:
14
9
  *
15
- * **None of them is a separate drawing.** Each is the same banded grid given
16
- * different numbers, so changing state interpolates the numbers and every frame
17
- * in between is a whole shape. A loader that cuts between pictures says the
18
- * work restarted; one that carries a shape into the next says it moved on.
10
+ * - `connecting` and `thinking`: the same leaning sash, differing in how
11
+ * agitated it is.
12
+ * - `waiting` and `done`: the same settled ball at different tempos.
13
+ * - `fetching`: a globe with a light moving around it.
14
+ * - `listening`: a closed sphere with a ripple crossing it.
15
+ * - `working`: a ring.
19
16
  *
20
- * **A change is measured before it is played.** Two states differing in one
21
- * small number are given less time than a sash becoming a ring, and the
22
- * silhouette leads what the shape is doing, so a light is never seen orbiting
23
- * something that has not finished becoming round.
17
+ * Every state is the same banded grid with different parameters. Changing state
18
+ * interpolates the parameters, so every frame in between is a complete shape. A
19
+ * small change gets less time than a large one, such as a sash becoming a ring.
20
+ * The outline changes first, so the light starts orbiting only after the shape
21
+ * is round.
24
22
  *
25
- * **Nothing spins.** The whole cloud holds still and everything that moves is
26
- * moving inside it, which is what makes it read as thought rather than as a
27
- * thing being rotated. The one exception is the light, which travels because a
28
- * ring of evenly spaced dots is unchanged by rotation: without something fixed
29
- * in space passing over them, a state that turns has nothing a reader can see
30
- * turning.
23
+ * The cloud does not rotate, and all movement happens inside it. The exception
24
+ * is the light, which travels because a ring of evenly spaced dots looks the
25
+ * same when rotated, so a turning state needs something fixed passing over it.
31
26
  *
32
- * **The palette is read from the tokens**, not given as colors: a dot's ink is
33
- * mixed toward the ground by how far away it is, and both ends come from
34
- * `--orb-color` and `--orb-ground`. That is what makes depth survive a theme
35
- * change without the consumer restating anything.
27
+ * Colors come from `--orb-color` and `--orb-ground`. Each dot's color is mixed
28
+ * toward the ground color by its depth, so depth holds when the theme changes.
36
29
  *
37
- * **It stops when nobody is looking**, off screen and in a background tab, and
38
- * `prefers-reduced-motion` gets one still frame rather than an empty box.
30
+ * The animation stops when the orb is off screen or in a background tab. With
31
+ * `prefers-reduced-motion`, it draws one still frame.
39
32
  *
40
- * Styled only, and with behavior, which the tier split does not otherwise
41
- * allow: the behavior is drawing dots to a canvas, so there is no structure a
42
- * consumer could restyle and nothing for a headless twin to hold.
33
+ * The orb is styled only and has behavior, which the tier split does not
34
+ * otherwise allow. The behavior is drawing dots to a canvas, so there is no
35
+ * structure to restyle and nothing for a headless element to hold.
43
36
  *
44
37
  * @since 0.8.0
45
38
  * @status stable
@@ -47,16 +40,17 @@ import { type OrbState } from '../shapes.js';
47
40
  * @aliases Thinking, Activity, Agent, Status
48
41
  * @documentation https://fusion.dev/helix/components/orb
49
42
  *
50
- * @csspart canvas - The surface the cloud is drawn into.
43
+ * @csspart canvas - The canvas the dots are drawn on.
51
44
  *
52
- * @cssproperty --orb-color - Ink of the nearest dots. Defaults to `currentColor`.
53
- * @cssproperty --orb-ground - What the far dots are mixed toward. Defaults to the page's background.
54
- * @cssproperty --orb-size - Diameter. Overrides `size`.
45
+ * @cssproperty --orb-color - The color of the nearest dots. Defaults to `currentColor`.
46
+ * @cssproperty --orb-ground - The color the farthest dots fade toward. Defaults to the page's background.
47
+ * @cssproperty --orb-size - The diameter. Overrides `size`.
55
48
  */
56
49
  export declare class HelixOrb extends HelixElement {
57
50
  static styles: CSSResultGroup;
58
51
  /**
59
- * Accessible name, where the state's own word is not the right one.
52
+ * The name read by screen readers. Defaults to the name of the state, such
53
+ * as "Thinking".
60
54
  *
61
55
  * Empty is the state's word, which is what most callers want and none of them
62
56
  * should have to write. A caller with something better to say says it here:
@@ -64,7 +58,7 @@ export declare class HelixOrb extends HelixElement {
64
58
  */
65
59
  label: string;
66
60
  /**
67
- * Diameter relative to the surrounding text.
61
+ * The diameter, relative to the surrounding text.
68
62
  *
69
63
  * **`Loader`'s three steps, because the two are swapped for each other.** An
70
64
  * orb and a spinner are the same job drawn differently, a wait a reader is
@@ -1,18 +1,16 @@
1
1
  import { HelixHeadlessOutline } from '@fusion.dev/helix-headless/outline';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Links to the headings on this page, marking the one being read.
4
+ * @summary Links to the headings on the page, with the section in view marked.
5
5
  *
6
6
  * @description
7
- * A rule down the leading edge with the current section lit along it, which is
8
- * the shape a table of contents has taken since printed marginalia: the line
9
- * says the list is one thing, and the lit segment says where in it you are.
7
+ * A rule runs down the leading edge, and the current section is highlighted
8
+ * along it.
10
9
  *
11
- * Nesting is the consumer's, expressed as `data-level` on a link, and the
12
- * levels are the heading levels: `2` through `6` each take one more step of
13
- * `--outline-indent`, and a link with no `data-level` is the top one. An
14
- * outline that read heading levels itself would have to look at the document,
15
- * and the document is not always where the headings are.
10
+ * Set nesting with `data-level` on each link, using the heading levels: `2`
11
+ * through `6` each add one step of `--outline-indent`, and a link without
12
+ * `data-level` is at the top level. The outline does not read heading levels
13
+ * from the document, because the headings are not always in the document.
16
14
  *
17
15
  * @since 0.1.0
18
16
  * @status stable
@@ -21,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
21
19
  * @documentation https://fusion.dev/helix/components/outline
22
20
  *
23
21
  * @cssproperty --outline-indent - How far each level is inset from the one above.
24
- * @cssproperty --outline-rail - Width of the gutter the rule and the traveling mark share.
22
+ * @cssproperty --outline-rail - The width of the gutter that holds the line and the moving mark.
25
23
  */
26
24
  export declare class HelixOutline extends HelixHeadlessOutline {
27
25
  static styles: CSSResultGroup;
@@ -1,32 +1,22 @@
1
1
  import { HelixHeadlessPagination } from '@fusion.dev/helix-headless/pagination';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Moves between pages of a longer result.
4
+ * @summary Controls for moving between the pages of a long set of results.
5
5
  *
6
6
  * @description
7
- * One box for every control in the row, arrows and numbers alike, so the run has
8
- * a single rhythm and the steps sit at the numbers' height rather than between
9
- * them. Square, because a page number is one or two characters and a box sized
10
- * to the widest would leave the short ones swimming; `min-inline-size` rather
11
- * than a fixed one, so page 100 grows instead of overflowing.
7
+ * Every control in the row, arrows and numbers alike, uses the same box, so the
8
+ * row has one rhythm. Boxes are square with a `min-inline-size`, so page 100
9
+ * grows wider and does not overflow.
12
10
  *
13
- * Figures are tabular throughout. A page number is the one thing here that
14
- * changes under the pointer, and proportional digits make the whole row shuffle
15
- * as it does.
11
+ * Figures are tabular, so the row does not shift as the page number changes.
16
12
  *
17
- * The current page is a raised chip rather than a brand fill, which is the
18
- * treatment `Tabs` gives its selected tab. Brand on a page number claims more
19
- * than the state deserves: it is not a choice the reader made about anything,
20
- * it is where they happen to be standing, and a row of gray numbers with one
21
- * blue one reads as the blue one being an action.
13
+ * The current page is a raised chip, the same treatment `Tabs` gives its
14
+ * selected tab. A brand fill would make the current page look like an action.
15
+ * It is styled from `aria-current`, so there is no second attribute to keep in
16
+ * sync.
22
17
  *
23
- * Selected on `aria-current` rather than on a second attribute saying the same
24
- * thing: the state is already in the accessibility tree, and a `data-current`
25
- * beside it would be two places to keep in step.
26
- *
27
- * The gap takes the same box as everything else in the row and only sits back a
28
- * shade in color. It is a control, so it answers hover and focus like one; it
29
- * is a way through rather than a destination, so it does not compete.
18
+ * A gap uses the same box in a slightly muted color. It responds to hover and
19
+ * focus like any control, and it does not stand out from the numbers.
30
20
  *
31
21
  * @since 0.1.0
32
22
  * @status stable
@@ -35,7 +25,7 @@ import type { CSSResultGroup } from 'lit';
35
25
  * @documentation https://fusion.dev/helix/components/pagination
36
26
  *
37
27
  * @csspart first - The control that jumps to the first page, under `ends`.
38
- * @csspart gap - The control standing over pages not shown, which jumps into them.
28
+ * @csspart gap - The control in place of hidden pages, which jumps into them.
39
29
  * @csspart item - One slot in the run, holding a page or a gap.
40
30
  * @csspart last - The control that jumps to the last page, under `ends`.
41
31
  * @csspart list - The run of pages.
@@ -43,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
43
33
  * @csspart page - The control for one page.
44
34
  * @csspart page-current - The page you are on, beside `page`.
45
35
  * @csspart previous - The control that moves back one page.
46
- * @csspart status - The reading of where you are, in `compact`.
36
+ * @csspart status - The text that says which page you are on, in `compact`.
47
37
  *
48
38
  * @cssproperty --pagination-current-color - Fill behind the page you are on.
49
39
  * @cssproperty --pagination-gap - Space between one control and the next.
@@ -3,16 +3,16 @@ import type { CSSResultGroup } from 'lit';
3
3
  import '../../option/index.js';
4
4
  import '../../select/index.js';
5
5
  /**
6
- * @summary Chooses how many items a page holds.
6
+ * @summary A control for choosing how many items each page shows.
7
7
  *
8
8
  * @description
9
- * A `Select`, laid out on one row. Every other field stacks its label because it
10
- * stands in a column of fields; this one stands in a footer beside a run of page
11
- * numbers, where a two-line control makes the whole row two lines tall.
9
+ * A `Select` laid out on one row. Other fields stack their label because they
10
+ * sit in a column of fields. This one sits in a footer beside the page numbers,
11
+ * where a two-line control would make the whole row two lines tall.
12
12
  *
13
- * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
14
- * `::part(control-label)` reach through both boundaries and a consumer styles it
15
- * as the select it is.
13
+ * `Select`'s parts are exported with a `control-` prefix, so
14
+ * `::part(control-trigger)` and `::part(control-label)` reach through both
15
+ * shadow boundaries, and you can style it like any select.
16
16
  *
17
17
  * @since 0.1.0
18
18
  * @status stable
@@ -1,12 +1,11 @@
1
1
  import { HelixHeadlessPaginationSummary } from '@fusion.dev/helix-headless/pagination';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Reads out which items of how many are on show.
4
+ * @summary Text that shows which items are on the current page, out of the total.
5
5
  *
6
6
  * @description
7
- * Prose beside the controls rather than one of them: no box and no hover, in the
8
- * subtler of the two muted steps, because it is a fact about the result and not
9
- * a way to move through it.
7
+ * Plain text beside the controls, with no box and no hover, in the lighter of
8
+ * the two muted colors. It reports the result and is not a control.
10
9
  *
11
10
  * @since 0.1.0
12
11
  * @status stable
@@ -1,20 +1,17 @@
1
1
  import { HelixHeadlessPinInput } from '@fusion.dev/helix-headless/pin-input';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A short code, one character to a box.
4
+ * @summary A field for a short code, with one box for each character.
5
5
  *
6
6
  * @description
7
- * Square boxes at the control height with real space between them, which is the
8
- * whole picture: a code is read as separate characters, and boxes shoulder to
9
- * shoulder read as one field with lines drawn in it.
7
+ * Square boxes at the control height, with space between them so the code reads
8
+ * as separate characters.
10
9
  *
11
- * The focus ring is on the box the reader is in rather than around the row. A
12
- * code is entered one character at a time and the boxes exist to say which one
13
- * is next, so a ring around all six would answer the question the component is
14
- * for.
10
+ * The focus ring is on the current box, so you can see which character comes
11
+ * next.
15
12
  *
16
- * Figures are tabular, so a 1 takes the room an 8 does and the row does not
17
- * breathe as a code is typed into it.
13
+ * Figures are tabular, so every digit takes the same width and the row does not
14
+ * shift as you type.
18
15
  *
19
16
  * @since 0.1.0
20
17
  * @status stable
@@ -25,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
25
22
  * @csspart cell - One box.
26
23
  * @csspart field - The row of boxes.
27
24
  *
28
- * @cssproperty --pin-input-gap - Space between one box and the next.
25
+ * @cssproperty --pin-input-gap - The space between one box and the next.
29
26
  */
30
27
  export declare class HelixPinInput extends HelixHeadlessPinInput {
31
28
  static styles: CSSResultGroup;
@@ -1,18 +1,16 @@
1
1
  import { HelixHeadlessPopover } from '@fusion.dev/helix-headless/popover';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A panel that opens against a trigger and holds anything.
4
+ * @summary A panel that opens next to its trigger and holds any content.
5
5
  *
6
6
  * @description
7
- * A surface with an inset and a shadow, and nothing about what goes in it. The
8
- * inset is the panel's rather than the consumer's, which is the same call
9
- * `Dialog` and `Drawer` make and for the same reason: everyone was writing it,
10
- * and everyone was writing the same one.
7
+ * The styled tier draws a surface with an inset and a shadow and styles nothing
8
+ * inside it. The panel sets its own inset, as `Dialog` and `Drawer` do, because
9
+ * every use needed the same one.
11
10
  *
12
- * It arrives from the side it opened on. `data-placement` is written by the
13
- * positioning, so the panel knows which way it flipped and can animate from the
14
- * trigger rather than from a fixed direction that would be backwards half the
15
- * time.
11
+ * The panel animates in from the side it opened on. The positioning writes
12
+ * `data-placement`, so the panel animates from the trigger's side, including
13
+ * after it flips.
16
14
  *
17
15
  * @since 0.1.0
18
16
  * @status stable
@@ -21,18 +19,18 @@ import type { CSSResultGroup } from 'lit';
21
19
  * @documentation https://fusion.dev/helix/components/popover
22
20
  *
23
21
  * @cssproperty --popover-border-color - Color of the panel's edge.
24
- * @cssproperty --popover-border-width - Width of the panel's edge. Follows
25
- * `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
26
- * theme says otherwise.
22
+ * @cssproperty --popover-border-width - Width of the panel's edge. Defaults to
23
+ * `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
24
+ * your theme sets a width.
27
25
  * @cssproperty --popover-inline-size - Width of the panel.
28
- * @cssproperty --popover-max-block-size - Tallest the panel grows before it scrolls.
26
+ * @cssproperty --popover-max-block-size - Maximum height of the panel before it scrolls.
29
27
  * @cssproperty --popover-padding - Space between the panel's edge and its contents.
30
- * @cssproperty --popover-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
31
- * floating surface sits over content nobody can predict, so it keeps a lift by default.
28
+ * @cssproperty --popover-shadow - Shadow under the panel. Defaults to
29
+ * `--helix-shadow-floating`, because the panel can sit over any content.
32
30
  */
33
31
  export declare class HelixPopover extends HelixHeadlessPopover {
34
32
  /**
35
- * How the panel separates itself from what it floats over.
33
+ * How the panel is set apart from the content under it.
36
34
  *
37
35
  * One of the axis's four values, which is all this surface has meaning for: a
38
36
  * floating panel keeps its lift by default, `ThemeIntent.separation.floating`
@@ -1,18 +1,15 @@
1
1
  import { HelixHeadlessProgress } from '@fusion.dev/helix-headless/progress';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Shows how far along a task is, when that is known.
4
+ * @summary A bar or ring that shows how far along a task is.
5
5
  *
6
6
  * @description
7
- * A track and the part of it that is done. The height comes from a token rather
8
- * than from a size property, for the reason the rest of the library gives about
9
- * controls: how heavy a bar is says something about the region it is in, and a
10
- * `--progress-size` on that region says it once.
7
+ * A track and the part of it that is done. The height comes from a token, like
8
+ * control sizes elsewhere in the library, so you can set `--progress-size` once
9
+ * on a region.
11
10
  *
12
- * The fill transitions, which is worth more here than it looks. Progress
13
- * arrives in steps, often large ones, and a bar that jumps between them reads
14
- * as a series of unrelated states where one that travels reads as a single
15
- * thing advancing.
11
+ * The fill transitions between values. Progress often arrives in large steps,
12
+ * and a fill that moves between them shows one task advancing.
16
13
  *
17
14
  * @since 0.1.0
18
15
  * @status stable
@@ -22,14 +19,14 @@ import type { CSSResultGroup } from 'lit';
22
19
  * @documentation https://fusion.dev/helix/components/progress
23
20
  *
24
21
  * @cssproperty --progress-color - Fill of the part that is done.
25
- * @cssproperty --progress-ring-size - Diameter of the ring appearance.
26
- * @cssproperty --progress-ring-width - Thickness of its stroke.
22
+ * @cssproperty --progress-ring-size - Diameter of the ring.
23
+ * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
27
24
  * @cssproperty --progress-size - Thickness of the bar.
28
- * @cssproperty --progress-track-color - Fill of the part that is not.
25
+ * @cssproperty --progress-track-color - Fill of the part that is not done.
29
26
  */
30
27
  export declare class HelixProgress extends HelixHeadlessProgress {
31
28
  /**
32
- * How much ink the bar claims.
29
+ * How strongly the bar is drawn.
33
30
  *
34
31
  * `subtle` is the bar as a wash of its own color: still legible, no longer
35
32
  * the loudest thing in the region. The case is a background task, which has to
@@ -1,30 +1,29 @@
1
1
  import { HelixHeadlessQrCode } from '@fusion.dev/helix-headless/qr-code';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Encodes a short piece of text as a scannable square.
4
+ * @summary A scannable QR code for a short piece of text.
5
5
  *
6
6
  * @description
7
- * The picture is the headless tier's. What this adds is a size that can be set
7
+ * The headless tier draws the code. The styled tier adds a size you can set
8
8
  * once, the colors a scanner needs, and the box that holds a center mark.
9
9
  *
10
- * **The ink is `currentColor` and the ground is a real fill.** A code has to be
11
- * dark on light to read, and the pair that guarantees it is not the page's
12
- * foreground and background: those invert together in dark mode, and a code
13
- * drawn light-on-dark is refused by a good half of the scanners in the world.
14
- * So the ground is stated and the ink is the foreground it is chosen for.
10
+ * The ink is `currentColor` and the background is a solid fill. A code must be
11
+ * dark on light to scan. The page's foreground and background invert together
12
+ * in dark mode, and at least half of scanners reject a light-on-dark code, so
13
+ * the background is set explicitly and the ink is the foreground chosen for it.
15
14
  *
16
15
  * @since 0.1.0
17
16
  * @status stable
18
17
  * @category media
19
18
  * @documentation https://fusion.dev/helix/components/qr-code
20
19
  *
21
- * @cssproperty --qr-code-background-color - Behind them, including the quiet zone.
22
- * @cssproperty --qr-code-color - The dark modules. Defaults to the page's ink.
23
- * @cssproperty --qr-code-finder-color - The three corner squares. Defaults to
24
- * the same ink as the modules.
25
- * @cssproperty --qr-code-logo-padding - The quiet zone around that mark.
26
- * @cssproperty --qr-code-logo-size - How much of the middle a mark may cover.
27
- * Defaults to `27%`, which `H` correction carries: it can lose thirty percent.
20
+ * @cssproperty --qr-code-background-color - The fill behind the modules, including the quiet zone.
21
+ * @cssproperty --qr-code-color - Color of the dark modules. Defaults to the page's text color.
22
+ * @cssproperty --qr-code-finder-color - Color of the three corner squares. Defaults
23
+ * to the color of the modules.
24
+ * @cssproperty --qr-code-logo-padding - The clear space around the center logo.
25
+ * @cssproperty --qr-code-logo-size - How much of the center a logo can cover.
26
+ * Defaults to `27%`, which `H` correction allows, because it can lose thirty percent.
28
27
  * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
29
28
  */
30
29
  export declare class HelixQrCode extends HelixHeadlessQrCode {
@@ -4,8 +4,8 @@ import type { CSSResultGroup } from 'lit';
4
4
  * @summary A short quotation, set inline with the text around it.
5
5
  *
6
6
  * @description
7
- * Takes the surrounding type rather than a size of its own, because a quotation
8
- * inside a paragraph is that paragraph's text with marks around it.
7
+ * Inherits the surrounding type, because an inline quotation is part of its
8
+ * paragraph.
9
9
  *
10
10
  * @since 0.1.0
11
11
  * @status stable
@@ -1,20 +1,20 @@
1
1
  import { HelixHeadlessRadioGroup } from '@fusion.dev/helix-headless/radio';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A set of choices where exactly one is the answer.
4
+ * @summary A set of radios where exactly one can be chosen.
5
5
  *
6
6
  * @description
7
- * The field's three parts, laid out the way every other field lays them out: a
8
- * question over the set, and one line under it that is help until something is
9
- * wrong. `orientation` lays out the choices and not the field, so a horizontal
10
- * group keeps its question above the row rather than beside the first choice.
7
+ * Lays out the field's three parts the same way as every other field: the
8
+ * question above the set, and one line below it that shows the hint, or the
9
+ * message when something is wrong. `orientation` lays out the choices only, so
10
+ * a horizontal group keeps its question above the row.
11
11
  *
12
12
  * @since 0.1.0
13
13
  * @status stable
14
14
  * @aliases RadioButtons, Choice group
15
15
  * @documentation https://fusion.dev/helix/components/radio
16
16
  *
17
- * @cssproperty --radio-group-gap - Space between the choices.
17
+ * @cssproperty --radio-group-gap - The space between the choices.
18
18
  */
19
19
  export declare class HelixRadioGroup extends HelixHeadlessRadioGroup {
20
20
  static styles: CSSResultGroup;