@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
@@ -4,9 +4,11 @@ import type { CSSResultGroup } from 'lit';
4
4
  * @summary Groups related content and actions into a single surface.
5
5
  *
6
6
  * @description
7
- * Regions are slots: `media`, `header`, the default slot for content, and
8
- * `footer`. An omitted region takes no space, so a card with only content needs
9
- * no wrapper markup at all.
7
+ * Regions are bare slots with no wrapper element: `media`, `header`, the default
8
+ * slot for content, and `footer`. An omitted one occupies no space without the
9
+ * card having to detect that it is missing, so a card with only content needs no
10
+ * wrapper markup at all. Style slotted content directly rather than reaching for
11
+ * a part: a header is whatever element you slotted, not a wrapper around it.
10
12
  *
11
13
  * `media` runs edge to edge and clips to the card's corners, so an image needs
12
14
  * no inset correction. Set `orientation="horizontal"` to move it alongside the
@@ -14,11 +16,6 @@ import type { CSSResultGroup } from 'lit';
14
16
  * `media-placement="end"` to put it under the content instead of over it, which
15
17
  * is what a chart concluding a card wants.
16
18
  *
17
- * Regions are bare slots with no wrapper element, so an omitted one occupies no
18
- * space without the card having to detect that it is missing. Style slotted
19
- * content directly rather than reaching for a part: a header is whatever
20
- * element you slotted, not a wrapper around it.
21
- *
22
19
  * @since 0.1.0
23
20
  * @status stable
24
21
  * @category layout
@@ -49,16 +46,40 @@ import type { CSSResultGroup } from 'lit';
49
46
  * `data-card` link raises on hover.
50
47
  */
