@astryxdesign/core 0.6.3-canary.d0d49a4 → 0.6.3-canary.db4e378

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 (56) hide show
  1. package/dist/Chat/ChatMessageBubble.d.ts +2 -0
  2. package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
  3. package/dist/Chat/ChatMessageBubble.js +5 -3
  4. package/dist/Dialog/DialogHeader.d.ts.map +1 -1
  5. package/dist/Dialog/DialogHeader.js +4 -4
  6. package/dist/Item/Item.d.ts +1 -1
  7. package/dist/Item/Item.d.ts.map +1 -1
  8. package/dist/Item/Item.js +4 -3
  9. package/dist/List/List.d.ts +19 -1
  10. package/dist/List/List.d.ts.map +1 -1
  11. package/dist/List/List.js +9 -2
  12. package/dist/List/ListContext.d.ts +1 -0
  13. package/dist/List/ListContext.d.ts.map +1 -1
  14. package/dist/List/ListContext.js +2 -1
  15. package/dist/List/ListItem.d.ts +1 -1
  16. package/dist/List/ListItem.d.ts.map +1 -1
  17. package/dist/List/ListItem.js +9 -2
  18. package/dist/MetadataList/MetadataList.js +3 -3
  19. package/dist/ScrollableArea/ScrollableArea.d.ts +1 -0
  20. package/dist/ScrollableArea/ScrollableArea.d.ts.map +1 -1
  21. package/dist/ScrollableArea/ScrollableArea.js +1 -0
  22. package/dist/Selector/Selector.d.ts.map +1 -1
  23. package/dist/Selector/Selector.js +9 -2
  24. package/dist/astryx.css +7 -0
  25. package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
  26. package/dist/theme/derivedVarRegistry.js +4 -0
  27. package/package.json +3 -3
  28. package/src/Chat/ChatMessageBubble.doc.mjs +28 -15
  29. package/src/Chat/ChatMessageBubble.spec.md +263 -0
  30. package/src/Chat/ChatMessageBubble.test.tsx +93 -0
  31. package/src/Chat/ChatMessageBubble.tsx +8 -3
  32. package/src/Chat/__tests__/ChatMessageBubble.a11y.chromium.spec.ts +457 -0
  33. package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.test.ts +91 -0
  34. package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.ts +91 -0
  35. package/src/Dialog/Dialog.doc.mjs +2 -0
  36. package/src/Dialog/DialogHeader.doc.mjs +10 -0
  37. package/src/Dialog/DialogHeader.test.tsx +70 -3
  38. package/src/Dialog/DialogHeader.tsx +14 -5
  39. package/src/Dialog/modules/DialogHeader.spec.md +49 -39
  40. package/src/DropdownMenu/DropdownMenu.test.tsx +5 -2
  41. package/src/Item/Item.doc.mjs +4 -0
  42. package/src/Item/Item.tsx +9 -3
  43. package/src/List/List.doc.mjs +6 -0
  44. package/src/List/List.test.tsx +117 -1
  45. package/src/List/List.tsx +22 -2
  46. package/src/List/ListContext.tsx +3 -1
  47. package/src/List/ListItem.source-build.test.mjs +41 -0
  48. package/src/List/ListItem.tsx +26 -2
  49. package/src/MetadataList/MetadataList.test.tsx +4 -2
  50. package/src/MetadataList/MetadataList.tsx +3 -3
  51. package/src/ScrollableArea/ScrollableArea.tsx +1 -0
  52. package/src/Selector/Selector.tsx +11 -1
  53. package/src/Selector/__tests__/Selector.a11y.chromium.spec.ts +45 -0
  54. package/src/theme/derivedVarRegistry.test.ts +7 -0
  55. package/src/theme/derivedVarRegistry.ts +1 -0
  56. package/src/theme/generateThemeRules.test.ts +27 -0
@@ -43,6 +43,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
43
43
  variant?: ChatMessageBubbleVariant;
