@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f

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 (200) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/README.md +79 -45
  3. package/dist/Banner/Banner.d.ts +3 -0
  4. package/dist/Banner/Banner.d.ts.map +1 -1
  5. package/dist/Banner/Banner.js +13 -3
  6. package/dist/BottomSheet/BottomSheet.d.ts +66 -0
  7. package/dist/BottomSheet/BottomSheet.d.ts.map +1 -0
  8. package/dist/BottomSheet/BottomSheet.js +392 -0
  9. package/dist/BottomSheet/BottomSheetPanel.d.ts +60 -0
  10. package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -0
  11. package/dist/BottomSheet/BottomSheetPanel.js +398 -0
  12. package/dist/BottomSheet/BottomSheetSwitcher.d.ts +61 -0
  13. package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -0
  14. package/dist/BottomSheet/BottomSheetSwitcher.js +410 -0
  15. package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts +21 -0
  16. package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts.map +1 -0
  17. package/dist/BottomSheet/BottomSheetSwitcherContext.js +13 -0
  18. package/dist/BottomSheet/index.d.ts +11 -0
  19. package/dist/BottomSheet/index.d.ts.map +1 -0
  20. package/dist/BottomSheet/index.js +12 -0
  21. package/dist/BottomSheet/snapOffsets.d.ts +72 -0
  22. package/dist/BottomSheet/snapOffsets.d.ts.map +1 -0
  23. package/dist/BottomSheet/snapOffsets.js +130 -0
  24. package/dist/BottomSheet/useMobileKeyboard.d.ts +35 -0
  25. package/dist/BottomSheet/useMobileKeyboard.d.ts.map +1 -0
  26. package/dist/BottomSheet/useMobileKeyboard.js +373 -0
  27. package/dist/BottomSheet/useSheetGestures.d.ts +180 -0
  28. package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -0
  29. package/dist/BottomSheet/useSheetGestures.js +989 -0
  30. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  31. package/dist/Chat/ChatComposerInput.js +3 -4
  32. package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
  33. package/dist/ComplexSelector/ComplexSelector.js +12 -6
  34. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  35. package/dist/ContextMenu/ContextMenu.js +4 -2
  36. package/dist/DateInput/DateInput.d.ts.map +1 -1
  37. package/dist/DateInput/DateInput.js +9 -1
  38. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  39. package/dist/DateTimeInput/DateTimeInput.js +31 -1
  40. package/dist/Dialog/Dialog.d.ts.map +1 -1
  41. package/dist/Dialog/Dialog.js +2 -1
  42. package/dist/Field/InputClearButton.d.ts +2 -1
  43. package/dist/Field/InputClearButton.d.ts.map +1 -1
  44. package/dist/Field/InputClearButton.js +6 -1
  45. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  46. package/dist/Lightbox/Lightbox.js +9 -3
  47. package/dist/MobileNav/MobileNav.d.ts +12 -0
  48. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  49. package/dist/MobileNav/MobileNav.js +102 -30
  50. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  51. package/dist/MultiSelector/MultiSelector.js +21 -7
  52. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  53. package/dist/NumberInput/NumberInput.js +9 -1
  54. package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
  55. package/dist/Selector/Selector.d.ts.map +1 -1
  56. package/dist/Selector/Selector.js +14 -3
  57. package/dist/StatusDot/StatusDot.d.ts +43 -3
  58. package/dist/StatusDot/StatusDot.d.ts.map +1 -1
  59. package/dist/StatusDot/StatusDot.js +42 -5
  60. package/dist/Switch/Switch.d.ts.map +1 -1
  61. package/dist/Switch/Switch.js +5 -1
  62. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  63. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
  64. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  65. package/dist/TimeInput/TimeInput.js +8 -1
  66. package/dist/Tokenizer/Tokenizer.js +11 -5
  67. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  68. package/dist/Tooltip/useTooltip.js +4 -1
  69. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  70. package/dist/Typeahead/BaseTypeahead.js +5 -3
  71. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  72. package/dist/Typeahead/Typeahead.js +10 -1
  73. package/dist/astryx.css +21 -0
  74. package/dist/hooks/index.d.ts +8 -1
  75. package/dist/hooks/index.d.ts.map +1 -1
  76. package/dist/hooks/index.js +8 -1
  77. package/dist/hooks/useFocusTrap.d.ts +0 -11
  78. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  79. package/dist/hooks/useFocusTrap.js +1 -11
  80. package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
  81. package/dist/hooks/useInputStatusIcon.js +1 -0
  82. package/dist/index.d.ts +1 -0
  83. package/dist/index.d.ts.map +1 -1
  84. package/dist/index.js +1 -0
  85. package/dist/theme/defineTheme.d.ts +22 -4
  86. package/dist/theme/defineTheme.d.ts.map +1 -1
  87. package/dist/theme/expandColorScale.d.ts +17 -2
  88. package/dist/theme/expandColorScale.d.ts.map +1 -1
  89. package/dist/theme/expandColorScale.js +63 -33
  90. package/dist/utils/ime.d.ts +5 -0
  91. package/dist/utils/ime.d.ts.map +1 -0
  92. package/dist/utils/ime.js +63 -0
  93. package/dist/utils/index.d.ts +1 -0
  94. package/dist/utils/index.d.ts.map +1 -1
  95. package/dist/utils/index.js +2 -1
  96. package/locales/af-ZA.json +958 -0
  97. package/locales/ar-SA.json +998 -0
  98. package/locales/ca-ES.json +974 -0
  99. package/locales/cs-CZ.json +990 -0
  100. package/locales/da-DK.json +966 -0
  101. package/locales/de-DE.json +966 -0
  102. package/locales/el-GR.json +990 -0
  103. package/locales/en.json +48 -0
  104. package/locales/es-ES.json +978 -0
  105. package/locales/fi-FI.json +990 -0
  106. package/locales/fr-FR.json +928 -0
  107. package/locales/he-IL.json +990 -0
  108. package/locales/hu-HU.json +990 -0
  109. package/locales/it-IT.json +978 -0
  110. package/locales/ja-JP.json +998 -0
  111. package/locales/ko-KR.json +990 -0
  112. package/locales/nl-NL.json +954 -0
  113. package/locales/no-NO.json +978 -0
  114. package/locales/pl-PL.json +982 -0
  115. package/locales/pseudo.json +36 -0
  116. package/locales/pt-BR.json +982 -0
  117. package/locales/pt-PT.json +982 -0
  118. package/locales/ro-RO.json +982 -0
  119. package/locales/ru-RU.json +990 -0
  120. package/locales/sr-SP.json +990 -0
  121. package/locales/sv-SE.json +986 -0
  122. package/locales/tr-TR.json +990 -0
  123. package/locales/uk-UA.json +990 -0
  124. package/locales/vi-VN.json +986 -0
  125. package/locales/zh-CN.json +998 -0
  126. package/locales/zh-TW.json +998 -0
  127. package/package.json +9 -8
  128. package/src/Banner/Banner.doc.mjs +3 -3
  129. package/src/Banner/Banner.test.tsx +40 -0
  130. package/src/Banner/Banner.tsx +27 -2
  131. package/src/BottomSheet/BottomSheet.doc.mjs +266 -0
  132. package/src/BottomSheet/BottomSheet.test.tsx +2114 -0
  133. package/src/BottomSheet/BottomSheet.tsx +545 -0
  134. package/src/BottomSheet/BottomSheetPanel.test.tsx +240 -0
  135. package/src/BottomSheet/BottomSheetPanel.tsx +547 -0
  136. package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +219 -0
  137. package/src/BottomSheet/BottomSheetSwitcher.test.tsx +850 -0
  138. package/src/BottomSheet/BottomSheetSwitcher.tsx +628 -0
  139. package/src/BottomSheet/BottomSheetSwitcherContext.ts +51 -0
  140. package/src/BottomSheet/index.ts +15 -0
  141. package/src/BottomSheet/snapOffsets.test.ts +187 -0
  142. package/src/BottomSheet/snapOffsets.ts +159 -0
  143. package/src/BottomSheet/useMobileKeyboard.ts +499 -0
  144. package/src/BottomSheet/useSheetGestures.test.ts +1059 -0
  145. package/src/BottomSheet/useSheetGestures.ts +1459 -0
  146. package/src/Chat/ChatComposerInput.tsx +3 -4
  147. package/src/ComplexSelector/ComplexSelector.tsx +12 -5
  148. package/src/ContextMenu/ContextMenu.tsx +4 -2
  149. package/src/DateInput/DateInput.test.tsx +21 -0
  150. package/src/DateInput/DateInput.tsx +9 -1
  151. package/src/DateTimeInput/DateTimeInput.doc.mjs +4 -0
  152. package/src/DateTimeInput/DateTimeInput.test.tsx +137 -0
  153. package/src/DateTimeInput/DateTimeInput.tsx +39 -2
  154. package/src/Dialog/Dialog.tsx +2 -1
  155. package/src/Field/Field.doc.mjs +1 -0
  156. package/src/Field/InputClearButton.test.tsx +25 -0
  157. package/src/Field/InputClearButton.tsx +4 -1
  158. package/src/FileInput/FileInput.test.tsx +53 -9
  159. package/src/Lightbox/Lightbox.test.tsx +49 -28
  160. package/src/Lightbox/Lightbox.tsx +7 -3
  161. package/src/MobileNav/MobileNav.tsx +128 -37
  162. package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +426 -0
  163. package/src/MobileNav/MobileNavCloseTiming.test.ts +58 -0
  164. package/src/MobileNav/MobileNavCloseVisibility.test.tsx +172 -0
  165. package/src/MultiSelector/MultiSelector.test.tsx +195 -51
  166. package/src/MultiSelector/MultiSelector.tsx +22 -8
  167. package/src/NumberInput/NumberInput.test.tsx +18 -0
  168. package/src/NumberInput/NumberInput.tsx +9 -1
  169. package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
  170. package/src/Selector/Selector.test.tsx +85 -26
  171. package/src/Selector/Selector.tsx +13 -4
  172. package/src/StatusDot/StatusDot.doc.mjs +13 -0
  173. package/src/StatusDot/StatusDot.test.tsx +115 -8
  174. package/src/StatusDot/StatusDot.tsx +74 -9
  175. package/src/Switch/Switch.test.tsx +16 -0
  176. package/src/Switch/Switch.tsx +7 -0
  177. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +20 -2
  178. package/src/TimeInput/TimeInput.test.tsx +23 -0
  179. package/src/TimeInput/TimeInput.tsx +8 -0
  180. package/src/Tokenizer/Tokenizer.test.tsx +50 -32
  181. package/src/Tokenizer/Tokenizer.tsx +5 -5
  182. package/src/Tooltip/useTooltip.tsx +4 -1
  183. package/src/Typeahead/BaseTypeahead.tsx +10 -3
  184. package/src/Typeahead/Typeahead.test.tsx +116 -7
  185. package/src/Typeahead/Typeahead.tsx +10 -1
  186. package/src/__tests__/stubMatchMedia.test.ts +79 -0
  187. package/src/__tests__/stubMatchMedia.ts +95 -0
  188. package/src/hooks/index.ts +9 -5
  189. package/src/hooks/useFocusTrap.ts +1 -14
  190. package/src/hooks/useInputStatusIcon.test.tsx +19 -0
  191. package/src/hooks/useInputStatusIcon.tsx +7 -0
  192. package/src/index.ts +1 -0
  193. package/src/theme/defineTheme.ts +22 -4
  194. package/src/theme/expandColorScale.test.ts +138 -0
  195. package/src/theme/expandColorScale.ts +89 -44
  196. package/src/utils/ime.test.ts +32 -0
  197. package/src/utils/ime.ts +69 -0
  198. package/src/utils/index.ts +2 -0
  199. package/dist/astryx.umd.js +0 -147
  200. package/dist/astryx.umd.js.map +0 -7