51
48
  export declare class HelixCard extends HelixHeadlessCard {
49
+ /**
50
+ * What the card is made of.
51
+ *
52
+ * **A third axis, and it passes the test the other two answer to.**
53
+ * `separation` is where the surface ends and `tone` is what it means; both of
54
+ * those can be true at once with this, an elevated glass card being a
55
+ * perfectly ordinary thing to want, so it is not a value of either.
56
+ *
57
+ * **An attribute rather than a hook, because glass is not one declaration.**
58
+ * It is a translucent ground *and* a backdrop filter, and either without the
59
+ * other does nothing: a blur behind an opaque background is invisible, and a
60
+ * translucent card over an unfiltered page is a smear. `--card-backdrop` on
61
+ * its own is that trap, a published hook a consumer could set and see nothing
62
+ * happen. The component owns the pair; a theme owns how strong it is.
63
+ *
64
+ * Absent is opaque, per the rule that a reflected property takes no default,
65
+ * so the stylesheet only describes the departure.
66
+ *
67
+ * **The whole axis, not one point of it.** `frosted` is the same pair turned
68
+ * up, the heavier ground under the heavier blur, for a card that has to stay
69
+ * readable over a busy page; `transparent` drops both, for one that is
70
+ * structure and spacing with the page showing through.
71
+ */
72
+ material?: 'frosted' | 'glass' | 'transparent';
73
+ /**
74
+ * Whether media sits above the content stack or beside it.
75
+ */
76
+ orientation?: 'vertical' | 'horizontal';
52
77
  /**
53
78
  * How the card separates itself from the page.
54
79
  *
55
80
  * **One value per mechanism, and the theme has the same four.**
56
81
  * `ThemeIntent.separation` is `border | fill | shadow | space`, so these are
57
- * the component's words for what a theme states as a policy, one to one. It
58
- * was `appearance`, which is the library's word for four different questions
59
- * and is being retired from all of them: `outlined` on a Card says where the
60
- * surface ends and `outlined` on a Button says how much ink, and one word
61
- * cannot keep saying both.
82
+ * the component's words for what a theme states as a policy, one to one.
62
83
  *
63
84
  * - `outlined` is the default, and a hairline is usually enough. It costs
64
85
  * less attention than a shadow: a screen of shadowed cards reads as a stack
@@ -74,43 +95,12 @@ export declare class HelixCard extends HelixHeadlessCard {
74
95
  * is the surface. For a card inside something already bounded, where a
75
96
  * second box adds a line and no meaning.
76
97
  *
77
- * **`filled` is new and it closes a hole the engine could already see.**
78
- * `plain` clears the ground *and* the edge, so a surface with its own color
79
- * and neither edge nor lift was unsayable while being one of the four things
80
- * a theme could ask for.
98
+ * `filled` closes a hole `plain` cannot: `plain` clears the ground *and* the
99
+ * edge, so a surface with its own color and neither edge nor lift would
100
+ * otherwise be unsayable while being one of the four things a theme can ask
101
+ * for.
81
102
  */
82
103
  separation?: 'elevated' | 'filled' | 'outlined' | 'plain';
83
- /**
84
- * What the card is made of.
85
- *
86
- * **A third axis, and it passes the test the other two answer to.**
87
- * `separation` is where the surface ends and `tone` is what it means; both of
88
- * those can be true at once with this, an elevated glass card being a
89
- * perfectly ordinary thing to want, so it is not a value of either.
90
- *
91
- * **An attribute rather than a hook, because glass is not one declaration.**
92
- * It is a translucent ground *and* a backdrop filter, and either without the
93
- * other does nothing: a blur behind an opaque background is invisible, and a
94
- * translucent card over an unfiltered page is a smear. `--card-backdrop`
95
- * shipped on its own for exactly one commit and was that trap, a published
96
- * hook a consumer could set and see nothing happen. The component owns the
97
- * pair; a theme owns how strong it is.
98
- *
99
- * Absent is opaque, per the rule that a reflected property takes no default,
100
- * so the stylesheet only describes the departure.
101
- *
102
- * **The whole axis, which it did not used to be.** `glass` shipped alone,
103
- * so a card offered one point of a three-point language and said nothing
104
- * about the other two. `frosted` is the same pair turned up, the heavier
105
- * ground under the heavier blur, for a card that has to stay readable over
106
- * a busy page; `transparent` drops both, for one that is structure and
107
- * spacing with the page showing through. See 270.
108
- */
109
- material?: 'frosted' | 'glass' | 'transparent';
110
- /**
111
- * Whether media sits above the content stack or beside it.
112
- */
113
- orientation?: 'vertical' | 'horizontal';
114
104
  static styles: CSSResultGroup;
115
105
  }
116
106
  declare global {
@@ -12,9 +12,11 @@ import { styles } from './card-root.css.js';
12
12
  * @summary Groups related content and actions into a single surface.
13
13
  *
14
14
  * @description
15
- * Regions are slots: `media`, `header`, the default slot for content, and
16
- * `footer`. An omitted region takes no space, so a card with only content needs
17
- * no wrapper markup at all.
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.
18
20
  *
19
21
  * `media` runs edge to edge and clips to the card's corners, so an image needs
20
22
  * no inset correction. Set `orientation="horizontal"` to move it alongside the
@@ -22,11 +24,6 @@ import { styles } from './card-root.css.js';
22
24
  * `media-placement="end"` to put it under the content instead of over it, which
23
25
  * is what a chart concluding a card wants.
24
26
  *
25
- * Regions are bare slots with no wrapper element, so an omitted one occupies no
26
- * space without the card having to detect that it is missing. Style slotted
27
- * content directly rather than reaching for a part: a header is whatever
28
- * element you slotted, not a wrapper around it.
29
- *
30
27
  * @since 0.1.0
31
28
  * @status stable
32
29
  * @category layout
@@ -59,15 +56,15 @@ import { styles } from './card-root.css.js';
59
56
  let HelixCard = class HelixCard extends HelixHeadlessCard {
60
57
  static { this.styles = styles; }
61
58
  };
62
- __decorate([
63
- property({ reflect: true })
64
- ], HelixCard.prototype, "separation", void 0);
65
59
  __decorate([
66
60
  property({ reflect: true })
67
61
  ], HelixCard.prototype, "material", void 0);
68
62
  __decorate([
69
63
  property({ reflect: true })
70
64
  ], HelixCard.prototype, "orientation", void 0);
65
+ __decorate([
66
+ property({ reflect: true })
67
+ ], HelixCard.prototype, "separation", void 0);
71
68
  HelixCard = __decorate([
72
69
  customElement('helix-card')
73
70
  ], HelixCard);
@@ -1,8 +1,6 @@
1
- // Generated from src/carousel/root/carousel-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/carousel/root/carousel-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
- display: block;
5
-
6
4
  --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
7
5
  --_carousel-gap: var(--carousel-gap, var(--helix-space-md));
8
6
  --_carousel-per-view: 1;
@@ -314,14 +312,6 @@ margin-inline-start: auto;
314
312
  order: 1;
315
313
  }
