@astryxdesign/core 0.1.4-canary.cfe8ece → 0.1.4-canary.d209405

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 (45) 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 +5 -1
  4. package/dist/Card/Card.d.ts +4 -2
  5. package/dist/Card/Card.d.ts.map +1 -1
  6. package/dist/Card/Card.js +15 -7
  7. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  8. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  9. package/dist/CheckboxInput/CheckboxInput.js +3 -1
  10. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  11. package/dist/ClickableCard/ClickableCard.js +26 -3
  12. package/dist/InputGroup/InputGroup.js +2 -2
  13. package/dist/Item/Item.js +1 -1
  14. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  15. package/dist/PowerSearch/PowerSearch.js +39 -21
  16. package/dist/TabList/TabMenu.d.ts.map +1 -1
  17. package/dist/TabList/TabMenu.js +34 -7
  18. package/dist/Table/BaseTable.d.ts.map +1 -1
  19. package/dist/Table/BaseTable.js +2 -1
  20. package/dist/astryx.css +6 -0
  21. package/dist/astryx.umd.js +30 -30
  22. package/dist/astryx.umd.js.map +3 -3
  23. package/package.json +1 -1
  24. package/src/Banner/Banner.test.tsx +38 -0
  25. package/src/Banner/Banner.tsx +8 -1
  26. package/src/Calendar/Calendar.test.tsx +18 -0
  27. package/src/Calendar/Calendar.tsx +3 -0
  28. package/src/Card/Card.tsx +16 -6
  29. package/src/CheckboxInput/CheckboxInput.test.tsx +71 -4
  30. package/src/CheckboxInput/CheckboxInput.tsx +2 -0
  31. package/src/ClickableCard/ClickableCard.tsx +45 -2
  32. package/src/Field/FieldLabel.test.tsx +2 -2
  33. package/src/Icon/Icon.test.tsx +20 -20
  34. package/src/InputGroup/InputGroup.tsx +2 -2
  35. package/src/Item/Item.tsx +1 -1
  36. package/src/NumberInput/NumberInput.test.tsx +3 -3
  37. package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
  38. package/src/PowerSearch/PowerSearch.test.tsx +109 -1
  39. package/src/PowerSearch/PowerSearch.tsx +37 -16
  40. package/src/TabList/TabList.test.tsx +185 -1
  41. package/src/TabList/TabMenu.tsx +45 -9
  42. package/src/Table/BaseTable.tsx +2 -1
  43. package/src/TextArea/TextArea.test.tsx +3 -3
  44. package/src/TextInput/TextInput.test.tsx +3 -3
  45. package/src/__tests__/TestIcon.tsx +26 -0
