@innovaccer/design-system 4.22.0 → 4.24.0

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 (128) hide show
  1. package/CHANGELOG.md +157 -0
  2. package/README.md +35 -27
  3. package/css/dist/index.css +1570 -434
  4. package/css/dist/index.css.map +1 -1
  5. package/css/src/ai-components/button.module.css +4 -24
  6. package/css/src/ai-components/chip.module.css +12 -30
  7. package/css/src/ai-components/iconButton.module.css +2 -12
  8. package/css/src/components/avatarGroup.module.css +7 -0
  9. package/css/src/components/avatarSelection.module.css +22 -0
  10. package/css/src/components/badge.module.css +3 -3
  11. package/css/src/components/button.module.css +196 -27
  12. package/css/src/components/calendar.module.css +61 -20
  13. package/css/src/components/card.module.css +14 -0
  14. package/css/src/components/chatBubble.module.css +6 -1
  15. package/css/src/components/chatInput.module.css +14 -3
  16. package/css/src/components/chip.module.css +39 -4
  17. package/css/src/components/chipInput.module.css +19 -17
  18. package/css/src/components/dropdown.module.css +50 -14
  19. package/css/src/components/dropdownButton.module.css +5 -3
  20. package/css/src/components/dropzone.module.css +36 -0
  21. package/css/src/components/editableChipInput.module.css +48 -1
  22. package/css/src/components/editableDropdown.module.css +53 -0
  23. package/css/src/components/editableInput.module.css +31 -0
  24. package/css/src/components/grid.module.css +33 -13
  25. package/css/src/components/horizontalNav.module.css +16 -1
  26. package/css/src/components/input.module.css +0 -1
  27. package/css/src/components/label.module.css +12 -0
  28. package/css/src/components/link.module.css +69 -6
  29. package/css/src/components/linkButton.module.css +82 -10
  30. package/css/src/components/listbox.module.css +110 -6
  31. package/css/src/components/metricInput.module.css +89 -35
  32. package/css/src/components/modal.module.css +16 -0
  33. package/css/src/components/navigation.module.css +16 -0
  34. package/css/src/components/segmentedControl.module.css +1 -1
  35. package/css/src/components/select.module.css +11 -3
  36. package/css/src/components/selectionCard.module.css +38 -0
  37. package/css/src/components/sidesheet.module.css +16 -0
  38. package/css/src/components/slider.module.css +21 -0
  39. package/css/src/components/switch.module.css +39 -0
  40. package/css/src/components/table.module.css +32 -1
  41. package/css/src/components/tabs.module.css +20 -0
  42. package/css/src/components/timePicker.module.css +4 -0
  43. package/css/src/components/toast.module.css +19 -0
  44. package/css/src/components/tooltip.module.css +1 -0
  45. package/css/src/components/verticalNav.module.css +13 -5
  46. package/css/src/core/utilities.css +0 -23
  47. package/css/src/tokens/index.css +156 -156
  48. package/css/src/utils/utility.css +4 -0
  49. package/css/src/variables/index.css +116 -1
  50. package/dist/brotli/index.js +1 -1
  51. package/dist/brotli/index.js.br +0 -0
  52. package/dist/cjs/index.js +1 -1
  53. package/dist/core/accessibility/utils/useAccessibilityProps.d.ts +99 -16
  54. package/dist/core/components/atoms/_chip/index.d.ts +2 -0
  55. package/dist/core/components/atoms/_text/index.d.ts +2 -1
  56. package/dist/core/components/atoms/caption/Caption.d.ts +2 -2
  57. package/dist/core/components/atoms/chip/Chip.d.ts +2 -0
  58. package/dist/core/components/atoms/divider/Divider.d.ts +1 -0
  59. package/dist/core/components/atoms/dropdown/DropdownList.d.ts +2 -1
  60. package/dist/core/components/atoms/dropdown/option/index.d.ts +13 -4
  61. package/dist/core/components/atoms/helpText/HelpText.d.ts +1 -0
  62. package/dist/core/components/atoms/icon/Icon.d.ts +2 -3
  63. package/dist/core/components/atoms/link/Link.d.ts +4 -2
  64. package/dist/core/components/atoms/linkButton/LinkButton.d.ts +2 -1
  65. package/dist/core/components/atoms/message/Message.d.ts +1 -0
  66. package/dist/core/components/atoms/multiSlider/Handle.d.ts +1 -0
  67. package/dist/core/components/atoms/multiSlider/index.d.ts +2 -0
  68. package/dist/core/components/atoms/outsideClick/OutsideClick.d.ts +1 -0
  69. package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +51 -50
  70. package/dist/core/components/atoms/progressBar/ProgressBar.d.ts +3 -0
  71. package/dist/core/components/atoms/progressRing/ProgressRing.d.ts +3 -0
  72. package/dist/core/components/atoms/segmentedControl/SegmentedControl.d.ts +2 -0
  73. package/dist/core/components/atoms/spinner/Spinner.d.ts +1 -0
  74. package/dist/core/components/atoms/statusHint/StatusHint.d.ts +2 -2
  75. package/dist/core/components/atoms/toast/Toast.d.ts +3 -0
  76. package/dist/core/components/molecules/chat/Chat.d.ts +3 -0
  77. package/dist/core/components/molecules/chat/chatBubble/IncomingBubble.d.ts +1 -0
  78. package/dist/core/components/molecules/chat/chatBubble/OutgoingBubble.d.ts +1 -0
  79. package/dist/core/components/molecules/chat/chatInput/ChatInput.d.ts +1 -0
  80. package/dist/core/components/molecules/chat/unreadMessage/UnreadMessage.d.ts +3 -0
  81. package/dist/core/components/molecules/chipInput/ChipInput.d.ts +1 -1
  82. package/dist/core/components/molecules/chipInput/utils.d.ts +2 -0
  83. package/dist/core/components/molecules/dropzone/Dropzone.d.ts +1 -0
  84. package/dist/core/components/molecules/editableInput/EditableInput.d.ts +4 -0
  85. package/dist/core/components/molecules/fileUploader/FileUploaderButton.d.ts +2 -0
  86. package/dist/core/components/molecules/inputMask/InputMask.d.ts +1 -0
  87. package/dist/core/components/molecules/modal/Modal.d.ts +1 -0
  88. package/dist/core/components/molecules/popover/Popover.d.ts +1 -0
  89. package/dist/core/components/molecules/sidesheet/Sidesheet.d.ts +2 -1
  90. package/dist/core/components/molecules/stepper/Step.d.ts +1 -0
  91. package/dist/core/components/organisms/calendar/Calendar.d.ts +4 -3
  92. package/dist/core/components/organisms/calendar/utils.d.ts +6 -5
  93. package/dist/core/components/organisms/combobox/Combobox.d.ts +2 -0
  94. package/dist/core/components/organisms/combobox/ComboboxList.d.ts +1 -0
  95. package/dist/core/components/organisms/combobox/trigger/ComboboxTrigger.d.ts +2 -0
  96. package/dist/core/components/organisms/combobox/trigger/MultiselectTrigger.d.ts +1 -0
  97. package/dist/core/components/organisms/grid/Grid.d.ts +1 -0
  98. package/dist/core/components/organisms/grid/GridContext.d.ts +1 -0
  99. package/dist/core/components/organisms/grid/VirtualList.d.ts +1 -0
  100. package/dist/core/components/organisms/inlineMessage/InlineMessage.d.ts +3 -2
  101. package/dist/core/components/organisms/listbox/Listbox.d.ts +9 -1
  102. package/dist/core/components/organisms/listbox/listboxItem/ListBody.d.ts +1 -1
  103. package/dist/core/components/organisms/listbox/listboxItem/ListboxItem.d.ts +2 -0
  104. package/dist/core/components/organisms/listbox/nestedList/NestedList.d.ts +2 -0
  105. package/dist/core/components/organisms/listbox/reorderList/Draggable.d.ts +12 -0
  106. package/dist/core/components/organisms/listbox/reorderList/DraggableList.d.ts +2 -2
  107. package/dist/core/components/organisms/listbox/reorderList/types.d.ts +2 -0
  108. package/dist/core/components/organisms/listbox/utils.d.ts +3 -0
  109. package/dist/core/components/organisms/menu/MenuContext.d.ts +1 -0
  110. package/dist/core/components/organisms/menu/SubMenuContext.d.ts +1 -0
  111. package/dist/core/components/organisms/select/Select.d.ts +4 -1
  112. package/dist/core/components/organisms/select/SelectContext.d.ts +3 -1
  113. package/dist/core/components/organisms/select/SelectOption.d.ts +1 -0
  114. package/dist/core/components/organisms/select/SelectTrigger.d.ts +4 -0
  115. package/dist/core/components/organisms/select/utils.d.ts +7 -2
  116. package/dist/core/components/organisms/textField/TextFieldCommon.d.ts +1 -0
  117. package/dist/core/components/organisms/verticalNav/VerticalNav.d.ts +2 -0
  118. package/dist/core/utils/overlayHelper.d.ts +3 -2
  119. package/dist/esm/index.js +4343 -1784
  120. package/dist/gzip/index.js +1 -1
  121. package/dist/gzip/index.js.gz +0 -0
  122. package/dist/index.js +4139 -1734
  123. package/dist/index.js.map +1 -1
  124. package/dist/index.umd.css +1558 -422
  125. package/dist/index.umd.js +1 -1
  126. package/dist/scripts/setupTest.d.ts +1 -0
  127. package/dist/types/tsconfig.type.tsbuildinfo +399 -243
  128. package/package.json +8 -13
@@ -23,42 +23,42 @@
23
23
  --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
24
24
 
25
25
  /* Red */
26
- --color-red-100: #fff2f0;
27
- --color-red-200: #ffddd6;
28
- --color-red-300: #ffccc2;
29
- --color-red-400: #ffb7a8;
30
- --color-red-500: #fe9e8b;
31
- --color-red-600: #fb866f;
32
- --color-red-700: #f86b4f;
33
- --color-red-800: #f54f2e;
34
- --color-red-900: #f5310a;
35
- --color-red-1000: #d62400;
36
- --color-red-1100: #ad1d00;
37
- --color-red-1200: #851600;
38
- --color-red-1300: #611000;
39
- --color-red-1400: #470c00;
40
- --color-red-1000-4a: rgba(214, 36, 0, 0.04);
41
- --color-red-1000-16a: rgba(214, 36, 0, 0.16);
42
- --color-red-1200-16a: rgba(133, 22, 0, 0.16);
26
+ --color-red-100: #fff7f5;
27
+ --color-red-200: #ffe1db;
28
+ --color-red-300: #ffd4cc;
29
+ --color-red-400: #fec0b4;
30
+ --color-red-500: #fcac9c;
31
+ --color-red-600: #f49480;
32
+ --color-red-700: #ed765e;
33
+ --color-red-800: #e45b3f;
34
+ --color-red-900: #df3011;
35
+ --color-red-1000: #bd1c00;
36
+ --color-red-1100: #9e200a;
37
+ --color-red-1200: #791a06;
38
+ --color-red-1300: #5c1305;
39
+ --color-red-1400: #3f0e03;
40
+ --color-red-1000-4a: rgba(189, 28, 0, 0.04);
41
+ --color-red-1000-16a: rgba(189, 28, 0, 0.16);
42
+ --color-red-1200-16a: rgba(121, 26, 6, 0.16);
43
43
 
44
44
  /* Green */
45
- --color-green-100: #deffdb;
46
- --color-green-200: #c4fcc0;
47
- --color-green-300: #a0f69d;
48
- --color-green-400: #88ee87;
49
- --color-green-500: #6be16d;
50
- --color-green-600: #4fcf55;
51
- --color-green-700: #27b933;
52
- --color-green-800: #07a61a;
53
- --color-green-900: #008f11;
54
- --color-green-1000: #007a0e;
55
- --color-green-1100: #00660c;
56
- --color-green-1200: #00520a;
57
- --color-green-1300: #004208;
58
- --color-green-1400: #002e05;
59
- --color-green-1000-4a: rgba(0, 122, 14, 0.04);
60
- --color-green-1000-16a: rgba(0, 122, 14, 0.16);
61
- --color-green-1200-16a: rgba(0, 82, 10, 0.16);
45
+ --color-green-100: #f1f9f0;
46
+ --color-green-200: #dcf0db;
47
+ --color-green-300: #cbe8c9;
48
+ --color-green-400: #b6dfb3;
49
+ --color-green-500: #9dd49b;
50
+ --color-green-600: #7ec57d;
51
+ --color-green-700: #5eb55e;
52
+ --color-green-800: #3aa63c;
53
+ --color-green-900: #009900;
54
+ --color-green-1000: #008000;
55
+ --color-green-1100: #006b00;
56
+ --color-green-1200: #005200;
57
+ --color-green-1300: #003d04;
58
+ --color-green-1400: #002904;
59
+ --color-green-1000-4a: rgba(0, 128, 0, 0.04);
60
+ --color-green-1000-16a: rgba(0, 128, 0, 0.16);
61
+ --color-green-1200-16a: rgba(0, 82, 0, 0.16);
62
62
 
63
63
  /* Yellow */
64
64
  --color-yellow-100: #fff9e5;
@@ -81,138 +81,138 @@
81
81
  --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
82
82
 
83
83
  /* Orange */
84
- --color-orange-100: #fff2db;
85
- --color-orange-200: #ffeccc;
86
- --color-orange-300: #ffe0ad;
87
- --color-orange-400: #ffce85;
88
- --color-orange-500: #ffba61;
89
- --color-orange-600: #ffaf4d;
90
- --color-orange-700: #ffa238;
91
- --color-orange-800: #ff931f;
92
- --color-orange-900: #ff8000;
93
- --color-orange-1000: #e56f00;
94
- --color-orange-1100: #cc5f00;
95
- --color-orange-1200: #b24d00;
96
- --color-orange-1300: #7a2f00;
97
- --color-orange-1400: #5c2200;
98
- --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
99
- --color-orange-1000-16a: rgba(229, 111, 0, 0.16);
84
+ --color-orange-100: #ffeed1;
85
+ --color-orange-200: #ffe8c2;
86
+ --color-orange-300: #ffdca3;
87
+ --color-orange-400: #ffca7a;
88
+ --color-orange-500: #ffb657;
89
+ --color-orange-600: #ffa333;
90
+ --color-orange-700: #ff9114;
91
+ --color-orange-800: #eb7900;
92
+ --color-orange-900: #d66c00;
93
+ --color-orange-1000: #bd5b00;
94
+ --color-orange-1100: #a34c00;
95
+ --color-orange-1200: #8a3b00;
96
+ --color-orange-1300: #6b2900;
97
+ --color-orange-1400: #4d1c00;
98
+ --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
99
+ --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
100
100
 
101
101
  /* Violet */
102
- --color-violet-100: #f7f0ff;
103
- --color-violet-200: #ebdbff;
104
- --color-violet-300: #dec7ff;
105
- --color-violet-400: #d3b4fd;
106
- --color-violet-500: #c7a0fd;
107
- --color-violet-600: #b689fb;
108
- --color-violet-700: #a771f9;
109
- --color-violet-800: #9657f4;
110
- --color-violet-900: #823aee;
111
- --color-violet-1000: #6f21e4;
112
- --color-violet-1100: #601ec2;
113
- --color-violet-1200: #531ba7;
114
- --color-violet-1300: #3e0e8b;
115
- --color-violet-1400: #2b0868;
116
- --color-violet-1000-16a: rgba(111, 33, 228, 0.16);
102
+ --color-violet-100: #faf6fe;
103
+ --color-violet-200: #f0e7fd;
104
+ --color-violet-300: #e4d5fb;
105
+ --color-violet-400: #dcc7fa;
106
+ --color-violet-500: #cfb4f8;
107
+ --color-violet-600: #c0a0f3;
108
+ --color-violet-700: #ac87ee;
109
+ --color-violet-800: #9e72e9;
110
+ --color-violet-900: #8854e8;
111
+ --color-violet-1000: #6f47cd;
112
+ --color-violet-1100: #5b3ba5;
113
+ --color-violet-1200: #462d80;
114
+ --color-violet-1300: #322361;
115
+ --color-violet-1400: #211844;
116
+ --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
117
117
 
118
118
  /* Indigo */