@@ -6,8 +6,8 @@
6
6
  * @output Token overrides for derivable color tokens
7
7
  * @position Theme utility; consumed by defineTheme.ts
8
8
  *
9
- * Generates color token overrides from a single accent color using the
10
- * HCT perceptual color model. Only produces tokens that meaningfully
9
+ * Generates color token overrides from an accent seed using the HCT
10
+ * perceptual color model. Only produces tokens that meaningfully
11
11
  * derive from the accent — status colors, categorical hues, and fixed
12
12
  * tokens (on-dark/on-light) fall through to colorDefaults.
13
13
  *
@@ -15,11 +15,19 @@
15
15
  * ramp (seeded from the default accent's hue) while the accent tokens
16
16
  * themselves fall through to colorDefaults, same as the tokens above.
17
17
  *
18
+ * `accent` also accepts a `[light, dark]` tuple (matching `TokenValue` in
19
+ * defineTheme). A tuple seeds each color scheme from its own half: the
20
+ * light side of every generated `light-dark()` pair derives from the light
21
+ * accent's palettes, the dark side from the dark accent's. A plain string
22
+ * seeds both sides identically, token for token the same output as before
23
+ * tuples existed.
24
+ *
18
25
  * WCAG contrast guarantees (asserted in expandColorScale.test.ts):
19
26
  * - Text tones are guaranteed >= 4.5:1 against their surfaces by tone
20
27
  * spacing alone — HCT tone is CIE L*, which fixes relative luminance
21
28
  * regardless of hue/chroma, so the fixed tone assignments hold for any
22
- * accent/neutralStyle (WCAG 1.4.3).
29
+ * accent/neutralStyle (WCAG 1.4.3), and each half of a tuple pairs with
30
+ * surfaces derived from that same seed.
23
31
  * - --color-border-emphasized (form-control boundaries) is tone-bumped
24
32
  * until it reaches >= 3:1 against the generated surface (WCAG 1.4.11).
25
33
  * - --color-border, --color-skeleton, and --color-track are intentionally
@@ -46,6 +54,9 @@ import { hexToHct, hctToHex, tonalPalette, hexWithAlpha } from "./hct.js";
46
54
  * // Minimal — just a seed color
47
55
  * { accent: '#0064E0' }
48
56
  *
57
+ * // Per-scheme seeds: light palettes from '#0064E0', dark from '#48CAE4'
58
+ * { accent: ['#0064E0', '#48CAE4'] }
59
+ *
49
60
  * // With customization
50
61
  * { accent: '#B7410E', neutralStyle: 'warm', contrast: 'high' }
51
62
  *
@@ -126,6 +137,11 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
126
137
  * --color-on-dark/on-light) are NOT generated — they fall through
