@astryxdesign/core 0.7.2-canary.07f97c6 → 0.7.2-canary.2ec83d7

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 (71) hide show
  1. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  2. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  3. package/dist/CheckboxInput/CheckboxInput.js +3 -1
  4. package/dist/CheckboxList/CheckboxListItem.d.ts +9 -1
  5. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  6. package/dist/CheckboxList/CheckboxListItem.js +4 -2
  7. package/dist/Dialog/Dialog.d.ts.map +1 -1
  8. package/dist/Dialog/Dialog.js +20 -8
  9. package/dist/DropdownMenu/DropdownMenuDivider.d.ts +5 -3
  10. package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -1
  11. package/dist/DropdownMenu/DropdownMenuDivider.js +7 -3
  12. package/dist/Item/Item.d.ts +6 -2
  13. package/dist/Item/Item.d.ts.map +1 -1
  14. package/dist/Item/Item.js +19 -4
  15. package/dist/List/List.d.ts +46 -19
  16. package/dist/List/List.d.ts.map +1 -1
  17. package/dist/List/List.js +28 -10
  18. package/dist/List/ListContext.d.ts +8 -3
  19. package/dist/List/ListContext.d.ts.map +1 -1
  20. package/dist/List/ListContext.js +7 -2
  21. package/dist/List/ListItem.d.ts +13 -5
  22. package/dist/List/ListItem.d.ts.map +1 -1
  23. package/dist/List/ListItem.js +21 -8
  24. package/dist/List/index.d.ts +1 -1
  25. package/dist/List/index.d.ts.map +1 -1
  26. package/dist/Markdown/Markdown.d.ts.map +1 -1
  27. package/dist/Markdown/Markdown.js +8 -1
  28. package/dist/RadioList/RadioListItem.d.ts +9 -1
  29. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  30. package/dist/RadioList/RadioListItem.js +2 -0
  31. package/dist/astryx.css +10 -2
  32. package/dist/utils/plainDate.d.ts.map +1 -1
  33. package/dist/utils/plainDate.js +15 -9
  34. package/package.json +3 -3
  35. package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
  36. package/src/CheckboxInput/CheckboxInput.tsx +3 -1
  37. package/src/CheckboxList/CheckboxList.test.tsx +22 -0
  38. package/src/CheckboxList/CheckboxListItem.doc.mjs +16 -0
  39. package/src/CheckboxList/CheckboxListItem.tsx +10 -0
  40. package/src/Dialog/Dialog.test.tsx +46 -0
  41. package/src/Dialog/Dialog.tsx +20 -7
  42. package/src/Dialog/__tests__/Dialog.a11y.known-failures.ts +0 -14
  43. package/src/DropdownMenu/DropdownMenu.test.tsx +21 -12
  44. package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +2 -2
  45. package/src/DropdownMenu/DropdownMenuDivider.tsx +9 -5
  46. package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +145 -0
  47. package/src/DropdownMenu/__tests__/Menu.a11y.known-failures.ts +26 -0
  48. package/src/DropdownMenu/__tests__/Menu.a11y.renders.tsx +65 -0
  49. package/src/DropdownMenu/__tests__/Menu.a11y.states.ts +138 -0
  50. package/src/DropdownMenu/__tests__/Menu.a11y.test.tsx +136 -0
  51. package/src/Item/Item.doc.mjs +12 -8
  52. package/src/Item/Item.spec.md +226 -0
  53. package/src/Item/Item.test.tsx +61 -0
  54. package/src/Item/Item.tsx +40 -4
  55. package/src/List/List.doc.mjs +14 -1
  56. package/src/List/List.spec.md +129 -77
  57. package/src/List/List.test.tsx +163 -94
  58. package/src/List/List.tsx +74 -18
  59. package/src/List/ListContext.tsx +9 -3
  60. package/src/List/ListItem.doc.mjs +16 -0
  61. package/src/List/ListItem.tsx +56 -27
  62. package/src/List/index.ts +1 -1
  63. package/src/Markdown/Markdown.tsx +14 -1
  64. package/src/RadioList/RadioList.test.tsx +22 -0
  65. package/src/RadioList/RadioListItem.doc.mjs +16 -0
  66. package/src/RadioList/RadioListItem.tsx +10 -1
  67. package/src/TabList/TabList.spec.md +57 -44
  68. package/src/TreeList/TreeList.spec.md +29 -17
  69. package/src/theme/derivedVarRegistry.test.ts +3 -0
  70. package/src/utils/plainDate.test.ts +37 -1
  71. package/src/utils/plainDate.ts +15 -5