44
44
  /**
45
45
  * Sender name rendered above the bubble, aligned with bubble text padding.
46
+ * Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
46
47
  * Use when the first content in a message is a bubble.
47
48
  * If the first content is raw (no bubble), use ChatMessage's `name`
48
49
  * prop instead.
@@ -50,6 +51,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
50
51
  name?: ReactNode;
51
52
  /**
52
53
  * Metadata content rendered below the bubble, aligned with bubble text padding.
54
+ * Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
53
55
  * Use when the last content in a message is a bubble.
54
56
  * If the last content is raw (no bubble), use ChatMessage's `metadata`
55
57
  * prop instead.
@@ -1 +1 @@
1
- {"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA0FxB;yBAvGe,iBAAiB"}
1
+ {"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA6FxB;yBA1Ge,iBAAiB"}
@@ -31,7 +31,7 @@ import * as stylex from '@stylexjs/stylex';
31
31
  import "../theme/tokens.stylex.js";
32
32
  import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
33
33
  import { useChatMessageContext } from "./ChatContext.js";
34
- import { mergeProps } from "../utils/index.js";
34
+ import { isRenderable, mergeProps } from "../utils/index.js";
35
35
  import { themeProps } from "../utils/themeProps.js";
36
36
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
37
37
  // =============================================================================
@@ -204,8 +204,10 @@ export function ChatMessageBubble({
204
204
  const senderStyle = variant === 'ghost' ? styles.ghost : isUser ? styles.user : styles.assistant;
205
205
  const groupStyle = group === 'first' ? isUser ? styles.groupFirstUser : styles.groupFirstAssistant : group === 'middle' ? isUser ? styles.groupMiddleUser : styles.groupMiddleAssistant : group === 'last' ? isUser ? styles.groupLastUser : styles.groupLastAssistant : null;
206
206
  const metadataPaddingStyle = density === 'compact' ? styles.metadataPaddingCompact : density === 'spacious' ? styles.metadataPaddingSpacious : styles.metadataPaddingBalanced;
207
+ const hasName = isRenderable(name);
208
+ const hasMetadata = isRenderable(metadata);
207
209
  return /*#__PURE__*/_jsxs(_Fragment, {
208
- children: [name && /*#__PURE__*/_jsx("div", {
210
+ children: [hasName && /*#__PURE__*/_jsx("div", {
209
211
  "data-chat-name": true,
210
212
  ...stylex.props(metadataPaddingStyle, styles.nameRow, styles.headerReducedGap, isUser && styles.alignEnd),
211
213
  children: name
@@ -219,7 +221,7 @@ export function ChatMessageBubble({
219
221
  density
220
222
  }), stylex.props(styles.content, density === 'compact' && styles.radiusCompact, senderStyle, paddingStyle, variant === 'ghost' && styles.paddingBlockNone, groupStyle, width != null && dynamicStyles.sizing(width), xstyle), className, styleProp),
221
223
  children: children
222
- }), metadata && /*#__PURE__*/_jsx("div", {
224
+ }), hasMetadata && /*#__PURE__*/_jsx("div", {
223
225
  ...stylex.props(metadataPaddingStyle, styles.metadataReducedGap, isUser && styles.alignEnd),
224
226
  children: metadata
225
227
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BA8FnB;yBA3Ge,YAAY"}
1
+ {"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuGnB;yBApHe,YAAY"}
@@ -101,9 +101,9 @@ export function DialogHeader({
101
101
  className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
102
102
  }),
103
103
  children: [startContent && /*#__PURE__*/_jsx("div", {
104
- ...{
104
+ ...mergeProps(themeProps('dialog-header-start-content'), {
105
105
  className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
106
- },
106
+ }),
107
107
  children: startContent
108
108
  }), /*#__PURE__*/_jsxs("div", {
109
109
  ...mergeProps(themeProps('dialog-header-title-block'), {
@@ -123,7 +123,7 @@ export function DialogHeader({
123
123
  children: subtitle
124
124
  })]
125
125
  }), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
126
- ...{
126
+ ...mergeProps(themeProps('dialog-header-end-content'), {
127
127
  0: {
128
128
  className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
129
129
  },
@@ -136,7 +136,7 @@ export function DialogHeader({
136
136
  3: {
137
137
  className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
138
138
  }
139
- }[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0],
139
+ }[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
140
140
  children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
141
141
  variant: "ghost",
142
142
  label: t('@astryx.dialog.close'),
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * @file Item.tsx
3
3
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
4
- * @output Exports Item component, ItemProps type
4
+ * @output Exports Item component, ItemProps type; publishes the shared inline inset
5
5
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
6
6
  *
7
7
  * SYNC: When modified, update these files to stay in sync:
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BAmOX;yBA7Pe,IAAI"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA8LD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BAmOX;yBA7Pe,IAAI"}
package/dist/Item/Item.js CHANGED
@@ -5,7 +5,7 @@
5
5
  /**
6
6
  * @file Item.tsx
7
7
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
8
- * @output Exports Item component, ItemProps type
8
+ * @output Exports Item component, ItemProps type; publishes the shared inline inset
9
9
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
10
10
  *
11
11
  * SYNC: When modified, update these files to stay in sync:
@@ -53,7 +53,8 @@ const styles = {
53
53
  k1xSpc: "x78zum5",
54
54
  kGNEyG: "x6s0dn4",
55
55
  kOIVth: "x1txdalj",
56
- kg3NbH: "xf314gf",
56
+ "--_item-inset-inline": "xw1s368",
57
+ kg3NbH: "xaip428",
57
58
  kVAEAm: "x1n2onr6",
58
59
  kB7OPa: "x9f619",
59
60
  k9WMMc: "x1yc453h",
@@ -149,7 +150,7 @@ const densityStyles = {
149
150
  },
150
151
  spacious: {
151
152
  k8WAf4: "x8o8v82",
152
- kg3NbH: "xrrkdod",
153
+ "--_item-inset-inline": "x1ytau7y",
153
154
  $$css: true
154
155
  }
155
156
  };
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @file List.tsx
3
3
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
4
+ * with optional inline edge compensation
4
5
  * @output Exports List component, ListProps, ListDensity, ListStyle types
5
6
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
6
7
  *
@@ -35,6 +36,19 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
35
36
  * @default false
36
37
  */
37
38
  hasDividers?: boolean;
39
+ /**
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.
50
+ */
51
+ edgeCompensation?: 'inline';
38
52
  /**
39
53
  * Header content rendered above the list.
40
54
  * Semantically associated via aria-labelledby.
@@ -63,6 +77,10 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
63
77
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
64
78
  * dividers, marker styles, and an optional header.
65
79
  *
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.
83
+ *
66
84
  * @example
67
85
  * ```
68
86
  * <List>
@@ -75,7 +93,7 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
75
93
  * </List>
76
94
  * ```
77
95
  */
78
- export declare function List({ children, density, hasDividers, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
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;
79
97
  export declare namespace List {
80
98
  var displayName: string;
81
99
  }
@@ -1 +1 @@
1
- {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;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;;;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;AAwCD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA4DX;yBAzEe,IAAI"}
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;AAwCD;;;;;;;;;;;;;;;;;;;;;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"}
package/dist/List/List.js CHANGED
@@ -5,6 +5,7 @@
5
5
  /**
6
6
  * @file List.tsx
7
7
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
8
+ * with optional inline edge compensation
8
9
  * @output Exports List component, ListProps, ListDensity, ListStyle types
9
10
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
10
11
  *
@@ -66,6 +67,10 @@ const dynamicStyles = {
66
67
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
67
68
  * dividers, marker styles, and an optional header.
68
69
  *
70
+ * Set `edgeCompensation="inline"` to compensate for the items' inline inset
71
+ * up to the container padding available on each edge, for alignment with
72
+ * sibling content such as a section heading.
73
+ *
69
74
  * @example
70
75
  * ```
71
76
  * <List>
@@ -82,6 +87,7 @@ export function List({
82
87
  children,
83
88
  density = 'balanced',
84
89
  hasDividers = false,
90
+ edgeCompensation,
85
91
  header,
86
92
  listStyle = 'none',
87
93
  start,
@@ -98,8 +104,9 @@ export function List({
98
104
  const contextValue = useMemo(() => ({
99
105
  density,
100
106
  hasDividers,
101
- listStyle
102
- }), [density, hasDividers, listStyle]);
107
+ listStyle,
108
+ edgeCompensation
109
+ }), [density, hasDividers, listStyle, edgeCompensation]);
103
110
  const listElement = /*#__PURE__*/_jsx(Tag, {
104
111
  ref: ref
105
112
  // Consumer props first: everything the component sets for itself below
@@ -4,6 +4,7 @@ export interface ListContextValue {
4
4
  density: ListDensity;
5
5
  hasDividers: boolean;
6
6
  listStyle: ListMarkerStyle;
7
+ edgeCompensation?: 'inline';
7
8
  }
8
9
  export declare const ListContext: import("react").Context<ListContextValue | null>;
9
10
  //# sourceMappingURL=ListContext.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC"}
1
+ {"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,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;CAC7B;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC"}
@@ -5,7 +5,8 @@
5
5
  /**
6
6
  * @file ListContext.tsx
7
7
  * @input Uses React createContext
8
- * @output Exports ListContext for sharing density between List and ListItem
8
+ * @output Exports ListContext for sharing density, dividers, marker style,
9
+ * and optional inline edge compensation between List and ListItem
9
10
  * @position Internal context; consumed by List.tsx and ListItem.tsx
10
11
  */
11
12
  import { createContext } from 'react';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file ListItem.tsx
3
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
3
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation
4
4
  * @output Exports ListItem component, ListItemProps type
5
5
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
6
6
  *
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA+Cf;yBAhEe,QAAQ"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkGD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BAiDf;yBAlEe,QAAQ"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file ListItem.tsx
7
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
7
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation
8
8
  * @output Exports ListItem component, ListItemProps type
9
9
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
10
10
  *
@@ -40,10 +40,16 @@ const styles = {
40
40
  kAmcRD: "xfrknyr",
41
41
  $$css: true
42
42
  },
43
+ inlineEdgeCompensation: {
44
+ keTefX: "x1t1czy8",
45
+ k71WvV: "x1cphv78",
46
+ $$css: true
47
+ },
43
48
  withDivider: {
44
49
  kt9PQ7: "x92x3c3",
45
50
  kfdmCh: "x1q0q8m5",
46
51
  kL6WhQ: "xw8gpjh",
52
+ kx8K5S: "x1t1lzn6",
47
53
  $$css: true
48
54
  }
49
55
  };
@@ -101,6 +107,7 @@ export function ListItem({
101
107
  const density = ctx?.density ?? 'balanced';
102
108
  const hasDividers = ctx?.hasDividers ?? false;
103
109
  const listStyle = ctx?.listStyle ?? 'none';
110
+ const edgeCompensation = ctx?.edgeCompensation;
104
111
  const hasMarkers = listStyle !== 'none';
105
112
  const marker = listStyle === 'disc' ? /*#__PURE__*/_jsx("span", {
106
113
  ...{
@@ -141,7 +148,7 @@ export function ListItem({
141
148
  isDisabled: isDisabled,
142
149
  isSelected: isSelected,
143
150
  density: density,
144
- xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, xstyle],
151
+ xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, edgeCompensation === 'inline' && styles.inlineEdgeCompensation, xstyle],
145
152
  ...mergeProps(themeProps('list-item'), {
146
153
  className,
147
154
  style
@@ -45,7 +45,7 @@ const styles = {
45
45
  },
46
46
  gridSingle: {
47
47
  k1xSpc: "xrvj5dj",
48
- kumcoG: "x1pmbctz",
48
+ kumcoG: "x1rkzygb",
49
49
  kOIVth: "xpec5dj",
50
50
  kGNEyG: "x1pha0wt",
51
51
  $$css: true
@@ -177,12 +177,12 @@ export function MetadataList({
177
177
  }
178
178
  const isStacked = labelConfig.position === 'top';
179
179
  if (typeof columns === 'number' && columns > 1) {
180
- return isStacked ? `repeat(${columns}, 1fr)` : `repeat(${columns}, auto 1fr)`;
180
+ return isStacked ? `repeat(${columns}, 1fr)` : `repeat(${columns}, auto minmax(0, 1fr))`;
181
181
  }
182
182
  // A custom label width only applies to the label track of side labels.
183
183
  if (!isStacked && labelConfig.width != null) {
184
184
  const width = typeof labelConfig.width === 'number' ? `${labelConfig.width}px` : labelConfig.width;
185
- return `${width} 1fr`;
185
+ return `${width} minmax(0, 1fr)`;
186
186
  }
187
187
  return null;
188
188
  };
@@ -8,6 +8,7 @@
8
8
  * - /packages/core/src/ScrollableArea/ScrollableArea.test.tsx
9
9
  * - /packages/core/src/ScrollableArea/ScrollableArea.doc.mjs
10
10
  * - /apps/storybook/stories/ScrollableArea.stories.tsx
11
+ * - /packages/cli/assets/templates/blocks/components/ScrollableArea/ (showcase blocks)
11
12
  */
12
13
  import type { ReactNode } from 'react';
13
14
  import type { BaseProps } from '../BaseProps';
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollableArea.d.ts","sourceRoot":"","sources":["../../src/ScrollableArea/ScrollableArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAC;AA0DpC,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,cAAc,CAAC,EACzB,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAChD;IACC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,4FAA4F;IAC5F,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8GAA8G;IAC9G,iBAAiB,CAAC,EAAE,+BAA+B,CAAC;IACpD,iEAAiE;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,IAAc,EACd,KAAK,EACL,IAAc,EACd,UAAoB,EACpB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,OAAW,EACX,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,WAAmB,EACnB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAuErB;yBA/Fe,cAAc"}
1
+ {"version":3,"file":"ScrollableArea.d.ts","sourceRoot":"","sources":["../../src/ScrollableArea/ScrollableArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAC;AA0DpC,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,cAAc,CAAC,EACzB,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAChD;IACC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,4FAA4F;IAC5F,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8GAA8G;IAC9G,iBAAiB,CAAC,EAAE,+BAA+B,CAAC;IACpD,iEAAiE;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,IAAc,EACd,KAAK,EACL,IAAc,EACd,UAAoB,EACpB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,OAAW,EACX,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,WAAmB,EACnB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAuErB;yBA/Fe,cAAc"}
@@ -12,6 +12,7 @@
12
12
  * - /packages/core/src/ScrollableArea/ScrollableArea.test.tsx
13
13
  * - /packages/core/src/ScrollableArea/ScrollableArea.doc.mjs
14
14
  * - /apps/storybook/stories/ScrollableArea.stories.tsx
15
+ * - /packages/cli/assets/templates/blocks/components/ScrollableArea/ (showcase blocks)
15
16
  */
16
17
  import * as stylex from '@stylexjs/stylex';
17
18
  import { paddingStyles, paddingInlineStyles, paddingInlineStartStyles, paddingInlineEndStyles, paddingBlockStyles, paddingBlockStartStyles, paddingBlockEndStyles, containerPaddingInlineVarStyles, containerPaddingInlineStartVarStyles, containerPaddingInlineEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "../Layout/padding.stylex.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
@@ -963,8 +963,15 @@ export function Selector(props) {
963
963
  }) : /*#__PURE__*/_jsx("div", {
964
964
  ref: listboxRef,
965
965
  id: listboxId,
966
- role: "listbox",
967
- "aria-labelledby": triggerId,
966
+ role: "listbox"
967
+ // The bottom sheet is a modal layer, so Chromium drops the trigger
968
+ // outside it from the accessibility tree and a reference to it yields
969
+ // no name. Name only this no-search sheet directly from the component's
970
+ // label; the searchable sheet and the popovers keep the trigger
971
+ // relationship.
972
+ ,
973
+ "aria-label": surface.activePresentation === 'bottom-sheet' ? label : undefined,
974
+ "aria-labelledby": surface.activePresentation === 'bottom-sheet' ? undefined : triggerId,
968
975
  "aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
969
976
  tabIndex: surface.activePresentation === 'bottom-sheet' ? 0 : undefined,
970
977
  onKeyDown: surface.activePresentation === 'bottom-sheet' ? handleTriggerKeyDown : undefined,
package/dist/astryx.css CHANGED
@@ -126,6 +126,8 @@
126
126
  .xqxtgf4{--_input-clear-hit-content:none}
127
127
  .xtoycft{--_input-clear-hit-inset:0px}
128
128
  .xqlix59{--_item-description-color:var(--color-error)}
129
+ .xw1s368{--_item-inset-inline:var(--spacing-2)}
130
+ .x1ytau7y{--_item-inset-inline:var(--spacing-3)}
129
131
  .xufyqxy{--_item-label-color:var(--color-error)}
130
132
  .xiki222{--_popover-radius:var(--radius-container)}
131
133
  .xdjmrzf{--_reveal-delay-reduced:0s,0s}
@@ -536,6 +538,7 @@
536
538
  .xnjsko4:not(#\#):not(#\#){padding-inline:0}
537
539
  .xx2oswg:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) - 1px)}
538
540
  .x2hg6jq:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) + var(--border-width))}
541
+ .xaip428:not(#\#):not(#\#){padding-inline:var(--_item-inset-inline)}
539
542
  .x1kpkw9v:not(#\#):not(#\#){padding-inline:var(--_tab-strip-bleed)}
540
543
  .x1w6f3ag:not(#\#):not(#\#){padding-inline:var(--_textarea-inline-padding)}
541
544
  .xkjnx3w:not(#\#):not(#\#){padding-inline:var(--spacing-0-5)}
@@ -967,6 +970,7 @@
967
970
  .x1y6fwsi:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr}
968
971
  .x1g3yg12:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}
969
972
  .x1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
973
+ .x1rkzygb:not(#\#):not(#\#):not(#\#){grid-template-columns:auto minmax(0,1fr)}
970
974
  .x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
971
975
  .x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
972
976
  .x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@@ -1026,6 +1030,7 @@
1026
1030
  .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
1027
1031
  .x14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
1028
1032
  .x11t971q:not(#\#):not(#\#):not(#\#){margin-inline-end:auto}
1033
+ .x1cphv78:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-end,0px)))}
1029
1034
  .x1fcf3bl:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--container-padding-inline-end,0px))}
1030
1035
  .x1kpg4um:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
1031
1036
  .xkd40ry:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--spacing-1))}
@@ -1038,6 +1043,7 @@
1038
1043
  .x1qfufaz:not(#\#):not(#\#):not(#\#){margin-inline-start:-8px}
1039
1044
  .x1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
1040
1045
  .xvc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}
1046
+ .x1t1czy8:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-start,0px)))}
1041
1047
  .xd10s4z:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--border-width))}
1042
1048
  .xojxgvx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--container-padding-inline-start,0px))}
1043
1049
  .x1wim8z0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
@@ -1859,6 +1865,7 @@
1859
1865
  .x1g31smg:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
1860
1866
  .xkibk3:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--container-padding-block-start,0px))}
1861
1867
  .x1vjq31q:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
1868
+ .x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1862
1869
  .xlayyun:last-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
1863
1870
  .xup0pd7:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
1864
1871
  .x15cytp8:focus:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
@@ -1 +1 @@
1
- {"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CA+ChE,CAAC;AAiBF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CASnB"}
1
+ {"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAgDhE,CAAC;AAiBF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CASnB"}
@@ -81,6 +81,10 @@ export const derivedVarRegistry = {
81
81
  property: 'borderRadius',
82
82
  vars: ['--_hovercard-radius']
83
83
  }],
84
+ item: [{
85
+ property: 'paddingInline',
86
+ vars: ['--_item-inset-inline']
87
+ }],
84
88
  'number-input': [{
85
89
  property: 'padding',
86
90
  expand: 'container'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/core",
3
- "version": "0.6.3-canary.d0d49a4",
3
+ "version": "0.6.3-canary.db4e378",
4
4
  "displayName": "Astryx Core",
5
5
  "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
6
6
  "author": "Meta Open Source",
@@ -692,8 +692,8 @@
692
692
  "react-dom": ">=19.0.0"
693
693
  },
694
694
  "devDependencies": {
695
- "@astryxdesign/a11y-spec": "0.6.3-canary.d0d49a4",
696
- "@astryxdesign/cli": "0.6.3-canary.d0d49a4",
695
+ "@astryxdesign/a11y-spec": "0.6.3-canary.db4e378",
696
+ "@astryxdesign/cli": "0.6.3-canary.db4e378",
697
697
  "@babel/cli": "^7.29.7",
698
698
  "@babel/core": "^7.29.7",
699
699
  "@babel/preset-react": "^7.29.7",
@@ -7,7 +7,8 @@ export const docs = {
7
7
  subComponentOf: 'Chat',
8
8
  displayName: 'Chat Message Bubble',
9
9
  isHiddenFromOverview: true,
10
- description: 'Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and ghost when content needs alignment without a visible boundary. Supports name/metadata slots aligned with bubble padding, and multi-bubble grouping via the group prop for consecutive messages from the same sender.',
10
+ description:
11
+ 'Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and ghost when content needs alignment without a visible boundary. Supports name/metadata slots aligned with bubble padding, and multi-bubble grouping via the group prop for consecutive messages from the same sender.',
11
12
  props: [
12
13
  {
13
14
  name: 'children',
@@ -18,18 +19,21 @@ export const docs = {
18
19
  {
19
20
  name: 'variant',
20
21
  type: "'filled' | 'ghost'",
21
- description: "Visual variant. 'filled' renders sender-colored background (default). 'ghost' renders transparent background but keeps padding for alignment.",
22
+ description:
23
+ "Visual variant. 'filled' renders sender-colored background (default). 'ghost' renders transparent background but keeps padding for alignment.",
22
24
  default: "'filled'",
23
25
  },
24
26
  {
25
27
  name: 'name',
26
28
  type: 'ReactNode',
27
- description: "Sender name rendered above the bubble, aligned with bubble text padding. Use on the first bubble in a message. If the first content is raw (no bubble), use ChatMessage's `name` prop instead.",
29
+ description:
30
+ "Sender name rendered above the bubble, aligned with bubble text padding. Use on the first bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the first content is raw (no bubble), use ChatMessage's `name` prop instead.",
28
31
  },
29
32
  {
30
33
  name: 'metadata',
31
34
  type: 'ReactNode',
32
- description: "Metadata content rendered below the bubble, aligned with bubble text padding. Use on the last bubble in a message. If the last content is raw (no bubble), use ChatMessage's `metadata` prop instead.",
35
+ description:
36
+ "Metadata content rendered below the bubble, aligned with bubble text padding. Use on the last bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the last content is raw (no bubble), use ChatMessage's `metadata` prop instead.",
33
37
  slotElements: [
34
38
  {
35
39
  __element: 'Text',
@@ -43,12 +47,14 @@ export const docs = {
43
47
  {
44
48
  name: 'group',
45
49
  type: "'first' | 'middle' | 'last'",
46
- description: 'Position within a multi-bubble group. Controls corner radius reduction on the sender side. Leave unset for standalone bubbles (full radius).',
50
+ description:
51
+ 'Position within a multi-bubble group. Controls corner radius reduction on the sender side. Leave unset for standalone bubbles (full radius).',
47
52
  },
48
53
  {
49
54
  name: 'width',
50
55
  type: 'SizeValue',
51
- description: 'Width of the bubble (number = pixels, string = used as-is). When set, replaces the default max(80%, 280px) width cap. Combine with variant="ghost" to let custom content (an artifact card, attachments) span the full message column.',
56
+ description:
57
+ 'Width of the bubble (number = pixels, string = used as-is). When set, replaces the default max(80%, 280px) width cap. Combine with variant="ghost" to let custom content (an artifact card, attachments) span the full message column.',
52
58
  },
53
59
  ],
54
60
  };
@@ -57,14 +63,18 @@ export const docsZh = {
57
63
  name: 'ChatMessageBubble',
58
64
  isHiddenFromOverview: true,
59
65
  displayName: 'Chat Message Bubble',
60
- description: '样式化的气泡容器,从父上下文读取发送者信息进行自动样式化。支持 name/metadata 插槽、多气泡分组和透明变体。',
66
+ description:
67
+ '样式化的气泡容器,从父上下文读取发送者信息进行自动样式化。支持 name/metadata 插槽、多气泡分组和透明变体。',
61
68
  propDescriptions: {
62
69
  children: '气泡内容:文本、Markdown 或任何 ReactNode。',
63
- variant: "视觉变体。'filled' 渲染发送者颜色背景,'ghost' 渲染透明背景但保持填充对齐。",
64
- name: '气泡上方渲染的发送者名称,与气泡文本内边距对齐。用于消息中的第一个气泡。',
65
- metadata: '气泡下方渲染的元数据内容,与气泡文本内边距对齐。用于消息中的最后一个气泡。',
70
+ variant:
71
+ "视觉变体。'filled' 渲染发送者颜色背景,'ghost' 渲染透明背景但保持填充对齐。",
72
+ name: '气泡上方渲染的发送者名称,与气泡文本内边距对齐。null、undefined、布尔值和空字符串会省略对齐容器;数字 0 仍保持对齐。用于消息中的第一个气泡。',
73
+ metadata:
74
+ '气泡下方渲染的元数据内容,与气泡文本内边距对齐。null、undefined、布尔值和空字符串会省略对齐容器;数字 0 仍保持对齐。用于消息中的最后一个气泡。',
66
75
  group: '多气泡组中的位置。控制发送者侧的圆角缩减。',
67
- width: '气泡宽度(数字 = 像素,字符串 = 按原样使用)。设置后替代默认的 max(80%, 280px) 宽度上限;与 ghost 变体组合可让自定义内容占满消息列宽度。',
76
+ width:
77
+ '气泡宽度(数字 = 像素,字符串 = 按原样使用)。设置后替代默认的 max(80%, 280px) 宽度上限;与 ghost 变体组合可让自定义内容占满消息列宽度。',
68
78
  },
69
79
  };
70
80
 
@@ -72,14 +82,17 @@ export const docsDense = {
72
82
  name: 'ChatMessageBubble',
73
83
  isHiddenFromOverview: true,
74
84
  displayName: 'Chat Message Bubble',
75
- description: 'styled bubble container; reads sender from context; supports name/metadata slots, group corners, ghost variant',
85
+ description:
86
+ 'styled bubble container; reads sender from context; supports name/metadata slots, group corners, ghost variant',
76
87
  propDescriptions: {
77
88
  children: 'bubble content: text, Markdown, any ReactNode',
78
89
  variant: 'filled (sender bg) or ghost (transparent, keeps padding)',
79
- name: 'sender name above bubble, aligned w/ bubble padding',
90
+ name: 'sender name above bubble; omits non-rendering scalars; keeps numeric 0 aligned',
80
91
  displayName: 'sender name above bubble, aligned w/ bubble padding',
81
- metadata: 'metadata below bubble, aligned w/ bubble padding',
92
+ metadata:
93
+ 'metadata below bubble; omits non-rendering scalars; keeps numeric 0 aligned',
82
94
  group: 'position in multi-bubble group; controls corner radius reduction',
83
- width: 'bubble width (number=px, string=as-is); replaces default max(80%,280px) cap; ghost+width="100%" spans full message column',
95
+ width:
96
+ 'bubble width (number=px, string=as-is); replaces default max(80%,280px) cap; ghost+width="100%" spans full message column',
84
97
  },
85
98
  };