@fusion.dev/helix 0.0.0-dev → 0.0.3

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 (227) hide show
  1. package/custom-elements.json +5565 -5519
  2. package/dist/accordion/item/accordion-item.css.js +1 -19
  3. package/dist/accordion/root/accordion-root.css.js +1 -1
  4. package/dist/accordion/root/accordion-root.d.ts +1 -1
  5. package/dist/accordion/root/accordion-root.js +1 -1
  6. package/dist/announcement/root/announcement-root.css.js +1 -7
  7. package/dist/app-header/root/app-header-root.css.js +1 -7
  8. package/dist/app-header/root/app-header-root.d.ts +20 -23
  9. package/dist/app-header/root/app-header-root.js +4 -4
  10. package/dist/aura/root/aura-axis.d.ts +5 -7
  11. package/dist/aura/root/aura-axis.js +5 -7
  12. package/dist/aura/root/aura-root.css.js +1 -1
  13. package/dist/aura/root/aura-root.d.ts +75 -87
  14. package/dist/aura/root/aura-root.js +100 -109
  15. package/dist/aura/root/aura-shader.d.ts +10 -13
  16. package/dist/aura/root/aura-shader.js +165 -238
  17. package/dist/avatar/group/avatar-group.css.js +1 -1
  18. package/dist/avatar/root/avatar-root.css.js +1 -1
  19. package/dist/badge/root/badge-root.css.js +1 -13
  20. package/dist/badge/root/badge-root.d.ts +4 -5
  21. package/dist/bar-chart/root/bar-chart-root.css.js +1 -13
  22. package/dist/bar-chart/root/bar-chart-root.d.ts +51 -60
  23. package/dist/bar-chart/root/bar-chart-root.js +10 -17
  24. package/dist/blockquote/root/blockquote-root.css.js +1 -1
  25. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +1 -7
  26. package/dist/breadcrumbs/root/breadcrumbs-root.css.js +1 -1
  27. package/dist/button/root/button-root.css.js +1 -7
  28. package/dist/button/root/button-root.d.ts +16 -25
  29. package/dist/button/root/button-root.js +3 -3
  30. package/dist/button-group/root/button-group-root.css.js +1 -1
  31. package/dist/button-group/root/button-group-root.d.ts +5 -7
  32. package/dist/callout/root/callout-root.css.js +1 -1
  33. package/dist/callout/root/callout-root.d.ts +4 -4
  34. package/dist/callout/root/callout-root.js +4 -4
  35. package/dist/card/root/card-root.css.js +2 -2
  36. package/dist/card/root/card-root.d.ts +38 -48
  37. package/dist/card/root/card-root.js +8 -11
  38. package/dist/carousel/root/carousel-root.css.js +1 -11
  39. package/dist/carousel/root/carousel-root.d.ts +39 -43
  40. package/dist/carousel/root/carousel-root.js +7 -7
  41. package/dist/chat/composer/chat-composer.css.js +1 -1
  42. package/dist/chat/message/chat-message.css.js +1 -7
  43. package/dist/chat/message/chat-message.d.ts +8 -13
  44. package/dist/chat/root/chat-root.css.js +1 -1
  45. package/dist/checkbox/root/checkbox-root.css.js +1 -14
  46. package/dist/checkbox-group/root/checkbox-group-root.css.js +1 -1
  47. package/dist/code/root/code-root.css.js +9 -7
  48. package/dist/code/root/code-root.d.ts +4 -0
  49. package/dist/code/root/code-root.js +4 -0
  50. package/dist/code-block/root/code-block-root.css.js +1 -1
  51. package/dist/color-input/root/color-input-root.css.js +2 -2
  52. package/dist/color-input/root/color-input-root.js +3 -3
  53. package/dist/color-picker/root/color-picker-root.css.js +1 -9
  54. package/dist/color-picker/root/color-picker-root.js +3 -3
  55. package/dist/combobox/root/combobox-root.css.js +1 -8
  56. package/dist/combobox/root/combobox-root.js +1 -1
  57. package/dist/command/root/command-root.css.js +1 -1
  58. package/dist/copy-button/root/copy-button-root.css.js +1 -1
  59. package/dist/data-table/root/data-table-root.css.js +9 -3
  60. package/dist/data-table/root/data-table-root.d.ts +4 -1
  61. package/dist/data-table/root/data-table-root.js +4 -1
  62. package/dist/date-input/root/date-input-root.css.js +1 -1
  63. package/dist/date-picker/root/date-picker-root.css.js +1 -7
  64. package/dist/date-picker/root/date-picker-root.d.ts +1 -1
  65. package/dist/date-picker/root/date-picker-root.js +1 -1
  66. package/dist/dialog/root/dialog-root.css.js +1 -1
  67. package/dist/dialog/root/dialog-root.d.ts +15 -20
  68. package/dist/dialog/root/dialog-root.js +2 -2
  69. package/dist/divider/root/divider-root.css.js +1 -1
  70. package/dist/donut-chart/root/donut-chart-root.css.js +2 -20
  71. package/dist/donut-chart/root/donut-chart-root.d.ts +14 -19
  72. package/dist/donut-chart/root/donut-chart-root.js +6 -7
  73. package/dist/drawer/root/drawer-root.css.js +1 -11
  74. package/dist/drawer/root/drawer-root.d.ts +3 -7
  75. package/dist/drilldown/item/drilldown-item.css.js +1 -1
  76. package/dist/drilldown/root/drilldown-root.css.js +1 -1
  77. package/dist/element-events.generated.js +1 -1
  78. package/dist/empty/root/empty-root.css.js +1 -1
  79. package/dist/file-input/root/file-input-root.css.js +1 -1
  80. package/dist/file-input/root/file-input-root.js +1 -2
  81. package/dist/flex/root/flex-root.css.js +1 -1
  82. package/dist/flex/root/flex-root.d.ts +6 -6
  83. package/dist/flex/root/flex-root.js +9 -9
  84. package/dist/format-date/root/format-date-root.css.js +1 -1
  85. package/dist/grid/root/grid-root.css.js +1 -1
  86. package/dist/grid/root/grid-root.d.ts +8 -8
  87. package/dist/grid/root/grid-root.js +8 -9
  88. package/dist/heatmap/root/heatmap-root.css.js +2 -2
  89. package/dist/heatmap/root/heatmap-root.d.ts +11 -12
  90. package/dist/heatmap/root/heatmap-root.js +11 -12
  91. package/dist/icon/glyph.css.js +1 -1
  92. package/dist/icon/root/icon-root.css.js +1 -1
  93. package/dist/icon-button/root/icon-button-root.css.js +1 -7
  94. package/dist/icon-button/root/icon-button-root.d.ts +10 -10
  95. package/dist/icon-button/root/icon-button-root.js +4 -4
  96. package/dist/image/root/image-root.css.js +1 -7
  97. package/dist/input/root/input-root.css.js +1 -9
  98. package/dist/kbd/root/kbd-root.css.js +1 -1
  99. package/dist/legend/root/legend-root.css.js +1 -1
  100. package/dist/legend/root/legend-root.d.ts +34 -37
  101. package/dist/legend/root/legend-root.js +10 -10
  102. package/dist/line-chart/root/line-chart-root.css.js +1 -8
  103. package/dist/line-chart/root/line-chart-root.d.ts +6 -9
  104. package/dist/list/item/list-item.css.js +1 -1
  105. package/dist/list/root/list-root.css.js +1 -1
  106. package/dist/list/root/list-root.d.ts +4 -7
  107. package/dist/listbox/root/listbox-root.css.js +3 -3
  108. package/dist/listbox/root/listbox-root.d.ts +2 -0
  109. package/dist/listbox/root/listbox-root.js +2 -0
  110. package/dist/loader/root/loader-root.css.js +1 -1
  111. package/dist/loader/root/loader-root.d.ts +5 -9
  112. package/dist/loader/root/loader-root.js +2 -2
  113. package/dist/megamenu/root/megamenu-root.css.js +3 -2
  114. package/dist/menu/item/menu-item.css.js +1 -7
  115. package/dist/menu/root/menu-root.css.js +1 -1
  116. package/dist/meter/root/meter-root.css.js +1 -14
  117. package/dist/meter/root/meter-root.d.ts +18 -18
  118. package/dist/meter/root/meter-root.js +6 -8
  119. package/dist/mixins/mixin-control-surface/mixin-control-surface.d.ts +1 -1
  120. package/dist/navigation/root/navigation-root.css.js +1 -7
  121. package/dist/notifications/notification/notification.css.js +1 -7
  122. package/dist/notifications/root/notifications-root.css.js +1 -1
  123. package/dist/number-input/root/number-input-root.css.js +1 -9
  124. package/dist/option/group/option-group.css.js +1 -1
  125. package/dist/option/root/option-root.css.js +1 -1
  126. package/dist/outline/root/outline-root.css.js +1 -14
  127. package/dist/outline/root/outline-root.d.ts +1 -1
  128. package/dist/outline/root/outline-root.js +1 -1
  129. package/dist/pagination/root/pagination-root.css.js +1 -12
  130. package/dist/pagination/size/pagination-size.css.js +1 -1
  131. package/dist/pagination/summary/pagination-summary.css.js +1 -1
  132. package/dist/pin-input/root/pin-input-root.css.js +1 -7
  133. package/dist/popover/root/popover-root.css.js +4 -2
  134. package/dist/progress/root/progress-root.css.js +1 -7
  135. package/dist/progress/root/progress-root.d.ts +10 -9
  136. package/dist/qr-code/root/qr-code-root.css.js +1 -1
  137. package/dist/qr-code/root/qr-code-root.d.ts +1 -1
  138. package/dist/qr-code/root/qr-code-root.js +1 -1
  139. package/dist/quote/root/quote-root.css.js +1 -1
  140. package/dist/radio/group/radio-group.css.js +1 -1
  141. package/dist/radio/root/radio-root.css.js +1 -14
  142. package/dist/radio/root/radio-root.d.ts +20 -18
  143. package/dist/radio/root/radio-root.js +5 -6
  144. package/dist/rating/root/rating-root.css.js +1 -1
  145. package/dist/rating/root/rating-root.d.ts +4 -5
  146. package/dist/sandbox/preview/sandbox-preview.css.js +1 -1
  147. package/dist/sandbox/preview/sandbox-preview.d.ts +48 -44
  148. package/dist/sandbox/preview/sandbox-preview.js +63 -50
  149. package/dist/sandbox/root/sandbox-root.css.js +1 -2
  150. package/dist/sandbox/root/sandbox-root.d.ts +50 -59
  151. package/dist/sandbox/root/sandbox-root.js +75 -91
  152. package/dist/sandbox/source/sandbox-source.css.js +1 -1
  153. package/dist/sandbox/source/sandbox-source.d.ts +21 -29
  154. package/dist/sandbox/source/sandbox-source.js +26 -34
  155. package/dist/sandbox/status-bar/sandbox-status-bar.css.js +1 -1
  156. package/dist/sandbox/terminal/sandbox-terminal.css.js +1 -1
  157. package/dist/sandbox/toolbar/sandbox-toolbar.css.js +1 -1
  158. package/dist/scroll-area/root/scroll-area-root.css.js +5 -5
  159. package/dist/select/root/select-root.css.js +2 -15
  160. package/dist/select/root/select-root.d.ts +4 -4
  161. package/dist/select/root/select-root.js +5 -7
  162. package/dist/shared/chart/series.css.js +1 -1
  163. package/dist/shared/chart/terminus.css.js +1 -1
  164. package/dist/shared/field/field-inline.css.js +1 -1
  165. package/dist/shared/field/field-stacked.css.js +1 -1
  166. package/dist/shared/field/field.css.js +1 -1
  167. package/dist/skeleton/root/skeleton-root.css.js +1 -1
  168. package/dist/slider/root/slider-root.css.js +1 -3
  169. package/dist/sparkline/root/sparkline-root.css.js +1 -1
  170. package/dist/sparkline/root/sparkline-root.d.ts +22 -24
  171. package/dist/sparkline/root/sparkline-root.js +6 -6
  172. package/dist/speed-dial/item/speed-dial-item.css.js +1 -7
  173. package/dist/speed-dial/root/speed-dial-root.css.js +1 -1
  174. package/dist/splitter/root/splitter-root.css.js +1 -14
  175. package/dist/stat/group/stat-group.css.js +1 -1
  176. package/dist/stat/root/stat-root.css.js +1 -1
  177. package/dist/steps/root/steps-root.css.js +1 -1
  178. package/dist/steps/step/step.css.js +1 -8
  179. package/dist/steps/step/step.js +1 -1
  180. package/dist/switch/root/switch-root.css.js +1 -8
  181. package/dist/table/cell/table-cell.css.js +1 -1
  182. package/dist/table/column/table-column.css.js +1 -1
  183. package/dist/table/root/table-root.css.js +1 -1
  184. package/dist/table/row/table-row.css.js +1 -1
  185. package/dist/tabs/panel/tab-panel.css.js +1 -1
  186. package/dist/tabs/root/tabs-root.css.js +1 -7
  187. package/dist/tabs/tab/tab.css.js +2 -8
  188. package/dist/tag/root/tag-root.css.js +1 -1
  189. package/dist/tag/root/tag-root.d.ts +10 -19
  190. package/dist/tag/root/tag-root.js +3 -3
  191. package/dist/text/root/text-root.css.js +1 -1
  192. package/dist/text/root/text-root.d.ts +13 -14
  193. package/dist/text/root/text-root.js +6 -6
  194. package/dist/textarea/root/textarea-root.css.js +1 -7
  195. package/dist/time-input/root/time-input-root.css.js +1 -1
  196. package/dist/time-input/root/time-input-root.js +1 -1
  197. package/dist/time-picker/root/time-picker-root.css.js +1 -7
  198. package/dist/time-picker/root/time-picker-root.js +1 -1
  199. package/dist/timeline/item/timeline-item.css.js +1 -1
  200. package/dist/timeline/root/timeline-root.css.js +1 -1
  201. package/dist/toast/item/toast-item.css.js +1 -1
  202. package/dist/toast/root/toast-root.css.js +1 -1
  203. package/dist/toggle/group/toggle-group.css.js +1 -7
  204. package/dist/toggle/group/toggle-group.d.ts +6 -9
  205. package/dist/toggle/root/toggle-root.css.js +1 -1
  206. package/dist/toolbar/root/toolbar-root.css.js +1 -1
  207. package/dist/tooltip/root/tooltip-root.css.js +1 -1
  208. package/dist/tooltip/root/tooltip-root.d.ts +6 -7
  209. package/dist/tour/root/tour-root.css.js +1 -7
  210. package/dist/tour/stop/tour-stop.css.js +2 -2
  211. package/dist/tree/item/tree-item.css.js +1 -17
  212. package/dist/tree/root/tree-root.css.js +1 -1
  213. package/dist/tree/root/tree-root.d.ts +0 -2
  214. package/dist/trend/root/trend-root.css.js +1 -1
  215. package/dist/trend/root/trend-root.d.ts +4 -7
  216. package/dist/trend/root/trend-root.js +4 -7
  217. package/dist/video/root/video-root.css.js +1 -12
  218. package/dist/video/root/video-root.d.ts +3 -8
  219. package/dist/video-playlist/item/video-playlist-item.css.js +1 -7
  220. package/dist/video-playlist/menu/video-playlist-menu.css.js +1 -1
  221. package/dist/video-playlist/root/video-playlist-root.css.js +1 -1
  222. package/dist/virtual-list/root/virtual-list-root.css.js +1 -1
  223. package/elements.css +4 -5
  224. package/helix.css +31 -0
  225. package/jsx.d.ts +11625 -14561
  226. package/package.json +10 -8
  227. package/vue.d.ts +3594 -4231
