@fusion.dev/helix 0.2.0 → 0.3.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 (270) hide show
  1. package/custom-elements.json +256 -256
  2. package/dist/accordion/item/accordion-item.css.js +0 -1
  3. package/dist/accordion/item/accordion-item.js +0 -29
  4. package/dist/accordion/root/accordion-root.css.js +0 -1
  5. package/dist/accordion/root/accordion-root.js +0 -20
  6. package/dist/announcement/root/announcement-root.css.js +0 -1
  7. package/dist/announcement/root/announcement-root.js +0 -16
  8. package/dist/app-header/root/app-header-root.css.js +0 -1
  9. package/dist/app-header/root/app-header-root.js +0 -45
  10. package/dist/aura/root/aura-axis.js +0 -58
  11. package/dist/aura/root/aura-root.css.js +0 -1
  12. package/dist/aura/root/aura-root.js +0 -520
  13. package/dist/aura/root/aura-shader.js +0 -35
  14. package/dist/avatar/group/avatar-group.css.js +0 -1
  15. package/dist/avatar/group/avatar-group.js +0 -24
  16. package/dist/avatar/root/avatar-root.css.js +0 -1
  17. package/dist/avatar/root/avatar-root.js +0 -23
  18. package/dist/badge/root/badge-root.css.js +0 -1
  19. package/dist/badge/root/badge-root.d.ts +2 -6
  20. package/dist/badge/root/badge-root.js +0 -18
  21. package/dist/bar-chart/root/bar-chart-root.css.js +0 -1
  22. package/dist/bar-chart/root/bar-chart-root.js +0 -50
  23. package/dist/blockquote/root/blockquote-root.css.js +0 -1
  24. package/dist/blockquote/root/blockquote-root.js +0 -17
  25. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +0 -1
  26. package/dist/breadcrumbs/breadcrumb/breadcrumb.js +0 -28
  27. package/dist/breadcrumbs/root/breadcrumbs-root.css.js +0 -1
  28. package/dist/breadcrumbs/root/breadcrumbs-root.js +0 -19
  29. package/dist/button/root/button-root.css.js +0 -1
  30. package/dist/button/root/button-root.js +0 -38
  31. package/dist/button-group/root/button-group-root.css.js +0 -1
  32. package/dist/button-group/root/button-group-root.js +0 -24
  33. package/dist/callout/root/callout-root.css.js +0 -1
  34. package/dist/callout/root/callout-root.js +0 -26
  35. package/dist/card/root/card-root.css.js +0 -1
  36. package/dist/card/root/card-root.js +0 -45
  37. package/dist/carousel/root/carousel-root.css.js +0 -1
  38. package/dist/carousel/root/carousel-root.js +0 -24
  39. package/dist/chat/composer/chat-composer.css.js +0 -1
  40. package/dist/chat/composer/chat-composer.js +0 -26
  41. package/dist/chat/message/chat-message.css.js +0 -1
  42. package/dist/chat/message/chat-message.js +0 -29
  43. package/dist/chat/root/chat-root.css.js +0 -1
  44. package/dist/chat/root/chat-root.js +0 -38
  45. package/dist/checkbox/root/checkbox-root.css.js +0 -1
  46. package/dist/checkbox/root/checkbox-root.js +0 -26
  47. package/dist/checkbox-group/root/checkbox-group-root.css.js +0 -1
  48. package/dist/checkbox-group/root/checkbox-group-root.js +0 -15
  49. package/dist/code/root/code-root.css.js +0 -1
  50. package/dist/code/root/code-root.js +0 -21
  51. package/dist/code-block/root/code-block-root.css.js +0 -1
  52. package/dist/code-block/root/code-block-root.js +0 -19
  53. package/dist/color-input/root/color-input-root.css.js +0 -1
  54. package/dist/color-input/root/color-input-root.js +0 -42
  55. package/dist/color-picker/root/color-picker-root.css.js +0 -1
  56. package/dist/color-picker/root/color-picker-root.js +0 -42
  57. package/dist/combobox/root/combobox-root.css.js +0 -1
  58. package/dist/combobox/root/combobox-root.js +0 -28
  59. package/dist/command/root/command-root.css.js +0 -1
  60. package/dist/command/root/command-root.js +0 -21
  61. package/dist/copy-button/root/copy-button-root.css.js +0 -1
  62. package/dist/copy-button/root/copy-button-root.js +0 -14
  63. package/dist/data-table/root/data-table-root.css.js +0 -1
  64. package/dist/data-table/root/data-table-root.js +0 -39
  65. package/dist/date-input/root/date-input-root.css.js +0 -1
  66. package/dist/date-input/root/date-input-root.js +0 -38
  67. package/dist/date-picker/root/date-picker-root.css.js +0 -1
  68. package/dist/date-picker/root/date-picker-root.js +0 -28
  69. package/dist/dialog/root/dialog-root.css.js +0 -1
  70. package/dist/dialog/root/dialog-root.js +0 -31
  71. package/dist/divider/root/divider-root.css.js +0 -1
  72. package/dist/divider/root/divider-root.js +0 -24
  73. package/dist/donut-chart/root/donut-chart-root.css.js +0 -1
  74. package/dist/donut-chart/root/donut-chart-root.js +0 -49
  75. package/dist/drawer/root/drawer-root.css.js +0 -1
  76. package/dist/drawer/root/drawer-root.js +0 -38
  77. package/dist/drilldown/item/drilldown-item.css.js +0 -1
  78. package/dist/drilldown/item/drilldown-item.js +0 -15
  79. package/dist/drilldown/root/drilldown-root.css.js +0 -1
  80. package/dist/drilldown/root/drilldown-root.js +0 -23
  81. package/dist/element-events.generated.js +0 -5
  82. package/dist/empty/root/empty-root.css.js +0 -1
  83. package/dist/empty/root/empty-root.js +0 -16
  84. package/dist/file-input/root/file-input-root.css.js +0 -1
  85. package/dist/file-input/root/file-input-root.js +0 -30
  86. package/dist/flex/root/flex-root.css.js +0 -1
  87. package/dist/flex/root/flex-root.js +0 -32
  88. package/dist/format-date/root/format-date-root.css.js +0 -1
  89. package/dist/format-date/root/format-date-root.js +0 -17
  90. package/dist/grid/root/grid-root.css.js +0 -1
  91. package/dist/grid/root/grid-root.js +0 -69
  92. package/dist/heatmap/root/heatmap-root.css.js +0 -1
  93. package/dist/heatmap/root/heatmap-root.d.ts +9 -11
  94. package/dist/heatmap/root/heatmap-root.js +0 -73
  95. package/dist/icon/glyph.css.js +0 -1
  96. package/dist/icon/root/icon-root.css.js +0 -1
  97. package/dist/icon/root/icon-root.js +0 -19
  98. package/dist/icon-button/root/icon-button-root.css.js +0 -1
  99. package/dist/icon-button/root/icon-button-root.js +0 -35
  100. package/dist/image/root/image-root.css.js +0 -1
  101. package/dist/image/root/image-root.js +0 -28
  102. package/dist/index.js +0 -5
  103. package/dist/input/root/input-root.css.js +0 -1
  104. package/dist/input/root/input-root.js +0 -28
  105. package/dist/kbd/root/kbd-root.css.js +0 -1
  106. package/dist/kbd/root/kbd-root.js +0 -20
  107. package/dist/legend/root/legend-root.css.js +0 -1
  108. package/dist/legend/root/legend-root.js +0 -35
  109. package/dist/line-chart/root/line-chart-root.css.js +0 -1
  110. package/dist/line-chart/root/line-chart-root.js +0 -47
  111. package/dist/list/item/list-item.css.js +0 -1
  112. package/dist/list/item/list-item.js +0 -38
  113. package/dist/list/root/list-root.css.js +0 -1
  114. package/dist/list/root/list-root.js +0 -23
  115. package/dist/listbox/root/listbox-root.css.js +0 -1
  116. package/dist/listbox/root/listbox-root.js +0 -22
  117. package/dist/loader/root/loader-root.css.js +0 -1
  118. package/dist/loader/root/loader-root.js +0 -19
  119. package/dist/megamenu/root/megamenu-root.css.js +0 -1
  120. package/dist/megamenu/root/megamenu-root.js +0 -24
  121. package/dist/menu/item/menu-item.css.js +0 -1
  122. package/dist/menu/item/menu-item.js +0 -16
  123. package/dist/menu/root/menu-root.css.js +0 -1
  124. package/dist/menu/root/menu-root.js +0 -26
  125. package/dist/meter/root/meter-root.css.js +0 -1
  126. package/dist/meter/root/meter-root.js +0 -50
  127. package/dist/mixins/mixin-control-surface/mixin-control-surface.js +0 -3
  128. package/dist/navigation/root/navigation-root.css.js +0 -1
  129. package/dist/navigation/root/navigation-root.js +0 -18
  130. package/dist/notifications/notification/notification.css.js +0 -1
  131. package/dist/notifications/notification/notification.js +0 -53
  132. package/dist/notifications/root/notifications-root.css.js +0 -1
  133. package/dist/notifications/root/notifications-root.js +0 -31
  134. package/dist/number-input/root/number-input-root.css.js +0 -1
  135. package/dist/number-input/root/number-input-root.js +0 -31
  136. package/dist/option/group/option-group.css.js +0 -1
  137. package/dist/option/group/option-group.js +0 -13
  138. package/dist/option/root/option-root.css.js +0 -1
  139. package/dist/option/root/option-root.js +0 -20
  140. package/dist/outline/root/outline-root.css.js +0 -1
  141. package/dist/outline/root/outline-root.js +0 -21
  142. package/dist/pagination/root/pagination-root.css.js +0 -1
  143. package/dist/pagination/root/pagination-root.js +0 -49
  144. package/dist/pagination/size/pagination-size.css.js +0 -1
  145. package/dist/pagination/size/pagination-size.js +0 -25
  146. package/dist/pagination/summary/pagination-summary.css.js +0 -1
  147. package/dist/pagination/summary/pagination-summary.js +0 -13
  148. package/dist/pin-input/root/pin-input-root.css.js +0 -1
  149. package/dist/pin-input/root/pin-input-root.js +0 -27
  150. package/dist/popover/root/popover-root.css.js +0 -1
  151. package/dist/popover/root/popover-root.js +0 -30
  152. package/dist/progress/root/progress-root.css.js +0 -1
  153. package/dist/progress/root/progress-root.js +0 -25
  154. package/dist/qr-code/root/qr-code-root.css.js +0 -1
  155. package/dist/qr-code/root/qr-code-root.js +0 -27
  156. package/dist/quote/root/quote-root.css.js +0 -1
  157. package/dist/quote/root/quote-root.js +0 -15
  158. package/dist/radio/group/radio-group.css.js +0 -1
  159. package/dist/radio/group/radio-group.js +0 -16
  160. package/dist/radio/root/radio-root.css.js +0 -1
  161. package/dist/radio/root/radio-root.js +0 -46
  162. package/dist/rating/root/rating-root.css.js +0 -1
  163. package/dist/rating/root/rating-root.js +0 -22
  164. package/dist/sandbox/index.js +0 -14
  165. package/dist/sandbox/preview/sandbox-preview.css.js +0 -1
  166. package/dist/sandbox/preview/sandbox-preview.js +0 -182
  167. package/dist/sandbox/root/sandbox-root.css.js +0 -1
  168. package/dist/sandbox/root/sandbox-root.js +1 -295
  169. package/dist/sandbox/source/sandbox-source.css.js +0 -1
  170. package/dist/sandbox/source/sandbox-source.js +0 -77
  171. package/dist/sandbox/status-bar/sandbox-status-bar.css.js +0 -1
  172. package/dist/sandbox/status-bar/sandbox-status-bar.js +0 -38
  173. package/dist/sandbox/terminal/sandbox-terminal.css.js +0 -1
  174. package/dist/sandbox/terminal/sandbox-terminal.js +0 -54
  175. package/dist/sandbox/toolbar/sandbox-toolbar.css.js +0 -1
  176. package/dist/sandbox/toolbar/sandbox-toolbar.js +0 -29
  177. package/dist/scroll-area/root/scroll-area-root.css.js +0 -1
  178. package/dist/scroll-area/root/scroll-area-root.js +0 -24
  179. package/dist/select/root/select-root.css.js +0 -1
  180. package/dist/select/root/select-root.js +0 -33
  181. package/dist/shared/chart/series.css.js +0 -1
  182. package/dist/shared/chart/terminus.css.js +0 -1
  183. package/dist/shared/field/field-inline.css.js +0 -1
  184. package/dist/shared/field/field-stacked.css.js +0 -1
  185. package/dist/shared/field/field.css.js +0 -1
  186. package/dist/skeleton/root/skeleton-root.css.js +0 -1
  187. package/dist/skeleton/root/skeleton-root.js +0 -18
  188. package/dist/slider/root/slider-root.css.js +0 -1
  189. package/dist/slider/root/slider-root.js +0 -32
  190. package/dist/sparkline/root/sparkline-root.css.js +0 -1
  191. package/dist/sparkline/root/sparkline-root.js +0 -40
  192. package/dist/speed-dial/item/speed-dial-item.css.js +0 -1
  193. package/dist/speed-dial/item/speed-dial-item.js +0 -16
  194. package/dist/speed-dial/root/speed-dial-root.css.js +0 -1
  195. package/dist/speed-dial/root/speed-dial-root.js +0 -16
  196. package/dist/splitter/root/splitter-root.css.js +0 -1
  197. package/dist/splitter/root/splitter-root.js +0 -50
  198. package/dist/stat/group/stat-group.css.js +0 -1
  199. package/dist/stat/group/stat-group.js +0 -19
  200. package/dist/stat/root/stat-root.css.js +0 -1
  201. package/dist/stat/root/stat-root.js +0 -17
  202. package/dist/steps/root/steps-root.css.js +0 -1
  203. package/dist/steps/root/steps-root.js +0 -26
  204. package/dist/steps/step/step.css.js +0 -1
  205. package/dist/steps/step/step.js +0 -12
  206. package/dist/switch/root/switch-root.css.js +0 -1
  207. package/dist/switch/root/switch-root.js +0 -32
  208. package/dist/table/cell/table-cell.css.js +0 -1
  209. package/dist/table/cell/table-cell.js +0 -14
  210. package/dist/table/column/table-column.css.js +0 -1
  211. package/dist/table/column/table-column.js +0 -13
  212. package/dist/table/root/table-root.css.js +0 -1
  213. package/dist/table/root/table-root.js +0 -19
  214. package/dist/table/row/table-row.css.js +0 -1
  215. package/dist/table/row/table-row.js +0 -14
  216. package/dist/tabs/panel/tab-panel.css.js +0 -1
  217. package/dist/tabs/panel/tab-panel.js +0 -16
  218. package/dist/tabs/root/tabs-root.css.js +0 -1
  219. package/dist/tabs/root/tabs-root.js +0 -19
  220. package/dist/tabs/tab/tab.css.js +0 -1
  221. package/dist/tabs/tab/tab.js +0 -16
  222. package/dist/tag/root/tag-root.css.js +0 -1
  223. package/dist/tag/root/tag-root.js +0 -25
  224. package/dist/text/root/text-root.css.js +0 -1
  225. package/dist/text/root/text-root.js +0 -48
  226. package/dist/textarea/root/textarea-root.css.js +0 -1
  227. package/dist/textarea/root/textarea-root.js +0 -17
  228. package/dist/time-input/root/time-input-root.css.js +0 -1
  229. package/dist/time-input/root/time-input-root.js +0 -31
  230. package/dist/time-picker/root/time-picker-root.css.js +0 -1
  231. package/dist/time-picker/root/time-picker-root.js +0 -29
  232. package/dist/timeline/item/timeline-item.css.js +0 -1
  233. package/dist/timeline/item/timeline-item.js +0 -17
  234. package/dist/timeline/root/timeline-root.css.js +0 -1
  235. package/dist/timeline/root/timeline-root.js +0 -15
  236. package/dist/toast/item/toast-item.css.js +0 -1
  237. package/dist/toast/item/toast-item.js +0 -21
  238. package/dist/toast/root/toast-root.css.js +0 -1
  239. package/dist/toast/root/toast-root.js +0 -27
  240. package/dist/toggle/group/toggle-group.css.js +0 -1
  241. package/dist/toggle/group/toggle-group.js +0 -25
  242. package/dist/toggle/root/toggle-root.css.js +0 -1
  243. package/dist/toggle/root/toggle-root.js +0 -18
  244. package/dist/toolbar/root/toolbar-root.css.js +0 -1
  245. package/dist/toolbar/root/toolbar-root.js +0 -19
  246. package/dist/tooltip/root/tooltip-root.css.js +0 -1
  247. package/dist/tooltip/root/tooltip-root.js +0 -22
  248. package/dist/tour/root/tour-root.css.js +0 -1
  249. package/dist/tour/root/tour-root.js +0 -14
  250. package/dist/tour/stop/tour-stop.css.js +0 -1
  251. package/dist/tour/stop/tour-stop.js +0 -22
  252. package/dist/tree/item/tree-item.css.js +0 -1
  253. package/dist/tree/item/tree-item.js +0 -34
  254. package/dist/tree/root/tree-root.css.js +0 -1
  255. package/dist/tree/root/tree-root.js +0 -27
  256. package/dist/trend/root/trend-root.css.js +0 -1
  257. package/dist/trend/root/trend-root.js +0 -34
  258. package/dist/video/root/video-root.css.js +0 -1
  259. package/dist/video/root/video-root.js +0 -37
  260. package/dist/video-playlist/item/video-playlist-item.css.js +0 -1
  261. package/dist/video-playlist/item/video-playlist-item.js +0 -15
  262. package/dist/video-playlist/menu/video-playlist-menu.css.js +0 -1
  263. package/dist/video-playlist/menu/video-playlist-menu.js +0 -36
  264. package/dist/video-playlist/root/video-playlist-root.css.js +0 -1
  265. package/dist/video-playlist/root/video-playlist-root.js +0 -16
  266. package/dist/virtual-list/root/virtual-list-root.css.js +0 -1
  267. package/dist/virtual-list/root/virtual-list-root.js +0 -21
  268. package/jsx.d.ts +1538 -2818
  269. package/package.json +7 -7
  270. package/vue.d.ts +3 -7
