@fusion.dev/helix 0.1.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
@@ -1,9 +1,3 @@
1
- /**
2
- * The shapes, in the order the shader branches on them.
3
- *
4
- * Exported so the component can turn a property into the integer the uniform
5
- * takes without a second list to keep in step.
6
- */
7
1
  export const SHAPES = [
8
2
  'braid',
9
3
  'rays',
@@ -17,23 +11,7 @@ export const SHAPES = [
17
11
  'lattice',
18
12
  'fracture',
19
13
  ];
20
- /**
21
- * What the pointer does, in the order the shader branches on them.
22
- *
23
- * `native` is the shape's own, and is what absence means: braid leans, rays are
24
- * occluded, threads pinch. The rest are generic, deliberately few, opt-in and
25
- * never a default. A response made of the same material as the shape says
26
- * something about that shape; a lamp that follows the cursor says the same
27
- * nothing on every one of them. They are here because a consumer may want the
28
- * quieter, more conventional answer, not because it is the better one.
29
- */
30
14
  export const INTERACTIONS = ['native', 'light', 'shadow', 'ripple', 'none'];
31
- /**
32
- * Three vertices from `gl_VertexID`, covering the screen with one triangle.
33
- *
34
- * No attribute, no buffer and no upload, and one triangle rather than two, so
35
- * there is no seam down the diagonal where a quad's halves meet.
36
- */
37
15
  export const VERTEX = `#version 300 es
38
16
  out vec2 uv;
39
17
  void main() {
@@ -42,19 +20,6 @@ export const VERTEX = `#version 300 es
42
20
  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
43
21
  }
44
22
  `;
45
- /**
46
- * One program, branching on a uniform, for every shape.
47
- *
48
- * A branch on a uniform is uniform across the whole draw, so every lane takes
49
- * the same path and it costs a jump rather than divergence. A program per shape
50
- * would mean compiling and linking on a property change, which is the one
51
- * moment a reader is watching.
52
- *
53
- * **No backticks anywhere inside this string, including in comments.** One ends
54
- * the template literal early, and what follows is parsed as JavaScript: it has
55
- * silently stripped every brace out of a shader and left the driver reporting a
56
- * syntax error two hundred lines from the cause. The build fails on it.
57
- */
58
23
  export const FRAGMENT = `#version 300 es
59
24
  precision highp float;
60
25
 
@@ -1,4 +1,3 @@
1
- // Generated from src/avatar/group/avatar-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
  --_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));
@@ -7,30 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessAvatarGroup } from '@fusion.dev/helix-headless/avatar';
9
9
  import { styles } from './avatar-group.css.js';