@@ -1,7 +1,7 @@
1
1
  import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
2
2
  import type { CSSResultGroup } from 'lit';
3
3
  /**
4
- * @summary A strip of cells coloured by how each one went: uptime, contributions, activity.
4
+ * @summary A strip of cells colored by how each one went: uptime, contributions, activity.
5
5
  *
6
6
  * @description
7
7
  * One grid, filled down the column and then across, which is what a calendar
@@ -63,18 +63,17 @@ export declare class HelixHeatmap extends HelixHeadlessHeatmap {
63
63
  /**
64
64
  * The first guess at what this sheet draws, before it has been measured.
65
65
  *
66
- * **Not a contract any more, and it was a bad one.** `fits()` works against a
67
- * measured width and a cell size it has to be told, and being told by hand
68
- * meant these sat at the base tier's 8 and 2 against a sheet drawing 12 and 4:
69
- * the arithmetic believed a cell cost 10 pixels where it cost 16, so a ninety
70
- * day strip drew 940 pixels of cells into a 592 pixel box at 640 and 540 into
71
- * 342 at 390, overflowing the document both times while `visible` reported 59
72
- * and 34. The number a summary is told to trust was the number that was wrong.
66
+ * **Not a contract.** `fits()` reads the strip back rather than being told a
67
+ * cell size by hand, so nothing has to be kept in step and
68
+ * `--heatmap-cell-inline-size` on its own is enough. Told by hand, these sat
69
+ * at the base tier's 8 and 2 against a sheet drawing 12 and 4, and the
70
+ * arithmetic believed a cell cost 10 pixels where it cost 16: a ninety day
71
+ * strip drew 940 pixels of cells into a 592 pixel box while `visible`
72
+ * reported 59.
73
73
  *
74
- * The strip is read back now, so nothing has to be kept in step and
75
- * `--heatmap-cell-inline-size` on its own is enough. These two remain because a
76
- * measurement arrives one frame after the first paint, and a first paint from
77
- * numbers that match the sheet is one that does not move.
74
+ * These two remain because a measurement arrives one frame after the first
75
+ * paint, and a first paint from numbers that match the sheet is one that does
76
+ * not move.
78
77
  */