@@ -8,56 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessMeter } from '@fusion.dev/helix-headless/meter';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './meter-root.css.js';
11
- /**
12
- * @summary A measurement in a known range, and whether it is where you want it.
13
- *
14
- * @description
15
- * The bar `Progress` draws, at twice the height and on the house corner rather
16
- * than its pill.
17
- *
18
- * Taller than a progress bar rather than matched to it. The two are unrelated
19
- * controls, and a reader telling a level from a task at a glance is the point
20
- * rather than the cost. A meter also carries more, a fill and a mark at each
21
- * threshold, and at eight pixels those marks are hairlines. At sixteen they are
22
- * unmistakable.
23
- *
24
- * The corner is the ticks' doing: they cut the fill into segments, and a
25
- * pill-ended bar comes out as a run whose outer ends are round and whose inner
26
- * ends are square.
27
- *
28
- * What else differs is what the color means. A progress bar is one color because
29
- * there is one thing to say; a meter's fill takes the success, warning or danger
30
- * tone from the band its reading falls in, and only once thresholds have been
31
- * declared. An unbanded meter is neutral, because a gauge with nothing said
32
- * about it is a reading rather than good news.
33
- *
34
- * A tick marks each threshold, so the reading can be placed against the bands
35
- * without seeing color at all.
36
- *
37
- * A reading past either end squares the corner it ran out at, which is the
38
- * convention for a quantity continuing past the frame it is drawn in. The bar
39
- * itself stops, because that is what an end is; the words and the accessible
40
- * reading are what say how far past.
41
- *
42
- * @since 0.1.0
43
- * @status stable
44
- * @category feedback
45
- * @groups charts
46
- * @aliases Gauge, Level, Capacity
47
- * @documentation https://helix.fusion.dev/components/meter
48
- *
49
- * @csspart indicator - The part of it the value fills.
50
- * @csspart tick - A mark at `low` or at `high`.
51
- * @csspart track - The whole range.
52
- * @csspart value - The reading, under `show-value`.
53
- *
54
- * @cssproperty --meter-color - The fill, overriding the band's own tone.
55
- * @cssproperty --meter-ring-size - Edge length of the drawing, in `ring` and `arc`.
56
- * @cssproperty --meter-ring-width - Thickness of the stroke there.
57
- * @cssproperty --meter-size - How thick the bar is.
58
- * @cssproperty --meter-tick-color - The mark at a threshold.
59
- * @cssproperty --meter-track-color - The groove behind the fill.
60
- */
61
11
  let HelixMeter = class HelixMeter extends HelixHeadlessMeter {
62
12
  static { this.styles = styles; }
63
13
  };