@@ -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
@@ -660,7 +660,11 @@ function DayCell({
660
660
  type: "button",
661
661
  "data-date": day.iso,
662
662
  "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
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
  ,
@@ -21,8 +21,10 @@ import type { BaseProps } from '../BaseProps';
21
21
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
22
22
  * Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
23
23
  *
24
- * All variants include a transparent border to prevent layout jitter
25
- * when switching variants. Themes can override borderWidth/borderColor.
24
+ * Only `default` draws a visible border. Its border width is subtracted from
25
+ * the padding so the total inset (border + padding) equals the padding token —
26
+ * keeping content geometry faithful to the spacing scale and identical to the
27
+ * borderless variants. Themes can override borderWidth/borderColor.
26
28
  */
27
29
  export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
28
30
  export type { SizeValue } from '../utils/types';
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAkFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;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,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwDX;yBArEe,IAAI"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;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,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}
package/dist/Card/Card.js CHANGED
@@ -34,8 +34,10 @@ import { themeProps } from "../utils/themeProps.js";
34
34
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
35
35
  * Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
36
36
  *
37
- * All variants include a transparent border to prevent layout jitter
38
- * when switching variants. Themes can override borderWidth/borderColor.
37
+ * Only `default` draws a visible border. Its border width is subtracted from
38
+ * the padding so the total inset (border + padding) equals the padding token —
39
+ * keeping content geometry faithful to the spacing scale and identical to the
40
+ * borderless variants. Themes can override borderWidth/borderColor.
39
41
  */
40
42
  import { jsx as _jsx } from "react/jsx-runtime";
41
43
  // =============================================================================
@@ -47,13 +49,16 @@ const styles = {
47
49
  "--_card-radius": "x2kkz0m",
48
50
  kaIpWk: "x153u1i6",
49
51
  kVQacm: "x7giv3",
50
- kMzoRj: "x1litavf",
51
- ksu8eU: "x1y0btm7",
52
- kVAM5u: "x9r1u3d",
53
52
  $$css: true
54
53
  },
55
54
  withBorder: {
55
+ kMzoRj: "x1litavf",
56
+ ksu8eU: "x1y0btm7",
56
57
  kVAM5u: "xvy26l8",
58
+ kZCmMZ: "xs19ii7",
59
+ kwRFfy: "x12frdag",
60
+ kLKAdn: "x1nex4ik",
61
+ kGO01o: "xbv1mwh",
57
62
  $$css: true
58
63
  },
59
64
  scrollable: {
@@ -192,14 +197,17 @@ export function Card({
192
197
  ref: ref,
193
198
  ...mergeProps(themeProps('card', {
194
199
  variant
195
- }), stylex.props(styles.card, variantStyles[variant], variant === 'default' && styles.withBorder, hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
200
+ }), stylex.props(styles.card, variantStyles[variant], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
196
201
  useThemeDefault: 'card'
197
202
  } : {
198
203
  paddingInnerX: paddingToken,
199
204
  paddingInnerY: paddingToken,
200
205
  paddingOuterX: paddingToken,
201
206
  paddingOuterY: paddingToken
202
- }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], xstyle), className, style),
207
+ }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
208
+ // Applied after the container padding so the border-inset calc wins;
209
+ // it reads the --container-padding-* vars set above.
210
+ variant === 'default' && styles.withBorder, xstyle), className, style),
203
211
  ...props,
204
212
  children: children
205
213
  });
@@ -158,7 +158,7 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
158
158
  * />