119
- --color-indigo-100: #f2f3fd;
120
- --color-indigo-200: #daddfb;
121
- --color-indigo-300: #c8ccf9;
122
- --color-indigo-400: #bbc0f7;
123
- --color-indigo-500: #a8aff5;
124
- --color-indigo-600: #919af2;
125
- --color-indigo-700: #7d86ed;
126
- --color-indigo-800: #6873e8;
127
- --color-indigo-900: #5460e3;
128
- --color-indigo-1000: #3b48de;
129
- --color-indigo-1100: #1f2ed6;
130
- --color-indigo-1200: #1422b8;
131
- --color-indigo-1300: #0d1677;
132
- --color-indigo-1400: #0b1365;
133
- --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);
119
+ --color-indigo-100: #f5f6ff;
120
+ --color-indigo-200: #e5e8ff;
121
+ --color-indigo-300: #d6daff;
122
+ --color-indigo-400: #c7ccff;
123
+ --color-indigo-500: #b3baff;
124
+ --color-indigo-600: #9faafe;
125
+ --color-indigo-700: #8993fa;
126
+ --color-indigo-800: #7380f7;
127
+ --color-indigo-900: #5a67f6;
128
+ --color-indigo-1000: #4256d7;
129
+ --color-indigo-1100: #2f4aac;
130
+ --color-indigo-1200: #223987;
131
+ --color-indigo-1300: #192b66;
132
+ --color-indigo-1400: #101c46;
133
+ --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
134
134
 
135
135
  /* Lime */
136
- --color-lime-100: #ecffd1;
137
- --color-lime-200: #defcb0;
138
- --color-lime-300: #cbf98b;
139
- --color-lime-400: #b9f466;
140
- --color-lime-500: #a7ef43;
141
- --color-lime-600: #9aeb28;
142
- --color-lime-700: #8ce114;
143
- --color-lime-800: #7ecf0c;
144
- --color-lime-900: #70bc06;
145
- --color-lime-1000: #62a701;
146
- --color-lime-1100: #508901;
147
- --color-lime-1200: #3e6b00;
148
- --color-lime-1300: #294600;
149
- --color-lime-1400: #1b2e00;
150
- --color-lime-900-16a: rgba(112, 188, 6, 0.16);
151
- --color-lime-1000-16a: rgba(98, 167, 1, 0.16);
136
+ --color-lime-100: #f5faed;
137
+ --color-lime-200: #e4efd3;
138
+ --color-lime-300: #d5e6bb;
139
+ --color-lime-400: #c5dc9e;
140
+ --color-lime-500: #b2d07d;
141
+ --color-lime-600: #9dc057;
142
+ --color-lime-700: #87b018;
143
+ --color-lime-800: #779d00;
144
+ --color-lime-900: #688900;
145
+ --color-lime-1000: #577400;
146
+ --color-lime-1100: #476000;
147
+ --color-lime-1200: #364900;
148
+ --color-lime-1300: #283800;
149
+ --color-lime-1400: #1a2700;
150
+ --color-lime-900-16a: rgba(104, 137, 0, 0.16);
151
+ --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
152
152
 
153
153
  /* Cyan */
154
- --color-cyan-100: #dbfaff;
155
- --color-cyan-200: #bdf5ff;
156
- --color-cyan-300: #99eeff;
157
- --color-cyan-400: #8beafd;
158
- --color-cyan-500: #7ee6fb;
159
- --color-cyan-600: #68def8;
160
- --color-cyan-700: #52d6f4;
161
- --color-cyan-800: #31cbf2;
162
- --color-cyan-900: #15c3ef;
163
- --color-cyan-1000: #0fabd2;
164
- --color-cyan-1100: #0589ad;
165
- --color-cyan-1200: #006280;
166
- --color-cyan-1300: #003f52;
167
- --color-cyan-1400: #00232e;
154
+ --color-cyan-100: #eefafc;
155
+ --color-cyan-200: #cff1f7;
156
+ --color-cyan-300: #b6e8f2;
157
+ --color-cyan-400: #96dfee;
158
+ --color-cyan-500: #6ed3e7;
159
+ --color-cyan-600: #33c4e1;
160
+ --color-cyan-700: #00b2d6;
161
+ --color-cyan-800: #009fc7;
162
+ --color-cyan-900: #008cb3;
163
+ --color-cyan-1000: #007599;
164
+ --color-cyan-1100: #006080;
165
+ --color-cyan-1200: #004766;
166
+ --color-cyan-1300: #003952;
167
+ --color-cyan-1400: #002738;
168
168
 
169
169
  /* Sea */
170
- --color-sea-100: #ddfdfa;
171
- --color-sea-200: #c4f8f3;
172
- --color-sea-300: #a5f3ec;
173
- --color-sea-400: #8ceee7;
174
- --color-sea-500: #73e7e0;
175
- --color-sea-600: #5ce0d7;
176
- --color-sea-700: #45d9cf;
177
- --color-sea-800: #23d7cb;
178
- --color-sea-900: #16c0b7;
179
- --color-sea-1000: #0ca79f;
180
- --color-sea-1100: #04867f;
181
- --color-sea-1200: #00615c;
182
- --color-sea-1300: #00423f;
183
- --color-sea-1400: #002927;
170
+ --color-sea-100: #effaf9;
171
+ --color-sea-200: #cff2ef;
172
+ --color-sea-300: #b8eae5;
173
+ --color-sea-400: #98e2dc;
174
+ --color-sea-500: #6fd8d2;
175
+ --color-sea-600: #2fcac0;
176
+ --color-sea-700: #00b8ae;
177
+ --color-sea-800: #00a89d;
178
+ --color-sea-900: #008f88;
179
+ --color-sea-1000: #007a74;
180
+ --color-sea-1100: #00665f;
181
+ --color-sea-1200: #004d47;
182
+ --color-sea-1300: #003d3a;
183
+ --color-sea-1400: #002926;
184
184
 
185
185
  /* Magenta */
186
- --color-magenta-100: #fff0f5;
187
- --color-magenta-200: #ffdbe8;
188
- --color-magenta-300: #ffc2d8;
189
- --color-magenta-400: #ffadcb;
190
- --color-magenta-500: #ff99c0;
191
- --color-magenta-600: #ff85b4;
192
- --color-magenta-700: #fe71a7;
193
- --color-magenta-800: #fc5a98;
194
- --color-magenta-900: #fa428c;
195
- --color-magenta-1000: #f7267a;
196
- --color-magenta-1100: #e40763;
197
- --color-magenta-1200: #b00753;
198
- --color-magenta-1300: #850040;
199
- --color-magenta-1400: #520029;
186
+ --color-magenta-100: #fff5f9;
187
+ --color-magenta-200: #fee1eb;
188
+ --color-magenta-300: #fccfdf;
189
+ --color-magenta-400: #fabdd2;
190
+ --color-magenta-500: #f6a7c4;
191
+ --color-magenta-600: #ef8fb2;
192
+ --color-magenta-700: #e7739e;
193
+ --color-magenta-800: #de5487;
194
+ --color-magenta-900: #d62974;
195
+ --color-magenta-1000: #bb165b;
196
+ --color-magenta-1100: #991a44;
197
+ --color-magenta-1200: #751538;
198
+ --color-magenta-1300: #5a112d;
199
+ --color-magenta-1400: #3d0b20;
200
200
 
201
201
  /* Pink */
202
- --color-pink-100: #fff0fd;
203
- --color-pink-200: #ffe0fb;
204
- --color-pink-300: #ffd1f9;
205
- --color-pink-400: #ffc7f7;
206
- --color-pink-500: #febdf7;
207
- --color-pink-600: #fdaff5;
208
- --color-pink-700: #fca1f6;
209
- --color-pink-800: #f88cf2;
210
- --color-pink-900: #f47cf2;
211
- --color-pink-1000: #ed68ed;
212
- --color-pink-1100: #d016d0;
213
- --color-pink-1200: #ae09ae;
214
- --color-pink-1300: #510151;
215
- --color-pink-1400: #410c40;
202
+ --color-pink-100: #fdf6fc;
203
+ --color-pink-200: #f8e2f5;
204
+ --color-pink-300: #f3d3ef;
205
+ --color-pink-400: #efc2e9;
206
+ --color-pink-500: #e7ace1;
207
+ --color-pink-600: #dd92d5;
208
+ --color-pink-700: #d17acd;
209
+ --color-pink-800: #c55ec1;
210
+ --color-pink-900: #b83db8;
211
+ --color-pink-1000: #9d2d9f;
212
+ --color-pink-1100: #842a82;
213
+ --color-pink-1200: #651f64;
214
+ --color-pink-1300: #4e184d;
215
+ --color-pink-1400: #371036;
216
216
 
217
217
  /* Gray */
218
218
  --color-gray-100: #f7f7f7;
@@ -263,7 +263,7 @@
263
263
  /* Accent 2 (Violet) */
264
264
  --jamun: var(--color-violet-1000);
265
265
  --jamun-dark: var(--color-violet-1200);
266
- --jamun-darker: var(--color-violet-1400);
266
+ --jamun-darker: var(--color-violet-1300);
267
267
  --jamun-light: var(--color-violet-700);
268
268
  --jamun-lighter: var(--color-violet-500);
269
269
  --jamun-lightest: var(--color-violet-200);
@@ -279,7 +279,7 @@
279
279
  /* Accent 3 (Indigo) */
280
280
  --neel: var(--color-indigo-1000);
281
281
  --neel-dark: var(--color-indigo-1200);
282
- --neel-darker: var(--color-indigo-1400);
282
+ --neel-darker: var(--color-indigo-1300);
283
283
  --neel-light: var(--color-indigo-700);
284
284
  --neel-lighter: var(--color-indigo-500);
285
285
  --neel-lightest: var(--color-indigo-200);
@@ -299,8 +299,8 @@
299
299
  --night-lightest: var(--color-gray-700);
300
300
 
301
301
  /* Accent 4 (Lime) */
302
- --nimbu: var(--color-lime-900);
303
- --nimbu-dark: var(--color-lime-1100);
302
+ --nimbu: var(--color-lime-1000);
303
+ --nimbu-dark: var(--color-lime-1200);
304
304
  --nimbu-darker: var(--color-lime-1300);
305
305
  --nimbu-light: var(--color-lime-700);
306
306
  --nimbu-lighter: var(--color-lime-500);
@@ -345,6 +345,10 @@
345
345
  --accent2: var(--jamun);
346
346
  --accent3: var(--neel);
347
347
  --accent4: var(--nimbu);
348
+ --accent5: var(--color-cyan-1000);
349
+ --accent6: var(--color-magenta-1000);
350
+ --accent7: var(--color-sea-1000);
351
+ --accent8: var(--color-pink-1000);
348
352
  --inverse: var(--night);
349
353
 
350
354
  /* dark */
@@ -357,6 +361,10 @@
357
361
  --accent2-dark: var(--jamun-dark);
358
362
  --accent3-dark: var(--neel-dark);
359
363
  --accent4-dark: var(--nimbu-dark);
364
+ --accent5-dark: var(--color-cyan-1200);
365
+ --accent6-dark: var(--color-magenta-1200);
366
+ --accent7-dark: var(--color-sea-1200);
367
+ --accent8-dark: var(--color-pink-1200);
360
368
 
361
369
  /* darker */
362
370
  --primary-darker: var(--jal-darker);
@@ -367,6 +375,10 @@
367
375
  --accent2-darker: var(--jamun-darker);
368
376
  --accent3-darker: var(--neel-darker);
369
377
  --accent4-darker: var(--nimbu-darker);
378
+ --accent5-darker: var(--color-cyan-1300);
379
+ --accent6-darker: var(--color-magenta-1300);
380
+ --accent7-darker: var(--color-sea-1300);
381
+ --accent8-darker: var(--color-pink-1300);
370
382
 
371
383
  /* light */
372
384
  --primary-light: var(--jal-light);
@@ -378,6 +390,10 @@
378
390
  --accent2-light: var(--jamun-light);
379
391
  --accent3-light: var(--neel-light);
380
392
  --accent4-light: var(--nimbu-light);
393
+ --accent5-light: var(--color-cyan-700);
394
+ --accent6-light: var(--color-magenta-700);
395
+ --accent7-light: var(--color-sea-700);
396
+ --accent8-light: var(--color-pink-700);
381
397
  --inverse-light: var(--night-light);
382
398
 
383
399
  /* lighter */
@@ -390,6 +406,10 @@
390
406
  --accent2-lighter: var(--jamun-lighter);
391
407
  --accent3-lighter: var(--neel-lighter);
392
408
  --accent4-lighter: var(--nimbu-lighter);
409
+ --accent5-lighter: var(--color-cyan-500);
410
+ --accent6-lighter: var(--color-magenta-500);
411
+ --accent7-lighter: var(--color-sea-500);
412
+ --accent8-lighter: var(--color-pink-500);
393
413
  --inverse-lighter: var(--night-lighter);
394
414
 
395
415
  /* lightest */
@@ -402,6 +422,10 @@
402
422
  --accent2-lightest: var(--jamun-lightest);
403
423
  --accent3-lightest: var(--neel-lightest);
404
424
  --accent4-lightest: var(--nimbu-lightest);
425
+ --accent5-lightest: var(--color-cyan-200);
426
+ --accent6-lightest: var(--color-magenta-200);
427
+ --accent7-lightest: var(--color-sea-200);
428
+ --accent8-lightest: var(--color-pink-200);
405
429
  --inverse-lightest: var(--night-lightest);
406
430
 
407
431
  /* Focus */
@@ -417,16 +441,103 @@
417
441
  --accent2-ultra-light: var(--color-violet-100);
418
442
  --accent3-ultra-light: var(--color-indigo-100);
419
443
  --accent4-ultra-light: var(--color-lime-100);
444
+ --accent5-ultra-light: var(--color-cyan-100);
445
+ --accent6-ultra-light: var(--color-magenta-100);
446
+ --accent7-ultra-light: var(--color-sea-100);
447
+ --accent8-ultra-light: var(--color-pink-100);
420
448
 
421
- /* Avatar specific color for the time being */
449
+ /* Numeric semantic steps */
422
450
  --primary-300: var(--color-blue-300);
451
+ --primary-400: var(--color-blue-400);
452
+ --primary-600: var(--color-blue-600);
453
+ --primary-800: var(--color-blue-800);
454
+ --primary-900: var(--color-blue-900);
455
+ --primary-1100: var(--color-blue-1100);
456
+ --primary-1400: var(--color-blue-1400);
423
457
  --success-300: var(--color-green-300);
458
+ --success-400: var(--color-green-400);
459
+ --success-600: var(--color-green-600);
460
+ --success-800: var(--color-green-800);
461
+ --success-900: var(--color-green-900);
462
+ --success-1100: var(--color-green-1100);
463
+ --success-1400: var(--color-green-1400);
424
464
  --alert-300: var(--color-red-300);
465
+ --alert-400: var(--color-red-400);
466
+ --alert-600: var(--color-red-600);
467
+ --alert-800: var(--color-red-800);
468
+ --alert-900: var(--color-red-900);
469
+ --alert-1100: var(--color-red-1100);
470
+ --alert-1400: var(--color-red-1400);
425
471
  --warning-300: var(--color-yellow-300);
472
+ --warning-400: var(--color-yellow-400);
473
+ --warning-600: var(--color-yellow-600);
474
+ --warning-800: var(--color-yellow-800);
475
+ --warning-1000: var(--color-yellow-1000);
476
+ --warning-1200: var(--color-yellow-1200);
477
+ --warning-1400: var(--color-yellow-1400);
426
478
  --accent1-300: var(--color-orange-300);
479
+ --accent1-400: var(--color-orange-400);
480
+ --accent1-600: var(--color-orange-600);
481
+ --accent1-800: var(--color-orange-800);
482
+ --accent1-900: var(--color-orange-900);
483
+ --accent1-1100: var(--color-orange-1100);
484
+ --accent1-1400: var(--color-orange-1400);
427
485
  --accent2-300: var(--color-violet-300);
486
+ --accent2-400: var(--color-violet-400);
487
+ --accent2-600: var(--color-violet-600);
488
+ --accent2-800: var(--color-violet-800);
489
+ --accent2-900: var(--color-violet-900);
490
+ --accent2-1100: var(--color-violet-1100);
491
+ --accent2-1400: var(--color-violet-1400);
428
492
  --accent3-300: var(--color-indigo-300);
493
+ --accent3-400: var(--color-indigo-400);
494
+ --accent3-600: var(--color-indigo-600);
495
+ --accent3-800: var(--color-indigo-800);
496
+ --accent3-900: var(--color-indigo-900);
497
+ --accent3-1100: var(--color-indigo-1100);
498
+ --accent3-1400: var(--color-indigo-1400);
429
499
  --accent4-300: var(--color-lime-300);
