@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/CHANGELOG.md +186 -0
  2. package/dist/BottomSheet/BottomSheet.d.ts +5 -4
  3. package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
  4. package/dist/BottomSheet/BottomSheetPanel.d.ts +1 -1
  5. package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
  6. package/dist/BottomSheet/BottomSheetPanel.js +1 -1
  7. package/dist/Calendar/styles.d.ts +6 -6
  8. package/dist/Chat/ChatComposerInput.d.ts +0 -11
  9. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  10. package/dist/Chat/ChatComposerInput.js +0 -11
  11. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  12. package/dist/Chat/useTriggerMenu.js +1 -1
  13. package/dist/CommandPalette/CommandPaletteList.d.ts +3 -2
  14. package/dist/CommandPalette/CommandPaletteList.d.ts.map +1 -1
  15. package/dist/CommandPalette/CommandPaletteList.js +3 -2
  16. package/dist/DateInput/TouchDateField.d.ts.map +1 -1
  17. package/dist/DateInput/TouchDateField.js +4 -1
  18. package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
  19. package/dist/DateTimeInput/TouchDateTimeField.js +29 -13
  20. package/dist/DropdownMenu/DropdownMenu.d.ts +11 -0
  21. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  22. package/dist/DropdownMenu/DropdownMenu.js +173 -11
  23. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  24. package/dist/DropdownMenu/DropdownMenuSubMenu.js +13 -2
  25. package/dist/DropdownMenu/menuRegionsContext.d.ts +2 -0
  26. package/dist/DropdownMenu/menuRegionsContext.d.ts.map +1 -0
  27. package/dist/DropdownMenu/menuRegionsContext.js +17 -0
  28. package/dist/Field/inputStyles.stylex.d.ts +3 -3
  29. package/dist/Layout/container.stylex.d.ts +18 -20
  30. package/dist/Layout/container.stylex.d.ts.map +1 -1
  31. package/dist/Layout/container.stylex.js +15 -25
  32. package/dist/Layout/padding.stylex.d.ts +231 -231
  33. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  34. package/dist/Lightbox/Lightbox.js +15 -6
  35. package/dist/Markdown/plugins/protocol.d.ts.map +1 -1
  36. package/dist/Markdown/plugins/protocol.js +33 -8
  37. package/dist/NavItem/navItemStyles.stylex.d.ts +5 -5
  38. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  39. package/dist/PowerSearch/PowerSearch.js +21 -1
  40. package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
  41. package/dist/PowerSearch/PowerSearchEditPopover.js +30 -15
  42. package/dist/Stack/stack.stylex.d.ts +22 -22
  43. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  44. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +89 -14
  45. package/dist/Table/table.stylex.d.ts +6 -6
  46. package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
  47. package/dist/TimeInput/TouchTimeField.js +4 -1
  48. package/dist/Tokenizer/Tokenizer.d.ts +1 -12
  49. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  50. package/dist/Tokenizer/Tokenizer.js +1 -13
  51. package/dist/Typeahead/BaseTypeahead.d.ts +0 -11
  52. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  53. package/dist/Typeahead/BaseTypeahead.js +1 -9
  54. package/dist/Typeahead/Typeahead.d.ts +1 -12
  55. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  56. package/dist/Typeahead/Typeahead.js +1 -13
  57. package/dist/astryx.css +17 -12
  58. package/dist/hooks/useFocusTrap.d.ts +8 -0
  59. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  60. package/dist/hooks/useFocusTrap.js +5 -1
  61. package/dist/hooks/useRenamedProp.d.ts +6 -6
  62. package/dist/hooks/useRenamedProp.js +6 -6
  63. package/dist/reset.a11y.chromium.spec.d.ts +2 -0
  64. package/dist/reset.a11y.chromium.spec.d.ts.map +1 -0
  65. package/dist/reset.a11y.chromium.spec.js +176 -0
  66. package/dist/theme/tokens.stylex.d.ts +30 -30
  67. package/dist/theme/tokens.stylex.d.ts.map +1 -1
  68. package/dist/theme/tokens.stylex.js +18 -15
  69. package/dist/theme/useTheme.d.ts +1 -1
  70. package/package.json +4 -4
  71. package/src/BottomSheet/BottomSheet.doc.mjs +4 -4
  72. package/src/BottomSheet/BottomSheet.tsx +5 -4
  73. package/src/BottomSheet/BottomSheetPanel.test.tsx +6 -9
  74. package/src/BottomSheet/BottomSheetPanel.tsx +2 -3
  75. package/src/Chat/ChatComposerInput.doc.mjs +3 -3
  76. package/src/Chat/ChatComposerInput.test.tsx +7 -55
  77. package/src/Chat/ChatComposerInput.tsx +0 -36
  78. package/src/Chat/useTriggerMenu.tsx +1 -4
  79. package/src/CommandPalette/CommandPalette.spec.md +2 -0
  80. package/src/CommandPalette/CommandPaletteList.spec.md +189 -0
  81. package/src/CommandPalette/CommandPaletteList.test.tsx +47 -0
  82. package/src/CommandPalette/CommandPaletteList.tsx +3 -2
  83. package/src/DateInput/TouchDateField.tsx +3 -1
  84. package/src/DateTimeInput/DateTimeInputTouch.test.tsx +60 -1
  85. package/src/DateTimeInput/TouchDateTimeField.tsx +31 -14
  86. package/src/DropdownMenu/DropdownMenu.doc.mjs +12 -0
  87. package/src/DropdownMenu/DropdownMenu.spec.md +65 -40
  88. package/src/DropdownMenu/DropdownMenu.test.tsx +457 -0
  89. package/src/DropdownMenu/DropdownMenu.tsx +278 -49
  90. package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +6 -3
  91. package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +2 -1
  92. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +11 -1
  93. package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts +195 -0
  94. package/src/DropdownMenu/menuRegionsContext.ts +17 -0
  95. package/src/Layout/container.stylex.ts +11 -21
  96. package/src/Lightbox/Lightbox.test.tsx +58 -0
  97. package/src/Lightbox/Lightbox.tsx +12 -6
  98. package/src/Markdown/plugins/protocol.ts +45 -12
  99. package/src/Markdown/plugins/sourceLines.test.tsx +121 -0
  100. package/src/PowerSearch/PowerSearch.tsx +28 -1
  101. package/src/PowerSearch/PowerSearchEditPopover.test.tsx +284 -0
  102. package/src/PowerSearch/PowerSearchEditPopover.tsx +41 -13
  103. package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +33 -9
  104. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +81 -18
  105. package/src/TimeInput/TouchTimeField.tsx +3 -1
  106. package/src/Tokenizer/Tokenizer.doc.mjs +0 -16
  107. package/src/Tokenizer/Tokenizer.test.tsx +12 -63
  108. package/src/Tokenizer/Tokenizer.tsx +1 -25
  109. package/src/Toolbar/Toolbar.test.tsx +29 -0
  110. package/src/Typeahead/BaseTypeahead.doc.mjs +0 -16
  111. package/src/Typeahead/BaseTypeahead.test.tsx +1 -1
  112. package/src/Typeahead/BaseTypeahead.tsx +1 -21
  113. package/src/Typeahead/Typeahead.doc.mjs +0 -7
  114. package/src/Typeahead/Typeahead.test.tsx +24 -42
  115. package/src/Typeahead/Typeahead.tsx +1 -25
  116. package/src/hooks/useFocusTrap.ts +5 -1
  117. package/src/hooks/useRenamedProp.ts +6 -6
  118. package/src/reset.a11y.chromium.spec.ts +178 -0
  119. package/src/reset.css +8 -8
  120. package/src/reset.test.ts +112 -0
  121. package/src/theme/__tests__/SpacingRootFontSize.a11y.chromium.spec.ts +198 -0
  122. package/src/theme/tokens.stylex.ts +18 -15
  123. package/src/theme/tokens.test.ts +1 -1
  124. package/src/theme/useTheme.test.tsx +4 -4
  125. package/src/theme/useTheme.ts +1 -1
