@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

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 (635) hide show
  1. package/CHANGELOG.md +141 -0
  2. package/dist/AlertDialog/AlertDialog.d.ts +1 -1
  3. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  4. package/dist/AlertDialog/AlertDialog.js +20 -18
  5. package/dist/AlertDialog/useImperativeAlertDialog.d.ts +0 -2
  6. package/dist/AlertDialog/useImperativeAlertDialog.d.ts.map +1 -1
  7. package/dist/AlertDialog/useImperativeAlertDialog.js +3 -5
  8. package/dist/AppShell/AppShell.d.ts +1 -1
  9. package/dist/AppShell/AppShell.d.ts.map +1 -1
  10. package/dist/AppShell/AppShell.js +55 -53
  11. package/dist/AspectRatio/AspectRatio.d.ts +48 -10
  12. package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
  13. package/dist/AspectRatio/AspectRatio.js +33 -12
  14. package/dist/AspectRatio/index.d.ts +1 -1
  15. package/dist/AspectRatio/index.d.ts.map +1 -1
  16. package/dist/Avatar/Avatar.d.ts.map +1 -1
  17. package/dist/Avatar/Avatar.js +28 -26
  18. package/dist/Avatar/AvatarStatusDot.js +6 -6
  19. package/dist/AvatarGroup/AvatarGroup.js +6 -6
  20. package/dist/AvatarGroup/AvatarGroupOverflow.js +7 -7
  21. package/dist/Badge/Badge.js +3 -3
  22. package/dist/Banner/Banner.d.ts.map +1 -1
  23. package/dist/Banner/Banner.js +32 -25
  24. package/dist/Blockquote/Blockquote.js +7 -7
  25. package/dist/Breadcrumbs/BreadcrumbItem.js +17 -17
  26. package/dist/Breadcrumbs/Breadcrumbs.js +7 -7
  27. package/dist/Button/Button.js +19 -19
  28. package/dist/ButtonGroup/ButtonGroup.js +7 -7
  29. package/dist/Calendar/Calendar.d.ts.map +1 -1
  30. package/dist/Calendar/Calendar.js +68 -48
  31. package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
  32. package/dist/Calendar/styles.d.ts +2 -2
  33. package/dist/Calendar/styles.d.ts.map +1 -1
  34. package/dist/Calendar/styles.js +2 -2
  35. package/dist/Card/Card.d.ts +4 -2
  36. package/dist/Card/Card.d.ts.map +1 -1
  37. package/dist/Card/Card.js +18 -10
  38. package/dist/Carousel/Carousel.d.ts.map +1 -1
  39. package/dist/Carousel/Carousel.js +24 -21
  40. package/dist/Center/Center.js +3 -3
  41. package/dist/Chat/ChatComposer.js +23 -23
  42. package/dist/Chat/ChatComposerDrawer.js +14 -14
  43. package/dist/Chat/ChatComposerInput.d.ts +1 -1
  44. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  45. package/dist/Chat/ChatComposerInput.js +27 -15
  46. package/dist/Chat/ChatDictationButton.d.ts +1 -1
  47. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  48. package/dist/Chat/ChatDictationButton.js +13 -11
  49. package/dist/Chat/ChatLayout.js +17 -17
  50. package/dist/Chat/ChatLayoutScrollButton.d.ts +1 -1
  51. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  52. package/dist/Chat/ChatLayoutScrollButton.js +12 -10
  53. package/dist/Chat/ChatMessage.js +12 -12
  54. package/dist/Chat/ChatMessageBubble.js +7 -7
  55. package/dist/Chat/ChatMessageList.js +14 -14
  56. package/dist/Chat/ChatMessageMetadata.d.ts +1 -1
  57. package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
  58. package/dist/Chat/ChatMessageMetadata.js +14 -12
  59. package/dist/Chat/ChatPastedTextToken.js +13 -13
  60. package/dist/Chat/ChatSendButton.js +3 -3
  61. package/dist/Chat/ChatSystemMessage.d.ts +1 -1
  62. package/dist/Chat/ChatSystemMessage.d.ts.map +1 -1
  63. package/dist/Chat/ChatSystemMessage.js +17 -17
  64. package/dist/Chat/ChatTokenizedText.d.ts +1 -1
  65. package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
  66. package/dist/Chat/ChatTokenizedText.js +24 -15
  67. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  68. package/dist/Chat/ChatToolCalls.js +81 -74
  69. package/dist/Chat/index.d.ts +1 -1
  70. package/dist/Chat/index.d.ts.map +1 -1
  71. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  72. package/dist/Chat/useTriggerMenu.js +15 -15
  73. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  74. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  75. package/dist/CheckboxInput/CheckboxInput.js +25 -23
  76. package/dist/CheckboxList/CheckboxList.js +9 -9
  77. package/dist/CheckboxList/CheckboxListItem.d.ts +1 -1
  78. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  79. package/dist/CheckboxList/CheckboxListItem.js +8 -6
  80. package/dist/Citation/Citation.js +10 -10
  81. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  82. package/dist/ClickableCard/ClickableCard.js +32 -9
  83. package/dist/Code/Code.js +3 -3
  84. package/dist/CodeBlock/CodeBlock.d.ts +10 -1
  85. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  86. package/dist/CodeBlock/CodeBlock.js +88 -52
  87. package/dist/Collapsible/Collapsible.d.ts +9 -3
  88. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  89. package/dist/Collapsible/Collapsible.js +109 -22
  90. package/dist/Collapsible/CollapsibleGroup.d.ts +37 -7
  91. package/dist/Collapsible/CollapsibleGroup.d.ts.map +1 -1
  92. package/dist/Collapsible/CollapsibleGroup.js +64 -12
  93. package/dist/Collapsible/CollapsibleGroupContext.d.ts +24 -0
  94. package/dist/Collapsible/CollapsibleGroupContext.d.ts.map +1 -1
  95. package/dist/Collapsible/CollapsibleGroupContext.js +26 -3
  96. package/dist/Collapsible/index.d.ts +1 -0
  97. package/dist/Collapsible/index.d.ts.map +1 -1
  98. package/dist/Collapsible/useCollapsible.d.ts +4 -1
  99. package/dist/Collapsible/useCollapsible.d.ts.map +1 -1
  100. package/dist/Collapsible/useCollapsible.js +20 -6
  101. package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
  102. package/dist/CommandPalette/CommandPalette.js +36 -34
  103. package/dist/CommandPalette/CommandPaletteEmpty.js +3 -3
  104. package/dist/CommandPalette/CommandPaletteFooter.js +16 -16
  105. package/dist/CommandPalette/CommandPaletteGroup.js +5 -5
  106. package/dist/CommandPalette/CommandPaletteInput.js +13 -13
  107. package/dist/CommandPalette/CommandPaletteItem.js +3 -3
  108. package/dist/CommandPalette/CommandPaletteList.js +3 -3
  109. package/dist/ContextMenu/ContextMenu.d.ts +7 -2
  110. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  111. package/dist/ContextMenu/ContextMenu.js +76 -43
  112. package/dist/DateInput/DateInput.js +18 -18
  113. package/dist/DateRangeInput/DateRangeInput.js +21 -21
  114. package/dist/DateTimeInput/DateTimeInput.d.ts +5 -2
  115. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  116. package/dist/DateTimeInput/DateTimeInput.js +30 -26
  117. package/dist/DateTimeInput/index.d.ts +1 -1
  118. package/dist/DateTimeInput/index.d.ts.map +1 -1
  119. package/dist/Dialog/Dialog.js +9 -9
  120. package/dist/Dialog/DialogHeader.js +16 -16
  121. package/dist/Dialog/useImperativeDialog.js +3 -3
  122. package/dist/Divider/Divider.js +7 -7
  123. package/dist/DropdownMenu/DropdownMenu.js +10 -10
  124. package/dist/DropdownMenu/DropdownMenuItem.d.ts +2 -17
  125. package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
  126. package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
  127. package/dist/DropdownMenu/renderDropdownItems.js +10 -10
  128. package/dist/EmptyState/EmptyState.js +9 -9
  129. package/dist/Field/Field.js +17 -17
  130. package/dist/Field/FieldLabel.js +15 -15
  131. package/dist/Field/InputClearButton.js +5 -5
  132. package/dist/FieldStatus/FieldStatus.js +3 -3
  133. package/dist/FileInput/FileInput.js +29 -29
  134. package/dist/FormLayout/FormLayout.js +5 -5
  135. package/dist/Grid/Grid.d.ts +4 -3
  136. package/dist/Grid/Grid.d.ts.map +1 -1
  137. package/dist/Grid/Grid.js +29 -12
  138. package/dist/Grid/GridSpan.js +3 -3
  139. package/dist/HStack/HStack.js +3 -3
  140. package/dist/Heading/Heading.js +10 -10
  141. package/dist/HoverCard/HoverCard.js +9 -9
  142. package/dist/HoverCard/useHoverCard.d.ts +5 -1
  143. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  144. package/dist/HoverCard/useHoverCard.js +3 -3
  145. package/dist/Icon/Icon.d.ts.map +1 -1
  146. package/dist/Icon/Icon.js +16 -12
  147. package/dist/Icon/defaultIcons.js +116 -116
  148. package/dist/IconButton/IconButton.js +3 -3
  149. package/dist/InputGroup/InputGroup.js +11 -11
  150. package/dist/InputGroup/InputGroupText.js +3 -3
  151. package/dist/Item/Item.js +18 -18
  152. package/dist/Kbd/Kbd.js +5 -5
  153. package/dist/Layer/LayerProvider.js +7 -7
  154. package/dist/Layer/useLayer.d.ts +29 -2
  155. package/dist/Layer/useLayer.d.ts.map +1 -1
  156. package/dist/Layer/useLayer.js +44 -31
  157. package/dist/Layout/Layout.js +21 -21
  158. package/dist/Layout/LayoutContent.js +3 -3
  159. package/dist/Layout/LayoutFooter.js +5 -5
  160. package/dist/Layout/LayoutHeader.js +5 -5
  161. package/dist/Layout/LayoutPanel.js +3 -3
  162. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  163. package/dist/Lightbox/Lightbox.js +55 -31
  164. package/dist/Lightbox/useLightbox.d.ts +0 -1
  165. package/dist/Lightbox/useLightbox.d.ts.map +1 -1
  166. package/dist/Lightbox/useLightbox.js +3 -4
  167. package/dist/Link/Link.d.ts +0 -2
  168. package/dist/Link/Link.d.ts.map +1 -1
  169. package/dist/Link/Link.js +15 -17
  170. package/dist/Link/LinkProvider.js +3 -3
  171. package/dist/Link/useLinkify.js +3 -3
  172. package/dist/List/List.js +11 -11
  173. package/dist/List/ListItem.js +11 -11
  174. package/dist/Markdown/Markdown.d.ts.map +1 -1
  175. package/dist/Markdown/Markdown.js +102 -102
  176. package/dist/MetadataList/MetadataList.js +10 -10
  177. package/dist/MetadataList/MetadataListItem.js +15 -15
  178. package/dist/MobileNav/MobileNav.d.ts +1 -1
  179. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  180. package/dist/MobileNav/MobileNav.js +26 -23
  181. package/dist/MobileNav/MobileNavToggle.js +5 -5
  182. package/dist/MoreMenu/MoreMenu.js +3 -3
  183. package/dist/MultiSelector/MultiSelector.js +56 -56
  184. package/dist/NavIcon/NavIcon.js +3 -3
  185. package/dist/NavMenu/NavHeadingMenu.js +5 -5
  186. package/dist/NavMenu/NavHeadingMenuItem.js +8 -8
  187. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  188. package/dist/NumberInput/NumberInput.js +48 -32
  189. package/dist/Outline/Outline.js +15 -15
  190. package/dist/OverflowList/OverflowList.js +8 -8
  191. package/dist/Overlay/Overlay.js +3 -3
  192. package/dist/Overlay/OverlayScrim.js +5 -5
  193. package/dist/Overlay/useOverlay.d.ts +0 -3
  194. package/dist/Overlay/useOverlay.d.ts.map +1 -1
  195. package/dist/Overlay/useOverlay.js +3 -6
  196. package/dist/Pagination/Pagination.d.ts +1 -1
  197. package/dist/Pagination/Pagination.d.ts.map +1 -1
  198. package/dist/Pagination/Pagination.js +125 -72
  199. package/dist/Popover/Popover.js +16 -16
  200. package/dist/Popover/usePopover.js +7 -7
  201. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  202. package/dist/PowerSearch/PowerSearch.js +110 -92
  203. package/dist/PowerSearch/PowerSearchEditPopover.js +84 -84
  204. package/dist/PowerSearch/PowerSearchFilterEditor.js +3 -3
  205. package/dist/PowerSearch/PowerSearchToken.js +5 -5
  206. package/dist/PowerSearch/PowerSearchValueEditor.js +54 -54
  207. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  208. package/dist/ProgressBar/ProgressBar.js +25 -18
  209. package/dist/RadioList/RadioList.js +7 -7
  210. package/dist/RadioList/RadioListItem.d.ts +1 -1
  211. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  212. package/dist/RadioList/RadioListItem.js +24 -21
  213. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  214. package/dist/Resizable/ResizeHandle.js +28 -10
  215. package/dist/Section/Section.js +5 -5
  216. package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
  217. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  218. package/dist/SegmentedControl/SegmentedControl.js +32 -10
  219. package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -1
  220. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  221. package/dist/SegmentedControl/SegmentedControlItem.js +18 -12
  222. package/dist/SelectableCard/SelectableCard.js +5 -5
  223. package/dist/Selector/Selector.js +46 -46
  224. package/dist/Selector/SelectorOption.js +3 -3
  225. package/dist/SideNav/SideNav.d.ts.map +1 -1
  226. package/dist/SideNav/SideNav.js +38 -34
  227. package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
  228. package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
  229. package/dist/SideNav/SideNavCollapseButton.js +8 -6
  230. package/dist/SideNav/SideNavHeading.js +87 -87
  231. package/dist/SideNav/SideNavItem.js +42 -42
  232. package/dist/SideNav/SideNavSection.d.ts +1 -1
  233. package/dist/SideNav/SideNavSection.d.ts.map +1 -1
  234. package/dist/SideNav/SideNavSection.js +18 -16
  235. package/dist/Skeleton/Skeleton.js +3 -3
  236. package/dist/Slider/Slider.js +23 -23
  237. package/dist/Spinner/Spinner.js +9 -9
  238. package/dist/StatusDot/StatusDot.js +5 -5
  239. package/dist/Switch/Switch.d.ts +8 -4
  240. package/dist/Switch/Switch.d.ts.map +1 -1
  241. package/dist/Switch/Switch.js +34 -29
  242. package/dist/TabList/Tab.js +18 -18
  243. package/dist/TabList/TabList.js +5 -5
  244. package/dist/TabList/TabMenu.d.ts.map +1 -1
  245. package/dist/TabList/TabMenu.js +57 -30
  246. package/dist/TabList/tab.markers.stylex.d.ts +1 -1
  247. package/dist/Table/BaseTable.d.ts.map +1 -1
  248. package/dist/Table/BaseTable.js +50 -39
  249. package/dist/Table/Table.js +7 -7
  250. package/dist/Table/TableBody.d.ts +1 -1
  251. package/dist/Table/TableBody.d.ts.map +1 -1
  252. package/dist/Table/TableBody.js +9 -5
  253. package/dist/Table/TableCell.js +3 -3
  254. package/dist/Table/TableFooter.d.ts +1 -1
  255. package/dist/Table/TableFooter.d.ts.map +1 -1
  256. package/dist/Table/TableFooter.js +9 -5
  257. package/dist/Table/TableHeader.d.ts +1 -1
  258. package/dist/Table/TableHeader.d.ts.map +1 -1
  259. package/dist/Table/TableHeader.js +9 -5
  260. package/dist/Table/TableHeaderCell.js +3 -3
  261. package/dist/Table/TableRow.js +5 -5
  262. package/dist/Table/index.d.ts +2 -0
  263. package/dist/Table/index.d.ts.map +1 -1
  264. package/dist/Table/index.js +1 -0
  265. package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
  266. package/dist/Table/plugins/columnResize/useTableColumnResize.js +14 -11
  267. package/dist/Table/plugins/filtering/useTableFiltering.js +71 -71
  268. package/dist/Table/plugins/groupedRows/index.d.ts +3 -0
  269. package/dist/Table/plugins/groupedRows/index.d.ts.map +1 -0
  270. package/dist/Table/plugins/groupedRows/index.js +3 -0
  271. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +78 -0
  272. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -0
  273. package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +250 -0
  274. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  275. package/dist/Table/plugins/pagination/paginateData.js +5 -1
  276. package/dist/Table/plugins/pagination/useTablePagination.js +7 -7
  277. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +1 -1
  278. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +23 -23
  279. package/dist/Table/plugins/selection/useTableSelection.js +18 -18
  280. package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
  281. package/dist/Table/plugins/selection/useTableSelectionState.js +11 -1
  282. package/dist/Table/plugins/sortable/useTableSortable.js +17 -17
  283. package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
  284. package/dist/Table/plugins/sortable/useTableSortableState.js +8 -4
  285. package/dist/Table/tableContextMenu.js +9 -9
  286. package/dist/Text/Text.js +10 -10
  287. package/dist/TextArea/TextArea.js +14 -14
  288. package/dist/TextInput/TextInput.js +15 -15
  289. package/dist/Thumbnail/Thumbnail.d.ts +3 -2
  290. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  291. package/dist/Thumbnail/Thumbnail.js +30 -29
  292. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  293. package/dist/TimeInput/TimeInput.js +26 -21
  294. package/dist/Timestamp/Timestamp.d.ts +1 -1
  295. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  296. package/dist/Timestamp/Timestamp.js +37 -26
  297. package/dist/Toast/Toast.d.ts.map +1 -1
  298. package/dist/Toast/Toast.js +25 -17
  299. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  300. package/dist/Toast/ToastViewport.js +23 -11
  301. package/dist/Toast/useToast.d.ts.map +1 -1
  302. package/dist/Toast/useToast.js +44 -4
  303. package/dist/ToggleButton/ToggleButton.js +12 -12
  304. package/dist/ToggleButton/ToggleButtonGroup.js +5 -5
  305. package/dist/Token/Token.js +21 -21
  306. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  307. package/dist/Tokenizer/Tokenizer.js +36 -34
  308. package/dist/Toolbar/Toolbar.js +18 -18
  309. package/dist/Tooltip/Tooltip.js +11 -11
  310. package/dist/Tooltip/useTooltip.d.ts +5 -1
  311. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  312. package/dist/Tooltip/useTooltip.js +3 -3
  313. package/dist/TopNav/TopNav.js +32 -32
  314. package/dist/TopNav/TopNavHeading.js +67 -67
  315. package/dist/TopNav/TopNavItem.js +5 -5
  316. package/dist/TopNav/TopNavMegaMenu.js +30 -30
  317. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +1 -1
  318. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
  319. package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +25 -14
  320. package/dist/TopNav/TopNavMegaMenuItem.js +16 -16
  321. package/dist/TopNav/TopNavMenu.js +32 -32
  322. package/dist/TreeList/TreeList.js +8 -8
  323. package/dist/TreeList/TreeListBranches.js +11 -11
  324. package/dist/TreeList/TreeListItem.js +30 -30
  325. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  326. package/dist/Typeahead/BaseTypeahead.js +23 -20
  327. package/dist/Typeahead/Typeahead.js +12 -12
  328. package/dist/Typeahead/TypeaheadItem.js +10 -10
  329. package/dist/VStack/VStack.js +3 -3
  330. package/dist/VisuallyHidden/VisuallyHidden.d.ts +0 -3
  331. package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -1
  332. package/dist/VisuallyHidden/VisuallyHidden.js +0 -3
  333. package/dist/astryx.css +7 -0
  334. package/dist/astryx.umd.js +63 -63
  335. package/dist/astryx.umd.js.map +4 -4
  336. package/dist/docs-types.d.ts +8 -2
  337. package/dist/docs-types.d.ts.map +1 -1
  338. package/dist/hooks/focusableSelector.d.ts +1 -1
  339. package/dist/hooks/focusableSelector.d.ts.map +1 -1
  340. package/dist/hooks/focusableSelector.js +1 -1
  341. package/dist/hooks/index.d.ts +2 -0
  342. package/dist/hooks/index.d.ts.map +1 -1
  343. package/dist/hooks/index.js +1 -0
  344. package/dist/hooks/useFocusTrap.d.ts +3 -0
  345. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  346. package/dist/hooks/useFocusTrap.js +38 -1
  347. package/dist/hooks/useHotkeys.d.ts +51 -0
  348. package/dist/hooks/useHotkeys.d.ts.map +1 -0
  349. package/dist/hooks/useHotkeys.js +160 -0
  350. package/dist/hooks/useInteractiveRole.d.ts +6 -2
  351. package/dist/hooks/useInteractiveRole.d.ts.map +1 -1
  352. package/dist/hooks/useInteractiveRole.js +6 -2
  353. package/dist/hooks/useKeyboardHint.js +9 -9
  354. package/dist/hooks/useStreamingText.d.ts +3 -1
  355. package/dist/hooks/useStreamingText.d.ts.map +1 -1
  356. package/dist/hooks/useStreamingText.js +14 -5
  357. package/dist/theme/MediaTheme.js +3 -3
  358. package/dist/theme/Theme.js +7 -7
  359. package/dist/theme/defineTheme.d.ts +1 -1
  360. package/dist/theme/defineTheme.d.ts.map +1 -1
  361. package/dist/theme/expandColorScale.d.ts.map +1 -1
  362. package/dist/theme/expandColorScale.js +10 -3
  363. package/dist/theme/hct.d.ts +0 -15
  364. package/dist/theme/hct.d.ts.map +1 -1
  365. package/dist/theme/hct.js +9 -9
  366. package/dist/theme/syntax/SyntaxTheme.js +5 -5
  367. package/dist/theme/tokens.d.ts +10 -2
  368. package/dist/theme/tokens.d.ts.map +1 -1
  369. package/dist/theme/tokens.js +220 -4
  370. package/dist/theme/useTheme.d.ts +3 -2
  371. package/dist/theme/useTheme.d.ts.map +1 -1
  372. package/dist/theme/useTheme.js +73 -6
  373. package/dist/utils/color.d.ts +42 -0
  374. package/dist/utils/color.d.ts.map +1 -0
  375. package/dist/utils/color.js +150 -0
  376. package/dist/utils/composeEventHandlers.d.ts +30 -0
  377. package/dist/utils/composeEventHandlers.d.ts.map +1 -0
  378. package/dist/utils/composeEventHandlers.js +40 -0
  379. package/dist/utils/index.d.ts +3 -0
  380. package/dist/utils/index.d.ts.map +1 -1
  381. package/dist/utils/index.js +3 -1
  382. package/dist/utils/timeParser.d.ts.map +1 -1
  383. package/dist/utils/timeParser.js +8 -5
  384. package/package.json +4 -4
  385. package/src/AlertDialog/AlertDialog.doc.mjs +4 -0
  386. package/src/AlertDialog/AlertDialog.tsx +2 -0
  387. package/src/AlertDialog/useImperativeAlertDialog.tsx +0 -2
  388. package/src/AppShell/AppShell.tsx +2 -0
  389. package/src/AspectRatio/AspectRatio.doc.mjs +28 -1
  390. package/src/AspectRatio/AspectRatio.test.tsx +142 -1
  391. package/src/AspectRatio/AspectRatio.tsx +70 -10
  392. package/src/AspectRatio/index.ts +5 -1
  393. package/src/Avatar/Avatar.doc.mjs +11 -0
  394. package/src/Avatar/Avatar.test.tsx +32 -1
  395. package/src/Avatar/Avatar.tsx +14 -22
  396. package/src/Avatar/AvatarStatusDot.tsx +2 -2
  397. package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -0
  398. package/src/AvatarGroup/AvatarGroup.tsx +2 -2
  399. package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -2
  400. package/src/Banner/Banner.doc.mjs +8 -0
  401. package/src/Banner/Banner.test.tsx +38 -0
  402. package/src/Banner/Banner.tsx +8 -1
  403. package/src/Calendar/Calendar.doc.mjs +1 -1
  404. package/src/Calendar/Calendar.test.tsx +122 -17
  405. package/src/Calendar/Calendar.tsx +26 -5
  406. package/src/Calendar/dayCellUtils.ts +3 -1
  407. package/src/Calendar/styles.ts +12 -2
  408. package/src/Card/Card.doc.mjs +1 -1
  409. package/src/Card/Card.tsx +16 -6
  410. package/src/Carousel/Carousel.doc.mjs +12 -12
  411. package/src/Carousel/Carousel.test.tsx +13 -0
  412. package/src/Carousel/Carousel.tsx +4 -2
  413. package/src/Chat/Chat.doc.mjs +1 -1
  414. package/src/Chat/ChatComposerInput.test.tsx +27 -1
  415. package/src/Chat/ChatComposerInput.tsx +20 -15
  416. package/src/Chat/ChatDictationButton.test.tsx +43 -0
  417. package/src/Chat/ChatDictationButton.tsx +4 -4
  418. package/src/Chat/ChatLayoutScrollButton.test.tsx +33 -0
  419. package/src/Chat/ChatLayoutScrollButton.tsx +3 -1
  420. package/src/Chat/ChatMessageMetadata.test.tsx +32 -0
  421. package/src/Chat/ChatMessageMetadata.tsx +4 -6
  422. package/src/Chat/ChatSystemMessage.test.tsx +26 -11
  423. package/src/Chat/ChatSystemMessage.tsx +7 -7
  424. package/src/Chat/ChatTokenizedText.test.tsx +29 -16
  425. package/src/Chat/ChatTokenizedText.tsx +15 -8
  426. package/src/Chat/ChatToolCalls.test.tsx +55 -0
  427. package/src/Chat/ChatToolCalls.tsx +10 -12
  428. package/src/Chat/index.ts +1 -4
  429. package/src/Chat/useTriggerMenu.tsx +1 -4
  430. package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
  431. package/src/CheckboxInput/CheckboxInput.test.tsx +71 -4
  432. package/src/CheckboxInput/CheckboxInput.tsx +2 -0
  433. package/src/CheckboxList/CheckboxList.test.tsx +19 -0
  434. package/src/CheckboxList/CheckboxListItem.tsx +11 -2
  435. package/src/Citation/Citation.doc.mjs +5 -0
  436. package/src/ClickableCard/ClickableCard.tsx +45 -2
  437. package/src/CodeBlock/CodeBlock.doc.mjs +7 -2
  438. package/src/CodeBlock/CodeBlock.test.tsx +122 -3
  439. package/src/CodeBlock/CodeBlock.tsx +62 -4
  440. package/src/Collapsible/Collapsible.doc.mjs +8 -4
  441. package/src/Collapsible/Collapsible.test.tsx +403 -0
  442. package/src/Collapsible/Collapsible.tsx +85 -10
  443. package/src/Collapsible/CollapsibleGroup.doc.mjs +27 -3
  444. package/src/Collapsible/CollapsibleGroup.test.tsx +314 -0
  445. package/src/Collapsible/CollapsibleGroup.tsx +97 -9
  446. package/src/Collapsible/CollapsibleGroupContext.tsx +34 -2
  447. package/src/Collapsible/index.ts +1 -0
  448. package/src/Collapsible/useCollapsible.ts +20 -6
  449. package/src/CommandPalette/CommandPalette.doc.mjs +5 -0
  450. package/src/CommandPalette/CommandPalette.tsx +5 -3
  451. package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +5 -0
  452. package/src/CommandPalette/CommandPaletteGroup.doc.mjs +10 -0
  453. package/src/CommandPalette/CommandPaletteInput.doc.mjs +6 -0
  454. package/src/CommandPalette/CommandPaletteItem.doc.mjs +6 -0
  455. package/src/CommandPalette/CommandPaletteList.doc.mjs +9 -0
  456. package/src/ContextMenu/ContextMenu.doc.mjs +15 -0
  457. package/src/ContextMenu/ContextMenu.test.tsx +87 -0
  458. package/src/ContextMenu/ContextMenu.tsx +87 -28
  459. package/src/ContextMenu/ContextMenuItem.doc.mjs +6 -0
  460. package/src/DateInput/DateInput.test.tsx +11 -20
  461. package/src/DateRangeInput/DateRangeInput.doc.mjs +9 -6
  462. package/src/DateRangeInput/DateRangeInput.test.tsx +31 -44
  463. package/src/DateTimeInput/DateTimeInput.doc.mjs +3 -2
  464. package/src/DateTimeInput/DateTimeInput.test.tsx +118 -16
  465. package/src/DateTimeInput/DateTimeInput.tsx +8 -2
  466. package/src/DateTimeInput/index.ts +1 -0
  467. package/src/Dialog/Dialog.doc.mjs +4 -0
  468. package/src/Dialog/DialogHeader.doc.mjs +45 -0
  469. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
  470. package/src/DropdownMenu/DropdownMenu.test.tsx +22 -2
  471. package/src/DropdownMenu/DropdownMenuItem.tsx +5 -17
  472. package/src/EmptyState/EmptyState.doc.mjs +1 -1
  473. package/src/Field/Field.test.tsx +1 -4
  474. package/src/Field/FieldLabel.test.tsx +2 -2
  475. package/src/FieldStatus/FieldStatus.test.tsx +282 -0
  476. package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +0 -3
  477. package/src/Grid/Grid.test.tsx +43 -18
  478. package/src/Grid/Grid.tsx +26 -9
  479. package/src/HoverCard/HoverCard.doc.mjs +6 -6
  480. package/src/HoverCard/useHoverCard.doc.mjs +5 -5
  481. package/src/HoverCard/useHoverCard.tsx +9 -2
  482. package/src/Icon/Icon.test.tsx +41 -29
  483. package/src/Icon/Icon.tsx +6 -2
  484. package/src/InputGroup/InputGroup.doc.mjs +1 -0
  485. package/src/InputGroup/InputGroup.tsx +2 -2
  486. package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx +185 -0
  487. package/src/Item/Item.tsx +1 -1
  488. package/src/Layer/useLayer.doc.mjs +2 -2
  489. package/src/Layer/useLayer.test.tsx +221 -2
  490. package/src/Layer/useLayer.tsx +69 -30
  491. package/src/Layout/Layout.test.tsx +285 -0
  492. package/src/Layout/LayoutContent.doc.mjs +12 -0
  493. package/src/Layout/LayoutPanel.doc.mjs +40 -0
  494. package/src/Layout/LayoutSlots.test.tsx +364 -0
  495. package/src/Lightbox/Lightbox.doc.mjs +5 -0
  496. package/src/Lightbox/Lightbox.test.tsx +123 -2
  497. package/src/Lightbox/Lightbox.tsx +29 -1
  498. package/src/Lightbox/useLightbox.tsx +0 -1
  499. package/src/Link/Link.tsx +0 -2
  500. package/src/Markdown/Markdown.tsx +9 -7
  501. package/src/Markdown/parser.perf.test.ts +34 -12
  502. package/src/MobileNav/MobileNav.test.tsx +56 -0
  503. package/src/MobileNav/MobileNav.tsx +13 -8
  504. package/src/NavMenu/NavMenu.doc.mjs +15 -0
  505. package/src/NumberInput/NumberInput.test.tsx +48 -3
  506. package/src/NumberInput/NumberInput.tsx +32 -15
  507. package/src/Outline/Outline.doc.mjs +2 -0
  508. package/src/Outline/parseOutlineFromMarkdown.test.ts +80 -0
  509. package/src/OverflowList/OverflowList.test.tsx +416 -0
  510. package/src/Overlay/Overlay.doc.mjs +6 -0
  511. package/src/Overlay/Overlay.test.tsx +356 -0
  512. package/src/Overlay/useOverlay.tsx +0 -3
  513. package/src/Pagination/Pagination.test.tsx +162 -0
  514. package/src/Pagination/Pagination.tsx +80 -26
  515. package/src/Popover/Popover.doc.mjs +6 -6
  516. package/src/Popover/Popover.test.tsx +65 -0
  517. package/src/Popover/usePopover.doc.mjs +1 -1
  518. package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
  519. package/src/PowerSearch/PowerSearch.test.tsx +109 -1
  520. package/src/PowerSearch/PowerSearch.tsx +37 -16
  521. package/src/ProgressBar/ProgressBar.doc.mjs +2 -0
  522. package/src/ProgressBar/ProgressBar.test.tsx +30 -0
  523. package/src/ProgressBar/ProgressBar.tsx +12 -5
  524. package/src/RadioList/RadioList.test.tsx +19 -0
  525. package/src/RadioList/RadioListItem.tsx +9 -4
  526. package/src/Resizable/ResizeHandle.test.tsx +218 -0
  527. package/src/Resizable/ResizeHandle.tsx +22 -4
  528. package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
  529. package/src/SegmentedControl/SegmentedControl.test.tsx +192 -0
  530. package/src/SegmentedControl/SegmentedControl.tsx +27 -5
  531. package/src/SegmentedControl/SegmentedControlItem.tsx +9 -4
  532. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  533. package/src/Selector/Selector.test.tsx +27 -1
  534. package/src/SideNav/SideNav.doc.mjs +7 -1
  535. package/src/SideNav/SideNav.test.tsx +66 -0
  536. package/src/SideNav/SideNav.tsx +6 -2
  537. package/src/SideNav/SideNavCollapseButton.tsx +4 -3
  538. package/src/SideNav/SideNavSection.tsx +6 -4
  539. package/src/SizeContext/SizeContext.test.tsx +226 -0
  540. package/src/Switch/Switch.doc.mjs +7 -7
  541. package/src/Switch/Switch.test.tsx +102 -3
  542. package/src/Switch/Switch.tsx +20 -7
  543. package/src/TabList/TabList.test.tsx +185 -1
  544. package/src/TabList/TabMenu.tsx +45 -9
  545. package/src/Table/BaseTable.tsx +13 -2
  546. package/src/Table/Table.doc.mjs +6 -1
  547. package/src/Table/Table.test.tsx +87 -0
  548. package/src/Table/TableBody.tsx +15 -2
  549. package/src/Table/TableFooter.tsx +15 -2
  550. package/src/Table/TableHeader.tsx +15 -2
  551. package/src/Table/index.ts +5 -0
  552. package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +13 -0
  553. package/src/Table/plugins/columnResize/useTableColumnResize.tsx +3 -1
  554. package/src/Table/plugins/groupedRows/index.ts +7 -0
  555. package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx +231 -0
  556. package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +349 -0
  557. package/src/Table/plugins/pagination/paginateData.ts +5 -1
  558. package/src/Table/plugins/pagination/useTablePagination.test.tsx +13 -0
  559. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +1 -1
  560. package/src/Table/plugins/selection/useTableSelectionState.test.tsx +23 -0
  561. package/src/Table/plugins/selection/useTableSelectionState.tsx +11 -6
  562. package/src/Table/plugins/sortable/useTableSortableState.test.tsx +35 -1
  563. package/src/Table/plugins/sortable/useTableSortableState.tsx +8 -4
  564. package/src/Table/useTableGroupedRows.doc.mjs +71 -0
  565. package/src/TextArea/TextArea.test.tsx +3 -3
  566. package/src/TextInput/TextInput.test.tsx +3 -3
  567. package/src/Thumbnail/Thumbnail.test.tsx +36 -2
  568. package/src/Thumbnail/Thumbnail.tsx +4 -2
  569. package/src/TimeInput/TimeInput.test.tsx +37 -0
  570. package/src/TimeInput/TimeInput.tsx +11 -1
  571. package/src/Timestamp/Timestamp.doc.mjs +1 -1
  572. package/src/Timestamp/Timestamp.test.tsx +52 -0
  573. package/src/Timestamp/Timestamp.tsx +30 -16
  574. package/src/Toast/Toast.tsx +11 -3
  575. package/src/Toast/ToastViewport.test.tsx +64 -0
  576. package/src/Toast/ToastViewport.tsx +12 -0
  577. package/src/Toast/useToast.test.tsx +258 -0
  578. package/src/Toast/useToast.tsx +41 -0
  579. package/src/ToggleButton/ToggleButton.doc.mjs +1 -0
  580. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  581. package/src/Tokenizer/Tokenizer.test.tsx +54 -0
  582. package/src/Tokenizer/Tokenizer.tsx +5 -4
  583. package/src/Tooltip/Tooltip.doc.mjs +6 -6
  584. package/src/Tooltip/useTooltip.doc.mjs +5 -5
  585. package/src/Tooltip/useTooltip.tsx +12 -2
  586. package/src/TopNav/TopNav.doc.mjs +1 -1
  587. package/src/TopNav/TopNav.test.tsx +23 -7
  588. package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +9 -2
  589. package/src/TreeList/TreeList.doc.mjs +2 -2
  590. package/src/Typeahead/BaseTypeahead.doc.mjs +19 -0
  591. package/src/Typeahead/BaseTypeahead.tsx +5 -2
  592. package/src/Typeahead/Typeahead.doc.mjs +1 -1
  593. package/src/Typeahead/Typeahead.test.tsx +45 -1
  594. package/src/VisuallyHidden/VisuallyHidden.tsx +0 -3
  595. package/src/__tests__/TestIcon.tsx +26 -0
  596. package/src/__tests__/fastRoleQueries.ts +66 -0
  597. package/src/docPropReferences.test.ts +178 -0
  598. package/src/docs-types.ts +9 -1
  599. package/src/hooks/focusableSelector.ts +1 -1
  600. package/src/hooks/index.ts +3 -0
  601. package/src/hooks/useFocusTrap.doc.mjs +4 -2
  602. package/src/hooks/useFocusTrap.test.tsx +149 -1
  603. package/src/hooks/useFocusTrap.ts +50 -1
  604. package/src/hooks/useHotkeys.doc.mjs +52 -0
  605. package/src/hooks/useHotkeys.test.ts +245 -0
  606. package/src/hooks/useHotkeys.ts +203 -0
  607. package/src/hooks/useInteractiveRole.ts +12 -4
  608. package/src/hooks/useStreamingText.test.ts +54 -19
  609. package/src/hooks/useStreamingText.ts +16 -5
  610. package/src/hooks/useTreeFocus.test.tsx +1 -3
  611. package/src/reset.css +29 -0
  612. package/src/theme/SyntaxTheme.doc.mjs +4 -4
  613. package/src/theme/defineTheme.ts +4 -13
  614. package/src/theme/derivedVarRegistry.test.ts +2 -2
  615. package/src/theme/expandColorScale.test.ts +29 -0
  616. package/src/theme/expandColorScale.ts +11 -6
  617. package/src/theme/hct.ts +9 -17
  618. package/src/theme/themingTargets.test.ts +353 -0
  619. package/src/theme/tokens.test.ts +182 -9
  620. package/src/theme/tokens.ts +239 -4
  621. package/src/theme/useTheme.test.tsx +126 -2
  622. package/src/theme/useTheme.ts +87 -6
  623. package/src/utils/color.test.ts +133 -0
  624. package/src/utils/color.ts +148 -0
  625. package/src/utils/composeEventHandlers.test.ts +71 -0
  626. package/src/utils/composeEventHandlers.ts +44 -0
  627. package/src/utils/index.ts +4 -0
  628. package/src/utils/mergeProps.test.ts +166 -0
  629. package/src/utils/sharedResizeObserver.test.ts +2 -2
  630. package/src/utils/timeParser.test.ts +13 -0
  631. package/src/utils/timeParser.ts +8 -5
  632. package/dist/Carousel/carousel.markers.stylex.d.ts +0 -7
  633. package/dist/Carousel/carousel.markers.stylex.d.ts.map +0 -1
  634. package/dist/Carousel/carousel.markers.stylex.js +0 -12
  635. package/src/Carousel/carousel.markers.stylex.ts +0 -10