500
+ --accent4-400: var(--color-lime-400);
501
+ --accent4-600: var(--color-lime-600);
502
+ --accent4-800: var(--color-lime-800);
503
+ --accent4-900: var(--color-lime-900);
504
+ --accent4-1100: var(--color-lime-1100);
505
+ --accent4-1400: var(--color-lime-1400);
506
+ --accent5-300: var(--color-cyan-300);
507
+ --accent5-400: var(--color-cyan-400);
508
+ --accent5-600: var(--color-cyan-600);
509
+ --accent5-800: var(--color-cyan-800);
510
+ --accent5-900: var(--color-cyan-900);
511
+ --accent5-1100: var(--color-cyan-1100);
512
+ --accent5-1400: var(--color-cyan-1400);
513
+ --accent6-300: var(--color-magenta-300);
514
+ --accent6-400: var(--color-magenta-400);
515
+ --accent6-600: var(--color-magenta-600);
516
+ --accent6-800: var(--color-magenta-800);
517
+ --accent6-900: var(--color-magenta-900);
518
+ --accent6-1100: var(--color-magenta-1100);
519
+ --accent6-1400: var(--color-magenta-1400);
520
+ --accent7-300: var(--color-sea-300);
521
+ --accent7-400: var(--color-sea-400);
522
+ --accent7-600: var(--color-sea-600);
523
+ --accent7-800: var(--color-sea-800);
524
+ --accent7-900: var(--color-sea-900);
525
+ --accent7-1100: var(--color-sea-1100);
526
+ --accent7-1400: var(--color-sea-1400);
527
+ --accent8-300: var(--color-pink-300);
528
+ --accent8-400: var(--color-pink-400);
529
+ --accent8-600: var(--color-pink-600);
530
+ --accent8-800: var(--color-pink-800);
531
+ --accent8-900: var(--color-pink-900);
532
+ --accent8-1100: var(--color-pink-1100);
533
+ --accent8-1400: var(--color-pink-1400);
534
+
535
+ /* Neutral semantic steps */
536
+ --secondary-600: var(--color-gray-600);
537
+ --inverse-800: var(--color-gray-800);
538
+ --inverse-1000: var(--color-gray-1000);
539
+ --inverse-1200: var(--color-gray-1200);
540
+ --inverse-1300: var(--color-gray-1300);
430
541
 
431
542
  /* shadow */
432
543
  --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
@@ -438,6 +549,10 @@
438
549
  --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
439
550
  --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
440
551
  --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
552
+ --accent5-shadow: color-mod(var(--accent5) a(var(--opacity-4)));
553
+ --accent6-shadow: color-mod(var(--accent6) a(var(--opacity-4)));
554
+ --accent7-shadow: color-mod(var(--accent7) a(var(--opacity-4)));
555
+ --accent8-shadow: color-mod(var(--accent8) a(var(--opacity-4)));
441
556
  --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
442
557
 
443
558
  /* Text colors */
@@ -775,29 +890,6 @@ body {
775
890
  animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
776
891
  }
777
892
 
778
- ::-webkit-scrollbar {
779
- width: 16px;
780
- }
781
-
782
- ::-webkit-scrollbar-thumb {
783
- background: var(--secondary-dark);
784
- border-radius: 8px;
785
- border: 2px solid transparent;
786
- background-clip: content-box;
787
- }
788
-
789
- ::-webkit-scrollbar-thumb:hover {
790
- background: var(--inverse-lightest);
791
- border: 2px solid transparent;
792
- background-clip: content-box;
793
- }
794
-
795
- ::-webkit-scrollbar-thumb:active {
796
- background: var(--inverse-lighter);
797
- border: 2px solid transparent;
798
- background-clip: content-box;
799
- }
800
-
801
893
  .align-baseline {
802
894
  vertical-align: baseline !important;
803
895
  }
@@ -2994,6 +3086,10 @@ body {
2994
3086
  white-space: pre;
2995
3087
  }
2996
3088
 
3089
+ .white-space-pre-wrap {
3090
+ white-space: pre-wrap;
3091
+ }
3092
+
2997
3093
  .bottom-0 {
2998
3094
  bottom: 0;
2999
3095
  }
@@ -3348,6 +3444,13 @@ body {
3348
3444
  pointer-events: auto !important;
3349
3445
  }
3350
3446
 