316
314
 
317
- @media (prefers-reduced-motion: reduce) {
318
- [part="indicator"],
319
- :host([indicator-placement="inline-start"]) [part="indicator"],
320
- :host([indicator-placement="inline-end"]) [part="indicator"] {
321
- transition: none;
322
- }
323
- }
324
-
325
315
  :host(:dir(rtl)) [part="previous"] svg,
326
316
  :host(:dir(rtl)) [part="next"] svg {
327
317
  scale: -1 1;
@@ -26,25 +26,35 @@ import type { CSSResultGroup } from 'lit';
26
26
  */
27
27
  export declare class HelixCarousel extends HelixHeadlessCarousel {
28
28
  /**
29
- * Which side of the slides the dots sit on.
29
+ * Where along that side the arrows sit. See `indicatorAlign`.
30
30
  *
31
- * Unset is `block-end`, under them. `block-start` puts them above,
32
- * `inline-start` and `inline-end` beside, where a run of dots becomes a
33
- * column.
31
+ * `overlay` answers it too, and the edge there is the whole slide: the bar is
32
+ * stretched across the picture, so this moves the arrows up and down within
33
+ * it rather than moving the bar. Centered unless asked otherwise, which is
34
+ * where an arrow over a photograph belongs.
35
+ */
36
+ controlsAlign?: 'center' | 'end' | 'start';
37
+ /**
38
+ * Which side of the slides the arrows sit on.
34
39
  *
35
- * **The sides of the content, not positions along a bar.** This was
36
- * `start | center | end`, which answered "where along the row" when the
37
- * question is "which edge", and could not say "above" at all. The logical
38
- * names rather than `top`/`left`, because the component is already careful
39
- * about writing direction everywhere else and an `inline-start` carousel
40
- * should put its dots on the right in Arabic without being told.
40
+ * The same four sides as `indicatorPlacement` and the same default, so a
41
+ * carousel that moves only one of them keeps the other where it was.
42
+ * `inline-start` or `inline-end` stacks the arrows into a column, which is
43
+ * what a vertical track usually wants.
41
44
  *
42
- * Independent of `controlsPlacement`. Both default to the block end, where
43
- * they share the row and split it, dots to the start and arrows to the end.
44
- * That is the arrangement the old shared bar gave, arrived at by two defaults
45
- * rather than by a rule about the pair, so moving one leaves the other alone.
45
+ * `overlay` puts them on the slides, at the track's own edges, which is what a
46
+ * full-bleed carousel wants: the slide is the page and the controls are on it
47
+ * rather than in a bar beneath it. It carries its own treatment with it, a
48
+ * surface and a shadow under each arrow, because a glyph drawn straight onto a
49
+ * photograph is legible against about half of one.
50
+ *
51
+ * **It is a value here rather than an axis of its own.** "The controls are
52
+ * over the content" is the whole of what a `hero` appearance would say, and
53
+ * the surface, the edge-to-edge arrows and the bar that catches no presses all
54
+ * follow from it. These two placements are the whole of where a carousel's
55
+ * chrome can go.
46
56
  */
47
- indicatorPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
57
+ controlsPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start' | 'overlay';
48
58
  /**
49
59
  * Where along that side the dots sit.
50
60
  *
@@ -67,41 +77,27 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
67
77
  * what keeps two items in one grid cell from landing on each other. Beside the
68
78
  * slides, and over them, both center instead, because a column there has
69
79
  * nothing to split the edge with. Putting both groups on the same edge with
70
- * the same alignment does overlap them, and always did: that is what the two
71
- * different defaults exist to avoid.
80
+ * the same alignment overlaps them, which is what the two different defaults
81
+ * exist to avoid.
72
82
  */
73
83
  indicatorAlign?: 'center' | 'end' | 'start';
74
84
  /**
75
- * Which side of the slides the arrows sit on.
76
- *
77
- * The same four sides as `indicatorPlacement` and the same default, so a
78
- * carousel that moves only one of them keeps the other where it was.
79
- * `inline-start` or `inline-end` stacks the arrows into a column, which is
80
- * what a vertical track usually wants.
85
+ * Which side of the slides the dots sit on.
81
86
  *
82
- * `overlay` puts them on the slides, at the track's own edges, which is what a
83
- * full-bleed carousel wants: the slide is the page and the controls are on it
84
- * rather than in a bar beneath it. It carries its own treatment with it, a
85
- * surface and a shadow under each arrow, because a glyph drawn straight onto a
86
- * photograph is legible against about half of one.
87
+ * Unset is `block-end`, under them. `block-start` puts them above,
88
+ * `inline-start` and `inline-end` beside, where a run of dots becomes a
89
+ * column.
87
90
  *
88
- * **That was `appearance="hero"` and did not need to be.** A third axis for
89
- * something these two already describe: what `hero` meant was "the controls
90
- * are over the content", and the surface, the edge-to-edge arrows and the bar
91
- * that catches no presses all followed from it rather than being separate
92
- * decisions. One fewer property, and the two axes are now the whole of where
93
- * a carousel's chrome can go.
94
- */
95
- controlsPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start' | 'overlay';
96
- /**
97
- * Where along that side the arrows sit. See `indicatorAlign`.
91
+ * **The sides of the content, not positions along a bar**, and logical names
92
+ * rather than `top`/`left`: an `inline-start` carousel should put its dots on
93
+ * the right in Arabic without being told.
98
94
  *
99
- * `overlay` answers it too, and the edge there is the whole slide: the bar is
100
- * stretched across the picture, so this moves the arrows up and down within
101
- * it rather than moving the bar. Centered unless asked otherwise, which is
102
- * where an arrow over a photograph belongs.
95
+ * Independent of `controlsPlacement`. Both default to the block end, where
96
+ * they share the row and split it, dots to the start and arrows to the end,
97
+ * arrived at by two defaults rather than by a rule about the pair, so moving
98
+ * one leaves the other alone.
103
99
  */
104
- controlsAlign?: 'center' | 'end' | 'start';
100
+ indicatorPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
105
101
  static styles: CSSResultGroup;
106
102
  }
107
103
  declare global {
@@ -36,17 +36,17 @@ let HelixCarousel = class HelixCarousel extends HelixHeadlessCarousel {
36
36
  static { this.styles = styles; }
37
37
  };
38
38
  __decorate([
39
- property({ attribute: 'indicator-placement', reflect: true })
40
- ], HelixCarousel.prototype, "indicatorPlacement", void 0);
41
- __decorate([
42
- property({ attribute: 'indicator-align', reflect: true })
43
- ], HelixCarousel.prototype, "indicatorAlign", void 0);
39
+ property({ attribute: 'controls-align', reflect: true })
40
+ ], HelixCarousel.prototype, "controlsAlign", void 0);
44
41
  __decorate([
45
42
  property({ attribute: 'controls-placement', reflect: true })
46
43
  ], HelixCarousel.prototype, "controlsPlacement", void 0);