package/src/Toast/useToast.test.tsx ADDED
@@ -0,0 +1,258 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ /**
4
+ * @file useToast.test.tsx
5
+ * @input Uses vitest, @testing-library/react, useToast/ToastViewport/Theme
6
+ * @output Unit tests for the fallback viewport's theme mode resolution
7
+ * @position Testing; validates useToast.tsx's attribute mirroring onto the
8
+ * fallback container, plus useTheme.ts's <html data-theme> fallback (which
9
+ * is what actually resolves Toast's JS-computed mode; see useTheme.test.tsx
10
+ * for direct coverage of that half)
11
+ *
12
+ * SYNC: When useToast.tsx's fallback container setup changes, update these tests
13
+ *
14
+ * The fallback viewport root is a module-level singleton, so it's mounted
15
+ * once (by whichever test runs first) and persists across every test in the
16
+ * file below — mirroring a real app whose root <Theme> mode changes over
17
+ * time. Each test dismisses its own toast in afterEach (see
18
+ * dismissAllFallbackToasts) so none linger as a useTheme subscriber into the
19
+ * next test.
20
+ */
21
+
22
+ import {describe, it, expect, vi, afterEach} from 'vitest';
23
+ import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
24
+ import React from 'react';
25
+ import {Theme} from '../theme/Theme';
26
+ import {defineTheme} from '../theme/defineTheme';
27
+ import {ToastViewport} from './ToastViewport';
28
+ import {useToast} from './useToast';
29
+ import type {ToastOptions} from './types';
30
+
31
+ const testTheme = defineTheme({name: 'test', tokens: {}});
32
+ const NO_AUTO_HIDE: ToastOptions = {body: 'hello', isAutoHide: false};
33
+
34
+ function mockMatchMedia(prefersDark: boolean) {
35
+ window.matchMedia = vi.fn().mockImplementation((query: string) => ({
36
+ matches: query.includes('dark') ? prefersDark : false,
37
+ media: query,
38
+ onchange: null,
39
+ addEventListener: vi.fn(),
40
+ removeEventListener: vi.fn(),
41
+ dispatchEvent: vi.fn(),
42
+ }));
43
+ }
44
+
45
+ function ShowToastButton({label = 'Trigger'}: {label?: string}) {
46
+ const toast = useToast();
47
+ return (
48
+ <button type="button" onClick={() => toast(NO_AUTO_HIDE)}>
49
+ {label}
50
+ </button>
51
+ );
52
+ }
53
+
54
+ // The fallback's toasts accumulate in one persistent viewport across tests
55
+ // (see file header) — take the most recently added one.
56
+ function newestMediaAttr(scope: ParentNode): string | null {
57
+ const nodes = scope.querySelectorAll('[data-astryx-media]');
58
+ const last = nodes[nodes.length - 1];
59
+ return last ? last.getAttribute('data-astryx-media') : null;
60
+ }
61
+
62
+ // Fire the transition-end that ToastViewport listens for to unmount an
63
+ // exiting toast (jsdom does not run CSS transitions) — mirrors
64
+ // ToastViewport.test.tsx's completeExit helper.
65
+ function completeExit(toastId: string) {
66
+ const node = document.querySelector<HTMLElement>(
67
+ `[data-toast-id="${toastId}"]`,
68
+ );
69
+ if (node) {
70
+ fireEvent.transitionEnd(node, {propertyName: 'grid-template-rows'});
71
+ }
72
+ }
73
+
74
+ // Dismisses every toast still mounted in the fallback viewport so none of
75
+ // them remain subscribed to useTheme's shared MutationObserver by the time
76
+ // RTL's own cleanup unmounts this test's <Theme> — that unmount would
77
+ // otherwise notify a lingering subscriber outside any act scope.
78
+ async function dismissAllFallbackToasts(): Promise<void> {
79
+ const fallback = document.querySelector('[data-astryx-toast-fallback]');
80
+ const ids = Array.from(
81
+ fallback?.querySelectorAll<HTMLElement>('[data-toast-id]') ?? [],
82
+ ).map(node => node.getAttribute('data-toast-id')!);
83
+
84
+ await act(async () => {
85
+ for (const id of ids) {
86
+ fallback
87
+ ?.querySelector<HTMLElement>(
88
+ `[data-toast-id="${id}"] button[aria-label="Dismiss notification"]`,
89
+ )
90
+ ?.click();
91
+ }
92
+ });
93
+
94
+ await act(async () => {
95
+ for (const id of ids) {
96
+ completeExit(id);
97
+ }
98
+ });
99
+ }
100
+
101
+ describe('useToast fallback viewport theme mode', () => {
102
+ afterEach(async () => {
103
+ mockMatchMedia(false);
104
+ await dismissAllFallbackToasts();
105
+ });
106
+
107
+ it('resolves the app mode (light) instead of OS preference (dark) with no LayerProvider', async () => {
108
+ mockMatchMedia(true); // OS prefers dark
109
+
110
+ render(
111
+ <Theme theme={testTheme} mode="light">
112
+ <ShowToastButton />
113
+ </Theme>,
114
+ );
115
+
116
+ // This is the very first click in the whole file, so it's the one that
117
+ // finds the fallback proxy still pending: addToast queues the entry and
118
+ // kicks off the ctxReady.then(...) microtask that later delivers it to
119
+ // the real context. Awaiting an async act() here flushes that chain
120
+ // instead of letting it resolve outside any act scope.
121
+ await act(async () => {
122
+ fireEvent.click(screen.getByText('Trigger'));
123
+ });
124
+
125
+ await waitFor(() => {
126
+ expect(
127
+ document.querySelector(
128
+ '[data-astryx-toast-fallback] [data-astryx-media]',
129
+ ),
130
+ ).not.toBeNull();
131
+ });
132
+
133
+ // App mode is light, so the toast's inverted surface must be dark — if
134
+ // the fallback fell back to OS preference (dark) instead, this would be
135
+ // 'light' and the toast's text/icon would compute the same color as its
136
+ // own background (the invisible-toast bug).
137
+ expect(
138
+ newestMediaAttr(document.querySelector('[data-astryx-toast-fallback]')!),
139
+ ).toBe('dark');
140
+ });
141
+
142
+ it('keeps the OS-preference fallback for mode="system" with no LayerProvider', async () => {
143
+ mockMatchMedia(true); // OS prefers dark
144
+
145
+ render(
146
+ <Theme theme={testTheme} mode="system">
147
+ <ShowToastButton label="Trigger System" />
148
+ </Theme>,
149
+ );
150
+
151
+ // The fallback viewport is a persistent module singleton (see file
152
+ // header), so earlier tests may have already added toasts to it — count
153
+ // beforehand instead of assuming a fixed prior count, so this test
154
+ // survives running alone (.only, -t, shuffle) as well as in sequence.
155
+ const countBefore = document.querySelectorAll(
156
+ '[data-astryx-toast-fallback] [data-astryx-media]',
157
+ ).length;
158
+
159
+ act(() => {
160
+ fireEvent.click(screen.getByText('Trigger System'));
161
+ });
162
+
163
+ await waitFor(() => {
164
+ const nodes = document.querySelectorAll(
165
+ '[data-astryx-toast-fallback] [data-astryx-media]',
166
+ );
167
+ expect(nodes.length).toBeGreaterThan(countBefore);
168
+ });
169
+
170
+ // mode="system" means #1587 removes data-theme from <html> — useTheme's
171
+ // <html data-theme> fallback then has nothing to read, leaving its own
172
+ // OS-preference resolution (dark here) in place, same as before this fix.
173
+ expect(
174
+ newestMediaAttr(document.querySelector('[data-astryx-toast-fallback]')!),
175
+ ).toBe('light');
176
+ });
177
+
178
+ it('mirrors <html data-theme> and data-astryx-theme onto the fallback container', async () => {
179
+ mockMatchMedia(false);
180
+
181
+ const {rerender} = render(
182
+ <Theme theme={testTheme} mode="dark">
183
+ <ShowToastButton label="Trigger Mirror" />
184
+ </Theme>,
185
+ );
186
+
187
+ act(() => {
188
+ fireEvent.click(screen.getByText('Trigger Mirror'));
189
+ });
190
+
191
+ await waitFor(() => {
192
+ const fallback = document.querySelector(
193
+ '[data-astryx-toast-fallback]',
194
+ ) as HTMLElement;
195
+ expect(fallback.getAttribute('data-theme')).toBe('dark');
196
+ expect(fallback.getAttribute('data-astryx-theme')).toBe('test');
197
+ // Inline color-scheme must follow the mirrored mode, not <html>'s own
198
+ // (possibly #3658-pinned) theme CSS — see useToast.tsx's syncRootThemeAttrs.
199
+ expect(fallback.style.colorScheme).toBe('dark');
200
+ });
201
+
202
+ // Flip the app mode: the shared MutationObserver re-syncs the container,
203
+ // so the inline color-scheme must follow it live.
204
+ rerender(
205
+ <Theme theme={testTheme} mode="light">
206
+ <ShowToastButton label="Trigger Mirror" />
207
+ </Theme>,
208
+ );
209
+
210
+ await waitFor(() => {
211
+ const fallback = document.querySelector(
212
+ '[data-astryx-toast-fallback]',
213
+ ) as HTMLElement;
214
+ expect(fallback.getAttribute('data-theme')).toBe('light');
215
+ expect(fallback.style.colorScheme).toBe('light');
216
+ });
217
+
218
+ // mode="system" removes <html data-theme> entirely — the inline property
219
+ // must be removed too, reverting to whatever the CSS otherwise resolves.
220
+ rerender(
221
+ <Theme theme={testTheme} mode="system">
222
+ <ShowToastButton label="Trigger Mirror" />
223
+ </Theme>,
224
+ );
225
+
226
+ await waitFor(() => {
227
+ const fallback = document.querySelector(
228
+ '[data-astryx-toast-fallback]',
229
+ ) as HTMLElement;
230
+ expect(fallback.getAttribute('data-theme')).toBeNull();
231
+ expect(fallback.style.colorScheme).toBe('');
232
+ });
233
+ });
234
+ });
235
+
236
+ describe('useToast LayerProvider path', () => {
237
+ afterEach(() => {
238
+ mockMatchMedia(false);
239
+ });
240
+
241
+ it('resolves mode via real context, unaffected by the fallback provider', () => {
242
+ mockMatchMedia(true); // OS prefers dark; should be irrelevant here
243
+
244
+ const {container} = render(
245
+ <Theme theme={testTheme} mode="light">
246
+ <ToastViewport isTopLayer={false}>
247
+ <ShowToastButton label="Trigger Provider" />
248
+ </ToastViewport>
249
+ </Theme>,
250
+ );
251
+
252
+ act(() => {
253
+ fireEvent.click(screen.getByText('Trigger Provider'));
254
+ });
255
+
256
+ expect(newestMediaAttr(container)).toBe('dark');
257
+ });
258
+ });
package/src/Toast/useToast.tsx CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  import {useCallback, use, useEffect, useRef} from 'react';
6
6
  import {createRoot} from 'react-dom/client';
