@nimbus-ds/components 5.57.7-rc.3 → 5.58.0-rc.1

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 (58) hide show
  1. package/CHANGELOG.md +0 -32
  2. package/dist/Accordion/index.js +1 -1
  3. package/dist/Alert/index.js +1 -1
  4. package/dist/Badge/index.d.ts +2 -9
  5. package/dist/Badge/index.js +1 -1
  6. package/dist/Box/index.d.ts +2 -19
  7. package/dist/Button/index.d.ts +1 -1
  8. package/dist/Button/index.js +1 -1
  9. package/dist/CHANGELOG.md +0 -32
  10. package/dist/Card/index.d.ts +4 -4
  11. package/dist/Card/index.js +1 -1
  12. package/dist/Checkbox/index.js +1 -1
  13. package/dist/Chip/index.js +1 -1
  14. package/dist/FileUploader/index.d.ts +0 -1
  15. package/dist/FileUploader/index.js +1 -1
  16. package/dist/Icon/index.d.ts +1 -2
  17. package/dist/Icon/index.js +1 -1
  18. package/dist/IconButton/index.d.ts +5 -7
  19. package/dist/IconButton/index.js +1 -1
  20. package/dist/Input/index.js +1 -1
  21. package/dist/Label/index.js +1 -1
  22. package/dist/Link/index.js +1 -1
  23. package/dist/List/index.js +1 -1
  24. package/dist/Modal/index.d.ts +17 -0
  25. package/dist/Modal/index.js +1 -1
  26. package/dist/MultiSelect/index.d.ts +7 -5
  27. package/dist/MultiSelect/index.js +1 -1
  28. package/dist/Pagination/index.js +1 -1
  29. package/dist/Popover/index.d.ts +2 -0
  30. package/dist/Popover/index.js +1 -1
  31. package/dist/ProgressBar/index.js +1 -1
  32. package/dist/Radio/index.js +1 -1
  33. package/dist/ScrollPane/index.d.ts +11 -28
  34. package/dist/ScrollPane/index.js +1 -1
  35. package/dist/SegmentedControl/index.d.ts +2 -19
  36. package/dist/SegmentedControl/index.js +1 -1
  37. package/dist/Select/index.js +1 -1
  38. package/dist/Sidebar/index.d.ts +28 -4
  39. package/dist/Sidebar/index.js +1 -1
  40. package/dist/Slider/index.js +1 -1
  41. package/dist/Spinner/index.d.ts +1 -2
  42. package/dist/SplitButton/index.d.ts +4 -19
  43. package/dist/SplitButton/index.js +1 -1
  44. package/dist/Stepper/index.d.ts +2 -19
  45. package/dist/Stepper/index.js +1 -1
  46. package/dist/Tag/index.js +1 -1
  47. package/dist/Text/index.d.ts +5 -12
  48. package/dist/Text/index.js +1 -1
  49. package/dist/Textarea/index.js +1 -1
  50. package/dist/Thumbnail/index.js +1 -1
  51. package/dist/TimePicker/index.js +1 -1
  52. package/dist/Title/index.js +1 -1
  53. package/dist/Toast/index.js +1 -1
  54. package/dist/Toggle/index.js +1 -1
  55. package/dist/Tooltip/index.js +1 -1
  56. package/dist/index.d.ts +77 -67
  57. package/dist/index.js +1 -1
  58. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -41,21 +41,14 @@ export interface BadgeProperties {
41
41
  */
42
42
  appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
43
43
  /**
44
- * Total items to be displayed in the badge.
45
- * Not applicable when type is "dot".
44
+ * Total items to be displayed without badge
46
45
  */
47
- count?: number | string;
46
+ count: number | string;
48
47
  /**
49
48
  * Change the color scheme of the badge.
50
49
  * @default surface
51
50
  */
52
51
  theme?: "surface" | "light";
53
- /**
54
- * Change the badge shape.
55
- * Use "dot" for a small indicator without text.
56
- * @default count
57
- */
58
- type?: "count" | "dot";
59
52
  }
60
53
  export type BadgeProps = BadgeProperties & HTMLAttributes<HTMLElement>;
61
54
  export declare const Badge: React.FC<BadgeProps> & BadgeComponents;
