@astryxdesign/core 0.1.4-canary.f5fcc51 → 0.1.4-canary.f767ee2

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 (189) hide show
  1. package/dist/Banner/Banner.d.ts.map +1 -1
  2. package/dist/Banner/Banner.js +8 -1
  3. package/dist/Calendar/Calendar.js +6 -2
  4. package/dist/Carousel/Carousel.d.ts.map +1 -1
  5. package/dist/Carousel/Carousel.js +1 -0
  6. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  7. package/dist/Chat/ChatToolCalls.js +8 -1
  8. package/dist/CodeBlock/CodeBlock.d.ts +10 -1
  9. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  10. package/dist/CodeBlock/CodeBlock.js +23 -5
  11. package/dist/Collapsible/Collapsible.d.ts +2 -1
  12. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  13. package/dist/Collapsible/Collapsible.js +11 -2
  14. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  15. package/dist/ContextMenu/ContextMenu.js +2 -0
  16. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  17. package/dist/DateTimeInput/DateTimeInput.js +2 -0
  18. package/dist/Grid/Grid.d.ts +4 -3
  19. package/dist/Grid/Grid.d.ts.map +1 -1
  20. package/dist/Grid/Grid.js +26 -9
  21. package/dist/Icon/Icon.d.ts.map +1 -1
  22. package/dist/Icon/Icon.js +5 -1
  23. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  24. package/dist/Lightbox/Lightbox.js +26 -2
  25. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  26. package/dist/NumberInput/NumberInput.js +32 -16
  27. package/dist/Pagination/Pagination.d.ts.map +1 -1
  28. package/dist/Pagination/Pagination.js +87 -36
  29. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  30. package/dist/ProgressBar/ProgressBar.js +2 -1
  31. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  32. package/dist/Resizable/ResizeHandle.js +10 -2
  33. package/dist/SideNav/SideNav.d.ts.map +1 -1
  34. package/dist/SideNav/SideNav.js +6 -2
  35. package/dist/TabList/TabMenu.d.ts.map +1 -1
  36. package/dist/TabList/TabMenu.js +34 -7
  37. package/dist/Table/BaseTable.d.ts.map +1 -1
  38. package/dist/Table/BaseTable.js +6 -2
  39. package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
  40. package/dist/Table/plugins/columnResize/useTableColumnResize.js +5 -2
  41. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  42. package/dist/Table/plugins/pagination/paginateData.js +5 -1
  43. package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
  44. package/dist/Table/plugins/selection/useTableSelectionState.js +11 -1
  45. package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
  46. package/dist/Table/plugins/sortable/useTableSortableState.js +8 -4
  47. package/dist/Thumbnail/Thumbnail.d.ts +3 -2
  48. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  49. package/dist/Thumbnail/Thumbnail.js +1 -0
  50. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  51. package/dist/TimeInput/TimeInput.js +6 -1
  52. package/dist/Toast/Toast.d.ts.map +1 -1
  53. package/dist/Toast/Toast.js +11 -3
  54. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  55. package/dist/Toast/ToastViewport.js +12 -0
  56. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  57. package/dist/Typeahead/BaseTypeahead.js +5 -2
  58. package/dist/astryx.umd.js +46 -46
  59. package/dist/astryx.umd.js.map +4 -4
  60. package/dist/hooks/focusableSelector.d.ts +1 -1
  61. package/dist/hooks/focusableSelector.d.ts.map +1 -1
  62. package/dist/hooks/focusableSelector.js +1 -1
  63. package/dist/hooks/useFocusTrap.d.ts +3 -0
  64. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  65. package/dist/hooks/useFocusTrap.js +38 -1
  66. package/dist/theme/defineTheme.d.ts +1 -1
  67. package/dist/theme/defineTheme.d.ts.map +1 -1
  68. package/dist/theme/expandColorScale.d.ts.map +1 -1
  69. package/dist/theme/expandColorScale.js +10 -3
  70. package/dist/theme/hct.d.ts +0 -15
  71. package/dist/theme/hct.d.ts.map +1 -1
  72. package/dist/theme/hct.js +9 -9
  73. package/dist/theme/tokens.d.ts +10 -2
  74. package/dist/theme/tokens.d.ts.map +1 -1
  75. package/dist/theme/tokens.js +220 -4
  76. package/dist/utils/color.d.ts +42 -0
  77. package/dist/utils/color.d.ts.map +1 -0
  78. package/dist/utils/color.js +150 -0
  79. package/dist/utils/index.d.ts +2 -0
  80. package/dist/utils/index.d.ts.map +1 -1
  81. package/dist/utils/index.js +2 -1
  82. package/dist/utils/timeParser.d.ts.map +1 -1
  83. package/dist/utils/timeParser.js +8 -5
  84. package/package.json +1 -1
  85. package/src/Avatar/Avatar.doc.mjs +11 -0
  86. package/src/Banner/Banner.doc.mjs +8 -0
  87. package/src/Banner/Banner.test.tsx +38 -0
  88. package/src/Banner/Banner.tsx +8 -1
  89. package/src/Calendar/Calendar.test.tsx +39 -4
  90. package/src/Calendar/Calendar.tsx +7 -2
  91. package/src/Carousel/Carousel.doc.mjs +12 -12
  92. package/src/Carousel/Carousel.test.tsx +13 -0
  93. package/src/Carousel/Carousel.tsx +1 -0
  94. package/src/Chat/Chat.doc.mjs +1 -1
  95. package/src/Chat/ChatToolCalls.test.tsx +55 -0
  96. package/src/Chat/ChatToolCalls.tsx +10 -12
  97. package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
  98. package/src/Citation/Citation.doc.mjs +5 -0
  99. package/src/CodeBlock/CodeBlock.doc.mjs +7 -2
  100. package/src/CodeBlock/CodeBlock.test.tsx +87 -3
  101. package/src/CodeBlock/CodeBlock.tsx +43 -3
  102. package/src/Collapsible/Collapsible.doc.mjs +3 -3
  103. package/src/Collapsible/Collapsible.tsx +19 -2
  104. package/src/Collapsible/CollapsibleGroup.test.tsx +16 -0
  105. package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +5 -0
  106. package/src/CommandPalette/CommandPaletteGroup.doc.mjs +10 -0
  107. package/src/CommandPalette/CommandPaletteInput.doc.mjs +6 -0
  108. package/src/CommandPalette/CommandPaletteItem.doc.mjs +6 -0
  109. package/src/CommandPalette/CommandPaletteList.doc.mjs +9 -0
  110. package/src/ContextMenu/ContextMenu.doc.mjs +15 -0
  111. package/src/ContextMenu/ContextMenu.test.tsx +15 -0
  112. package/src/ContextMenu/ContextMenu.tsx +2 -0
  113. package/src/ContextMenu/ContextMenuItem.doc.mjs +6 -0
  114. package/src/DateTimeInput/DateTimeInput.test.tsx +70 -0
  115. package/src/DateTimeInput/DateTimeInput.tsx +2 -0
  116. package/src/Dialog/DialogHeader.doc.mjs +45 -0
  117. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
  118. package/src/Grid/Grid.test.tsx +43 -18
  119. package/src/Grid/Grid.tsx +26 -9
  120. package/src/Icon/Icon.test.tsx +23 -11
  121. package/src/Icon/Icon.tsx +6 -2
  122. package/src/Layout/LayoutContent.doc.mjs +12 -0
  123. package/src/Layout/LayoutPanel.doc.mjs +40 -0
  124. package/src/Lightbox/Lightbox.doc.mjs +5 -0
  125. package/src/Lightbox/Lightbox.test.tsx +123 -2
  126. package/src/Lightbox/Lightbox.tsx +29 -1
  127. package/src/NavMenu/NavMenu.doc.mjs +6 -0
  128. package/src/NumberInput/NumberInput.test.tsx +45 -0
  129. package/src/NumberInput/NumberInput.tsx +32 -15
  130. package/src/Overlay/Overlay.doc.mjs +6 -0
  131. package/src/Pagination/Pagination.test.tsx +143 -0
  132. package/src/Pagination/Pagination.tsx +75 -23
  133. package/src/Popover/Popover.test.tsx +65 -0
  134. package/src/ProgressBar/ProgressBar.test.tsx +10 -0
  135. package/src/ProgressBar/ProgressBar.tsx +2 -1
  136. package/src/Resizable/ResizeHandle.test.tsx +180 -0
  137. package/src/Resizable/ResizeHandle.tsx +10 -2
  138. package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
  139. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  140. package/src/SideNav/SideNav.doc.mjs +7 -1
  141. package/src/SideNav/SideNav.test.tsx +20 -0
  142. package/src/SideNav/SideNav.tsx +6 -2
  143. package/src/TabList/TabList.test.tsx +185 -1
  144. package/src/TabList/TabMenu.tsx +45 -9
  145. package/src/Table/BaseTable.tsx +5 -1
  146. package/src/Table/Table.test.tsx +28 -0
  147. package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +13 -0
  148. package/src/Table/plugins/columnResize/useTableColumnResize.tsx +3 -1
  149. package/src/Table/plugins/pagination/paginateData.ts +5 -1
  150. package/src/Table/plugins/pagination/useTablePagination.test.tsx +13 -0
  151. package/src/Table/plugins/selection/useTableSelectionState.test.tsx +23 -0
  152. package/src/Table/plugins/selection/useTableSelectionState.tsx +11 -6
  153. package/src/Table/plugins/sortable/useTableSortableState.test.tsx +35 -1
  154. package/src/Table/plugins/sortable/useTableSortableState.tsx +8 -4
  155. package/src/Thumbnail/Thumbnail.test.tsx +36 -2
  156. package/src/Thumbnail/Thumbnail.tsx +4 -2
  157. package/src/TimeInput/TimeInput.test.tsx +37 -0
  158. package/src/TimeInput/TimeInput.tsx +11 -1
  159. package/src/Timestamp/Timestamp.doc.mjs +1 -1
  160. package/src/Toast/Toast.tsx +11 -3
  161. package/src/Toast/ToastViewport.test.tsx +64 -0
  162. package/src/Toast/ToastViewport.tsx +12 -0
  163. package/src/ToggleButton/ToggleButton.doc.mjs +1 -0
  164. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  165. package/src/TopNav/TopNav.doc.mjs +1 -1
  166. package/src/TreeList/TreeList.doc.mjs +2 -2
  167. package/src/Typeahead/BaseTypeahead.doc.mjs +13 -4
  168. package/src/Typeahead/BaseTypeahead.tsx +5 -2
  169. package/src/Typeahead/Typeahead.doc.mjs +1 -1
  170. package/src/Typeahead/Typeahead.test.tsx +45 -1
  171. package/src/docPropReferences.test.ts +178 -0
  172. package/src/hooks/focusableSelector.ts +1 -1
  173. package/src/hooks/useFocusTrap.doc.mjs +4 -2
  174. package/src/hooks/useFocusTrap.test.tsx +149 -1
  175. package/src/hooks/useFocusTrap.ts +50 -1
  176. package/src/theme/SyntaxTheme.doc.mjs +4 -4
  177. package/src/theme/defineTheme.ts +4 -13
  178. package/src/theme/derivedVarRegistry.test.ts +2 -2
  179. package/src/theme/expandColorScale.test.ts +29 -0
  180. package/src/theme/expandColorScale.ts +11 -6
  181. package/src/theme/hct.ts +9 -17
  182. package/src/theme/tokens.test.ts +182 -9
  183. package/src/theme/tokens.ts +239 -4
  184. package/src/theme/useTheme.test.tsx +20 -0
  185. package/src/utils/color.test.ts +133 -0
  186. package/src/utils/color.ts +148 -0
  187. package/src/utils/index.ts +3 -0
  188. package/src/utils/timeParser.test.ts +13 -0
  189. package/src/utils/timeParser.ts +8 -5
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Hb;yBA1Ie,MAAM"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAiIb;yBAjJe,MAAM"}
@@ -30,7 +30,7 @@
30
30
  * - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
