@revolist/ui 4.0.2-rc → 4.0.2

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 (343) hide show
  1. package/LICENSE +21 -0
  2. package/MIGRATION.md +36 -0
  3. package/OWNERSHIP.md +32 -32
  4. package/README.md +405 -265
  5. package/_button.scss +6 -2
  6. package/_chunks/arrow-up-Cw8hW9vp.js +4 -0
  7. package/_chunks/calculator-CDWOuAcp.js +4 -0
  8. package/_chunks/{calendar-CpaUK7w1.js → calendar-CgXQgkga.js} +28 -18
  9. package/_chunks/chart-frame-hcOlnQ1K.js +145 -0
  10. package/_chunks/{chevron-right-sxHQMSkq.js → check-BwI7iCAm.js} +2 -2
  11. package/_chunks/{chevron-left-D0nc4Z5S.js → chevron-right-CM3ljziP.js} +2 -2
  12. package/_chunks/choice-chips-SkllS5Kl.js +126 -0
  13. package/_chunks/clock-BOhPNlW3.js +4 -0
  14. package/_chunks/{color-palette-BBMFmUNA.js → color-palette-DMJUChWC.js} +20 -22
  15. package/_chunks/{color-picker-D90Jg-M8.js → color-picker-BpCTuIdm.js} +77 -72
  16. package/_chunks/{component-YDcfoOLz.js → component-CfeHXgIw.js} +301 -282
  17. package/_chunks/{component-metadata-BENbgTjU.js → component-metadata-BKd7U8OW.js} +0 -12
  18. package/_chunks/configurator-actions-DnStE6Yl.js +155 -0
  19. package/_chunks/configurator-field-icon-CmcM_sPs.js +53 -0
  20. package/_chunks/control-Dcrjsunl.js +118 -0
  21. package/_chunks/{controls-DIum-E66.js → controls-B_6NJarZ.js} +217 -182
  22. package/_chunks/{date-control-BJSzu79z.js → date-control-C4h4m75W.js} +1 -1
  23. package/_chunks/{date-time-BxPJusp9.js → date-time-CTOSbzb0.js} +344 -307
  24. package/_chunks/{delete-button-Bblyah10.js → delete-button-CW9vjLnk.js} +6 -6
  25. package/_chunks/dialog.parts-3w5FR06n.js +131 -0
  26. package/_chunks/{duration-87U2EoMS.js → duration-Bf2OS1V5.js} +19 -18
  27. package/_chunks/editor-popup-ByU7qiub.js +82 -0
  28. package/_chunks/field-configurator-D5dZRhDe.js +288 -0
  29. package/_chunks/field-context-D57PnBbH.js +5 -0
  30. package/_chunks/{framework-mount-C-Zwm44H.js → framework-mount-Bk4O_T7T.js} +1 -1
  31. package/_chunks/icon-toolbar-DSjOdwM7.js +134 -0
  32. package/_chunks/magnifying-glass-CvrTDSkB.js +4 -0
  33. package/_chunks/minus-BOAR3A1C.js +4 -0
  34. package/_chunks/mount-BRdcG60g.js +267 -0
  35. package/_chunks/{native.view-ByyZ1CT5.js → native-Blr3byjO.js} +1 -1
  36. package/_chunks/native-control-B_fVA5bL.js +649 -0
  37. package/_chunks/{number-input-BeIadZuL.js → number-input-CmM6_2vR.js} +7 -7
  38. package/_chunks/{picker-DpP7iQLA.js → picker-DTqET-2W.js} +2 -2
  39. package/_chunks/plus-CbGRkIGl.js +4 -0
  40. package/_chunks/popover-controller-D-AvKQ7B.js +102 -0
  41. package/_chunks/popup-C35Isk7p.js +378 -0
  42. package/_chunks/{rating-choice-Ca8ZBty3.js → rating-choice-C-6wcb9U.js} +1 -1
  43. package/_chunks/render-m5eMMwFR.js +83 -0
  44. package/_chunks/{reorder-list-Cc3KmfAN.js → reorder-list-DIl1gkV6.js} +1 -1
  45. package/_chunks/request-trail-DrhdpWiH.js +762 -0
  46. package/_chunks/rich-text-BnilBbhU.js +842 -0
  47. package/_chunks/rotate-left-BF6G883o.js +4 -0
  48. package/_chunks/rotate-right-Iha5ScJ1.js +4 -0
  49. package/_chunks/selection-list-tooltips-C5oMJe26.js +42 -0
  50. package/_chunks/title-tooltip-Cw6LOZhb.js +11 -0
  51. package/_chunks/tooltip-D4xkio5G.js +54 -0
  52. package/_chunks/tooltip-owner-DjdvqKzz.js +19 -0
  53. package/_chunks/tooltip-session-B6X6x8G_.js +110 -0
  54. package/_chunks/tooltip-text-BXsUEmBH.js +12 -0
  55. package/_chunks/top-layer-popup-CNSDdfJV.js +59 -0
  56. package/_dialog.scss +55 -21
  57. package/_form.scss +71 -21
  58. package/_legend.scss +25 -7
  59. package/_shared/data-query/index.d.ts +2 -2
  60. package/_shared/data-query/load-options.d.ts +2 -2
  61. package/_variables.scss +34 -32
  62. package/_view-switcher.scss +6 -0
  63. package/activity-message.d.ts +1 -1
  64. package/ai/_chat.scss +227 -0
  65. package/ai/_style.scss +170 -39
  66. package/ai/chat.d.ts +65 -0
  67. package/ai/components.d.ts +34 -5
  68. package/ai/index.d.ts +3 -0
  69. package/ai/index.js +3 -3
  70. package/ai/mount.d.ts +59 -6
  71. package/ai/prompt-history.d.ts +13 -0
  72. package/ai/request-trail.d.ts +9 -3
  73. package/ai/results/_style.scss +83 -0
  74. package/ai/results/index.d.ts +11 -0
  75. package/ai/results/metrics.d.ts +5 -0
  76. package/ai/results/table.d.ts +5 -0
  77. package/ai/results/text.d.ts +5 -0
  78. package/ai/results/types.d.ts +29 -0
  79. package/ai/transcript.d.ts +27 -0
  80. package/ai/translations.d.ts +1 -1
  81. package/angular/angular.d.ts +1 -1
  82. package/angular/angular.js +13 -10
  83. package/assignee/assignee.scss +28 -6
  84. package/assignee/index.js +34 -35
  85. package/avatar/avatar.style.scss +23 -6
  86. package/avatar/index.d.ts +25 -2
  87. package/avatar/index.js +33 -32
  88. package/badge.d.ts +1 -1
  89. package/badge.view.d.ts +8 -0
  90. package/brush-range/_brush-range.scss +55 -49
  91. package/brush-range/component.d.ts +1 -3
  92. package/brush-range/component.js +27 -27
  93. package/buttons/delete-button.d.ts +2 -1
  94. package/buttons/delete-button.js +1 -1
  95. package/buttons/delete-button.style.scss +6 -2
  96. package/buttons/remove-button.d.ts +1 -1
  97. package/buttons/remove-button.js +1 -1
  98. package/buttons/remove-button.style.scss +1 -1
  99. package/buttons/svg-button.d.ts +2 -1
  100. package/buttons/svg-button.js +19 -19
  101. package/calendar/_calendar.scss +27 -26
  102. package/calendar/calendar.js +1 -1
  103. package/calendar/header.js +1 -2
  104. package/calendar/index.js +2 -2
  105. package/cell-input.scss +3 -7
  106. package/cell-visuals/badge.style.scss +6 -3
  107. package/cell-visuals/bar-chart.style.scss +2 -1
  108. package/cell-visuals/column-type.style.css +12 -0
  109. package/cell-visuals/progress-line-value.renderer.style.scss +4 -2
  110. package/cell-visuals/progress-line.style.scss +1 -4
  111. package/cell-visuals/sparkline.style.scss +2 -1
  112. package/cell-visuals/timeline.style.css +4 -2
  113. package/checkbox/checkbox.scss +6 -24
  114. package/choice-chips/index.d.ts +3 -1
  115. package/choice-chips/index.js +1 -1
  116. package/color-palette/color-palette.js +1 -1
  117. package/color-palette/color-palette.style.scss +88 -25
  118. package/color-palette/color-picker.js +2 -2
  119. package/color-palette/color-picker.style.scss +23 -10
  120. package/color-palette/common-palettes.d.ts +1 -1
  121. package/color-palette/common-palettes.js +1 -1
  122. package/color-palette/native.d.ts +15 -2
  123. package/component-catalog.d.ts +24 -11
  124. package/configurator-actions.d.ts +67 -0
  125. package/configurator-actions.js +1 -0
  126. package/configurator-aggregation-list.d.ts +14 -0
  127. package/configurator-aggregation-list.js +63 -0
  128. package/configurator-drop-zone.d.ts +39 -0
  129. package/configurator-drop-zone.js +66 -0
  130. package/configurator-field-icon.d.ts +10 -0
  131. package/configurator-field-icon.js +1 -0
  132. package/configurator-focus.d.ts +4 -0
  133. package/configurator-focus.js +39 -0
  134. package/configurator-sections.d.ts +42 -0
  135. package/configurator-sections.js +71 -0
  136. package/control-attributes.js +7 -7
  137. package/control-presentation.d.ts +8 -2
  138. package/control-presentation.js +25 -20
  139. package/controls.d.ts +19 -7
  140. package/controls.js +4 -3
  141. package/core/editor-popup-position.d.ts +6 -2
  142. package/core/editor-popup.d.ts +4 -0
  143. package/core/editor-popup.js +1 -1
  144. package/core/popover-controller.d.ts +35 -0
  145. package/core/popup-ownership.d.ts +2 -0
  146. package/core/selection-list-tooltips.d.ts +2 -0
  147. package/core/title-tooltip.d.ts +2 -0
  148. package/core/tooltip-session.d.ts +29 -0
  149. package/core/tooltip-surface.d.ts +13 -0
  150. package/core/tooltip-text.d.ts +6 -0
  151. package/core/tooltip.d.ts +35 -0
  152. package/core/top-layer-popup.d.ts +4 -0
  153. package/core/top-layer-popup.js +1 -23
  154. package/date-time/attach.d.ts +1 -1
  155. package/date-time/date-control.d.ts +1 -1
  156. package/date-time/field.d.ts +3 -2
  157. package/date-time/index.js +1 -1
  158. package/date-time/style.scss +242 -39
  159. package/date-time/time-selection.d.ts +3 -1
  160. package/date-time/types.d.ts +5 -1
  161. package/dialog/dialog-action-footer.d.ts +17 -2
  162. package/dialog/dialog.dom.d.ts +15 -2
  163. package/dialog/dialog.dom.js +3 -3
  164. package/dialog/dialog.parts.d.ts +1 -1
  165. package/dialog/dialog.parts.js +1 -1
  166. package/distribution-chart/_distribution-chart.scss +113 -77
  167. package/distribution-chart/area-chart.js +1 -1
  168. package/distribution-chart/bar-chart.d.ts +5 -2
  169. package/distribution-chart/bar-chart.js +7 -3
  170. package/distribution-chart/chart-frame.d.ts +2 -1
  171. package/distribution-chart/index.d.ts +1 -1
  172. package/distribution-chart/line-chart.js +1 -1
  173. package/dropdown/content.d.ts +2 -1
  174. package/dropdown/content.js +1 -142
  175. package/dropdown/control.d.ts +14 -0
  176. package/dropdown/control.js +1 -0
  177. package/dropdown/control.view.d.ts +6 -0
  178. package/dropdown/dropdown.types.d.ts +5 -1
  179. package/dropdown/editor-dropdown.style.scss +54 -16
  180. package/dropdown/index.d.ts +1 -1
  181. package/dropdown/index.js +3 -4
  182. package/dropdown/lookup-field.d.ts +5 -0
  183. package/dropdown/lookup-field.js +2 -1
  184. package/dropdown/popup.d.ts +2 -2
  185. package/dropdown/popup.js +1 -141
  186. package/duration/index.js +1 -1
  187. package/duration/style.scss +1 -1
  188. package/editor-actions.js +1 -1
  189. package/editor-layout/index.d.ts +4 -4
  190. package/editor-layout/index.js +39 -34
  191. package/editor-layout/style.scss +82 -18
  192. package/field-configurator.d.ts +39 -1
  193. package/field-configurator.js +4 -170
  194. package/field-expansion.d.ts +9 -0
  195. package/fieldset.d.ts +3 -0
  196. package/filter/filters/slider/_single-slider.scss +57 -38
  197. package/filter/filters/slider/_slider.scss +41 -33
  198. package/filter/filters/slider/control.js +2 -0
  199. package/filter/filters/slider/runtime.js +49 -22
  200. package/filter/filters/slider/single.js +1 -1
  201. package/filter-badge.js +1 -1
  202. package/filter-controls.d.ts +0 -1
  203. package/filter-controls.js +9 -10
  204. package/form-controls/field-context.d.ts +5 -0
  205. package/form-controls/index.d.ts +10 -2
  206. package/form-controls/index.js +4 -9
  207. package/form-controls/presentation.d.ts +1 -1
  208. package/form-controls/presentation.js +53 -45
  209. package/formatting/index.d.ts +1 -1
  210. package/formatting/index.js +40 -35
  211. package/formatting/styles.scss +14 -57
  212. package/framework.js +237 -226
  213. package/history-controls.d.ts +14 -0
  214. package/history-controls.js +27 -0
  215. package/icon-toolbar.d.ts +62 -0
  216. package/icon-toolbar.js +1 -0
  217. package/icons/icon.d.ts +1 -1
  218. package/legend.d.ts +1 -1
  219. package/masked-input/index.js +1 -1
  220. package/native-control.d.ts +6 -5
  221. package/native-control.js +3 -26
  222. package/native-controls.d.ts +54 -2
  223. package/native-styles.css +1 -1
  224. package/native-styles.scss +6 -2
  225. package/native.d.ts +3 -3
  226. package/native.js +41 -37
  227. package/number-input/index.d.ts +1 -1
  228. package/number-input/index.js +1 -1
  229. package/package.json +88 -14
  230. package/pagination.d.ts +3 -0
  231. package/pagination.js +50 -40
  232. package/pdf-viewer/header.d.ts +1 -1
  233. package/pdf-viewer/index.d.ts +2 -2
  234. package/pdf-viewer/index.js +1 -1
  235. package/pdf-viewer/search-bar.d.ts +1 -1
  236. package/pdf-viewer/status.d.ts +1 -1
  237. package/pdf-viewer/style.scss +205 -45
  238. package/pickers.d.ts +5 -1
  239. package/preact-mount.js +1 -1
  240. package/preact.d.ts +15 -10
  241. package/preact.js +109 -64
  242. package/progress/_bar.scss +9 -3
  243. package/progress/_circular.scss +2 -1
  244. package/rating-choice.js +1 -1
  245. package/react-adapter.d.ts +4 -2
  246. package/react-control.d.ts +1 -0
  247. package/react.d.ts +20 -11
  248. package/react.js +72 -88
  249. package/reorder-list.d.ts +1 -1
  250. package/reorder-list.js +1 -1
  251. package/reorder-list.scss +59 -17
  252. package/resource-picker/resource-picker-popup.js +1 -1
  253. package/resource-picker/resource-picker.js +73 -71
  254. package/resource-picker/resource-picker.scss +66 -35
  255. package/rich-text/engine.d.ts +17 -19
  256. package/rich-text/format-html.d.ts +2 -0
  257. package/rich-text/index.d.ts +11 -7
  258. package/rich-text/index.js +1 -1
  259. package/rich-text/model.d.ts +6 -3
  260. package/rich-text/render-model.d.ts +4 -5
  261. package/rich-text/style.scss +295 -55
  262. package/rich-text/syntax.d.ts +5 -2
  263. package/rich-text/toolbar.d.ts +6 -6
  264. package/rich-text/translations.d.ts +5 -15
  265. package/search-input/index.js +1 -1
  266. package/search-input/native.d.ts +21 -2
  267. package/select.d.ts +22 -0
  268. package/select.js +1 -0
  269. package/selection-list.d.ts +1 -0
  270. package/selection-list.js +3 -1
  271. package/status-feedback/exit-snapshot.js +1 -1
  272. package/status-feedback/index.js +2 -2
  273. package/status-feedback/popover.js +9 -9
  274. package/status-feedback/render.js +3 -44
  275. package/status-feedback/status-feedback.scss +130 -34
  276. package/status-feedback/types.d.ts +4 -0
  277. package/status-feedback/use-auto-dismiss.d.ts +3 -0
  278. package/styles/_activity-message.scss +24 -7
  279. package/styles/_alert.scss +78 -17
  280. package/styles/_cell-editor-frame.scss +11 -0
  281. package/styles/_compositions.scss +404 -82
  282. package/styles/_control.scss +42 -12
  283. package/styles/_disclosure.scss +15 -5
  284. package/styles/_editor-counter.scss +16 -6
  285. package/styles/_editor-slider.scss +8 -4
  286. package/styles/_field-configurator.scss +321 -23
  287. package/styles/_fields-grid.scss +49 -0
  288. package/styles/_filter-controls.scss +10 -2
  289. package/styles/_icon-action.scss +48 -15
  290. package/styles/_loading.scss +12 -3
  291. package/styles/_motion.scss +32 -9
  292. package/styles/_palette.scss +0 -24
  293. package/styles/_primitives.scss +376 -116
  294. package/styles/_theme.scss +130 -86
  295. package/styles/_thresholds.scss +28 -25
  296. package/styles/_time-grid.scss +8 -3
  297. package/styles/_tokens.scss +6 -1
  298. package/styles/configurator-actions.scss +241 -0
  299. package/styles/pagination.css +213 -0
  300. package/styles/{legacy-rating.css → rating.css} +8 -3
  301. package/styles.css +1 -1
  302. package/styles.scss +3 -5
  303. package/surfaces.d.ts +38 -2
  304. package/surfaces.js +37 -134
  305. package/svelte/UiComponent.server.js +1 -48
  306. package/svelte/UiComponent.svelte +44 -32
  307. package/svelte.d.ts +1 -1
  308. package/svelte.js +33 -68
  309. package/switch/index.js +15 -14
  310. package/time-grid.d.ts +0 -1
  311. package/time-grid.js +38 -37
  312. package/timeline-track/_style.scss +96 -24
  313. package/timeline-track/component.d.ts +5 -1
  314. package/timeline-track/index.js +71 -54
  315. package/timeline-track/model.d.ts +9 -0
  316. package/timeline-track/model.js +10 -1
  317. package/ui.css +1 -1
  318. package/view-switcher.d.ts +23 -0
  319. package/vue.d.ts +51 -35
  320. package/vue.js +149 -178
  321. package/_chunks/chart-frame-BC99KjGa.js +0 -127
  322. package/_chunks/choice-chips-Cs4D-3nH.js +0 -110
  323. package/_chunks/compat.module-DDB2pm9O.js +0 -229
  324. package/_chunks/control-tooltip-ztgmsG7H.js +0 -100
  325. package/_chunks/dialog.parts-DBqo3Qwb.js +0 -134
  326. package/_chunks/dropdown-voWqmwAe.js +0 -357
  327. package/_chunks/editor-popup-D3JdS8l3.js +0 -81
  328. package/_chunks/mount-DZe_6VtR.js +0 -90
  329. package/_chunks/request-trail-IdNiFvKH.js +0 -347
  330. package/_chunks/rich-text-BzI1DyfF.js +0 -477
  331. package/avatar/index.view.d.ts +0 -25
  332. package/color-palette/native.view.d.ts +0 -15
  333. package/control-presentation.view.d.ts +0 -8
  334. package/dialog/dialog-action-footer.view.d.ts +0 -20
  335. package/dialog/dialog.dom.view.d.ts +0 -15
  336. package/form-controls/index.view.d.ts +0 -12
  337. package/formatting/control-tooltip.d.ts +0 -27
  338. package/native-controls.view.d.ts +0 -54
  339. package/react-native-select.d.ts +0 -6
  340. package/search-input/native.view.d.ts +0 -21
  341. package/styles/legacy-pagination.css +0 -112
  342. package/surfaces.view.d.ts +0 -63
  343. package/vue-native-select.d.ts +0 -9