159
159
  * ```
160
160
  */
161
- export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, }: CheckboxInputProps): import("react").JSX.Element;
161
+ export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, ...rest }: CheckboxInputProps): import("react").JSX.Element;
162
162
  export declare namespace CheckboxInput {
163
163
  var displayName: string;
164
164
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA8IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,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;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;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,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,kBAAkB,+BAuNpB;yBA/Oe,aAAa"}
1
+ {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA8IhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,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;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;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,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAwNpB;yBAjPe,aAAa"}
@@ -219,7 +219,8 @@ export function CheckboxInput({
219
219
  xstyle,
220
220
  className,
221
221
  style,
222
- ref
222
+ ref,
223
+ ...rest
223
224
  }) {
224
225
  const id = useId();
225
226
  const descriptionID = useId();
@@ -292,6 +293,7 @@ export function CheckboxInput({
292
293
  children: [/*#__PURE__*/_jsxs("div", {
293
294
  ...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
294
295
  children: [/*#__PURE__*/_jsx("input", {
296
+ ...rest,
295
297
  ref: mergeRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
296
298
  id: id,
297
299
  type: "checkbox"
@@ -1 +1 @@
1
- {"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoE5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAuEpB;yBAzFe,aAAa"}
1
+ {"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA8EpB;yBAhGe,aAAa"}
@@ -30,7 +30,7 @@
30
30
  import { useRef } from 'react';
31
31
  import * as stylex from '@stylexjs/stylex';
32
32
  import "../theme/tokens.stylex.js";
33
- import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
33
+ import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
34
34
  import { mergeProps, mergeRefs } from "../utils/index.js";
35
35
  import { Card } from "../Card/Card.js";
36
36
  import { useClickableContainer } from "../hooks/useClickableContainer.js";
@@ -59,7 +59,6 @@ const styles = {
59
59
  k5JduY: "x1s928wv",
60
60
  kwXMNM: "x1j6awrg",
61
61
  kv0HGH: "xarstr8",
62
- kUfP38: "x1k48kgn",
63
62
  kloYau: "x2q1x1w",
64
63
  kRicXK: "x1ywzrc5",
65
64
  kPNhGg: "x97pup0",
@@ -72,6 +71,25 @@ const styles = {
72
71
  kJs8I2: "x1vwwndy",
73
72
  $$css: true
74
73
  },
74
+ borderless: {
75
+ kMzoRj: "xc342km",
76
+ $$css: true
77
+ },
78
+ bordered: {
79
+ kVAM5u: "x14i3s5s",
80
+ kZCmMZ: "xs19ii7",
81
+ kwRFfy: "x12frdag",
82
+ kLKAdn: "x1nex4ik",
83
+ kGO01o: "xbv1mwh",
84
+ k1ekBW: "xshfolx",
85
+ kIyJzY: "xuedmi6",
86
+ kAMwcw: "xlr8y92",
87
+ $$css: true
88
+ },
89
+ borderedHoverOnPointer: {
90
+ kbt25U: "x1ww4t2b",
91
+ $$css: true
92
+ },
75
93
  disabled: {
76
94
  kkrTdU: "x1h6gzvc",
77
95
  kSiTet: "xbyyjgo",
@@ -157,6 +175,11 @@ export function ClickableCard({
157
175
  onMouseUpProp(e);
158
176
  } : onMouseUp;
159
177
  const isLink = href != null;
178
+
179
+ // Only the `default` variant has a visible border. Card draws a transparent
180
+ // 1px border on every other variant purely to avoid layout jitter; we drop
181
+ // it here so the hover overlay covers the full box with no untinted ring.
182
+ const hasBorder = variant === 'default';
160
183
  return /*#__PURE__*/_jsxs(Card, {
161
184
  ref: mergeRefs(ref, containerRef),
162
185
  width: width,
@@ -170,7 +193,7 @@ export function ClickableCard({
170
193
  className: classNameProp,
171
194
  style
172
195
  }),
173
- xstyle: [styles.interactive, styles.focusWithin, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, isDisabled && styles.disabled, xstyleProp],
196
+ xstyle: [styles.interactive, styles.focusWithin, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
174
197
  onClick: !isDisabled ? onClick : undefined,
175
198
  onMouseUp: !isDisabled ? handleMouseUp : undefined,
176
199
  ...props,
@@ -122,11 +122,11 @@ export function InputGroup({
122
122
  labelTooltip: labelTooltip,
123
123
  children: /*#__PURE__*/_jsx("div", {
124
124
  ref: ref,
125
+ "data-testid": testId,
126
+ ...rest,
125
127
  role: "group",
126
128
  "aria-labelledby": labelID,
127
129
  "aria-describedby": describedByIDs,
128
- "data-testid": testId,
129
- ...rest,
130
130
  ...mergeProps(themeProps('input-group', {
131
131
  size,
132
132
  status: status?.type ?? null
package/dist/Item/Item.js CHANGED
@@ -280,9 +280,9 @@ export function Item({
280
280
  });
281
281
  return /*#__PURE__*/_jsx(Component, {
282
282
  ref: ref,
283
+ ...restProps,
283
284
  "aria-selected": isSelected || undefined,
284
285
  "aria-disabled": isDisabled || undefined,
285
- ...restProps,
286
286
  ...mergeProps(themeProps('item', {
287
287
  density,
288
288
  align
@@ -1 +1 @@
1
- {"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
@@ -13,7 +13,7 @@
13
13
  * - /packages/core/src/PowerSearch/index.ts
14
14
  * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
15
15
  */
16
- import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
16
+ import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
17
17
  import * as stylex from '@stylexjs/stylex';
18
18
  import { Tokenizer } from "../Tokenizer/index.js";
19
19
  import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
@@ -22,6 +22,7 @@ import { Avatar } from "../Avatar/index.js";
22
22
  import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
23
23
  import { Icon } from "../Icon/index.js";
24
24
  import { usePopover } from "../Popover/usePopover.js";
25
+ import { useAnnounce } from "../hooks/useAnnounce.js";
25
26
  import "../theme/tokens.stylex.js";
26
27
  import { spacingVars, colorVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
27
28
  import { mergeRefs } from "../utils/index.js";
@@ -697,34 +698,51 @@ export function PowerSearch({
697
698
  }, popoverKey);
698
699
  }, [popoverPartialFilter, popoverState, EditorOverride, configProp, config, handlePopoverSave, handlePopoverCancel, popoverSaveButtonLabel, isReadOnly]);
699
700
 
701
+ // Plain-text form of the result count, shared by the visible label and the
702
+ // screen-reader announcement so the two never drift.
703
+ const resultCountText = useMemo(() => {
704
+ if (resultCount == null) {
705
+ return null;
706
+ }
707
+ if (typeof resultCount === 'number') {
708
+ const formatted = new Intl.NumberFormat().format(resultCount);
709
+ return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
710
+ }
711
+ return resultCount;
712
+ }, [resultCount]);
713
+
714
+ // Announce result-count changes to screen readers through a polite live
715
+ // region, mirroring the way Typeahead announces its dropdown result count.
716
+ // The count is otherwise only shown visually and stays silent to assistive
717
+ // tech. Skip the first run so the count already present on mount isn't
718
+ // announced unprompted — only user-driven changes are spoken.
719
+ const announce = useAnnounce();
720
+ const hasMountedRef = useRef(false);
721
+ useEffect(() => {
722
+ if (!hasMountedRef.current) {
723
+ hasMountedRef.current = true;
724
+ return;
725
+ }
726
+ if (resultCountText != null) {
727
+ announce(resultCountText);
728
+ }
729
+ }, [resultCountText, announce]);
730
+
700
731
  // Build combined endContent from resultCount + endContent props
701
732
  const combinedEndContent = useMemo(() => {
702
- let resultCountNode = null;
703
- if (resultCount != null) {
704
- if (typeof resultCount === 'number') {
705
- const formatted = new Intl.NumberFormat().format(resultCount);
706
- resultCountNode = /*#__PURE__*/_jsxs("span", {
707
- ...{
708
- className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
709
- },
710
- children: [formatted, " ", resultCount === 1 ? 'result' : 'results']
711
- });
712
- } else {
713
- resultCountNode = /*#__PURE__*/_jsx("span", {
714
- ...{
715
- className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
716
- },
717
- children: resultCount
718
- });
719
- }
720
- }
733
+ const resultCountNode = resultCountText != null ? /*#__PURE__*/_jsx("span", {
734
+ ...{
735
+ className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
736
+ },
737
+ children: resultCountText
738
+ }) : null;
721
739
  if (resultCountNode && endContent) {
722
740
  return /*#__PURE__*/_jsxs(_Fragment, {
723
741
  children: [resultCountNode, endContent]
724
742
  });
725
743
  }
726
744
  return resultCountNode || endContent || undefined;
727
- }, [resultCount, endContent]);
745
+ }, [resultCountText, endContent]);
728
746
  return /*#__PURE__*/_jsxs(_Fragment, {
729
747
  children: [/*#__PURE__*/_jsx("div", {
730
748
  ref: mergeRefs(ref, popover.triggerRef),
@@ -1 +1 @@
1
- {"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAiJd;yBAxJe,OAAO"}
1
+ {"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAqLd;yBA5Le,OAAO"}
@@ -15,7 +15,7 @@
15
15
  * - /packages/core/src/TabList/TabList.test.tsx
16
16
  * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
17
17
  */
18
- import React, { useCallback, useId } from 'react';
18
+ import React, { useCallback, useId, useRef } from 'react';
19
19
  import * as stylex from '@stylexjs/stylex';
20
20
  import { Icon } from "../Icon/index.js";
21
21
  import { renderIconSlot } from "../Icon/index.js";
@@ -135,18 +135,31 @@ export function TabMenu({
135
135
  }) {
136
136
  const tabListCtx = useTabListContext();
137
137
  const menuId = useId();
138
+ const buttonRef = useRef(null);
138
139
  const popover = usePopover({
139
140
  hasLightDismiss: true,
140
141
  hasCloseButton: false,
141
142
  hasAutoFocus: false,
142
143
  // The popup's own role="menu" is the exposed semantics; a modal dialog
143
144
  // wrapper would announce an unnamed dialog around the menu.
144
- role: 'none'
145
+ role: 'none',
146
+ // Return focus to the trigger when the menu closes (Escape, Tab, select,
147
+ // or light dismiss) so keyboard focus is never dropped to <body>.
148
+ onHide: useCallback(() => {
149
+ buttonRef.current?.focus();
150
+ }, [])
145
151
  });
152
+
153
+ // The overflow menu is a composite widget: a single roving tab stop with
154
+ // arrow-key navigation between items, per the APG menu pattern. The hook owns
155
+ // item tabindex — items render tabIndex={-1} and exactly one is promoted to 0.
146
156
  const {
147
157
  listRef,
148
- handleKeyDown: handleListKeyDown
158
+ handleKeyDown: handleListKeyDown,
159
+ handleFocus,
160
+ focusFirst
149
161
  } = useListFocus({
162
+ hasRovingTabIndex: true,
150
163
  onEscape: () => popover.hide()
151
164
  });
152
165
  const handleToggle = useCallback(() => {
@@ -154,8 +167,21 @@ export function TabMenu({
154
167
  popover.hide();
155
168
  } else {
156
169
  popover.show();
170
+ // Move focus into the menu on open so arrow navigation works and the
171
+ // roving tab stop lands on a real item (APG menu-button focus-on-open).
172
+ requestAnimationFrame(() => focusFirst());
173
+ }
174
+ }, [popover, focusFirst]);
175
+ const handleMenuKeyDown = useCallback(e => {
176
+ // APG menu-button: Tab leaves the menu rather than walking its items.
177
+ // Close and let onHide return focus to the trigger, from which the
178
+ // browser's default Tab continues to the next element.
179
+ if (e.key === 'Tab') {
180
+ popover.hide();
181
+ return;
157
182
  }
158
- }, [popover]);
183
+ handleListKeyDown(e);
184
+ }, [handleListKeyDown, popover]);
159
185
  const selectedOption = options.find(o => o.value === tabListCtx.value);
160
186
  const triggerLabel = selectedOption?.label ?? label;
161
187
  const hasSelectedOption = selectedOption != null;
@@ -164,7 +190,7 @@ export function TabMenu({
164
190
  tabListCtx.onChange(value);
165
191
  popover.hide();
166
192
  }, [tabListCtx, popover]);
167
- const setButtonRef = mergeRefs(popover.triggerRef, ref);
193
+ const setButtonRef = mergeRefs(popover.triggerRef, buttonRef, ref);
168
194
  return /*#__PURE__*/_jsxs(_Fragment, {
169
195
  children: [/*#__PURE__*/_jsxs("button", {
170
196
  ref: setButtonRef,
@@ -222,7 +248,8 @@ export function TabMenu({
222
248
  id: menuId,
223
249
  role: "menu",
224
250
  "aria-label": label,
225
- onKeyDown: handleListKeyDown,
251
+ onKeyDown: handleMenuKeyDown,
252
+ onFocus: handleFocus,
226
253
  ...mergeProps(themeProps('tab-menu-dropdown'), {
227
254
  className: "x78zum5 xdt5ytf x1lsbc85 xu0wf1k x7a5moj"
228
255
  }),
@@ -236,7 +263,7 @@ export function TabMenu({
236
263
  const isSelected = tabListCtx.value === option.value;
237
264
  return /*#__PURE__*/_jsxs("div", {
238
265
  role: "menuitem",
239
- tabIndex: 0,
266
+ tabIndex: -1,
240
267
  "aria-current": isSelected ? 'true' : undefined,
241
268
  onClick: () => handleSelect(option.value),
242
269
  onKeyDown: e => {
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAyiBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
1
+ {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA0iBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
@@ -199,7 +199,8 @@ function areRowPropsEqual(prevProps, nextProps) {
199
199
  return true;
200
200
  }
201
201
 
202
- // Different object reference - compare values
202
+ // Different object reference - compare values. This is intentionally a
203
+ // one-level shallow compare: nested fields rely on reference identity.
203
204
  const prevItem = prevProps.item;
204
205
  const nextItem = nextProps.item;
205
206
  const keys = Object.keys(nextItem);
package/dist/astryx.css CHANGED
@@ -439,6 +439,7 @@
439
439
  @media (hover: hover){.x1jtjlen.x1jtjlen.x1jtjlen:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-emphasized),var(--color-tint-hover) 20%)}}
440
440
  @media (hover: hover){.x70talc.x70talc.x70talc:where(.xklqth5:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-emphasized),var(--color-tint-hover) 20%)}}
441
441
  @media (hover: hover){.xmt8yqp.xmt8yqp.xmt8yqp:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:var(--color-border)}}
442
+ @media (hover: hover){.x1ww4t2b.x1ww4t2b:hover:not(#\#):not(#\#){border-color:var(--color-border-emphasized)}}
442
443
  @media (hover: hover){.x4ohgrr.x4ohgrr:hover:not(#\#):not(#\#){text-decoration:underline}}
443
444
  .x67t5t6:not(#\#):not(#\#):not(#\#){-webkit-backdrop-filter:blur(12px)}
444
445
  .x1ua5tub:not(#\#):not(#\#):not(#\#){-webkit-box-orient:vertical}
@@ -847,6 +848,7 @@
847
848
  .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
848
849
  .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
849
850
  .xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}
851
+ .x12frdag:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--container-padding-inline-end) - var(--border-width))}
850
852
  .x64h4k7:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--container-padding-inline-end)}
851
853
  .x1peupej:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-inner-x,var(--spacing-4))}
852
854
  .xpc6k2p:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-outer-x,var(--spacing-4))}
@@ -863,6 +865,7 @@
863
865
  .x1q91b2g:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--spacing-8)}
864
866
  .x1c1uobl:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
865
867
  .x1f43n9v:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(16px + var(--spacing-1-5))}
868
+ .xs19ii7:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--container-padding-inline-start) - var(--border-width))}
866
869
  .x2a0j69:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
867
870
  .x1c35znw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start)}
868
871
  .xwjyata:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--layout-padding-inner-x,var(--spacing-4))}
@@ -979,6 +982,7 @@
979
982
  .x12qzo2w:not(#\#):not(#\#):not(#\#){transition-property:background-image}
980
983
  .x1tv3a4w:not(#\#):not(#\#):not(#\#){transition-property:border-color,box-shadow,background-color}
981
984
  .x12zzom9:not(#\#):not(#\#):not(#\#){transition-property:border-color,box-shadow}
985
+ .xshfolx:not(#\#):not(#\#):not(#\#){transition-property:border-color}
982
986
  .x16mfhj0:not(#\#):not(#\#):not(#\#){transition-property:box-shadow,border-color}
983
987
  .x1vix5yk:not(#\#):not(#\#):not(#\#){transition-property:color,background-color,box-shadow}
984
988
  .x1mpt4pi:not(#\#):not(#\#):not(#\#){transition-property:color,text-decoration}
@@ -1339,6 +1343,7 @@
1339
1343
  .x18d9i69:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
1340
1344
  .x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
1341
1345
  .x9jihrk:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
1346
+ .xbv1mwh:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--container-padding-block-end) - var(--border-width))}
1342
1347
  .xxbfulo:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--spacing-3) + var(--radius-chat))}
1343
1348
  .xvpcij2:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_chat-composer-padding)}
1344
1349
  .xc1wllq:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--container-padding-block-end)}
@@ -1358,6 +1363,7 @@
1358
1363
  .xexx8yu:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:0}
1359
1364
  .x1htvmrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
1360
1365
  .x1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}
1366
+ .x1nex4ik:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--container-padding-block-start) - var(--border-width))}
1361
1367
  .x1ak3mig:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--spacing-1-5) + var(--spacing-2))}
1362
1368
  .x2gtn7z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_chat-composer-padding)}
1363
1369
  .x14m0hsi:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--container-padding-block-start)}