31
31
  * - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
32
32
  */
33
- import { useState } from 'react';
33
+ import { useId, useState } from 'react';
34
34
  import * as stylex from '@stylexjs/stylex';
35
35
  import { Button } from "../Button/index.js";
36
36
  import { Icon } from "../Icon/index.js";
@@ -249,6 +249,11 @@ export function Banner({
249
249
  }) {
250
250
  const [isDismissed, setIsDismissed] = useState(false);
251
251
  const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
252
+ // Links the expand/collapse toggle to the content region it shows/hides so
253
+ // assistive tech can move from the button to its controlled content
254
+ // (disclosure pattern). The region is conditionally rendered, so aria-controls
255
+ // below is set only while it's mounted to avoid a dangling reference.
256
+ const contentId = useId();
252
257
  const defaultIconName = defaultIconNames[status];
253
258
  const role = statusRole[status];
254
259
  const iconColor = statusIconColor[status];
@@ -333,6 +338,7 @@ export function Banner({
333
338
  }),
334
339
  onClick: handleToggleExpand,
335
340
  "aria-expanded": isExpanded,
341
+ "aria-controls": showContent ? contentId : undefined,
336
342
  isIconOnly: true
337
343
  }), isDismissable && /*#__PURE__*/_jsx(Button, {
338
344
  variant: "ghost",
@@ -349,6 +355,7 @@ export function Banner({
349
355
  })]
350
356
  })]