79
78
  gap: number;
80
79
  /** The drawn cell width, for the reason `gap` is the drawn gap. `0.75rem` at the root font size. */
@@ -8,7 +8,7 @@ import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
9
9
  import { styles } from './heatmap-root.css.js';
10
10
  /**
11
- * @summary A strip of cells coloured by how each one went: uptime, contributions, activity.
11
+ * @summary A strip of cells colored by how each one went: uptime, contributions, activity.
12
12
  *
13
13
  * @description
14
14
  * One grid, filled down the column and then across, which is what a calendar
@@ -70,18 +70,17 @@ let HelixHeatmap = class HelixHeatmap extends HelixHeadlessHeatmap {
70
70
  /**
71
71
  * The first guess at what this sheet draws, before it has been measured.
72
72
  *
73
- * **Not a contract any more, and it was a bad one.** `fits()` works against a
74
- * measured width and a cell size it has to be told, and being told by hand
75
- * meant these sat at the base tier's 8 and 2 against a sheet drawing 12 and 4:
76
- * the arithmetic believed a cell cost 10 pixels where it cost 16, so a ninety
77
- * day strip drew 940 pixels of cells into a 592 pixel box at 640 and 540 into
78
- * 342 at 390, overflowing the document both times while `visible` reported 59
79
- * and 34. The number a summary is told to trust was the number that was wrong.
73
+ * **Not a contract.** `fits()` reads the strip back rather than being told a
74
+ * cell size by hand, so nothing has to be kept in step and
75
+ * `--heatmap-cell-inline-size` on its own is enough. Told by hand, these sat
76
+ * at the base tier's 8 and 2 against a sheet drawing 12 and 4, and the
77
+ * arithmetic believed a cell cost 10 pixels where it cost 16: a ninety day
78
+ * strip drew 940 pixels of cells into a 592 pixel box while `visible`
79
+ * reported 59.
80
80
  *
81
- * The strip is read back now, so nothing has to be kept in step and
82
- * `--heatmap-cell-inline-size` on its own is enough. These two remain because a
83
- * measurement arrives one frame after the first paint, and a first paint from
84
- * numbers that match the sheet is one that does not move.
81
+ * These two remain because a measurement arrives one frame after the first
82
+ * paint, and a first paint from numbers that match the sheet is one that does
83
+ * not move.
85
84
  */