@@ -177,38 +177,38 @@ export declare const colorVars: stylex.VarGroup<Readonly<{
177
177
  readonly '--color-text-yellow': "light-dark(#753F07, #FBCE03)";
178
178
  }>, symbol>;
179
179
  export declare const spacingDefaults: {
180
- readonly '--spacing-0': "0px";
181
- readonly '--spacing-0-5': "2px";
182
- readonly '--spacing-1': "4px";
183
- readonly '--spacing-1-5': "6px";
184
- readonly '--spacing-2': "8px";
185
- readonly '--spacing-3': "12px";
186
- readonly '--spacing-4': "16px";
187
- readonly '--spacing-5': "20px";
188
- readonly '--spacing-6': "24px";
189
- readonly '--spacing-7': "28px";
190
- readonly '--spacing-8': "32px";
191
- readonly '--spacing-9': "36px";
192
- readonly '--spacing-10': "40px";
193
- readonly '--spacing-11': "44px";
194
- readonly '--spacing-12': "48px";
180
+ readonly '--spacing-0': "0rem";
181
+ readonly '--spacing-0-5': "0.125rem";
182
+ readonly '--spacing-1': "0.25rem";
183
+ readonly '--spacing-1-5': "0.375rem";
184
+ readonly '--spacing-2': "0.5rem";
185
+ readonly '--spacing-3': "0.75rem";
186
+ readonly '--spacing-4': "1rem";
187
+ readonly '--spacing-5': "1.25rem";
188
+ readonly '--spacing-6': "1.5rem";
189
+ readonly '--spacing-7': "1.75rem";
190
+ readonly '--spacing-8': "2rem";
191
+ readonly '--spacing-9': "2.25rem";
192
+ readonly '--spacing-10': "2.5rem";
193
+ readonly '--spacing-11': "2.75rem";
194
+ readonly '--spacing-12': "3rem";
195
195
  };