47
44
  __decorate([
48
- property({ attribute: 'controls-align', reflect: true })
49
- ], HelixCarousel.prototype, "controlsAlign", void 0);
45
+ property({ attribute: 'indicator-align', reflect: true })
46
+ ], HelixCarousel.prototype, "indicatorAlign", void 0);
47
+ __decorate([
48
+ property({ attribute: 'indicator-placement', reflect: true })
49
+ ], HelixCarousel.prototype, "indicatorPlacement", void 0);
50
50
  HelixCarousel = __decorate([
51
51
  customElement('helix-carousel')
52
52
  ], HelixCarousel);
@@ -1,4 +1,4 @@
1
- // Generated from src/chat/composer/chat-composer.css by `bun run styles`. Do not edit.
1
+ // Generated from src/chat/composer/chat-composer.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/chat/message/chat-message.css by `bun run styles`. Do not edit.
1
+ // Generated from src/chat/message/chat-message.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;
@@ -64,12 +64,6 @@ pointer-events: auto;
64
64
  }
65
65
  }
66
66
 
67
- @media (prefers-reduced-motion: reduce) {
68
- [part="actions"] {
69
- transition: none;
70
- }
71
- }
72
-
73
67
  [part="actions"] {
74
68
 
75
69
  --helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));
@@ -35,13 +35,10 @@ export declare class HelixChatMessage extends HelixHeadlessChatMessage {
35
35
  /**
36
36
  * Where the turn's surface ends.
37
37
  *
38
- * **A bubble is one answer and not the only one, and the category has moved.**
39
- * Two people messaging read as two columns of bubbles, which is what the form
40
- * has looked like since it existed. An assistant answering does not: the reply
41
- * is a paragraph, often a long one with code and lists in it, and every AI
42
- * surface worth copying sets it as prose with the reader's own turns in
43
- * bubbles beside it. A component that can only draw bubbles cannot render the
44
- * conversation most people are now building.
38
+ * **A bubble is one answer and not the only one.** Two people messaging read
39
+ * as two columns of bubbles; an assistant answering does not, the reply being
40
+ * a paragraph with code and lists in it, set as prose with the reader's own
41
+ * turns in bubbles beside it.
45
42
  *
46
43
  * - `filled` is the default and is told apart by its own ground, which is the
47
44
  * bubble.
@@ -50,12 +47,10 @@ export declare class HelixChatMessage extends HelixHeadlessChatMessage {
50
47
  * assistant's side of a conversation, and for any turn long enough that a
51
48
  * fill reads as a wall.
52
49
  *
53
- * **On this tier, because it is where the surface ends and nothing else.**
54
- * `check:axes` keeps `separation` off the headless tier for the reason it
55
- * keeps every painted axis off it: that tier has no ground to end. The two
56
- * values are a subset of the registry's four; `elevated` and `outlined` are
57
- * available and neither is a thing a turn should be, a lifted message reading
58
- * as a card and an outlined one as an input.
50
+ * **On this tier**, because `separation` is paint and the headless tier has
51
+ * no ground to end. The two values are a subset of the registry's four:
52
+ * `elevated` reads as a card and `outlined` as an input, so neither is a
53
+ * thing a turn should be.
59
54
  */
60
55
  separation?: 'filled' | 'plain';
61
56
  }
