@fusion.dev/helix 0.146.0 → 0.148.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 (273) hide show
  1. package/custom-elements.json +10225 -1400
  2. package/dist/accordion/item/accordion-item.css.js +4 -96
  3. package/dist/accordion/root/accordion-root.css.js +2 -28
  4. package/dist/announcement/root/announcement-root.css.js +10 -154
  5. package/dist/announcement/root/announcement-root.d.ts +3 -0
  6. package/dist/app-header/root/app-header-root.css.js +2 -118
  7. package/dist/area-chart/root/area-chart-root.css.js +4 -94
  8. package/dist/area-chart/root/area-chart-root.d.ts +1 -0
  9. package/dist/aura/root/aura-root.css.js +2 -57
  10. package/dist/avatar/group/avatar-group.css.js +5 -36
  11. package/dist/avatar/group/avatar-group.d.ts +3 -0
  12. package/dist/avatar/root/avatar-root.css.js +1 -53
  13. package/dist/avatar/root/avatar-root.d.ts +2 -0
  14. package/dist/badge/root/badge-root.css.js +12 -207
  15. package/dist/badge/root/badge-root.d.ts +2 -0
  16. package/dist/bar-chart/root/bar-chart-root.css.js +8 -292
  17. package/dist/blockquote/root/blockquote-root.css.js +1 -43
  18. package/dist/blockquote/root/blockquote-root.d.ts +8 -2
  19. package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +13 -98
  20. package/dist/breadcrumbs/root/breadcrumbs-root.css.js +5 -42
  21. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +17 -0
  22. package/dist/breadcrumbs/root/breadcrumbs-root.js +4 -0
  23. package/dist/button/root/button-root.css.js +16 -197
  24. package/dist/button/root/button-root.d.ts +1 -0
  25. package/dist/button-group/root/button-group-root.css.js +11 -52
  26. package/dist/button-group/root/button-group-root.d.ts +29 -7
  27. package/dist/button-group/root/button-group-root.js +19 -0
  28. package/dist/callout/root/callout-root.css.js +5 -138
  29. package/dist/callout/root/callout-root.d.ts +4 -2
  30. package/dist/canvas/node/canvas-node.css.js +10 -367
  31. package/dist/canvas/node/canvas-node.d.ts +5 -0
  32. package/dist/canvas/root/canvas-root.css.js +11 -270
  33. package/dist/canvas/root/canvas-root.d.ts +6 -0
  34. package/dist/card/root/card-root.css.js +5 -134
  35. package/dist/card/root/card-root.d.ts +4 -0
  36. package/dist/carousel/root/carousel-root.css.js +20 -386
  37. package/dist/chat/composer/chat-composer.css.js +4 -105
  38. package/dist/chat/message/chat-message.css.js +5 -239
  39. package/dist/chat/message/chat-message.d.ts +5 -0
  40. package/dist/chat/root/chat-root.css.js +5 -162
  41. package/dist/chat/typing.css.js +9 -46
  42. package/dist/checkbox/root/checkbox-root.css.js +12 -177
  43. package/dist/checkbox-group/root/checkbox-group-root.css.js +1 -27
  44. package/dist/code/root/code-root.css.js +3 -25
  45. package/dist/code-block/root/code-block-root.css.js +22 -279
  46. package/dist/code-block/root/code-block-root.d.ts +7 -0
  47. package/dist/color-input/root/color-input-root.css.js +5 -114
  48. package/dist/color-picker/root/color-picker-root.css.js +39 -337
  49. package/dist/color-picker/root/color-picker-root.d.ts +2 -0
  50. package/dist/combobox/root/combobox-root.css.js +8 -147
  51. package/dist/combobox/root/combobox-root.js +2 -0
  52. package/dist/command/root/command-root.css.js +3 -74
  53. package/dist/copy-button/root/copy-button-root.css.js +3 -43
  54. package/dist/data-table/root/data-table-root.css.js +21 -245
  55. package/dist/data-table/root/data-table-root.d.ts +7 -0
  56. package/dist/date-input/root/date-input-root.css.js +8 -103
  57. package/dist/date-picker/root/date-picker-root.css.js +16 -278
  58. package/dist/date-picker/root/date-picker-root.d.ts +1 -0
  59. package/dist/description-list/item/description-list-item.css.js +1 -41
  60. package/dist/description-list/item/description-list-item.d.ts +8 -0
  61. package/dist/description-list/root/description-list-root.css.js +2 -34
  62. package/dist/description-list/root/description-list-root.d.ts +13 -0
  63. package/dist/description-list/root/description-list-root.js +7 -0
  64. package/dist/dialog/root/dialog-root.css.js +7 -221
  65. package/dist/dialog/root/dialog-root.d.ts +3 -0
  66. package/dist/divider/root/divider-root.css.js +5 -81
  67. package/dist/divider/root/divider-root.d.ts +3 -0
  68. package/dist/donut-chart/root/donut-chart-root.css.js +7 -193
  69. package/dist/drawer/root/drawer-root.css.js +11 -237
  70. package/dist/drilldown/item/drilldown-item.css.js +4 -51
  71. package/dist/drilldown/item/drilldown-item.d.ts +1 -0
  72. package/dist/drilldown/root/drilldown-root.css.js +6 -120
  73. package/dist/element-events.generated.js +5 -1
  74. package/dist/empty/root/empty-root.css.js +2 -42
  75. package/dist/file-input/root/file-input-root.css.js +7 -173
  76. package/dist/file-input/root/file-input-root.d.ts +4 -0
  77. package/dist/filter-input/chip/filter-chip.css.js +2 -84
  78. package/dist/filter-input/field/filter-field.css.js +1 -3
  79. package/dist/filter-input/menu/filter-menu.css.js +1 -3
  80. package/dist/filter-input/operator/filter-operator.css.js +1 -3
  81. package/dist/filter-input/root/filter-input-root.css.js +6 -113
  82. package/dist/flex/root/flex-root.css.js +4 -207
  83. package/dist/flex/root/flex-root.d.ts +2 -2
  84. package/dist/format-date/root/format-date-root.css.js +1 -13
  85. package/dist/format-date/root/format-date-root.d.ts +0 -1
  86. package/dist/format-date/root/format-date-root.js +0 -1
  87. package/dist/graph/root/graph-root.css.js +9 -444
  88. package/dist/grid/root/grid-root.css.js +1 -171
  89. package/dist/heatmap/root/heatmap-root.css.js +8 -156
  90. package/dist/heatmap/root/heatmap-root.d.ts +2 -0
  91. package/dist/icon/index.d.ts +1 -1
  92. package/dist/icon/root/icon-root.css.js +1 -18
  93. package/dist/icon/root/index.d.ts +1 -1
  94. package/dist/icon-button/root/icon-button-root.css.js +25 -203
  95. package/dist/icon-button/root/icon-button-root.d.ts +1 -0
  96. package/dist/image/root/image-root.css.js +7 -65
  97. package/dist/image/root/image-root.d.ts +3 -0
  98. package/dist/input/root/input-root.css.js +6 -79
  99. package/dist/kbd/root/kbd-root.css.js +2 -71
  100. package/dist/kbd/root/kbd-root.d.ts +7 -0
  101. package/dist/legend/root/legend-root.css.js +9 -106
  102. package/dist/legend/root/legend-root.d.ts +2 -0
  103. package/dist/lightbox/item/lightbox-item.css.js +1 -37
  104. package/dist/lightbox/root/lightbox-root.css.js +38 -183
  105. package/dist/line-chart/root/line-chart-root.css.js +4 -170
  106. package/dist/line-chart/root/line-chart-root.d.ts +1 -0
  107. package/dist/list/item/list-item.css.js +2 -94
  108. package/dist/list/root/list-root.css.js +4 -88
  109. package/dist/listbox/root/listbox-root.css.js +7 -111
  110. package/dist/listbox/root/listbox-root.d.ts +2 -0
  111. package/dist/listbox/root/listbox-root.js +1 -0
  112. package/dist/loader/root/loader-root.css.js +5 -171
  113. package/dist/map/area/map-area.css.js +1 -23
  114. package/dist/map/buildings/map-buildings.css.js +1 -26
  115. package/dist/map/contours/map-contours.css.js +2 -5
  116. package/dist/map/landcover/map-landcover.css.js +1 -4
  117. package/dist/map/marker/map-marker.css.js +14 -327
  118. package/dist/map/points/map-points.css.js +1 -86
  119. package/dist/map/position/map-position.css.js +8 -227
  120. package/dist/map/raster/map-raster.css.js +1 -3
  121. package/dist/map/root/map-root.css.js +14 -352
  122. package/dist/map/root/map-root.d.ts +10 -0
  123. package/dist/map/route/map-route.css.js +1 -24
  124. package/dist/map/terrain/map-terrain.css.js +3 -7
  125. package/dist/megamenu/root/megamenu-root.css.js +11 -162
  126. package/dist/megamenu/root/megamenu-root.d.ts +8 -0
  127. package/dist/menu/item/menu-item.css.js +7 -130
  128. package/dist/menu/root/menu-root.css.js +1 -110
  129. package/dist/menu/section/menu-section.css.js +1 -13
  130. package/dist/meter/root/meter-root.css.js +17 -207
  131. package/dist/meter/root/meter-root.d.ts +3 -0
  132. package/dist/navigation/root/navigation-root.css.js +2 -54
  133. package/dist/notifications/group/notification-group.css.js +1 -61
  134. package/dist/notifications/notification/notification.css.js +17 -264
  135. package/dist/notifications/root/notifications-root.css.js +7 -125
  136. package/dist/notifications/root/notifications-root.d.ts +7 -2
  137. package/dist/number-input/root/number-input-root.css.js +10 -103
  138. package/dist/object-inspector/root/object-inspector-root.css.js +11 -162
  139. package/dist/option/group/option-group.css.js +1 -22
  140. package/dist/option/index.d.ts +1 -0
  141. package/dist/option/index.js +1 -0
  142. package/dist/option/root/option-root.css.js +3 -85
  143. package/dist/option/separator/option-separator.css.d.ts +1 -0
  144. package/dist/option/separator/option-separator.css.js +3 -0
  145. package/dist/option/separator/option-separator.d.ts +26 -0
  146. package/dist/option/separator/option-separator.js +16 -0
  147. package/dist/orb/root/orb-root.css.js +1 -41
  148. package/dist/outline/root/outline-root.css.js +24 -122
  149. package/dist/outline/root/outline-root.d.ts +17 -4
  150. package/dist/pagination/root/pagination-root.css.js +9 -105
  151. package/dist/pagination/root/pagination-root.d.ts +14 -0
  152. package/dist/pagination/size/pagination-size.css.js +1 -22
  153. package/dist/pagination/size/pagination-size.d.ts +3 -0
  154. package/dist/pagination/summary/pagination-summary.css.js +1 -7
  155. package/dist/pagination/summary/pagination-summary.d.ts +3 -0
  156. package/dist/pin-input/root/pin-input-root.css.js +2 -73
  157. package/dist/pin-input/root/pin-input-root.d.ts +9 -3
  158. package/dist/popover/root/popover-root.css.js +6 -127
  159. package/dist/progress/root/progress-root.css.js +7 -230
  160. package/dist/progress/root/progress-root.d.ts +4 -0
  161. package/dist/qr-code/root/qr-code-root.css.js +1 -68
  162. package/dist/qr-code/root/qr-code-root.d.ts +3 -0
  163. package/dist/quote/root/quote-root.css.js +1 -20
  164. package/dist/radio/group/radio-group.css.js +1 -21
  165. package/dist/radio/root/radio-root.css.js +5 -208
  166. package/dist/rating/root/rating-root.css.js +4 -117
  167. package/dist/sandbox/frame.d.ts +2 -1
  168. package/dist/sandbox/frame.js +1 -1
  169. package/dist/sandbox/index.d.ts +1 -1
  170. package/dist/sandbox/preview/sandbox-preview.css.js +1 -12
  171. package/dist/sandbox/preview/sandbox-preview.d.ts +27 -3
  172. package/dist/sandbox/preview/sandbox-preview.js +17 -11
  173. package/dist/sandbox/root/sandbox-root.css.js +3 -70
  174. package/dist/sandbox/root/sandbox-root.d.ts +16 -4
  175. package/dist/sandbox/root/sandbox-root.js +29 -50
  176. package/dist/sandbox/source/sandbox-source.css.js +3 -95
  177. package/dist/sandbox/source/sandbox-source.d.ts +31 -25
  178. package/dist/sandbox/source/sandbox-source.js +12 -5
  179. package/dist/sandbox/status-bar/sandbox-status-bar.css.js +1 -21
  180. package/dist/sandbox/terminal/sandbox-terminal.css.js +5 -106
  181. package/dist/sandbox/terminal/sandbox-terminal.d.ts +4 -0
  182. package/dist/sandbox/terminal/sandbox-terminal.js +2 -1
  183. package/dist/sandbox/tokens.d.ts +2 -2
  184. package/dist/sandbox/toolbar/sandbox-toolbar.css.js +1 -36
  185. package/dist/scatter-chart/root/scatter-chart-root.css.js +11 -146
  186. package/dist/scatter-chart/root/scatter-chart-root.d.ts +1 -0
  187. package/dist/scroll-area/root/scroll-area-root.css.js +14 -181
  188. package/dist/select/root/select-root.css.js +7 -124
  189. package/dist/select/root/select-root.js +2 -0
  190. package/dist/shared/chart/series.css.js +1 -36
  191. package/dist/shared/chart/terminus.css.js +1 -47
  192. package/dist/shared/chart/tooltip.css.js +1 -68
  193. package/dist/shared/collection/state.css.js +1 -9
  194. package/dist/shared/field/field-frame.css.js +3 -33
  195. package/dist/shared/field/field-inline.css.js +1 -4
  196. package/dist/shared/field/field-segments.css.js +1 -39
  197. package/dist/shared/field/field-stacked.css.js +1 -5
  198. package/dist/shared/field/field.css.js +3 -57
  199. package/dist/shared/floating/entrance.css.js +3 -34
  200. package/dist/shared/floating/panel.css.js +2 -17
  201. package/dist/shared/glyph/glyph.css.js +1 -5
  202. package/dist/shared/live/live.css.js +1 -8
  203. package/dist/shared/tags/tags.css.js +1 -39
  204. package/dist/shared/viewport/viewport.css.js +8 -135
  205. package/dist/skeleton/root/skeleton-root.css.js +12 -120
  206. package/dist/skip-link/root/skip-link-root.css.js +2 -47
  207. package/dist/slider/root/slider-root.css.js +19 -330
  208. package/dist/slider/root/slider-root.d.ts +2 -0
  209. package/dist/sparkline/root/sparkline-root.css.js +8 -143
  210. package/dist/sparkline/root/sparkline-root.d.ts +2 -0
  211. package/dist/speed-dial/group/speed-dial-group.css.d.ts +1 -0
  212. package/dist/speed-dial/group/speed-dial-group.css.js +2 -0
  213. package/dist/speed-dial/group/speed-dial-group.d.ts +27 -0
  214. package/dist/speed-dial/group/speed-dial-group.js +16 -0
  215. package/dist/speed-dial/index.d.ts +1 -0
  216. package/dist/speed-dial/index.js +1 -0
  217. package/dist/speed-dial/item/speed-dial-item.css.js +4 -73
  218. package/dist/speed-dial/item/speed-dial-item.d.ts +1 -0
  219. package/dist/speed-dial/root/speed-dial-root.css.js +3 -149
  220. package/dist/splitter/root/splitter-root.css.js +19 -176
  221. package/dist/splitter/root/splitter-root.d.ts +4 -0
  222. package/dist/stat/group/stat-group.css.js +1 -36
  223. package/dist/stat/root/stat-root.css.js +3 -62
  224. package/dist/steps/root/steps-root.css.js +7 -92
  225. package/dist/steps/step/step.css.js +5 -156
  226. package/dist/switch/root/switch-root.css.js +2 -110
  227. package/dist/table/cell/table-cell.css.js +1 -33
  228. package/dist/table/column/table-column.css.js +7 -105
  229. package/dist/table/root/table-root.css.js +1 -43
  230. package/dist/table/row/table-row.css.js +6 -18
  231. package/dist/table/row/table-row.d.ts +2 -0
  232. package/dist/tabs/panel/tab-panel.css.js +2 -17
  233. package/dist/tabs/root/tabs-root.css.js +6 -177
  234. package/dist/tabs/tab/tab.css.js +6 -54
  235. package/dist/tag/group/tag-group.css.js +1 -11
  236. package/dist/tag/root/tag-root.css.js +1 -166
  237. package/dist/tag/root/tag-root.d.ts +2 -0
  238. package/dist/text/root/text-root.css.js +11 -200
  239. package/dist/textarea/root/textarea-root.css.js +3 -71
  240. package/dist/time-input/root/time-input-root.css.js +7 -118
  241. package/dist/time-picker/root/time-picker-root.css.js +15 -134
  242. package/dist/time-picker/root/time-picker-root.d.ts +7 -0
  243. package/dist/timeline/group/timeline-group.css.js +1 -31
  244. package/dist/timeline/item/timeline-item.css.js +3 -134
  245. package/dist/timeline/root/timeline-root.css.js +1 -66
  246. package/dist/toast/item/toast-item.css.js +11 -250
  247. package/dist/toast/item/toast-item.d.ts +10 -0
  248. package/dist/toast/root/toast-root.css.js +1 -85
  249. package/dist/toast/root/toast-root.js +2 -1
  250. package/dist/toggle/group/toggle-group.css.js +7 -126
  251. package/dist/toggle/root/toggle-root.css.js +1 -23
  252. package/dist/toolbar/root/toolbar-root.css.js +1 -36
  253. package/dist/toolbar/root/toolbar-root.d.ts +11 -0
  254. package/dist/toolbar/root/toolbar-root.js +4 -0
  255. package/dist/tooltip/root/tooltip-root.css.js +5 -101
  256. package/dist/tooltip/root/tooltip-root.d.ts +2 -0
  257. package/dist/tour/root/tour-root.css.js +2 -28
  258. package/dist/tour/stop/tour-stop.css.js +2 -109
  259. package/dist/tree/item/tree-item.css.js +12 -238
  260. package/dist/tree/root/tree-root.css.js +1 -40
  261. package/dist/trend/root/trend-root.css.js +5 -53
  262. package/dist/video/root/video-root.css.js +16 -398
  263. package/dist/video-playlist/item/video-playlist-item.css.js +12 -86
  264. package/dist/video-playlist/item/video-playlist-item.d.ts +12 -0
  265. package/dist/video-playlist/menu/video-playlist-menu.css.js +1 -41
  266. package/dist/video-playlist/root/video-playlist-root.css.js +1 -19
  267. package/dist/video-playlist/root/video-playlist-root.d.ts +2 -0
  268. package/dist/virtual-list/root/virtual-list-root.css.js +3 -40
  269. package/lint.json +1 -1
  270. package/package.json +6 -6
  271. package/types/jsx.d.ts +4595 -777
  272. package/types/svelte.d.ts +2 -0
  273. package/types/vue.d.ts +1312 -210
