@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
@@ -1,13 +1,12 @@
1
1
  import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Separates content into groups with a rule.
4
+ * @summary A line that separates content into groups.
5
5
  *
6
6
  * @description
7
- * A one-pixel rule in the border color, running the full inline size by
8
- * default. A vertical divider stretches to its flex parent instead of setting
9
- * its own height, so it matches whatever it sits beside without being told how
10
- * tall that is.
7
+ * A one-pixel rule in the border color that spans the full inline size by
8
+ * default. A vertical divider stretches to fit its flex parent, so it matches
9
+ * the height of what it sits beside.
11
10
  *
12
11
  * @since 0.1.0
13
12
  * @status stable
@@ -15,14 +14,14 @@ import type { CSSResultGroup } from 'lit';
15
14
  * @aliases Separator, Rule
16
15
  * @documentation https://fusion.dev/helix/components/divider
17
16
  *
18
- * @csspart line - The rule itself.
17
+ * @csspart line - The line.
19
18
  *
20
- * @cssproperty --divider-color - Color of the rule.
21
- * @cssproperty --divider-length - How long a vertical rule is. Horizontal takes its width.
22
- * @cssproperty --divider-padding - Space taken off both ends of it.
23
- * @cssproperty --divider-padding-end - Off the far end only.
24
- * @cssproperty --divider-padding-start - Off the near end only.
25
- * @cssproperty --divider-thickness - How heavy the rule is.
19
+ * @cssproperty --divider-color - The color of the line.
20
+ * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.
21
+ * @cssproperty --divider-padding - The space removed from both ends of the line.
22
+ * @cssproperty --divider-padding-end - The space removed from the end of the line only.
23
+ * @cssproperty --divider-padding-start - The space removed from the start of the line only.
24
+ * @cssproperty --divider-thickness - The thickness of the line.
26
25
  */