@@ -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, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxInputProps): import("react").JSX.Element;
161
+ export declare function CheckboxInput({ id: idProp, label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, ...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,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,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;AAoHhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,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,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAiOpB;yBA3Pe,aAAa"}
1
+ {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
@@ -132,6 +132,7 @@ const dynamicWidthStyles = {
132
132
  * ```
133
133
  */
134
134
  export function CheckboxInput({
135
+ id: idProp,
135
136
  label,
136
137
  isLabelHidden = false,
137
138
  description,
@@ -161,7 +162,8 @@ export function CheckboxInput({
161
162
  // The row is the pressable: the overlay's pressed arm reads the row's
162
163
  // scope marker, the way the indicator's hover tint does.
163
164
  const pressable = usePressFeedback();
164
- const id = useId();
165
+ const generatedId = useId();
166
+ const id = idProp || generatedId;
165
167
  const descriptionID = useId();
166
168
  const statusMessageID = useId();
167
169
  // Announce the effective required state (form default included) while the
@@ -14,7 +14,15 @@
14
14
  */
15
15
  import { type ReactNode } from 'react';
16
16
  import type { BaseProps } from '../BaseProps';
17
+ import type { ItemAlign } from '../Item';
17
18
  export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
19
+ /**
20
+ * Vertical alignment of the start and end content against the label,
21
+ * forwarded to Item. Use `first-line` to keep the checkbox level with the
22
+ * first line of a wrapped label.
23
+ * @default 'center'
24
+ */
25
+ align?: ItemAlign;
18
26
  /**
19
27
  * Primary text label for the item.
20
28
  *
@@ -120,7 +128,7 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
120
128
  * />
121
129
  * ```
122
130
  */
123
- export declare function CheckboxListItem({ label, 'aria-label': ariaLabel, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
131
+ export declare function CheckboxListItem({ label, 'aria-label': ariaLabel, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, align, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
124
132
  export declare namespace CheckboxListItem {
125
133
  var displayName: string;
126
134
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AA4BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA4IvB;yBA5Je,gBAAgB"}
1
+ {"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAgBvC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AA4BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA6IvB;yBA9Je,gBAAgB"}
@@ -26,11 +26,11 @@ import { ListContext } from "../List/ListContext.js";
26
26
  import { CheckboxListContext } from "./CheckboxListContext.js";
27
27
  import { useTranslator } from "../i18n/index.js";
28
28
  import { ItemDescriptionContext } from "../Item/ItemDescriptionContext.js";
29
-
29
+ import { jsx as _jsx } from "react/jsx-runtime";
30
30
  // =============================================================================
31
31
  // Styles
32
32
  // =============================================================================
33
- import { jsx as _jsx } from "react/jsx-runtime";
33
+
34
34
  const styles = {
35
35
  selected: {
36
36
  kWkggS: "xgcxg3y",
@@ -103,6 +103,7 @@ export function CheckboxListItem({
103
103
  className,
104
104
  style,
105
105
  onClick: onClickProp,
106
+ align,
106
107
  ...restProps
107
108
  }) {
108
109
  const t = useTranslator();
@@ -193,6 +194,7 @@ export function CheckboxListItem({
193
194
  }) : label,
194
195
  description: description,
195
196
  endContent: endContent,
197
+ align: align,
196
198
  isDisabled: effectiveDisabled
197
199
  // Delegate row clicks to the checkbox instead of wiring onClick (which
198
200
  // would add an invisible row button = a second tab stop). The checkbox
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAoJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Ub;yBA3Ve,MAAM"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAoJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAuVb;yBAvWe,MAAM"}
@@ -27,7 +27,7 @@
27
27
  * - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
28
28
  * - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
29
29
  */
30
- import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
30
+ import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef } from 'react';
31
31
  import * as stylex from '@stylexjs/stylex';
32
32
  import { useScrollLock } from "../hooks/useScrollLock.js";
33
33
  import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
@@ -348,11 +348,25 @@ export function Dialog({
348
348
  }, [titleId, hasConsumerName]);
349
349
  const mergedDialogRef = useMergedRefs(ref, attachDialog);
350
350
 
351
- // Capture the element that was focused when the dialog opened,
352
- // for directional animation origin and focus restoration on close.
351
+ // Capture the element that was focused when the dialog opened, for
352
+ // directional animation origin and focus restoration on close.
353
353
  const triggerElementRef = useRef(null);
354
354
  useInteractionModalityTracking();
355
355
 
356
+ // This runs in a layout effect so the capture lands before any descendant's
357
+ // passive mount effect: all layout effects run before any passive effect,
358
+ // while a child's passive effect runs before this parent's passive effect.
359
+ // Content that mounts in the open commit — e.g. a DialogHeader focusing its
360
+ // own title on mount — would otherwise move document.activeElement inside
361
+ // the dialog before the capture ran, and closing would then restore focus
362
+ // to a detached node, stranding the user's focus on <body>.
363
+ useLayoutEffect(() => {
364
+ if (isInline || !isOpen) {
365
+ return;
366
+ }
367
+ triggerElementRef.current = document.activeElement;
368
+ }, [isOpen, isInline]);
369
+
356
370
  // Derive dismissal behavior from purpose
357
371
  const allowEscape = purpose !== 'required';
358
372
  const allowBackdropClick = purpose === 'info';
@@ -367,11 +381,9 @@ export function Dialog({
367
381
  return;
368
382
  }
369
383
  if (isOpen) {
370
- // Capture the currently focused element as the trigger — used for
371
- // directional animation origin and focus restoration on close.
372
- triggerElementRef.current = document.activeElement;
373
-
374
- // Set directional CSS custom properties before opening
384
+ // Set directional CSS custom properties before opening. The trigger was
385
+ // captured by the layout effect above, before any descendant effect
386
+ // could move focus.
375
387
  const trigger = triggerElementRef.current;
376
388
  if (trigger && trigger !== document.body) {
377
389
  const dir = getDialogDirection(trigger);
@@ -1,5 +1,5 @@
1
1
  import type { BaseProps } from '../BaseProps';
2
- export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
2
+ export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
3
3
  /** Ref forwarded to the separator element. */
4
4
  ref?: React.Ref<HTMLDivElement>;
5
5
  }
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
7
7
  * A horizontal rule separating groups of menu rows.
8
8
  *
9
9
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
10
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
10
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
11
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
12
+ * its role and orientation stay component-owned.
11
13
  *
12
14
  * @example
13
15
  * ```
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
18
20
  * </DropdownMenu>
19
21
  * ```
20
22
  */
21
- export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
23
+ export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
22
24
  export declare namespace DropdownMenuDivider {
23
25
  var displayName: string;
24
26
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,wBAAwB,+BAW1B;yBAhBe,mBAAmB"}
1
+ {"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file DropdownMenuDivider.tsx
7
- * @input Uses Divider, spacing tokens, themeProps
7
+ * @input Uses Divider, spacing tokens, themeProps; forwards host props to Divider
8
8
  * @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
9
9
  * @position Sub-component; used inside DropdownMenu
10
10
  *
@@ -39,7 +39,9 @@ const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
39
39
  * A horizontal rule separating groups of menu rows.
40
40
  *
41
41
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
42
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
42
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
43
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
44
+ * its role and orientation stay component-owned.
43
45
  *
44
46
  * @example
45
47
  * ```
@@ -54,9 +56,11 @@ export function DropdownMenuDivider({
54
56
  xstyle,
55
57
  className,
56
58
  style,
57
- ref
59
+ ref,
60
+ ...rest
58
61
  }) {
59
62
  return /*#__PURE__*/_jsx(Divider, {
63
+ ...rest,
60
64
  ref: ref,
61
65
  xstyle: [styles.divider, xstyle],
62
66
  className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,
@@ -22,7 +22,7 @@
22
22
  */
23
23
  import { type ReactNode } from 'react';
24
24
  import type { BaseProps } from '../BaseProps';
25
- export type ItemAlign = 'center' | 'start';
25
+ export type ItemAlign = 'center' | 'start' | 'first-line';
26
26
  export type ItemDensity = 'compact' | 'balanced' | 'spacious';
27
27
  /**
28
28
  * How a swipe action looks: ordinary, the one you mean, the dangerous one.
@@ -111,7 +111,11 @@ export interface ItemProps extends BaseProps<HTMLElement> {
111
111
  */
112
112
  endContent?: ReactNode;
113
113
  /**
114
- * Vertical alignment of the start/end content slots.
114
+ * Vertical alignment of the start/end content slots. `center` centers each
115
+ * slot on the whole text block; `start` lines up slot tops with the text's
116
+ * top; `first-line` centers each slot on the label's first line, so a small
117
+ * mark (a status dot, a radio, a timestamp) stays level with the first line
118
+ * of a wrapped label. A slot taller than that line moves the text down.
115
119
  * @default 'center'
116
120
  */
117
121
  align?: ItemAlign;
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
package/dist/Item/Item.js CHANGED
@@ -108,6 +108,10 @@ const styles = {
108
108
  kGNEyG: "x1cy8zhl",
109
109
  $$css: true
110
110
  },
111
+ alignFirstLine: {
112
+ kGNEyG: "x1pha0wt",
113
+ $$css: true
114
+ },
111
115
  interactive: {
112
116
  kkrTdU: "x1ypdohk x16khyan",
113
117
  k1ekBW: "x15406qy",
@@ -359,8 +363,13 @@ export function Item({
359
363
  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
360
364
  children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
361
365
  ...{
362
- className: "x3psx0u x78zum5"
363
- },
366
+ 0: {
367
+ className: "x3psx0u x78zum5"
368
+ },
369
+ 1: {
370
+ className: "x3psx0u x78zum5 x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
371
+ }
372
+ }[!!(align === 'first-line') << 0],
364
373
  children: startContent
365
374
  }), hasParentRole || isDelegate ?
366
375
  /*#__PURE__*/
@@ -444,10 +453,16 @@ export function Item({
444
453
  0: {
445
454
  className: "x3psx0u x78zum5 xvc5jky"
446
455
  },
456
+ 2: {
457
+ className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
458
+ },
447
459
  1: {
448
460
  className: "x3psx0u x78zum5 xvc5jky xbyyjgo"
461
+ },
462
+ 3: {
463
+ className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp xbyyjgo"
449
464
  }
450
- }[!!isDisabled << 0],
465
+ }[!!(align === 'first-line') << 1 | !!isDisabled << 0],
451
466
  children: endContent
452
467
  })]
453
468
  });
@@ -494,7 +509,7 @@ export function Item({
494
509
  ...mergeProps(themeProps('item', {
495
510
  density,
496
511
  align
497
- }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
512
+ }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
498
513
  role: role,
499
514
  onClick: rootOnClick,
500
515
  children: [/*#__PURE__*/_jsx(ItemDescriptionContext, {
@@ -1,8 +1,9 @@
1
1
  /**
2
2
  * @file List.tsx
3
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
4
- * with optional inline edge compensation
5
- * @output Exports List component, ListProps, ListDensity, ListStyle types
3
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
4
+ * and ListContext with the row edge treatment
5
+ * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
6
+ * types
6
7
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
7
8
  *
8
9
  * SYNC: When modified, update these files to stay in sync:
@@ -14,8 +15,8 @@
14
15
  */
15
16
  import { type ReactNode } from 'react';
16
17
  import type { BaseProps } from '../BaseProps';
17
- import { type ListDensity, type ListMarkerStyle } from './ListContext';
18
- export { type ListDensity, type ListMarkerStyle as ListStyle, } from './ListContext';
18
+ import { type ListDensity, type ListEdge, type ListMarkerStyle } from './ListContext';
19
+ export { type ListDensity, type ListEdge, type ListMarkerStyle as ListStyle, } from './ListContext';
19
20
  export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement> {
20
21
  /** Ref forwarded to the root element */
21
22
  ref?: React.Ref<HTMLUListElement | HTMLOListElement>;
@@ -37,16 +38,38 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
37
38
  */
38
39
  hasDividers?: boolean;
39
40
  /**
40
- * Compensates for each item's built-in inline inset, up to the container
41
- * padding available on each edge. Use "inline" to bring row content toward
42
- * sibling content such as a section heading. Content aligns when the
43
- * container padding is at least the item inset; smaller padding leaves
44
- * some inset uncompensated.
45
- * The cancelling margin reads the same variable the items derive their
46
- * inline padding from, so it tracks density and theme padding overrides
47
- * automatically. Hover and selection backgrounds still extend past the
48
- * text by the inset.
49
- * Omit to leave item positions unchanged.
41
+ * Where each row's text, dividers, and hover and selection backgrounds sit,
42
+ * relative to the list's edges and the container around it.
43
+ * - 'padded': text sits inside each row's padding, so it starts a little in
44
+ * from a heading above the list and backgrounds have room around it
45
+ * - 'flush': rows drop their side padding, so text starts on the heading's
46
+ * line and dividers and backgrounds stop at the row's content, with no
47
+ * room beyond it on either side. Works anywhere. Suits static rows
48
+ * - 'outset': text sits on the heading's line, and dividers and backgrounds
49
+ * reach a little past it into the container's padding. Suits interactive
50
+ * rows in a container
51
+ * - 'bleed': text sits on the heading's line, and dividers and backgrounds
52
+ * reach the container's edges with square corners, like Table rows in a
53
+ * Card
54
+ *
55
+ * A row's first content is what lines up with the heading: its marker,
56
+ * icon, or avatar when it has one, otherwise its label. 'outset' and
57
+ * 'bleed' reach into the padding of the nearest container that shares its
58
+ * padding: a Card, Section, Dialog, or BottomSheet, or a transparent
59
+ * container such as a Layout region with explicit padding or a padded
60
+ * ScrollableArea. Place the List directly in that container's padding:
61
+ * padding that Stack, Center, or your own styles add in between is not
62
+ * counted. Drawers and the automatic padding of LayoutContent and
63
+ * LayoutPanel aren't supported yet. With no such container, including in a Popover, they look
64
+ * like 'padded'. In a container with less padding than the rows' own, text
65
+ * starts a little after the heading's line. A theme's inline padding on `item` replaces the row
66
+ * padding of every value, including the zero padding of 'flush'.
67
+ * @default 'padded'
68
+ */
69
+ edge?: ListEdge;
70
+ /**
71
+ * @deprecated Use `edge="outset"`, which this sets. Still works; `edge`
72
+ * wins when both are set. `astryx upgrade` rewrites existing usage.
50
73
  */
51
74
  edgeCompensation?: 'inline';
52
75
  /**
@@ -77,9 +100,10 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
77
100
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
78
101
  * dividers, marker styles, and an optional header.
79
102
  *
80
- * Set `edgeCompensation="inline"` to compensate for the items' inline inset
81
- * up to the container padding available on each edge, for alignment with
82
- * sibling content such as a section heading.
103
+ * Set `edge` to choose where row text, dividers, and backgrounds sit: inside
104
+ * each row's padding (`padded`, the default), at the list's edges (`flush`),
105
+ * on a heading's line with backgrounds reaching into the container's padding
106
+ * (`outset`), or reaching the container's edges like Table rows (`bleed`).
83
107
  *
84
108
  * @example
85
109
  * ```
@@ -91,9 +115,12 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
91
115
  * <ListItem label="First step" />
92
116
  * <ListItem label="Second step" />
93
117
  * </List>
118
+ * <List edge="flush" hasDividers>
119
+ * <ListItem label="Solstice Mug" description="Ceramic, 12 oz" />
120
+ * </List>
94
121
  * ```
95
122
  */
96
- export declare function List({ children, density, hasDividers, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
123
+ export declare function List({ children, density, hasDividers, edge: edgeProp, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
97
124
  export declare namespace List {
98
125
  var displayName: string;
99
126
  }
@@ -1 +1 @@
1
- {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6CD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA4DX;yBA1Ee,IAAI"}
1
+ {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAKvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwEX;yBAvFe,IAAI"}
package/dist/List/List.js CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  /**
6
6
  * @file List.tsx
7
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
8
- * with optional inline edge compensation
9
- * @output Exports List component, ListProps, ListDensity, ListStyle types
7
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
8
+ * and ListContext with the row edge treatment
9
+ * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
10
+ * types
10
11
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
11
12
  *
12
13
  * SYNC: When modified, update these files to stay in sync:
@@ -23,6 +24,7 @@ import { spacingVars } from "../theme/tokens.stylex.js";
23
24
  import { ListContext } from "./ListContext.js";
24
25
  import { mergeProps } from "../utils/index.js";
25
26
  import { themeProps } from "../utils/themeProps.js";
27
+ import { useDevWarning } from "../hooks/useDevWarning.js";
26
28
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
27
29
  // =============================================================================
28
30
  // Styles
@@ -39,6 +41,12 @@ const styles = {
39
41
  kXHlph: "x101abm8",
40
42
  $$css: true
41
43
  },
44
+ reachesContainerPadding: {
45
+ keTefX: "xojxgvx",
46
+ k71WvV: "x1fcf3bl",
47
+ kzqmXN: "xx6qvi6",
48
+ $$css: true
49
+ },
42
50
  withDividers: {
43
51
  kOIVth: "xxhr3t",
44
52
  $$css: true
@@ -68,9 +76,10 @@ const dynamicStyles = {
68
76
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
69
77
  * dividers, marker styles, and an optional header.
70
78
  *
71
- * Set `edgeCompensation="inline"` to compensate for the items' inline inset
72
- * up to the container padding available on each edge, for alignment with
73
- * sibling content such as a section heading.
79
+ * Set `edge` to choose where row text, dividers, and backgrounds sit: inside
80
+ * each row's padding (`padded`, the default), at the list's edges (`flush`),
81
+ * on a heading's line with backgrounds reaching into the container's padding
82
+ * (`outset`), or reaching the container's edges like Table rows (`bleed`).
74
83
  *
75
84
  * @example
76
85
  * ```
@@ -82,12 +91,16 @@ const dynamicStyles = {
82
91
  * <ListItem label="First step" />
83
92
  * <ListItem label="Second step" />
84
93
  * </List>
94
+ * <List edge="flush" hasDividers>
95
+ * <ListItem label="Solstice Mug" description="Ceramic, 12 oz" />
96
+ * </List>
85
97
  * ```
86
98
  */
87
99
  export function List({
88
100
  children,
89
101
  density = 'balanced',
90
102
  hasDividers = false,
103
+ edge: edgeProp,
91
104
  edgeCompensation,
92
105
  header,
93
106
  listStyle = 'none',
@@ -102,12 +115,17 @@ export function List({
102
115
  const headerId = useId();
103
116
  const isOrdered = listStyle === 'decimal';
104
117
  const Tag = isOrdered ? 'ol' : 'ul';
118
+ // Plain use of the deprecated prop is reported by its @deprecated type;
119
+ // development warns only when the two names conflict (spec:AST-017 FR29).
120
+ useDevWarning('List', '`edge` and the deprecated `edgeCompensation` are both set; `edge` wins. ' + 'Remove `edgeCompensation`. `astryx upgrade` rewrites existing usage.', edgeProp != null && edgeCompensation != null);
121
+ const edge = edgeProp ?? (edgeCompensation === 'inline' ? 'outset' : 'padded');
122
+ const reachesContainerPadding = edge === 'outset' || edge === 'bleed';
105
123
  const contextValue = useMemo(() => ({
106
124
  density,
107
125
  hasDividers,
108
- listStyle,
109
- edgeCompensation
110
- }), [density, hasDividers, listStyle, edgeCompensation]);
126
+ edge,
127
+ listStyle
128
+ }), [density, hasDividers, edge, listStyle]);
111
129
  const listElement = /*#__PURE__*/_jsx(Tag, {
112
130
  ref: ref
113
131
  // Consumer props first: everything the component sets for itself below
@@ -134,7 +152,7 @@ export function List({
134
152
  ...mergeProps(themeProps('list', {
135
153
  density,
136
154
  listStyle
137
- }), stylex.props(styles.list, hasDividers && styles.withDividers, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
155
+ }), stylex.props(styles.list, hasDividers && styles.withDividers, reachesContainerPadding && styles.reachesContainerPadding, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
138
156
  children: children
139
157
  });
140
158
  if (header == null) {
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * @file ListContext.tsx
3
3
  * @input Layer-scoped React context
4
- * @output Exports ListContext for sharing density, dividers, marker style,
5
- * and optional inline edge compensation between List and ListItem, and
4
+ * @output Exports ListContext for sharing density, dividers, the row edge
5
+ * treatment, and marker style between List and ListItem, and
6
6
  * ListMarkerScope, which sets the marker for the items inside it, or a
7
7
  * task item's checkbox in its place
8
8
  * @position Internal context; consumed by List.tsx and ListItem.tsx
@@ -10,6 +10,11 @@
10
10
  import { type ReactNode } from 'react';
11
11
  export type ListDensity = 'compact' | 'balanced' | 'spacious';
12
12
  export type ListMarkerStyle = 'none' | 'disc' | 'decimal' | 'circle';
13
+ /**
14
+ * Where each row's content and its lines and backgrounds sit relative to the
15
+ * list's edges and the padding of the container around the list.
16
+ */
17
+ export type ListEdge = 'padded' | 'flush' | 'outset' | 'bleed';
13
18
  /**
14
19
  * Every marker ListItem draws: the public styles, and the square, letter,
15
20
  * and roman markers Markdown's nested lists use (spec:AST-061 DEC-6).
@@ -24,8 +29,8 @@ export interface ListTaskMarker {
24
29
  export interface ListContextValue {
25
30
  density: ListDensity;
26
31
  hasDividers: boolean;
32
+ edge: ListEdge;
27
33
  listStyle: ListMarkerStyle;
28
- edgeCompensation?: 'inline';
29
34
  /**
30
35
  * The marker items draw instead of the one `listStyle` names, set by
31
36
  * ListMarkerScope; internal. Ignored when `listStyle` is `'none'`.
@@ -1 +1 @@
1
- {"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAE3E,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAGxE;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,GAAG,SAAS,CAWZ"}
1
+ {"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAE3E,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAGxE;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,GAAG,SAAS,CAWZ"}
@@ -5,8 +5,8 @@
5
5
  /**
6
6
  * @file ListContext.tsx
7
7
  * @input Layer-scoped React context
8
- * @output Exports ListContext for sharing density, dividers, marker style,
9
- * and optional inline edge compensation between List and ListItem, and
8
+ * @output Exports ListContext for sharing density, dividers, the row edge
9
+ * treatment, and marker style between List and ListItem, and
10
10
  * ListMarkerScope, which sets the marker for the items inside it, or a
11
11
  * task item's checkbox in its place
12
12
  * @position Internal context; consumed by List.tsx and ListItem.tsx
@@ -14,6 +14,11 @@
14
14
  import { use, useMemo } from 'react';
15
15
  import { createLayerScopedContext as createContext } from "../Layer/layerScopedContext.js";
16
16
 
17
+ /**
18
+ * Where each row's content and its lines and backgrounds sit relative to the
19
+ * list's edges and the padding of the container around the list.
20
+ */
21
+
17
22
  /**
18
23
  * Every marker ListItem draws: the public styles, and the square, letter,
19
24
  * and roman markers Markdown's nested lists use (spec:AST-061 DEC-6).