@ecopages/radiant-ui 0.1.0-rc.7 → 0.1.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 (238) hide show
  1. package/README.md +11 -3
  2. package/dist/components/ui/alert/alert.d.ts +2 -4
  3. package/dist/components/ui/alert/alert.script.d.ts +25 -15
  4. package/dist/components/ui/autocomplete/autocomplete.css +1 -2
  5. package/dist/components/ui/autocomplete/autocomplete.d.ts +8 -3
  6. package/dist/components/ui/autocomplete/autocomplete.script.d.ts +29 -4
  7. package/dist/components/ui/avatar/avatar.css +10 -8
  8. package/dist/components/ui/avatar/avatar.d.ts +3 -1
  9. package/dist/components/ui/breadcrumb/breadcrumb.d.ts +11 -11
  10. package/dist/components/ui/breadcrumb/breadcrumb.script.d.ts +10 -10
  11. package/dist/components/ui/calendar/calendar.css +10 -5
  12. package/dist/components/ui/calendar/calendar.script.d.ts +24 -21
  13. package/dist/components/ui/calendar/index.js +1 -1
  14. package/dist/components/ui/calendar/index.js.map +3 -3
  15. package/dist/components/ui/carousel/carousel-autoplay.d.ts +22 -0
  16. package/dist/components/ui/carousel/carousel-swipe.d.ts +17 -0
  17. package/dist/components/ui/carousel/carousel-window.d.ts +63 -0
  18. package/dist/components/ui/carousel/carousel.css +71 -18
  19. package/dist/components/ui/carousel/carousel.d.ts +8 -4
  20. package/dist/components/ui/carousel/carousel.script.d.ts +73 -40
  21. package/dist/components/ui/carousel/index.js +1 -1
  22. package/dist/components/ui/carousel/index.js.map +4 -4
  23. package/dist/components/ui/checkbox/checkbox.d.ts +11 -0
  24. package/dist/components/ui/checkbox/checkbox.script.d.ts +31 -8
  25. package/dist/components/ui/checkbox/index.js +1 -1
  26. package/dist/components/ui/checkbox/index.js.map +4 -4
  27. package/dist/components/ui/checkbox-group/checkbox-group.d.ts +4 -2
  28. package/dist/components/ui/checkbox-group/checkbox-group.script.d.ts +39 -20
  29. package/dist/components/ui/checkbox-group/index.js +1 -1
  30. package/dist/components/ui/checkbox-group/index.js.map +4 -4
  31. package/dist/components/ui/combobox/combobox.css +9 -1
  32. package/dist/components/ui/combobox/combobox.d.ts +12 -4
  33. package/dist/components/ui/combobox/combobox.script.d.ts +74 -25
  34. package/dist/components/ui/combobox/index.d.ts +2 -2
  35. package/dist/components/ui/combobox/index.js +1 -1
  36. package/dist/components/ui/combobox/index.js.map +4 -4
  37. package/dist/components/ui/cycle-toggle/cycle-toggle.d.ts +6 -2
  38. package/dist/components/ui/cycle-toggle/cycle-toggle.script.d.ts +35 -4
  39. package/dist/components/ui/cycle-toggle/index.js +1 -1
  40. package/dist/components/ui/cycle-toggle/index.js.map +3 -3
  41. package/dist/components/ui/date-field/date-field.css +13 -17
  42. package/dist/components/ui/date-field/date-field.d.ts +10 -8
  43. package/dist/components/ui/date-field/date-field.script.d.ts +35 -52
  44. package/dist/components/ui/date-field/index.js +1 -1
  45. package/dist/components/ui/date-field/index.js.map +4 -4
  46. package/dist/components/ui/date-input/date-input-segment-dom.d.ts +24 -0
  47. package/dist/components/ui/date-input/date-input.css +50 -0
  48. package/dist/components/ui/date-input/date-input.d.ts +8 -0
  49. package/dist/components/ui/date-input/date-input.script.d.ts +137 -0
  50. package/dist/components/ui/date-input/index.d.ts +2 -0
  51. package/dist/components/ui/date-input/index.js +2 -0
  52. package/dist/components/ui/date-input/index.js.map +7 -0
  53. package/dist/components/ui/date-range-picker/date-range-picker.css +18 -19
  54. package/dist/components/ui/date-range-picker/date-range-picker.d.ts +11 -9
  55. package/dist/components/ui/date-range-picker/date-range-picker.script.d.ts +42 -51
  56. package/dist/components/ui/date-range-picker/index.js +1 -1
  57. package/dist/components/ui/date-range-picker/index.js.map +4 -4
  58. package/dist/components/ui/dialog/dialog.css +18 -14
  59. package/dist/components/ui/dialog/dialog.d.ts +6 -0
  60. package/dist/components/ui/dialog/dialog.script.d.ts +43 -10
  61. package/dist/components/ui/dialog/index.js +1 -1
  62. package/dist/components/ui/dialog/index.js.map +4 -4
  63. package/dist/components/ui/disclosure/disclosure-group.script.d.ts +19 -3
  64. package/dist/components/ui/disclosure/disclosure.css +3 -6
  65. package/dist/components/ui/disclosure/disclosure.d.ts +23 -7
  66. package/dist/components/ui/disclosure/disclosure.script.d.ts +31 -7
  67. package/dist/components/ui/disclosure/index.d.ts +1 -1
  68. package/dist/components/ui/disclosure/index.js +1 -1
  69. package/dist/components/ui/disclosure/index.js.map +4 -4
  70. package/dist/components/ui/field/field-description.d.ts +1 -0
  71. package/dist/components/ui/field/field-error.d.ts +2 -2
  72. package/dist/components/ui/field/field.d.ts +4 -4
  73. package/dist/components/ui/field/field.script.d.ts +54 -24
  74. package/dist/components/ui/field/index.js +1 -1
  75. package/dist/components/ui/field/index.js.map +4 -4
  76. package/dist/components/ui/form/control-protocol.d.ts +38 -1
  77. package/dist/components/ui/form/form-context.d.ts +3 -0
  78. package/dist/components/ui/form/form.d.ts +6 -0
  79. package/dist/components/ui/form/form.script.d.ts +29 -12
  80. package/dist/components/ui/form/index.d.ts +2 -1
  81. package/dist/components/ui/form/index.js +1 -1
  82. package/dist/components/ui/form/index.js.map +4 -4
  83. package/dist/components/ui/grid/grid.d.ts +4 -3
  84. package/dist/components/ui/grid/grid.script.d.ts +19 -11
  85. package/dist/components/ui/hover-card/hover-card.css +12 -101
  86. package/dist/components/ui/hover-card/hover-card.d.ts +7 -2
  87. package/dist/components/ui/hover-card/hover-card.script.d.ts +36 -5
  88. package/dist/components/ui/hover-card/index.js +1 -1
  89. package/dist/components/ui/hover-card/index.js.map +4 -4
  90. package/dist/components/ui/input/index.js +1 -1
  91. package/dist/components/ui/input/index.js.map +4 -4
  92. package/dist/components/ui/input/input.css +1 -1
  93. package/dist/components/ui/knob/index.js +1 -1
  94. package/dist/components/ui/knob/index.js.map +3 -3
  95. package/dist/components/ui/knob/knob.css +6 -1
  96. package/dist/components/ui/knob/knob.d.ts +4 -4
  97. package/dist/components/ui/knob/knob.script.d.ts +55 -20
  98. package/dist/components/ui/label/index.js +1 -1
  99. package/dist/components/ui/label/index.js.map +4 -4
  100. package/dist/components/ui/label/label.d.ts +2 -1
  101. package/dist/components/ui/listbox/index.d.ts +2 -2
  102. package/dist/components/ui/listbox/index.js +1 -1
  103. package/dist/components/ui/listbox/index.js.map +4 -4
  104. package/dist/components/ui/listbox/listbox.css +14 -0
  105. package/dist/components/ui/listbox/listbox.d.ts +16 -2
  106. package/dist/components/ui/listbox/listbox.script.d.ts +55 -12
  107. package/dist/components/ui/menu-button/index.js +1 -1
  108. package/dist/components/ui/menu-button/index.js.map +4 -4
  109. package/dist/components/ui/menu-button/menu-button.d.ts +2 -2
  110. package/dist/components/ui/menu-button/menu-button.script.d.ts +30 -27
  111. package/dist/components/ui/menubar/index.js +1 -1
  112. package/dist/components/ui/menubar/index.js.map +4 -4
  113. package/dist/components/ui/menubar/menubar.script.d.ts +41 -15
  114. package/dist/components/ui/meter/index.js +1 -1
  115. package/dist/components/ui/meter/index.js.map +3 -3
  116. package/dist/components/ui/meter/meter.css +27 -2
  117. package/dist/components/ui/meter/meter.script.d.ts +19 -14
  118. package/dist/components/ui/navigation-menu/index.d.ts +1 -1
  119. package/dist/components/ui/navigation-menu/index.js +1 -1
  120. package/dist/components/ui/navigation-menu/index.js.map +4 -4
  121. package/dist/components/ui/navigation-menu/navigation-menu.css +32 -34
  122. package/dist/components/ui/navigation-menu/navigation-menu.d.ts +34 -5
  123. package/dist/components/ui/navigation-menu/navigation-menu.script.d.ts +93 -12
  124. package/dist/components/ui/number-field/index.js +1 -1
  125. package/dist/components/ui/number-field/index.js.map +4 -4
  126. package/dist/components/ui/number-field/number-field.css +1 -1
  127. package/dist/components/ui/number-field/number-field.d.ts +8 -19
  128. package/dist/components/ui/number-field/number-field.script.d.ts +30 -9
  129. package/dist/components/ui/pagination/index.d.ts +1 -1
  130. package/dist/components/ui/pagination/index.js +1 -1
  131. package/dist/components/ui/pagination/index.js.map +3 -3
  132. package/dist/components/ui/pagination/pagination.css +50 -13
  133. package/dist/components/ui/pagination/pagination.d.ts +33 -9
  134. package/dist/components/ui/pagination/pagination.script.d.ts +29 -9
  135. package/dist/components/ui/popover/index.js +1 -1
  136. package/dist/components/ui/popover/index.js.map +4 -4
  137. package/dist/components/ui/popover/popover.d.ts +17 -1
  138. package/dist/components/ui/popover/popover.script.d.ts +57 -9
  139. package/dist/components/ui/radio-group/index.js +1 -1
  140. package/dist/components/ui/radio-group/index.js.map +4 -4
  141. package/dist/components/ui/radio-group/radio-group.d.ts +2 -2
  142. package/dist/components/ui/radio-group/radio-group.script.d.ts +35 -16
  143. package/dist/components/ui/select/index.d.ts +2 -2
  144. package/dist/components/ui/select/index.js +1 -1
  145. package/dist/components/ui/select/index.js.map +4 -4
  146. package/dist/components/ui/select/select.css +8 -6
  147. package/dist/components/ui/select/select.d.ts +18 -9
  148. package/dist/components/ui/select/select.script.d.ts +74 -26
  149. package/dist/components/ui/shared/calendar-popover-behavior.d.ts +27 -0
  150. package/dist/components/ui/shared/control-toggle.css +8 -4
  151. package/dist/components/ui/shared/field-label.d.ts +5 -0
  152. package/dist/components/ui/shared/listbox-host-controller.d.ts +41 -0
  153. package/dist/components/ui/shared/listbox-option.d.ts +4 -0
  154. package/dist/components/ui/shared/multi-value.d.ts +23 -1
  155. package/dist/components/ui/shared/numeric-range.d.ts +8 -0
  156. package/dist/components/ui/shared/popover.css +10 -99
  157. package/dist/components/ui/sidebar/index.d.ts +2 -1
  158. package/dist/components/ui/sidebar/index.js +1 -1
  159. package/dist/components/ui/sidebar/index.js.map +4 -4
  160. package/dist/components/ui/sidebar/sidebar-trigger.d.ts +12 -0
  161. package/dist/components/ui/sidebar/sidebar-trigger.script.d.ts +52 -31
  162. package/dist/components/ui/sidebar/sidebar.css +67 -61
  163. package/dist/components/ui/sidebar/sidebar.d.ts +9 -4
  164. package/dist/components/ui/sidebar/sidebar.script.d.ts +42 -20
  165. package/dist/components/ui/slider/index.js +1 -1
  166. package/dist/components/ui/slider/index.js.map +4 -4
  167. package/dist/components/ui/slider/slider.css +5 -5
  168. package/dist/components/ui/slider/slider.d.ts +20 -10
  169. package/dist/components/ui/slider/slider.script.d.ts +103 -27
  170. package/dist/components/ui/switch/index.js +1 -1
  171. package/dist/components/ui/switch/index.js.map +4 -4
  172. package/dist/components/ui/switch/switch.css +28 -22
  173. package/dist/components/ui/switch/switch.d.ts +13 -0
  174. package/dist/components/ui/switch/switch.script.d.ts +34 -8
  175. package/dist/components/ui/table/index.js +1 -1
  176. package/dist/components/ui/table/index.js.map +4 -4
  177. package/dist/components/ui/table/table.d.ts +9 -7
  178. package/dist/components/ui/table/table.script.d.ts +55 -12
  179. package/dist/components/ui/tabs/tabs.css +18 -12
  180. package/dist/components/ui/tabs/tabs.d.ts +7 -4
  181. package/dist/components/ui/tabs/tabs.script.d.ts +39 -9
  182. package/dist/components/ui/tag-group/index.js +1 -1
  183. package/dist/components/ui/tag-group/index.js.map +4 -4
  184. package/dist/components/ui/tag-group/tag-group.d.ts +19 -7
  185. package/dist/components/ui/tag-group/tag-group.script.d.ts +58 -10
  186. package/dist/components/ui/textarea/index.js +1 -1
  187. package/dist/components/ui/textarea/index.js.map +4 -4
  188. package/dist/components/ui/textarea/textarea.css +1 -1
  189. package/dist/components/ui/toast/index.js +1 -1
  190. package/dist/components/ui/toast/index.js.map +4 -4
  191. package/dist/components/ui/toast/toast.css +35 -32
  192. package/dist/components/ui/toast/toast.script.d.ts +17 -31
  193. package/dist/components/ui/toast/toaster.script.d.ts +24 -12
  194. package/dist/components/ui/toc/toc.script.d.ts +19 -8
  195. package/dist/components/ui/toolbar/toolbar.d.ts +5 -0
  196. package/dist/components/ui/toolbar/toolbar.script.d.ts +24 -4
  197. package/dist/components/ui/tooltip/index.js +1 -1
  198. package/dist/components/ui/tooltip/index.js.map +4 -4
  199. package/dist/components/ui/tooltip/tooltip.css +14 -94
  200. package/dist/components/ui/tooltip/tooltip.d.ts +7 -0
  201. package/dist/components/ui/tooltip/tooltip.script.d.ts +36 -6
  202. package/dist/components/ui/tree/tree.d.ts +4 -3
  203. package/dist/components/ui/tree/tree.script.d.ts +28 -15
  204. package/dist/components/ui/treegrid/treegrid.d.ts +5 -3
  205. package/dist/components/ui/treegrid/treegrid.script.d.ts +33 -14
  206. package/dist/components/ui/window-splitter/index.d.ts +1 -1
  207. package/dist/components/ui/window-splitter/index.js +1 -1
  208. package/dist/components/ui/window-splitter/index.js.map +3 -3
  209. package/dist/components/ui/window-splitter/window-splitter.d.ts +10 -1
  210. package/dist/components/ui/window-splitter/window-splitter.script.d.ts +26 -8
  211. package/dist/index.d.ts +2 -0
  212. package/dist/index.js +1 -1
  213. package/dist/index.js.map +4 -4
  214. package/dist/lib/icons/check.d.ts +3 -0
  215. package/dist/lib/icons/chevron-down.d.ts +0 -1
  216. package/dist/lib/icons/index.d.ts +2 -0
  217. package/dist/lib/icons/x.d.ts +5 -0
  218. package/dist/lib/intl-date/index.d.ts +4 -2
  219. package/dist/lib/intl-date/segment-editing.d.ts +34 -0
  220. package/dist/lib/intl-date/segments.d.ts +26 -4
  221. package/dist/lib/non-empty.d.ts +6 -0
  222. package/dist/lib/unique-id.d.ts +11 -0
  223. package/dist/lib/viewport/breakpoints.d.ts +6 -0
  224. package/dist/lib/viewport/mobile-layout.d.ts +15 -0
  225. package/dist/styles/primitives.css +14 -11
  226. package/dist/styles/radiant-ui-core.css +10 -0
  227. package/dist/styles/radiant-ui.css +40 -11
  228. package/dist/styles/style-dependencies.json +38 -13
  229. package/dist/styles/styles.css +485 -252
  230. package/dist/styles/tailwind.css +40 -101
  231. package/dist/styles/tokens/presets/colors/aurora.css +2 -0
  232. package/dist/styles/tokens/presets/colors/basalt.css +2 -0
  233. package/dist/styles/tokens/presets/colors/ember.css +2 -0
  234. package/dist/styles/tokens/presets/colors/glacier.css +2 -0
  235. package/dist/styles/tokens/semantic.css +1 -0
  236. package/dist/styles/tokens/system.css +11 -3
  237. package/dist/styles/tokens/typography/default.css +8 -0
  238. package/package.json +27 -13