7
+ import {dataAttr} from '../naming';
7
8
  import {ToastContext, type ToastContextValue} from './ToastContext';
8
9
  import {ToastViewport} from './ToastViewport';
9
10
  import type {
@@ -18,6 +19,45 @@ let fallbackContext: ToastContextValue | null = null;
18
19
  let fallbackRoot: ReturnType<typeof createRoot> | null = null;
19
20
  let fallbackWarned = false;
20
21
 
22
+ const ROOT_THEME_ATTRS = ['data-theme', dataAttr('theme')] as const;
23
+
24
+ // The fallback container is a detached tree with no ThemeContext, so this
25
+ // mirrors <html>'s theme attributes onto it directly (live via
26
+ // MutationObserver) for the theme's @scope'd CSS to reach it. It's a
27
+ // lifetime-of-app singleton that's never torn down, so there's nothing to
28
+ // disconnect — this returns void.
29
+ function syncRootThemeAttrs(container: HTMLElement): void {
30
+ const sync = () => {
31
+ let mirroredMode: string | null = null;
32
+ for (const attr of ROOT_THEME_ATTRS) {
33
+ const value = document.documentElement.getAttribute(attr);
34
+ if (value == null) {
35
+ container.removeAttribute(attr);
36
+ } else {
37
+ container.setAttribute(attr, value);
38
+ if (attr === 'data-theme') {
39
+ mirroredMode = value;
40
+ }
41
+ }
42
+ }
43
+ // Pages whose built theme CSS pins color-scheme unconditionally (#3658)
44
+ // would otherwise resolve light-dark() tokens by OS preference while the
45
+ // mirrored mode above follows the app theme; the inline style wins over
46
+ // that CSS.
47
+ if (mirroredMode === 'light' || mirroredMode === 'dark') {
48
+ container.style.colorScheme = mirroredMode;
49
+ } else {
50
+ container.style.removeProperty('color-scheme');
51
+ }
52
+ };
53
+ sync();
54
+ const observer = new MutationObserver(sync);
55
+ observer.observe(document.documentElement, {
56
+ attributes: true,
57
+ attributeFilter: [...ROOT_THEME_ATTRS],
58
+ });
59
+ }
60
+
21
61
  function getFallbackContext(): ToastContextValue {
22
62
  if (fallbackContext) {
23
63
  return fallbackContext;
@@ -41,6 +81,7 @@ function getFallbackContext(): ToastContextValue {
41
81
  const container = document.createElement('div');
42
82
  container.setAttribute('data-astryx-toast-fallback', '');
43
83
  document.body.appendChild(container);
84
+ syncRootThemeAttrs(container);
44
85
 
45
86
  let resolveCtx: ((ctx: ToastContextValue) => void) | undefined;
46
87
  const ctxReady = new Promise<ToastContextValue>(r => {
package/src/ToggleButton/ToggleButton.doc.mjs CHANGED
@@ -17,6 +17,7 @@ export const docs = {
17
17
  theming: {
18
18
  targets: [
19
19
  {className: 'astryx-toggle-button-group'},
20
+ {className: 'astryx-toggle-button', states: ['isPressed']},
20
21
  ],
21
22
  },
22
23
  description: 'A button that toggles between pressed and unpressed states. Thin wrapper over Button with controlled toggle pattern, icon swap, and font weight emphasis.',
package/src/Tokenizer/Tokenizer.doc.mjs CHANGED
@@ -189,7 +189,7 @@ export const docs = {
189
189
  ],
190
190
  theming: {
191
191
  targets: [
192
- {className: 'astryx-tokenizer', visualProps: ['size']},
192
+ {className: 'astryx-tokenizer', visualProps: ['size', 'status']},
193
193
  ],
194
194
  },
195
195
  usage: {
@@ -390,7 +390,7 @@ export const docsZh = {
390
390
  ],
391
391
  theming: {
392
392
  targets: [
393
- {className: 'astryx-tokenizer', visualProps: ['size']},
393
+ {className: 'astryx-tokenizer', visualProps: ['size', 'status']},
394
394
  ],
395
395
  },
396
396
  usage: {
package/src/Tokenizer/Tokenizer.test.tsx CHANGED
@@ -479,6 +479,60 @@ describe('Tokenizer', () => {
479
479
  expect(screen.getByText('Charlie')).toBeInTheDocument();
480
480
  });
481
481
 
482
+ it('unfocusedLayer: RTL emits no justify-self into the inset-positioned popover', () => {
483
+ // The popover positions itself with explicit anchor() insets
484
+ // (positioning: 'custom'), so none of useLayer's placement-derived
485
+ // styles may reach it — an RTL justify-self with insets and no
486
+ // position-area would re-align the box inside the inset-modified
487
+ // containing block instead of hugging the anchor.
488
+ const original = window.getComputedStyle;
489
+ let root: HTMLElement | null = null;
490
+ const spy = vi
491
+ .spyOn(window, 'getComputedStyle')
492
+ .mockImplementation((el, pseudo) => {
493
+ const style = original(el, pseudo);
494
+ if (root && el instanceof Element && root.contains(el)) {
495
+ Object.defineProperty(style, 'direction', {
496
+ value: 'rtl',
497
+ configurable: true,
498
+ });
499
+ }
500
+ return style;
501
+ });
502
+
503
+ try {
504
+ const {container} = render(
505
+ <div style={{direction: 'rtl'}}>
506
+ <Tokenizer
507
+ label="Members"
508
+ searchSource={userSource}
509
+ value={[users[0], users[1], users[2]]}
510
+ onChange={() => {}}
511
+ tokenOverflowBehavior="unfocusedLayer"
512
+ data-testid="tokenizer"
513
+ />
514
+ </div>,
515
+ );
516
+ root = container.firstElementChild as HTMLElement;
517
+
518
+ fireEvent.focusIn(screen.getByTestId('tokenizer'));
519
+ expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
520
+
521
+ const popover = container.querySelector('[popover]');
522
+ const style = popover?.getAttribute('style') ?? '';
523
+ // jsdom drops anchor() values for known properties (top/left), so
524
+ // anchor the positive check on position-anchor instead. The negative
525
+ // checks are meaningful: jsdom serializes both justify-self and
526
+ // position-area when emitted (the DropdownMenu RTL test relies on it).
527
+ expect(style).toContain('position-anchor');
528
+ expect(style).not.toContain('justify-self');
529
+ expect(style).not.toContain('position-area');
530
+ expect(style).not.toContain('position-try-fallbacks');
531
+ } finally {
532
+ spy.mockRestore();
533
+ }
534
+ });
535
+
482
536
  it('unfocusedLayer: collapses on blur', () => {
483
537
  const {container} = render(
484
538
  <Tokenizer
package/src/Tokenizer/Tokenizer.tsx CHANGED
@@ -684,9 +684,11 @@ export function Tokenizer<T extends SearchableItem>({
684
684
  );
685
685
  });
686
686
 
687
+ // Self-authored position styles (positioning: 'custom' below): explicit
688
+ // anchor() insets pin the expanded layer over the field itself.
689
+ // `left` is physical, so this popover does not yet mirror in RTL —
690
+ // known follow-up from #3389.
687
691
  const popoverOverrideStyle: React.CSSProperties = {
688
- positionArea: undefined,
689
- positionTryFallbacks: undefined,
690
692
  top: 'anchor(top)',
691
693
  left: 'anchor(start)',
692
694
  };
@@ -846,8 +848,7 @@ export function Tokenizer<T extends SearchableItem>({
846
848
  {wrapperContent}
847
849
  </div>,
848
850
  {
849
- placement: 'below',
850
- alignment: 'start',
851
+ positioning: 'custom',
851
852
  xstyle: styles.layerPopover,
852
853
  style: popoverOverrideStyle,
853
854
  },
package/src/Tooltip/Tooltip.doc.mjs CHANGED
@@ -39,13 +39,13 @@ export const docs = {
39
39
  {
40
40
  name: 'placement',
41
41
  type: "'above' | 'below' | 'start' | 'end'",
42
- description: 'Position relative to the anchor element.',
42
+ description: "Position relative to the anchor element. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
43
43
  default: "'above'",
44
44
  },
45
45
  {
46
46
  name: 'alignment',
47
47
  type: "'start' | 'center' | 'end'",
48
- description: 'Alignment along the placement axis.',
48
+ description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
49
49
  default: "'center'",
50
50
  },
51
51
  {
@@ -138,13 +138,13 @@ export const docsZh = {
138
138
  {
139
139
  name: 'placement',
140
140
  type: "'above' | 'below' | 'start' | 'end'",
141
- description: '相对于锚点元素的位置。',
141
+ description: '相对于锚点元素的位置。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
142
142
  default: "'above'",
143
143
  },
144
144
  {
145
145
  name: 'alignment',
146
146
  type: "'start' | 'center' | 'end'",
147
- description: '沿放置轴的对齐方式。',
147
+ description: '沿放置轴的对齐方式。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
148
148
  default: "'center'",
149
149
  },
150
150
  {
@@ -230,8 +230,8 @@ export const docsDense = {
230
230
  children: 'Trigger element(s) that activate tooltip.',
231
231
  anchorRef: 'External anchor ref for sibling mode.',
232
232
  content: 'Tooltip content, typically short text.',
233
- placement: 'Position relative to anchor.',
234
- alignment: 'Alignment along placement axis.',
233
+ placement: 'Position relative to anchor. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
234
+ alignment: 'Alignment along placement axis. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
235
235
  delay: 'Show delay in ms.',
236
236
  hideDelay: 'Hide delay in ms.',
237
237
  focusTrigger: 'Controls when focus events trigger tooltip.',
package/src/Tooltip/useTooltip.doc.mjs CHANGED
@@ -7,8 +7,8 @@ export const docs = {
7
7
  group: 'Tooltip',
8
8
  keywords: ['tooltip', 'hint', 'label', 'hover', 'info', 'title', 'floating'],
9
9
  params: [
10
- {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: 'Position relative to the trigger.', default: "'above'"},
11
- {name: 'alignment', type: "'start' | 'center' | 'end'", description: 'Alignment along the placement axis.', default: "'center'"},
10
+ {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: "Position relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'above'"},
11
+ {name: 'alignment', type: "'start' | 'center' | 'end'", description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'center'"},
12
12
  {name: 'delay', type: 'number', description: 'Delay before showing on hover, in milliseconds.', default: '200'},
13
13
  {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '0'},
14
14
  {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the tooltip. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
@@ -24,7 +24,7 @@ export const docs = {
24
24
  {name: 'interactionRef', type: 'RefCallback<HTMLElement>', description: 'Ref for the hover/focus interaction element.'},
25
25
  {name: 'anchorId', type: 'string', description: 'CSS anchor name for advanced positioning cases.'},
26
26
  {name: 'describedBy', type: 'string', description: 'ID to compose into aria-describedby on the trigger.'},
27
- {name: 'renderTooltip', type: '(children: ReactNode, props?: ContextRenderProps) => ReactNode', description: 'Render function for the anchor-positioned tooltip content.'},
27
+ {name: 'renderTooltip', type: "(children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode", description: 'Render function for the anchor-positioned tooltip content. The positioning opt-out is excluded: the tooltip always derives its position from placement/alignment.'},
28
28
  ],
29
29
  usage: {
30
30
  description: 'Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use for custom trigger elements that need tooltip behavior without the wrapper component.',
@@ -44,8 +44,8 @@ export const docs = {
44
44
  export const docsDense = {
45
45
  description: 'Headless hover/focus tooltip hook. Builds on useLayer w/ hover intent, keyboard focus handling, aria-describedby. Use for custom triggers without wrapper component.',
46
46
  paramDescriptions: {
47
- placement: 'position relative to trigger.',
48
- alignment: 'alignment along placement axis.',
47
+ placement: 'position relative to trigger. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
48
+ alignment: 'alignment along placement axis. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
49
49
  delay: 'show delay in ms.',
50
50
  hideDelay: 'hide delay after mouse/focus leave in ms.',
51
51
  focusTrigger: 'when focus opens tooltip; auto = naturally focusable elements only.',
package/src/Tooltip/useTooltip.tsx CHANGED
@@ -190,8 +190,15 @@ export interface TooltipReturn {
190
190
  /**
191
191
  * Render function for tooltip content.
192
192
  * Returns anchor-positioned popover element.
193
+ *
194
+ * `positioning` is excluded: the tooltip always derives its position from
195
+ * placement/alignment, so accepting the custom opt-out here would be a
196
+ * silent no-op.
193
197
  */
194
- renderTooltip: (children: ReactNode, props?: ContextRenderProps) => ReactNode;
198
+ renderTooltip: (
199
+ children: ReactNode,
200
+ props?: Omit<ContextRenderProps, 'positioning'>,
201
+ ) => ReactNode;
195
202
  }
196
203
 
197
204
  /**
@@ -463,7 +470,10 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
463
470
 
464
471
  // Render function that wraps layer.render with tooltip styling
465
472
  const renderTooltip = useCallback(
466
- (children: ReactNode, props?: ContextRenderProps): ReactNode => {
473
+ (
474
+ children: ReactNode,
475
+ props?: Omit<ContextRenderProps, 'positioning'>,
476
+ ): ReactNode => {
467
477
  const renderPlacement = props?.placement ?? placement;
468
478
  const renderProps = {
469
479
  placement: renderPlacement,
package/src/TopNav/TopNav.doc.mjs CHANGED
@@ -17,7 +17,7 @@ export const docs = {
17
17
  theming: {
18
18
  targets: [
19
19
  {className: 'astryx-top-nav', states: ['mode']},
20
- {className: 'astryx-top-nav-item', states: ['mode']},
20
+ {className: 'astryx-top-nav-item', states: ['mode', 'selected']},
21
21
  {className: 'astryx-top-nav-heading'},
22
22
  {className: 'astryx-top-nav-mega-menu', states: ['mode']},
23
23
  {className: 'astryx-top-nav-mega-menu-item', states: ['mode']},
package/src/TopNav/TopNav.test.tsx CHANGED
@@ -16,6 +16,7 @@ import {TopNav} from './TopNav';
16
16
  import {TopNavHeading} from './TopNavHeading';
17
17
  import {NavIcon} from '../NavIcon';
18
18
  import {TopNavItem} from './TopNavItem';
19
+ import {TopNavMegaMenuFeaturedCard} from './TopNavMegaMenuFeaturedCard';
19
20
  import {LinkProvider} from '../Link/LinkProvider';
20
21
 
21
22
  function CustomLink({
@@ -45,9 +46,7 @@ describe('TopNav', () => {
45
46
  });
46
47
 
47
48
  it('renders heading slot content', () => {
48
- render(
49
- <TopNav heading={<span data-testid="title-content">Logo</span>} />,
50
- );
49
+ render(<TopNav heading={<span data-testid="title-content">Logo</span>} />);
51
50
  expect(screen.getByTestId('title-content')).toBeInTheDocument();
52
51
  });
53
52
 
@@ -242,7 +241,9 @@ describe('TopNavHeading', () => {
242
241
  });
243
242
 
244
243
  it('names a logo-only link via logoLabel', () => {
245
- render(<TopNavHeading logo={logo} headingHref="/home" logoLabel="Home" />);
244
+ render(
245
+ <TopNavHeading logo={logo} headingHref="/home" logoLabel="Home" />,
246
+ );
246
247
  expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute(
247
248
  'href',
248
249
  '/home',
@@ -294,9 +295,7 @@ describe('TopNavItem', () => {
294
295
  });
295
296
 
296
297
  it('renders children instead of label when provided', () => {
297
- render(
298
- <TopNavItem label="Accessible name">Custom content</TopNavItem>,
299
- );
298
+ render(<TopNavItem label="Accessible name">Custom content</TopNavItem>);
300
299
  expect(screen.getByText('Custom content')).toBeInTheDocument();
301
300
  });
302
301
 
@@ -398,4 +397,21 @@ describe('TopNavItem', () => {
398
397
  expect(link).toHaveAttribute('data-custom-link');
399
398
  expect(link).not.toHaveAttribute('data-another-link');
400
399
  });
400
+
401
+ describe('TopNavMegaMenuFeaturedCard rest forwarding', () => {
402
+ it('forwards data-testid, id, and aria-* to the root element', () => {
403
+ render(
404
+ <TopNavMegaMenuFeaturedCard
405
+ title="What's new"
406
+ description="Details"
407
+ data-testid="featured-card"
408
+ id="card-1"
409
+ aria-label="Featured"
410
+ />,
411
+ );
412
+ const card = screen.getByTestId('featured-card');
413
+ expect(card).toHaveAttribute('id', 'card-1');
414
+ expect(card).toHaveAttribute('aria-label', 'Featured');
415
+ });
416
+ });
401
417
  });
package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx CHANGED
@@ -132,6 +132,10 @@ export function TopNavMegaMenuFeaturedCard({
132
132
  linkLabel,
133
133
  linkHref,
134
134
  children,
135
+ xstyle,
136
+ className,
137
+ style,
138
+ ...rest
135
139
  }: TopNavMegaMenuFeaturedCardProps) {
136
140
  const LinkComponent = useLinkComponent();
137
141
  return (
@@ -139,8 +143,11 @@ export function TopNavMegaMenuFeaturedCard({
139
143
  ref={ref}
140
144
  {...mergeProps(
141
145
  themeProps('top-nav-mega-menu-featured-card'),
142
- stylex.props(styles.root),
143
- )}>
146
+ stylex.props(styles.root, xstyle),
147
+ className,
148
+ style,
149
+ )}
150
+ {...rest}>
144
151
  {image && (
145
152
  <img src={image} alt={imageAlt ?? ''} {...stylex.props(styles.image)} />
146
153
  )}
package/src/TreeList/TreeList.doc.mjs CHANGED
@@ -25,7 +25,7 @@ export const docs = {
25
25
  theming: {
26
26
  targets: [
27
27
  {className: 'astryx-tree-list', visualProps: ['density']},
28
- {className: 'astryx-tree-list-item', states: ['selected', 'disabled']},
28
+ {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
29
29
  ],
30
30
  },
31
31
  components: [
@@ -89,7 +89,7 @@ export const docsZh = {
89
89
  theming: {
90
90
  targets: [
91
91
  {className: 'astryx-tree-list', visualProps: ['density']},
92
- {className: 'astryx-tree-list-item', states: ['selected', 'disabled']},
92
+ {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
93
93
  ],
94
94
  },
95
95
  components: [