196
196
  export declare const spacingVars: stylex.VarGroup<Readonly<{
197
- readonly '--spacing-0': "0px";
198
- readonly '--spacing-0-5': "2px";
199
- readonly '--spacing-1': "4px";
200
- readonly '--spacing-1-5': "6px";
201
- readonly '--spacing-2': "8px";
202
- readonly '--spacing-3': "12px";
203
- readonly '--spacing-4': "16px";
204
- readonly '--spacing-5': "20px";
205
- readonly '--spacing-6': "24px";
206
- readonly '--spacing-7': "28px";
207
- readonly '--spacing-8': "32px";
208
- readonly '--spacing-9': "36px";
209
- readonly '--spacing-10': "40px";
210
- readonly '--spacing-11': "44px";
211
- readonly '--spacing-12': "48px";
197
+ readonly '--spacing-0': "0rem";
198
+ readonly '--spacing-0-5': "0.125rem";
199
+ readonly '--spacing-1': "0.25rem";
200
+ readonly '--spacing-1-5': "0.375rem";
201
+ readonly '--spacing-2': "0.5rem";
202
+ readonly '--spacing-3': "0.75rem";
203
+ readonly '--spacing-4': "1rem";
204
+ readonly '--spacing-5': "1.25rem";
205
+ readonly '--spacing-6': "1.5rem";
206
+ readonly '--spacing-7': "1.75rem";
207
+ readonly '--spacing-8': "2rem";
208
+ readonly '--spacing-9': "2.25rem";
209
+ readonly '--spacing-10': "2.5rem";
210
+ readonly '--spacing-11': "2.75rem";
211
+ readonly '--spacing-12': "3rem";
212
212
  }>, symbol>;