10
- /**
11
- * @summary Overlapping avatars, with a count for the ones not shown.
12
- *
13
- * @description
14
- * They overlap by a step of space, which is enough to read as a stack without
15
- * the faces occluding each other. Each carries a ring in the page's own
16
- * background color, because a stack with no separation between its members
17
- * reads as one shape rather than several: the ring is what makes the edge of
18
- * each avatar visible against the one behind it.
19
- *
20
- * Each avatar is drawn over the one before it, which falls out of document
21
- * order and needs no `z-index`. The familiar trick for putting the *first*
22
- * avatar on top is `row-reverse`, and it also reverses the row: the person
23
- * written first appears last. A facepile whose reading order is the reverse of
24
- * its markup is the worse trade of the two.
25
- *
26
- * @since 0.1.0
27
- * @status stable
28
- * @aliases Avatar stack, Facepile
29
- * @documentation https://helix.fusion.dev/components/avatar
30
- *
31
- * @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
32
- * @cssproperty --avatar-group-ring-color - The separation drawn between one avatar and the next.
33
- */
34
10
  let HelixAvatarGroup = class HelixAvatarGroup extends HelixHeadlessAvatarGroup {
35
11
  static { this.styles = styles; }
36
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/avatar/root/avatar-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
  --_avatar-size: var(--avatar-size, var(--helix-size-avatar));
@@ -8,29 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessAvatar } from '@fusion.dev/helix-headless/avatar';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './avatar-root.css.js';
11
- /**
12
- * @summary Represents a person or entity with an image or their initials.
13
- *
14
- * @description
15
- * Initials scale with the avatar rather than being sized per size, because the
16
- * font size is set in `em` against the avatar's own dimension. One rule covers
17
- * every size, including one a consumer sets themselves through
18
- * `--avatar-size`.
19
- *
20
- * @since 0.1.0
21
- * @status stable
22
- * @category media
23
- * @aliases Profile picture, Gravatar
24
- * @documentation https://helix.fusion.dev/components/avatar
25
- *
26
- * @slot - Replaces the image and initials entirely, for an icon.
27
- *
28
- * @csspart image - The image, when one is loading or loaded.
29
- * @csspart initials - The initials shown when there is no usable image.
30
- *
31
- * @cssproperty --avatar-background-color - Fill behind the initials.
32
- * @cssproperty --avatar-size - Edge length of the avatar.
33
- */
34
11
  let HelixAvatar = class HelixAvatar extends HelixHeadlessAvatar {
35
12
  static { this.styles = styles; }
36
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/badge/root/badge-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: inline-flex;
@@ -20,12 +20,8 @@ import type { CSSResultGroup } from 'lit';
20
20
  */
21
21
  export declare class HelixBadge extends HelixHeadlessBadge {
22
22
  /**
23
- * What the mark means.
24
- *
25
- * `danger` and `neutral` are meanings, not treatments: the stylesheet picks a
26
- * fill by what the count *is*, not by how loudly it is drawn. Filed under
27
- * `appearance` it would read as a treatment, which is the confusion the split
28
- * exists to stop.
23
+ * What the mark means, not how loudly it is drawn: the stylesheet picks a fill
24
+ * from what the count *is*.
29
25
  */
30
26
  tone?: 'danger' | 'neutral';
31
27
  static styles: CSSResultGroup;
@@ -8,24 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessBadge } from '@fusion.dev/helix-headless/badge';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './badge-root.css.js';
11
- /**
12
- * @summary Attaches a count or a presence mark to another element.
13
- *
14
- * @description
15
- * The indicator carries a ring in the page's own background color, so it stays
16
- * legible where it overlaps the thing it is pinned to. Without it a dark badge
17
- * on a dark icon reads as a bite taken out of the icon.
18
- *
19
- * @since 0.1.0
20
- * @status stable
21
- * @category markers
22
- * @aliases Count, Indicator, Pip
23
- * @documentation https://helix.fusion.dev/components/badge
24
- *
25
- * @cssproperty --badge-background-color - Fill of the indicator.
26
- * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
27
- * @cssproperty --badge-ring-color - The ring separating it from what is behind.
28
- */
29
11
  let HelixBadge = class HelixBadge extends HelixHeadlessBadge {
30
12
  static { this.styles = styles; }
31
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/bar-chart/root/bar-chart-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: grid;
@@ -10,58 +10,8 @@ import { property } from 'lit/decorators.js';
10
10
  import { styles as seriesStyles } from '../../shared/chart/series.css.js';
11
11
  import { styles } from './bar-chart-root.css.js';
12
12
  import '../../tooltip/index.js';
13
- /**
14
- * @summary Categories as columns, read from a table.
15
- *
16
- * @description
17
- * The columns take the series palette in order, so a chart of one is series one
18
- * and a chart of four is the first four. Rounded at the far end only, because a
19
- * column grows from the baseline and a rounded foot would lift it off the rule
20
- * it is measured against.
21
- *
22
- * @since 0.1.0
23
- * @status experimental
24
- * @category charts
25
- * @groups charts
26
- * @aliases Column Chart, Categorical Chart
27
- * @documentation https://helix.fusion.dev/components/bar-chart
28
- *
29
- * @cssproperty --bar-chart-band-color - The slot the pointer is resting in.
30
- * @cssproperty --bar-chart-bar-radius - Corner radius at the far end of a column.
31
- * @cssproperty --bar-chart-bar-stroke - Width of the edge an `outlined` or `subtle`
32
- * column is drawn with.
33
- * @cssproperty --bar-chart-block-size - Height of the drawing.
34
- * @cssproperty --bar-chart-gap - Space between the drawing and its labels.
35
- * @cssproperty --bar-chart-gridline-color - One rule across the plot, under `gridlines`.
36
- * @cssproperty --bar-chart-line-color - A `lines` series, overriding its series color.
37
- * @cssproperty --bar-chart-line-width - Thickness of a `lines` series.
38
- */
39
13
  let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
40
- /**
41
- * **The styled tier, so the tooltip this renders is the styled one.**
42
- *
43
- * `tag()` builds a child's tag name from this prefix, and the base declares
44
- * `helix-headless-`. Without this override the chart puts a
45
- * `helix-headless-tooltip` in its shadow root: the behavior with none of the
46
- * surface, so the reading bubble falls back to the browser's popover defaults,
47
- * a white 1.5px border, square corners, `0.25em` of padding and the page's
48
- * font size, and looks like no other tooltip on the site.
49
- */
50
14
  static { this.tier = 'helix-'; }
51
- /**
52
- * Marks each column with the treatments its series asked for.
53
- *
54
- * **Stamped after render rather than rendered, because the tier that draws
55
- * the columns is the one that must not know about treatments.** The headless
56
- * tier already writes `data-series` on every rect so a stylesheet can color
57
- * it; this reads the same mark, resolves the names against the series the
58
- * table gave, and writes `data-emphasis` beside it. The stylesheet does the
59
- * rest, so nothing about painting crosses the tier boundary.
60
- *
61
- * The mark is the palette slot rather than the series ordinal, so past the
62
- * palette's width two series share one. They share a color there too, which
63
- * is the same limit arriving in a second place rather than a new one.
64
- */
65
15
  updated(changed) {
66
16
  super.updated(changed);
67
17
  const slots = (list) => new Set((list ?? '')
@@ -1,4 +1,3 @@
1
- // Generated from src/blockquote/root/blockquote-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,23 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessBlockquote } from '@fusion.dev/helix-headless/blockquote';
9
9
  import { styles } from './blockquote-root.css.js';
10
- /**
11
- * @summary A passage set off from the prose around it.
12
- *
13
- * @description
14
- * Set larger than body text on the display face, because a pulled quotation is
15
- * a change of voice and the type is what says so. No quotation marks are drawn:
16
- * the size and the space around it already set the passage apart, and marks on
17
- * top of that are the same thing said twice.
18
- *
19
- * @since 0.1.0
20
- * @status stable
21
- * @category typography
22
- * @aliases Pullquote, Citation, Excerpt
23
- * @documentation https://helix.fusion.dev/components/blockquote
24
- *
25
- * @cssproperty --blockquote-size - Size of the quoted passage.
26
- */
27
10
  let HelixBlockquote = class HelixBlockquote extends HelixHeadlessBlockquote {
28
11
  static { this.styles = styles; }
29
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/breadcrumbs/breadcrumb/breadcrumb.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,34 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessBreadcrumb } from '@fusion.dev/helix-headless/breadcrumbs';
9
9
  import { styles } from './breadcrumb.css.js';
10
- /**
11
- * @summary One step in a breadcrumb trail.
12
- *
13
- * @description
14
- * The separator is hidden on the first item with `:host(:first-child)`, so no
15
- * item needs to know its own index and the parent needs no coordination.
16
- *
17
- * The link carries `data-link="quiet"`, the recipe navigation uses everywhere
18
- * else, which is what owns its color. Under the pointer it reads as a subtle
19
- * button. That part is styled from in here: the base layer sets color and
20
- * text-decoration on an anchor and nothing else, so the outer tree wins those
21
- * and leaves box and background to `::slotted`.
22
- *
23
- * @since 0.1.0
24
- * @status stable
25
- * @aliases Crumb
26
- * @documentation https://helix.fusion.dev/components/breadcrumbs
27
- *
28
- * @slot - The step: a link, or the text of the current page.
29
- * @slot separator - Replaces the chevron shown before this item.
30
- *
31
- * @csspart separator - The separator preceding the item.
32
- *
33
- * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
34
- * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
35
- * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
36
- * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
37
- */
38
10
  let HelixBreadcrumb = class HelixBreadcrumb extends HelixHeadlessBreadcrumb {
39
11
  static { this.styles = styles; }
40
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/breadcrumbs/root/breadcrumbs-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,25 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
9
9
  import { styles } from './breadcrumbs-root.css.js';
10
- /**
11
- * @summary Shows the path to the current page.
12
- *
13
- * @description
14
- * A single wrapping line by default. The trail wraps rather than scrolling,
15
- * because a truncated path tells the reader less than a two-line one.
16
- *
17
- * @since 0.1.0
18
- * @status stable
19
- * @category navigation
20
- * @aliases Breadcrumb, Crumbs
21
- * @documentation https://helix.fusion.dev/components/breadcrumbs
22
- *
23
- * @slot - The trail's items, in order from root to current page.
24
- *
25
- * @csspart list - The ordered list.
26
- *
27
- * @cssproperty --breadcrumbs-gap - Space between items and separators.
28
- */
29
10
  let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
30
11
  static { this.styles = styles; }
31
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/button/root/button-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: inline-flex;
@@ -9,44 +9,6 @@ import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
11
11
  import { styles } from './button-root.css.js';
12
- /**
13
- * @summary Triggers an action, submits a form, or navigates.
14
- *
15
- * @description
16
- * Four appearances, all drawn on one control so a link styled as a button and a
17
- * real button are indistinguishable to a reader. There are no sizes: a control
18
- * takes its height from the region it is in, through `data-density`, which is
19
- * the one size axis in the library and the reason a row of controls cannot come
20
- * out ragged. The focus ring is declared here rather than inherited, because the
21
- * base layer's `:focus-visible` rule is a light-DOM rule and stops at the shadow
22
- * boundary.
23
- *
24
- * @since 0.1.0
25
- * @status stable
26
- * @category actions
27
- * @documentation https://helix.fusion.dev/components/button
28
- *
29
- * @slot - The button's label.
30
- * @slot end - Content after the label.
31
- * @slot start - Content before the label, usually an icon.
32
- *
33
- * @csspart button - The inner control.
34
- *
35
- * @cssproperty --button-background-color - Fill behind the button, in every state.
36
- * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.
37
- * @cssproperty --button-foreground-color - Label and icon color.
38
- * @cssproperty --button-gap - Space between the label and whatever flanks it.
39
- * @cssproperty --button-inline-size - Width taken by `width="standard"`.
40
- * @cssproperty --button-padding-inline - Inline padding, for a container whose rhythm is not the control default.
41
- * @cssproperty --button-radius - Corner radius of the control.
42
- * @cssproperty --button-radius-end - Trailing corners, which a group flattens.
43
- * @cssproperty --button-radius-end-end - The bottom trailing corner, for a group stacking down.
44
- * @cssproperty --button-radius-end-start - The bottom leading corner, for a group stacking down.
45
- * @cssproperty --button-radius-start - Leading corners, which a group flattens.
46
- * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
47
- * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
48
- * @cssproperty --button-size - Height of the control, for a container whose row is not one of the density steps.
49
- */
50
12
  let HelixButton = class HelixButton extends MixinControlSurface(HelixHeadlessButton) {
51
13
  static { this.styles = styles; }
52
14
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/button-group/root/button-group-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: inline-flex;
@@ -8,30 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessButtonGroup } from '@fusion.dev/helix-headless/button-group';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './button-group-root.css.js';
11
- /**
12
- * @summary Groups related buttons into one control.
13
- *
14
- * @description
15
- * The buttons are joined into a single shape: the outer corners keep their
16
- * radius, the inner ones lose it, and adjacent borders collapse into one line.
17
- *
18
- * That joining is in the base layer, paired with `data-button` the way the
19
- * button's own box is, because the corner belongs to the control inside each
20
- * button's shadow root and a rule in here cannot reach it. The same rule
21
- * therefore serves a consumer's own anchor styled as a button.
22
- *
23
- * @since 0.1.0
24
- * @status stable
25
- * @category actions
26
- * @aliases Segmented buttons, Split button
27
- * @documentation https://helix.fusion.dev/components/button-group
28
- *
29
- * @slot - The buttons in the group.
30
- *
31
- * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
32
- *
33
- * @property appearance - Whether the buttons are one bar or a spaced row.
34
- */
35
11
  let HelixButtonGroup = class HelixButtonGroup extends HelixHeadlessButtonGroup {
36
12
  static { this.styles = styles; }
37
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/callout/root/callout-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,32 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
9
9
  import { styles } from './callout-root.css.js';
10
- /**
11
- * @summary Sets a passage apart as information, a warning, or an error.
12
- *
13
- * @description
14
- * Tinted from the tone's status color with `color-mix`, and marked with a bar
15
- * on the inline start so the tone survives being read in grayscale or by anyone
16
- * who does not distinguish the hues.
17
- *
18
- * There is no treatment axis here. `tone` carries the meaning and lives on the
19
- * headless tier; this tier only decides what that meaning looks like.
20
- *
21
- * @since 0.1.0
22
- * @status stable
23
- * @category markers
24
- * @aliases Admonition, Notice, Note, Alert
25
- * @documentation https://helix.fusion.dev/components/callout
26
- *
27
- * @slot - The callout's content.
28
- * @slot icon - Replaces the icon chosen by `tone`.
29
- *
30
- * @csspart content - The content region.
31
- * @csspart icon - The icon region.
32
- *
33
- * @cssproperty --callout-background-color - Fill behind the callout.
34
- * @cssproperty --callout-radius - Corner radius of the callout.
35
- */
36
10
  let HelixCallout = class HelixCallout extends HelixHeadlessCallout {
37
11
  static { this.styles = styles; }
38
12
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/card/root/card-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
  background-color: var(--card-background-color, var(--helix-color-surface));
@@ -8,51 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessCard } from '@fusion.dev/helix-headless/card';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './card-root.css.js';
11
- /**
12
- * @summary Groups related content and actions into a single surface.
13
- *
14
- * @description
15
- * Regions are bare slots with no wrapper element: `media`, `header`, the default
16
- * slot for content, and `footer`. An omitted one occupies no space without the
17
- * card having to detect that it is missing, so a card with only content needs no
18
- * wrapper markup at all. Style slotted content directly rather than reaching for
19
- * a part: a header is whatever element you slotted, not a wrapper around it.
20
- *
21
- * `media` runs edge to edge and clips to the card's corners, so an image needs
22
- * no inset correction. Set `orientation="horizontal"` to move it alongside the
23
- * header, content, and footer stack rather than above it, or
24
- * `media-placement="end"` to put it under the content instead of over it, which
25
- * is what a chart concluding a card wants.
26
- *
27
- * @since 0.1.0
28
- * @status stable
29
- * @category layout
30
- * @aliases Panel, Surface
31
- * @documentation https://helix.fusion.dev/components/card
32
- *
33
- * @slot - The card's main content.
34
- * @slot footer - Actions that conclude the card.
35
- * @slot header - Title and any actions for the whole card.
36
- * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
37
- *
38
- * @cssproperty --card-align - How the regions pack when the card is stretched
39
- * taller than its content. `start` by default, so the slack is at the bottom;
40
- * `space-between` puts a footer on the floor.
41
- * @cssproperty --card-backdrop - Filter applied behind a `frosted` or `glass` card. Follows
42
- * the theme's material policy; set it to override the strength on one card.
43
- * @cssproperty --card-background-color - Surface behind the card.
44
- * @cssproperty --card-border-color - Border color of the surface.
45
- * @cssproperty --card-border-width - Width of the surface's edge. Follows
46
- * `--helix-border-surface`, a hairline, so the surface is told apart by its edge unless a
47
- * theme says otherwise.
48
- * @cssproperty --card-media-block-size - Height of the media region. Defaults to
49
- * `auto`, which is an image's own shape and is not a height a chart has.
50
- * @cssproperty --card-media-size - Width of the media column when horizontal.
51
- * @cssproperty --card-padding - Inset applied to each region.
52
- * @cssproperty --card-radius - Corner radius of the surface.
53
- * @cssproperty --card-shadow - Shadow under the surface. What `elevated` sets, and what a
54
- * `data-card` link raises on hover.
55
- */
56
11
  let HelixCard = class HelixCard extends HelixHeadlessCard {
57
12
  static { this.styles = styles; }
58
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/carousel/root/carousel-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
  --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
@@ -8,30 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessCarousel } from '@fusion.dev/helix-headless/carousel';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import { styles } from './carousel-root.css.js';
11
- /**
12
- * @summary Shows one slide of several, with controls to move between them.
13
- *
14
- * @description
15
- * The track scroll-snaps, so a drag and a trackpad swipe move it with the
16
- * browser's own momentum and the controls only have to scroll.
17
- *
18
- * Slides take the full track by default. `per-view` fits more than one across,
19
- * up to five, and is declared on the tier below because it decides how many
20
- * positions the track has rather than only how wide a slide is,
21
- * which is what a run of cards wants rather than a run of full-width panels.
22
- *
23
- * @since 0.1.0
24
- * @status experimental
25
- * @category layout
26
- * @aliases Slider, Gallery, Slideshow
27
- * @documentation https://helix.fusion.dev/components/carousel
28
- *
29
- * @cssproperty --carousel-bleed - Room inside the scroller so a slide's own shadow, border or
30
- * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
31
- * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
32
- * @cssproperty --carousel-block-size - Height of a vertical track.
33
- * @cssproperty --carousel-gap - Space between slides.
34
- */
35
11
  let HelixCarousel = class HelixCarousel extends HelixHeadlessCarousel {
36
12
  static { this.styles = styles; }
37
13
  };
@@ -1,4 +1,3 @@
1
- // Generated from src/chat/composer/chat-composer.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,32 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
9
9
  import { styles } from './chat-composer.css.js';
10
- /**
11
- * @summary Where the reader writes their turn.
12
- *
13
- * @description
14
- * One row, and the field takes the room. **It grows with the text and stops at a
15
- * ceiling**, through `field-sizing: content` rather than a script measuring
16
- * anything: where that is not supported the field keeps its rows and scrolls,
17
- * which is the answer a textarea has always given. A composer that grows without
18
- * a ceiling eats the transcript it belongs to.
19
- *
20
- * @since 0.1.0
21
- * @status experimental
22
- * @category forms
23
- * @documentation https://helix.fusion.dev/components/chat
24
- *
25
- * @slot end - Under the field, beside the send control.
26
- * @slot start - Under the field, at the leading edge: attachments, a model picker.
27
- *
28
- * @csspart field - The text field.
29
- * @csspart send - The control that offers the turn.
30
- * @csspart tools - The row under the field.
31
- *
32
- * @cssproperty --chat-composer-background-color - Fill behind the composer.
33
- * @cssproperty --chat-composer-border-width - The composer's edge, so a theme can remove it.
34
- * @cssproperty --chat-composer-max-block-size - How tall the field may grow.
35
- */
36
10
  let HelixChatComposer = class HelixChatComposer extends HelixHeadlessChatComposer {
37
11
  static { this.tier = 'helix-'; }
38
12
  static { this.styles = styles; }
@@ -1,4 +1,3 @@
1
- // Generated from src/chat/message/chat-message.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;