@@ -1,4 +1,4 @@
1
- // Generated from src/chat/root/chat-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/chat/root/chat-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;
@@ -1,4 +1,4 @@
1
- // Generated from src/checkbox/root/checkbox-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/checkbox/root/checkbox-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;
@@ -107,13 +107,6 @@ border-color: var(--helix-color-danger);
107
107
  background-color: var(--helix-color-danger);
108
108
  }
109
109
 
110
- @media (prefers-reduced-motion: reduce) {
111
- [part="mark"],
112
- [part="control"] {
113
- transition: none;
114
- }
115
- }
116
-
117
110
  :host(:not(:state(has-label))) [part="label"] {
118
111
  display: none;
119
112
  }
@@ -163,12 +156,6 @@ margin-block-start: calc(
163
156
  );
164
157
  }
165
158
 
166
- @media (prefers-reduced-motion: reduce) {
167
- :host([variant="card"]) [part="field"] {
168
- transition: none;
169
- }
170
- }
171
-
172
159
  @media print {
173
160
  :host {
174
161
  box-shadow: none;
@@ -1,4 +1,4 @@
1
- // Generated from src/checkbox-group/root/checkbox-group-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/checkbox-group/root/checkbox-group-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;
@@ -1,4 +1,4 @@
1
- // Generated from src/code/root/code-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/code/root/code-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;
@@ -6,13 +6,15 @@ display: inline;
6
6
 
7
7
  [part="code"] {
8
8
 
9
- background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
9
+ background-color: var(
10
+ --code-background-color,
11
+ color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
12
+ );
10
13
  border-radius: var(--helix-radii-sm);
11
14
 
12
- color: color-mix(
13
- in oklab,
14
- var(--helix-color-foreground) 30%,
15
- var(--helix-color-foreground-muted)
15
+ color: var(
16
+ --code-foreground-color,
17
+ color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
16
18
  );
17
19
  font-family: var(--helix-font-mono);
18
20
 
@@ -23,7 +25,7 @@ padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));
23
25
  }
24
26
 
25
27
  @media print {
26
- :host {
28
+ [part="code"] {
27
29
  background-color: transparent;
28
30
  box-shadow: none;
29
31
  }
@@ -12,6 +12,10 @@ import type { CSSResultGroup } from 'lit';
12
12
  * @category typography
13
13
  * @documentation https://helix.fusion.dev/components/code
14
14
  *
15
+ * @cssproperty --code-background-color - Fill behind the fragment. Defaults to a 6%
16
+ * wash of the ink, which composites the same against a light page and a dark one.
17
+ * @cssproperty --code-foreground-color - The fragment's ink. Defaults to the prose's
18
+ * own, pulled back towards `foreground-muted`.
15
19
  * @cssproperty --code-padding - Space either side of the fragment. Defaults to half
16
20
  * of `space-2xs`, which is what keeps a bracket beside the chip rather than a space
17
21
  * away from it.
@@ -19,6 +19,10 @@ import { styles } from './code-root.css.js';
19
19
  * @category typography
20
20
  * @documentation https://helix.fusion.dev/components/code
21
21
  *
22
+ * @cssproperty --code-background-color - Fill behind the fragment. Defaults to a 6%
23
+ * wash of the ink, which composites the same against a light page and a dark one.
24
+ * @cssproperty --code-foreground-color - The fragment's ink. Defaults to the prose's
25
+ * own, pulled back towards `foreground-muted`.
22
26
  * @cssproperty --code-padding - Space either side of the fragment. Defaults to half
23
27
  * of `space-2xs`, which is what keeps a bracket beside the chip rather than a space
24
28
  * away from it.
@@ -1,4 +1,4 @@
1
- // Generated from src/code-block/root/code-block-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/code-block/root/code-block-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;
@@ -1,4 +1,4 @@
1
- // Generated from src/color-input/root/color-input-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/color-input/root/color-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: block;
@@ -57,7 +57,7 @@ flex: none;
57
57
 
58
58
  [part="trigger"]:focus-visible {
59
59
  outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
60
- outline-offset: calc(var(--helix-size-focus-ring) * -1);
60
+ outline-offset: calc(var(--helix-size-focus-offset) * -1);
61
61
  }
62
62
 
63
63
  :host(:disabled) [part="trigger"] {
@@ -6,10 +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 { HelixHeadlessColorInput } from '@fusion.dev/helix-headless/color-input';
9
- /* Side-effect import, because the tier below renders `<helix-slider>` and a
10
- custom element registers on import. Inherited from the base along with the
9
+ /* Side-effect import, because the tier below renders `<helix-color-picker>` and
10
+ a custom element registers on import. Inherited from the base along with the
11
11
  template, which is why it has to be restated here: this file has no
12
- `<helix-slider>` in it to remind anyone. `check:composed` enforces it. */
12
+ `<helix-color-picker>` in it to remind anyone. */
13
13
  import '../../color-picker/index.js';
14
14
  import { styles as fieldStyles } from '../../shared/field/field.css.js';
15
15
  import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
@@ -1,4 +1,4 @@
1
- // Generated from src/color-picker/root/color-picker-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/color-picker/root/color-picker-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;
@@ -250,14 +250,6 @@ inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));
250
250
  padding: var(--helix-space-none);
251
251
  }
252
252
 
253
- @media (prefers-reduced-motion: reduce) {
254
- [part="eyedropper"],
255
- [part="format"],
256
- [part="value"] {
257
- transition: none;
258
- }
259
- }
260
-
261
253
  @media (prefers-reduced-motion: reduce) {
262
254
 
263
255
  [part="sample"] {
@@ -6,10 +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 { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picker';
9
- /* Side-effect import, because the tier below renders `<helix-slider>` and a
9
+ /* Side-effect imports, because the tier below renders each of these tags and a
10
10
  custom element registers on import. Inherited from the base along with the
11
- template, which is why it has to be restated here: this file has no
12
- `<helix-slider>` in it to remind anyone. `check:composed` enforces it. */
11
+ template, which is why they have to be restated here: this file has none of
12
+ the tags in it to remind anyone. */
13
13
  import '../../button/index.js';
14
14
  import '../../button-group/index.js';
15
15
  import '../../icon/index.js';
@@ -1,4 +1,4 @@
1
- // Generated from src/combobox/root/combobox-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/combobox/root/combobox-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;
@@ -121,13 +121,6 @@ inline-size: var(--helix-size-icon);
121
121
  scale: 1 -1;
122
122
  }
123
123
 
124
- @media (prefers-reduced-motion: reduce) {
125
- [part="indicator"],
126
- ::slotted([slot="indicator"]) {
127
- transition: none;
128
- }
129
- }
130
-
131
124
  slot[name="start"]::slotted(*),
132
125
  slot[name="end"]::slotted(*) {
133
126
  --icon-size: var(--helix-size-icon);
@@ -9,7 +9,7 @@ import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
9
9
  /* Side-effect import, because the tier below renders `<helix-listbox>` and a
10
10
  custom element registers on import. Inherited from the base along with the
11
11
  template, which is why it is restated here: this file has no `<helix-listbox>`
12
- in it to remind anyone. `check:composed` enforces it. */
12
+ in it to remind anyone. */
13
13
  import '../../listbox/index.js';
14
14
  import '../../tag/index.js';
15
15
  import { styles as fieldStyles } from '../../shared/field/field.css.js';
@@ -1,4 +1,4 @@
1
- // Generated from src/command/root/command-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/command/root/command-root.css by `turbo run styles`. Do not edit.
2
2
  import { createSheet } from '@fusion.dev/helix-core';
3
3
  export const styles = createSheet(`helix-dialog::part(dialog) {
4
4
  align-self: start;
@@ -1,4 +1,4 @@
1
- // Generated from src/copy-button/root/copy-button-root.css by `bun run styles`. Do not edit.
1
+ // Generated from src/copy-button/root/copy-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(`[part="button"] {
4
4
  display: inline-grid;