86
85
  this.gap = 4;
87
86
  /** The drawn cell width, for the reason `gap` is the drawn gap. `0.75rem` at the root font size. */
@@ -1,4 +1,4 @@
1
- // Generated from src/icon/glyph.css by `bun run styles`. Do not edit.
1
+ // Generated from src/icon/glyph.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`[data-glyph] {
4
4
  block-size: var(--icon-size, var(--helix-size-icon));
@@ -1,4 +1,4 @@
1
- // Generated from src/icon/root/icon-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/icon/root/icon-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  block-size: var(--icon-size, var(--helix-size-icon));
@@ -1,4 +1,4 @@
1
- // Generated from src/icon-button/root/icon-button-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/icon-button/root/icon-button-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: inline-flex;
@@ -152,12 +152,6 @@ cursor: not-allowed;
152
152
  opacity: 0.5;
153
153
  }
154
154
 
155
- @media (prefers-reduced-motion: reduce) {
156
- [part="button"] {
157
- transition: none;
158
- }
159
- }
160
-
161
155
  @media print {
162
156
  :host {
163
157
  display: none;
@@ -6,7 +6,7 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../mixin
6
6
  *
7
7
  * @description
8
8
  * Top-level rather than `Button.Icon`, because a namespace means composition:
9
- * `Card.Header` is part of a card, and an icon-only button is not part of a
9
+ * `Tabs.Tab` is part of a tab set, and an icon-only button is not part of a
10
10
  * button. It is a button with different content and a different shape, which
11
11
  * makes it its own component.
12
12
  *
@@ -29,6 +29,15 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../mixin
29
29
  * @cssproperty --icon-button-size - Edge length of the control.
30
30
  */
31
31
  export declare class HelixIconButton extends HelixIconButton_base {
32
+ /**
33
+ * Whether it is raised off the page it sits on.
34
+ *
35
+ * Separate from `shape`, because they are separate facts: a docked control is
36
+ * raised whatever its outline, and a circle inside a toolbar is not raised at
37
+ * all. Shadow rather than a border, since what is under a floating control is
38
+ * the page and a line drawn on the page is not the same as being above it.
39
+ */
40
+ raised: boolean;
32
41
  /**
33
42
  * The outline it is cut to, which is an axis of its own and not a value on one.
34
43
  *
@@ -46,15 +55,6 @@ export declare class HelixIconButton extends HelixIconButton_base {
46
55
  * `data-dock` in the base layer.
47
56
  */
48
57
  shape?: 'circle';
49
- /**
50
- * Whether it is raised off the page it sits on.
51
- *
52
- * Separate from `shape`, because they are separate facts: a docked control is
53
- * raised whatever its outline, and a circle inside a toolbar is not raised at
54
- * all. Shadow rather than a border, since what is under a floating control is
55
- * the page and a line drawn on the page is not the same as being above it.
56
- */
57
- raised: boolean;
58
58
  static styles: CSSResultGroup;
59
59
  }
60
60
  declare global {
@@ -14,7 +14,7 @@ import { styles } from './icon-button-root.css.js';
14
14
  *
15
15
  * @description
16
16
  * Top-level rather than `Button.Icon`, because a namespace means composition:
17
- * `Card.Header` is part of a card, and an icon-only button is not part of a
17
+ * `Tabs.Tab` is part of a tab set, and an icon-only button is not part of a
18
18
  * button. It is a button with different content and a different shape, which
19
19
  * makes it its own component.
20
20
  *
@@ -51,12 +51,12 @@ let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHea
51
51
  }
52
52
  static { this.styles = styles; }
53
53
  };
54
- __decorate([
55
- property({ reflect: true })
56
- ], HelixIconButton.prototype, "shape", void 0);
57
54
  __decorate([
58
55
  property({ reflect: true, type: Boolean })
59
56
  ], HelixIconButton.prototype, "raised", void 0);
57
+ __decorate([
58
+ property({ reflect: true })
59
+ ], HelixIconButton.prototype, "shape", void 0);
60
60
  HelixIconButton = __decorate([
61
61
  customElement('helix-icon-button')
62
62
  ], HelixIconButton);
@@ -1,4 +1,4 @@
1
- // Generated from src/image/root/image-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/image/root/image-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  aspect-ratio: var(--image-aspect, auto);
@@ -60,12 +60,6 @@ transition: opacity var(--helix-duration-normal) var(--helix-easing-standard);
60
60
  opacity: 1;
61
61
  }