351
357
  }), showContent && /*#__PURE__*/_jsx("div", {
358
+ id: contentId,
352
359
  ...mergeProps(themeProps('banner-content', {
353
360
  container,
354
361
  status
@@ -650,6 +650,7 @@ function DayCell({
650
650
  });
651
651
  return /*#__PURE__*/_jsxs("div", {
652
652
  role: "gridcell",
653
+ "aria-selected": state.isSelected || state.isInRange || undefined,
653
654
  ...stylex.props(dayCellStyles.cell),
654
655
  children: [state.isInRange && /*#__PURE__*/_jsx("div", {
655
656
  ...stylex.props(dayCellStyles.rangeBg, dayCellTheme.rangeBg, rangeRounding.roundLeft && dayCellStyles.rangeBgRadiusLeft, rangeRounding.roundRight && dayCellStyles.rangeBgRadiusRight, state.isRangeStart && dayCellStyles.rangeInsetLeft, state.isRangeStart && rangeRounding.roundRight && dayCellStyles.rangeInsetRight, state.isRangeEnd && dayCellStyles.rangeInsetRight, state.isRangeStart && rangeRounding.roundLeft && dayCellStyles.rangeInsetLeft)
@@ -659,8 +660,11 @@ function DayCell({
659
660
  type: "button",
660
661
  "data-date": day.iso,
661
662
  "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
662
- "aria-selected": state.isSelected || state.isInRange || undefined,
663
- "aria-disabled": state.effectivelyDisabled || undefined,
663
+ "aria-disabled": state.effectivelyDisabled || undefined
664
+ // Mark today's cell programmatically (APG date-picker pattern), not just
665
+ // visually, so screen-reader users can identify the current date.
666
+ ,
667
+ "aria-current": state.isToday ? 'date' : undefined,
664
668
  disabled: isDisabled
665
669
  // Initial roving tab-stop seed; useGridFocus owns it after mount.
666
670
  ,
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA+If;yBA7Je,QAAQ"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAgJf;yBA9Je,QAAQ"}
@@ -264,6 +264,7 @@ export function Carousel({
264
264
  ...htmlProps,
265
265
  children: [/*#__PURE__*/_jsx("div", {
266
266
  ref: composedRef,
267
+ tabIndex: 0,
267
268
  ...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
268
269
  children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
269
270
  ...{
@@ -1 +1 @@
1
- {"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,CAAC;AAEZ,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAsXD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BAkJtD;yBAlJe,aAAa"}
1
+ {"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAqXD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BAqJtD;yBArJe,aAAa"}
@@ -17,7 +17,7 @@
17
17
  * data prop matches that shape directly — no nested compound components
18
18
  * for builders to wire up.
19
19
  */
20
- import React, { useState, useCallback } from 'react';
20
+ import React, { useState, useCallback, useId } from 'react';
21
21
  import * as stylex from '@stylexjs/stylex';
22
22
  import "../theme/tokens.stylex.js";
23
23
  import { colorVars, spacingVars, typeScaleVars, typographyVars, fontWeightVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -106,10 +106,13 @@ function CallRow({
106
106
  const status = call.status ?? 'complete';
107
107
  const hasDetail = call.resultDetail != null;
108
108
  const [isDetailOpen, setIsDetailOpen] = useState(false);
109
+ const detailId = useId();
109
110
  const toggleDetail = hasDetail ? () => setIsDetailOpen(prev => !prev) : undefined;
110
111
  const row = /*#__PURE__*/_jsxs("div", {
111
112
  role: hasDetail ? 'button' : undefined,
112
113
  tabIndex: hasDetail ? 0 : undefined,
114
+ "aria-expanded": hasDetail ? isDetailOpen : undefined,
115
+ "aria-controls": hasDetail && isDetailOpen ? detailId : undefined,
113
116
  onClick: toggleDetail,
114
117
  onKeyDown: hasDetail ? e => {
115
118
  if (e.key === 'Enter' || e.key === ' ') {
@@ -205,6 +208,7 @@ function CallRow({
205
208
  }
206
209
  return /*#__PURE__*/_jsxs("div", {
207
210
  children: [row, isDetailOpen && /*#__PURE__*/_jsx("div", {
211
+ id: detailId,
208
212
  ...{
209
213
  className: "x1f43n9v x1wesfrj"
210
214
  },
@@ -253,6 +257,7 @@ export function ChatToolCalls(props) {
253
257
  } = props;
254
258
  const autoDefault = defaultIsExpanded ?? false;
255
259
  const [internalExpanded, setInternalExpanded] = useState(autoDefault);
260
+ const contentId = useId();
256
261
  const isControlled = controlledExpanded !== undefined;
257
262
  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
258
263
  const toggle = useCallback(() => {
@@ -289,6 +294,7 @@ export function ChatToolCalls(props) {
289
294
  role: "button",
290
295
  tabIndex: 0,
291
296
  "aria-expanded": isExpanded,
297
+ "aria-controls": contentId,
292
298
  onClick: toggle,
293
299
  onKeyDown: e => {
294
300
  if (e.key === 'Enter' || e.key === ' ') {
@@ -378,6 +384,7 @@ export function ChatToolCalls(props) {
378
384
  })
379
385
  })]
380
386
  }), /*#__PURE__*/_jsx("div", {
387
+ id: contentId,
381
388
  ...{
382
389
  0: {
383
390
  className: "xrvj5dj xihq33y xb0j27v"
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import type { BaseProps } from '../BaseProps';
3
+ import { type SyntaxThemeDefinition } from '../theme/syntax';
3
4
  export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
4
5
  ref?: React.Ref<HTMLPreElement>;
5
6
  code: string;
@@ -39,6 +40,14 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
39
40
  end: number;
40
41
  }[];
41
42
  highlightMode?: 'auto' | 'ranges' | 'spans';
43
+ /**
44
+ * Per-instance syntax theme override. Shorthand for wrapping this block in
45
+ * `<SyntaxTheme theme={...}>` — accepts a preset from
46
+ * `@astryxdesign/core/theme/syntax` or a theme created with
47
+ * `defineSyntaxTheme()`. Without it, the block uses the theme-level syntax
48
+ * colors from the nearest SyntaxTheme ancestor or `defineTheme({ syntax })`.
49
+ */
50
+ syntaxTheme?: SyntaxThemeDefinition;
42
51
  }
43
52
  /**
44
53
  * Read-only code display with syntax highlighting, line numbers,
@@ -49,7 +58,7 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
49
58
  * <CodeBlock code="const x = 42;" language="javascript" />
50
59
  * ```
51
60
  */
52
- export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
61
+ export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
53
62
  export declare namespace CodeBlock {
54
63
  var displayName: string;
55
64
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsU5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAgOD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAkMhB;yBAzNe,SAAS"}
1
+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAyTxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAgOD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAmNhB;yBA3Oe,SAAS"}
@@ -4,21 +4,23 @@
4
4
 
5
5
  /**
6
6
  * @file CodeBlock.tsx
7
- * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
7
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API, SyntaxTheme provider
8
8
  * @output Exports CodeBlock component and CodeBlockProps
9
9
  * @position Core implementation; read-only syntax-highlighted code display
10
10
  */
11
- import { useInsertionEffect, useEffect, useRef, useState, useCallback, useMemo } from 'react';
11
+ import { useInsertionEffect, useEffect, useId, useRef, useState, useCallback, useMemo } from 'react';
12
12
  import * as React from 'react';
13
13
  import * as stylex from '@stylexjs/stylex';
14
14
  import "../theme/tokens.stylex.js";
15
15
  import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
16
16
  import { mergeProps } from "../utils/index.js";
17
+ import { useAnnounce } from "../hooks/useAnnounce.js";
17
18
  import { Icon } from "../Icon/index.js";
18
19
  import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
19
20
  import { ensureHighlightStyles } from "./highlightStyles.js";
20
21
  import { applyHighlightRangesChunked } from "./highlightRanges.js";
21
22
  import { themeProps } from "../utils/themeProps.js";
23
+ import { SyntaxTheme } from "../theme/syntax/index.js";
22
24
 
23
25
  // ---------------------------------------------------------------------------
24
26
  // Styles
@@ -369,6 +371,7 @@ export function CodeBlock({
369
371
  container = 'card',
370
372
  tokenizer: customTokenizer,
371
373
  highlightMode = 'auto',
374
+ syntaxTheme,
372
375
  xstyle,
373
376
  className,
374
377
  style,
@@ -376,6 +379,7 @@ export function CodeBlock({
376
379
  ...props
377
380
  }) {
378
381
  const [copied, setCopied] = useState(false);
382
+ const announce = useAnnounce();
379
383
  const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
380
384
  const lines = useMemo(() => {
381
385
  const l = code.split('\n');
@@ -390,18 +394,26 @@ export function CodeBlock({
390
394
  try {
391
395
  await navigator.clipboard.writeText(code);
392
396
  setCopied(true);
397
+ // Swapping the button's aria-label alone isn't reliably announced by
398
+ // screen readers, so confirm the copy via a polite live region.
399
+ announce('Copied');
393
400
  onCopy?.();
394
401
  setTimeout(() => setCopied(false), 2000);
395
402
  } catch {
396
403
  // Clipboard failures leave the copied state unchanged.
397
404
  }
398
- }, [code, onCopy]);
405
+ }, [code, onCopy, announce]);
399
406
  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
400
407
  const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
401
408
  const languageLabel = hasLanguageLabel && language !== 'plaintext' ? language : null;
402
409
  const showHeader = title != null || languageLabel != null;
403
410
  const canCollapse = isCollapsible && lines.length >= collapsibleThreshold;
404
411
  const [isCollapsed, setIsCollapsed] = useState(false);
412
+ // Links the collapsible header to the code region it shows/hides so assistive
413
+ // tech can move from the button to its controlled content (disclosure
414
+ // pattern). The region stays mounted when collapsed (CSS grid animation), so
415
+ // this is always a resolvable reference — aria-controls can be unconditional.
416
+ const regionId = useId();
405
417
  const scrollContainerRef = useRef(null);
406
418
  const scrollStyle = maxHeight ? {
407
419
  maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
@@ -442,6 +454,7 @@ export function CodeBlock({
442
454
  role: canCollapse ? 'button' : undefined,
443
455
  tabIndex: canCollapse ? 0 : undefined,
444
456
  "aria-expanded": canCollapse ? !isCollapsed : undefined,
457
+ "aria-controls": canCollapse ? regionId : undefined,
445
458
  onClick: canCollapse ? () => setIsCollapsed(prev => !prev) : undefined,
446
459
  onKeyDown: canCollapse ? e => {
447
460
  if (e.key === 'Enter' || e.key === ' ') {
@@ -454,7 +467,7 @@ export function CodeBlock({
454
467
  className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h"
455
468
  },
456
469
  1: {
457
- className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o"
470
+ className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o x17nn4n9 x1wfwxd8 x7s97pk"
458
471
  }
459
472
  }[!!canCollapse << 0],
460
473
  children: /*#__PURE__*/_jsxs("span", {
@@ -530,7 +543,7 @@ export function CodeBlock({
530
543
  })]
531
544
  })
532
545
  });
533
- return /*#__PURE__*/_jsxs("pre", {
546
+ const block = /*#__PURE__*/_jsxs("pre", {
534
547
  ref: ref,
535
548
  ...mergeProps(themeProps('codeblock', {
536
549
  size,
@@ -539,6 +552,7 @@ export function CodeBlock({
539
552
  }), stylex.props(styles.root, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
540
553
  ...props,
541
554
  children: [headerEl, canCollapse ? /*#__PURE__*/_jsx("div", {
555
+ id: regionId,
542
556
  ...{
543
557
  0: {
544
558
  className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"
@@ -555,5 +569,9 @@ export function CodeBlock({
555
569
  })
556
570
  }) : codeBody, !showHeader && copyButtonEl]
557
571
  });
572
+ return syntaxTheme ? /*#__PURE__*/_jsx(SyntaxTheme, {
573
+ theme: syntaxTheme,
574
+ children: block
575
+ }) : block;
558
576
  }
559
577
  CodeBlock.displayName = 'CodeBlock';
@@ -6,7 +6,8 @@
6
6
  *
7
7
  * Collapsible is a standalone primitive that makes any content collapsible.
8
8
  * It renders a trigger area (always visible) and a content area that toggles.
9
- * Handles state management, accessibility (aria-expanded), and chevron indicator.
9
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
10
+ * the trigger to its content region), and chevron indicator.
10
11
  *
11
12
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
12
13
  * When the surrounding CollapsibleGroup enables `dividers`, each Collapsible
@@ -1 +1 @@
1
- {"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgB1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwF5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAgElB;yBA5Ee,WAAW"}
1
+ {"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAsElB;yBAlFe,WAAW"}
@@ -10,7 +10,8 @@
10
10
  *
11
11
  * Collapsible is a standalone primitive that makes any content collapsible.
12
12
  * It renders a trigger area (always visible) and a content area that toggles.
13
- * Handles state management, accessibility (aria-expanded), and chevron indicator.
13
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
14
+ * the trigger to its content region), and chevron indicator.
14
15
  *
15
16
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
16
17
  * When the surrounding CollapsibleGroup enables `dividers`, each Collapsible
@@ -25,7 +26,7 @@
25
26
  * - /apps/storybook/stories/Collapsible.stories.tsx
26
27
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
27
28
  */
28
- import { use } from 'react';
29
+ import { use, useId } from 'react';
29
30
  import * as stylex from '@stylexjs/stylex';
30
31
  import "../theme/tokens.stylex.js";
31
32
  import { borderVars, colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -53,6 +54,8 @@ const styles = {
53
54
  kMwMTN: "x1tgivj0",
54
55
  k9WMMc: "x1yc453h",
55
56
  k8WAf4: "xt970qd",
57
+ kI3sdo: "x17nn4n9",
58
+ kInvED: "x1wfwxd8 x7s97pk",
56
59
  $$css: true
57
60
  },
58
61
  contentHidden: {
@@ -179,6 +182,10 @@ export function Collapsible({
179
182
  const isDivided = presentation != null && presentation.dividers !== 'none';
180
183
  const density = presentation?.density ?? null;
181
184
  const chevronIcon = getIcon('chevronDown');
185
+
186
+ // Links the trigger to the region it shows/hides so assistive tech can move
187
+ // from the button to its controlled content (disclosure pattern).
188
+ const contentId = useId();
182
189
  return /*#__PURE__*/_jsxs("div", {
183
190
  ref: ref,
184
191
  ...mergeProps(themeProps('collapsible', {
@@ -190,6 +197,7 @@ export function Collapsible({
190
197
  type: "button",
191
198
  onClick: toggle,
192
199
  "aria-expanded": isOpen,
200
+ "aria-controls": contentId,
193
201
  ...stylex.props(styles.trigger, density != null && triggerDensity[density]),
194
202
  children: [/*#__PURE__*/_jsx("span", {
195
203
  ...{
@@ -208,6 +216,7 @@ export function Collapsible({
208
216
  children: chevronIcon
209
217
  })]
210
218
  }), /*#__PURE__*/_jsx("div", {
219
+ id: contentId,
211
220
  ...stylex.props(styles.content, density != null && contentDensity[density], !isOpen && styles.contentHidden),
212
221
  children: presentation != null ? /*#__PURE__*/_jsx(CollapsibleGroupPresentationContext, {
213
222
  value: null,
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwOlB;yBAtPe,WAAW"}
1
+ {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAuCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAyOlB;yBAvPe,WAAW"}
@@ -60,6 +60,7 @@ const styles = {
60
60
  k1ekBW: "x19991ni",
61
61
  kIyJzY: "xuedmi6",
62
62
  kAMwcw: "xlr8y92",
63
+ kfSwDN: "x87ps6o",
63
64
  $$css: true
64
65
  },
65
66
  popover: {
@@ -297,6 +298,7 @@ export function ContextMenu({
297
298
  role: "menu",
298
299
  "aria-label": label,
299
300
  onKeyDown: listKeyDown,
301
+ onContextMenu: e => e.preventDefault(),
300
302
  ...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
301
303
  children: /*#__PURE__*/_jsx(DropdownMenuContext, {
302
304
  value: contextValue,
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
@@ -598,8 +598,10 @@ export function DateTimeInput({
598
598
  "aria-disabled": showsDisabledMessage ? 'true' : undefined,
599
599
  readOnly: showsDisabledMessage || undefined,
600
600
  "aria-label": timeLabel ?? `${label} time`,
601
+ "aria-describedby": ariaDescribedBy,
601
602
  "aria-required": isRequired === true ? 'true' : undefined,
602
603
  "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
604
+ "aria-busy": isBusy || undefined,
603
605
  ...{
604
606
  0: {
605
607
  className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
@@ -26,9 +26,10 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
26
26
  * - `minWidth` — minimum width (px) for each column track
27
27
  * - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
28
28
  * `'fit'` collapses empty tracks so items stretch to fill
29
- * - `max` — caps the maximum number of columns by limiting track max size.
30
- * The grid stretches to 100% of its parent; `max` only limits how many
31
- * columns appear.
29
+ * - `max` — caps the maximum number of columns. The grid stretches to 100%
30
+ * of its parent and the columns that are present always fill the row, so a
31
+ * layout collapsing to a single column on mobile stretches to full width
32
+ * (no dead space on the right).
32
33
  */
33
34
  export type GridColumns = number | {
34
35
  minWidth: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2MD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}
package/dist/Grid/Grid.js CHANGED
@@ -32,9 +32,10 @@ import { themeProps } from "../utils/themeProps.js";
32
32
  * - `minWidth` — minimum width (px) for each column track
33
33
  * - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
34
34
  * `'fit'` collapses empty tracks so items stretch to fill
35
- * - `max` — caps the maximum number of columns by limiting track max size.
36
- * The grid stretches to 100% of its parent; `max` only limits how many
37
- * columns appear.
35
+ * - `max` — caps the maximum number of columns. The grid stretches to 100%
36
+ * of its parent and the columns that are present always fill the row, so a
37
+ * layout collapsing to a single column on mobile stretches to full width
38
+ * (no dead space on the right).
38
39
  */
39
40
  import { jsx as _jsx } from "react/jsx-runtime";
40
41
  const baseStyles = {
@@ -256,16 +257,32 @@ const spacingVarNames = {
256
257
  };
257
258
 
258
259
  /**
259
- * Build a grid-template-columns value that caps columns at `max` by
260
- * limiting each track's max size to `(100% - (max-1) * gap) / max`.
261
- * The grid stays 100% width; the track-max prevents more than `max` columns.
260
+ * Build a grid-template-columns value that caps the column *count* at `max`
261
+ * while still letting the columns that are actually present stretch to fill
262
+ * the row.
263
+ *
264
+ * The cap lives on the track's **min** size, not its max: each track is at
265
+ * least `perColumn = (100% - (max-1) * gap) / max`, so more than `max` columns
266
+ * can never fit. The track **max** stays `1fr`, so whenever fewer than `max`
267
+ * columns fit (most importantly a lone column on mobile) they still grow to
268
+ * fill the whole row — no dead space on the right.
269
+ *
270
+ * The track min is `max(minWidth, perColumn)` so an explicit `minWidth` is
271
+ * still honored, wrapped in `min(100%, …)` so a single column on a viewport
272
+ * narrower than `minWidth`/`perColumn` shrinks to the container instead of
273
+ * overflowing it.
262
274
  */
263
275
  function buildCappedTemplate(minWidth, maxCols, repeatMode, gap, columnGap) {
264
276
  const gapVar = columnGap != null ? spacingVarNames[columnGap] : gap != null ? spacingVarNames[gap] : null;
265
277
 
266
- // trackMax = (100% - (maxCols - 1) * gap) / maxCols
267
- const trackMax = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
268
- return `repeat(${repeatMode}, minmax(${minWidth}px, ${trackMax}))`;
278
+ // perColumn = (100% - (maxCols - 1) * gap) / maxCols — the width a track
279
+ // would have if exactly `maxCols` columns were present. Used as a floor so
280
+ // the grid never fits more than `maxCols` columns.
281
+ const perColumn = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
282
+
283
+ // Track min caps the count; track max stays 1fr so present columns fill.
284
+ const trackMin = `min(100%, max(${minWidth}px, ${perColumn}))`;
285
+ return `repeat(${repeatMode}, minmax(${trackMin}, 1fr))`;
269
286
  }
270
287
 
271
288
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAiCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;AA6EpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAiCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;AAiFpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
package/dist/Icon/Icon.js CHANGED
@@ -262,12 +262,16 @@ function IconFromRegistry({
262
262
  return null;
263
263
  }
264
264
  return /*#__PURE__*/_jsx("span", {
265
+ // Decorative by default, but placed BEFORE the prop spread so consumers
266
+ // can override it (e.g. `aria-hidden={false}` + `role="img"` +
267
+ // `aria-label`) to expose a meaningful standalone icon. This matches
268
+ // component-mode Icon, which already sets aria-hidden before its spread.
269
+ "aria-hidden": "true",
265
270
  ...spanProps,
266
271
  ...mergeProps(themeProps('icon', {
267
272
  size,
268
273
  color
269
274
  }), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size])),
270
- "aria-hidden": "true",
271
275
  children: resolvedIcon
272
276
  });
273
277
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAySf;yBAzTe,QAAQ"}
1
+ {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAmUf;yBAnVe,QAAQ"}
@@ -15,12 +15,13 @@
15
15
  * - /apps/storybook/stories/Lightbox.stories.tsx (storybook stories)
16
16
  * - /packages/cli/templates/blocks/components/Lightbox/ (showcase blocks)
17
17
  */
18
- import { useCallback, useEffect, useRef, useState } from 'react';
18
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
19
19
  import * as stylex from '@stylexjs/stylex';
20
20
  import "../theme/tokens.stylex.js";
21
21
  import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
22
22
  import { Icon } from "../Icon/index.js";
23
23
  import { IconButton } from "../IconButton/index.js";
24
+ import { useAnnounce } from "../hooks/useAnnounce.js";
24
25
  import { useScrollLock } from "../hooks/useScrollLock.js";
25
26
  import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
26
27
  import { mergeProps, mergeRefs } from "../utils/index.js";
@@ -162,7 +163,7 @@ export function Lightbox({
162
163
  });
163
164
 
164
165
  // Resolve current media item
165
- const mediaArray = Array.isArray(media) ? media : [media];
166
+ const mediaArray = useMemo(() => Array.isArray(media) ? media : [media], [media]);
166
167
  const isGallery = mediaArray.length > 1;
167
168
  const currentItem = mediaArray.length > 0 ? mediaArray[Math.min(index, mediaArray.length - 1)] : null;
168
169
  const currentType = currentItem?.type ?? 'image';
@@ -185,6 +186,29 @@ export function Lightbox({
185
186
  });
186
187
  }, [index, currentItem?.src]);
187
188
 
189
+ // Announce gallery navigation to screen readers. Moving between images only
190
+ // updates the visual counter, which is silent to assistive tech, so mirror
191
+ // each change in a polite live region ("<alt>, 3 of 12", or "Image 3 of 12"
192
+ // when the image has no alt). Announce only when the image changes during an
193
+ // already-open session — not on mount, not when opening (even at a new
194
+ // index, since the dialog's aria-label already names the current image), and
195
+ // not on close.
196
+ const announce = useAnnounce();
197
+ const prevIndexRef = useRef(index);
198
+ const wasOpenRef = useRef(isOpen);
199
+ useEffect(() => {
200
+ const indexChanged = prevIndexRef.current !== index;
201
+ const wasOpen = wasOpenRef.current;
202
+ prevIndexRef.current = index;
203
+ wasOpenRef.current = isOpen;
204
+ if (!indexChanged || !isOpen || !wasOpen) {
205
+ return;
206
+ }
207
+ const item = mediaArray[Math.min(index, mediaArray.length - 1)];
208
+ const position = `${index + 1} of ${mediaArray.length}`;
209
+ announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
210
+ }, [index, isOpen, announce, mediaArray]);
211
+
188
212
  // Open/close dialog
189
213
  useIsomorphicLayoutEffect(() => {
190
214
  const dialog = dialogRef.current;
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgE5D,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,UAAU,CAAC;AAMtD,YAAY,EACV,WAAW,IAAI,iBAAiB,EAChC,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,UAAU,oBAAqB,SAAQ,IAAI,CACzC,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,KAAK,4BAA4B,GAAG,oBAAoB,GAAG;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG,oBAAoB,GAAG;IACtD;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GACxB,4BAA4B,GAC5B,yBAAyB,CAAC;AA0C9B;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,SAAS,EACT,SAAS,EACT,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,KAAK,EACL,aAAqB,EACrB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA6TlB;yBAhWe,WAAW"}