27
26
  export declare class HelixDivider extends HelixHeadlessDivider {
28
27
  static styles: CSSResultGroup;
@@ -2,25 +2,22 @@ import { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-chart'
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  import '../../tooltip/index.js';
4
4
  /**
5
- * @summary Parts of a whole as a ring, read from a table.
5
+ * @summary A chart that shows parts of a whole as a ring, read from a table.
6
6
  *
7
7
  * @description
8
- * The slices take the series palette in order, so a legend beside it maps the
9
- * same twenty-four.
8
+ * The slices take the series palette in order, so a legend beside the chart
9
+ * uses the same twenty-four colors.
10
10
  *
11
- * The ring starts at twelve o'clock, which is a rotation applied here rather
12
- * than arithmetic done below: where a reader expects the first slice to begin
13
- * is a fact about the picture, not about the numbers.
11
+ * The ring starts at twelve o'clock. The styled tier applies that as a
12
+ * rotation.
14
13
  *
15
- * A track is drawn under the slices, so a ring whose values do not fill it
16
- * still reads as a ring with a gap rather than as a broken arc.
14
+ * A track is drawn under the slices, so when the values do not fill the ring,
15
+ * the gap shows as part of the ring.
17
16
  *
18
- * **How thick the ring is drawn is `hole`, not a CSS hook.** The stroke's width
19
- * and the ring's radius have to agree: the outer edge is `r + width / 2`, so
20
- * setting one in CSS and deriving the other in markup gives a drawing that is
21
- * wrong in both. Measured with such a hook in place, every ring came out twelve
22
- * units thick whatever its `hole`, so a pie was a small ring with a hole in it
23
- * and `large` was drawn larger than the default.
17
+ * **Set the ring's thickness with `hole`.** There is no CSS hook for it,
18
+ * because the stroke width and the ring's radius must agree: the outer edge is
19
+ * `r + width / 2`, and setting one in CSS while the markup derives the other
20
+ * draws the ring wrong.
24
21
  *
25
22
  * @since 0.1.0
26
23
  * @status stable
@@ -53,7 +50,7 @@ export declare class HelixDonutChart extends HelixHeadlessDonutChart {
53
50
  */
54
51
  static tier: string;
55
52
  /**
56
- * How much ink the slices claim.
53
+ * How strongly the slices are drawn.
57
54
  *
58
55
  * `solid` is the resting arrangement and selects nothing: a slice at full
59
56
  * strength is what the base rule already draws. `subtle` is the ring as a wash
@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
4
4
  * @summary A panel that slides in from an edge.
5
5
  *
6
6
  * @description
7
- * The panel translates and the scrim fades, both on transform and opacity only,
8
- * which is the one place motion is allowed to carry the work: the surface at
9
- * rest is flat and the movement is what says something happened.
7
+ * The panel slides and the scrim fades, animating only `transform` and
8
+ * `opacity`. At rest the surface is flat, and the motion shows that the drawer
9
+ * opened or closed.
10
10
  *
11
11
  * @since 0.1.0
12
12
  * @status stable
@@ -22,25 +22,26 @@ import type { CSSResultGroup } from 'lit';
22
22
  * @csspart panel - The sliding panel.
23
23
  *
24
24
  * @cssproperty --drawer-backdrop - Filter applied behind a `frosted` or `glass` drawer.
25
- * Follows the theme's material policy; set it to override the strength on one drawer.
25
+ * Follows the theme's material policy. Set it to change the strength on one drawer.
26
26
  * @cssproperty --drawer-background-color - Surface behind the panel.
27
27
  * @cssproperty --drawer-border-color - Color of the panel's edge.
28
28
  * @cssproperty --drawer-border-width - Width of the panel's edge. Follows
29
- * `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
30
- * theme says otherwise.
29
+ * `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your
30
+ * theme sets a border.
31
31
  * @cssproperty --drawer-padding - Padding inside the panel.
32
- * @cssproperty --drawer-padding-block-start - Padding above the header, which is a step deeper than
33
- * the other three so the first line clears the window's own edge. Falls back to
34
- * `--drawer-padding`, so setting that alone governs all four sides.
32
+ * @cssproperty --drawer-padding-block-start - Padding above the header. It is one step larger than
33
+ * the other three sides, so the first line clears the window's edge. Falls back to
34
+ * `--drawer-padding`, so setting that alone sets all four sides.
35
35
  * @cssproperty --drawer-radius - Corner radius on the edges that face the page.
36
- * @cssproperty --drawer-scrim - The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
37
- * @cssproperty --drawer-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
38
- * floating surface sits over content nobody can predict, so it keeps a lift by default.
36
+ * @cssproperty --drawer-scrim - The tint over the page behind the drawer. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token.
37
+ * @cssproperty --drawer-shadow - Shadow under the panel. Follows `--helix-shadow-floating`. A
38
+ * floating surface can sit over any content, so it has a shadow by default.
39
39
  * @cssproperty --drawer-size - Width or height of the panel.
40
40
  */
41
41
  export declare class HelixDrawer extends HelixHeadlessDrawer {
42
42
  /**
43
- * Whether the panel is glass rather than opaque.
43
+ * Makes the panel translucent, as `frosted` or `glass`. When it is not set,
44
+ * the panel is opaque.
44
45
  *
45
46
  * **The same pair `Card` and `App Header` draw**, and one attribute for the
46
47
  * same reason: a backdrop filter behind an opaque ground filters nothing and a
@@ -1,12 +1,11 @@
1
1
  import { HelixHeadlessDrilldownItem } from '@fusion.dev/helix-headless/drilldown';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary One row of a drill-down, which may hold a page of its own.
4
+ * @summary One row of a drill-down, which can open a page of its own.
5
5
  *
6
6
  * @description
7
- * A row is a full-width band rather than an inset pill, for the reason the
8
- * select's options are: it reaches both edges of the panel, so a highlight
9
- * lines up with the edge the eye is already following down the list.
7
+ * Each row is a full-width band that reaches both edges of the panel, like the
8
+ * options in a select, so the highlight lines up with the edge of the list.
10
9
  *
11
10
  * @since 0.1.0
12
11
  * @status stable
@@ -1,18 +1,15 @@
1
1
  import { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A stack of pages, one showing at a time, with a way back.
4
+ * @summary A stack of pages that shows one at a time, with a back button.
5
5
  *
6
6
  * @description
7
- * **The pages slide, and the direction is the point.** Both moves replace one
8
- * page with another, so with no motion a reader cannot tell whether they went
9
- * deeper or came back: the panel simply holds different words. Sliding in the
10
- * direction of travel says which happened, and it is most of the reason this is
11
- * a component rather than a menu with its trigger removed.
7
+ * Pages slide in the direction of travel, so you can tell whether you went
8
+ * deeper or came back. Without motion, the panel only shows different text.
12
9
  *
13
- * An animation rather than a transition, because there is nothing to transition
14
- * from: the page arriving was not in the DOM a frame ago. Under
15
- * `prefers-reduced-motion` it becomes the instant swap `Menu` does.
10
+ * The slide is a CSS animation, because the arriving page was not in the DOM on
11
+ * the previous frame, so there is nothing to transition from. Under
12
+ * `prefers-reduced-motion` the pages swap instantly, as they do in `Menu`.
16
13
  *
17
14
  * @since 0.1.0
18
15
  * @status stable
@@ -100,7 +100,25 @@ registerElementEvents({
100
100
  'toggle',
101
101
  ],
102
102
  'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
103
- 'helix-map': ['helix-map-pan', 'helix-map-zoom'],
103
+ 'helix-map': [
104
+ 'helix-activate',
105
+ 'helix-map-cluster',
106
+ 'helix-map-pan',
107
+ 'helix-map-part-change',
108
+ 'helix-map-rotate',
109
+ 'helix-map-tilt',
110
+ 'helix-map-zoom',
111
+ ],
112
+ 'helix-map-area': ['helix-map-part-change'],
113
+ 'helix-map-buildings': ['helix-map-part-change'],
114
+ 'helix-map-contours': ['helix-map-part-change'],
115
+ 'helix-map-landcover': ['helix-map-part-change'],
116
+ 'helix-map-marker': ['helix-map-cluster', 'helix-map-part-change'],
117
+ 'helix-map-points': ['helix-activate', 'helix-map-cluster', 'helix-map-part-change'],
118
+ 'helix-map-position': ['helix-map-part-change'],
119
+ 'helix-map-raster': ['helix-map-part-change'],
120
+ 'helix-map-route': ['helix-map-part-change'],
121
+ 'helix-map-terrain': ['helix-map-part-change'],
104
122
  'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
105
123
  'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
106
124
  'helix-menu-item': ['helix-select'],
@@ -1,12 +1,11 @@
1
1
  import { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary Says that a region has nothing in it, and what to do about it.
4
+ * @summary A message that a region has nothing in it, and the next step to take.
5
5
  *
6
6
  * @description
7
- * Centered and given room, because an empty view is the only thing on screen
8
- * and crowding it against the top edge makes the region look broken rather than
9
- * empty.
7
+ * Centered with space around it. An empty view is the only thing on screen, and
8
+ * pressed against the top edge it looks broken.
10
9
  *
11
10
  * @since 0.1.0
12
11
  * @status stable
@@ -3,22 +3,18 @@ import type { CSSResultGroup } from 'lit';
3
3
  import '../../icon/index.js';
4
4
  import '../../tag/index.js';
5
5
  /**
6
- * @summary A control for choosing files, by pointer or by dropping them on it.
6
+ * @summary A field for choosing files from a picker or by dropping them on it.
7
7
  *
8
8
  * @description
9
- * The field is a box rather than a line, because nothing is typed into it: its
10
- * height is not a line of text, and what a reader aims at is the whole area. The
11
- * border is dashed for the same reason a drop target usually is, which is the
12
- * only affordance one has before anything is being dragged.
9
+ * The field is a box, because nothing is typed into it and the whole area is
10
+ * the target. The dashed border marks it as a drop target before anything is
11
+ * dragged.
13
12
  *
14
- * The native input is kept and laid over the field at zero opacity rather than
15
- * hidden, so a click anywhere on the box lands on the input itself and opens the
16
- * picker. Hiding it with `display: none` would take it out of the tab order and
17
- * out of the form, and a script clicking a hidden input is the same thing with
18
- * more moving parts.
13
+ * The native input is laid over the field at zero opacity, so a click anywhere
14
+ * on the box lands on the input and opens the picker. `display: none` would
15
+ * remove the input from the tab order and from the form.
19
16
  *
20
- * The focus ring is drawn on the field, because the control it belongs to is
21
- * invisible.
17
+ * The focus ring is drawn on the field, because the input is invisible.
22
18
  *
23
19
  * @since 0.1.0
24
20
  * @status stable
@@ -1,16 +1,17 @@
1
1
  import { HelixHeadlessFilterChip } from '@fusion.dev/helix-headless/filter-input';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary One filter in force: a field, how it is compared, and to what.
4
+ * @summary One active filter: a field, a comparison, and the values it is compared to.
5
5
  *
6
6
  * @description
7
- * Three segments and a control, drawn so the reader's eye lands on the values.
8
- * The field is the quietest of the three because it is the part they already
9
- * know, having picked it; the values carry the weight, because a bar of these is
10
- * scanned for what the filters are set to rather than for what they are on.
7
+ * Draws three segments and a remove control, with the values most prominent.
8
+ * The field is the quietest segment, because the user picked it. The values
9
+ * carry the most weight, because a row of chips is scanned for what each filter
10
+ * is set to.
11
11
  *
12
- * The operator segment is drawn only where there is one, which is what keeps the
13
- * common chip free of jargon. See the headless note, which records the rule.
12
+ * The operator segment is drawn only when there is an operator, so the common
13
+ * chip shows only the field and the values. The headless element documents the
14
+ * rule.
14
15
  *
15
16
  * @since 0.23.0
16
17
  * @status stable
@@ -18,9 +19,9 @@ import type { CSSResultGroup } from 'lit';
18
19
  * @aliases FilterToken, FacetChip
19
20
  * @documentation https://fusion.dev/helix/components/filter-input
20
21
  *
21
- * @cssproperty --filter-input-chip-background-color - Fill behind the chip.
22
- * @cssproperty --filter-input-chip-border-color - Color of the edge.
23
- * @cssproperty --filter-input-chip-radius - Corner radius of the chip.
22
+ * @cssproperty --filter-input-chip-background-color - The fill behind the chip.
23
+ * @cssproperty --filter-input-chip-border-color - The color of the chip's border.
24
+ * @cssproperty --filter-input-chip-radius - The corner radius of the chip.
24
25
  */
25
26
  export declare class HelixFilterChip extends HelixHeadlessFilterChip {
26
27
  static styles: CSSResultGroup;
@@ -1,17 +1,16 @@
1
1
  import { HelixHeadlessFilterField } from '@fusion.dev/helix-headless/filter-input';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary One thing a set can be filtered by, and how.
4
+ * @summary A field that a filter can apply to, with its comparisons and values.
5
5
  *
6
6
  * @description
7
- * A declaration rather than a control: it renders nothing, and the filter input
8
- * reads it to build its menu. The headless note carries the model.
7
+ * Declares a filter field. It renders nothing, and the filter input reads it to
8
+ * build its menu. The headless element documents the model.
9
9
  *
10
- * The stylesheet here is one rule and it is a guard rather than a look. Written
11
- * where it belongs, inside a filter input, this is never assigned to a slot and
12
- * so is never rendered at all. Written anywhere else it would be an empty inline
13
- * box, which is nothing to look at and still a flex item a `gap` would space
14
- * away from its neighbors.
10
+ * The stylesheet has one rule, `display: none`, as a guard. Inside a filter
11
+ * input, the element is never assigned to a slot and never renders. Anywhere
12
+ * else, it would be an empty inline box that still counts as a flex item and
13
+ * gets `gap` spacing.
15
14
  *
16
15
  * @since 0.23.0
17
16
  * @status stable
@@ -3,16 +3,15 @@ import type { CSSResultGroup } from 'lit';
3
3
  import '../../divider/index.js';
4
4
  import '../../menu/index.js';
5
5
  /**
6
- * @summary The control that builds a filter: pick a field, tick its values.
6
+ * @summary A menu for building a filter by picking a field and checking its values.
7
7
  *
8
8
  * @description
9
- * Everything drawn here is drawn by something else: the trigger is the
10
- * consumer's, and the pages are `Menu`'s, whose reserved tick column is what
11
- * keeps a page of ticked and unticked values on one edge. This element's own
12
- * stylesheet is one rule, and it is `display: contents`.
9
+ * Draws nothing of its own. The trigger is yours, and the pages are `Menu`'s,
10
+ * whose reserved tick column keeps ticked and unticked values aligned. The
11
+ * element's stylesheet has one rule: `display: contents`.
13
12
  *
14
- * The headless note carries the model, including why a tick is a filter
15
- * immediately and why the operator is decided here rather than on the chip.
13
+ * The headless element documents the model, including why a tick applies a
14
+ * filter immediately and why the menu decides the operator.
16
15
  *
17
16
  * @since 0.25.0
18
17
  * @status stable
@@ -20,7 +19,7 @@ import '../../menu/index.js';
20
19
  * @aliases FacetPicker, FilterBuilder
21
20
  * @documentation https://fusion.dev/helix/components/filter-input
22
21
  *
23
- * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: refusing it takes the decision and nothing moves.
22
+ * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: call `preventDefault()` to keep the previous values.
24
23
  */
25
24
  export declare class HelixFilterMenu extends HelixHeadlessFilterMenu {
26
25
  static tier: string;
@@ -4,12 +4,12 @@ import type { CSSResultGroup } from 'lit';
4
4
  * @summary One way a filter can compare a field to its values.
5
5
  *
6
6
  * @description
7
- * A declaration rather than a control: it renders nothing, and the field it is
8
- * written under reads it. The headless note carries the model, including why the
9
- * words are the consumer's and never this element's.
7
+ * Declares an operator. It renders nothing, and the field it is written under
8
+ * reads it. The headless element documents the model, including why the
9
+ * operator words are yours.
10
10
  *
11
- * The stylesheet is one rule and it is a guard rather than a look, for the
12
- * reason `FilterField`'s note gives.
11
+ * The stylesheet has one rule, `display: none`, as a guard, for the reason
12
+ * given on `FilterField`.
13
13
  *
14
14
  * @since 0.23.0
15
15
  * @status stable
@@ -3,27 +3,24 @@ import type { CSSResultGroup } from 'lit';
3
3
  import '../../icon/index.js';
4
4
  import '../../option/index.js';
5
5
  /**
6
- * @summary A field that narrows something else, beside what is already narrowing it.
6
+ * @summary A text field for filters, with the active filters shown in it as tokens.
7
7
  *
8
8
  * @description
9
- * The frame is the field rather than the input, so the tokens sit inside the
10
- * same box as the text and the focus ring is drawn once around the whole
11
- * control. It grows down a line at a time as tokens are added, which is the
12
- * arrangement Combobox takes when it is holding a selection.
9
+ * The frame is drawn around the field, so the tokens sit in the same box as the
10
+ * text and one focus ring surrounds the whole control. The field grows one line
11
+ * at a time as tokens are added, as Combobox does when it holds a selection.
13
12
  *
14
- * **The tokens are the consumer's own elements**, so the only thing said about
15
- * them here is to keep their size and not run past the field. A `Tag` slotted
16
- * into `tags` already looks like one; anything else looks like whatever it is.
13
+ * Tokens are your own elements, so the only rule for them keeps their size and
14
+ * stops them running past the field. A `Tag` slotted into `tags` already looks
15
+ * like a token.
17
16
  *
18
- * **The suggestion panel is this element's own box, not a listbox's.** Combobox
19
- * puts a `helix-listbox` in its panel because the options there are a selection
20
- * it owns; these are the consumer's suggestions, so the panel is a plain
21
- * `role="listbox"` region and the options pass their own `helix-select`
22
- * straight through it. That is why this surface scrolls where Combobox's does
23
- * not: there is no list inside to do it.
17
+ * The suggestion panel is this element's own box with `role="listbox"`, and the
18
+ * options pass their own `helix-select` through it. Combobox puts a
19
+ * `helix-listbox` in its panel, which scrolls, because Combobox owns the
20
+ * selection. This panel has no list inside it, so the panel itself scrolls.
24
21
  *
25
- * Height comes from the region, like every other control: `data-density` on
26
- * whatever holds it, not a `size` here.
22
+ * Height comes from the region, like every other control. Set `data-density` on
23
+ * a container. The element has no `size`.
27
24
  *
28
25
  * @since 0.1.0
29
26
  * @status stable
@@ -31,17 +28,18 @@ import '../../option/index.js';
31
28
  * @aliases SearchField, FacetInput, TokenInput
32
29
  * @documentation https://fusion.dev/helix/components/filter-input
33
30
  *
34
- * @cssproperty --filter-input-action-padding-inline - Space either side of a slotted control's label. Follows `--helix-space-xs`, which is what a token uses.
35
- * @cssproperty --filter-input-action-size - Height of a control slotted at either end. Follows `--helix-size-tag`, so it matches the tokens beside it rather than the field around them.
36
- * @cssproperty --filter-input-background-color - Fill behind the field.
37
- * @cssproperty --filter-input-border-color - Color of the suggestion panel's edge.
38
- * @cssproperty --filter-input-border-width - Width of that edge. Follows `--helix-border-floating`.
39
- * @cssproperty --filter-input-control-size - Smallest the text keeps as tokens fill the line, before it wraps to its own.
40
- * @cssproperty --filter-input-lead-border-color - The seam between the leading box and the text.
41
- * @cssproperty --filter-input-panel-size - Width of the suggestion panel. Follows the field by default.
42
- * @cssproperty --filter-input-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
43
- * floating surface sits over content nobody can predict, so it keeps a lift by default.
44
- * @cssproperty --filter-input-size - Height of the field with nothing in it, which it grows from.
31
+ * @cssproperty --filter-input-action-padding-inline - The space on either side of a slotted control's label. It follows `--helix-space-xs`, the space a token uses.
32
+ * @cssproperty --filter-input-action-size - The height of a control slotted at either end. It follows `--helix-size-tag`, so it matches the height of the tokens beside it.
33
+ * @cssproperty --filter-input-background-color - The fill behind the field.
34
+ * @cssproperty --filter-input-border-color - The color of the suggestion panel's border.
35
+ * @cssproperty --filter-input-border-width - The width of the suggestion panel's border. It follows `--helix-border-floating`.
36
+ * @cssproperty --filter-input-control-size - The smallest width the text keeps as tokens fill the line. Below it, the text wraps to its own line.
37
+ * @cssproperty --filter-input-lead-border-color - The color of the line between the leading box and the text.
38
+ * @cssproperty --filter-input-panel-size - The width of the suggestion panel. It matches the field by default.
39
+ * @cssproperty --filter-input-shadow - The shadow under the panel. It follows
40
+ * `--helix-shadow-floating`. The panel can sit over any content, so it has a
41
+ * shadow by default.
42
+ * @cssproperty --filter-input-size - The height of the empty field. The field grows from this height.
45
43
  */
46
44
  export declare class HelixFilterInput extends HelixHeadlessFilterInput {
47
45
  static styles: CSSResultGroup;
@@ -1,22 +1,17 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import type { CSSResultGroup, TemplateResult } from 'lit';
3
3
  /**
4
- * @summary Lays children out in a row or a column.
4
+ * @summary A layout that places its children in a row or a column.
5
5
  *
6
6
  * @description
7
- * The host is the flex container itself and the only child is a slot, so the
8
- * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
9
- * replaces.
7
+ * The host is the flex container and its only child is a slot, so
8
+ * `<helix-flex>` adds no box beyond the `<div>` it replaces.
10
9
  *
11
- * There is no separate Stack. A stack is this with `direction="column"`, and a
12
- * second element whose whole definition is one default of the first is a name
13
- * to learn rather than a capability to gain.
10
+ * There is no separate Stack component. For a stack, set `direction="column"`.
14
11
  *
15
- * Gap takes a space token name rather than a length, so spacing stays on the
16
- * scale. A layout that can say `gap="13px"` is one that will.
12
+ * `gap` takes a space token name, so spacing stays on the scale.
17
13
  *
18
- * Presentation only, so there is no headless tier: the split exists to keep
19
- * behavior separate from styling, and this is entirely styling.
14
+ * Flex is presentation only, so it has no headless tier.
20
15
  *
21
16
  * @since 0.1.0
22
17
  * @status stable
@@ -28,7 +23,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
28
23
  */
29
24
  export declare class HelixFlex extends HelixElement {
30
25
  /**
31
- * Alignment across the direction, which is `align-items`.
26
+ * How items align across the direction, set as `align-items`.
32
27
  *
33
28
  * **Named for the CSS property it sets, because it is that property.** A flex
34
29
  * container is the one place where the box-alignment words are already the
@@ -55,11 +50,11 @@ export declare class HelixFlex extends HelixElement {
55
50
  */
56
51
  gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
57
52
  /**
58
- * Flows with surrounding text instead of taking the full width.
53
+ * Flows with the surrounding text, taking only the width of its items.
59
54
  */
60
55
  inline: boolean;
61
56
  /**
62
- * Distribution along the direction, which is `justify-content`.
57
+ * How items are spread along the direction, set as `justify-content`.
63
58
  *
64
59
  * Named for the property it sets, the way `alignItems` is. `between` and
65
60
  * `around` drop the `space-` prefix and nothing else does, because those two
@@ -1,16 +1,13 @@
1
1
  import { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A timestamp, written the way the reader's locale writes one.
4
+ * @summary A timestamp, formatted for the user's locale.
5
5
  *
6
6
  * @description
7
- * The base tier does the reading; this adds the one thing a design system has to
8
- * say about it. A timestamp takes the family, size and color of the text around
9
- * it, so almost nothing here is a decision. The exception is figures: an elapsed
10
- * reading counts up under the reader, and proportional digits move the trailing
11
- * edge as it does, which in a feed is a whole column shifting whenever any row
12
- * in it ticks over. `tabular-nums` in that mode and not in the other, because a
13
- * date is written once and should sit in the text like the text.
7
+ * Takes the font family, size, and color of the surrounding text. In `elapsed`
8
+ * mode it uses `tabular-nums`, so a column of readings in a feed does not shift
9
+ * as they count up. A date keeps proportional figures, so it sits in the text
10
+ * like the words around it.
14
11
  *
15
12
  * @since 0.1.0
16
13
  * @status stable
@@ -1,15 +1,17 @@
1
1
  import { HelixElement } from '@fusion.dev/helix-core';
2
2
  import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
3
3
  /**
4
- * @summary Lays children out on a grid.
4
+ * @summary A layout that places its children on a grid.
5
5
  *
6
6
  * @description
7
- * Two ways to declare columns, and only two. `columns` is a fixed count;
8
- * `min` fills as many equal columns as fit above that width, which is a
9
- * responsive layout with no breakpoint to maintain. Setting `min` wins, because
10
- * a fixed count that also reflows is two intentions in one element.
7
+ * Set columns in one of two ways:
11
8
  *
12
- * Presentation only, so there is no headless tier.
9
+ * - `columns` sets a fixed count.
10
+ * - `min` fits as many equal columns as there is room for at that width, so the
11
+ * layout responds with no breakpoints to maintain.
12
+ *
13
+ * If you set both, `min` wins. The grid is presentation only, so there is no
14
+ * headless tier.
13
15
  *
14
16
  * @since 0.1.0
15
17
  * @status stable
@@ -19,11 +21,11 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
19
21
  *
20
22
  * @slot - The items to lay out.
21
23
  *
22
- * @cssproperty --grid-columns - An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
24
+ * @cssproperty --grid-columns - An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set.
23
25
  */
24
26
  export declare class HelixGrid extends HelixElement {
25
27
  /**
26
- * Alignment of each cell within its row, which is `align-items`.
28
+ * How each cell aligns within its row. Sets `align-items`.
27
29
  *
28
30
  * **Named for the CSS property it sets**, the way `Flex` is, and the same
29
31
  * property on a grid: it places every cell in its row's track rather than
@@ -39,15 +41,15 @@ export declare class HelixGrid extends HelixElement {
39
41
  */
40
42
  alignItems?: 'start' | 'center' | 'end' | 'stretch';
41
43
  /**
42
- * Fixed number of equal columns.
44
+ * A fixed number of equal columns.
43
45
  */
44
46
  columns?: number;
45
47
  /**
46
- * Space between cells, named on the space scale.
48
+ * The space between cells, as a step on the space scale.
47
49
  */
48
50
  gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
49
51
  /**
50
- * Minimum column width, filling as many as fit.
52
+ * The minimum column width. The grid fits as many columns as the width allows.
51
53
  *
52
54
  * Takes precedence over `columns`: a grid that both fixes a count and reflows
53
55
  * is two intentions in one element.