62
62
 
63
- @media (prefers-reduced-motion: reduce) {
64
- [part="image"] {
65
- transition: none;
66
- }
67
- }
68
-
69
63
  @media print {
70
64
  :host {
71
65
  box-shadow: none;
@@ -1,4 +1,4 @@
1
- // Generated from src/input/root/input-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/input/root/input-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: flex;
@@ -107,14 +107,6 @@ outline-offset: var(--helix-size-focus-offset);
107
107
  color: var(--helix-color-foreground);
108
108
  }
109
109
 
110
- @media (prefers-reduced-motion: reduce) {
111
- [part="field"],
112
- [part="clear"],
113
- [part="reveal"] {
114
- transition: none;
115
- }
116
- }
117
-
118
110
  @media print {
119
111
  :host {
120
112
  box-shadow: none;
@@ -1,4 +1,4 @@
1
- // Generated from src/kbd/root/kbd-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/kbd/root/kbd-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- // Generated from src/legend/root/legend-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/legend/root/legend-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: block;
@@ -8,10 +8,10 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
8
8
  * and there is no arrangement of eight names that fits every width. Set
9
9
  * `--legend-direction` to `column` where it sits beside one instead.
10
10
  *
11
- * The eight series colours are mapped here rather than in the tier below, which
12
- * carries the index and holds no tokens. Written as eight rules for the reason
13
- * `Avatar.Group` writes twelve: an index in markup cannot select a token, and a
14
- * custom property set inline would be the headless tier naming a color.
11
+ * The eight series colors are mapped here rather than in the tier below, which
12
+ * carries the index and holds no tokens. Eight rules, because an index in
13
+ * markup cannot select a token and a custom property set inline would be the
14
+ * headless tier naming a color.
15
15
  *
16
16
  * @since 0.1.0
17
17
  * @status experimental
@@ -28,25 +28,6 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
28
28
  */
29
29
  export declare class HelixLegend extends HelixHeadlessLegend {
30
30
  static styles: CSSResultGroup;
31
- /**
32
- * Where the legend sits and which way its entries run.
33
- *
34
- * Absent is a wrapping row, which is what sits under a chart. `start` and
35
- * `end` stack the entries in a column, for a legend beside one.
36
- *
37
- * **This says which way the entries run and not where the element is**, which
38
- * is the honest limit of a component that is a sibling of the chart rather
39
- * than part of it. A legend cannot place itself relative to something it is
40
- * not inside, so the consumer still puts it above, below or beside; this
41
- * makes it lay out correctly once it is there, which was the part that
42
- * previously took a custom property nobody would guess at.
43
- *
44
- * The alternative was a `legend` slot on every chart, so a chart could place
45
- * its own. That is worse: it makes the legend's position a fact about the
46
- * chart, so two charts sharing one legend becomes impossible, and it puts a
47
- * list inside a drawing that is `aria-hidden`.
48
- */
49
- placement?: 'end' | 'start';
50
31
  /**
51
32
  * How much ink the swatches claim.
52
33
  *
@@ -58,16 +39,20 @@ export declare class HelixLegend extends HelixHeadlessLegend {
58
39
  * toward the page, `subtle` is that edge over a wash, and absent is the filled
59
40
  * patch, per the rule that a reflected property takes no default.
60
41
  *
61
- * **The legend declares it rather than reading it off the chart, and that is a
62
- * decision rather than a shortcut.** A legend has no reference to a chart: it
63
- * points at a *table* through `for`, which is what lets two charts share one,
64
- * and the chart points at the same table independently. Giving it a chart to
65
- * read would make a list of names depend on a drawing it is deliberately not
66
- * part of, and would still not answer the per-series case, where `outlined` is
67
- * a set of names rather than one value. Two attributes carrying the same word
68
- * is the honest cost of the legend being a sibling.
42
+ * **The legend declares it rather than reading it off the chart.** A legend
43
+ * has no reference to a chart: it points at a *table* through `for`, which is
44
+ * what lets two charts share one, and the chart points at the same table
45
+ * independently. Giving it a chart to read would make a list of names depend
46
+ * on a drawing it is deliberately not part of, and would still not answer the
47
+ * per-series case, where `outlined` is a set of names rather than one value.
69
48
  */
70
49
  emphasis?: 'outlined' | 'solid' | 'subtle';
50
+ /**
51
+ * Which entries are glass rather than solid, by name.
52
+ *
53
+ * Matched as `outlined` is.
54
+ */
55
+ glass?: string;
71
56
  /**
72
57
  * What the swatches are made of.
73
58
  *
@@ -86,7 +71,7 @@ export declare class HelixLegend extends HelixHeadlessLegend {
86
71
  *
87
72
  * **`transparent` is where this one stops.** A mark with no ink is not a
88
73
  * material choice, it is an absent series, and a chart says that by not
89
- * having the datum rather than by painting it invisibly. See 270.
74
+ * having the datum rather than by painting it invisibly.
90
75
  */
91
76
  material?: 'frosted' | 'glass';
92
77
  /**
@@ -99,17 +84,29 @@ export declare class HelixLegend extends HelixHeadlessLegend {
99
84
  */
100
85
  outlined?: string;
101
86
  /**
102
- * Which entries are drawn as a wash of their color, by name.
87
+ * Where the legend sits and which way its entries run.
103
88
  *
104
- * Matched as `outlined` is.
89
+ * Absent is a wrapping row, which is what sits under a chart. `start` and
90
+ * `end` stack the entries in a column, for a legend beside one.
91
+ *
92
+ * **This says which way the entries run and not where the element is**, which
93
+ * is the honest limit of a component that is a sibling of the chart rather
94
+ * than part of it. A legend cannot place itself relative to something it is
95
+ * not inside, so the consumer still puts it above, below or beside and this
96
+ * makes it lay out correctly once it is there.
97
+ *
98
+ * A `legend` slot on every chart is the obvious alternative and is worse: it
99
+ * makes the legend's position a fact about the chart, so two charts sharing
100
+ * one legend becomes impossible, and it puts a list inside a drawing that is
101
+ * `aria-hidden`.
105
102
  */
106
- subtle?: string;
103
+ placement?: 'end' | 'start';
107
104
  /**
108
- * Which entries are glass rather than solid, by name.
105
+ * Which entries are drawn as a wash of their color, by name.
109
106
  *
110
107
  * Matched as `outlined` is.
111
108
  */
112
- glass?: string;
109
+ subtle?: string;
113
110
  /**
114
111
  * Marks each entry with the treatment its name was given.
115
112
  *
@@ -17,10 +17,10 @@ import { styles } from './legend-root.css.js';
17
17
  * and there is no arrangement of eight names that fits every width. Set
18
18
  * `--legend-direction` to `column` where it sits beside one instead.
19
19
  *
20
- * The eight series colours are mapped here rather than in the tier below, which
21
- * carries the index and holds no tokens. Written as eight rules for the reason
22
- * `Avatar.Group` writes twelve: an index in markup cannot select a token, and a
23
- * custom property set inline would be the headless tier naming a color.
20
+ * The eight series colors are mapped here rather than in the tier below, which
21
+ * carries the index and holds no tokens. Eight rules, because an index in
22
+ * markup cannot select a token and a custom property set inline would be the
23
+ * headless tier naming a color.
24
24
  *
25
25
  * @since 0.1.0
26
26
  * @status experimental
@@ -75,12 +75,12 @@ let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
75
75
  }
76
76
  }
77
77
  };
78
- __decorate([
79
- property({ reflect: true })
80
- ], HelixLegend.prototype, "placement", void 0);
81
78
  __decorate([
82
79
  property({ reflect: true })
83
80
  ], HelixLegend.prototype, "emphasis", void 0);
81
+ __decorate([
82
+ property()
83
+ ], HelixLegend.prototype, "glass", void 0);
84
84
  __decorate([
85
85
  property({ reflect: true })
86
86
  ], HelixLegend.prototype, "material", void 0);
@@ -88,11 +88,11 @@ __decorate([
88
88
  property()
89
89
  ], HelixLegend.prototype, "outlined", void 0);
90
90
  __decorate([
91
- property()
92
- ], HelixLegend.prototype, "subtle", void 0);
91
+ property({ reflect: true })
92
+ ], HelixLegend.prototype, "placement", void 0);
93
93
  __decorate([
94
94
  property()
95
- ], HelixLegend.prototype, "glass", void 0);
95
+ ], HelixLegend.prototype, "subtle", void 0);
96
96
  HelixLegend = __decorate([
97
97
  customElement('helix-legend')
98
98
  ], HelixLegend);
@@ -1,4 +1,4 @@
1
- // Generated from src/line-chart/root/line-chart-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/line-chart/root/line-chart-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: grid;
@@ -240,13 +240,6 @@ opacity: 0;
240
240
  }
241
241
  }
242
242
 
243
- @media (prefers-reduced-motion: reduce) {
244
- [part="line"],
245
- [part="area"] {
246
- transition: none;
247
- }
248
- }
249
-
250
243
  [part="plot"] {
251
244
  cursor: crosshair;
252
245
  }
@@ -62,14 +62,11 @@ export declare class HelixLineChart extends HelixHeadlessLineChart {
62
62
  * carries the reading, which is the trade `BarChart` makes on a column. `solid`
63
63
  * takes the wash to full strength and the fill carries it instead.
64
64
  *
65
- * **This refused `outlined` until 25 Aug 2026, and `area` was the reason
66
- * given**: on a column `outlined` is the edge without the loud fill, the line
67
- * chart's version of that is the line without its wash, and `area` already says
68
- * exactly that. `area` is unchanged and still says it. What the argument
69
- * conflated is existence with weight: `area` decides whether a wash is drawn,
70
- * which is structural and belongs to the tier below, and emphasis decides which
71
- * of the two marks is carrying the reading. Both ends need a wash present and
72
- * neither can summon one.
65
+ * **`outlined` is not `area` said twice**, which is the confusion to hold off:
66
+ * `area` decides whether a wash is drawn at all, which is structural and
67
+ * belongs to the tier below, and emphasis decides which of the two marks is
68
+ * carrying the reading. Both ends of emphasis need a wash present and neither
69
+ * can summon one.
73
70
  *
74
71
  * `ghost` would be a chart with no lines.
75
72
  */
@@ -94,7 +91,7 @@ export declare class HelixLineChart extends HelixHeadlessLineChart {
94
91
  *
95
92
  * **`transparent` is where this one stops.** A mark with no ink is not a
96
93
  * material choice, it is an absent series, and a chart says that by not
97
- * having the datum rather than by painting it invisibly. See 270.
94
+ * having the datum rather than by painting it invisibly.
98
95
  */
99
96
  material?: 'frosted' | 'glass';
100
97
  static styles: CSSResultGroup;
@@ -1,4 +1,4 @@
1
- // Generated from src/list/item/list-item.css by `bun run styles`. Do not edit.
1
+ // Generated from src/list/item/list-item.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: block;
@@ -1,4 +1,4 @@
1
- // Generated from src/list/root/list-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/list/root/list-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: flex;
@@ -28,18 +28,15 @@ export declare class HelixList extends HelixHeadlessList {
28
28
  /**
29
29
  * Where the marker sits.
30
30
  *
31
- * On the styled tier because it is decoration, which is the other half of the
32
- * argument `kind` makes on the headless one: *that* a list is numbered is a
33
- * fact about the content, and *where the numbers are drawn* is not. A railed
34
- * ordered list and a plain one say the same thing about their rows.
31
+ * On the styled tier because it is decoration: *that* a list is numbered is a
32
+ * fact about the content, which `kind` carries on the headless tier, and
33
+ * *where the numbers are drawn* is not.
35
34
  *
36
35
  * - unset draws the platform's marker beside the row, which is what a list of
37
36
  * short rows wants.
38
37
  * - `rail` draws the ordinal in a track of its own at the start edge of the
39
38
  * block, so the numbers read as a column and every row's text begins at one
40
- * measure. This is how a numbered argument is set: a claim per item, prose
41
- * under it, and the numbering carried down the left rather than tucked
42
- * against the words.
39
+ * measure, which is how a numbered argument is set.
43
40
  *
44
41
  * A rail replaces the marker rather than joining it, so it applies to
45
42
  * `unordered` too, where it numbers what a bullet did not.
@@ -1,4 +1,4 @@
1
- // Generated from src/listbox/root/listbox-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/listbox/root/listbox-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: flex;
@@ -10,8 +10,8 @@ gap: var(--helix-space-2xs);
10
10
 
11
11
  --option-radius: var(--helix-radii-none);
12
12
 
13
- background-color: var(--helix-color-surface);
14
- border: var(--helix-border-thin) solid var(--helix-color-border);
13
+ background-color: var(--listbox-background-color, var(--helix-color-surface));
14
+ border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));
15
15
  border-radius: var(--helix-radii-sm);
16
16
  display: flex;
17
17
  flex-direction: column;
@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
18
18
  * @aliases Options, Select list
19
19
  * @documentation https://helix.fusion.dev/components/listbox
20
20
  *
21
+ * @cssproperty --listbox-background-color - The panel's fill. `transparent` where the list is already inside one.
22
+ * @cssproperty --listbox-border - The panel's border, as a shorthand. `none` where the list is already inside one.
21
23
  * @cssproperty --listbox-max-block-size - How tall it gets before it scrolls.
22
24
  */
23
25
  export declare class HelixListbox extends HelixHeadlessListbox {
@@ -27,6 +27,8 @@ import { styles } from './listbox-root.css.js';
27
27
  * @aliases Options, Select list
28
28
  * @documentation https://helix.fusion.dev/components/listbox
29
29
  *
30
+ * @cssproperty --listbox-background-color - The panel's fill. `transparent` where the list is already inside one.
31
+ * @cssproperty --listbox-border - The panel's border, as a shorthand. `none` where the list is already inside one.
30
32
  * @cssproperty --listbox-max-block-size - How tall it gets before it scrolls.
31
33
  */
32
34
  let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
@@ -1,4 +1,4 @@
1
- // Generated from src/loader/root/loader-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/loader/root/loader-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  color: inherit;
@@ -20,26 +20,22 @@ import type { CSSResultGroup } from 'lit';
20
20
  * @cssproperty --loader-track-color - Color of the circle behind it.
21
21
  */
22
22
  export declare class HelixLoader extends HelixHeadlessLoader {
23
+ /**
24
+ * Diameter relative to the surrounding text.
25
+ */
26
+ size?: 'sm' | 'md' | 'lg';
23
27
  /**
24
28
  * How the waiting is drawn.
25
29
  *
26
- * Unset is the turning arc, which is what most waits want and what this
27
- * component was called for years.
30
+ * Unset is the turning arc, which is what most waits want.
28
31
  *
29
32
  * `pulse` takes the arc away and lets the middle carry the motion on its own:
30
33
  * the ring stays as the quiet outline and swells, and whatever is slotted
31
34
  * swells with it, in step. It is the shape for a wait that has a mark to
32
35
  * show, a splash or a first paint behind a wordmark, where a rotating rim
33
36
  * around a logo reads as chrome bolted to the brand.
34
- *
35
- * That the component can now be drawn without anything spinning is why it is
36
- * no longer called Spinner: the old name described one appearance of two.
37
37
  */
38
38
  variant?: 'pulse';
39
- /**
40
- * Diameter relative to the surrounding text.
41
- */
42
- size?: 'sm' | 'md' | 'lg';
43
39
  static styles: CSSResultGroup;
44
40
  }
45
41
  declare global {
@@ -32,10 +32,10 @@ let HelixLoader = class HelixLoader extends HelixHeadlessLoader {
32
32
  };
33
33
  __decorate([
34
34
  property({ reflect: true })
35
- ], HelixLoader.prototype, "variant", void 0);
35
+ ], HelixLoader.prototype, "size", void 0);
36
36
  __decorate([
37
37
  property({ reflect: true })
38
- ], HelixLoader.prototype, "size", void 0);
38
+ ], HelixLoader.prototype, "variant", void 0);
39
39
  HelixLoader = __decorate([
40
40
  customElement('helix-loader')
41
41
  ], HelixLoader);
@@ -1,4 +1,4 @@
1
- // Generated from src/megamenu/root/megamenu-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/megamenu/root/megamenu-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: inline-flex;
@@ -45,7 +45,8 @@ background-color: var(--megamenu-background-color, var(--helix-color-background)
45
45
 
46
46
  border: var(--megamenu-border-width, var(--helix-border-thin)) solid
47
47
  light-dark(transparent, var(--helix-color-border));
48
- border-radius: var(--helix-radii-md);
48
+
49
+ border-radius: var(--helix-radii-sm);
49
50
  box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));
50
51
  box-sizing: border-box;
51
52
 
@@ -1,4 +1,4 @@
1
- // Generated from src/menu/item/menu-item.css by `bun run styles`. Do not edit.
1
+ // Generated from src/menu/item/menu-item.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4
  display: block;
@@ -76,12 +76,6 @@ slot[name="submenu"] {
76
76
  display: contents;
77
77
  }
78
78
 
79
- @media (prefers-reduced-motion: reduce) {
80
- [part="item"] {
81
- transition: none;
82
- }
83
- }
84
-
85
79
  :host(:dir(rtl)) [part="mark"][data-submenu] {
86
80
  scale: -1 1;
87
81
  }`);
@@ -1,4 +1,4 @@
1
- // Generated from src/menu/root/menu-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/menu/root/menu-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`:host {
4
4