3447
+ @media (forced-colors: active) {
3448
+ .AvatarGroup-input:focus-within {
3449
+ outline: var(--border-width-05) solid Highlight !important;
3450
+ outline-offset: var(--spacing-05);
3451
+ }
3452
+ }
3453
+
3351
3454
  @keyframes backdrop-open {
3352
3455
  from {
3353
3456
  opacity: 0;
@@ -3445,7 +3548,7 @@ body {
3445
3548
  }
3446
3549
 
3447
3550
  .Badge--accent1 {
3448
- background: var(--accent1-dark);
3551
+ background: var(--accent1);
3449
3552
  color: var(--white);
3450
3553
  }
3451
3554
 
@@ -3461,7 +3564,7 @@ body {
3461
3564
 
3462
3565
  .Badge--accent4 {
3463
3566
  background: var(--accent4);
3464
- color: var(--accent4-darker);
3567
+ color: var(--white);
3465
3568
  }
3466
3569
 
3467
3570
  .Badge--subtle-primary {
@@ -3486,7 +3589,7 @@ body {
3486
3589
 
3487
3590
  .Badge--subtle-warning {
3488
3591
  color: var(--warning-darker);
3489
- background: var(--warning-lightest);
3592
+ background: var(--warning-300);
3490
3593
  }
3491
3594
 
3492
3595
  .Badge--subtle-accent1 {
@@ -3647,11 +3750,11 @@ body {
3647
3750
  transition: var(--duration--fast-01) var(--standard-productive-curve);
3648
3751
  }
3649
3752
 
3650
- .Button:disabled {
3753
+ .Button--disabled {
3651
3754
  cursor: not-allowed;
3652
3755
  }
3653
3756
 
3654
- .Button:focus {
3757
+ .Button:focus-visible {
3655
3758
  outline: var(--border-width-05) solid var(--primary-focus);
3656
3759
  outline-offset: var(--spacing-05);
3657
3760
  }
@@ -3731,13 +3834,6 @@ body {
3731
3834
  margin-left: var(--spacing-15);
3732
3835
  }
3733
3836
 
3734
- .Button--tiny .Button-icon--left {
3735
- margin-right: var(--spacing-10);
3736
- }
3737
- .Button--tiny .Button-icon--right {
3738
- margin-left: var(--spacing-10);
3739
- }
3740
-
3741
3837
  .Button--basic {
3742
3838
  background: var(--secondary-light);
3743
3839
  color: var(--inverse);
@@ -3751,7 +3847,7 @@ body {
3751
3847
  background: var(--secondary-dark);
3752
3848
  }
3753
3849
 
3754
- .Button--basic:disabled {
3850
+ .Button--basic-disabled {
3755
3851
  background: var(--secondary-lighter);
3756
3852
  color: var(--inverse-lightest);
3757
3853
  }
@@ -3768,10 +3864,14 @@ body {
3768
3864
  background: var(--primary-darker);
3769
3865
  }
3770
3866
 
3771
- .Button--primary:disabled {
3867
+ .Button--primary-disabled {
3772
3868
  background: var(--primary-lighter);
3773
3869
  }
3774
3870
 
3871
+ .Button-infoIcon--primary {
3872
+ color: var(--text-link);
3873
+ }
3874
+
3775
3875
  .Button--success {
3776
3876
  background: var(--primary);
3777
3877
  }
@@ -3784,10 +3884,14 @@ body {
3784
3884
  background: var(--primary-darker);
3785
3885
  }
3786
3886
 
3787
- .Button--success:disabled {
3887
+ .Button--success-disabled {
3788
3888
  background: var(--primary-lighter);
3789
3889
  }
3790
3890
 
3891
+ .Button-infoIcon--success {
3892
+ color: var(--text-link);
3893
+ }
3894
+
3791
3895
  .Button--alert {
3792
3896
  background: var(--alert);
3793
3897
  }
@@ -3800,10 +3904,14 @@ body {
3800
3904
  background: var(--alert-darker);
3801
3905
  }
3802
3906
 
3803
- .Button--alert:disabled {
3907
+ .Button--alert-disabled {
3804
3908
  background: var(--alert-lighter);
3805
3909
  }
3806
3910
 
3911
+ .Button-infoIcon--alert {
3912
+ color: var(--alert);
3913
+ }
3914
+
3807
3915
  .Button--transparent {
3808
3916
  background: transparent;
3809
3917
  color: var(--inverse);
@@ -3817,11 +3925,11 @@ body {
3817
3925
  background: var(--secondary-dark);
3818
3926
  }
3819
3927
 
3820
- .Button--transparent:focus:active {
3928
+ .Button--transparent:focus-visible:active {
3821
3929
  background: var(--secondary-dark);
3822
3930
  }
3823
3931
 
3824
- .Button--transparent:disabled {
3932
+ .Button--transparent-disabled {
3825
3933
  background: transparent;
3826
3934
  color: var(--inverse-lightest);
3827
3935
  }
@@ -3848,21 +3956,21 @@ body {
3848
3956
  box-shadow: inset 0 0 0 2px var(--primary-dark);
3849
3957
  }
3850
3958
 
3851
- .Button--selected:focus {
3959
+ .Button--selected:focus-visible {
3852
3960
  background: var(--primary-ultra-light);
3853
3961
  outline: var(--border-width-05) solid var(--primary-focus);
3854
3962
  outline-offset: var(--spacing-05);
3855
3963
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
3856
3964
  }
3857
3965
 
3858
- .Button--selected:focus:active {
3966
+ .Button--selected:focus-visible:active {
3859
3967
  background: var(--primary-lighter);
3860
3968
  outline: var(--border-width-05) solid var(--primary-focus);
3861
3969
  outline-offset: var(--spacing-05);
3862
3970
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
3863
3971
  }
3864
3972
 
3865
- .Button--selected:disabled {
3973
+ .Button--selected-disabled {
3866
3974
  background: var(--primary-ultra-light);
3867
3975
  color: var(--primary-lighter);
3868
3976
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -3878,6 +3986,63 @@ body {
3878
3986
  text-overflow: ellipsis;
3879
3987
  }
3880
3988
 
3989
+ .Button-infoIconWrapper {
3990
+ position: absolute;
3991
+ top: -4px;
3992
+ right: -4px;
3993
+ width: var(--spacing-30);
3994
+ height: var(--spacing-30);
3995
+ box-sizing: border-box;
3996
+ border-radius: var(--border-radius-full);
3997
+ display: flex;
3998
+ align-items: center;
3999
+ justify-content: center;
4000
+ overflow: hidden;
4001
+ border: var(--border-width-2-5) solid var(--secondary-lightest);
4002
+ pointer-events: none;
4003
+ }
4004
+
4005
+ .Button-infoIconWrapper--transparent {
4006
+ border: none;
4007
+ background: transparent;
4008
+ top: var(--spacing-2-5);
4009
+ right: var(--spacing-2-5);
4010
+ }
4011
+
4012
+ .Button-infoIconWrapper--iconOnly-transparent {
4013
+ top: var(--spacing-2-5);
4014
+ right: var(--spacing-2-5);
4015
+ }
4016
+
4017
+ .Button-infoIconWrapper-outlined--basic {
4018
+ background: var(--secondary-lightest);
4019
+ }
4020
+
4021
+ .Button-infoIconWrapper-outlined--primary {
4022
+ background: var(--primary-ultra-light);
4023
+ }
4024
+
4025
+ .Button-infoIconWrapper-outlined--alert {
4026
+ background: var(--alert-ultra-light);
4027
+ }
4028
+
4029
+ .Button-infoIconWrapper--basic {
4030
+ background: var(--secondary-lighter);
4031
+ }
4032
+
4033
+ .Button-infoIconWrapper--primary,
4034
+ .Button-infoIconWrapper--success {
4035
+ background: var(--primary-lightest);
4036
+ }
4037
+
4038
+ .Button-infoIconWrapper--alert {
4039
+ background: var(--alert-lightest);
4040
+ }
4041
+
4042
+ .Button-infoIcon {
4043
+ color: var(--text-subtle);
4044
+ }
4045
+
3881
4046
  /* outlined button styles */
3882
4047
 
3883
4048
  .Button-outlined--basic {
@@ -3896,13 +4061,13 @@ body {
3896
4061
  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
3897
4062
  }
3898
4063
 
3899
- .Button-outlined--basic:focus {
4064
+ .Button-outlined--basic:focus-visible {
3900
4065
  outline: var(--border-width-05) solid var(--primary-focus);
3901
4066
  outline-offset: var(--spacing-05);
3902
4067
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
3903
4068
  }
3904
4069
 
3905
- .Button-outlined--basic:disabled {
4070
+ .Button-outlined--basic-disabled {
3906
4071
  color: var(--inverse-lightest);
3907
4072
  background: transparent;
3908
4073
  box-shadow: inset 0 0 0 1px var(--secondary);
@@ -3925,14 +4090,14 @@ body {
3925
4090
  box-shadow: inset 0 0 0 2px var(--primary-dark);
3926
4091
  }
3927
4092
 
3928
- .Button-outlined--selected:focus {
4093
+ .Button-outlined--selected:focus-visible {
3929
4094
  color: var(--primary-dark);
3930
4095
  outline: var(--border-width-05) solid var(--primary-focus);
3931
4096
  outline-offset: var(--spacing-05);
3932
4097
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
3933
4098
  }
3934
4099
 
3935
- .Button-outlined--selected:focus:active {
4100
+ .Button-outlined--selected:focus-visible:active {
3936
4101
  background: var(--primary-lighter);
3937
4102
  color: var(--primary-darker);
3938
4103
  outline: var(--border-width-05) solid var(--primary-focus);
@@ -3940,7 +4105,7 @@ body {
3940
4105
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
3941
4106
  }
3942
4107
 
3943
- .Button-outlined--selected:disabled {
4108
+ .Button-outlined--selected-disabled {
3944
4109
  background: var(--primary-ultra-light);
3945
4110
  color: var(--primary-lighter);
3946
4111
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -3964,18 +4129,22 @@ body {
3964
4129
  color: var(--primary-dark);
3965
4130
  }
3966
4131
 
3967
- .Button-outlined--primary:focus {
4132
+ .Button-outlined--primary:focus-visible {
3968
4133
  outline: var(--border-width-05) solid var(--primary-focus);
3969
4134
  outline-offset: var(--spacing-05);
3970
4135
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
3971
4136
  }
3972
4137
 
3973
- .Button-outlined--primary:disabled {
4138
+ .Button-outlined--primary-disabled {
3974
4139
  background: transparent;
3975
4140
  color: var(--primary-lighter);
3976
4141
  box-shadow: inset 0 0 0 1px var(--primary-lighter);
3977
4142
  }
3978
4143
 
4144
+ .Button-infoIcon-outlined--primary {
4145
+ color: var(--text-link);
4146
+ }
4147
+
3979
4148
  .Button-outlined--alert {
3980
4149
  background: transparent;
3981
4150
  box-shadow: inset 0 0 0 1px var(--alert);
@@ -3994,18 +4163,121 @@ body {
3994
4163
  color: var(--alert-dark);
3995
4164
  }
3996
4165
 
3997
- .Button-outlined--alert:focus {
4166
+ .Button-outlined--alert:focus-visible {
3998
4167
  outline: var(--border-width-05) solid var(--primary-focus);
3999
4168
  outline-offset: var(--spacing-05);
4000
4169
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
4001
4170
  }
4002
4171
 
4003
- .Button-outlined--alert:disabled {
4172
+ .Button-outlined--alert-disabled {
4004
4173
  background: transparent;
4005
4174
  color: var(--alert-lighter);
4006
4175
  box-shadow: inset 0 0 0 1px var(--alert-lighter);
4007
4176
  }
4008
4177
 
4178
+ .Button-infoIcon-outlined--alert {
4179
+ color: var(--alert);
4180
+ }
4181
+
4182
+ .Button-srOnly {
4183
+ position: absolute;
4184
+ width: var(--spacing-2-5);
4185
+ height: var(--spacing-2-5);
4186
+ padding: 0;
4187
+ margin: calc(-1 * var(--spacing-2-5));
4188
+ overflow: hidden;
4189
+ clip: rect(0, 0, 0, 0);
4190
+ white-space: nowrap;
4191
+ border: 0;
4192
+ }
4193
+
4194
+ @media (forced-colors: active) {
4195
+ .Button--basic,
4196
+ .Button--primary,
4197
+ .Button--success,
4198
+ .Button--alert,
4199
+ .Button--transparent {
4200
+ border: var(--border-width-2-5) solid ButtonText;
4201
+ }
4202
+
4203
+ .Button--basic-disabled,
4204
+ .Button--primary-disabled,
4205
+ .Button--success-disabled,
4206
+ .Button--alert-disabled,
4207
+ .Button--transparent-disabled {
4208
+ border: var(--border-width-2-5) solid GrayText;
4209
+ }
4210
+
4211
+ /* Selected state: inset box-shadow acts as the visible border */
4212
+ .Button--selected,
4213
+ .Button--selected:hover,
4214
+ .Button--selected:active,
4215
+ .Button--selected-disabled {
4216
+ border: var(--border-width-05) solid ButtonText;
4217
+ box-shadow: none;
4218
+ }
4219
+
4220
+ .Button--selected:focus-visible,
4221
+ .Button--selected:focus-visible:active {
4222
+ outline: var(--border-width-05) solid Highlight;
4223
+ box-shadow: none;
4224
+ }
4225
+
4226
+ /* Outlined variants: inset box-shadow is the only visible border */
4227
+ .Button-outlined--basic,
4228
+ .Button-outlined--basic:hover,
4229
+ .Button-outlined--basic:active,
4230
+ .Button-outlined--basic-disabled {
4231
+ border: var(--border-width-2-5) solid ButtonText;
4232
+ box-shadow: none;
4233
+ }
4234
+
4235
+ .Button-outlined--basic:focus-visible {
4236
+ outline: var(--border-width-05) solid Highlight;
4237
+ box-shadow: none;
4238
+ }
4239
+
4240
+ .Button-outlined--selected,
4241
+ .Button-outlined--selected:hover,
4242
+ .Button-outlined--selected:active,
4243
+ .Button-outlined--selected-disabled {
4244
+ border: var(--border-width-05) solid ButtonText;
4245
+ box-shadow: none;
4246
+ }
4247
+
4248
+ .Button-outlined--selected:focus-visible,
4249
+ .Button-outlined--selected:focus-visible:active {
4250
+ outline: var(--border-width-05) solid Highlight;
4251
+ box-shadow: none;
4252
+ }
4253
+
4254
+ .Button-outlined--primary,
4255
+ .Button-outlined--primary:hover,
4256
+ .Button-outlined--primary:active,
4257
+ .Button-outlined--primary-disabled {
4258
+ border: var(--border-width-2-5) solid ButtonText;
4259
+ box-shadow: none;
4260
+ }
4261
+
4262
+ .Button-outlined--primary:focus-visible {
4263
+ outline: var(--border-width-05) solid Highlight;
4264
+ box-shadow: none;
4265
+ }
4266
+
4267
+ .Button-outlined--alert,
4268
+ .Button-outlined--alert:hover,
4269
+ .Button-outlined--alert:active,
4270
+ .Button-outlined--alert-disabled {
4271
+ border: var(--border-width-2-5) solid ButtonText;
4272
+ box-shadow: none;
4273
+ }
4274
+
4275
+ .Button-outlined--alert:focus-visible {
4276
+ outline: var(--border-width-05) solid Highlight;
4277
+ box-shadow: none;
4278
+ }
4279
+ }
4280
+
4009
4281
  /* calendar */
4010
4282
 
4011
4283
  .Calendar-wrapper {
@@ -4152,6 +4424,13 @@ body {
4152
4424
  position: relative;
4153
4425
  }
4154
4426
 
4427
+ .Calendar-monthValueWrapper,
4428
+ .Calendar-yearValueWrapper {
4429
+ display: inline-flex;
4430
+ justify-content: center;
4431
+ position: relative;
4432
+ }
4433
+
4155
4434
  .Calendar-valueWrapper--inRange {
4156
4435
  background: var(--primary-ultra-light);
4157
4436
  }
@@ -4210,13 +4489,13 @@ body {
4210
4489
  -webkit-user-select: none;
4211
4490
  -moz-user-select: none;
4212
4491
  user-select: none;
4492
+ box-sizing: border-box;
4213
4493
  border-radius: var(--spacing-10);
4214
4494
  border: var(--border-width-2-5) solid transparent;
4215
4495
  transition: var(--duration--fast-01) var(--standard-productive-curve);
4216
4496
 
4217
4497
  /* Button reset (used on <button> for a11y) */
4218
4498
  background: transparent;
4219
- border: none;
4220
4499
  padding: 0;
4221
4500
  margin: 0;
4222
4501
  font-family: inherit;
@@ -4317,25 +4596,6 @@ body {
4317
4596
  width: var(--spacing-80);
4318
4597
  }
4319
4598
 
4320
-
4321
- .Calendar-valueWrapper--active-dummy .Calendar-value {
4322
- border: none;
4323
- }
4324
-
4325
- .Calendar-valueWrapper--active-dummy .Calendar-value--active {
4326
- background: var(--primary-lighter);
4327
- }
4328
-
4329
- .Calendar-valueWrapper--active-dummy .Calendar-value--active:hover {
4330
- background: var(--primary-light);
4331
- color: var(--inverse);
4332
- }
4333
-
4334
- .Calendar-valueWrapper--active-dummy .Calendar-value--active:active {
4335
- background: var(--primary-dark);
4336
- color: var(--white);
4337
- }
4338
-
4339
4599
  .Calendar-valueWrapper--active-dummy .Calendar-value--startError,
4340
4600
  .Calendar-valueWrapper--active-dummy .Calendar-value--endError {
4341
4601
  background: var(--alert-lightest);
@@ -4347,6 +4607,10 @@ body {
4347
4607
  border-color: transparent;
4348
4608
  }
4349
4609
 
4610
+ .Calendar-valueWrapper--disabled {
4611
+ opacity: var(--opacity-10);
4612
+ }
4613
+
4350
4614
  .Calendar-value--disabled {
4351
4615
  pointer-events: none;
4352
4616
  }
@@ -4415,6 +4679,55 @@ body {
4415
4679
  border-color: transparent;
4416
4680
  }
4417
4681
 
4682
+ @media (forced-colors: active) {
4683
+ .Calendar-valueWrapper--start,
4684
+ .Calendar-valueWrapper--end,
4685
+ .Calendar-valueWrapper--hoverDate,
4686
+ .Calendar-valueWrapper--hoverEndDate,
4687
+ .Calendar-valueWrapper--inStartRange,
4688
+ .Calendar-valueWrapper--inEndRange,
4689
+ .Calendar-valueWrapper--inRange,
4690
+ .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
4691
+ background: Highlight;
4692
+ }
4693
+
4694
+ .Calendar-valueWrapper--startError,
4695
+ .Calendar-valueWrapper--endError,
4696
+ .Calendar-valueWrapper--inRangeError {
4697
+ background: Mark;
4698
+ }
4699
+
4700
+ /* Active/selected date cell */
4701
+ .Calendar-value--active,
4702
+ .Calendar-value--active:hover,
4703
+ .Calendar-value--active:active {
4704
+ forced-color-adjust: none;
4705
+ background: Highlight;
4706
+ color: HighlightText;
4707
+ border-color: transparent;
4708
+ }
4709
+
4710
+ /* Today's date marker ring */
4711
+ .Calendar-value--currDateMonthYear {
4712
+ border-color: ButtonText;
4713
+ }
4714
+
4715
+ /* Event dot: use system color so it stays visible */
4716
+ .Calendar-eventsIndicator {
4717
+ background-color: ButtonText;
4718
+ }
4719
+
4720
+ .Calendar-eventsIndicator--active {
4721
+ background-color: HighlightText;
4722
+ }
4723
+
4724
+ /* Disabled dates use opacity — switch to GrayText */
4725
+ .Calendar-valueWrapper--disabled {
4726
+ opacity: 1;
4727
+ color: GrayText;
4728
+ }
4729
+ }
4730
+
4418
4731
  /* badge */
4419
4732
 
4420
4733
  .Card {
@@ -4470,6 +4783,20 @@ body {
4470
4783
  border-top: var(--border-width-2-5) solid var(--secondary-light);
4471
4784
  }
4472
4785
 
4786
+ @media (forced-colors: active) {
4787
+ /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */
4788
+ .Card--default,
4789
+ .Card--light,
4790
+ .Card--medium,
4791
+ .Card--dark,
4792
+ .Card--shadow10,
4793
+ .Card--shadow20,
4794
+ .Card--shadow30 {
4795
+ border: var(--border-width-2-5) solid ButtonText;
4796
+ box-shadow: none;
4797
+ }
4798
+ }
4799
+
4473
4800
  .CardSubdued {
4474
4801
  background: var(--card-subdued-bg);
4475
4802
  padding: var(--spacing-40);
@@ -4898,8 +5225,7 @@ body {
4898
5225
  background: var(--secondary);
4899
5226
  }
4900
5227
 
4901
- .Chip--input:focus-visible,
4902
- .Chip--input:focus {
5228
+ .Chip--input:focus-visible {
4903
5229
  outline: var(--border-width-05) solid var(--primary-focus);
4904
5230
  outline-offset: var(--spacing-05);
4905
5231
  }
@@ -4916,7 +5242,8 @@ body {
4916
5242
  }
4917
5243
 
4918
5244
  .Chip-icon--right:focus-visible {
4919
- outline: var(--spacing-05) solid var(--primary-focus);
5245
+ outline: var(--border-width-05) solid var(--primary-focus);
5246
+ outline-offset: var(--spacing-05);
4920
5247
  }
4921
5248
 
4922
5249
  .Chip-icon--right:hover {
@@ -4936,7 +5263,8 @@ body {
4936
5263
  }
4937
5264
 
4938
5265
  .Chip-icon--selected:focus-visible {
4939
- outline: var(--spacing-05) solid var(--primary-focus);
5266
+ outline: var(--border-width-05) solid var(--primary-focus);
5267
+ outline-offset: var(--spacing-05);
4940
5268
  }
4941
5269
 
4942
5270
  .Chip-icon--selected:hover {
@@ -4958,6 +5286,40 @@ body {
4958
5286
  padding-right: 0;
4959
5287
  }
4960
5288
 
5289
+ @media (forced-colors: active) {
5290
+ /* Action chips: border:0 makes them invisible — add a real border */
5291
+ .Chip--action {
5292
+ border: var(--border-width-2-5) solid ButtonText;
5293
+ }
5294
+
5295
+ /* Input chips: border:0 makes them invisible — add a real border */
5296
+ .Chip--input {
5297
+ border: var(--border-width-2-5) solid ButtonText;
5298
+ }
5299
+
5300
+ /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
5301
+ .Chip-selection--selected,
5302
+ .Chip-selection--selected:hover,
5303
+ .Chip-selection--selected:active,
5304
+ .Chip-selection--selectedDisabled {
5305
+ border-color: Highlight;
5306
+ box-shadow: none;
5307
+ }
5308
+
5309
+ .Chip-action--disabled,
5310
+ .Chip-input--disabled {
5311
+ opacity: 1;
5312
+ color: GrayText;
5313
+ border: var(--border-width-2-5) solid GrayText;
5314
+ }
5315
+
5316
+ .Chip-selection--disabled {
5317
+ opacity: 1;
5318
+ color: GrayText;
5319
+ border-color: GrayText;
5320
+ }
5321
+ }
5322
+
4961
5323
  .ChipGroup {
4962
5324
  display: inline-flex;
4963
5325
  }
@@ -5176,6 +5538,10 @@ body {
5176
5538
 
5177
5539
  .Dropdown-input {
5178
5540
  min-width: unset !important;
5541
+ background: transparent;
5542
+ border-bottom-left-radius: 0;
5543
+ border-bottom-right-radius: 0;
5544
+ height: 36px;
5179
5545
  }
5180
5546
 
5181
5547
  .Dropdown-input,
@@ -5185,6 +5551,10 @@ body {
5185
5551
  outline: none !important;
5186
5552
  }
5187
5553
 
5554
+ .Dropdown-input:hover {
5555
+ background-color: var(--secondary-lightest);
5556
+ }
5557
+
5188
5558
  .Dropdown-section {
5189
5559
  display: flex;
5190
5560
  justify-content: space-between;
@@ -5218,6 +5588,8 @@ body {
5218
5588
  .Option {
5219
5589
  display: flex;
5220
5590
  transition: var(--duration--fast-01) var(--standard-productive-curve);
5591
+ color: var(--text);
5592
+ cursor: pointer;
5221
5593
  }
5222
5594
 
5223
5595
  .Option,
@@ -5243,25 +5615,28 @@ body {
5243
5615
  padding-bottom: var(--spacing-15);
5244
5616
  }
5245
5617
 
5246
- .Option--active,
5247
- .Option-checkbox--active {
5618
+ .Option--interactive:hover,
5619
+ .Option-checkbox--interactive:hover {
5248
5620
  background-color: var(--secondary-lightest);
5249
- cursor: pointer;
5250
5621
  }
5251
5622
 
5252
- .Option--active:hover,
5253
- .Option-checkbox--active:hover {
5254
- background-color: var(--secondary-lighter);
5623
+ .Option--interactive:hover:active,
5624
+ .Option-checkbox--interactive:hover:active {
5625
+ background-color: var(--secondary-light);
5255
5626
  }
5256
5627
 
5257
- .Option--active:active,
5258
- .Option-checkbox--active:active {
5259
- background-color: var(--secondary-light);
5260
- cursor: pointer;
5628
+ .Option:focus,
5629
+ .Option:focus-visible,
5630
+ .Option-checkbox:focus,
5631
+ .Option-checkbox:focus-visible {
5632
+ outline: var(--border-width-05) solid var(--primary-focus);
5633
+ outline-offset: calc(-1 * var(--border-width-05));
5261
5634
  }
5262
5635
 
5263
- .Option--active {
5264
- transition: var(--standard-productive-curve);
5636
+ .OptionWrapper:focus,
5637
+ .OptionWrapper:focus-visible {
5638
+ outline: var(--border-width-05) solid var(--primary-focus);
5639
+ outline-offset: calc(-1 * var(--border-width-05));
5265
5640
  }
5266
5641
 
5267
5642
  .Option-loading {
@@ -5272,11 +5647,17 @@ body {
5272
5647
  background-color: var(--primary-lightest);
5273
5648
  }
5274
5649
 
5275
- .Option--selected:hover {
5650
+ .Option--selected:focus,
5651
+ .Option--selected:focus-visible {
5652
+ outline: var(--border-width-05) solid var(--primary-focus);
5653
+ outline-offset: calc(-1 * var(--border-width-05));
5654
+ }
5655
+
5656
+ .Option--selected.Option--interactive:hover {
5276
5657
  background-color: var(--primary-lighter);
5277
5658
  }
5278
5659
 
5279
- .Option--selected:active {
5660
+ .Option--selected.Option--interactive:active {
5280
5661
  background-color: var(--primary-lighter);
5281
5662
  color: var(--primary-darker);
5282
5663
  }
@@ -5296,6 +5677,16 @@ body {
5296
5677
  overflow: hidden;
5297
5678
  display: flex;
5298
5679
  flex-direction: column;
5680
+ flex: 1;
5681
+ min-width: 0;
5682
+ }
5683
+
5684
+ .Option-checkIcon {
5685
+ display: flex;
5686
+ flex-shrink: 0;
5687
+ align-self: center;
5688
+ margin-left: auto;
5689
+ padding-left: var(--spacing-20);
5299
5690
  }
5300
5691
 
5301
5692
  .OptionCheckbox .Checkbox-label {
@@ -5332,6 +5723,13 @@ body {
5332
5723
  line-height: var(--font-height);
5333
5724
  }
5334
5725
 
5726
+ @media (forced-colors: active) {
5727
+ .Dropdown-input:focus-within {
5728
+ outline: var(--border-width-05) solid Highlight !important;
5729
+ outline-offset: var(--spacing-05);
5730
+ }
5731
+ }
5732
+
5335
5733
  .Grid {
5336
5734
  display: flex;
5337
5735
  flex-direction: column;
@@ -5354,6 +5752,7 @@ body {
5354
5752
  z-index: 5;
5355
5753
  overflow-x: hidden;
5356
5754
  -ms-overflow-style: none;
5755
+ scrollbar-width: none;
5357
5756
  border-right: var(--border-width-7-5) solid var(--secondary);
5358
5757
  }
5359
5758
 
@@ -5405,6 +5804,8 @@ body {
5405
5804
  display: flex;
5406
5805
  flex: 0 0 auto;
5407
5806
  overflow-x: auto;
5807
+ -ms-overflow-style: none;
5808
+ scrollbar-width: none;
5408
5809
  border-bottom: var(--border);
5409
5810
  }
5410
5811
 
@@ -5436,7 +5837,11 @@ body {
5436
5837
  flex-direction: column;
5437
5838
  flex-grow: 1;
5438
5839
  overflow-x: auto;
5439
- overflow-y: overlay;
5840
+ overflow-y: auto;
5841
+ }
5842
+
5843
+ .Grid-rowGroup {
5844
+ display: contents;
5440
5845
  }
5441
5846
 
5442
5847
  .Grid-rowWrapper {
@@ -5572,12 +5977,20 @@ body {
5572
5977
  overflow: hidden;
5573
5978
  }
5574
5979
 
5980
+ .Grid-cell--head .Grid-cellContent:focus-visible {
5981
+ box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);
5982
+ border-radius: var(--border-radius-10);
5983
+ }
5984
+
5575
5985
  .Grid-cellResize {
5576
5986
  position: absolute;
5577
5987
  right: 0;
5578
5988
  width: var(--spacing-10);
5579
5989
  cursor: ew-resize;
5580
5990
  height: 100%;
5991
+ padding-right: var(--spacing-60);
5992
+ margin-right: calc(-1 * var(--spacing-60));
5993
+ box-sizing: content-box;
5581
5994
  }
5582
5995
 
5583
5996
  .Grid-cellSortIcon {
@@ -5594,6 +6007,11 @@ body {
5594
6007
  background: var(--primary);
5595
6008
  }
5596
6009
 
6010
+ .Grid-cellResize:focus-visible {
6011
+ background: var(--primary);
6012
+ outline: none;
6013
+ }
6014
+
5597
6015
  .Grid-reorderHighlighter {
5598
6016
  position: absolute;
5599
6017
  height: 100%;
@@ -5813,9 +6231,10 @@ body {
5813
6231
  background: var(--secondary-lighter);
5814
6232
  }
5815
6233
 
5816
- .Grid--resource .Grid-row--body:focus {
6234
+ .Grid--resource .Grid-row--body:focus-visible {
5817
6235
  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
5818
- outline: none;
6236
+ outline: var(--border-width-05) solid var(--primary-focus);
6237
+ outline-offset: calc(-1 * var(--spacing-05));
5819
6238
  }
5820
6239
 
5821
6240
  /* Selected States */
@@ -5832,8 +6251,9 @@ body {
5832
6251
  background: var(--primary-lighter) !important;
5833
6252
  }
5834
6253
 
5835
- .Grid-row--selected:focus {
5836
- outline: none;
6254
+ .Grid-row--selected:focus-visible {
6255
+ outline: var(--border-width-05) solid var(--primary-focus);
6256
+ outline-offset: calc(-1 * var(--spacing-05));
5837
6257
  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
5838
6258
  }
5839
6259
 
@@ -5854,9 +6274,8 @@ body {
5854
6274
  background: var(--secondary-lighter);
5855
6275
  }
5856
6276
 
5857
- .Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
6277
+ .Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
5858
6278
  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
5859
- outline: none;
5860
6279
  }
5861
6280
 
5862
6281
  /* Pinned Columns Selected State */
@@ -5873,8 +6292,7 @@ body {
5873
6292
  background: var(--primary-lighter) !important;
5874
6293
  }
5875
6294
 
5876
- .Grid-row--selected:focus .Grid-cellWrapper--pinned {
5877
- outline: none;
6295
+ .Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
5878
6296
  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
5879
6297
  }
5880
6298
 
@@ -5885,7 +6303,7 @@ body {
5885
6303
 
5886
6304
  .Grid-row--head .Grid-cellGroup--pinned-left {
5887
6305
  border-style: inset;
5888
- border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6306
+ border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5889
6307
  border-right-width: 4px;
5890
6308
  -o-border-image: linear-gradient(
5891
6309
  to right,
@@ -5907,7 +6325,7 @@ body {
5907
6325
 
5908
6326
  .Grid-row--head .Grid-cellGroup--pinned-right {
5909
6327
  border-style: inset;
5910
- border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6328
+ border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5911
6329
  border-left-width: 4px;
5912
6330
  -o-border-image: linear-gradient(
5913
6331
  to left,
@@ -5931,7 +6349,7 @@ body {
5931
6349
 
5932
6350
  .Grid-cellWrapper--pinned-left {
5933
6351
  border-style: inset;
5934
- border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6352
+ border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5935
6353
  border-right-width: 4px;
5936
6354
  -o-border-image: linear-gradient(
5937
6355
  to right,
@@ -5953,7 +6371,7 @@ body {
5953
6371
 
5954
6372
  .Grid-cellWrapper--pinned-right {
5955
6373
  border-style: inset;
5956
- border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
6374
+ border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
5957
6375
  border-left-width: 4px;
5958
6376
  -o-border-image: linear-gradient(
5959
6377
  to left,
@@ -6334,6 +6752,11 @@ body {
6334
6752
  }
6335
6753
  }
6336
6754
 
6755
+ .TimePicker-trigger {
6756
+ width: calc(var(--spacing-40) * 20);
6757
+ min-width: calc(var(--spacing-40) * 16);
6758
+ }
6759
+
6337
6760
  .DropdownButton {
6338
6761
  width: 100%;
6339
6762
  justify-content: space-between;
@@ -6382,7 +6805,7 @@ body {
6382
6805
  }
6383
6806
 
6384
6807
  .DropdownButton--placeholder {
6385
- color: var(--text-subtle);
6808
+ color: var(--text);
6386
6809
  }
6387
6810
 
6388
6811
  .DropdownButton:hover {
@@ -6390,9 +6813,11 @@ body {
6390
6813
  color: var(--text);
6391
6814
  }
6392
6815
 
6393
- .DropdownButton:focus {
6816
+ .DropdownButton:focus-visible {
6394
6817
  background-color: var(--secondary-light);
6395
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
6818
+ box-shadow: none;
6819
+ outline: var(--border-width-05) solid var(--primary-focus);
6820
+ outline-offset: var(--spacing-05);
6396
6821
  }
6397
6822
 
6398
6823
  .DropdownButton:active,
@@ -6834,7 +7259,6 @@ body {
6834
7259
 
6835
7260
  .Input--error:focus-within {
6836
7261
  border-color: var(--alert);
6837
- box-shadow: var(--shadow-spread) var(--alert-shadow);
6838
7262
  }
6839
7263
 
6840
7264
  .Input--error:focus-within .Input-icon--left {
@@ -6987,25 +7411,21 @@ body {
6987
7411
  align-items: center;
6988
7412
  box-sizing: border-box;
6989
7413
  border-radius: var(--border-radius-10);
6990
- border: var(--border);
7414
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
6991
7415
  background: var(--white);
6992
- overflow: hidden;
6993
7416
  transition: var(--duration--fast-01) var(--standard-productive-curve);
6994
7417
  }
6995
7418
 
6996
7419
  .MetricInput--regular {
6997
7420
  height: var(--spacing-80);
6998
- padding-left: var(--spacing-30);
6999
7421
  }
7000
7422
 
7001
7423
  .MetricInput--large {
7002
7424
  height: 40px;
7003
- padding-left: var(--spacing-40);
7004
7425
  }
7005
7426
 
7006
7427
  .MetricInput--small {
7007
7428
  height: var(--spacing-60);
7008
- padding-left: var(--spacing-20);
7009
7429
  }
7010
7430
 
7011
7431
  .MetricInput:hover {
@@ -7015,9 +7435,12 @@ body {
7015
7435
 
7016
7436
  .MetricInput:focus-within {
7017
7437
  background: var(--white);
7018
- border-color: var(--secondary);
7438
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7439
+ }
7440
+
7441
+ .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7019
7442
  outline: var(--border-width-05) solid var(--primary-focus);
7020
- outline-offset: var(--spacing-2-5);
7443
+ outline-offset: var(--spacing-05);
7021
7444
  }
7022
7445
 
7023
7446
  .MetricInput:focus-within .MetricInput-icon {
@@ -7026,13 +7449,13 @@ body {
7026
7449
 
7027
7450
  .MetricInput--disabled {
7028
7451
  background: var(--secondary-lightest);
7029
- border-color: var(--secondary-light);
7452
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
7030
7453
  pointer-events: none;
7031
7454
  }
7032
7455
 
7033
7456
  .MetricInput--readOnly {
7034
7457
  background: var(--secondary-lightest);
7035
- border-color: var(--secondary);
7458
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7036
7459
  pointer-events: none;
7037
7460
  }
7038
7461
 
@@ -7043,19 +7466,46 @@ body {
7043
7466
  .MetricInput--error,
7044
7467
  .MetricInput--error:hover {
7045
7468
  background: var(--white);
7046
- border-color: var(--alert);
7469
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
7047
7470
  }
7048
7471
 
7049
7472
  .MetricInput--error:focus-within {
7050
- border-color: var(--secondary);
7473
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
7474
+ }
7475
+
7476
+ .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7051
7477
  outline: var(--border-width-05) solid var(--alert);
7052
- outline-offset: var(--spacing-2-5);
7478
+ outline-offset: var(--spacing-05);
7053
7479
  }
7054
7480
 
7055
7481
  .MetricInput--error:focus-within .MetricInput-icon {
7056
7482
  color: var(--alert);
7057
7483
  }
7058
7484
 
7485
+ /* Content wrapper — holds icon, prefix, input, suffix */
7486
+ .MetricInput-content {
7487
+ flex: 1;
7488
+ display: flex;
7489
+ align-items: center;
7490
+ min-width: 0;
7491
+ overflow: hidden;
7492
+ }
7493
+
7494
+ .MetricInput-content--regular {
7495
+ padding: var(--spacing-15) var(--spacing-15);
7496
+ gap: var(--spacing-05);
7497
+ }
7498
+
7499
+ .MetricInput-content--large {
7500
+ padding: var(--spacing-20) var(--spacing-15);
7501
+ gap: var(--spacing-15);
7502
+ }
7503
+
7504
+ .MetricInput-content--small {
7505
+ padding: var(--spacing-10) var(--spacing-15);
7506
+ gap: var(--spacing-05);
7507
+ }
7508
+
7059
7509
  .MetricInput-input {
7060
7510
  display: flex;
7061
7511
  width: 100%;
@@ -7127,23 +7577,14 @@ body {
7127
7577
  margin: 0;
7128
7578
  }
7129
7579
 
7130
- .MetricInput-arrowIcons {
7131
- border-left: var(--border);
7132
- box-sizing: border-box;
7133
- border-radius: 0;
7134
- background: transparent;
7135
- display: flex;
7136
- flex-direction: column;
7137
- height: 100%;
7138
- flex-shrink: 0;
7139
- overflow: hidden;
7140
- }
7141
-
7580
+ /* Arrow buttons (decrement on left, increment on right) */
7142
7581
  .MetricInput-arrowButton {
7143
- height: 50%;
7144
- border: none;
7582
+ flex-shrink: 0;
7583
+ align-self: stretch;
7584
+ width: var(--spacing-60);
7145
7585
  background: var(--secondary-light);
7146
7586
  color: var(--inverse);
7587
+ border: none;
7147
7588
  cursor: pointer;
7148
7589
  display: flex;
7149
7590
  align-items: center;
@@ -7153,7 +7594,16 @@ body {
7153
7594
  -webkit-user-select: none;
7154
7595
  -moz-user-select: none;
7155
7596
  user-select: none;
7156
- overflow: hidden;
7597
+ }
7598
+
7599
+ .MetricInput-arrowButton--left {
7600
+ border-right: var(--border);
7601
+ border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
7602
+ }
7603
+
7604
+ .MetricInput-arrowButton--right {
7605
+ border-left: var(--border);
7606
+ border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
7157
7607
  }
7158
7608
 
7159
7609
  .MetricInput-arrowButton:hover {
@@ -7166,16 +7616,44 @@ body {
7166
7616
 
7167
7617
  .MetricInput-arrowButton:focus {
7168
7618
  outline: 0;
7169
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
7170
7619
  }
7171
7620
 
7172
- .MetricInput-arrowIcons--small,
7173
- .MetricInput-arrowIcons--regular {
7174
- width: 20px;
7621
+ .MetricInput-arrowButton:focus-visible {
7622
+ outline: var(--border-width-05) solid var(--primary-focus);
7623
+ outline-offset: var(--spacing-05);
7175
7624
  }
7176
7625
 
7177
- .MetricInput-arrowIcons--large {
7178
- width: var(--spacing-60);
7626
+ @media (forced-colors: active) {
7627
+ /* box-shadow is stripped — restore a real border for the wrapper boundary */
7628
+ .MetricInput {
7629
+ border: var(--border-width-2-5) solid ButtonText;
7630
+ box-shadow: none;
7631
+ }
7632
+
7633
+ .MetricInput--disabled {
7634
+ border-color: GrayText;
7635
+ }
7636
+
7637
+ /* Wrapper focus rings */
7638
+ .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7639
+ outline: var(--border-width-05) solid Highlight;
7640
+ outline-offset: var(--spacing-05);
7641
+ }
7642
+
7643
+ .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
7644
+ outline: var(--border-width-05) solid Highlight;
7645
+ outline-offset: var(--spacing-05);
7646
+ }
7647
+
7648
+ /* Arrow button states */
7649
+ .MetricInput-arrowButton:disabled {
7650
+ color: GrayText;
7651
+ }
7652
+
7653
+ .MetricInput-arrowButton:focus-visible {
7654
+ outline: var(--border-width-05) solid Highlight;
7655
+ outline-offset: var(--spacing-05);
7656
+ }
7179
7657
  }
7180
7658
 
7181
7659
  /* pagination */
@@ -7271,6 +7749,18 @@ body {
7271
7749
  color: var(--text-disabled);
7272
7750
  }
7273
7751
 
7752
+ .Label-srOnly {
7753
+ position: absolute;
7754
+ width: var(--spacing-2-5);
7755
+ height: var(--spacing-2-5);
7756
+ padding: 0;
7757
+ margin: calc(-1 * var(--spacing-2-5));
7758
+ overflow: hidden;
7759
+ clip: rect(0, 0, 0, 0);
7760
+ white-space: nowrap;
7761
+ border: 0;
7762
+ }
7763
+
7274
7764
  .Label-requiredIndicator {
7275
7765
  height: var(--spacing-15);
7276
7766
  width: var(--spacing-15);
@@ -7319,23 +7809,88 @@ body {
7319
7809
  width: 100%;
7320
7810
  }
7321
7811
 
7812
+ .EditableDropdown:focus-visible {
7813
+ outline: none;
7814
+ }
7815
+
7322
7816
  .EditableDropdown-default {
7323
7817
  display: flex;
7324
7818
  align-items: center;
7819
+ justify-content: space-between;
7325
7820
  box-sizing: border-box;
7326
7821
  height: var(--spacing-80);
7327
7822
  padding-left: var(--spacing-30);
7823
+ padding-right: var(--spacing-20);
7824
+ border-radius: var(--border-radius-10);
7825
+ transition: var(--duration--fast-01) var(--standard-productive-curve);
7826
+ cursor: pointer;
7827
+ border: var(--border-width-2-5) solid transparent;
7828
+ }
7829
+
7830
+ .EditableDropdown-wrapper {
7831
+ width: 100%;
7832
+ display: flex;
7833
+ flex-direction: row;
7834
+ overflow: hidden;
7835
+ align-items: center;
7836
+ }
7837
+
7838
+ .EditableDropdown-text {
7839
+ text-align: left;
7840
+ white-space: nowrap;
7841
+ overflow: hidden;
7842
+ text-overflow: ellipsis;
7843
+ color: var(--text);
7844
+ font-size: var(--font-size);
7845
+ line-height: var(--font-height);
7846
+ font-weight: var(--font-weight-normal);
7847
+ }
7848
+
7849
+ .EditableDropdown-text--subtle {
7850
+ color: var(--text-subtle);
7851
+ }
7852
+
7853
+ .EditableDropdown-icon {
7854
+ visibility: hidden;
7855
+ }
7856
+
7857
+ .EditableDropdown-default:hover .EditableDropdown-icon,
7858
+ .EditableDropdown:focus-visible .EditableDropdown-icon {
7859
+ visibility: visible;
7860
+ }
7861
+
7862
+ .EditableDropdown-default:hover {
7863
+ background: var(--secondary);
7864
+ }
7865
+
7866
+ .EditableDropdown:focus-visible .EditableDropdown-default {
7867
+ background: var(--secondary-light);
7868
+ outline: var(--border-width-05) solid var(--primary-focus);
7869
+ outline-offset: var(--spacing-05);
7870
+ border-radius: var(--border-radius-10);
7328
7871
  }
7329
7872
 
7330
7873
  .Link {
7331
7874
  text-decoration: none;
7332
7875
  font-weight: var(--font-weight-medium);
7333
- transition: var(--duration--fast-01) var(--standard-productive-curve);
7876
+ transition: color var(--duration--fast-01) var(--standard-productive-curve),
7877
+ border-color var(--duration--fast-01) var(--standard-productive-curve);
7334
7878
  box-sizing: border-box;
7879
+ }
7880
+
7881
+ @media (prefers-reduced-motion: reduce) {
7882
+ .Link {
7883
+ transition: none;
7884
+ }
7885
+ }
7886
+
7887
+ .Link-text {
7888
+ display: inline-flex;
7889
+ vertical-align: middle;
7335
7890
  border-bottom: var(--border-width-2-5) solid currentColor;
7336
7891
  }
7337
7892
 
7338
- .Link:focus {
7893
+ .Link:focus-visible {
7339
7894
  outline: var(--border-width-05) solid var(--primary-focus);
7340
7895
  outline-offset: var(--spacing-05);
7341
7896
  border-radius: var(--border-radius-10);
@@ -7361,24 +7916,42 @@ body {
7361
7916
  border-bottom-color: transparent;
7362
7917
  }
7363
7918
 
7919
+ .Link-text--subtle {
7920
+ border-bottom-color: transparent;
7921
+ }
7922
+
7364
7923
  .Link--default:hover {
7365
- border-bottom: var(--border-width-2-5) solid var(--primary-dark);
7366
7924
  color: var(--primary-dark);
7367
7925
  }
7368
7926
 
7369
7927
  .Link--subtle:hover {
7370
- border-bottom: var(--border-width-2-5) solid var(--inverse-light);
7371
7928
  color: var(--inverse-light);
7372
7929
  }
7373
7930
 
7931
+ .Link--subtle:hover .Link-text--subtle {
7932
+ border-bottom-color: currentColor;
7933
+ }
7934
+
7374
7935
  .Link--default:active {
7375
7936
  color: var(--primary-darker);
7376
- border-bottom: var(--border-width-2-5) solid currentColor;
7377
7937
  }
7378
7938
 
7379
7939
  .Link--subtle:active {
7380
7940
  color: var(--inverse);
7381
- border-bottom: var(--border-width-2-5) solid transparent;
7941
+ }
7942
+
7943
+ .Link--subtle:active .Link-text--subtle {
7944
+ border-bottom-color: transparent;
7945
+ }
7946
+
7947
+ .Link--button-reset {
7948
+ background: none;
7949
+ border-top: none;
7950
+ border-left: none;
7951
+ border-right: none;
7952
+ padding: 0;
7953
+ cursor: pointer;
7954
+ font-family: inherit;
7382
7955
  }
7383
7956
 
7384
7957
  .Link--default-disabled {
@@ -7391,6 +7964,39 @@ body {
7391
7964
  pointer-events: none;
7392
7965
  }
7393
7966
 
7967
+ .Link-infoIconWrapper {
7968
+ display: inline-flex;
7969
+ vertical-align: middle;
7970
+ transform: translateY(calc(-1 * var(--spacing-15)));
7971
+ margin-left: var(--spacing-2-5);
7972
+ width: var(--spacing-30);
7973
+ height: var(--spacing-30);
7974
+ box-sizing: border-box;
7975
+ border-radius: var(--border-radius-full);
7976
+ align-items: center;
7977
+ justify-content: center;
7978
+ background: transparent;
7979
+ border: none;
7980
+ }
7981
+
7982
+ .Link-infoIcon {
7983
+ color: var(--text-subtle);
7984
+ pointer-events: none;
7985
+ }
7986
+
7987
+ .Link-infoIcon--default {
7988
+ color: var(--primary);
7989
+ }
7990
+
7991
+ .Link-infoIcon--subtle {
7992
+ color: var(--inverse-light);
7993
+ }
7994
+
7995
+ .Link-tooltip--disabled {
7996
+ pointer-events: auto;
7997
+ cursor: not-allowed;
7998
+ }
7999
+
7394
8000
  .Message {
7395
8001
  display: flex;
7396
8002
  flex-direction: row;
@@ -7408,12 +8014,12 @@ body {
7408
8014
 
7409
8015
  .Message--alert {
7410
8016
  border-color: var(--alert);
7411
- background-color: rgba(214, 36, 0, 0.04);
8017
+ background-color: rgba(189, 28, 0, 0.04);
7412
8018
  }
7413
8019
 
7414
8020
  .Message--success {
7415
8021
  border-color: var(--success);
7416
- background-color: rgba(0, 122, 14, 0.04);
8022
+ background-color: rgba(0, 128, 0, 0.04);
7417
8023
  }
7418
8024
 
7419
8025
  .Message--info {
@@ -7423,7 +8029,7 @@ body {
7423
8029
 
7424
8030
  .Message--warning {
7425
8031
  border-color: var(--accent1);
7426
- background-color: rgba(229, 111, 0, 0.04);
8032
+ background-color: rgba(189, 91, 0, 0.04);
7427
8033
  }
7428
8034
 
7429
8035
  .Message-icon--regular {
@@ -8086,6 +8692,27 @@ body {
8086
8692
  box-shadow: none;
8087
8693
  }
8088
8694
 
8695
+ @media (forced-colors: active) {
8696
+ /* Handle elevation comes from box-shadow only — add a real border so it stays visible */
8697
+ .Slider-handle {
8698
+ border: var(--border-width-05) solid ButtonText;
8699
+ box-shadow: none;
8700
+ }
8701
+
8702
+ /* Restore focus ring on the handle (outline:none is set unconditionally) */
8703
+ .Slider-handle:focus,
8704
+ .Slider-handle:focus-visible {
8705
+ outline: var(--border-width-05) solid Highlight;
8706
+ outline-offset: var(--spacing-05);
8707
+ }
8708
+
8709
+ /* Filled portion of the track */
8710
+ .Slider-progress--inRange {
8711
+ forced-color-adjust: none;
8712
+ background: Highlight;
8713
+ }
8714
+ }
8715
+
8089
8716
  .Tooltip {
8090
8717
  max-width: var(--spacing-640);
8091
8718
  padding: var(--spacing-10) var(--spacing-20);
@@ -8103,6 +8730,7 @@ body {
8103
8730
  }
8104
8731
 
8105
8732
  .Tooltip-text {
8733
+ white-space: pre-wrap;
8106
8734
  word-break: break-word;
8107
8735
  -webkit-hyphens: auto;
8108
8736
  hyphens: auto;
@@ -8777,6 +9405,45 @@ body {
8777
9405
  border-color: transparent;
8778
9406
  }
8779
9407
 
9408
+ @media (forced-colors: active) {
9409
+ .Switch-wrapper {
9410
+ outline: var(--border-width-2-5) solid ButtonText;
9411
+ outline-offset: calc(-1 * var(--border-width-2-5));
9412
+ box-shadow: none;
9413
+ }
9414
+
9415
+ /* Checked (enabled) track: use Highlight to distinguish on-state */
9416
+ .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled) {
9417
+ background-color: Highlight;
9418
+ }
9419
+
9420
+ .Switch-wrapper--checkedDisabled {
9421
+ background-color: ButtonFace;
9422
+ outline-color: GrayText;
9423
+ }
9424
+
9425
+ /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */
9426
+ .Switch-wrapper:before {
9427
+ box-shadow: none;
9428
+ border-color: ButtonText;
9429
+ }
9430
+
9431
+ /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */
9432
+ .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled):before {
9433
+ border-color: HighlightText;
9434
+ }
9435
+
9436
+ /* Checked-disabled thumb: use GrayText so it reads as disabled */
9437
+ .Switch-wrapper--checkedDisabled:before {
9438
+ border-color: GrayText;
9439
+ }
9440
+
9441
+ /* Unchecked-disabled thumb */
9442
+ .Switch-wrapper--disabled:before {
9443
+ border-color: GrayText;
9444
+ }
9445
+ }
9446
+
8780
9447
  /* Textarea */
8781
9448
 
8782
9449
  .Textarea {
@@ -8903,6 +9570,8 @@ body {
8903
9570
  padding-left: var(--spacing-10);
8904
9571
  height: var(--spacing-60);
8905
9572
  box-sizing: initial;
9573
+ background: transparent;
9574
+ border: none;
8906
9575
  }
8907
9576
 
8908
9577
  .Toast-icon--info,
@@ -8916,6 +9585,13 @@ body {
8916
9585
  color: var(--warning-darker);
8917
9586
  }
8918
9587
 
9588
+ .Toast-closeButton {
9589
+ background: transparent;
9590
+ border: none;
9591
+ color: inherit;
9592
+ padding: 0;
9593
+ }
9594
+
8919
9595
  .Toast-close-icon:focus,
8920
9596
  .Toast-close-icon:focus-visible {
8921
9597
  outline: none;
@@ -9036,6 +9712,16 @@ body {
9036
9712
  color: var(--text-white);
9037
9713
  }
9038
9714
 
9715
+ @media (forced-colors: active) {
9716
+ /* Close icon focus ring is conveyed via box-shadow only — replace with outline */
9717
+ .Toast-close-icon:focus,
9718
+ .Toast-close-icon:focus-visible {
9719
+ outline: var(--border-width-05) solid Highlight;
9720
+ outline-offset: var(--spacing-05);
9721
+ box-shadow: none;
9722
+ }
9723
+ }
9724
+
9039
9725
  .Popover {
9040
9726
  border-radius: var(--border-radius-10);
9041
9727
  position: absolute;
@@ -9068,6 +9754,7 @@ body {
9068
9754
 
9069
9755
  .ChipInput {
9070
9756
  display: flex;
9757
+ box-sizing: border-box;
9071
9758
  border-radius: var(--border-radius-10);
9072
9759
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
9073
9760
  background: var(--white);
@@ -9077,23 +9764,19 @@ body {
9077
9764
 
9078
9765
  .ChipInput--regular {
9079
9766
  padding-left: 10px;
9080
- padding-right: 10px;
9767
+ padding-right: var(--spacing-15);
9081
9768
  }
9082
9769
 
9083
9770
  .ChipInput--small {
9771
+ align-items: center;
9772
+ min-height: var(--spacing-60);
9084
9773
  padding-left: var(--spacing-20);
9085
- padding-right: var(--spacing-20);
9086
- }
9087
-
9088
- .ChipInput:focus,
9089
- .ChipInput:focus-visible {
9090
- outline: var(--border-width-05) solid var(--primary-focus);
9091
- outline-offset: var(--spacing-05);
9774
+ padding-right: var(--spacing-10);
9092
9775
  }
9093
9776
 
9094
9777
  .ChipInput:hover {
9095
9778
  background: var(--secondary-lighter);
9096
- border-color: var(--secondary-dark);
9779
+ box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
9097
9780
  }
9098
9781
 
9099
9782
  .ChipInput:focus-within {
@@ -9102,12 +9785,12 @@ body {
9102
9785
 
9103
9786
  .ChipInput--disabled {
9104
9787
  background: var(--secondary-lightest);
9105
- border-color: var(--secondary-light);
9788
+ box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-light);
9106
9789
  pointer-events: none;
9107
9790
  }
9108
9791
 
9109
9792
  .ChipInput--withChips {
9110
- padding-right: var(--spacing-20);
9793
+ padding-right: 0;
9111
9794
  }
9112
9795
 
9113
9796
  .ChipInput--error {
@@ -9121,15 +9804,18 @@ body {
9121
9804
  flex-wrap: wrap;
9122
9805
  }
9123
9806
 
9124
- .ChipInput-border:focus-within {
9807
+ .ChipInput--small .ChipInput-wrapper {
9808
+ min-height: var(--spacing-60);
9809
+ }
9810
+
9811
+ .ChipInput-border--focusRing {
9125
9812
  border-radius: var(--border-radius-10);
9126
9813
  outline: var(--border-width-05) solid var(--primary-focus);
9127
9814
  outline-offset: var(--spacing-05);
9128
9815
  }
9129
9816
 
9130
- .ChipInput-border--error:focus-within {
9131
- outline: var(--border-width-05) solid var(--primary-focus);
9132
- outline-offset: var(--spacing-05);
9817
+ .ChipInput-border--error.ChipInput-border--focusRing {
9818
+ box-shadow: var(--shadow-spread) var(--alert-shadow);
9133
9819
  }
9134
9820
 
9135
9821
  .ChipInput-input {
@@ -9173,8 +9859,9 @@ body {
9173
9859
  }
9174
9860
 
9175
9861
  .ChipInput-icon--small {
9862
+ flex-shrink: 0;
9863
+ align-self: center;
9176
9864
  margin-left: var(--spacing-15);
9177
- margin-top: var(--spacing-15);
9178
9865
  height: var(--spacing-30);
9179
9866
  }
9180
9867
 
@@ -9194,7 +9881,8 @@ body {
9194
9881
 
9195
9882
  .ChipInput-icon:focus,
9196
9883
  .ChipInput-icon:focus-visible {
9197
- outline: var(--spacing-05) solid var(--secondary-shadow);
9884
+ outline: var(--border-width-05) solid var(--primary-focus);
9885
+ outline-offset: var(--spacing-05);
9198
9886
  }
9199
9887
 
9200
9888
  .VerticalNav {
@@ -9273,20 +9961,24 @@ body {
9273
9961
  background: var(--secondary-dark);
9274
9962
  }
9275
9963
 
9276
- .MenuItem:focus {
9964
+ .MenuItem:focus-visible {
9277
9965
  outline: var(--border-width-05) solid var(--primary-focus);
9278
9966
  outline-offset: var(--spacing-05);
9279
9967
  }
9280
9968
 
9281
- .MenuItem--expanded:focus {
9969
+ .MenuItem:focus:not(:focus-visible) {
9970
+ outline: none;
9971
+ }
9972
+
9973
+ .MenuItem--expanded:focus-visible {
9282
9974
  clip-path: inset(-6px -6px -6px 0);
9283
9975
  }
9284
9976
 
9285
- .MenuItem--expandedRounded:focus {
9977
+ .MenuItem--expandedRounded:focus-visible {
9286
9978
  clip-path: inset(-6px);
9287
9979
  }
9288
9980
 
9289
- .MenuItem--disabled:focus {
9981
+ .MenuItem--disabled:focus-visible {
9290
9982
  outline: none;
9291
9983
  }
9292
9984
 
@@ -9329,11 +10021,15 @@ body {
9329
10021
  color: var(--primary-darker);
9330
10022
  }
9331
10023
 
9332
- .MenuItem--active:focus {
10024
+ .MenuItem--active:focus-visible {
9333
10025
  outline: var(--border-width-05) solid var(--primary-focus);
9334
10026
  outline-offset: var(--spacing-05);
9335
10027
  }
9336
10028
 
10029
+ .MenuItem--active:focus:not(:focus-visible) {
10030
+ outline: none;
10031
+ }
10032
+
9337
10033
  .MenuItem--rounded {
9338
10034
  border-radius: var(--border-radius-40);
9339
10035
  }
@@ -9416,7 +10112,7 @@ body {
9416
10112
  .HorizontalNav-menu--active:focus {
9417
10113
  background-color: var(--primary-ultra-light);
9418
10114
  outline: var(--border-width-05) solid var(--primary-focus);
9419
- outline-offset: var(--spacing-05);
10115
+ outline-offset: var(--spacing-10);
9420
10116
  }
9421
10117
 
9422
10118
  .HorizontalNav-menu--active:hover {
@@ -9462,6 +10158,21 @@ body {
9462
10158
  opacity: var(--opacity-10);
9463
10159
  }
9464
10160
 
10161
+ @media (forced-colors: active) {
10162
+ /* Active nav item uses box-shadow as its visible ring — replace with a real border */
10163
+ .HorizontalNav-menu--active {
10164
+ border: var(--border-width-2-5) solid Highlight;
10165
+ box-shadow: none;
10166
+ }
10167
+
10168
+ .HorizontalNav-menu--active:active,
10169
+ .HorizontalNav-menu--active:focus-visible:active,
10170
+ .HorizontalNav-menu--active:focus:active {
10171
+ border-color: Highlight;
10172
+ box-shadow: none;
10173
+ }
10174
+ }
10175
+
9465
10176
  .OverlayHeader {
9466
10177
  box-sizing: border-box;
9467
10178
  margin-left: var(--spacing-60);
@@ -9592,6 +10303,22 @@ body {
9592
10303
  padding-bottom: var(--spacing-40);
9593
10304
  }
9594
10305
 
10306
+ .Modal:focus {
10307
+ outline: none;
10308
+ }
10309
+
10310
+ .Modal-header [tabindex='-1']:focus {
10311
+ outline: none;
10312
+ }
10313
+
10314
+ @media (forced-colors: active) {
10315
+ /* box-shadow is the only visual boundary; add a real border so the modal is visible */
10316
+ .Modal {
10317
+ border: var(--border-width-2-5) solid ButtonText;
10318
+ box-shadow: none;
10319
+ }
10320
+ }
10321
+
9595
10322
  @keyframes fullscreenModal-open {
9596
10323
  from {
9597
10324
  opacity: 0;
@@ -9765,6 +10492,22 @@ body {
9765
10492
  animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
9766
10493
  }
9767
10494
 
10495
+ .Sidesheet:focus {
10496
+ outline: none;
10497
+ }
10498
+
10499
+ .Sidesheet-header [tabindex='-1']:focus {
10500
+ outline: none;
10501
+ }
10502
+
10503
+ @media (forced-colors: active) {
10504
+ /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */
10505
+ .Sidesheet {
10506
+ border-left: var(--border-width-2-5) solid ButtonText;
10507
+ box-shadow: none;
10508
+ }
10509
+ }
10510
+
9768
10511
  .Collapsible-wrapper {
9769
10512
  position: relative;
9770
10513
  z-index: 600;
@@ -9955,6 +10698,10 @@ body {
9955
10698
  width: 100%;
9956
10699
  }
9957
10700
 
10701
+ .EditableInput:focus-visible {
10702
+ outline: none;
10703
+ }
10704
+
9958
10705
  .EditableInput-actions {
9959
10706
  position: absolute;
9960
10707
  display: flex;
@@ -9977,6 +10724,21 @@ body {
9977
10724
  white-space: nowrap;
9978
10725
  display: flex;
9979
10726
  align-items: center;
10727
+ border-radius: var(--border-radius-10);
10728
+ transition: var(--duration--fast-01) var(--standard-productive-curve);
10729
+ cursor: pointer;
10730
+ }
10731
+
10732
+ .EditableInput-default:hover {
10733
+ background: var(--secondary-lighter);
10734
+ border-color: var(--secondary-dark);
10735
+ }
10736
+
10737
+ .EditableInput:focus-visible .EditableInput-default {
10738
+ background: var(--white);
10739
+ outline: var(--border-width-05) solid var(--primary-focus);
10740
+ outline-offset: var(--spacing-05);
10741
+ border-color: transparent;
9980
10742
  }
9981
10743
 
9982
10744
  .EditableInput-default--regular {
@@ -10001,20 +10763,46 @@ body {
10001
10763
  width: 100%;
10002
10764
  }
10003
10765
 
10766
+ .EditableInput-errorIcon--regular {
10767
+ margin-right: var(--spacing-20);
10768
+ margin-top: var(--spacing-10);
10769
+ margin-bottom: var(--spacing-10);
10770
+ }
10771
+
10772
+ .EditableInput-errorIcon--tiny {
10773
+ margin-right: var(--spacing-10);
10774
+ margin-top: var(--spacing-05);
10775
+ margin-bottom: var(--spacing-05);
10776
+ }
10777
+
10004
10778
  .EditableChipInput {
10005
10779
  position: relative;
10006
10780
  width: 100%;
10007
10781
  }
10782
+
10783
+ .EditableChipInput:focus-visible {
10784
+ outline: none;
10785
+ }
10008
10786
  .EditableChipInput-default {
10787
+ box-sizing: border-box;
10009
10788
  display: flex;
10010
10789
  align-items: center;
10011
10790
  padding-left: var(--spacing-30);
10012
10791
  border-left: var(--border-width-2-5) solid transparent;
10013
10792
  min-height: var(--spacing-80);
10014
10793
  flex-wrap: wrap;
10794
+ border-radius: var(--border-radius-10);
10795
+ transition: var(--duration--fast-01) var(--standard-productive-curve);
10796
+ cursor: pointer;
10797
+ }
10798
+
10799
+ .EditableChipInput-default--small {
10800
+ min-height: var(--spacing-60);
10801
+ padding-left: var(--spacing-20);
10015
10802
  }
10016
10803
 
10017
10804
  .EditableChipInput-defaultWithChips {
10805
+ box-sizing: border-box;
10018
10806
  display: flex;
10019
10807
  align-items: center;
10020
10808
  padding-left: var(--spacing-20);
@@ -10023,17 +10811,50 @@ body {
10023
10811
  padding-bottom: var(--spacing-2-5);
10024
10812
  max-width: calc(100% - 28px);
10025
10813
  flex-wrap: wrap;
10814
+ border-radius: var(--border-radius-10);
10815
+ transition: var(--duration--fast-01) var(--standard-productive-curve);
10816
+ cursor: pointer;
10817
+ }
10818
+
10819
+ .EditableChipInput-defaultWithChips--small {
10820
+ min-height: var(--spacing-60);
10821
+ padding-top: 0;
10822
+ padding-bottom: 0;
10026
10823
  }
10027
10824
 
10028
10825
  .EditableChipInput-defaultWithChips:hover,
10029
10826
  .EditableChipInput-default:hover {
10030
- background-color: var(--secondary-lightest);
10827
+ background-color: var(--secondary-lighter);
10828
+ box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
10829
+ }
10830
+
10831
+ .EditableChipInput:focus-visible .EditableChipInput-default,
10832
+ .EditableChipInput:focus-visible .EditableChipInput-defaultWithChips {
10833
+ background: var(--white);
10834
+ outline: var(--border-width-05) solid var(--primary-focus);
10835
+ outline-offset: var(--spacing-05);
10836
+ box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
10031
10837
  }
10032
10838
 
10033
10839
  .EditableChipInput-chipInput {
10034
10840
  padding-left: var(--spacing-20);
10035
10841
  }
10036
10842
 
10843
+ .EditableChipInput-chip--regular {
10844
+ margin: var(--spacing-05);
10845
+ }
10846
+
10847
+ .EditableChipInput-chip--small {
10848
+ margin-left: var(--spacing-05);
10849
+ margin-right: var(--spacing-05);
10850
+ margin-top: 0;
10851
+ margin-bottom: 0;
10852
+ }
10853
+
10854
+ .EditableChipInput-placeholder--small {
10855
+ padding-top: 0;
10856
+ }
10857
+
10037
10858
  .EditableChipInput-actions {
10038
10859
  position: absolute;
10039
10860
  display: flex;
@@ -10384,6 +11205,38 @@ body {
10384
11205
  box-sizing: border-box;
10385
11206
  }
10386
11207
 
11208
+ @media (forced-colors: active) {
11209
+ /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */
11210
+ .DismissibleRegularTab-icon--right:focus-visible,
11211
+ .DismissibleSmallTab-icon--right:focus-visible {
11212
+ outline: var(--border-width-05) solid Highlight;
11213
+ }
11214
+
11215
+ .Tab--active::after {
11216
+ background-color: transparent;
11217
+ border-top: var(--spacing-05) solid Highlight;
11218
+ box-sizing: border-box;
11219
+ }
11220
+
11221
+ /* Disabled tab pills use opacity — use GrayText instead */
11222
+ .Tab-pills--disabled {
11223
+ opacity: 1;
11224
+ color: GrayText;
11225
+ }
11226
+ }
11227
+
11228
+ .Dropzone-srOnly {
11229
+ position: absolute;
11230
+ width: var(--spacing-2-5);
11231
+ height: var(--spacing-2-5);
11232
+ padding: 0;
11233
+ margin: calc(-1 * var(--spacing-2-5));
11234
+ overflow: hidden;
11235
+ clip: rect(0, 0, 0, 0);
11236
+ white-space: nowrap;
11237
+ border: 0;
11238
+ }
11239
+
10387
11240
  .Dropzone {
10388
11241
  display: flex;
10389
11242
  align-items: center;
@@ -10564,6 +11417,30 @@ body {
10564
11417
  fill: var(--alert);
10565
11418
  }
10566
11419
 
11420
+ @media (forced-colors: active) {
11421
+ .Dropzone {
11422
+ border: var(--border-width-05) dashed ButtonText;
11423
+ background-image: none;
11424
+ background-color: Canvas;
11425
+ }
11426
+
11427
+ .Dropzone--active {
11428
+ border: var(--border-width-05) dashed Highlight;
11429
+ background-image: none;
11430
+ background-color: Canvas;
11431
+ }
11432
+
11433
+ .Dropzone--error {
11434
+ border: var(--border-width-05) dashed ButtonText;
11435
+ background-image: none;
11436
+ }
11437
+
11438
+ .Dropzone--disabled {
11439
+ border: var(--border-width-05) dashed GrayText;
11440
+ background-image: none;
11441
+ }
11442
+ }
11443
+
10567
11444
  .FileUploader {
10568
11445
  display: flex;
10569
11446
  flex-direction: column;
@@ -10635,8 +11512,9 @@ body {
10635
11512
  }
10636
11513
 
10637
11514
  .Table-Header-Label--hide {
10638
- animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
11515
+ animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
10639
11516
  animation-fill-mode: forwards;
11517
+ pointer-events: none;
10640
11518
  }
10641
11519
 
10642
11520
  .Table-Header-Label--show {
@@ -10644,6 +11522,36 @@ body {
10644
11522
  animation-fill-mode: forwards;
10645
11523
  }
10646
11524
 
11525
+ @keyframes tableHeaderFadeOut {
11526
+ from {
11527
+ opacity: 1;
11528
+ visibility: visible;
11529
+ }
11530
+ to {
11531
+ opacity: 0;
11532
+ visibility: hidden;
11533
+ }
11534
+ }
11535
+
11536
+ @media (prefers-reduced-motion: reduce) {
11537
+ .Table-Header-Label--hide,
11538
+ .Table-Header-Label--show {
11539
+ animation-duration: 0.001ms;
11540
+ }
11541
+ }
11542
+
11543
+ .Table-srOnly {
11544
+ position: absolute;
11545
+ width: var(--spacing-2-5);
11546
+ height: var(--spacing-2-5);
11547
+ padding: 0;
11548
+ margin: calc(-1 * var(--spacing-2-5));
11549
+ overflow: hidden;
11550
+ clip: rect(0, 0, 0, 0);
11551
+ white-space: nowrap;
11552
+ border: 0;
11553
+ }
11554
+
10647
11555
  /* Navigation */
10648
11556
 
10649
11557
  .Navigation {
@@ -10762,6 +11670,22 @@ body {
10762
11670
  border-top: var(--border);
10763
11671
  }
10764
11672
 
11673
+ .Navigation-footerButton {
11674
+ display: flex;
11675
+ align-items: center;
11676
+ justify-content: center;
11677
+ background: none;
11678
+ border: none;
11679
+ padding: 0;
11680
+ cursor: pointer;
11681
+ border-radius: 50%;
11682
+ }
11683
+
11684
+ .Navigation-footerButton:focus-visible {
11685
+ outline: var(--border-width-05) solid var(--primary-focus);
11686
+ outline-offset: var(--spacing-05);
11687
+ }
11688
+
10765
11689
  .Navigation--collapsed .Navigation-menuIcon--footer {
10766
11690
  transform: rotate(180deg);
10767
11691
  }
@@ -10983,7 +11907,8 @@ body {
10983
11907
  font-size: var(--font-size-s);
10984
11908
  }
10985
11909
 
10986
- .LinkButton--default {
11910
+ .LinkButton--default,
11911
+ .LinkButton--default-disabled {
10987
11912
  color: var(--primary);
10988
11913
  }
10989
11914
 
@@ -10995,21 +11920,25 @@ body {
10995
11920
  color: var(--primary-darker);
10996
11921
  }
10997
11922
 
10998
- .LinkButton--default:focus,
10999
- .LinkButton--default:focus-visible {
11923
+ .LinkButton--default:focus-visible,
11924
+ .LinkButton--default-disabled:focus-visible {
11000
11925
  outline: var(--border-width-05) solid var(--primary-focus);
11001
11926
  outline-offset: var(--spacing-05);
11002
11927
  }
11003
11928
 
11004
- .LinkButton--default:disabled {
11929
+ .LinkButton--default-disabled {
11005
11930
  cursor: not-allowed;
11006
- pointer-events: none;
11007
11931
  color: var(--primary-lighter);
11008
11932
  }
11009
11933
 
11934
+ .LinkButton-infoIcon--default {
11935
+ color: var(--text-link);
11936
+ }
11937
+
11010
11938
  /* Subtle Appearance */
11011
11939
 
11012
- .LinkButton--subtle {
11940
+ .LinkButton--subtle,
11941
+ .LinkButton--subtle-disabled {
11013
11942
  color: var(--inverse-lighter);
11014
11943
  }
11015
11944
 
@@ -11021,18 +11950,85 @@ body {
11021
11950
  color: var(--inverse);
11022
11951
  }
11023
11952
 
11024
- .LinkButton--subtle:focus,
11025
- .LinkButton--subtle:focus-visible {
11953
+ .LinkButton--subtle:focus-visible,
11954
+ .LinkButton--subtle-disabled:focus-visible {
11026
11955
  outline: var(--border-width-05) solid var(--primary-focus);
11027
11956
  outline-offset: var(--spacing-05);
11028
11957
  }
11029
11958
 
11030
- .LinkButton--subtle:disabled {
11959
+ .LinkButton--subtle-disabled {
11031
11960
  cursor: not-allowed;
11032
- pointer-events: none;
11033
11961
  color: var(--inverse-lightest);
11034
11962
  }
11035
11963
 
11964
+ .LinkButton-infoIcon--subtle {
11965
+ color: var(--inverse-light);
11966
+ }
11967
+
11968
+ .LinkButton-infoIconWrapper {
11969
+ position: absolute;
11970
+ top: calc(-1 * var(--spacing-05));
11971
+ right: calc(-1 * var(--spacing-30));
11972
+ width: var(--spacing-30);
11973
+ height: var(--spacing-30);
11974
+ box-sizing: border-box;
11975
+ border-radius: var(--border-radius-full);
11976
+ display: flex;
11977
+ align-items: center;
11978
+ justify-content: center;
11979
+ overflow: hidden;
11980
+ border: none;
11981
+ background: transparent;
11982
+ pointer-events: none;
11983
+ }
11984
+
11985
+ .LinkButton-infoIconWrapper--tiny {
11986
+ top: calc(-1 * var(--spacing-05));
11987
+ right: calc(-1 * var(--spacing-30));
11988
+ }
11989
+
11990
+ .LinkButton-infoIconWrapper--regularIcon {
11991
+ top: 0px;
11992
+ right: calc(-1 * var(--spacing-05));
11993
+ }
11994
+
11995
+ .LinkButton-infoIconWrapper--tinyIcon {
11996
+ top: calc(-1 * var(--spacing-05));
11997
+ right: calc(-1 * var(--spacing-05));
11998
+ }
11999
+
12000
+ .LinkButton-withInfo {
12001
+ padding-right: var(--spacing-20);
12002
+ }
12003
+
12004
+ .LinkButton-infoIconWrapper--withChildren {
12005
+ right: calc(-1 * var(--spacing-30) + var(--spacing-20));
12006
+ }
12007
+
12008
+ .LinkButton-infoIconWrapper--iconOnly {
12009
+ right: calc(-1 * var(--spacing-10) + var(--spacing-20));
12010
+ }
12011
+
12012
+ .LinkButton-infoIconWrapper--tinyIcon {
12013
+ right: calc(-1 * var(--spacing-05) + var(--spacing-20));
12014
+ }
12015
+
12016
+ .LinkButton-infoIcon {
12017
+ color: inherit;
12018
+ }
12019
+
12020
+ .LinkButton-srOnly {
12021
+ position: absolute;
12022
+ width: var(--spacing-2-5);
12023
+ height: var(--spacing-2-5);
12024
+ padding: 0;
12025
+ margin: calc(-1 * var(--spacing-2-5));
12026
+ overflow: hidden;
12027
+ clip: rect(0, 0, 0, 0);
12028
+ white-space: nowrap;
12029
+ border: 0;
12030
+ }
12031
+
11036
12032
  .ActionCard {
11037
12033
  border-radius: var(--border-radius-10);
11038
12034
  width: 100%;
@@ -11176,6 +12172,44 @@ body {
11176
12172
  opacity: var(--opacity-10);
11177
12173
  }
11178
12174
 
12175
+ @media (forced-colors: active) {
12176
+ /* All states use inset box-shadow as the sole border — replace with real borders */
12177
+ .Selection-card--default,
12178
+ .Selection-card--default:hover,
12179
+ .Selection-card--default:active,
12180
+ .Selection-card--default-disabled {
12181
+ border: var(--border-width-2-5) solid ButtonText;
12182
+ box-shadow: none;
12183
+ }
12184
+
12185
+ /* Interactive selected states — use Highlight to signal selection */
12186
+ .Selection-card--selected,
12187
+ .Selection-card--selected:hover,
12188
+ .Selection-card--selected:active {
12189
+ border: var(--border-width-2-5) solid Highlight;
12190
+ box-shadow: none;
12191
+ }
12192
+
12193
+ .Selection-card--selected-disabled {
12194
+ border: var(--border-width-2-5) solid GrayText;
12195
+ box-shadow: none;
12196
+ }
12197
+
12198
+ .Selection-card--default:focus,
12199
+ .Selection-card--default:focus-visible,
12200
+ .Selection-card--selected:focus,
12201
+ .Selection-card--selected:focus-visible {
12202
+ outline: var(--border-width-05) solid Highlight;
12203
+ outline-offset: var(--spacing-05);
12204
+ box-shadow: none;
12205
+ }
12206
+
12207
+ /* Disabled: suppress the focus indicator */
12208
+ .Selection-card--disabled {
12209
+ outline: none;
12210
+ }
12211
+ }
12212
+
11179
12213
  .Listbox {
11180
12214
  margin: 0;
11181
12215
  padding: 0;
@@ -11227,7 +12261,6 @@ body {
11227
12261
  background-color: var(--secondary-lightest);
11228
12262
  }
11229
12263
 
11230
- .Listbox-item--option:focus,
11231
12264
  .Listbox-item--option:focus-visible {
11232
12265
  outline: var(--border-width-05) solid var(--primary-focus);
11233
12266
  outline-offset: calc(-1 * var(--border-width-05));
@@ -11238,14 +12271,30 @@ body {
11238
12271
  }
11239
12272
 
11240
12273
  .Listbox-item--selected {
12274
+ position: relative;
11241
12275
  background: rgba(214, 238, 255, 0.48);
11242
12276
  }
11243
12277
 
12278
+ .Listbox-item--selected::before {
12279
+ content: '';
12280
+ position: absolute;
12281
+ top: var(--spacing-10);
12282
+ left: var(--spacing-10);
12283
+ width: var(--spacing-20);
12284
+ height: var(--spacing-20);
12285
+ background-color: var(--primary);
12286
+ clip-path: polygon(0 0, 100% 0, 0 100%);
12287
+ }
12288
+
12289
+ .Listbox-item--tight.Listbox-item--selected::before {
12290
+ top: var(--spacing-05);
12291
+ left: var(--spacing-05);
12292
+ }
12293
+
11244
12294
  .Listbox-item--selected:hover {
11245
12295
  background: rgba(139, 202, 254, 0.48);
11246
12296
  }
11247
12297
 
11248
- .Listbox-item--selected:focus,
11249
12298
  .Listbox-item--selected:focus-visible {
11250
12299
  outline: var(--border-width-05) solid var(--primary-focus);
11251
12300
  outline-offset: calc(-1 * var(--border-width-05));
@@ -11265,7 +12314,6 @@ body {
11265
12314
  background-color: var(--secondary-lightest);
11266
12315
  }
11267
12316
 
11268
- .Listbox-item--resource:focus,
11269
12317
  .Listbox-item--resource:focus-visible {
11270
12318
  outline: var(--border-width-05) solid var(--primary-focus);
11271
12319
  outline-offset: calc(-1 * var(--border-width-05));
@@ -11276,12 +12324,28 @@ body {
11276
12324
  }
11277
12325
 
11278
12326
  .Listbox-item--activated {
12327
+ position: relative;
11279
12328
  background: var(--primary-lightest);
11280
12329
  }
11281
12330
 
12331
+ .Listbox-item--activated::before {
12332
+ content: '';
12333
+ position: absolute;
12334
+ top: var(--spacing-10);
12335
+ left: var(--spacing-10);
12336
+ width: var(--spacing-20);
12337
+ height: var(--spacing-20);
12338
+ background-color: var(--primary);
12339
+ clip-path: polygon(0 0, 100% 0, 0 100%);
12340
+ }
12341
+
12342
+ .Listbox-item--tight.Listbox-item--activated::before {
12343
+ top: var(--spacing-05);
12344
+ left: var(--spacing-05);
12345
+ }
12346
+
11282
12347
  /* Listbox type - description */
11283
12348
 
11284
- .Listbox-item--description:focus,
11285
12349
  .Listbox-item--description:focus-visible {
11286
12350
  outline: none;
11287
12351
  }
@@ -11295,24 +12359,98 @@ body {
11295
12359
 
11296
12360
  /* Listbox type - draggable */
11297
12361
 
11298
- .Listbox-item--draggable:focus {
12362
+ .Listbox-item--draggable:hover {
12363
+ background-color: var(--secondary-lightest);
12364
+ }
12365
+
12366
+ .Listbox-item--draggable:focus-visible {
11299
12367
  outline: var(--border-width-05) solid var(--primary-focus);
11300
12368
  outline-offset: calc(-1 * var(--border-width-05));
11301
12369
  }
11302
12370
 
11303
12371
  .Listbox-item--drag-icon {
11304
12372
  cursor: grab;
11305
- margin-right: var(--spacing-20);
12373
+ padding: var(--spacing-10);
12374
+ margin-right: calc(var(--spacing-20) - var(--spacing-10));
12375
+ margin-left: calc(-1 * var(--spacing-10));
12376
+ border-radius: var(--border-radius-10);
12377
+ transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),
12378
+ color var(--duration--moderate-01) var(--standard-productive-curve),
12379
+ box-shadow var(--duration--moderate-01) var(--standard-productive-curve);
12380
+ }
12381
+
12382
+ .Listbox-item--drag-icon:focus-visible {
12383
+ outline: var(--border-width-05) solid var(--primary-focus);
12384
+ outline-offset: var(--spacing-05);
11306
12385
  }
11307
12386
 
11308
12387
  .Listbox-item--drag-icon:hover {
12388
+ background-color: var(--secondary);
11309
12389
  color: var(--inverse);
11310
12390
  }
11311
12391
 
11312
12392
  .Listbox-item--drag-icon:active {
12393
+ background-color: var(--secondary-dark);
11313
12394
  color: var(--primary);
11314
12395
  }
11315
12396
 
12397
+ /* Drag and reorder interaction states */
12398
+
12399
+ .Listbox-item--sticky-picked,
12400
+ .Listbox-item--drag-picked {
12401
+ background-color: var(--text-white);
12402
+ box-shadow: var(--shadow-l);
12403
+ rotate: 0.5deg;
12404
+ cursor: grabbing;
12405
+ z-index: 1000;
12406
+ position: relative;
12407
+ }
12408
+
12409
+ .Listbox-item--sticky-picked .Listbox-item--selected,
12410
+ .Listbox-item--drag-picked .Listbox-item--selected {
12411
+ background-color: rgba(214, 238, 255, 0.48);
12412
+ }
12413
+
12414
+ .Listbox-item--sticky-picked .Listbox-item--drag-icon {
12415
+ background-color: var(--primary);
12416
+ color: var(--text-white);
12417
+ }
12418
+
12419
+ .Listbox-item--drag-picked .Listbox-item--drag-icon {
12420
+ background-color: var(--primary-ultra-light);
12421
+ color: var(--primary);
12422
+ box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
12423
+ }
12424
+
12425
+ .Listbox-aria-live {
12426
+ position: absolute;
12427
+ width: var(--spacing-2-5);
12428
+ height: var(--spacing-2-5);
12429
+ padding: 0;
12430
+ margin: calc(-1 * var(--spacing-2-5));
12431
+ overflow: hidden;
12432
+ clip: rect(0, 0, 0, 0);
12433
+ white-space: nowrap;
12434
+ border: 0;
12435
+ }
12436
+
12437
+ @media (forced-colors: active) {
12438
+ .Listbox-item--description:focus-visible {
12439
+ outline: var(--border-width-05) solid Highlight;
12440
+ outline-offset: calc(-1 * var(--border-width-05));
12441
+ }
12442
+
12443
+ .Listbox-item--disabled {
12444
+ opacity: 1;
12445
+ color: GrayText;
12446
+ }
12447
+
12448
+ .Listbox-item--selected::before,
12449
+ .Listbox-item--activated::before {
12450
+ background-color: Highlight;
12451
+ }
12452
+ }
12453
+
11316
12454
  /* Selection avatar group */
11317
12455
  .SelectionAvatarGroup {
11318
12456
  box-sizing: border-box;
@@ -11509,6 +12647,28 @@ body {
11509
12647
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
11510
12648
  }
11511
12649
 
12650
+ @media (forced-colors: active) {
12651
+ .SelectionAvatarGroup-item--selected:focus,
12652
+ .SelectionAvatarGroup-item--selected:focus-visible {
12653
+ outline: var(--border-width-05) solid Highlight !important;
12654
+ outline-offset: var(--spacing-2-5);
12655
+ box-shadow: none !important;
12656
+ }
12657
+
12658
+ .SelectionAvatarCount--selected:focus,
12659
+ .SelectionAvatarCount--selected:focus-visible {
12660
+ outline: var(--border-width-05) solid Highlight !important;
12661
+ outline-offset: var(--spacing-2-5);
12662
+ box-shadow: none !important;
12663
+ }
12664
+
12665
+ /* The inner search input uses outline:none !important — restore it in forced-colors mode */
12666
+ .SelectionAvatar-input:focus-within {
12667
+ outline: var(--border-width-05) solid Highlight !important;
12668
+ outline-offset: var(--spacing-05);
12669
+ }
12670
+ }
12671
+
11512
12672
  .Select-input {
11513
12673
  min-width: unset !important;
11514
12674
  background: transparent;
@@ -11560,7 +12720,7 @@ body {
11560
12720
  color: var(--text);
11561
12721
  }
11562
12722
 
11563
- .Select-trigger--filled:focus {
12723
+ .Select-trigger--filled:focus-visible {
11564
12724
  background-color: var(--secondary-light);
11565
12725
  }
11566
12726
 
@@ -11665,10 +12825,11 @@ body {
11665
12825
  cursor: pointer;
11666
12826
  border-radius: var(--border-radius-full);
11667
12827
  padding: var(--spacing-05);
12828
+ border: none;
12829
+ background: transparent;
11668
12830
  }
11669
12831
 
11670
- .Select-crossButton:focus-visible,
11671
- .Select-crossButton:focus {
12832
+ .Select-crossButton:focus-visible {
11672
12833
  outline: var(--spacing-05) solid var(--primary-focus);
11673
12834
  }
11674
12835
 
@@ -11711,6 +12872,13 @@ body {
11711
12872
  border: var(--border-width-2-5) solid var(--alert) !important;
11712
12873
  }
11713
12874
 
12875
+ @media (forced-colors: active) {
12876
+ .Select-input:focus-within {
12877
+ outline: var(--border-width-05) solid Highlight !important;
12878
+ outline-offset: var(--spacing-05);
12879
+ }
12880
+ }
12881
+
11714
12882
  .Menu {
11715
12883
  overflow-y: auto !important;
11716
12884
  padding-top: var(--spacing-10);
@@ -11781,7 +12949,7 @@ body {
11781
12949
  height: var(--spacing-10);
11782
12950
  border-radius: var(--border-radius-full);
11783
12951
  margin: 0 var(--spacing-20);
11784
- background: var(--inverse-lightest);
12952
+ background: var(--inverse-lighter);
11785
12953
  }
11786
12954
 
11787
12955
  .ChatBubble-box--noSuccess {
@@ -11826,17 +12994,24 @@ body {
11826
12994
  flex: 0 0 auto;
11827
12995
  }
11828
12996
 
12997
+ .ChatBubble-actionBarWrapper--hidden {
12998
+ width: 0;
12999
+ overflow: hidden;
13000
+ }
13001
+
11829
13002
  .ChatInput {
11830
13003
  display: flex;
11831
13004
  flex-direction: row;
11832
13005
  align-items: center;
11833
- border: var(--border-width-2-5) solid var(--secondary);
13006
+ border: var(--border-width-2-5) solid var(--secondary-dark);
11834
13007
  padding: var(--spacing-20);
11835
13008
  border-radius: var(--border-radius-10);
11836
13009
  background: var(--white);
11837
13010
  max-width: 100%;
11838
13011
  min-width: var(--spacing-640);
11839
- transition: all var(--duration--slow-01) var(--standard-productive-curve);
13012
+ transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
13013
+ border-color var(--duration--slow-01) var(--standard-productive-curve),
13014
+ outline var(--duration--slow-01) var(--standard-productive-curve);
11840
13015
  max-height: var(--spacing-440);
11841
13016
  position: relative;
11842
13017
  box-sizing: border-box;
@@ -11906,7 +13081,8 @@ body {
11906
13081
  .ChatInput-actions {
11907
13082
  display: flex;
11908
13083
  flex-shrink: 0;
11909
- transition: all var(--duration--slow-01) var(--standard-productive-curve);
13084
+ transition: margin var(--duration--slow-01) var(--standard-productive-curve),
13085
+ width var(--duration--slow-01) var(--standard-productive-curve);
11910
13086
  margin-left: var(--spacing-20);
11911
13087
  align-items: center;
11912
13088
  }
@@ -11918,6 +13094,14 @@ body {
11918
13094
  margin-left: 0;
11919
13095
  }
11920
13096
 
13097
+ @media (prefers-reduced-motion: reduce) {
13098
+ .ChatInput,
13099
+ .ChatInput-actions,
13100
+ .ChatInput-textarea {
13101
+ transition: none;
13102
+ }
13103
+ }
13104
+
11921
13105
  .Meter {
11922
13106
  display: flex;
11923
13107
  align-items: center;
@@ -12061,7 +13245,7 @@ body {
12061
13245
  outline: none;
12062
13246
  }
12063
13247
 
12064
- .SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
13248
+ .SegmentedControl-segment:focus-visible {
12065
13249
  outline: var(--border-width-05) solid var(--primary-focus);
12066
13250
  outline-offset: var(--spacing-05);
12067
13251
  border-radius: var(--border-radius-10);
@@ -12241,41 +13425,21 @@ body {
12241
13425
  display: flex;
12242
13426
  align-items: center;
12243
13427
  color: var(--inverse);
12244
- background: linear-gradient(
12245
- 277deg,
12246
- rgba(227, 28, 121, 0.15) 0%,
12247
- rgba(231, 56, 79, 0.24) 28%,
12248
- rgba(240, 125, 0, 0.15) 100%
12249
- );
13428
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12250
13429
  }
12251
13430
 
12252
13431
  .AIButton:hover {
12253
- background: linear-gradient(
12254
- 277deg,
12255
- rgba(227, 28, 121, 0.2) 0%,
12256
- rgba(231, 56, 79, 0.32) 28%,
12257
- rgba(240, 125, 0, 0.2) 100%
12258
- );
13432
+ background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
12259
13433
  }
12260
13434
 
12261
13435
  .AIButton:active {
12262
- background: linear-gradient(
12263
- 277deg,
12264
- rgba(227, 28, 121, 0.31) 0%,
12265
- rgba(231, 56, 79, 0.48) 28%,
12266
- rgba(240, 125, 0, 0.31) 100%
12267
- );
13436
+ background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
12268
13437
  }
12269
13438
 
12270
13439
  .AIButton:disabled {
12271
13440
  cursor: not-allowed;
12272
13441
  opacity: var(--opacity-10);
12273
- background: linear-gradient(
12274
- 277deg,
12275
- rgba(227, 28, 121, 0.15) 0%,
12276
- rgba(231, 56, 79, 0.24) 28%,
12277
- rgba(240, 125, 0, 0.15) 100%
12278
- );
13442
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12279
13443
  }
12280
13444
 
12281
13445
  .AIButton:focus {
@@ -12311,22 +13475,12 @@ body {
12311
13475
  }
12312
13476
 
12313
13477
  .AIIconButton:hover {
12314
- background: linear-gradient(
12315
- 315deg,
12316
- rgba(227, 28, 121, 0.2) 0%,
12317
- rgba(231, 56, 79, 0.32) 19.79%,
12318
- rgba(240, 125, 0, 0.32) 100%
12319
- );
13478
+ background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
12320
13479
  color: var(--secondary) !important;
12321
13480
  }
12322
13481
 
12323
13482
  .AIIconButton:active {
12324
- background: linear-gradient(
12325
- 315deg,
12326
- rgba(227, 28, 121, 0.31) 0%,
12327
- rgba(231, 56, 79, 0.48) 19.79%,
12328
- rgba(240, 125, 0, 0.48) 100%
12329
- );
13483
+ background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
12330
13484
  color: var(--secondary-dark) !important;
12331
13485
  }
12332
13486
 
@@ -12387,30 +13541,16 @@ body {
12387
13541
  width: -moz-fit-content;
12388
13542
  width: fit-content;
12389
13543
  border: 0;
12390
- background: linear-gradient(
12391
- 274deg,
12392
- rgba(231, 56, 79, 0.24) 0%,
12393
- rgba(231, 56, 79, 0.24) 19.79%,
12394
- rgba(240, 125, 0, 0.24) 100%
12395
- );
13544
+ position: relative;
13545
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12396
13546
  }
12397
13547
 
12398
13548
  .AIChip:hover {
12399
- background: linear-gradient(
12400
- 274deg,
12401
- rgba(231, 56, 79, 0.32) 0%,
12402
- rgba(231, 56, 79, 0.32) 19.79%,
12403
- rgba(240, 125, 0, 0.32) 100%
12404
- );
13549
+ background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
12405
13550
  }
12406
13551
 
12407
13552
  .AIChip:active {
12408
- background: linear-gradient(
12409
- 274deg,
12410
- rgba(231, 56, 79, 0.48) 0%,
12411
- rgba(231, 56, 79, 0.48) 19.79%,
12412
- rgba(240, 125, 0, 0.48) 100%
12413
- );
13553
+ background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
12414
13554
  }
12415
13555
 
12416
13556
  .AIChip:focus,
@@ -12440,12 +13580,7 @@ body {
12440
13580
  /* Disabled Chip */
12441
13581
 
12442
13582
  .AIChip--disabled {
12443
- background: linear-gradient(
12444
- 274deg,
12445
- rgba(231, 56, 79, 0.24) 0%,
12446
- rgba(231, 56, 79, 0.24) 19.79%,
12447
- rgba(240, 125, 0, 0.24) 100%
12448
- );
13583
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
12449
13584
  }
12450
13585
 
12451
13586
  .AIChip-icon--disabled {
@@ -12460,12 +13595,13 @@ body {
12460
13595
 
12461
13596
  .AIChip:disabled {
12462
13597
  cursor: not-allowed;
12463
- background: linear-gradient(
12464
- 274deg,
12465
- rgba(231, 56, 79, 0.24) 0%,
12466
- rgba(231, 56, 79, 0.24) 19.79%,
12467
- rgba(240, 125, 0, 0.24) 100%
12468
- );
13598
+ background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
13599
+ }
13600
+
13601
+ .AIChip-AIIcon {
13602
+ position: absolute;
13603
+ top: calc(-1 * var(--spacing-05));
13604
+ right: calc(-1 * var(--spacing-05));
12469
13605
  }
12470
13606
 
12471
13607
  .AIResponse-container--glow {