@@ -118,9 +111,6 @@ declare const propertiesBox: {
118
111
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
112
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
113
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
121
- /**
122
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
123
- */
124
114
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
115
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
116
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -145,9 +135,6 @@ declare const propertiesBox: {
145
135
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
146
136
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
147
137
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
148
- /**
149
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
150
- */
151
138
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
139
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
140
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -261,7 +248,6 @@ declare const propertiesBox: {
261
248
  borderRadius: {
262
249
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
263
250
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
- "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
251
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
266
252
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
267
253
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -290,9 +276,6 @@ declare const propertiesBox: {
290
276
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
291
277
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
292
278
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
293
- /**
294
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
295
- */
296
279
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
297
280
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
298
281
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -316,9 +299,6 @@ declare const propertiesBox: {
316
299
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
317
300
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
301
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
- /**
320
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
321
- */
322
302
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
303
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
324
304
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -372,6 +352,8 @@ declare const propertiesBox: {
372
352
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
353
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
374
354
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
355
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
356
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
375
357
  };
376
358
  textAlign: TextAlign[];
377
359
  fontWeight: {
@@ -383,9 +365,6 @@ declare const propertiesBox: {
383
365
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
384
366
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
385
367
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
386
- /**
387
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
388
- */
389
368
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
390
369
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
391
370
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -415,9 +394,6 @@ declare const propertiesBox: {
415
394
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
416
395
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
417
396
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
418
- /**
419
- * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
420
- */
421
397
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
422
398
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
423
399
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -882,7 +858,6 @@ declare const fileUploader: {
882
858
  borderRadius: {
883
859
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
884
860
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
885
- "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
886
861
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
887
862
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
888
863
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -908,7 +883,7 @@ declare const fileUploader: {
908
883
  };
909
884
  declare const icon: {
910
885
  sprinkle: ((props: {
911
- color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-interactivePressed" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | "ai-generativeTextHigh" | undefined;
886
+ color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-interactivePressed" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | undefined;
912
887
  cursor?: Cursor | undefined;
913
888
  }) => string) & {
914
889
  properties: Set<"color" | "cursor">;
@@ -940,7 +915,6 @@ declare const icon: {
940
915
  "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
941
916
  "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
942
917
  "ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
943
- "ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
944
918
  "ai-generative": string;
945
919
  };
946
920
  cursor: Cursor[];
@@ -961,6 +935,7 @@ declare const propertiesIconButton: {
961
935
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
962
936
  "neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
963
937
  "neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
938
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
964
939
  transparent: string;
965
940
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
966
941
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1020,7 +995,6 @@ declare const propertiesText: {
1020
995
  "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1021
996
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1022
997
  "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1023
- "ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1024
998
  };
1025
999
  textAlign: TextAlign[];
1026
1000
  lineHeight: {
@@ -1214,10 +1188,6 @@ declare const text: {
1214
1188
  default: string;
1215
1189
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1216
1190
  };
1217
- "ai-generativeTextHigh": {
1218
- default: string;
1219
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1220
- };
1221
1191
  };
1222
1192
  staticScale: {
1223
1193
  "ai-generative": "transparent";
@@ -1245,21 +1215,20 @@ declare const text: {
1245
1215
  "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1246
1216
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1247
1217
  "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1248
- "ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1249
1218
  };
1250
1219
  name: "color";
1251
1220
  };
1252
1221
  textAlign: {
1253
1222
  values: {
1254
- left: {
1223
+ center: {
1255
1224
  default: string;
1256
1225
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1257
1226
  };
1258
- right: {
1227
+ left: {
1259
1228
  default: string;
1260
1229
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1261
1230
  };
1262
- center: {
1231
+ right: {
1263
1232
  default: string;
1264
1233
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1265
1234
  };
@@ -1393,11 +1362,11 @@ declare const text: {
1393
1362
  };
1394
1363
  whiteSpace: {
1395
1364
  values: {
1396
- normal: {
1365
+ pre: {
1397
1366
  default: string;
1398
1367
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1399
1368
  };
1400
- pre: {
1369
+ normal: {
1401
1370
  default: string;
1402
1371
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1403
1372
  };
@@ -1506,7 +1475,6 @@ declare const text: {
1506
1475
  "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1507
1476
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1508
1477
  "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1509
- "ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1510
1478
  };
1511
1479
  textAlign: TextAlign[];
1512
1480
  lineHeight: {
@@ -1683,11 +1651,11 @@ declare const list: {
1683
1651
  };
1684
1652
  declare const multiSelect: {
1685
1653
  sprinkle: ((props: {
1686
- zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
1687
- xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
1688
- md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
1689
- lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
1690
- xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
1654
+ zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | {
1655
+ xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
1656
+ md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
1657
+ lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
1658
+ xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
1691
1659
  } | undefined;
1692
1660
  }) => string) & {
1693
1661
  properties: Set<"zIndex">;
@@ -1703,6 +1671,8 @@ declare const multiSelect: {
1703
1671
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1704
1672
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1705
1673
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1674
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1675
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1706
1676
  };
1707
1677
  };
1708
1678
  classnames: {
@@ -1746,6 +1716,8 @@ declare const propertiesPopover: {
1746
1716
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1747
1717
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1748
1718
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1719
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1720
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1749
1721
  };
1750
1722
  overflow: Overflow[];
1751
1723
  };
@@ -1794,7 +1766,7 @@ export interface PopoverSprinkle {
1794
1766
  }
1795
1767
  declare const spinner: {
1796
1768
  sprinkle: ((props: {
1797
- color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | undefined;
1769
+ color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | undefined;
1798
1770
  }) => string) & {
1799
1771
  properties: Set<"color">;
1800
1772
  };
@@ -1814,7 +1786,6 @@ declare const spinner: {
1814
1786
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1815
1787
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1816
1788
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1817
- "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1818
1789
  };
1819
1790
  };
1820
1791
  classnames: {
@@ -1910,7 +1881,7 @@ declare const card: {
1910
1881
  subComponents: {
1911
1882
  header: {
1912
1883
  sprinkle: ((props: {
1913
- padding?: "base" | "none" | "small" | undefined;
1884
+ padding?: "base" | "small" | "none" | undefined;
1914
1885
  }) => string) & {
1915
1886
  properties: Set<"padding">;
1916
1887
  };
@@ -1924,7 +1895,7 @@ declare const card: {
1924
1895
  };
1925
1896
  body: {
1926
1897
  sprinkle: ((props: {
1927
- padding?: "base" | "none" | "small" | undefined;
1898
+ padding?: "base" | "small" | "none" | undefined;
1928
1899
  }) => string) & {
1929
1900
  properties: Set<"padding">;
1930
1901
  };
@@ -1938,7 +1909,7 @@ declare const card: {
1938
1909
  };
1939
1910
  footer: {
1940
1911
  sprinkle: ((props: {
1941
- padding?: "base" | "none" | "small" | undefined;
1912
+ padding?: "base" | "small" | "none" | undefined;
1942
1913
  }) => string) & {
1943
1914
  properties: Set<"padding">;
1944
1915
  };
@@ -1953,7 +1924,7 @@ declare const card: {
1953
1924
  };
1954
1925
  sprinkle: ((props: {
1955
1926
  backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
1956
- padding?: "base" | "none" | "small" | undefined;
1927
+ padding?: "base" | "small" | "none" | undefined;
1957
1928
  }) => string) & {
1958
1929
  properties: Set<"backgroundColor" | "padding">;
1959
1930
  };
@@ -2001,15 +1972,18 @@ export interface ModalSprinkle {
2001
1972
  declare const modal: {
2002
1973
  classnames: {
2003
1974
  overlay: string;
1975
+ overlayZIndex: Record<"base" | "top", string>;
2004
1976
  overlayScoped: string;
1977
+ overlayScopedZIndex: Record<"base" | "top", string>;
2005
1978
  container: string;
1979
+ containerZIndex: Record<"base" | "top", string>;
2006
1980
  container__close: string;
2007
1981
  container__footer: string;
2008
1982
  };
2009
1983
  subComponents: {
2010
1984
  header: {
2011
1985
  sprinkle: ((props: {
2012
- padding?: "base" | "none" | "small" | undefined;
1986
+ padding?: "base" | "small" | "none" | undefined;
2013
1987
  }) => string) & {
2014
1988
  properties: Set<"padding">;
2015
1989
  };
@@ -2024,7 +1998,7 @@ declare const modal: {
2024
1998
  };
2025
1999
  body: {
2026
2000
  sprinkle: ((props: {
2027
- padding?: "base" | "none" | "small" | undefined;
2001
+ padding?: "base" | "small" | "none" | undefined;
2028
2002
  }) => string) & {
2029
2003
  properties: Set<"padding">;
2030
2004
  };
@@ -2038,7 +2012,7 @@ declare const modal: {
2038
2012
  };
2039
2013
  footer: {
2040
2014
  sprinkle: ((props: {
2041
- padding?: "base" | "none" | "small" | undefined;
2015
+ padding?: "base" | "small" | "none" | undefined;
2042
2016
  }) => string) & {
2043
2017
  properties: Set<"padding">;
2044
2018
  };
@@ -2141,6 +2115,14 @@ declare const sidebarSprinkle: {
2141
2115
  default: string;
2142
2116
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2143
2117
  };
2118
+ 1000: {
2119
+ default: string;
2120
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2121
+ };
2122
+ 1100: {
2123
+ default: string;
2124
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2125
+ };
2144
2126
  };
2145
2127
  staticScale: {
2146
2128
  "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2152,6 +2134,8 @@ declare const sidebarSprinkle: {
2152
2134
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2153
2135
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2154
2136
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2137
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2138
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2155
2139
  };
2156
2140
  name: "zIndex";
2157
2141
  };
@@ -2161,11 +2145,11 @@ declare const sidebarSprinkle: {
2161
2145
  default: string;
2162
2146
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2163
2147
  };
2164
- none: {
2148
+ small: {
2165
2149
  default: string;
2166
2150
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2167
2151
  };
2168
- small: {
2152
+ none: {
2169
2153
  default: string;
2170
2154
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2171
2155
  };
@@ -2212,6 +2196,8 @@ declare const sidebarSprinkle: {
2212
2196
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2213
2197
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2214
2198
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2199
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2200
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2215
2201
  };
2216
2202
  padding: {
2217
2203
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2280,6 +2266,14 @@ declare const sidebar: {
2280
2266
  default: string;
2281
2267
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2282
2268
  };
2269
+ 1000: {
2270
+ default: string;
2271
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2272
+ };
2273
+ 1100: {
2274
+ default: string;
2275
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2276
+ };
2283
2277
  };
2284
2278
  staticScale: {
2285
2279
  "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2291,6 +2285,8 @@ declare const sidebar: {
2291
2285
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2292
2286
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2293
2287
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2288
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2289
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2294
2290
  };
2295
2291
  name: "zIndex";
2296
2292
  };
@@ -2300,11 +2296,11 @@ declare const sidebar: {
2300
2296
  default: string;
2301
2297
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2302
2298
  };
2303
- none: {
2299
+ small: {
2304
2300
  default: string;
2305
2301
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2306
2302
  };
2307
- small: {
2303
+ none: {
2308
2304
  default: string;
2309
2305
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
2310
2306
  };
@@ -2351,6 +2347,8 @@ declare const sidebar: {
2351
2347
  "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2352
2348
  "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2353
2349
  "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2350
+ "1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2351
+ "1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2354
2352
  };
2355
2353
  padding: {
2356
2354
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2456,7 +2454,7 @@ export interface ButtonProperties {
2456
2454
  * Change the visual style of the button.
2457
2455
  * @default neutral
2458
2456
  */
2459
- appearance?: "primary" | "danger" | "success" | "warning" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
2457
+ appearance?: "primary" | "danger" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
2460
2458
  /**
2461
2459
  * Disables the button, disallowing user interaction.
2462
2460
  * @default false
@@ -2753,12 +2751,10 @@ export interface IconButtonProperties extends IconButtonSprinkle {
2753
2751
  */
2754
2752
  color?: IconProps["color"];
2755
2753
  /**
2756
- * Visual style of the icon button container.
2757
- * - `transparent`: no background or border at rest; subtle hover/active states only.
2758
- * - `ai-generative`: gradient background; overrides color/border sprinkles.
2759
- * When omitted, the default bordered appearance is used.
2754
+ * AI gradient background appearance for the button container.
2755
+ * When provided, container color/border sprinkles are ignored in favor of gradient styles.
2760
2756
  */
2761
- appearance?: "transparent" | "ai-generative" | "ai-secondary";
2757
+ appearance?: "ai-generative";
2762
2758
  }
2763
2759
  export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
2764
2760
  export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
@@ -3972,6 +3968,20 @@ export interface ModalProperties extends ModalSprinkle {
3972
3968
  * @default base
3973
3969
  */
3974
3970
  padding?: keyof typeof modal.properties.padding;
3971
+ /**
3972
+ * Controls whether the built-in close (X) button renders.
3973
+ * Only takes effect when `onDismiss` is provided.
3974
+ * @default true
3975
+ */
3976
+ renderDismissButton?: boolean;
3977
+ /**
3978
+ * Stacking layer for the modal.
3979
+ * - "base": standard modal layer (above the page, below floating components like tooltip/toast/popover).
3980
+ * - "top": renders above all other floating components. Reserved exclusively for Modal.
3981
+ * Only effective on the default portaled path; has no effect when `root` is provided.
3982
+ * @default "base"
3983
+ */
3984
+ zIndex?: "base" | "top";
3975
3985
  }
3976
3986
  export type ModalProps = ModalProperties & {
3977
3987
  /**