@@ -22,7 +22,7 @@
22
22
  flex-wrap: wrap;
23
23
  gap: 8px;
24
24
  }
25
- &__modes > select {
25
+ &__modes > .dropdown-container {
26
26
  flex: 1 1 100px;
27
27
  min-width: 0;
28
28
  width: auto;
package/editor-actions.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { i as e } from "./_chunks/preact.module-BBM36DnO.js";
2
2
  import { t } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
3
- import { n } from "./_chunks/controls-DIum-E66.js";
3
+ import { t as n } from "./_chunks/controls-B_6NJarZ.js";
4
4
  //#region src/editor-actions.tsx
5
5
  var r = {
6
6
  apply: "Apply",
@@ -5,7 +5,7 @@ type ShellProps = {
5
5
  };
6
6
  /** Shared editor geometry. Consumers supply column widths and feature policy. */
7
7
  export declare function EditorSplitLayout({ children, className }: ShellProps): h.JSX.Element;
8
- export declare function EditorPane({ children, className, scrollable }: ShellProps & {
8
+ export declare function EditorPane({ children, className, scrollable, }: ShellProps & {
9
9
  readonly scrollable?: boolean;
10
10
  }): h.JSX.Element;
11
11
  export interface EditorListProps extends ShellProps {
@@ -18,7 +18,7 @@ export interface EditorListProps extends ShellProps {
18
18
  readonly spacing?: 'default' | 'comfortable';
19
19
  }
20
20
  /** Single-selection listbox with one keyboard/focus owner across editors. */
21
- export declare function EditorList({ children, className, label, onSelect, listRef, variant, spacing }: EditorListProps): h.JSX.Element;
21
+ export declare function EditorList({ children, className, label, onSelect, listRef, variant, spacing, }: EditorListProps): h.JSX.Element;
22
22
  export type EditorListItemProps = Omit<JSX.IntrinsicElements['button'], 'value' | 'className'> & {
23
23
  readonly value: string;
24
24
  readonly selected: boolean;
@@ -41,8 +41,8 @@ export interface EditorListItemContentProps {
41
41
  };
42
42
  }
43
43
  /** Reusable row presentation; the enclosing list item owns selection and focus. */
44
- export declare function EditorListItemContent({ icon, label, description, classNames }: EditorListItemContentProps): h.JSX.Element;
45
- export declare function EditorListGroup({ label, children, className, labelClassName }: ShellProps & {
44
+ export declare function EditorListItemContent({ icon, label, description, classNames, }: EditorListItemContentProps): h.JSX.Element;
45
+ export declare function EditorListGroup({ label, children, className, labelClassName, }: ShellProps & {
46
46
  readonly label: string;
47
47
  readonly labelClassName?: string;
48
48
  }): h.JSX.Element;
@@ -1,23 +1,28 @@
1
- import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
1
+ import { o as e } from "../_chunks/hooks.module-CG3gN83z.js";
2
+ import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
3
+ import { t as n } from "../_chunks/selection-list-tooltips-C5oMJe26.js";
2
4
  //#region src/editor-layout/index.tsx
3
- function t({ children: t, className: n = "" }) {
4
- return /* @__PURE__ */ e("div", {
5
+ function r({ children: e, className: n = "" }) {
6
+ return /* @__PURE__ */ t("div", {
5
7
  class: `rv-editor-split ${n}`,
6
- children: t
8
+ children: e
7
9
  });
8
10
  }
9
- function n({ children: t, className: n = "", scrollable: r = !1 }) {
10
- return /* @__PURE__ */ e("section", {
11
+ function i({ children: e, className: n = "", scrollable: r = !1 }) {
12
+ return /* @__PURE__ */ t("section", {
11
13
  class: `rv-editor-pane${r ? " rv-editor-pane--scrollable" : ""} ${n}`,
12
- children: t
14
+ children: e
13
15
  });
14
16
  }
15
- function r({ children: t, className: n = "", label: r, onSelect: i, listRef: a, variant: o = "default", spacing: s = "default" }) {
16
- return /* @__PURE__ */ e("div", {
17
- ref: a,
18
- class: `rv-editor-list${o === "plain" ? " rv-editor-list--plain" : ""}${s === "comfortable" ? " rv-editor-list--comfortable" : ""} ${n}`,
17
+ function a({ children: r, className: i = "", label: a, onSelect: o, listRef: s, variant: c = "default", spacing: l = "default" }) {
18
+ let u = n(), d = e((e) => {
19
+ u(e), typeof s == "function" ? s(e) : s && (s.current = e);
20
+ }, [u, s]);
21
+ return /* @__PURE__ */ t("div", {
22
+ ref: d,
23
+ class: `rv-editor-list${c === "plain" ? " rv-editor-list--plain" : ""}${l === "comfortable" ? " rv-editor-list--comfortable" : ""} ${i}`,
19
24
  role: "listbox",
20
- "aria-label": r,
25
+ "aria-label": a,
21
26
  onKeyDown: (e) => {
22
27
  if (![
23
28
  "ArrowDown",
@@ -28,57 +33,57 @@ function r({ children: t, className: n = "", label: r, onSelect: i, listRef: a,
28
33
  let t = Array.from(e.currentTarget.querySelectorAll("[data-editor-value]:not(:disabled)"));
29
34
  if (!t.length) return;
30
35
  let n = Math.max(0, t.indexOf(e.target)), r = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length;
31
- e.preventDefault(), t[r].focus(), i(t[r].dataset.editorValue);
36
+ e.preventDefault(), t[r].focus(), o(t[r].dataset.editorValue);
32
37
  },
33
- children: t
38
+ children: r
34
39
  });
35
40
  }
36
- function i({ value: t, selected: n, icon: r, label: i, description: o, contentClassNames: s, children: c, className: l = "", ...u }) {
37
- return /* @__PURE__ */ e("button", {
41
+ function o({ value: e, selected: n, icon: r, label: i, description: a, contentClassNames: o, children: c, className: l = "", ...u }) {
42
+ return /* @__PURE__ */ t("button", {
38
43
  ...u,
39
44
  type: "button",
40
45
  role: "option",
41
- "data-editor-value": t,
46
+ "data-editor-value": e,
42
47
  "aria-selected": n,
43
48
  tabIndex: u.tabIndex ?? (n ? 0 : -1),
44
49
  class: `rv-editor-list__item${n ? " rv-editor-list__item--selected" : ""} ${l}`,
45
- children: i === void 0 ? c : /* @__PURE__ */ e(a, {
50
+ children: i === void 0 ? c : /* @__PURE__ */ t(s, {
46
51
  icon: r,
47
52
  label: i,
48
- description: o,
49
- classNames: s
53
+ description: a,
54
+ classNames: o
50
55
  })
51
56
  });
52
57
  }
53
- function a({ icon: t, label: n, description: r, classNames: i = {} }) {
54
- return /* @__PURE__ */ e("span", {
55
- class: `rv-editor-list__content${t ? "" : " rv-editor-list__content--text"}`,
56
- children: [t && /* @__PURE__ */ e("span", {
58
+ function s({ icon: e, label: n, description: r, classNames: i = {} }) {
59
+ return /* @__PURE__ */ t("span", {
60
+ class: `rv-editor-list__content${e ? "" : " rv-editor-list__content--text"}`,
61
+ children: [e && /* @__PURE__ */ t("span", {
57
62
  class: `rv-editor-list__icon ${i.icon ?? ""}`,
58
63
  "aria-hidden": "true",
59
- children: t
60
- }), /* @__PURE__ */ e("span", {
64
+ children: e
65
+ }), /* @__PURE__ */ t("span", {
61
66
  class: `rv-editor-list__copy ${i.copy ?? ""}`,
62
- children: [/* @__PURE__ */ e("span", {
67
+ children: [/* @__PURE__ */ t("span", {
63
68
  class: `rv-editor-list__label ${i.label ?? ""}`,
64
69
  children: n
65
- }), r !== void 0 && /* @__PURE__ */ e("span", {
70
+ }), r !== void 0 && /* @__PURE__ */ t("span", {
66
71
  class: `rv-editor-list__description ${i.description ?? ""}`,
67
72
  children: r
68
73
  })]
69
74
  })]
70
75
  });
71
76
  }
72
- function o({ label: t, children: n, className: r = "", labelClassName: i = "" }) {
73
- return /* @__PURE__ */ e("div", {
77
+ function c({ label: e, children: n, className: r = "", labelClassName: i = "" }) {
78
+ return /* @__PURE__ */ t("div", {
74
79
  class: `rv-editor-list__group ${r}`,
75
80
  role: "group",
76
- "aria-label": t,
77
- children: [/* @__PURE__ */ e("div", {
81
+ "aria-label": e,
82
+ children: [/* @__PURE__ */ t("div", {
78
83
  class: `rv-editor-list__group-label ${i}`,
79
- children: t
84
+ children: e
80
85
  }), n]
81
86
  });
82
87
  }
83
88
  //#endregion
84
- export { r as EditorList, o as EditorListGroup, i as EditorListItem, a as EditorListItemContent, n as EditorPane, t as EditorSplitLayout };
89
+ export { a as EditorList, c as EditorListGroup, o as EditorListItem, s as EditorListItemContent, i as EditorPane, r as EditorSplitLayout };
@@ -2,7 +2,10 @@
2
2
 
3
3
  .rv-editor-split {
4
4
  display: grid;
5
- grid-template-columns: var(--rv-editor-columns, minmax(0, 1fr) minmax(0, 1fr));
5
+ grid-template-columns: var(
6
+ --rv-editor-columns,
7
+ minmax(0, 1fr) minmax(0, 1fr)
8
+ );
6
9
  gap: var(--rv-editor-gap, 12px);
7
10
  min-width: 0;
8
11
  min-height: 0;
@@ -11,7 +14,8 @@
11
14
  min-width: 0;
12
15
  min-height: 0;
13
16
  overflow: hidden;
14
- border: 1px solid var(--rv-editor-divider, var(--rv-dialog-border, var(--rv-ui-border)));
17
+ border: 1px solid
18
+ var(--rv-editor-divider, var(--rv-dialog-border, var(--rv-ui-border)));
15
19
  border-radius: var(--rv-editor-radius, 10px);
16
20
  background: var(--rv-dialog-bg, var(--rv-ui-surface));
17
21
  }
@@ -61,24 +65,84 @@
61
65
  }
62
66
  .rv-editor-list__item {
63
67
  transition:
64
- background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
68
+ background-color var(--rv-ui-motion-fast, 120ms)
69
+ var(--rv-ui-motion-ease, ease-out),
65
70
  color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
66
71
  opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
67
72
  }
68
- .rv-editor-list__item:hover { background: var(--rv-ui-surface-hover); }
69
- .rv-editor-list__item.rv-editor-list__item--selected { background: var(--rv-ui-selected-bg); color: var(--rv-ui-selected-fg); }
70
- .rv-editor-list__item:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: -2px; }
71
- @media (forced-colors: active) { .rv-editor-list__item--selected { outline: 2px solid Highlight; } }
73
+ .rv-editor-list__item:hover {
74
+ background: var(--rv-ui-surface-hover);
75
+ }
76
+ .rv-editor-list__item.rv-editor-list__item--selected {
77
+ background: var(--rv-ui-selected-bg);
78
+ color: var(--rv-ui-selected-fg);
79
+ }
80
+ .rv-editor-list__item:focus-visible {
81
+ outline: 2px solid var(--rv-ui-accent);
82
+ outline-offset: -2px;
83
+ }
84
+ @media (forced-colors: active) {
85
+ .rv-editor-list__item--selected {
86
+ outline: 2px solid Highlight;
87
+ }
88
+ }
72
89
 
73
- .rv-editor-list__item:disabled { opacity: .55; cursor: not-allowed; }
90
+ .rv-editor-list__item:disabled {
91
+ opacity: 0.55;
92
+ cursor: not-allowed;
93
+ }
74
94
 
75
- .rv-editor-list__content { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; font-size: 12px; line-height: 1.4; grid-column: 1 / -1; min-width: 0; }
76
- .rv-editor-list__content--text { grid-template-columns: minmax(0, 1fr); }
77
- .rv-editor-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
78
- .rv-editor-list__icon svg { display: block; width: 13px; height: 13px; fill: currentColor; }
79
- .rv-editor-list__copy { display: grid; min-width: 0; gap: 0; }
80
- .rv-editor-list__label, .rv-editor-list__description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
81
- .rv-editor-list__label { font-weight: var(--rv-editor-list-font-weight, 500); }
82
- .rv-editor-list__description { font-size: 11px; color: var(--rv-ui-text-muted); }
83
- .rv-editor-list__group { display: grid; gap: 2px; }
84
- .rv-editor-list__group-label { font-weight: var(--rv-editor-list-font-weight, inherit); padding: 8px 8px 4px; font-size: 11px; color: var(--rv-ui-text-muted); }
95
+ .rv-editor-list__content {
96
+ display: grid;
97
+ grid-template-columns: 20px minmax(0, 1fr);
98
+ align-items: center;
99
+ gap: 9px;
100
+ font-size: 12px;
101
+ line-height: 1.4;
102
+ grid-column: 1 / -1;
103
+ min-width: 0;
104
+ }
105
+ .rv-editor-list__content--text {
106
+ grid-template-columns: minmax(0, 1fr);
107
+ }
108
+ .rv-editor-list__icon {
109
+ display: inline-flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ width: 16px;
113
+ height: 16px;
114
+ }
115
+ .rv-editor-list__icon svg {
116
+ display: block;
117
+ width: 13px;
118
+ height: 13px;
119
+ fill: currentColor;
120
+ }
121
+ .rv-editor-list__copy {
122
+ display: grid;
123
+ min-width: 0;
124
+ gap: 0;
125
+ }
126
+ .rv-editor-list__label,
127
+ .rv-editor-list__description {
128
+ overflow: hidden;
129
+ text-overflow: ellipsis;
130
+ white-space: nowrap;
131
+ }
132
+ .rv-editor-list__label {
133
+ font-weight: var(--rv-editor-list-font-weight, 500);
134
+ }
135
+ .rv-editor-list__description {
136
+ font-size: 11px;
137
+ color: var(--rv-ui-text-muted);
138
+ }
139
+ .rv-editor-list__group {
140
+ display: grid;
141
+ gap: 2px;
142
+ }
143
+ .rv-editor-list__group-label {
144
+ font-weight: var(--rv-editor-list-font-weight, inherit);
145
+ padding: 8px 8px 4px;
146
+ font-size: 11px;
147
+ color: var(--rv-ui-text-muted);
148
+ }
@@ -8,8 +8,9 @@ export declare function FieldSummary({ children, className, ...attributes }: Omi
8
8
  children: ComponentChildren;
9
9
  className?: string;
10
10
  }): h.JSX.Element;
11
- export declare function FieldLibrary({ title, count, children, className, }: {
11
+ export declare function FieldLibrary({ title, id, count, children, className, }: {
12
12
  title: string;
13
+ id?: string;
13
14
  count?: ComponentChildren;
14
15
  children: ComponentChildren;
15
16
  className?: string;
@@ -74,16 +75,53 @@ export declare function FieldDropIndicator({ position, index, className, }: {
74
75
  className?: string;
75
76
  }): h.JSX.Element;
76
77
  export interface CollapsibleSectionProps {
78
+ /** Heading displayed in the keyboard-accessible expand/collapse trigger. */
77
79
  title: ComponentChildren;
80
+ /** Supporting text displayed above the expanded content. */
78
81
  description?: ComponentChildren;
82
+ /** Expand initially. Later toggles are owned by the native disclosure. */
79
83
  defaultOpen?: boolean;
84
+ /** Section content; stays mounted when collapsed to preserve drafts. */
80
85
  children: ComponentChildren;
86
+ /** Additional CSS classes on the outer disclosure. */
81
87
  className?: string;
88
+ /** Additional CSS classes on the summary trigger. */
82
89
  summaryClassName?: string;
90
+ /** Additional CSS classes on the content container. */
83
91
  contentClassName?: string;
92
+ /** Additional CSS classes on the supporting description. */
84
93
  descriptionClassName?: string;
85
94
  /** Host policies can wrap the native details without owning its presentation. */
86
95
  renderRoot?: (props: JSX.IntrinsicElements['details']) => ComponentChildren;
87
96
  }
88
97
  /** Native disclosure; collapsed content stays mounted to preserve draft edits. */
89
98
  export declare function CollapsibleSection({ title, description, defaultOpen, children, className, summaryClassName, contentClassName, descriptionClassName, renderRoot, }: CollapsibleSectionProps): ComponentChildren;
99
+ export interface ConfiguratorCompactItem {
100
+ id: string;
101
+ label: string;
102
+ icon?: string;
103
+ count?: number;
104
+ disabled?: boolean;
105
+ /** Optional section to focus after opening. */
106
+ targetId?: string;
107
+ /** Activate the corresponding product tab when reopening. */
108
+ onOpen?: () => void;
109
+ }
110
+ export interface ConfiguratorMiniModeConfig {
111
+ /** Starts the configurator as a narrow rail. Users can expand and collapse it. */
112
+ miniMode?: boolean;
113
+ /** Enables width resizing. Shrinking below 200px collapses to the rail. */
114
+ resizable?: boolean;
115
+ }
116
+ /** Shared panel shell. Collapsing preserves mounted controls and their drafts. */
117
+ export declare function ConfiguratorPanel({ panelRef, standalone, children, compactItems, compact: compactProp, onExpand, miniMode, resizable, resizeParent, ...props }: Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> & ConfiguratorMiniModeConfig & {
118
+ panelRef?: import('./_vendor/preact/src/index').Ref<HTMLDivElement>;
119
+ standalone?: boolean;
120
+ compactItems?: readonly ConfiguratorCompactItem[];
121
+ /** Presentation state is owned by the host; the panel adds no toggle button. */
122
+ compact?: boolean;
123
+ onExpand?: () => void;
124
+ /** Apply the resized width to the product-owned parent as well. */
125
+ resizeParent?: boolean;
126
+ }): h.JSX.Element;
127
+ export { createFieldExpansion, fieldExpansionIds, recordFieldExpansion, type FieldExpansionState, } from './field-expansion';
@@ -1,170 +1,4 @@
1
- import { c as e } from "./_chunks/preact.module-BBM36DnO.js";
2
- import { t } from "./_chunks/hooks.module-CG3gN83z.js";
3
- import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
4
- import { SvgIcon as r } from "./icons/icon.js";
5
- import { t as i } from "./_chunks/chevron-right-sxHQMSkq.js";
6
- import { n as a } from "./_chunks/delete-button-Bblyah10.js";
7
- import { RemoveButton as o } from "./buttons/remove-button.js";
8
- import { DisclosureSummary as s } from "./form-controls/presentation.js";
9
- import { fieldDropIndex as c, reorderFields as l } from "./field-reorder.js";
10
- import { useFieldDropTarget as u, useFieldReorder as d } from "./field-reorder.hook.js";
11
- //#region src/field-configurator.tsx
12
- function f({ svg: e, className: t = "" }) {
13
- return /* @__PURE__ */ n(r, {
14
- svg: e,
15
- className: `rv-configurator-icon ${t}`
16
- });
17
- }
18
- function p({ children: e, className: t = "", ...r }) {
19
- return /* @__PURE__ */ n(s, {
20
- ...r,
21
- className: `rv-configurator-summary ${t}`,
22
- iconPosition: "after",
23
- icon: /* @__PURE__ */ n(f, { svg: i }),
24
- children: e
25
- });
26
- }
27
- function m({ title: e, count: t, children: r, className: i = "" }) {
28
- return /* @__PURE__ */ n("details", {
29
- class: `rv-configurator-available-fields ${i}`,
30
- open: !0,
31
- children: [/* @__PURE__ */ n(p, { children: [e, t != null && /* @__PURE__ */ n("span", {
32
- class: "rv-configurator-field-count",
33
- children: t
34
- })] }), /* @__PURE__ */ n("div", {
35
- class: "rv-configurator-library-content",
36
- children: r
37
- })]
38
- });
39
- }
40
- function h({ children: e, actions: t, className: r = "" }) {
41
- return /* @__PURE__ */ n("div", {
42
- class: `rv-configurator-zone-heading ${r}`,
43
- children: [/* @__PURE__ */ n("span", {
44
- class: "rv-configurator-zone-label",
45
- children: e
46
- }), t && /* @__PURE__ */ n("span", {
47
- class: "rv-configurator-zone-actions",
48
- children: t
49
- })]
50
- });
51
- }
52
- function g({ heading: e, actions: t, headingClassName: r, className: i = "", children: a, ...o }) {
53
- return /* @__PURE__ */ n("section", {
54
- ...o,
55
- className: `rv-configurator-zone ${i}`,
56
- children: [/* @__PURE__ */ n(h, {
57
- className: r,
58
- actions: t,
59
- children: e
60
- }), a]
61
- });
62
- }
63
- function _({ empty: e, placeholder: t, className: r = "", children: i, ...a }) {
64
- return /* @__PURE__ */ n("ul", {
65
- ...a,
66
- className: `rv-configurator-field-list ${e ? "empty" : ""} ${r}`,
67
- children: e ? /* @__PURE__ */ n("li", {
68
- className: "rv-configurator-empty-zone empty",
69
- children: t
70
- }) : i
71
- });
72
- }
73
- function v({ className: e = "", children: t, indicator: r, dropPosition: i, ...a }) {
74
- return /* @__PURE__ */ n("li", {
75
- ...a,
76
- className: `rv-configurator-field rv-configurator-field-row ${e}`,
77
- children: [
78
- r ?? (i && /* @__PURE__ */ n(D, { position: i })),
79
- /* @__PURE__ */ n("span", {
80
- className: "rv-configurator-drag-handle",
81
- "aria-hidden": "true"
82
- }),
83
- t
84
- ]
85
- });
86
- }
87
- function y({ icon: e, children: t, className: r = "" }) {
88
- return /* @__PURE__ */ n("span", {
89
- class: `rv-configurator-field-content ${r}`,
90
- children: [e, /* @__PURE__ */ n("span", {
91
- class: "rv-configurator-field-caption",
92
- children: t
93
- })]
94
- });
95
- }
96
- function b({ as: t = "div", children: n, className: r = "", ...i }) {
97
- return e(t, {
98
- ...i,
99
- class: `rv-configurator-field ${r}`
100
- }, n);
101
- }
102
- function x({ children: e, ...t }) {
103
- return /* @__PURE__ */ n("div", {
104
- ...t,
105
- className: `rv-configurator-library-list ${t.className ?? ""}`,
106
- children: e
107
- });
108
- }
109
- function S({ label: e, icon: t, actions: r, contentClassName: i, ...a }) {
110
- return /* @__PURE__ */ n(v, {
111
- ...a,
112
- children: [/* @__PURE__ */ n(y, {
113
- className: i,
114
- icon: t,
115
- children: e
116
- }), r]
117
- });
118
- }
119
- function C({ children: e, className: t = "", ...r }) {
120
- return /* @__PURE__ */ n("div", {
121
- ...r,
122
- className: `rv-configurator-field-actions ${t}`,
123
- children: e
124
- });
125
- }
126
- function w({ children: e, active: t = !1, label: r, className: i = "" }) {
127
- return /* @__PURE__ */ n("span", {
128
- className: `rv-configurator-status-badge ${i}`,
129
- "data-active": t ? "true" : void 0,
130
- title: r,
131
- "aria-label": r,
132
- children: e
133
- });
134
- }
135
- function T(e) {
136
- return /* @__PURE__ */ n(o, {
137
- ...e,
138
- className: `rv-configurator-remove-button ${e.className ?? ""}`
139
- });
140
- }
141
- function E() {
142
- return /* @__PURE__ */ n(r, { svg: a });
143
- }
144
- function D({ position: e, index: t, className: r = "" }) {
145
- return /* @__PURE__ */ n("span", {
146
- className: `rv-configurator-drop-indicator ${r}`,
147
- "data-position": e,
148
- "data-drop-index": t,
149
- "aria-hidden": "true"
150
- });
151
- }
152
- function O({ title: e, description: r, defaultOpen: i = !1, children: a, className: o = "", summaryClassName: s = "", contentClassName: c = "", descriptionClassName: l = "", renderRoot: u }) {
153
- let d = t(i), f = {
154
- class: `rv-collapsible-section rv-configurator-section ${o}`.trim(),
155
- open: d.current,
156
- children: [/* @__PURE__ */ n(p, {
157
- className: s,
158
- children: e
159
- }), /* @__PURE__ */ n("div", {
160
- class: `rv-collapsible-section__content ${c}`.trim(),
161
- children: [r && /* @__PURE__ */ n("p", {
162
- class: `rv-collapsible-section__description ${l}`.trim(),
163
- children: r
164
- }), a]
165
- })]
166
- };
167
- return u ? u(f) : /* @__PURE__ */ n("details", { ...f });
168
- }
169
- //#endregion
170
- export { O as CollapsibleSection, C as FieldActions, y as FieldContent, D as FieldDropIndicator, g as FieldGroup, h as FieldGroupHeading, f as FieldIcon, b as FieldItem, m as FieldLibrary, x as FieldLibraryList, _ as FieldList, T as FieldRemoveButton, E as FieldRemoveIcon, v as FieldRow, w as FieldStatusBadge, p as FieldSummary, S as SelectedField, c as fieldDropIndex, l as reorderFields, u as useFieldDropTarget, d as useFieldReorder };
1
+ import { _ as e, a as t, b as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v, x as y, y as b } from "./_chunks/field-configurator-D5dZRhDe.js";
2
+ import { fieldDropIndex as x, reorderFields as S } from "./field-reorder.js";
3
+ import { useFieldDropTarget as C, useFieldReorder as w } from "./field-reorder.hook.js";
4
+ export { g as CollapsibleSection, d as ConfiguratorPanel, m as FieldActions, c as FieldContent, t as FieldDropIndicator, f as FieldGroup, h as FieldGroupHeading, r as FieldIcon, l as FieldItem, _ as FieldLibrary, i as FieldLibraryList, a as FieldList, p as FieldRemoveButton, u as FieldRemoveIcon, s as FieldRow, o as FieldStatusBadge, e as FieldSummary, v as SelectedField, b as createFieldExpansion, x as fieldDropIndex, n as fieldExpansionIds, y as recordFieldExpansion, S as reorderFields, C as useFieldDropTarget, w as useFieldReorder };
@@ -0,0 +1,9 @@
1
+ /** Expansion overlay shared by nested field libraries; searching never overwrites it. */
2
+ export interface FieldExpansionState {
3
+ known: Set<string>;
4
+ expanded: Set<string>;
5
+ collapsed: Set<string>;
6
+ }
7
+ export declare function createFieldExpansion(): FieldExpansionState;
8
+ export declare function fieldExpansionIds(state: FieldExpansionState, ids: readonly string[], searching: boolean): Set<string>;
9
+ export declare function recordFieldExpansion(state: FieldExpansionState, expanded: Iterable<unknown>): void;
package/fieldset.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { JSX } from './_vendor/preact/src/index';
2
+ /** Carries native fieldset restrictions to custom selection controls. */
3
+ export declare function Fieldset(props: JSX.IntrinsicElements['fieldset']): JSX.Element;
@@ -1,45 +1,64 @@
1
1
  /** One scalar thumb/track presentation for native, Stencil and Preact consumers. */
2
2
  @mixin presentation {
3
- appearance: none;
4
- position: static;
5
- width: 100%;
6
- height: var(--slider-thumb-size, 20px);
7
- margin: 0;
8
- border: 0;
9
- border-radius: 0;
10
- background: linear-gradient(
3
+ appearance: none;
4
+ position: static;
5
+ width: 100%;
6
+ height: var(--slider-thumb-size, 20px);
7
+ margin: 0;
8
+ border: 0;
9
+ border-radius: 0;
10
+ background: linear-gradient(
11
11
  to right,
12
- var(--range-color, var(--rv-ui-accent)) 0 var(--rv-single-slider-value, 0%),
13
- var(--slider-color, var(--rv-ui-border)) var(--rv-single-slider-value, 0%) 100%
14
- ) center / 100% var(--slider-track-height, 4px) no-repeat;
15
- cursor: pointer;
16
- pointer-events: auto;
12
+ var(--range-color, var(--rv-ui-accent)) 0
13
+ var(--rv-single-slider-value, 0%),
14
+ var(--slider-color, var(--rv-ui-border)) var(--rv-single-slider-value, 0%)
15
+ 100%
16
+ )
17
+ center / 100% var(--slider-track-height, 4px) no-repeat;
18
+ cursor: pointer;
19
+ pointer-events: auto;
17
20
 
18
- &::-webkit-slider-thumb {
19
- appearance: none;
20
- box-sizing: border-box;
21
- width: var(--slider-thumb-size, 20px);
22
- height: var(--slider-thumb-size, 20px);
23
- border: 3px solid var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
24
- border-radius: 50%;
25
- background: var(--slider-thumb-bg, var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface)));
26
- box-shadow: 0 1px 3px var(--rv-ui-shadow);
27
- transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
28
- pointer-events: all;
29
- }
21
+ &::-webkit-slider-thumb {
22
+ appearance: none;
23
+ box-sizing: border-box;
24
+ width: var(--slider-thumb-size, 20px);
25
+ height: var(--slider-thumb-size, 20px);
26
+ border: 3px solid
27
+ var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
28
+ border-radius: 50%;
29
+ background: var(
30
+ --slider-thumb-bg,
31
+ var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface))
32
+ );
33
+ box-shadow: 0 1px 3px var(--rv-ui-shadow);
34
+ transition: box-shadow var(--rv-ui-motion-fast, 120ms)
35
+ var(--rv-ui-motion-ease, ease);
36
+ pointer-events: all;
37
+ }
30
38
 
31
- &::-moz-range-thumb {
32
- box-sizing: border-box;
33
- width: var(--slider-thumb-size, 20px);
34
- height: var(--slider-thumb-size, 20px);
35
- border: 3px solid var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
36
- border-radius: 50%;
37
- background: var(--slider-thumb-bg, var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface)));
38
- box-shadow: 0 1px 3px var(--rv-ui-shadow);
39
- transition: box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
40
- pointer-events: all;
41
- }
39
+ &::-moz-range-thumb {
40
+ box-sizing: border-box;
41
+ width: var(--slider-thumb-size, 20px);
42
+ height: var(--slider-thumb-size, 20px);
43
+ border: 3px solid
44
+ var(--slider-thumb-border, var(--range-color, var(--rv-ui-accent)));
45
+ border-radius: 50%;
46
+ background: var(
47
+ --slider-thumb-bg,
48
+ var(--revo-grid-filter-control-thumb-bg, var(--rv-ui-surface))
49
+ );
50
+ box-shadow: 0 1px 3px var(--rv-ui-shadow);
51
+ transition: box-shadow var(--rv-ui-motion-fast, 120ms)
52
+ var(--rv-ui-motion-ease, ease);
53
+ pointer-events: all;
54
+ }
42
55
 
43
- &:disabled { opacity: .55; cursor: not-allowed; }
44
- &:focus-visible { outline: 2px solid var(--range-color, var(--rv-ui-accent)); outline-offset: 2px; }
56
+ &:disabled {
57
+ opacity: 0.55;
58
+ cursor: not-allowed;
59
+ }
60
+ &:focus-visible {
61
+ outline: 2px solid var(--range-color, var(--rv-ui-accent));
62
+ outline-offset: 2px;
63
+ }
45
64
  }