127
138
  * to colorDefaults.
128
139
  *
140
+ * A `[light, dark]` tuple accent seeds each scheme separately: the light
141
+ * half of every generated `light-dark()` pair comes from the light seed's
142
+ * palettes, the dark half from the dark seed's. A string accent seeds both
143
+ * halves from the same palettes, exactly as before tuples were supported.
144
+ *
129
145
  * Without an `accent`, the accent tokens join that fall-through set: the
130
146
  * neutrals are seeded from the default accent's hue, and --color-accent,
131
147
  * --color-accent-muted and --color-on-accent keep their colorDefaults values.
@@ -135,6 +151,9 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
135
151
  * const tokens = expandColorScale({ accent: '#0064E0' });
136
152
  * // tokens['--color-accent'] === 'light-dark(#..., #...)'
137
153
  *
154
+ * const perScheme = expandColorScale({ accent: ['#0064E0', '#48CAE4'] });
155
+ * // light half derives from #0064E0, dark half from #48CAE4
156
+ *
138
157
  * const neutralOnly = expandColorScale({ neutralStyle: 'warm' });
139
158
  * // neutralOnly['--color-accent'] === undefined
140
159
  * ```
@@ -145,14 +164,26 @@ export function expandColorScale(config) {
145
164
  neutralStyle = 'cool',
146
165
  contrast = 'standard'
147
166
  } = config;
148
- const seed = hexToHct(accent ?? DEFAULT_ACCENT_SEED);
149
- const seedHue = seed.hue;
150
- const primaryChroma = Math.max(seed.chroma, 48);
167
+
168
+ // Normalize to per-scheme seeds. A string accent (or an absent one) uses
169
+ // the same seed for both halves, which keeps single-seed output identical
170
+ // to the pre-tuple implementation.
171
+ const [lightAccent, darkAccent] = Array.isArray(accent) ? accent : [accent, accent];
172
+ const lightSeed = hexToHct(lightAccent ?? DEFAULT_ACCENT_SEED);
173
+ const sameSeed = darkAccent === lightAccent;
174
+ const darkSeed = sameSeed ? lightSeed : hexToHct(darkAccent ?? DEFAULT_ACCENT_SEED);
151
175
  const neutralChroma = NEUTRAL_CHROMA[neutralStyle] ?? 5;
152
176
  const neutralVariantChroma = NEUTRAL_VARIANT_CHROMA[neutralStyle] ?? 8;
153
- const P = tonalPalette(seedHue, primaryChroma);
154
- const N = tonalPalette(seedHue, neutralChroma);
155
- const NV = tonalPalette(seedHue, neutralVariantChroma);
177
+
178
+ // Palette naming: *L palettes feed the light (first) half of each ld()
179
+ // pair below, *D palettes the dark (second) half. With a single seed the
180
+ // D palettes alias the L ones.
181
+ const PL = tonalPalette(lightSeed.hue, Math.max(lightSeed.chroma, 48));
182
+ const NL = tonalPalette(lightSeed.hue, neutralChroma);
183
+ const NVL = tonalPalette(lightSeed.hue, neutralVariantChroma);
184
+ const PD = sameSeed ? PL : tonalPalette(darkSeed.hue, Math.max(darkSeed.chroma, 48));
185
+ const ND = sameSeed ? NL : tonalPalette(darkSeed.hue, neutralChroma);
186
+ const NVD = sameSeed ? NVL : tonalPalette(darkSeed.hue, neutralVariantChroma);
156
187
  const isHigh = contrast === 'high';
157
188
  const textPrimaryLightTone = isHigh ? 0 : 10;
158
189
  const textPrimaryDarkTone = isHigh ? 99 : 90;
@@ -173,7 +204,7 @@ export function expandColorScale(config) {
173
204
  // contrast starts at 70/30 and walks toward mid-scale only as far as needed.
174
205
  const borderEmphasizedStartLight = isHigh ? 50 : 70;
175
206
  const borderEmphasizedStartDark = isHigh ? 50 : 30;
176
- const borderEmphasized = ld(ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartLight, -1, N[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartDark, 1, N[10], NON_TEXT_MIN_CONTRAST));
207
+ const borderEmphasized = ld(ensureContrastTone(lightSeed.hue, neutralVariantChroma, borderEmphasizedStartLight, -1, NL[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(darkSeed.hue, neutralVariantChroma, borderEmphasizedStartDark, 1, ND[10], NON_TEXT_MIN_CONTRAST));
177
208
  return {
178
209
  // Core semantic — only with a seed accent. Without one these fall through
179
210
  // to colorDefaults, whose --color-accent is NOT what the default seed
@@ -181,47 +212,46 @@ export function expandColorScale(config) {
181
212
  // recolor every neutral-only theme. Nullish and not truthy, matching the
182
213
  // seed above, so a supplied-but-malformed accent keeps its old behavior.
183
214
  ...(accent != null ? {
184
- '--color-accent': ld(P[40], P[80]),
215
+ '--color-accent': ld(PL[40], PD[80]),
185
216
  // Derived accent tokens reference --color-accent instead of baking its
186
217
  // resolved hex, so a scoped override of the base token re-accents the
187
218
  // whole subtree at runtime. --color-on-accent stays baked: it is a
188
219
  // contrast computation against the accent, which CSS cannot express.
189
220
  '--color-accent-muted': ld(accentWithAlpha(0.2), accentWithAlpha(0.25)),
190
- '--color-on-accent': ld(P[100], P[20])
221
+ '--color-on-accent': ld(PL[100], PD[20])
191
222
  } : null),
192
- '--color-neutral': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[90], 0.2)),
193
- '--color-background-surface': ld(N[99], N[10]),
194
- '--color-background-body': ld(N[95], N[5]),
195
- '--color-overlay': ld(hexWithAlpha(N[10], 0.4), hexWithAlpha(N[10], 0.6)),
196
- '--color-overlay-hover': ld(hexWithAlpha(N[10], 0.05), hexWithAlpha(N[100], 0.05)),
197
- '--color-overlay-pressed': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[100], 0.1)),
198
- '--color-background-muted': ld(hexWithAlpha(N[10], 0.05), hexWithAlpha(N[10], 0.5)),
223
+ '--color-neutral': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[90], 0.2)),
224
+ '--color-background-surface': ld(NL[99], ND[10]),
225
+ '--color-background-body': ld(NL[95], ND[5]),
226
+ '--color-overlay': ld(hexWithAlpha(NL[10], 0.4), hexWithAlpha(ND[10], 0.6)),
227
+ '--color-overlay-hover': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[100], 0.05)),
228
+ '--color-overlay-pressed': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[100], 0.1)),
229
+ '--color-background-muted': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[10], 0.5)),
199
230
  // Text
200
- '--color-text-primary': ld(N[textPrimaryLightTone], N[textPrimaryDarkTone]),
201
- '--color-text-secondary': ld(NV[textSecondaryLightTone], NV[textSecondaryDarkTone]),
202
- '--color-text-disabled': ld(NV[60], NV[40]),
231
+ '--color-text-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
232
+ '--color-text-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
233
+ '--color-text-disabled': ld(NVL[60], NVD[40]),
203
234
  '--color-text-accent': 'var(--color-accent)',
204
235
  // Icon
205
236
  '--color-icon-accent': 'var(--color-accent)',
206
- '--color-icon-primary': ld(N[textPrimaryLightTone], N[textPrimaryDarkTone]),
207
- '--color-icon-secondary': ld(NV[textSecondaryLightTone], NV[textSecondaryDarkTone]),
208
- '--color-icon-disabled': ld(NV[60], NV[40]),
237
+ '--color-icon-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
238
+ '--color-icon-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
239
+ '--color-icon-disabled': ld(NVL[60], NVD[40]),
209
240
  // Surface variants
210
- '--color-background-card': ld(N[99], N[10]),
211
- '--color-background-popover': ld(N[99], N[20]),
212
- '--color-background-inverted': ld(N[10], N[99]),
213
- // Border
241
+ '--color-background-card': ld(NL[99], ND[10]),
242
+ '--color-background-popover': ld(NL[99], ND[20]),
243
+ '--color-background-inverted': ld(NL[10], ND[99]),
214
244
  // Border
215
245
  // Decorative hairline — not a WCAG 1.4.11 boundary. High contrast
216
246
  // doubles the alpha so structural boundaries stay perceivable.
217
- '--color-border': ld(hexWithAlpha(N[10], borderSubtleAlpha), hexWithAlpha(N[95], borderSubtleAlpha)),
247
+ '--color-border': ld(hexWithAlpha(NL[10], borderSubtleAlpha), hexWithAlpha(ND[95], borderSubtleAlpha)),
218
248
  '--color-border-emphasized': borderEmphasized,
219
249
  // Effects
220
- '--color-skeleton': ld(NV[70], NV[30]),
250
+ '--color-skeleton': ld(NVL[70], NVD[30]),
221
251
  // Channel-on-body surface (ProgressBar/Slider tracks, Switch off-state).
222
252
  // Defaults to the same NV[70]/NV[30] ramp stop as --color-skeleton.
223
- '--color-track': ld(NV[70], NV[30]),
224
- '--color-shadow': ld(hexWithAlpha(N[0], 0.1), hexWithAlpha(N[0], 0.3)),
253
+ '--color-track': ld(NVL[70], NVD[30]),
254
+ '--color-shadow': ld(hexWithAlpha(NL[0], 0.1), hexWithAlpha(ND[0], 0.3)),
225
255
  '--color-tint-hover': ld('black', 'white')
226
256
  };
227
257
  }
@@ -0,0 +1,5 @@
1
+ export declare function isImeKeyEvent(event: {
2
+ isComposing?: boolean;
3
+ keyCode?: number;
4
+ }): boolean;
5
+ //# sourceMappingURL=ime.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ime.d.ts","sourceRoot":"","sources":["../../src/utils/ime.ts"],"names":[],"mappings":"AA6DA,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,OAAO,CAIV"}
@@ -0,0 +1,63 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ /**
4
+ * @file ime.ts
5
+ * @input Receives a keyboard event (React SyntheticEvent's `nativeEvent`, or a
6
+ * native DOM KeyboardEvent) with optional `isComposing` / `keyCode`.
7
+ * @output Exports `isImeKeyEvent`, the canonical predicate for "this keydown is
8
+ * part of an in-progress IME composition and must not be treated as a command".
9
+ * @position Shared low-level utility; consumed by every editable/overlay surface
10
+ * that handles Enter/Escape/arrows in `onKeyDown` (Typeahead, PowerSearch,
11
+ * Dialog, ContextMenu, Tooltip, Chat composer, focus-trap Escape, ...).
12
+ *
13
+ * ── Why this exists (read once, here — do not re-explain at call sites) ──
14
+ *
15
+ * When a CJK user (Korean / Japanese / Chinese) is composing text via an IME,
16
+ * the browser fires a `keydown` event to COMMIT or CANCEL the pending
17
+ * composition (Enter commits the highlighted candidate; Escape cancels it;
18
+ * ArrowUp/Down/Home/End navigate the candidate window). Crucially this
19
+ * `keydown` fires BEFORE the `compositionend` event that actually writes the
20
+ * committed text into the field. So a naive `onKeyDown` handler sees a bare
21
+ * "Enter" or "Escape" and misreads the composition-commit/cancel as an
22
+ * application command — accepting a typeahead suggestion, submitting a chat
23
+ * message, closing a dialog/menu/tooltip, or saving a filter — mid-composition.
24
+ * The fix is to detect the composing keydown and early-return before running
25
+ * any command logic.
26
+ *
27
+ * Two signals, both needed:
28
+ *
29
+ * 1. `event.isComposing === true` — the modern, spec'd signal
30
+ * (https://www.w3.org/TR/uievents/#dom-keyboardevent-iscomposing). This is
31
+ * the primary check and is reliable in current evergreen browsers.
32
+ *
33
+ * 2. `event.keyCode === 229` — the legacy fallback. `229` is the sentinel
34
+ * keyCode browsers report for "the key event is being processed by an IME".
35
+ * It is still load-bearing: some IMEs and older Safari fire the composing
36
+ * `keydown` with `isComposing` NOT yet set to `true`, but DO report
37
+ * keyCode 229. Keeping both makes the guard robust across the browser
38
+ * matrix we support. Do not drop the 229 fallback without a browser-matrix
39
+ * audit.
40
+ *
41
+ * ── Which event object to pass ──
42
+ *
43
+ * React's SyntheticEvent for KeyboardEvent *does* surface `isComposing`, but to
44
+ * avoid any cross-browser normalization gap prefer passing the *native* event
45
+ * (`e.nativeEvent`) from React handlers — that is what BaseTypeahead,
46
+ * PowerSearch, and the Chat composer do. Native DOM listeners (Dialog,
47
+ * ContextMenu, Tooltip, focus-trap) pass the DOM `KeyboardEvent` directly.
48
+ * The parameter is intentionally structurally typed so both shapes are accepted.
49
+ *
50
+ * Note: `keyCode` is deprecated on the DOM `KeyboardEvent` type but is still
51
+ * present at runtime; we read it defensively via the optional structural field.
52
+ */
53
+
54
+ /**
55
+ * The sentinel `keyCode` browsers report while a key event is being processed
56
+ * by an IME (the composing keydown that fires before `compositionend`). See the
57
+ * file header for why this legacy signal is still load-bearing alongside
58
+ * `isComposing`.
59
+ */
60
+ const IME_PROCESSING_KEY_CODE = 229;
61
+ export function isImeKeyEvent(event) {
62
+ return event.isComposing === true || event.keyCode === IME_PROCESSING_KEY_CODE;
63
+ }
@@ -31,4 +31,5 @@ export type { RGBA } from './color';
31
31
  export { devWarn, devError, warnOnce, formatDevMessage } from './devWarning';
32
32
  export { rtlStyles } from './rtlStyles';
33
33
  export { focusOutlineStyles, focusOutlineProps } from './focusOutline.stylex';
34
+ export { isImeKeyEvent } from './ime';
34
35
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC"}
@@ -28,4 +28,5 @@ export { rtlStyles } from "./rtlStyles.js";
28
28
 
29
29
  // The shared focus ring, exported for @astryxdesign/lab — same reason
30
30
  // rtlStyles is: a style that must be identical across packages, not copied.
31
- export { focusOutlineStyles, focusOutlineProps } from "./focusOutline.stylex.js";
31
+ export { focusOutlineStyles, focusOutlineProps } from "./focusOutline.stylex.js";
32
+ export { isImeKeyEvent } from "./ime.js";