@@ -6,9 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { property } from 'lit/decorators.js';
8
8
  export const MixinControlSurface = (Base) => {
9
- // Duplicated from the interface deliberately: the interface is what a
10
- // TypeScript consumer sees, and this class is what the manifest analyzer
11
- // reads when resolving inherited members into dependent packages.
12
9
  class ControlSurfaceElement extends Base {
13
10
  }
14
11
  __decorate([
@@ -1,4 +1,3 @@
1
- // Generated from src/navigation/root/navigation-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: block;
@@ -7,24 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessNavigation } from '@fusion.dev/helix-headless/navigation';
9
9
  import { styles } from './navigation-root.css.js';
10
- /**
11
- * @summary A set of destinations, with a marker on the current one.
12
- *
13
- * @description
14
- * One marker that travels, rather than a background that appears on whichever
15
- * destination is current. A fill that swaps is two things changing at once and
16
- * reads as a flicker; one that moves is a single object the eye follows, and it
17
- * says where the current page was as well as where it is.
18
- *
19
- * @since 0.1.0
20
- * @status experimental
21
- * @category navigation
22
- * @aliases Nav, NavList, Tabs
23
- * @documentation https://helix.fusion.dev/components/navigation
24
- *
25
- * @cssproperty --navigation-gap - Space between destinations.
26
- * @cssproperty --navigation-indicator-color - Fill of the traveling marker.
27
- */
28
10
  let HelixNavigation = class HelixNavigation extends HelixHeadlessNavigation {
29
11
  static { this.styles = styles; }
30
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/notifications/notification/notification.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
 
@@ -8,59 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
9
9
  import { styles as glyphStyles } from '../../icon/glyph.css.js';
10
10
  import { styles } from './notification.css.js';
11
- /**
12
- * @summary One thing that happened, which a reader may not have seen yet.
13
- *
14
- * @description
15
- * A four-column grid: media, body, actions, dismiss.
16
- *
17
- * **The media column is held open by the feed, not by the item.** Each item is
18
- * its own grid, so nothing about one row's tracks reaches the row below it: a
19
- * feed where some items had an avatar and some did not drew its text at two
20
- * different left edges, which is the fault a grid was chosen to prevent. The
21
- * root publishes whether anything in it has media and every item reserves that
22
- * much, so a mixed feed reads down one edge and a feed with no media anywhere
23
- * pays nothing for the column.
24
- *
25
- * **Unread is weight and a mark on the inline start edge, not a fill.** Depth
26
- * comes from a single border in this library, and a filled row is elevation
27
- * spelled differently; a feed of filled rows is a striped list nobody can read.
28
- * The mark is a fixed height on the first line rather than the height of the
29
- * row, so it says the same thing about a one line notification and a five line
30
- * one.
31
- *
32
- * **Narrow, the actions go under the body.** How much room the row was given is
33
- * a fact about this box and about nothing else, so it is a container query: a
34
- * feed in a 320 pixel side panel is narrow inside a 1400 pixel window, and a
35
- * viewport rule would hand it the wide branch.
36
- *
37
- * @since 0.1.0
38
- * @status experimental
39
- * @category feedback
40
- * @documentation https://helix.fusion.dev/components/notifications
41
- *
42
- * @slot - What happened, in the consumer's own markup.
43
- * @slot actions - What a reader can do about it.
44
- * @slot media - An avatar or icon identifying who or what it came from.
45
- *
46
- * @csspart controls - The actions and the dismiss, which replace the time.
47
- * @csspart dismiss - The control that removes it.
48
- * @csspart dismiss-mark - The glyph on that control, where none is slotted.
49
- * @csspart item - The whole notification.
50
- * @csspart time - When it happened.
51
- * @csspart trailing - The column holding the time and the controls.
52
- *
53
- * @cssproperty --notifications-color - Ink in an item that has been read.
54
- * @cssproperty --notifications-padding-block - Space above and below an item.
55
- * @cssproperty --notifications-padding-inline - Space either side of an item.
56
- * @cssproperty --notifications-rule - The hairline between items.
57
- * @cssproperty --notifications-unread-block-size - How long that mark is.
58
- * @cssproperty --notifications-unread-inline-size - How thick that mark is.
59
- * @cssproperty --notifications-unread-inset - How far it sits from the row's leading edge.
60
- * @cssproperty --notifications-unread-mark - Color of the edge mark on an unread item.
61
- * @cssproperty --notifications-unread-offset - How far it sits from the row's top.
62
- * @cssproperty --notifications-unread-radius - Its corner radius, which is what turns it into a dot.
63
- */
64
11
  let HelixNotification = class HelixNotification extends HelixHeadlessNotification {
65
12
  static { this.tier = 'helix-'; }
66
13
  static { this.styles = [glyphStyles, styles]; }
@@ -1,4 +1,3 @@
1
- // Generated from src/notifications/root/notifications-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
 
@@ -8,37 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
9
9
  import { styles } from './notifications-root.css.js';
10
10
  import '../notification/notification.js';
11
- /**
12
- * @summary A feed a reader comes back to, made of notifications they may not have seen.
13
- *
14
- * @description
15
- * Three rows: header, a list that scrolls, footer. The list scrolls and the
16
- * other two do not, because a panel is opened at a fixed height and a mark-all
17
- * control that slides away as the reader scrolls is the control they were
18
- * reaching for.
19
- *
20
- * **It does not virtualize and it cannot**, which is the headless tier's note
21
- * and worth repeating where the choice is made: the items are the consumer's own
22
- * elements, so N notifications is N elements by construction. A feed that really
23
- * holds thousands wants `helix-data-table` with a custom cell.
24
- *
25
- * @since 0.1.0
26
- * @status experimental
27
- * @category feedback
28
- * @documentation https://helix.fusion.dev/components/notifications
29
- *
30
- * @slot - The notifications, as `helix-notification` children.
31
- * @slot footer - Below the list, for a link to everything.
32
- * @slot header - Above the list, for a title and the mark-all control.
33
- *
34
- * @csspart list - The list itself.
35
- * @csspart mark-all - The control that marks everything read.
36
- *
37
- * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
38
- * @cssproperty --notifications-media-column - The gutter every item holds open where something in the feed has media.
39
- * @cssproperty --notifications-padding-inline - Space either side of the header and footer.
40
- * @cssproperty --notifications-rule - The hairline between items and around the regions.
41
- */
42
11
  let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
43
12
  static { this.tier = 'helix-'; }
44
13
  static { this.styles = styles; }
@@ -1,4 +1,3 @@
1
- // Generated from src/number-input/root/number-input-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: flex;
@@ -9,37 +9,6 @@ import { HelixHeadlessNumberInput } from '@fusion.dev/helix-headless/number-inpu
9
9
  import { styles as fieldStyles } from '../../shared/field/field.css.js';
10
10
  import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
11
11
  import { styles } from './number-input-root.css.js';
12
- /**
13
- * @summary A number a reader types or steps to.
14
- *
15
- * @description
16
- * The frame an `Input` wears, because in a form this stands in a row with them.
17
- * The difference is inside it: a button at each end of the box rather than
18
- * beside it, so the whole reads as one field rather than a field with two
19
- * controls after it.
20
- *
21
- * The number is centered and set in tabular figures, which is the one place this
22
- * differs from every other field in the library. Digits are what changes under a
23
- * repeated press, and proportional ones make the number shuffle while it counts.
24
- *
25
- * The steppers are out of the tab order. A keyboard reader already has four keys
26
- * on the field itself, and two more tab stops per number is a form that takes
27
- * three times as long to cross.
28
- *
29
- * @since 0.1.0
30
- * @status experimental
31
- * @category forms
32
- * @aliases NumberField, Stepper, InputNumber
33
- * @documentation https://helix.fusion.dev/components/number-input
34
- *
35
- * @slot end - After it.
36
- * @slot start - Before the number, for a unit or an icon.
37
- *
38
- * @csspart control - The field itself.
39
- * @csspart decrement - The control that steps down.
40
- * @csspart field - The box holding everything.
41
- * @csspart increment - The control that steps up.
42
- */
43
12
  let HelixNumberInput = class HelixNumberInput extends HelixHeadlessNumberInput {
44
13
  static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
45
14
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/option/group/option-group.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: block;
@@ -7,19 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessOptionGroup } from '@fusion.dev/helix-headless/option';
9
9
  import { styles } from './option-group.css.js';
10
- /**
11
- * @summary A named run of options inside a listbox.
12
- *
13
- * @description
14
- * The heading is set small and quiet, because it is a divider that happens to
15
- * have words on it: a run of options is read as a list and the heading is what
16
- * tells you which list, not something to read on its own.
17
- *
18
- * @since 0.1.0
19
- * @status experimental
20
- * @aliases OptGroup, Section
21
- * @documentation https://helix.fusion.dev/components/option-group
22
- */
23
10
  let HelixOptionGroup = class HelixOptionGroup extends HelixHeadlessOptionGroup {
24
11
  static { this.styles = styles; }
25
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/option/root/option-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
 
@@ -7,26 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option';
9
9
  import { styles } from './option-root.css.js';
10
- /**
11
- * @summary One choice in a listbox.
12
- *
13
- * @description
14
- * Two states that look different on purpose: chosen, which is a fact about the
15
- * value, and active, which is where the keyboard is. A list that draws them the
16
- * same way leaves a reader arrowing through it unable to tell what they have
17
- * picked from what they are looking at.
18
- *
19
- * @since 0.1.0
20
- * @status experimental
21
- * @category forms
22
- * @aliases Item, Choice
23
- * @documentation https://helix.fusion.dev/components/option
24
- *
25
- * @cssproperty --option-active-color - Wash behind the option the keyboard is on.
26
- * @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.
27
- * @cssproperty --option-padding - Space before the label, shared with a group heading.
28
- * @cssproperty --option-radius - Corner radius of the row. A listbox and a select flatten it.
29
- */
30
10
  let HelixOption = class HelixOption extends HelixHeadlessOption {
31
11
  static { this.styles = styles; }
32
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/outline/root/outline-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: block;
@@ -7,27 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessOutline } from '@fusion.dev/helix-headless/outline';
9
9
  import { styles } from './outline-root.css.js';
10
- /**
11
- * @summary Links to the headings on this page, marking the one being read.
12
- *
13
- * @description
14
- * A rule down the leading edge with the current section lit along it, which is
15
- * the shape a table of contents has taken since printed marginalia: the line
16
- * says the list is one thing, and the lit segment says where in it you are.
17
- *
18
- * Nesting is the consumer's, expressed as `data-level` on a link. An outline
19
- * that read heading levels itself would have to look at the document, and the
20
- * document is not always where the headings are.
21
- *
22
- * @since 0.1.0
23
- * @status experimental
24
- * @category navigation
25
- * @aliases Table of contents, On this page, Outline
26
- * @documentation https://helix.fusion.dev/components/outline
27
- *
28
- * @cssproperty --outline-indent - How far each level is inset from the one above.
29
- * @cssproperty --outline-rail - Width of the gutter the rule and the traveling mark share.
30
- */
31
10
  let HelixOutline = class HelixOutline extends HelixHeadlessOutline {
32
11
  static { this.styles = styles; }
33
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/pagination/root/pagination-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  align-items: center;
@@ -7,55 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessPagination } from '@fusion.dev/helix-headless/pagination';
9
9
  import { styles } from './pagination-root.css.js';
10
- /**
11
- * @summary Moves between pages of a longer result.
12
- *
13
- * @description
14
- * One box for every control in the row, arrows and numbers alike, so the run has
15
- * a single rhythm and the steps sit at the numbers' height rather than between
16
- * them. Square, because a page number is one or two characters and a box sized
17
- * to the widest would leave the short ones swimming; `min-inline-size` rather
18
- * than a fixed one, so page 100 grows instead of overflowing.
19
- *
20
- * Figures are tabular throughout. A page number is the one thing here that
21
- * changes under the pointer, and proportional digits make the whole row shuffle
22
- * as it does.
23
- *
24
- * The current page is a raised chip rather than a brand fill, which is the
25
- * treatment `Tabs` gives its selected tab. Brand on a page number claims more
26
- * than the state deserves: it is not a choice the reader made about anything,
27
- * it is where they happen to be standing, and a row of gray numbers with one
28
- * blue one reads as the blue one being an action.
29
- *
30
- * Selected on `aria-current` rather than on a second attribute saying the same
31
- * thing: the state is already in the accessibility tree, and a `data-current`
32
- * beside it would be two places to keep in step.
33
- *
34
- * The gap takes the same box as everything else in the row and only sits back a
35
- * shade in color. It is a control, so it answers hover and focus like one; it
36
- * is a way through rather than a destination, so it does not compete.
37
- *
38
- * @since 0.1.0
39
- * @status experimental
40
- * @category navigation
41
- * @aliases Pager, Page nav
42
- * @documentation https://helix.fusion.dev/components/pagination
43
- *
44
- * @csspart first - The control that jumps to the first page, under `ends`.
45
- * @csspart gap - The control standing over pages not shown, which jumps into them.
46
- * @csspart item - One slot in the run, holding a page or a gap.
47
- * @csspart last - The control that jumps to the last page, under `ends`.
48
- * @csspart list - The run of pages.
49
- * @csspart next - The control that moves forward one page.
50
- * @csspart page - The control for one page.
51
- * @csspart previous - The control that moves back one page.
52
- * @csspart status - The reading of where you are, in `compact`.
53
- *
54
- * @cssproperty --pagination-current-color - Fill behind the page you are on.
55
- * @cssproperty --pagination-gap - Space between one control and the next.
56
- * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
57
- * @cssproperty --pagination-size - The box every control in the row takes.
58
- */
59
10
  let HelixPagination = class HelixPagination extends HelixHeadlessPagination {
60
11
  static { this.styles = styles; }
61
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/pagination/size/pagination-size.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: inline-flex;
@@ -6,35 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessPaginationSize } from '@fusion.dev/helix-headless/pagination';
9
- /* Side-effect imports, for the reason `Select` gives about the listbox it
10
- renders: this renders `<helix-select>` and `<helix-option>` in its own shadow
11
- root, a custom element registers on import, and an unregistered one is legal
12
- HTML that reports nothing and simply never upgrades. */
13
9
  import '../../option/index.js';
14
10
  import '../../select/index.js';
15
11
  import { styles } from './pagination-size.css.js';
16
- /**
17
- * @summary Chooses how many items a page holds.
18
- *
19
- * @description
20
- * A `Select`, laid out on one row. Every other field stacks its label because it
21
- * stands in a column of fields; this one stands in a footer beside a run of page
22
- * numbers, where a two-line control makes the whole row two lines tall.
23
- *
24
- * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
25
- * reach through both boundaries and a consumer styles it as the select it is.
26
- *
27
- * @since 0.1.0
28
- * @status experimental
29
- * @aliases Page size, Rows per page
30
- * @documentation https://helix.fusion.dev/components/pagination
31
- *
32
- * @csspart control - The select.
33
- */
34
12
  let HelixPaginationSize = class HelixPaginationSize extends HelixHeadlessPaginationSize {
35
- /* So the seam renders `helix-select` and `helix-option` rather than the base
36
- pair the headless tier composes. One word, and the template stays in one
37
- place. */
38
13
  static { this.tier = 'helix-'; }
39
14
  static { this.styles = styles; }
40
15
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/pagination/summary/pagination-summary.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  color: var(--helix-color-foreground-subtle);
@@ -7,19 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessPaginationSummary } from '@fusion.dev/helix-headless/pagination';
9
9
  import { styles } from './pagination-summary.css.js';
10
- /**
11
- * @summary Reads out which items of how many are on show.
12
- *
13
- * @description
14
- * Prose beside the controls rather than one of them: no box and no hover, in the
15
- * subtler of the two muted steps, because it is a fact about the result and not
16
- * a way to move through it.
17
- *
18
- * @since 0.1.0
19
- * @status experimental
20
- * @aliases Result count, Range
21
- * @documentation https://helix.fusion.dev/components/pagination
22
- */
23
10
  let HelixPaginationSummary = class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
24
11
  static { this.styles = styles; }
25
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/pin-input/root/pin-input-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: flex;
@@ -9,33 +9,6 @@ import { HelixHeadlessPinInput } from '@fusion.dev/helix-headless/pin-input';
9
9
  import { styles as fieldStyles } from '../../shared/field/field.css.js';
10
10
  import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
11
11
  import { styles } from './pin-input-root.css.js';
12
- /**
13
- * @summary A short code, one character to a box.
14
- *
15
- * @description
16
- * Square boxes at the control height with real space between them, which is the
17
- * whole picture: a code is read as separate characters, and boxes shoulder to
18
- * shoulder read as one field with lines drawn in it.
19
- *
20
- * The focus ring is on the box the reader is in rather than around the row. A
21
- * code is entered one character at a time and the boxes exist to say which one
22
- * is next, so a ring around all six would answer the question the component is
23
- * for.
24
- *
25
- * Figures are tabular, so a 1 takes the room an 8 does and the row does not
26
- * breathe as a code is typed into it.
27
- *
28
- * @since 0.1.0
29
- * @status stable
30
- * @category forms
31
- * @aliases PinField, OTP, One-time code, Verification code, InputPin
32
- * @documentation https://helix.fusion.dev/components/pin-input
33
- *
34
- * @csspart cell - One box.
35
- * @csspart field - The row of boxes.
36
- *
37
- * @cssproperty --pin-input-gap - Space between one box and the next.
38
- */
39
12
  let HelixPinInput = class HelixPinInput extends HelixHeadlessPinInput {
40
13
  static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
41
14
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/popover/root/popover-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
 
@@ -8,36 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessPopover } from '@fusion.dev/helix-headless/popover';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './popover-root.css.js';
11
- /**
12
- * @summary A panel that opens against a trigger and holds anything.
13
- *
14
- * @description
15
- * A surface with an inset and a shadow, and nothing about what goes in it. The
16
- * inset is the panel's rather than the consumer's, which is the same call
17
- * `Dialog` and `Drawer` make and for the same reason: everyone was writing it,
18
- * and everyone was writing the same one.
19
- *
20
- * It arrives from the side it opened on. `data-placement` is written by the
21
- * positioning, so the panel knows which way it flipped and can animate from the
22
- * trigger rather than from a fixed direction that would be backwards half the
23
- * time.
24
- *
25
- * @since 0.1.0
26
- * @status stable
27
- * @category overlays
28
- * @aliases Popper, Flyout, Overlay
29
- * @documentation https://helix.fusion.dev/components/popover
30
- *
31
- * @cssproperty --popover-border-color - Color of the panel's edge.
32
- * @cssproperty --popover-border-width - Width of the panel's edge. Follows
33
- * `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
34
- * theme says otherwise.
35
- * @cssproperty --popover-inline-size - Width of the panel.
36
- * @cssproperty --popover-max-block-size - Tallest the panel grows before it scrolls.
37
- * @cssproperty --popover-padding - Space between the panel's edge and its contents.
38
- * @cssproperty --popover-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
39
- * floating surface sits over content nobody can predict, so it keeps a lift by default.
40
- */
41
11
  let HelixPopover = class HelixPopover extends HelixHeadlessPopover {
42
12
  static { this.styles = styles; }
43
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/progress/root/progress-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  display: block;
@@ -8,31 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessProgress } from '@fusion.dev/helix-headless/progress';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './progress-root.css.js';
11
- /**
12
- * @summary Shows how far along a task is, when that is known.
13
- *
14
- * @description
15
- * A track and the part of it that is done. The height comes from a token rather
16
- * than from a size property, for the reason the rest of the library gives about
17
- * controls: how heavy a bar is says something about the region it is in, and a
18
- * `--progress-size` on that region says it once.
19
- *
20
- * The fill transitions, which is worth more here than it looks. Progress
21
- * arrives in steps, often large ones, and a bar that jumps between them reads
22
- * as a series of unrelated states where one that travels reads as a single
23
- * thing advancing.
24
- *
25
- * @since 0.1.0
26
- * @status stable
27
- * @category feedback
28
- * @groups charts
29
- * @aliases Progress bar, Loading bar
30
- * @documentation https://helix.fusion.dev/components/progress
31
- *
32
- * @cssproperty --progress-color - Fill of the part that is done.
33
- * @cssproperty --progress-ring-size - Diameter of the ring appearance.
34
- * @cssproperty --progress-ring-width - Thickness of its stroke.
35
- */
36
11
  let HelixProgress = class HelixProgress extends HelixHeadlessProgress {
37
12
  static { this.styles = styles; }
38
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/qr-code/root/qr-code-root.css by `turbo run styles`. Do not edit.
2
1
  import { createSheet } from '@fusion.dev/helix-core';
3
2
  export const styles = createSheet(`:host {
4
3
  --_qr-size: var(--qr-code-size, 12rem);
@@ -7,33 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessQrCode } from '@fusion.dev/helix-headless/qr-code';
9
9
  import { styles } from './qr-code-root.css.js';
10
- /**
11
- * @summary Encodes a short piece of text as a scannable square.
12
- *
13
- * @description
14
- * The picture is the headless tier's. What this adds is a size that can be set
15
- * once, the colors a scanner needs, and the box that holds a center mark.
16
- *
17
- * **The ink is `currentColor` and the ground is a real fill.** A code has to be
18
- * dark on light to read, and the pair that guarantees it is not the page's
19
- * foreground and background: those invert together in dark mode, and a code
20
- * drawn light-on-dark is refused by a good half of the scanners in the world.
21
- * So the ground is stated and the ink is the foreground it is chosen for.
22
- *
23
- * @since 0.1.0
24
- * @status stable
25
- * @category media
26
- * @documentation https://helix.fusion.dev/components/qr-code
27
- *
28
- * @cssproperty --qr-code-background-color - Behind them, including the quiet zone.
29
- * @cssproperty --qr-code-color - The dark modules. Defaults to the page's ink.
30
- * @cssproperty --qr-code-finder-color - The three corner squares. Defaults to
31
- * the same ink as the modules.
32
- * @cssproperty --qr-code-logo-padding - The quiet zone around that mark.
33
- * @cssproperty --qr-code-logo-size - How much of the middle a mark may cover.
34
- * Defaults to `27%`, which `H` correction carries: it can lose thirty percent.
35
- * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
36
- */
37
10
  let HelixQrCode = class HelixQrCode extends HelixHeadlessQrCode {
38
11
  static { this.styles = styles; }
39
12
  };