@@ -13,7 +13,6 @@ rui-select {
13
13
  }
14
14
  .rui-select__control {
15
15
  display: flex;
16
- min-height: calc(var(--spacing, 0.25rem) * 10);
17
16
  width: 100%;
18
17
  min-width: 0px;
19
18
  align-items: center;
@@ -24,6 +23,7 @@ rui-select {
24
23
  border-color: var(--color-border, var(--border));
25
24
  background-color: var(--color-background, var(--background));
26
25
  padding-inline: var(--spacing-1, var(--space-1));
26
+ min-height: var(--size-control-md);
27
27
  }
28
28
  .rui-select__control:focus-within {
29
29
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -47,18 +47,19 @@ rui-select {
47
47
  color: var(--color-on-background, var(--on-background));
48
48
  --tw-outline-style: none;
49
49
  outline-style: none;
50
- font-size: var(--text-control, 0.875rem);
50
+ font-size: var(--text-control-input);
51
51
  }
52
- .rui-select__trigger:disabled {
52
+ .rui-select__trigger[aria-disabled='true'] {
53
53
  cursor: not-allowed;
54
54
  opacity: var(--opacity-muted, var(--opacity-muted));
55
55
  }
56
56
  .rui-select__value {
57
+ display: flex;
57
58
  min-width: 0px;
58
59
  flex: 1;
59
- overflow: hidden;
60
- text-overflow: ellipsis;
61
- white-space: nowrap;
60
+ flex-wrap: wrap;
61
+ align-items: center;
62
+ gap: var(--spacing-1, var(--space-1));
62
63
  min-height: 1.25em;
63
64
  }
64
65
  .rui-select__value[data-placeholder] {
@@ -89,6 +90,7 @@ rui-select {
89
90
  color: var(--color-on-background, var(--on-background));
90
91
  --tw-outline-style: none;
91
92
  outline-style: none;
93
+ font-size: var(--text-control-input);
92
94
  }
93
95
  .rui-select__search:focus-visible {
94
96
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -9,23 +9,31 @@ export type RuiSelectControlProps = JsxElementProps<HTMLDivElement>;
9
9
  * @cssclass rui-select__control - Trigger row; bordered, control-height surface.
10
10
  */
11
11
  export declare function RuiSelectControl({ children, class: className, ...props }: RuiSelectControlProps): JsxRenderable;
12
- export type RuiSelectTriggerProps = JsxElementProps<HTMLButtonElement> & {
12
+ export type RuiSelectTriggerProps = JsxElementProps<HTMLDivElement> & {
13
13
  disabled?: boolean;
14
14
  };
15
15
  /**
16
- * Value button with `role="combobox"`. Place `RuiSelectValue` inside.
16
+ * Combobox surface. Stamps `[data-select-trigger]`. Place `RuiSelectValue` inside.
17
17
  *
18
- * @cssclass rui-select__trigger - Value button; `role="combobox"` set by the controller.
18
+ * @remarks A native `<button>` cannot wrap multi-select chip remove controls
19
+ * (`<button>` in `<button>`). The host sets `role="combobox"`.
20
+ *
21
+ * @cssclass rui-select__trigger - Combobox surface; `role="combobox"` set by the controller.
19
22
  */
20
23
  export declare function RuiSelectTrigger({ children, class: className, disabled, ...props }: RuiSelectTriggerProps): JsxRenderable;
21
24
  export type RuiSelectToggleProps = JsxElementProps<HTMLButtonElement> & {
22
25
  disabled?: boolean;
23
26
  };
24
- /** Toggle button for opening the listbox popup. */
27
+ /** Toggle button for opening the listbox popup. Stamps `[data-select-toggle]`. Children replace the default chevron icon. */
25
28
  export declare function RuiSelectToggle({ children, class: className, aria, disabled, ...props }: RuiSelectToggleProps): JsxRenderable;
29
+ export type RuiSelectClearProps = JsxElementProps<HTMLButtonElement> & {
30
+ disabled?: boolean;
31
+ };
32
+ /** Clears the current selection. Stamps `[data-select-clear]`. Place next to `RuiSelectToggle`. Children replace the default close icon. */
33
+ export declare function RuiSelectClear({ children, class: className, aria, disabled, ...props }: RuiSelectClearProps): JsxRenderable;
26
34
  export type RuiSelectValueProps = JsxElementProps<HTMLSpanElement>;
27
35
  /**
28
- * Selected value display inside `RuiSelectTrigger`.
36
+ * Selected value display inside `RuiSelectTrigger`. Stamps `[data-select-value]`.
29
37
  *
30
38
  * @remarks When empty, shows the select `placeholder`. For the `options` API,
31
39
  * the view SSRs the resolved label (or placeholder) so the control height does
@@ -37,7 +45,7 @@ export type RuiSelectValueProps = JsxElementProps<HTMLSpanElement>;
37
45
  export declare function RuiSelectValue({ children, class: className, ...props }: RuiSelectValueProps): JsxRenderable;
38
46
  export type RuiSelectListboxProps = JsxElementProps<HTMLDivElement>;
39
47
  /**
40
- * Popup shell composed inside `listbox`. Place an embedded `RuiListbox` inside.
48
+ * Popup shell. Stamps `[data-select-listbox]`. Place an embedded `RuiListbox` inside.
41
49
  *
42
50
  * @cssclass rui-select__listbox - Popup shell; composes `rui-popover` surface roles.
43
51
  */
@@ -48,16 +56,17 @@ export type RuiSelectSearchProps = JsxElementProps<HTMLInputElement> & {
48
56
  };
49
57
  /**
50
58
  * Search input for filtering inside `RuiAutocomplete` within a select listbox.
59
+ * Stamps `[data-autocomplete-input]`.
51
60
  *
52
61
  * @cssclass rui-select__search - Filtering input inside the popup.
53
62
  */
54
63
  export declare function RuiSelectSearch({ placeholder, class: className, disabled, ...props }: RuiSelectSearchProps): JsxRenderable;
55
64
  export type RuiSelectOptionData = RuiListboxOptionData;
56
65
  /**
57
- * Select view. Pair with `RuiLabel` (sibling or via `RuiField`) for the visible name —
58
- * do not nest a select-specific label.
66
+ * Select view. Wraps children in `[data-ref="root"]`. Pass `options` for the
67
+ * simple API, or compose `RuiSelect*` children.
59
68
  */
60
69
  export type RuiSelectViewProps = JsxCustomElementAttributes<RuiSelectElement, RuiSelectProps & {
61
70
  options?: RuiSelectOptionData[];
62
71
  }>;
63
- export declare function RuiSelect({ options, children, ...props }: RuiSelectViewProps): JsxRenderable;
72
+ export declare function RuiSelect({ options, children, value, ...props }: RuiSelectViewProps): JsxRenderable;
@@ -1,8 +1,10 @@
1
1
  import { RadiantElement } from '@ecopages/radiant';
2
2
  import type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';
3
+ import { type ViewMultiValue } from '../shared/multi-value';
3
4
  export type RuiSelectSelectionMode = 'single' | 'multiple';
5
+ export type RuiSelectTriggerKind = 'focus' | 'manual';
4
6
  export type RuiSelectProps = {
5
- value?: string;
7
+ value?: ViewMultiValue;
6
8
  /** Accessible name when there is no visible `RuiLabel` associated with the trigger. */
7
9
  label?: string;
8
10
  placeholder?: string;
@@ -13,45 +15,96 @@ export type RuiSelectProps = {
13
15
  * Defaults to false for multiple and true for single.
14
16
  */
15
17
  shouldCloseOnSelect?: boolean;
18
+ /**
19
+ * Controls what opens the listbox. `focus` opens when the trigger receives focus;
20
+ * `manual` requires a click, the toggle, or arrow keys (the default).
21
+ */
22
+ triggerKind?: RuiSelectTriggerKind;
16
23
  };
17
24
  export type RuiSelectChangeDetail = {
18
- value: string;
25
+ value: string[];
19
26
  };
20
27
  /**
21
28
  * `<rui-select>` — a select-only combobox with a button trigger and listbox popup.
22
29
  *
30
+ * The custom element is a behavior host: it does not render the composed tree.
31
+ * Import the script and place light-DOM children that match the contract below,
32
+ * or use the `RuiSelect*` view helpers which stamp the same targets.
33
+ *
23
34
  * Implements the APG Combobox pattern (select-only variant). DOM focus stays on the
24
35
  * trigger button; visual focus moves into the popup via `aria-activedescendant`.
25
- *
26
36
  * Pair with `RuiLabel` (sibling, or via `RuiField`) for the visible name.
27
- * Compose with `data-select-trigger`, `data-select-toggle`, `data-select-value`, `data-select-listbox`
28
- * (popup shell), and `RuiListbox` with `embedded` for options.
29
37
  *
30
- * Wrap the listbox in `RuiAutocomplete` to add search filtering.
31
- * Use `RuiTagGroup` inside `RuiSelectValue` for multi-select chip display.
38
+ * ## Light-DOM contract
39
+ *
40
+ * Required:
41
+ * - `[data-ref="root"]` — shell for popover anchoring.
42
+ * - `[data-select-trigger]` — combobox surface (a `div`, not a native button).
43
+ * Host sets `id`, `role="combobox"`, `aria-haspopup="listbox"`,
44
+ * `aria-autocomplete="none"`, `aria-expanded`, `aria-controls`, `tabIndex`,
45
+ * and `aria-disabled`. Do not use a `<button>` here: multi-select chips include
46
+ * remove buttons, and `<button>` in `<button>` aborts HTML parsing.
47
+ * - `[data-select-value]` — selected value inside the trigger. Host sets
48
+ * `data-placeholder` when empty and may inject `[data-select-placeholder]`.
49
+ * - `[data-select-listbox]` — popup shell. Host toggles `hidden`.
50
+ *
51
+ * Per option (inside embedded listbox):
52
+ * - `[role="option"]` — selection identity; see `rui-listbox`.
53
+ *
54
+ * Optional:
55
+ * - `[data-select-toggle]` — popup toggle beside the trigger. Host sets
56
+ * `aria-expanded` and `disabled`.
57
+ * - `[data-select-clear]` — clears selection. Host toggles `hidden` and `disabled`.
58
+ * - `[data-autocomplete-input]` — search field inside the listbox. When the popup
59
+ * is open the host moves `role="combobox"` and related `aria-*` to this input.
60
+ *
61
+ * Do not set `role`, `aria-expanded`, `aria-controls`, or `aria-haspopup` on
62
+ * the trigger — the host owns those. The trigger must be a `div`, not a
63
+ * `<button>`: multi-select chips render remove buttons inside it.
64
+ *
65
+ * Nested hosts:
66
+ * - `rui-listbox` (`embedded`) — options at `[role="option"]`; host drives
67
+ * `aria-selected` and `aria-multiselectable` on the inner listbox.
68
+ * - `rui-tag-group` inside `[data-select-value]` — multi-select chips; host listens
69
+ * for `rui-remove` and `[data-tag]` clicks.
70
+ * - `rui-autocomplete` (optional) — filter wrapper inside `[data-select-listbox]`.
32
71
  *
33
72
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
34
73
  * @element rui-select
35
- * @fires rui-change
74
+ * @attr {string} value - Comma-separated selected values in markup; the property is `string[]`. Default: `[]`.
75
+ * @attr {string} label - Accessible name when there is no associated `RuiLabel`.
76
+ * @attr {string} placeholder - Shown when nothing is selected.
77
+ * @attr {boolean} disabled - Disable the trigger and popup. Default: `false`.
78
+ * @attr {('single'|'multiple')} selection-mode - Single or multi-select. Default: `single`.
79
+ * @attr {boolean} should-close-on-select - Whether selecting closes the popup (defaults to `true` for single, `false` for multiple).
80
+ * @attr {('focus'|'manual')} trigger-kind - Controls what opens the listbox. Default: `manual`.
81
+ * @fires rui-change - Emitted when the selected `value` changes; `detail.value` is `string[]`.
82
+ *
83
+ * @remarks
84
+ * Minimum tree: `[data-ref="root"]` > `[data-select-trigger]` > `[data-select-value]`,
85
+ * sibling `[data-select-listbox]` > `rui-listbox[embedded]` > `[role="option"]`.
86
+ * BEM classes live on the view helpers; the host never queries them.
87
+ * Not form-associated: wrap in `rui-field` and read `RuiForm` `onSubmit`.
88
+ * The selected value does not appear in native `FormData`.
36
89
  */
37
90
  export declare class RuiSelect extends RadiantElement {
38
- value: string;
91
+ value: string[];
39
92
  label: string;
40
93
  placeholder: string;
41
94
  disabled: boolean;
42
95
  selectionMode: RuiSelectSelectionMode;
43
96
  shouldCloseOnSelect: boolean | undefined;
97
+ triggerKind: RuiSelectTriggerKind;
44
98
  changeEvent: EventEmitter<RuiSelectChangeDetail>;
45
99
  private open;
46
100
  private readonly uid;
101
+ private readonly collection;
47
102
  private readonly listboxBehavior;
48
103
  rootTarget: HTMLElement;
49
104
  private get listboxId();
50
105
  private get triggerId();
51
106
  private isMultiple;
52
107
  private closesOnSelect;
53
- private getSelectedValues;
54
- private setSelectedValues;
55
108
  private getSearchInput;
56
109
  private hasSearchInput;
57
110
  /** Element that receives `aria-activedescendant` while the popup is open. */
@@ -59,35 +112,22 @@ export declare class RuiSelect extends RadiantElement {
59
112
  private resetSearchFilter;
60
113
  private syncSearchInput;
61
114
  private focusPopupInput;
62
- /**
63
- * Resolves the multi-select chip host inside the value slot.
64
- *
65
- * @remarks
66
- * During Storybook/SSR upgrade, `querySelector` can return the host before
67
- * `rui-tag-group` is defined — treat that as absent until `setItems` exists.
68
- */
69
- private getTagGroup;
70
115
  private hasTagGroup;
71
116
  private syncTagGroup;
72
117
  private syncTagGroupPlaceholder;
73
118
  private removeSelectedValue;
119
+ private clearSelection;
74
120
  private getTrigger;
121
+ private isTriggerFocusTarget;
75
122
  private getToggle;
76
123
  private getValueElement;
77
124
  private getListboxPopup;
78
- private getListbox;
79
- private getListboxHost;
80
- private getOptions;
81
- private getOptionLabel;
82
- private getOptionValue;
83
125
  private ensureOptionIds;
84
126
  private getAccessibleName;
85
127
  private syncLabel;
86
128
  private syncTrigger;
87
129
  private syncToggle;
88
- private syncListboxHost;
89
130
  private syncValueDisplay;
90
- private syncOptionSelection;
91
131
  private setOpen;
92
132
  private selectOption;
93
133
  private handleListboxKeydown;
@@ -96,15 +136,23 @@ export declare class RuiSelect extends RadiantElement {
96
136
  protected onConnected(): void;
97
137
  disconnectedCallback(): void;
98
138
  onPropsUpdated(): void;
139
+ onTriggerPointerDown(event: PointerEvent): void;
99
140
  onTriggerClick(event: Event): void;
100
141
  onTriggerKeydown(event: KeyboardEvent): void;
101
142
  onSearchKeydown(event: KeyboardEvent): void;
102
143
  onSearchInput(): void;
103
144
  onTagRemove(event: Event): void;
145
+ onClearClick(event: Event): void;
104
146
  onTagClick(event: Event): void;
105
147
  onOptionPointerOver(event: Event): void;
106
148
  onOptionMouseDown(event: Event): void;
107
149
  onOptionClick(event: Event): void;
150
+ /**
151
+ * @remarks With `trigger-kind="focus"`, only focus arriving from outside the host
152
+ * opens the listbox. Focus the host moves back itself (option select, clear,
153
+ * toggle, search input) comes from a descendant and never reopens it.
154
+ */
155
+ onRootFocusIn(event: FocusEvent): void;
108
156
  onFocusOut(event: FocusEvent): void;
109
157
  onDocumentPointerDown(event: PointerEvent): void;
110
158
  }
@@ -0,0 +1,27 @@
1
+ export type CalendarPopoverBehaviorConfig = {
2
+ getHost: () => HTMLElement;
3
+ getAnchor: () => HTMLElement | null;
4
+ getFloating: () => HTMLElement | null;
5
+ getOpen: () => boolean;
6
+ getCalendar: () => HTMLElement | null;
7
+ getFocusIso: () => string | undefined;
8
+ };
9
+ /**
10
+ * Shared popover positioning and dismissal for calendar-backed date pickers.
11
+ *
12
+ * @remarks Date-field and date-range-picker keep value commit and selection mode local.
13
+ */
14
+ export declare class CalendarPopoverBehavior {
15
+ private readonly config;
16
+ private popoverController;
17
+ private suppressPopoverDismiss;
18
+ constructor(config: CalendarPopoverBehaviorConfig);
19
+ destroy(): void;
20
+ suppressDismiss(): void;
21
+ syncPopover(): void;
22
+ focusCalendarDay(): void;
23
+ handleFocusOut(event: FocusEvent, onClose: () => void): void;
24
+ private ensureController;
25
+ }
26
+ /** Focus the calendar's selected day, or the roving tabindex day, or the first available day. */
27
+ export declare function focusCalendarPickerDay(calendar: HTMLElement | null, iso?: string): void;
@@ -1,7 +1,8 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer components {
4
- .rui-control-toggle {
4
+ .rui-control-toggle,
5
+ .rui-control-clear {
5
6
  display: inline-flex;
6
7
  height: var(--spacing-8, var(--space-8));
7
8
  width: var(--spacing-8, var(--space-8));
@@ -15,17 +16,20 @@
15
16
  color: var(--color-on-surface, var(--on-surface));
16
17
  cursor: pointer;
17
18
  }
18
- .rui-control-toggle:hover:not(:disabled) {
19
+ .rui-control-toggle:hover:not(:disabled),
20
+ .rui-control-clear:hover:not(:disabled) {
19
21
  background-color: var(--color-surface-container-low, var(--surface-container-low));
20
22
  }
21
- .rui-control-toggle:focus-visible {
23
+ .rui-control-toggle:focus-visible,
24
+ .rui-control-clear:focus-visible {
22
25
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
23
26
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
24
27
  --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
25
28
  --tw-outline-style: none;
26
29
  outline-style: none;
27
30
  }
28
- .rui-control-toggle:disabled {
31
+ .rui-control-toggle:disabled,
32
+ .rui-control-clear:disabled {
29
33
  cursor: not-allowed;
30
34
  opacity: var(--opacity-muted, var(--opacity-muted));
31
35
  }
@@ -5,5 +5,10 @@ export type FieldLabelSyncOptions = {
5
5
  };
6
6
  /** Finds the visible label associated with a composed field control. */
7
7
  export declare function findAssociatedLabel(owner: HTMLElement): HTMLLabelElement | null;
8
+ /** Points a visible label at a composed control and prefers it over `aria-label`. */
9
+ export declare function bindVisibleLabel(label: HTMLLabelElement, control: HTMLElement, options: {
10
+ controlId: string;
11
+ labelId: string;
12
+ }): void;
8
13
  /** Applies the shared label-to-control ARIA contract for an unmanaged control. */
9
14
  export declare function syncFieldLabel(owner: HTMLElement, control: HTMLElement | null, options: FieldLabelSyncOptions): void;
@@ -0,0 +1,41 @@
1
+ import type { RuiListbox, RuiListboxSelectionMode } from '../listbox/listbox.script';
2
+ import type { RuiTagGroup } from '../tag-group/tag-group.script';
3
+ export type ListboxHostControllerConfig = {
4
+ getRoot: () => ParentNode | null;
5
+ getSelectionMode: () => RuiListboxSelectionMode;
6
+ getValue: () => string[];
7
+ setValue: (value: string[]) => void;
8
+ /** Popup shell used when no `rui-listbox` host is present. */
9
+ getPopup?: () => HTMLElement | null;
10
+ /** Selector for an optional chip host, e.g. `[data-select-value] rui-tag-group`. */
11
+ tagGroupSelector?: string;
12
+ };
13
+ /**
14
+ * Selection and listbox-host sync shared by select and combobox.
15
+ *
16
+ * @remarks Popup open state, filtering, and trigger-kind policy stay on the
17
+ * owning custom element. This controller owns the contract both hosts must
18
+ * agree on: the embedded listbox, the `string[]` value property, option
19
+ * `aria-selected`, and optional tag-group chips. The comma-separated attribute
20
+ * protocol is handled by `multiValueTransform` on each host.
21
+ */
22
+ export declare class ListboxHostController {
23
+ private readonly config;
24
+ constructor(config: ListboxHostControllerConfig);
25
+ getListboxHost(): RuiListbox | null;
26
+ getListbox(): HTMLElement | null;
27
+ getOptions(): HTMLElement[];
28
+ getSelectedValues(): string[];
29
+ setSelectedValues(values: string[]): void;
30
+ toggleValue(optionValue: string): void;
31
+ removeValue(optionValue: string): boolean;
32
+ clearValues(): boolean;
33
+ findOption(eventTarget: EventTarget | null): HTMLElement | null;
34
+ isSelectableOption(option: HTMLElement | null): option is HTMLElement;
35
+ syncListboxHost(): void;
36
+ syncOptionSelection(): void;
37
+ syncMultiselectable(listbox: HTMLElement | null): void;
38
+ getTagGroup(): RuiTagGroup | null;
39
+ syncTagGroup(): void;
40
+ labelForValue(value: string): string;
41
+ }
@@ -0,0 +1,4 @@
1
+ /** Returns an option label without decorative selection-indicator content. */
2
+ export declare function getListboxOptionLabel(option: HTMLElement): string;
3
+ /** Returns the explicit option value or its visible label. */
4
+ export declare function getListboxOptionValue(option: HTMLElement): string;
@@ -1,4 +1,26 @@
1
+ import type { PropTransform } from '@ecopages/radiant';
1
2
  /** Parses the comma-separated value protocol used by multi-select controls. */
2
3
  export declare function parseMultiValue(value: string | null | undefined): string[];
3
4
  /** Serializes multi-select values into the public custom-element value protocol. */
4
- export declare function serializeMultiValue(values: string[]): string;
5
+ export declare function serializeMultiValue(values: readonly string[]): string;
6
+ /** `@prop` transform for comma-separated multi-value host attributes. */
7
+ export declare const multiValueTransform: PropTransform<string[]>;
8
+ /** Shared `@prop` options for comma-separated `string[]` host values. */
9
+ export declare const multiValuePropOptions: {
10
+ readonly type: ArrayConstructor;
11
+ readonly reflect: true;
12
+ readonly transform: PropTransform<string[]>;
13
+ };
14
+ /**
15
+ * JSX / view `value` accepted by listbox, select, combobox, checkbox-group,
16
+ * tag-group, and table. The live host property is always `string[]`.
17
+ */
18
+ export type ViewMultiValue = string | readonly string[] | undefined;
19
+ /** Reads a view `value` as the selected-token array for SSR of selected children. */
20
+ export declare function parseViewValue(value: ViewMultiValue): string[];
21
+ /** `@prop` transform for comma-separated numeric host attributes (e.g. slider). */
22
+ export declare const numberArrayTransform: PropTransform<number[]>;
23
+ /**
24
+ * JSX / view `value` accepted by slider. The live host property is always `number[]`.
25
+ */
26
+ export type ViewNumericValue = number | readonly number[] | undefined;
@@ -25,6 +25,14 @@ export declare function fractionDigitsFromStep(step: number): number;
25
25
  export declare function resolveValuePrecision(step: number, valuePrecision: number | undefined): number;
26
26
  /** Formats a numeric value for readouts, tooltips, and `aria-valuetext`. */
27
27
  export declare function formatNumericValue(value: number, valuePrecision: number): string;
28
+ /**
29
+ * Whether two values sit on the same step tick after binary rounding.
30
+ *
31
+ * @remarks IEEE-754 noise can make `clamp(x) !== x` even when both stringify to
32
+ * the same step. Writing the clamped number back into a reflected `value`
33
+ * attribute then oscillates forever (`0.3` ↔ `0.30000000000000004`).
34
+ */
35
+ export declare function valuesAlignOnStep(left: number, right: number, step: number): boolean;
28
36
  /** Normalizes numeric-control bounds and step values into a stable interaction model. */
29
37
  export declare function createNumericRange(min: number, max: number, step: number): NumericRange;
30
38
  /**
@@ -1,16 +1,18 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
2
  @layer components {
4
3
  .rui-popover {
4
+ --rui-popover-radius: var(--radius-container);
5
+ --rui-popover-surface: var(--background);
6
+ --rui-popover-border-color: var(--border);
7
+ --rui-popover-shadow: var(--shadow-overlay);
5
8
  z-index: var(--z-index-popover, var(--z-popover));
6
9
  overflow: auto;
7
- border-radius: var(--radius-container, var(--radius-container));
8
- border-style: var(--tw-border-style);
9
- border-width: 1px;
10
- border-color: var(--color-border, var(--border));
11
- background-color: var(--color-background, var(--background));
12
- --tw-shadow: var(--shadow-overlay);
13
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
10
+ max-height: var(--rui-popover-max-height, calc(100dvh - 1rem));
11
+ max-width: var(--rui-popover-max-width, calc(100vw - 1rem));
12
+ border-radius: var(--rui-popover-radius);
13
+ border: 1px solid var(--rui-popover-border-color);
14
+ background-color: var(--rui-popover-surface);
15
+ box-shadow: var(--rui-popover-shadow);
14
16
  }
15
17
  .rui-popover--listbox {
16
18
  display: flex;
@@ -26,94 +28,3 @@
26
28
  display: inline-flex;
27
29
  }
28
30
  }
29
- @property --tw-border-style {
30
- syntax: "*";
31
- inherits: false;
32
- initial-value: solid;
33
- }
34
- @property --tw-shadow {
35
- syntax: "*";
36
- inherits: false;
37
- initial-value: 0 0 #0000;
38
- }
39
- @property --tw-shadow-color {
40
- syntax: "*";
41
- inherits: false;
42
- }
43
- @property --tw-shadow-alpha {
44
- syntax: "<percentage>";
45
- inherits: false;
46
- initial-value: 100%;
47
- }
48
- @property --tw-inset-shadow {
49
- syntax: "*";
50
- inherits: false;
51
- initial-value: 0 0 #0000;
52
- }
53
- @property --tw-inset-shadow-color {
54
- syntax: "*";
55
- inherits: false;
56
- }
57
- @property --tw-inset-shadow-alpha {
58
- syntax: "<percentage>";
59
- inherits: false;
60
- initial-value: 100%;
61
- }
62
- @property --tw-ring-color {
63
- syntax: "*";
64
- inherits: false;
65
- }
66
- @property --tw-ring-shadow {
67
- syntax: "*";
68
- inherits: false;
69
- initial-value: 0 0 #0000;
70
- }
71
- @property --tw-inset-ring-color {
72
- syntax: "*";
73
- inherits: false;
74
- }
75
- @property --tw-inset-ring-shadow {
76
- syntax: "*";
77
- inherits: false;
78
- initial-value: 0 0 #0000;
79
- }
80
- @property --tw-ring-inset {
81
- syntax: "*";
82
- inherits: false;
83
- }
84
- @property --tw-ring-offset-width {
85
- syntax: "<length>";
86
- inherits: false;
87
- initial-value: 0px;
88
- }
89
- @property --tw-ring-offset-color {
90
- syntax: "*";
91
- inherits: false;
92
- initial-value: #fff;
93
- }
94
- @property --tw-ring-offset-shadow {
95
- syntax: "*";
96
- inherits: false;
97
- initial-value: 0 0 #0000;
98
- }
99
- @layer properties {
100
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
101
- *, ::before, ::after, ::backdrop {
102
- --tw-border-style: solid;
103
- --tw-shadow: 0 0 #0000;
104
- --tw-shadow-color: initial;
105
- --tw-shadow-alpha: 100%;
106
- --tw-inset-shadow: 0 0 #0000;
107
- --tw-inset-shadow-color: initial;
108
- --tw-inset-shadow-alpha: 100%;
109
- --tw-ring-color: initial;
110
- --tw-ring-shadow: 0 0 #0000;
111
- --tw-inset-ring-color: initial;
112
- --tw-inset-ring-shadow: 0 0 #0000;
113
- --tw-ring-inset: initial;
114
- --tw-ring-offset-width: 0px;
115
- --tw-ring-offset-color: #fff;
116
- --tw-ring-offset-shadow: 0 0 #0000;
117
- }
118
- }
119
- }
@@ -1,3 +1,4 @@
1
1
  export { RuiSidebar as RuiSidebarElement, type RuiSidebarProps, type RuiSidebarVariant, type RuiSidebarSide, type RuiSidebarCollapsible, type RuiSidebarState, type RuiSidebarMatchMode, type RuiSidebarToggleDetail, type RuiSidebarResizeDetail, } from './sidebar.script';
2
2
  export { RuiSidebarTrigger as RuiSidebarTriggerElement, type RuiSidebarTriggerProps, type RuiSidebarTriggerPlacement, } from './sidebar-trigger.script';
3
- export { RuiSidebar, RuiSidebarTrigger, RuiSidebarProvider, RuiSidebarHeader, RuiSidebarContent, RuiSidebarFooter, RuiSidebarSeparator, RuiSidebarGroup, RuiSidebarGroupLabel, RuiSidebarGroupAction, RuiSidebarGroupHeader, RuiSidebarMenu, RuiSidebarMenuItem, RuiSidebarMenuButton, RuiSidebarMenuAction, RuiSidebarInset, type RuiSidebarProviderProps, type RuiSidebarHeaderProps, type RuiSidebarContentProps, type RuiSidebarFooterProps, type RuiSidebarSeparatorProps, type RuiSidebarGroupProps, type RuiSidebarGroupLabelProps, type RuiSidebarGroupActionProps, type RuiSidebarGroupHeaderProps, type RuiSidebarMenuProps, type RuiSidebarMenuItemProps, type RuiSidebarMenuButtonControlProps, type RuiSidebarMenuButtonLinkProps, type RuiSidebarMenuButtonProps, type RuiSidebarMenuActionProps, type RuiSidebarInsetProps, type RuiSidebarViewProps, type RuiSidebarTriggerViewProps, } from './sidebar';
3
+ export { RuiSidebarTrigger, type RuiSidebarTriggerViewProps } from './sidebar-trigger';
4
+ export { RuiSidebar, RuiSidebarProvider, RuiSidebarHeader, RuiSidebarContent, RuiSidebarFooter, RuiSidebarSeparator, RuiSidebarGroup, RuiSidebarGroupLabel, RuiSidebarGroupAction, RuiSidebarGroupHeader, RuiSidebarMenu, RuiSidebarMenuItem, RuiSidebarMenuButton, RuiSidebarMenuAction, RuiSidebarInset, type RuiSidebarProviderProps, type RuiSidebarHeaderProps, type RuiSidebarContentProps, type RuiSidebarFooterProps, type RuiSidebarSeparatorProps, type RuiSidebarGroupProps, type RuiSidebarGroupLabelProps, type RuiSidebarGroupActionProps, type RuiSidebarGroupHeaderProps, type RuiSidebarMenuProps, type RuiSidebarMenuItemProps, type RuiSidebarMenuButtonControlProps, type RuiSidebarMenuButtonLinkProps, type RuiSidebarMenuButtonProps, type RuiSidebarMenuActionProps, type RuiSidebarInsetProps, type RuiSidebarViewProps, } from './sidebar';