@@ -1,173 +1,7 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {
3
- display: grid;
4
- position: relative;
5
- gap: var(--line-chart-gap, var(--helix-space-2xs));
6
- }
7
-
8
- [part="plot"] {
9
- position: relative;
10
-
11
- block-size: var(--line-chart-block-size, 12em);
12
- }
13
-
14
- [part="plot"] svg {
15
- block-size: 100%;
16
- inline-size: 100%;
17
-
18
- overflow: visible;
19
- }
20
-
21
- [part="line"] {
22
- stroke-linecap: round;
23
- stroke-linejoin: round;
24
-
25
- stroke-width: var(--line-chart-width, var(--_chart-stroke));
26
- vector-effect: non-scaling-stroke;
27
- }
28
-
29
- [part="area"] {
30
-
31
- opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));
32
- stroke: none;
33
- }
34
-
35
- [part="baseline"] {
36
- stroke: var(--helix-color-border);
37
- stroke-width: var(--helix-border-thin);
38
- vector-effect: non-scaling-stroke;
39
- }
40
-
41
- [part="labels"] {
42
- display: grid;
43
- grid-auto-columns: 1fr;
44
- grid-auto-flow: column;
45
- }
46
-
47
- [part="label"] {
48
- color: var(--helix-color-foreground-muted);
49
- font-size: var(--helix-text-xs);
50
- overflow: hidden;
51
- text-align: center;
52
- text-overflow: ellipsis;
53
- white-space: nowrap;
54
- }
55
-
56
- [part="line"] {
57
- stroke: var(--chart-series);
58
- }
59
-
60
- [part="terminus"] {
61
- color: var(--chart-series);
62
- }
63
-
64
- [part~="marker"] {
65
- background-color: var(--chart-series);
66
- block-size: var(--line-chart-marker-size, 6px);
67
- border-radius: var(--helix-radii-full);
68
- box-shadow: 0 0 0 var(--helix-border-thin)
69
- var(--line-chart-marker-ring-color, var(--helix-color-background));
70
- inline-size: var(--line-chart-marker-size, 6px);
71
- pointer-events: none;
72
- position: absolute;
73
- translate: -50% -50%;
74
- }
75
-
76
- :host(:dir(rtl)) [part~="marker"] {
77
- translate: 50% -50%;
78
- }
79
-
80
- :host([terminus="ring"]) [part="svg"] {
81
- mask-composite: intersect;
82
- mask-image: var(--_line-chart-holes);
83
- }
84
-
85
- [part="area"] {
86
- fill: var(--chart-series);
87
- }
88
-
89
- [part="guide"] {
90
- stroke: var(--helix-color-foreground-muted);
91
- stroke-dasharray: 3 3;
92
- stroke-width: var(--helix-border-thin);
93
- vector-effect: non-scaling-stroke;
94
- }
95
-
96
- [part="line"] {
97
- stroke-dasharray: 1000;
98
- transition:
2
+ export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--line-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--line-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part~="line"] {stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--line-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="area"] {opacity: calc(var(--line-chart-area-opacity, 0.16) * var(--helix-material-opacity));stroke: none;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part~="line"] {stroke: var(--chart-series);}[part="terminus"] {color: var(--chart-series);}[part~="marker"] {background-color: var(--chart-series);block-size: var(--line-chart-marker-size, 6px);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
3
+ var(--line-chart-marker-ring-color, var(--helix-color-background));inline-size: var(--line-chart-marker-size, 6px);pointer-events: none;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part~="marker"] {translate: 50% -50%;}:host([terminus="ring"]) [part="svg"] {mask-composite: intersect;mask-image: var(--_line-chart-holes);}[part="area"] {fill: var(--chart-series);}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="line"] {stroke-dasharray: 1000;transition:
99
4
  d var(--helix-duration-normal) var(--helix-easing-decelerate),
100
- stroke-dashoffset var(--helix-duration-slow) var(--helix-easing-decelerate);
101
- }
102
-
103
- @starting-style {
104
- [part="line"] {
105
- stroke-dashoffset: 1000;
106
- }
107
- }
108
-
109
- [part="area"] {
110
- transition:
5
+ stroke-dashoffset var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part~="line"] {stroke-dashoffset: 1000;}}[part~="line-dashed"] {stroke-dasharray: var(--line-chart-dash, 6 4);}@starting-style {[part~="line-dashed"] {stroke-dashoffset: 0;}}[part="area"] {transition:
111
6
  d var(--helix-duration-normal) var(--helix-easing-decelerate),
112
- opacity var(--helix-duration-slow) var(--helix-easing-decelerate);
113
- }
114
-
115
- @starting-style {
116
- [part="area"] {
117
- opacity: 0;
118
- }
119
- }
120
-
121
- [part="plot"] {
122
- cursor: crosshair;
123
- }
124
-
125
- [part="gridline"] {
126
- stroke: var(--line-chart-gridline-color, var(--helix-color-border));
127
- stroke-width: var(--helix-border-thin);
128
- vector-effect: non-scaling-stroke;
129
- }
130
-
131
- [part="band"] {
132
- fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));
133
- }
134
-
135
- @media print {
136
- :host {
137
- print-color-adjust: exact;
138
- }
139
- }
140
-
141
- :host([emphasis="subtle"]) [part="line"] {
142
- stroke: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));
143
- }
144
-
145
- :host([emphasis="subtle"]) [part="area"] {
146
- fill: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));
147
- }
148
-
149
- :host([emphasis="outlined"]) {
150
- --line-chart-area-opacity: 0.08;
151
- }
152
-
153
- :host([emphasis="solid"]) {
154
- --line-chart-area-opacity: 1;
155
- }
156
-
157
- :host([material="glass"]) [part="line"] {
158
- stroke-opacity: calc(0.62 * var(--helix-material-opacity));
159
- }
160
-
161
- :host([material="frosted"]) [part="line"] {
162
- stroke-opacity: calc(0.88 * var(--helix-material-opacity));
163
- }
164
-
165
- [part="summary"] {
166
- block-size: 1px;
167
- clip-path: inset(50%);
168
- inline-size: 1px;
169
- margin: var(--helix-space-none);
170
- overflow: hidden;
171
- position: absolute;
172
- white-space: nowrap;
173
- }`);
7
+ opacity var(--helix-duration-slow) var(--helix-easing-decelerate);}@starting-style {[part="area"] {opacity: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--line-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part~="line"] {stroke: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="subtle"]) [part="area"] {fill: color-mix(in oklab, var(--chart-series) 45%, var(--helix-color-background));}:host([emphasis="outlined"]) {--line-chart-area-opacity: 0.08;}:host([emphasis="solid"]) {--line-chart-area-opacity: 1;}:host([material="glass"]) [part~="line"] {stroke-opacity: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="line"] {stroke-opacity: calc(0.88 * var(--helix-material-opacity));}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);
@@ -36,6 +36,7 @@ import '../../tooltip/index.js';
36
36
  * @cssproperty --line-chart-area-opacity - How much of a line's color its wash takes.
37
37
  * @cssproperty --line-chart-band-color - Color of the band around the reading under the pointer.
38
38
  * @cssproperty --line-chart-block-size - Height of the drawing.
39
+ * @cssproperty --line-chart-dash - The dash pattern of a series `dashed` names, as `stroke-dasharray` takes it.
39
40
  * @cssproperty --line-chart-gap - Space between the drawing and its labels.
40
41
  * @cssproperty --line-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
41
42
  * @cssproperty --line-chart-marker-ring-color - Color of the ring round the mark on a reading, which matches the page. Change it when the chart sits on another surface.
@@ -1,95 +1,3 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {
3
- display: block;
4
- }
5
-
6
- [part~="row"] {
7
- align-items: center;
8
- display: grid;
9
-
10
- grid-template-columns: auto auto 1fr auto;
11
- padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));
12
- }
13
-
14
- [part="rail"] {
15
- align-self: start;
16
- color: var(--helix-color-foreground-muted);
17
- display: var(--list-item-rail-display, none);
18
- font-family: var(--helix-font-mono);
19
- font-size: var(--helix-text-xs);
20
- grid-column: 1;
21
- grid-row: 1;
22
- letter-spacing: var(--helix-tracking-wide);
23
- line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));
24
- inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));
25
- }
26
-
27
- [part="rail"]::before {
28
- content: var(--list-item-rail-content, "");
29
- }
30
-
31
- slot[name="start"]::slotted(*) {
32
- color: var(--helix-color-foreground-muted);
33
- grid-column: 2;
34
- margin-inline-end: var(--helix-space-sm);
35
- grid-row: 1 / span 2;
36
- }
37
-
38
- slot:not([name]) {
39
- color: var(--helix-color-foreground);
40
- display: block;
41
- font-size: var(--helix-text-sm);
42
-
43
- font-weight: var(--list-item-term-weight, var(--helix-weight-regular));
44
- grid-column: 3;
45
- grid-row: 1;
46
- }
47
-
48
- slot[name="description"] {
49
- color: var(--helix-color-foreground-muted);
50
- display: block;
51
- font-size: var(--helix-text-xs);
52
- grid-column: 3;
53
- grid-row: 2;
54
- }
55
-
56
- slot:not([name])::slotted(*),
57
- slot[name="description"]::slotted(*) {
58
- margin: var(--helix-space-none);
59
- }
60
-
61
- slot[name="end"]::slotted(*) {
62
- grid-column: 4;
63
- grid-row: 1 / span 2;
64
- }
65
-
66
- [part="link"] {
67
- align-items: center;
68
- color: inherit;
69
- display: grid;
70
- grid-column: 1 / 4;
71
- grid-row: 1 / span 2;
72
- grid-template-columns: subgrid;
73
- grid-template-rows: subgrid;
74
- text-decoration: none;
75
- }
76
-
77
- [part~="row-current"] {
78
- background-color: var(--list-item-current-background-color, var(--helix-color-well));
79
- border-radius: var(--helix-radii-sm);
80
- }
81
-
82
- [part~="row"]:focus-visible {
83
- border-radius: var(--helix-radii-sm);
84
- outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
85
- outline-offset: calc(var(--helix-size-focus-offset) * -1);
86
- }
87
-
88
- :host(:state(selected)) [part~="row"] {
89
- background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));
90
- border-radius: var(--helix-radii-sm);
91
- }
92
-
93
- :host([disabled]) {
94
- opacity: var(--list-item-disabled-opacity, 0.5);
95
- }`);
2
+ export const styles = createSheet(`:host {display: block;}[part~="row"] {align-items: center;display: grid;grid-template-columns: auto auto 1fr auto;padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));}[part="rail"] {align-self: start;color: var(--helix-color-foreground-muted);display: var(--list-item-rail-display, none);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);grid-column: 1;grid-row: 1;letter-spacing: var(--helix-tracking-wide);line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));}[part="rail"]::before {content: var(--list-item-rail-content, "");}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-muted);grid-column: 2;margin-inline-end: var(--helix-space-sm);grid-row: 1 / span 2;}slot:not([name]) {color: var(--helix-color-foreground);display: block;font-size: var(--helix-text-sm);font-weight: var(--list-item-term-weight, var(--helix-weight-regular));grid-column: 3;grid-row: 1;}slot[name="description"] {color: var(--helix-color-foreground-muted);display: block;font-size: var(--helix-text-xs);grid-column: 3;grid-row: 2;}slot:not([name])::slotted(*),
3
+ slot[name="description"]::slotted(*) {margin: var(--helix-space-none);}slot[name="end"]::slotted(*) {grid-column: 4;grid-row: 1 / span 2;}[part="link"] {align-items: center;color: inherit;display: grid;grid-column: 1 / 4;grid-row: 1 / span 2;grid-template-columns: subgrid;grid-template-rows: subgrid;text-decoration: none;}[part~="row-current"] {background-color: var(--list-item-current-background-color, var(--helix-color-well));border-radius: var(--helix-radii-sm);}[part~="row"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(selected)) [part~="row"] {background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));border-radius: var(--helix-radii-sm);}:host([disabled]) {opacity: var(--list-item-disabled-opacity, 0.5);}`);
@@ -1,89 +1,5 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {
3
- display: flex;
4
- flex-direction: column;
5
- gap: var(--list-gap, var(--helix-space-none));
6
- }
7
-
8
- :host([divided]) ::slotted(*:not(:first-child)) {
9
- border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
10
- }
11
-
12
- :host([kind="ordered"]),
13
- :host([kind="unordered"]) {
14
-
15
- contain: style;
16
-
17
- padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));
18
- }
19
-
20
- :host([kind="ordered"]) ::slotted(*),
21
- :host([kind="unordered"]) ::slotted(*) {
22
- display: list-item;
23
- list-style-position: outside;
24
- }
25
-
26
- :host([kind="ordered"]) ::slotted(*) {
27
- list-style-type: decimal;
28
- }
29
-
30
- :host([kind="ordered"][type="a"]) ::slotted(*) {
31
- list-style-type: lower-alpha;
32
- }
33
-
34
- :host([kind="ordered"][type="A"]) ::slotted(*) {
35
- list-style-type: upper-alpha;
36
- }
37
-
38
- :host([kind="ordered"][type="i"]) ::slotted(*) {
39
- list-style-type: lower-roman;
40
- }
41
-
42
- :host([kind="ordered"][type="I"]) ::slotted(*) {
43
- list-style-type: upper-roman;
44
- }
45
-
46
- :host([kind="unordered"]) ::slotted(*) {
47
- list-style-type: disc;
48
- }
49
-
50
- :host([kind="ordered"]) ::slotted(*) {
51
- counter-increment: list-item var(--list-step, 1);
52
- }
53
-
54
- :host([kind="ordered"]) ::slotted(:first-child) {
55
- counter-set: list-item var(--list-first);
56
- }
57
-
58
- :host([marker="rail"]) {
59
- counter-reset: list-rail;
60
-
61
- padding-inline-start: var(--helix-space-none);
62
- }
63
-
64
- :host([marker="rail"]) ::slotted(*) {
65
- --list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));
66
-
67
- --list-item-rail-display: block;
68
- counter-increment: list-rail var(--list-step, 1);
69
- }
70
-
71
- :host([marker="rail"]) ::slotted(:first-child) {
72
- counter-set: list-rail var(--list-first);
73
- }
74
-
75
- :host([kind="ordered"][marker="rail"]) ::slotted(*),
76
- :host([kind="unordered"][marker="rail"]) ::slotted(*) {
77
- display: block;
78
- list-style: none;
79
- }
80
-
81
- :host([kind="description"]) ::slotted(*) {
82
- --list-item-term-weight: var(--helix-weight-semibold);
83
- }
84
-
85
- @media print {
86
- :host {
87
- print-color-adjust: economy;
88
- }
89
- }`);
2
+ export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--list-gap, var(--helix-space-none));}:host([divided]) ::slotted(*:not(:first-child)) {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);}:host([kind="ordered"]),
3
+ :host([kind="unordered"]) {contain: style;padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));}:host([kind="ordered"]) ::slotted(*),
4
+ :host([kind="unordered"]) ::slotted(*) {display: list-item;list-style-position: outside;}:host([kind="ordered"]) ::slotted(*) {list-style-type: decimal;}:host([kind="ordered"][type="a"]) ::slotted(*) {list-style-type: lower-alpha;}:host([kind="ordered"][type="A"]) ::slotted(*) {list-style-type: upper-alpha;}:host([kind="ordered"][type="i"]) ::slotted(*) {list-style-type: lower-roman;}:host([kind="ordered"][type="I"]) ::slotted(*) {list-style-type: upper-roman;}:host([kind="unordered"]) ::slotted(*) {list-style-type: disc;}:host([kind="ordered"]) ::slotted(*) {counter-increment: list-item var(--list-step, 1);}:host([kind="ordered"]) ::slotted(:first-child) {counter-set: list-item var(--list-first);}:host([marker="rail"]) {counter-reset: list-rail;padding-inline-start: var(--helix-space-none);}:host([marker="rail"]) ::slotted(*) {--list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));--list-item-rail-display: block;counter-increment: list-rail var(--list-step, 1);}:host([marker="rail"]) ::slotted(:first-child) {counter-set: list-rail var(--list-first);}:host([kind="ordered"][marker="rail"]) ::slotted(*),
5
+ :host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}@media print {:host {print-color-adjust: economy;}}`);
@@ -1,112 +1,8 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {
3
- display: flex;
4
- flex-direction: column;
5
- gap: var(--helix-space-2xs);
6
- }
7
-
8
- [part="items"] {
9
-
10
- --option-radius: var(--helix-radii-none);
11
-
12
- background-color: var(--listbox-background-color, var(--helix-color-surface));
13
- border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));
14
- border-radius: var(--helix-radii-sm);
15
- display: flex;
16
- flex-direction: column;
17
- gap: var(--helix-space-none);
18
- max-block-size: var(--listbox-max-block-size, 14rem);
19
- overflow-y: auto;
20
-
21
- padding-block: var(--helix-space-2xs);
22
- padding-inline: var(--helix-space-none);
23
- }
24
-
25
- [part="items"]:focus-visible {
26
- border-color: var(--helix-color-primary);
27
- outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
28
- outline-offset: 0;
29
- }
30
-
31
- :host(:state(invalid)) [part="items"],
32
- :host(:state(invalid)) [part="items"]:focus-visible {
33
- border-color: var(--helix-color-danger);
34
- outline-color: var(--helix-color-danger);
35
- }
36
-
37
- :host(:disabled) {
38
- opacity: 0.5;
39
- }
40
-
41
- :host(:disabled) [part="items"] {
42
- cursor: not-allowed;
43
- }
44
-
45
- [part="empty"],
46
- [part="loading"] {
47
- --_collection-inset-block: var(--helix-space-xs);
48
- --_collection-inset-inline: var(--helix-space-xs);
49
- }
50
-
51
- [part="error"] {
52
- color: var(--listbox-error-color, var(--helix-color-danger));
53
- font-family: var(--helix-font-sans);
54
- font-size: var(--helix-text-sm);
55
- margin: var(--helix-space-none);
56
- padding: var(--helix-space-xs);
57
- text-align: center;
58
- }
59
-
60
- [part="filter-icon"] {
61
- align-items: center;
62
- color: var(--helix-color-foreground-subtle);
63
- display: inline-flex;
64
- flex: 0 0 auto;
65
- }
66
-
67
- [part="filter-icon"] svg,
68
- slot[name="filter-icon"]::slotted(*) {
69
- --icon-size: var(--helix-size-icon-tight);
70
-
71
- block-size: var(--helix-size-icon-tight);
72
- inline-size: var(--helix-size-icon-tight);
73
- }
74
-
75
- [part="search"] {
76
- align-items: center;
77
- border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
78
- display: flex;
79
- gap: var(--helix-space-2xs);
80
- padding: var(--helix-space-2xs);
81
- padding-inline-start: var(--helix-space-xs);
82
- }
83
-
84
- [part="search-field"] {
85
- appearance: none;
86
- flex: 1 1 auto;
87
- min-inline-size: 0;
88
- background-color: transparent;
89
- block-size: var(--helix-size-control-tight);
90
- border: none;
91
- box-sizing: border-box;
92
- color: var(--helix-color-foreground);
93
- font-family: var(--helix-font-sans);
94
- font-size: var(--helix-text-sm);
95
- font-weight: var(--helix-weight-medium);
96
- inline-size: 100%;
97
- padding-inline: var(--helix-space-xs);
98
- }
99
-
100
- [part="search-field"]:focus-visible {
101
- outline: none;
102
- }
103
-
104
- :host([loading]) [part="items"] {
105
- opacity: 0.5;
106
- }
107
-
108
- @media print {
109
- :host {
110
- print-color-adjust: exact;
111
- }
112
- }`);
2
+ export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);}:host([layout="grid"]) [part="items"] {display: grid;grid-template-columns: repeat(
3
+ auto-fill,
4
+ minmax(min(var(--listbox-column-min-inline-size, 8rem), 100%), 1fr)
5
+ );}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="items"],
6
+ :host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) {opacity: 0.5;}:host(:disabled) [part="items"] {cursor: not-allowed;}[part="empty"],
7
+ [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs);}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center;}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
8
+ slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs);}[part="search-field"]:focus-visible {outline: none;}:host([loading]) [part="items"] {opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);
@@ -19,10 +19,12 @@ import type { CSSResultGroup } from 'lit';
19
19
  *
20
20
  * @cssproperty --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
21
21
  * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
22
+ * @cssproperty --listbox-column-min-inline-size - How narrow a column may be with `layout="grid"`. As many columns as fit are drawn. Defaults to `8rem`.
22
23
  * @cssproperty --listbox-error-color - The color of the line shown while `load-error` is set.
23
24
  * @cssproperty --listbox-max-block-size - Maximum height of the list before it scrolls.
24
25
  */
25
26
  export declare class HelixListbox extends HelixHeadlessListbox {
27
+ static tier: string;
26
28
  static styles: CSSResultGroup;
27
29
  }
28
30
  declare global {
@@ -12,6 +12,7 @@ import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.c
12
12
  import { styles as liveStyles } from '../../shared/live/live.css.js';
13
13
  import { styles } from './listbox-root.css.js';
14
14
  let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
15
+ static { this.tier = 'helix-'; }
15
16
  static { this.styles = [
16
17
  liveStyles,
17
18
  collectionStateStyles,