213
213
  export declare const sizeDefaults: {
214
214
  readonly '--size-element-sm': "28px";
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,QAAQ;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
1
+ {"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAS1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,QAAQ;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
@@ -223,22 +223,25 @@ export const colorVars = {
223
223
  // Spacing Tokens
224
224
  // =============================================================================
225
225
 
226
+ // rem, like the type scale, so gaps and padding grow with the reader's root
227
+ // font size instead of tightening around larger text. At the default 16px
228
+ // root every step is still 4px × step: --spacing-2 is 8px, --spacing-4 16px.
226
229
  export const spacingDefaults = {
227
- '--spacing-0': '0px',
228
- '--spacing-0-5': '2px',
229
- '--spacing-1': '4px',
230
- '--spacing-1-5': '6px',
231
- '--spacing-2': '8px',
232
- '--spacing-3': '12px',
233
- '--spacing-4': '16px',
234
- '--spacing-5': '20px',
235
- '--spacing-6': '24px',
236
- '--spacing-7': '28px',
237
- '--spacing-8': '32px',
238
- '--spacing-9': '36px',
239
- '--spacing-10': '40px',
240
- '--spacing-11': '44px',
241
- '--spacing-12': '48px'
230
+ '--spacing-0': '0rem',
231
+ '--spacing-0-5': '0.125rem',
232
+ '--spacing-1': '0.25rem',
233
+ '--spacing-1-5': '0.375rem',
234
+ '--spacing-2': '0.5rem',
235
+ '--spacing-3': '0.75rem',
236
+ '--spacing-4': '1rem',
237
+ '--spacing-5': '1.25rem',
238
+ '--spacing-6': '1.5rem',
239
+ '--spacing-7': '1.75rem',
240
+ '--spacing-8': '2rem',
241
+ '--spacing-9': '2.25rem',
242
+ '--spacing-10': '2.5rem',
243
+ '--spacing-11': '2.75rem',
244
+ '--spacing-12': '3rem'
242
245
  };
243
246
  export const spacingVars = {
244
247
  "--spacing-0": "var(--spacing-0)",
@@ -35,7 +35,7 @@ export interface UseThemeReturn {
35
35
  * @example
36
36
  * ```
37
37
  * const accent = token('--color-accent'); // "#0064E0" in light mode
38
- * const spacing = token('--spacing-4'); // "16px"
38
+ * const spacing = token('--spacing-4'); // "1rem"
39
39
  * ```
40
40
  */
41
41
  token: (name: string) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/core",
3
- "version": "0.7.0-canary.fe57f54",
3
+ "version": "0.7.0",
4
4
  "displayName": "Astryx Core",
5
5
  "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
6
6
  "author": "Meta Open Source",
@@ -787,8 +787,6 @@
787
787
  "react-dom": ">=19.0.0"
788
788
  },
789
789
  "devDependencies": {
790
- "@astryxdesign/a11y-spec": "0.7.0-canary.fe57f54",
791
- "@astryxdesign/cli": "0.7.0-canary.fe57f54",
792
790
  "@babel/cli": "^7.29.7",
793
791
  "@babel/core": "^7.29.7",
794
792
  "@babel/preset-react": "^7.29.7",
@@ -799,7 +797,9 @@
799
797
  "@testing-library/jest-dom": "^6.6.0",
800
798
  "@testing-library/react": "^16.3.2",
801
799
  "@types/babel__core": "^7.20.5",
802
- "tailwindcss": "^4.3.2"
800
+ "tailwindcss": "^4.3.2",
801
+ "@astryxdesign/a11y-spec": "0.0.0",
802
+ "@astryxdesign/cli": "0.7.0"
803
803
  },
804
804
  "dependencies": {
805
805
  "intl-messageformat": "^11.2.9"
@@ -19,7 +19,7 @@ const anatomy = [
19
19
  name: 'Content area',
20
20
  required: true,
21
21
  description:
22
- 'Scrollable container that presents the caller-provided sheet content, padded when padding or a theme sets it.',
22
+ 'Padded, scrollable container that presents the caller-provided sheet content.',
23
23
  },
24
24
  {
25
25
  name: 'Handle',
@@ -95,7 +95,7 @@ export const docs = {
95
95
  derived: [{property: 'padding', expand: 'container'}],
96
96
  },
97
97
  description:
98
- "A mobile touch sheet that rises from the bottom edge, with animated entrance and exit, a grab handle, optional drag-to-resize snap points, and purpose-controlled dismissal. Like Dialog, it is a container: set padding (or a theme's bottom-sheet padding) and a lone Section child or bleed children such as Table and Divider align against that inset. By default the content area has no padding. A standalone sheet owns a native <dialog>; inside BottomSheetSwitcher it renders a panel in the switcher's shared dialog. In both modes, ref and shared DOM props target the visual panel <div>.",
98
+ "A mobile touch sheet that rises from the bottom edge, with animated entrance and exit, a grab handle, optional drag-to-resize snap points, and purpose-controlled dismissal. Like Dialog, it is a padded container: content starts at the theme's bottom-sheet padding (--spacing-4 by default), and a lone Section child or bleed children such as Table and Divider align against it. A standalone sheet owns a native <dialog>; inside BottomSheetSwitcher it renders a panel in the switcher's shared dialog. In both modes, ref and shared DOM props target the visual panel <div>.",
99
99
  props: [
100
100
  {
101
101
  name: 'isOpen',
@@ -146,7 +146,7 @@ export const docs = {
146
146
  name: 'padding',
147
147
  type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
148
148
  description:
149
- 'Internal padding of the sheet content using the spacing scale, matching Dialog. When omitted, uses the theme default for bottom sheets: no padding unless the theme sets padding on bottom-sheet. A lone Section child escapes the padding, and bleed children such as Table and Divider compensate against it.',
149
+ 'Internal padding of the sheet content using the spacing scale, matching Dialog. When omitted, uses the theme default for bottom sheets (--spacing-4 unless the theme sets padding on bottom-sheet). A lone Section child escapes the padding, and bleed children such as Table and Divider compensate against it. Use 0 for edge-to-edge content that supplies its own inset.',
150
150
  },
151
151
  {
152
152
  name: 'height',
@@ -320,7 +320,7 @@ export const docs = {
320
320
  /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
321
321
  export const docsDense = {
322
322
  description:
323
- 'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, opt-in transform-based drag-to-resize snap points (snapPoints: viewport fraction, percent or px length), scrolling area resizes to the snapped visible height on release (a peek stop, a quarter of the sheet or less, keeps the full height and slides instead), Dialog-aligned dismissal purpose (info/form/required), purpose-gated swipe-to-dismiss, fully-expanded Tall visual-viewport mobile-keyboard handling, named height scale, Dialog-like container padding (padding prop or theme bottom-sheet padding; none by default), modal (default) or non-modal (hasScrim={false}) presentation',
323
+ 'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, opt-in transform-based drag-to-resize snap points (snapPoints: viewport fraction, percent or px length), scrolling area resizes to the snapped visible height on release (a peek stop, a quarter of the sheet or less, keeps the full height and slides instead), Dialog-aligned dismissal purpose (info/form/required), purpose-gated swipe-to-dismiss, fully-expanded Tall visual-viewport mobile-keyboard handling, named height scale, Dialog-like container padding (padding prop, theme bottom-sheet padding, default --spacing-4), modal (default) or non-modal (hasScrim={false}) presentation',
324
324
  usage: {
325
325
  anatomy,
326
326
  description:
@@ -146,10 +146,11 @@ interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
146
146
  /**
147
147
  * Internal padding of the sheet content using the spacing scale, matching
148
148
  * Dialog. Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
149
- * When omitted, uses the theme default for bottom sheets: no padding unless
150
- * the theme sets `padding` on `bottom-sheet`. The content box is a
151
- * container: a Section that is its only child escapes the padding, and bleed
152
- * children such as Table and Divider compensate against it.
149
+ * When omitted, uses the theme default for bottom sheets (`--spacing-4`
150
+ * unless the theme sets `padding` on `bottom-sheet`), matching Dialog. The
151
+ * content box is a container: a Section that is its only child escapes the
152
+ * padding, and bleed children such as Table and Divider compensate against
153
+ * it. Pass `0` for content that supplies its own inset.
153
154
  */
154
155
  padding?: SpacingStep;
155
156
 
@@ -432,7 +432,7 @@ describe('BottomSheetPanel', () => {
432
432
  return getComputedStyle(screen.getByTestId('sheet-child').parentElement!);
433
433
  }
434
434
 
435
- it('keeps the released unpadded default and publishes the theme chain', () => {
435
+ it("pads by Dialog's default chain and publishes the inset it applies", () => {
436
436
  const computed = renderWithPadding();
437
437
  for (const [edge, property] of EDGES) {
438
438
  const published = computed
@@ -441,10 +441,8 @@ describe('BottomSheetPanel', () => {
441
441
  expect(published, edge).toContain(
442
442
  `var(--astryx-bottom-sheet-padding-${edge}`,
443
443
  );
444
- // No theme padding resolves to no inset, as before the sheet was a
445
- // container.
446
444
  expect(published, edge).toContain(
447
- 'var(--astryx-bottom-sheet-padding,0px)',
445
+ 'var(--astryx-bottom-sheet-padding,var(--spacing-4))',
448
446
  );
449
447
  // Applied padding reads the published value, so bleed children
450
448
  // subtract exactly the inset they sit in.
@@ -452,17 +450,16 @@ describe('BottomSheetPanel', () => {
452
450
  `var(--container-padding-${edge})`,
453
451
  );
454
452
  }
455
- // The Layout insets have no terminal value: unthemed, they stay invalid
456
- // and a Layout inside the sheet keeps its own default padding.
457
453
  for (const name of [
458
454
  '--layout-padding-outer-x',
459
455
  '--layout-padding-outer-y',
460
456
  '--layout-padding-inner-x',
461
457
  '--layout-padding-inner-y',
462
458
  ]) {
463
- const value = computed.getPropertyValue(name).replace(/\s+/g, '');
464
- expect(value, name).toContain('var(--astryx-bottom-sheet-padding)');
465
- expect(value, name).not.toMatch(/0px|--spacing-/);
459
+ expect(
460
+ computed.getPropertyValue(name).replace(/\s+/g, ''),
461
+ name,
462
+ ).toContain('var(--astryx-bottom-sheet-padding,var(--spacing-4))');
466
463
  }
467
464
  });
468
465
 
@@ -256,7 +256,6 @@ const styles = stylex.create({
256
256
  // observed box grow with async content beyond a fixed-height viewport.
257
257
  // This box is also the sheet's container: it carries the padding and
258
258
  // publishes it, so a lone Section child escapes it exactly as in Dialog.
259
- // Unpadded unless the prop or the theme sets padding.
260
259
  display: 'flow-root',
261
260
  boxSizing: 'border-box',
262
261
  height: '100%',
@@ -303,7 +302,7 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
303
302
  children: ReactNode;
304
303
  /**
305
304
  * Content padding on the spacing scale. Omitted, the content box reads the
306
- * theme's bottom-sheet padding, else none (the released default).
305
+ * theme's bottom-sheet padding, then --spacing-4 (Dialog's default).
307
306
  */
308
307
  padding?: SpacingStep;
309
308
  snapPoints?: ReadonlyArray<BottomSheetSnapPoint>;
@@ -627,7 +626,7 @@ export function BottomSheetPanel({
627
626
  }, [motion]);
628
627
 
629
628
  // Same lowering as Dialog: with no padding prop the content box reads the
630
- // theme's --astryx-bottom-sheet-padding chain (no padding when unset), else
629
+ // theme's --astryx-bottom-sheet-padding chain (--spacing-4 when unset), else
631
630
  // the explicit step.
632
631
  const usesThemePadding = padding == null;
633
632
  const effectivePadding = padding ?? 4;
@@ -98,7 +98,7 @@ export const docs = {
98
98
  name: 'triggers',
99
99
  type: 'ChatComposerTrigger[]',
100
100
  description:
101
- 'Trigger definitions for typeahead menus. Each trigger specifies a character (@ or /), a search source, and an onSelect handler that returns the token to insert. Per-trigger emptySearchText (ReactNode) is the message when the query matched nothing; the older emptySearchResultsText (string) is deprecated and still works.',
101
+ 'Trigger definitions for typeahead menus. Each trigger specifies a character (@ or /), a search source, and an onSelect handler that returns the token to insert. Per-trigger emptySearchText (ReactNode) is the message when the query matched nothing.',
102
102
  },
103
103
  {
104
104
  name: 'debounceMs',
@@ -174,7 +174,7 @@ export const docsZh = {
174
174
  placeholder: '输入为空时显示的占位文本。',
175
175
  maxRows: '滚动前的最大可见行数。紧凑布局中使用较小值。',
176
176
  triggers:
177
- '菜单的触发定义。每个触发器指定字符(@ 或 /)、搜索源和返回要插入标记的 onSelect 处理器。每个触发器的 emptySearchText(ReactNode)用于查询无匹配结果时的提示;旧的 emptySearchResultsText(string)已弃用,但仍可使用。',
177
+ '菜单的触发定义。每个触发器指定字符(@ 或 /)、搜索源和返回要插入标记的 onSelect 处理器。每个触发器的 emptySearchText(ReactNode)用于查询无匹配结果时的提示。',
178
178
  debounceMs: '异步搜索源的去抖动延迟,避免过多网络请求。',
179
179
  hasHistory: '启用 ArrowUp/Down 回溯之前提交的消息。',
180
180
  label: '屏幕阅读器播报的无障碍标签。',
@@ -205,7 +205,7 @@ export const docsDense = {
205
205
  placeholder: 'placeholder when empty',
206
206
  maxRows: 'max visible rows before scroll; lower for compact layouts',
207
207
  triggers:
208
- 'typeahead trigger defs; character(@/)+searchSource+onSelect returning token; emptySearchText (ReactNode) for no matches, emptySearchResultsText deprecated',
208
+ 'typeahead trigger defs; character(@/)+searchSource+onSelect returning token; emptySearchText (ReactNode) for no matches',
209
209
  debounceMs: 'debounce for async search to avoid excess requests',
210
210
  hasHistory: 'ArrowUp/Down to recall previous submissions',
211
211
  label: 'a11y label for screen readers',
@@ -1136,7 +1136,7 @@ describe('ChatComposerInput', () => {
1136
1136
 
1137
1137
  it('supports configurable empty/loading text', () => {
1138
1138
  const trigger = createMentionTrigger({
1139
- emptySearchResultsText: 'Nobody found',
1139
+ emptySearchText: 'Nobody found',
1140
1140
  loadingText: 'Looking up...',
1141
1141
  menuLabel: 'People',
1142
1142
  });
@@ -1146,7 +1146,7 @@ describe('ChatComposerInput', () => {
1146
1146
 
1147
1147
  // A trigger's `emptySearchResultsText` was renamed to `emptySearchText`
1148
1148
  // and widened from `string` to `ReactNode` (`spec:AST-056` FR1). The
1149
- // released key keeps working through the overlap (`spec:AST-017` FR28).
1149
+ // overlap ended in a minor release (`CLN-0004`, `spec:AST-017` FR31).
1150
1150
  it('renders an element emptySearchText when the query matched nothing', async () => {
1151
1151
  const user = userEvent.setup();
1152
1152
  const trigger = createMentionTrigger({
@@ -1166,72 +1166,24 @@ describe('ChatComposerInput', () => {
1166
1166
  });
1167
1167
  });
1168
1168
 
1169
- it('keeps the deprecated key working, and says it is deprecated', async () => {
1170
- const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
1171
- const user = userEvent.setup();
1172
- const trigger = createMentionTrigger({
1173
- emptySearchResultsText: 'Nobody found',
1174
- });
1175
- render(<ChatComposerInput triggers={[trigger]} />);
1176
-
1177
- await user.click(screen.getByRole('combobox'));
1178
- await user.keyboard('@zzzzz');
1179
-
1180
- await waitFor(() => {
1181
- expect(screen.getByText('Nobody found')).toBeInTheDocument();
1182
- });
1183
- expect(warn).toHaveBeenCalledWith(
1184
- expect.stringContaining(
1185
- 'ChatComposerInput: A trigger sets `emptySearchResultsText`, which is deprecated',
1186
- ),
1187
- );
1188
- warn.mockRestore();
1189
- });
1190
-
1191
- it('treats an explicit null key as not given, falling through to the old one', async () => {
1169
+ it('no longer reads the removed emptySearchResultsText key (CLN-0004)', async () => {
1192
1170
  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
1193
1171
  const user = userEvent.setup();
1194
1172
  const trigger = createMentionTrigger({
1173
+ // @ts-expect-error -- removed in the minor release (CLN-0004)
1195
1174
  emptySearchResultsText: 'Nobody found',
1196
- emptySearchText: null,
1197
1175
  });
1198
1176
  render(<ChatComposerInput triggers={[trigger]} />);
1199
1177
 
1200
1178
  await user.click(screen.getByRole('combobox'));
1201
1179
  await user.keyboard('@zzzzz');
1202
1180
 
1203
- // The same meaning the typeahead family gives `null`: not given, so
1204
- // the released key still supplies the message and no warning claims a
1205
- // winner the menu did not pick.
1206
1181
  await waitFor(() => {
1207
- expect(screen.getByText('Nobody found')).toBeInTheDocument();
1182
+ expect(screen.getByText('No results')).toBeInTheDocument();
1208
1183
  });
1184
+ expect(screen.queryByText('Nobody found')).not.toBeInTheDocument();
1209
1185
  expect(warn).not.toHaveBeenCalledWith(
1210
- expect.stringContaining('sets both'),
1211
- );
1212
- warn.mockRestore();
1213
- });
1214
-
1215
- it('lets the new key win when a trigger sets both, and warns', async () => {
1216
- const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
1217
- const user = userEvent.setup();
1218
- const trigger = createMentionTrigger({
1219
- emptySearchResultsText: 'Old copy',
1220
- emptySearchText: 'New copy',
1221
- });
1222
- render(<ChatComposerInput triggers={[trigger]} />);
1223
-
1224
- await user.click(screen.getByRole('combobox'));
1225
- await user.keyboard('@zzzzz');
1226
-
1227
- await waitFor(() => {
1228
- expect(screen.getByText('New copy')).toBeInTheDocument();
1229
- });
1230
- expect(screen.queryByText('Old copy')).not.toBeInTheDocument();
1231
- expect(warn).toHaveBeenCalledWith(
1232
- expect.stringContaining(
1233
- 'ChatComposerInput: A trigger sets both `emptySearchResultsText` and `emptySearchText`',
1234
- ),
1186
+ expect.stringContaining('is deprecated'),
1235
1187
  );
1236
1188
  warn.mockRestore();
1237
1189
  });
@@ -69,7 +69,6 @@ import {Badge, type BadgeProps} from '../Badge';
69
69
  import {useChatComposerContext} from './ChatContext';
70
70
  import {themeProps} from '../utils/themeProps';
71
71
  import {useTranslator} from '../i18n';
72
- import {useDevWarning} from '../hooks/useDevWarning';
73
72
 
74
73
  // =============================================================================
75
74
  // Types
@@ -167,17 +166,6 @@ export type ChatComposerTrigger = {
167
166
  * @default 'No results'
168
167
  */
169
168
  emptySearchText?: ReactNode;
170
- /**
171
- * Text shown when no results found.
172
- * @default 'No results'
173
- * @deprecated `DEP-0004`. Renamed to `emptySearchText`, which takes a
174
- * `ReactNode` rather than a `string` — every existing value stays valid
175
- * (`spec:AST-056` FR1, FR7). Still works exactly as released;
176
- * `emptySearchText` wins when both are set. Removal is `CLN-0004`, in a
177
- * later minor whose frozen manifest carries both ids (`spec:AST-017`
178
- * FR31).
179
- */
180
- emptySearchResultsText?: string;
181
169
  /** Text shown during async search. @default 'Searching\u2026' */
182
170
  loadingText?: string;
183
171
  /** Accessible label for the menu. @default 'Suggestions' */
@@ -606,30 +594,6 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
606
594
  insertTextRef.current = insertText;
607
595
 
608
596
  // --- Trigger menu ---
609
- // Each trigger's empty-result message was renamed (`spec:AST-056` FR1); the
610
- // released key keeps working through the overlap and development says which
611
- // one was read (`spec:AST-017` FR28).
612
- // `!= null` matches the `??` the menu resolves with, so an explicit `null`
613
- // counts as "not given" on both names and the warnings cannot claim a
614
- // winner the render did not pick.
615
- const triggersWithDeprecatedEmptyText =
616
- triggers?.filter(trigger => trigger.emptySearchResultsText != null) ?? [];
617
- const triggersWithBothEmptyTexts = triggersWithDeprecatedEmptyText.filter(
618
- trigger => trigger.emptySearchText != null,
619
- );
620
- useDevWarning(
621
- 'ChatComposerInput',
622
- 'A trigger sets `emptySearchResultsText`, which is deprecated; use ' +
623
- '`emptySearchText` instead. It still works exactly as released.',
624
- triggersWithDeprecatedEmptyText.length > triggersWithBothEmptyTexts.length,
625
- );
626
- useDevWarning(
627
- 'ChatComposerInput',
628
- 'A trigger sets both `emptySearchResultsText` and `emptySearchText`; ' +
629
- '`emptySearchText` wins. `emptySearchResultsText` is deprecated — ' +
630
- 'drop it.',
631
- triggersWithBothEmptyTexts.length > 0,
632
- );
633
597
  const triggerMenu = useTriggerMenu({
634
598
  triggers,
635
599
  editableRef,
@@ -640,10 +640,7 @@ export function useTriggerMenu(
640
640
 
641
641
  const renderMenu = useCallback((): ReactNode => {
642
642
  const trigger = state.activeTrigger;
643
- const emptyText =
644
- trigger?.emptySearchText ??
645
- trigger?.emptySearchResultsText ??
646
- 'No results';
643
+ const emptyText = trigger?.emptySearchText ?? 'No results';
647
644
  const loadingText = trigger?.loadingText ?? 'Searching\u2026';
648
645
 
649
646
  let listContent: ReactNode;
@@ -71,6 +71,8 @@ Consumer migration instructions belong in consumer docs and release notes.
71
71
  factual backfill does not invent one.
72
72
  - Shared layer hosting, positioning, or lifecycle rules beyond the current
73
73
  records linked below.
74
+ - The List root's accessible name, list-id application, native passthrough, and
75
+ overflow scrolling — owned by `component:CommandPaletteList`.
74
76
 
75
77
  ## Public concepts
76
78